*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: "Alegreya", serif;
}

html{
  scroll-behavior: smooth;
}

nav{
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(68, 67, 67, 0.123);
  backdrop-filter: blur(1px);
  padding: 0px 30px;
  font-size: 1.2rem;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);

}

nav img{
  display: inline-block;
  width: 200px;
  transition: all 1s;
}

nav img:hover{
  transform: scale(0.97);
}

nav ul{
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

nav ul li a{
  display: inline-block;
  padding: 1.1rem;
  text-decoration: none;
  color: white;
  transition: all 1s;
}

nav ul li a:hover{
  transform: scale(1.08);
  color: #8f7854;
  text-decoration: underline;
}

header{
  background-image: url(../Assets/drew-coffman-1872.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.to-up-icon{
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 15px;
  right: 15px;
}

.to-up-icon a i{
  font-size: 3rem;
  color: #8f7754;
  opacity: 0.2;
  transition: all 0.5s;
}

.to-up-icon a i:hover{
  font-size: 3rem;
  color: #8f7754;
  position: fixed;
  opacity: 0.7;
}

.side-icon{
  position: fixed;
  bottom: 50%;
  right: 0px;
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);

}

.side-icon a{
  display: block;
  margin: 10px;
}

.side-icon a i{
  font-size: 1.5rem;
  color: gray;
  display: inline-block;
  transition: all 0.5s;

}
.side-icon a i:hover{
  transform: scale(1.05);
  color: #8f7754;
}

header div{
  width: 55%;
  color: white;
  font-size: 1.4rem;
}

header h1{
  font-weight: normal;
  margin: 0.8rem;
  font-size: 5rem;
}

header .main button{
  padding: 1.2rem 2rem;
  display: inline-block;
  margin: 2rem 0.5rem;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 1.1rem;
  transition: all 1s;
}

header button.learn-more{
  background-color: #8f7754;
}

header button.contact-us{
  background-color: transparent;
  border: 2px white solid;
}


header button:hover{
  color: black;
  background-color: white;
  transform: scale(0.97);
  font-weight: bold;
}

#about{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 90%;
  margin: 5rem auto;
}

#about img{
  width: 500px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);

}

#about .who-we-are{
  width: 50%;
  padding: 20px;
}

#about .who-we-are h2{
  font-size: 2.5rem;
  font-weight: normal;
  margin-bottom: 20px;
}

#about .who-we-are p{
  font-size: 1.2rem;
  line-height: 1.8;
  color: rgba(73, 49, 49, 0.719);
}

#about ul{
  list-style-type: none;
}

#about ul li{
  margin-top: 1rem;
  color: rgba(73, 49, 49, 0.719);
  display: flex;
  align-items: center;
  font-size: 1.2rem;
}


#about ul li i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #8f7754;
  border: 1px solid #8f7754;
  border-radius: 50%;
  margin-right:1rem;
  transition: all 0.5s;
}

#about ul li i:hover{
  background-color: #8f7754;
  color: white;
  transform: scale(0.97);
}

#location{
  margin: 5rem auto;
  display: flex;
  justify-content: space-between;
  background-color: #eeeeee77;
  padding: 5rem;
}

#location img{
  width: 500px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);

}

#location div{
  width: 50%;
  margin-top: 5rem;
}

#location div h2{
  font-size: 2.5rem;
  font-weight: normal;
}

#location div p{
  margin: 1.5rem 0px;
  font-size: 1.2rem;
  line-height: 1.8;
  color: rgba(73, 49, 49, 0.719);
}

#our-backing{
  width: 90%;
  margin: 5rem auto;
}

#our-backing div.head{
  text-align: center;
  margin: 3rem 0px;
}

#our-backing div.head h2{
  font-size: 2.5rem;
  font-weight: normal;
}

#our-backing div.head p{
  margin: 1.5rem 0px;
  font-size: 1.2rem;
  line-height: 1.8;
  color: rgba(73, 49, 49, 0.719);
}

#our-backing div.backery-galary img{
  width: 32%;
  animation: gallery-animation 3s infinite ease-in-out;
  margin-bottom: 2rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);

}
@keyframes gallery-animation {
  0%{
    transform: translate(0px, 5px);
  }
  50%{
    transform: translate(0px);
  }
  100%{
    transform: translate(0px, 5px);
  }
}

#our-backing div.backery-galary{
  display: flex;
  justify-content: space-between;
}

#our-backing div.img-captions{
  display: flex;
  justify-content: space-between;
}

#our-backing div.img-captions div{
  width: calc(100% / 3.2);
  text-align: center;
}

#our-backing div.img-captions div h2{
  font-size: 1.5rem;
  font-weight: normal;
  margin-top: 1.5rem;
}

#our-backing div.img-captions div p{
  margin: 1.2rem 0px;
  font-size: 1.2rem;
  line-height: 1.8;
  color: rgba(73, 49, 49, 0.719);
}


#contact{
  margin: 5rem auto;
  display: flex;
  justify-content: space-around;
  background-color: #eeeeee77;
  padding: 5rem;
}

#contact .contact-info{
  margin-top: 3rem;
  width: 50%;
}

#contact .contact-info h2{
  font-size: 2.5rem;
  font-weight: normal;
}

#contact .contact-info p{
  margin: 1.5rem 0px;
  font-size: 1.2rem;
  line-height: 1.8;
  color: rgba(73, 49, 49, 0.719);
}

#contact .contact-info ul{
  list-style-type: none;
}

#contact .contact-info ul li{
  list-style-type: none;
  margin-top: 1rem;
  color: rgba(73, 49, 49, 0.719);
  display: flex;
  align-items: center;
  font-size: 1.2rem;
}

#contact .contact-info ul li i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #8f7754;
  border: 1px solid #8f7754;
  border-radius: 50%;
  margin-right:1rem;
  transition: all 0.5s;
}

#contact .contact-info ul li i:hover{
  background-color: #8f7754;
  color: white;
  transform: scale(0.97);
}

#contact .map iframe {
  display: inline-block;
  width: 500px;
  height: 500px;
  opacity: 0.5;
  border: 1px solid #8f775463;
  transition: all 1s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);

}

#contact .map iframe:hover {
  opacity: 1;
  transform: scale(1.01);
}

footer{
  margin-top: 5rem;
  color: white;
}

footer .info{
  padding: 5rem;
  color: white;
  background-color: #403d37;
  display: flex;
  justify-content: space-around;
}

footer .info div{
  width: calc(100% / 4);
}

footer .info div h2{
  font-weight: normal;
}

footer .info div p{
  margin: 1.5rem 0px;
  line-height: 1.8;
  font-size: 1rem;
  line-height: 1.8;
  color: #969696;
  transition: all 1s;
}


footer div ul li{
  margin: 1.5rem 0px;
  font-size: 0.8rem;
  padding: 10px;
  line-height: 1.8;
  color: #969696;
  border-bottom: 1px solid #96969686;
    transition: all 1s;

}
footer .info div p:hover{
  transform: scale(1.05);

  color: #9696967c;
  
}

footer div ul li:hover{
  color: #969696a6;
  transform: scale(1.05);
}

.copy-rights{
  background-color: #363431;
  text-align: center;
  padding: 2rem;
}


.copy-rights .footer-logo img{
  display: inline-block;
  margin: 20px;
}

.copy-rights .footer-logo p{
  margin-bottom: 20px;
  color: #969696;
}


.socail-media{
  display: flex;
  justify-content: center;
  align-items: center;
}


.copy-rights span i{
  font-size: 20px;
  color: #969696;
  margin: 10px;
  width: 40px;
  height: 40px;
  border: 1px solid #969696;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}

.fa-facebook:hover{
  color: #0866ff;
  background-color: white;
  transform: scale(0.97);
}

.fa-twitter:hover{
  color: #1c96e8;
  background-color: white;
  transform: scale(0.97);
  
}

.fa-linkedin:hover{
  background-color: white;
  transform: scale(0.97);
  color: #0079b5;
}