/*    font-family: 'Duru Sans', sans-serif;  */
@import url('https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Martel:wght@800&display=swap');

/*      start of section1 styles     */
*{
  font-family: 'Duru Sans', sans-serif;
}
#section1{
  margin: 0px;
  background: rgba(116, 98, 83, 0.5);
  background-image: url('../assets/backgrounds/h_img.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
}
#top{
  width: 6em;
  margin-top: 10rem;
  margin-left: 8rem;
}
#bottom{
  width: 3em;
  margin-top: 12rem;
  margin-bottom: 2rem;
  margin-left: 9.7rem;
  animation: bounce 2.5s infinite;
}
@keyframes bounce{
  0%, 20%, 50%, 80%, 100%{
    transform: translateY(0);
  }
  30%{
    transform: translateY(-1.5rem);
  }
  60%{
    transform: translateY(-3rem);
  }
}
#section1 div.text h1{
  font-weight: 600;
  line-height: 3rem;
  margin-top: 3rem;
  word-spacing: 0.5rem;
  font-size: 2rem;
}
#section1 div.text h3{
  font-size: small;
  margin-top: -0.5rem;
}
/*      end of section1 styles     */
/*      start of section2 styles     */
section#about {
  text-align: center;
  margin-top: 5rem;
  margin-bottom: 5rem;
}
/*      end of section2 styles     */
/*      start of section3 styles     */
#section3{
  margin: 0px;
  background-image: url('../assets/backgrounds/s_image.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
}
#section3 div.container{
  padding: 1rem;
}
/*      end of section3 styles     */
/*      start of section4 styles     */
section#section4, section#section5 {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
section#section4 h1, section#section5 h1{
  margin-bottom: 2rem;
  margin-top: -2rem;
}
section#section4 div.col-md-4{
  padding: 1rem;
}
section#section4 div.hidden{
  display: none;
}
section#section4 div.col-md-4 h3{
  padding: 1rem;
}
section#section4 .hidden h2{
  text-decoration: underline;
}
/*      end of section4 styles     */
/*      start of section5 styles      */
section#section5 .row h5{
  display: none;
  margin: -14rem 1.7rem;
  padding: 4rem;
  position: absolute;
  background-color: rgba(188, 191, 196, 0.5);
  border: solid ;
  color: #fff;
  font-weight: bolder;
  font-family: 'Martel', serif;
}
section#section5 .row img, section#section5 .row{
  margin-bottom: 1rem;
}
section#section5 img{
  width: 98%;
}
/*      end of section5 styles      */

/*      start of section6 styles     */
section#section6{
  text-align: center;
  background: rgba(116, 98, 83, 0.5);
  background-image: url('../assets/backgrounds/c_image.jpg');
  margin-top: -1rem;
}
#emailHelp{
  text-align: left;
}
section#section6 h1{
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #fff;
}
section#section6 input{
  background: transparent;
  margin: 0.3rem;
  color: #fff;
}
section#section6 textarea{
  background: transparent;
  margin-top: 1rem;
  margin-bottom: 0rem;
  color: #fff;
}
.form-control::-webkit-input-placeholder { 
  color: white; 
}
section#section6 input.btn:hover{
  background-color: rgba(226, 175, 74, 1);
  border: none;
}

/*      end of section6 styles      */
/*      start of footer styles      */

footer div.icon img{
  width: 5rem;
}
footer{
  margin: 3rem 0rem 2rem 0rem;
  text-align: center;
}
footer p{
  font-family: 'Martel', serif;
}
footer div.icon{
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}
/*      end of footer styles      */
/*      start of media queries     */
@media (min-width: 767.7px){
  #top{
    width: 8em;
    margin-top: 19rem;
    margin-left: 18.2rem;
  }
  #bottom{
    width: 4em;
    margin-top: 17rem;
    margin-bottom: 3rem;
    margin-left: 21.7rem;
  }
  #section1 div.text h1{
    font-weight: 600;
    line-height: 5rem;
    margin-top: 3rem;
    word-spacing: 1rem;
    font-size: 3rem;
  }
  #section1 div.text h3{
    font-size: medium;
    margin-top: -0.5rem;
  }
  #section3 div.container{
    padding: 4rem;
  }
}
section#section6 textarea{
  margin-bottom: 1rem;
}
@media (min-width: 1365.9px){
  #top{
    width: 7em;
    margin-top: 8rem;
    margin-left: 32.2rem;
  }
  #bottom{
    width: 4em;
    margin-top: 10rem;
    margin-bottom: 1.5rem;
    margin-left: 33.7rem;
  }
  #section1 div.text h1{
    font-weight: 600;
    line-height: 3.8rem;
    margin-top: 3rem;
    word-spacing: 0.6rem;
    font-size: 2.5rem;
  }
  #section1 div.text h3{
    font-size: medium;
    margin-top: -0.5rem;
  }
  #section3 div.container{
    padding: 4.2rem;
  }
  #section3 div.container p{
    line-height: 2.5rem;
    margin-top: -0.8rem;
  }
}
@media (min-width: 1527.9px){
  #top{
    width: 7em;
    margin-top: 10rem;
    margin-left: 37.2rem;
  }
  #bottom{
    width: 4em;
    margin-top: 12rem;
    margin-bottom: 2rem;
    margin-left: 39.7rem;
  }
  #section1 div.text h1{
    font-weight: 600;
    line-height: 5rem;
    margin-top: 3rem;
    word-spacing: 1rem;
    font-size: 3rem;
  }
  #section1 div.text h3{
    font-size: medium;
    margin-top: -0.5rem;
  }
  #section3 div.container{
    padding: 7.5rem;
  }
  #section3 div.container p{
    line-height: 2.5rem;
    margin-top: -0.8rem;
  }
}
@media (min-width: 1919.9px){
  #top{
    width: 8em;
    margin-top: 17rem;
    margin-left: 37.2rem;
  }
  #bottom{
    width: 4em;
    margin-top: 17rem;
    margin-bottom: 2rem;
    margin-left: 39.7rem;
  }
  #section1 div.text h1{
    font-weight: 600;
    line-height: 5rem;
    margin-top: 3rem;
    word-spacing: 1rem;
    font-size: 3rem;
  }
  #section1 div.text h3{
    font-size: medium;
    margin-top: -0.5rem;
  }
  section#about {
    text-align: center;
    margin-top: 5rem;
    margin-bottom: 5rem;
    padding: 2.5rem;
  }
  section#about p{
    font-size: 1.5rem;
  }
  #section3 div.container{
    padding: 7.2rem;
  }
  #section3 div.container p{
    line-height: 2.5rem;
    margin-top: -0.8rem;
    font-size: 1.5rem;
  }
  section#section6 textarea{
    margin-bottom: 3rem;
  }
  section#section6 input.btn{
    margin-bottom: 7rem;
  }
}
/*      end of media queries     */