@font-face {
  font-family: BebasNeue;
  src: url('../fonts/BebasNeue-Regular.woff2');
}
 
html {
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
 
body {
  height: 0;
  padding: 0;
  margin: 0;
}
 
header {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 80px;
  max-height: 80px;
  background-color: white;
  box-shadow: 10px 0 30px #363e53;
  z-index: 2;
}
 
header ul {
  display: flex;
  justify-content: space-between;
  position: relative;
  list-style: none;
  width: 400px;
  padding: 0;
}
 
header .nav-menu {
  visibility: hidden;
  position: absolute;
}

@media screen and (max-width: 900px) {
  header {
    align-items: center;
    justify-content: flex-end;
  }

  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: 120px;
   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: #65342d;;
  padding: 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  white-space: nowrap;
}
 
header .nav-link:hover {
  color: #f59421;
}
 
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/bg-1.jpg');
  background-size: 100vw;
  background-position: bottom;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 100vh;
  background-color: #f59421;
  font-family: multiExtraBold;
  color: white;
  padding: 20px;
}

@media screen and (max-width: 905px) {
  #main #sectionOne {
    background-image: none;
    flex-direction: column;
    align-items: center;
  }
}

#main #sectionOne img {
  width: 500px;
  height: 500px;
}

@media screen and (max-width: 560px) {
  #main #sectionOne img {
    width: 250px;
    height: 250px;
  }
}

#main #sectionOne .title {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}

#main #sectionOne .title h1 {
  font-size: 90px;
  margin: 0;
  font-family: BebasNeue;
  font-weight: normal;
  white-space: nowrap;
}

#main #sectionOne .title .row-one {
  margin-bottom: -35px;
}

#main #sectionOne .title .row-two {
  margin-bottom: -35px;
}

#main #sectionOne .title .row-three {
  margin-bottom: -35px;
}

@media screen and (max-width: 440px) {
  #main #sectionOne .title h1 {
    font-size: 50px;
  }

  #main #sectionOne .title .row-one {
    margin-bottom: -20px;
  }
  
  #main #sectionOne .title .row-two {
    margin-bottom: -20px;
  }
  
  #main #sectionOne .title .row-three {
    margin-bottom: -20px;
  }
}
 
#main #sectionTwo {
  background-image: url('../images/bg-2.jpg');
  background-size: 100vw;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: #65342d;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 30px;
}

#main #sectionTwo .content {
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 905px) {
  #main #sectionTwo .content {
    margin-bottom: 50vh;
  }
}

#main #sectionTwo .content .row-one {
  text-align: center;
  margin-bottom: -20px;
}

#main #sectionTwo .content .row-two {
  text-align: center;
}

#main #sectionTwo .content h3 {
  font-family: BebasNeue;
  color: white;
  font-size: 80px;
  margin: 0;
  white-space: nowrap;
}

@media screen and (max-width: 440px) {
  #main #sectionTwo .content h3 {
    font-size: 40px;
  }

  #main #sectionTwo .content .row-one {
    text-align: center;
    margin-bottom: -10px;
  }
  
  #main #sectionTwo .content .row-two {
    text-align: center;
  }
}

#main #sectionTwo .content p {
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  width: 550px;
  max-width: 90vw;
  font-size: 20px;
  color: white;
}
 
#main #sectionThree {
  background-image: url('../images/bg-3.jpg');
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

@media screen and (max-width: 905px) {
  #main #sectionThree {
    flex-direction: column-reverse;
  }
}

#main #sectionThree .left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 905px) {
  #main #sectionThree .left {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}

#main #sectionThree .left .row-one {
  color: #f59421;
  font-family: BebasNeue;
  font-size: 80px;
  margin: 0;
  margin-bottom: -20px;
}

#main #sectionThree .left .row-two {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 35px;
  margin: 0;
}

#main #sectionThree .left .row-three {
  display: flex;
  align-items: center;
  margin-top: 30px;
}

#main #sectionThree .left .row-three img {
  width: 55px;
  height: 55px;
  margin-right: 5px;
}

#main #sectionThree .left .row-three h1 {
  color: white;
  font-family: BebasNeue;
  font-size: 60px;
  margin: 0;
}

@media screen and (max-width: 440px) {
  #main #sectionThree .left .row-one {
    font-size: 40px;
    margin-bottom: -10px;
  }
  #main #sectionThree .left .row-two {
    font-size: 20px;
  }
  #main #sectionThree .left .row-three h1 {
    font-size: 30px;
  }
  #main #sectionThree .left .row-three img {
    width: 35px;
    height: 35px;
  }
}

#main #sectionThree .right .form-div h1 {
  font-family: BebasNeue;
  color: white;
  font-size: 60px;
  text-align: center;
}

#main #sectionThree .right form {
  display: flex;
  flex-direction: column;
  width: 500px;
  max-width: 90vw;
}

#main #sectionThree .right form label {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-family: 20px;
  font-weight: bold;
}

#main #sectionThree .right form input {
  margin-bottom: 10px;
  height: 40px;
  font-size: 20px;
  color: #65342d;
  border: none;
  border-radius: 5px;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium {
  max-width: none !important;
}

#main #sectionThree .right form textarea {
  margin-bottom: 10px;
  height: 200px;
  resize: none;
  font-size: 20px;
  color: #65342d;
  border: none;
  border-radius: 5px;
}

#main #sectionThree .right form button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  background-color: #65342d;
  font-weight: bold;
  color: white;
  border: none;
  position: relative;
  align-self: flex-end;
  padding: 10px 40px 10px 40px;
  border-radius: 5px;
}

#main #sectionThree .right form text-area {
  font-family: multiRegular;
  color: white;
}
 
footer {
  height: 100px;
  background-color: #f59421;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

footer .social-media {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
}

footer .social-media .logo {
  height: 30px;
}

footer .copyright {
  display: flex;
  align-items: center;
  justify-content: center;
}

footer .copyright p {
  margin: 0;
}

@media screen and (max-width: 440px) {
  footer {
    justify-content: center;
    padding-left: 0;
  }
  footer .logo {
    margin-left: 0;
  }
}