@font-face {

  font-family: multiRegular;

  src: url('../fonts/Muli-Regular.ttf');

}

 

@font-face {

  font-family: multiBold;

  src: url('../fonts/Muli-Bold.ttf');

}



@font-face {

  font-family: multiExtraBold;

  src: url('../fonts/Muli-ExtraBold.ttf');

}

 

 html {

  padding: 0;

  overflow-x: hidden;

  scroll-behavior: smooth;

 }

 

 body {

  height: 0;

  padding: 0;

  margin: 0;

 }

 

 header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  min-height: 160px;

  max-height: 160px;

  background-color: white;

  box-shadow: 10px 0 30px #363e53;

  z-index: 2;

 }

 

 header img {

  padding-left: 50px;

  height: 80px;

 }



 @media screen and (max-width: 390px) {

   header img {

    padding-left: 10px;

    height: 60px;

   }

 }

 

 header ul {

  display: inline-flex;

  position: relative;

  list-style: none;

  margin-right: 50px;

 }

 

 header .nav-menu {

  visibility: hidden;

  position: absolute;

 }

 

 @media screen and (max-width: 900px) {

  header ul {

   visibility: hidden;

   position: absolute;

  }

 

  @keyframes verticalSlide {

   from {max-height: 0;}

   to {max-height: 500px;}

  }

  

  header .nav-menu.visible {

   visibility: visible;

   position: absolute;

   top: 160px;

   padding-left: 20px;

   width: 100vw;

   background-color: white;

   opacity: 80%;

   animation-name: verticalSlide;

   animation-duration: 1s;

  }

 

  @keyframes fadeIn {

   from {opacity: 0%;}

   to {opacity: 100%;}

  }

 

  header .nav-menu .nav-content.visible {

    visibility: visible;

    position: relative;

    display: flex;

    flex-direction: column;

    list-style: circle;

    animation-name: fadeIn;

    animation-duration: 1s;

  }

}

 

header li {

  margin: 0 8px 0 8px;

}

 

header .nav-link {

  text-decoration: none;

  color: #0C2664;

  padding: 3px;

  font-family: multiRegularBold;

  white-space: nowrap;

}

 

header .nav-link:hover {

  border-bottom: 2px #E3C48D solid;

  opacity: 70%;

}

 

header .menu {

  visibility: hidden;

  position: absolute;

}

 

 @media screen and (max-width: 900px) {

  header .menu {

   visibility: visible;

   position: relative;

   background-color: white;

   border: none;

   margin-right: 40px;

  }

  

  header .menu:hover {

   cursor: pointer;

   opacity: 60%;

  }

 

  header .menu:active {

   height: 32px;

  }

  

  header .menu .icon {

   height: 20px;

  }

 }

 

 header .top-button {

   position: fixed;

   bottom: 30px;

   right: 30px;

 }

 

 header .top-button .icon {

   height: 50px;

 }

 

#main {

  z-index: -1;

}

 

#main #sectionOne {

  background-image: url('../images/cms_bg1.jpg');

  background-size: cover;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-height: 800px;

  font-family: multiExtraBold;

  color: white;

}



#main #sectionOne {

  text-shadow: 10px 10px 10px gray;

}



#main #sectionOne .row-one {

  font-size: 70px;

  margin: 0;

}



#main #sectionOne .row-two {

  font-size: 80px;

  margin: 0;

  margin-top: -25px;

}



@media screen and (max-width: 390px) {

  #main #sectionOne .row-one {

    font-size: 40px;    

  }

  #main #sectionOne .row-two {

    font-size: 50px;

    margin-top: -20px;

  }

}

 

#main #sectionTwo {

  background-image: url('../images/cms_bg2.jpg');

  background-size: cover;

  min-height: 800px;

  display: flex;

  flex-direction: column;

  align-items: center;

}



#main #sectionTwo h3 {

  font-family: multiExtraBold;

  font-size: 30px;

}



#main #sectionTwo p {

  text-align: center;

  font-family: multiRegular;

  width: 700px;

  max-width: 90vw;

  font-size: 15px;

}



#main #sectionTwo .services {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin-top: 100px;

  margin-bottom: 100px;

  padding-left: 10px;

  padding-right: 10px;

}



#main #sectionTwo .services .service {

  display: flex;

  align-items: center;

  max-width: 300px;

}



#main #sectionTwo .services .service img {

  height: 14px;

}



#main #sectionTwo .services .service p {

  margin: 0;

  text-align: left;

  font-family: multiBold;

}

 

#main #sectionThree {

  background-image: url('../images/cms_bg3.jpg');

  background-size: cover;

  min-height: 800px;  

  display: flex;

  align-items: center;

  justify-content: flex-end;

}



@media screen and (max-width: 860px) {

  #main #sectionThree {

    justify-content: center;

  }

}



#main #sectionThree .form-div h1 {

  font-family: multiExtraBold;

  color: white;

  font-size: 40px;

}



#main #sectionThree form {

  display: flex;

  flex-direction: column;

  width: 500px;

  max-width: 90vw;

  margin-right: 200px;

}



@media screen and (max-width: 860px) {

  #main #sectionThree form {

    margin-right: 0;

  }

}



#main #sectionThree form input {

  margin-bottom: 10px;

  height: 40px;

  font-size: 20px;

  color: #fac166;

  border: 2px solid #e3c28c;

}



#main #sectionThree form input::placeholder {

  font-family: multiRegular;

  color: #e3c28c;

  font-size: 20px;

}

.wpforms-field-medium {
  max-width: none !important;
}

#main #sectionThree form textarea {

  margin-bottom: 10px;

  height: 200px;

  resize: none;

  font-size: 20px;

  color: #fac166;

  border: 2px solid #e3c28c;

}



#main #sectionThree form textarea::placeholder {

  font-family: multiRegular;

  color: #e3c28c;

  font-size: 20px;

}


.wpforms-submit-container {
  display: flex;
  justify-content: flex-end;
}


#main #sectionThree form button {

  font-family: multiBold;

  font-size: 20px;

  background-color: #0C2664;

  color: white;

  position: relative;

  align-self: flex-end;

  padding: 10px 40px 10px 40px;

  border: none;

}



#main #sectionThree form text-area {

  font-family: multiRegular;

  color: white;

}

 

footer {

  background-image: url('../images/cms_bg_footer.jpg');

  background-size: 1200px;

  background-repeat: no-repeat;

  background-position: left;

  height: 300px;

  background-color: #0C2664;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-right: 30px;

  padding-left: 30px;

}



@media screen and (max-width: 720px) {

  footer {

    background-position: right;

    background-size: 720px;

    height: 180px;

    justify-content: flex-end;

  }

}



@media screen and (max-width: 560px) {

  footer {

    background-image: none;

  }

}



footer .logo {

  height: 100px;

  width: 260px;

}



@media screen and (max-width: 720px) {

  footer .logo {

    display: none;

    position: absolute;

  }

}



footer .contact-item {

  display: flex;

  align-items: center;

}



footer .contact-item img {

  height: 20px;

  margin-right: 5px;

}



footer .contact-item p {

  color: white;

  font-family: multiRegular;

}