@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,500&display=swap');

body, html {
  height: 100%;
  font-family: 'Lora', serif;
}

/* HEADER */

#header {
  /* The image used */
  background-image: url("../img/2.png");

  /* Half page */
  height: 50%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* NAVBAR */

.navbar {
  background-color: #3C486C;
  top: -5%;

}

.nav-item a:hover {
  text-decoration: underline;
  color: #fff;
}

.navbar-brand, .nav-contacts a {
  text-decoration: none;
  color: #E4D587;
}

.nav-contacts a:hover {
  text-decoration: underline;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(228, 213, 135, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(228, 213, 135);
}

.collapse {
  display: flex;
  justify-content: space-between;
}

.nav-link {
  color: #fff;
}

.custom-color h2{
  color: #E4D587;
}
.custom-color ul{
  color: #3C486C;
}

/* OUR WORK/CAROUSEL SECTION */

.our-work h2{
  color: #E4D587;
}

.carousel-caption {
  background-color: rgba(60, 72, 108, 0.5);
  color: #E4D587;
  
}
/*Arrows shape change --------*/
.carousel-control-prev, 
.carousel-control-next {
  background-color: rgba(60, 72, 108, 0.5);
  width: 60px;
  height: 60px;
  border-radius: 35px;
  top: 45%;

}

/*Arrows color change --------*/
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E4D587' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E4D587' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

/* CONTACTS SECTION */

#contacts {
  height: 82%;
}

#contacts .row {
  height: 87%;
}

.custom-color a{
  width: 50%;
  text-decoration: none;
  color: #3C486C;
}

.custom-color a:hover {
  border-radius: 5px;
  background-color: rgba(228, 213, 135, 0.5);
}

.custom-color button {
  width: 50%;
  background: transparent;
  color: #3C486C;
}
.custom-color button:hover {
  border-radius: 5px;
  background-color: rgba(228, 213, 135, 0.5);
}

/* FOOTER */

.footer {
  background-color: #3C486C;
  height: 85px;
  bottom: 0;
}

.quote a {
  text-decoration: none;
}

.quote a:hover {
  text-decoration: underline;
}

.f-i img {
  margin: 0 5px;
  height: 40px;
  filter: invert(96%) sepia(42%) saturate(1968%) hue-rotate(305deg) brightness(116%) contrast(79%);
}

.f-i img:hover {
  border-radius: 25px;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(85deg) brightness(102%) contrast(109%);
}