@font-face {

  font-family: madeTommyLight;

  src: url('../fonts/MADE-TOMMY-Light.otf');

 }

 

 @font-face {

  font-family: madeTommyMedium;

  src: url('../fonts/MADE-TOMMY-Medium.otf');

 }

 

 @font-face {

  font-family: madeTommyBold;

  src: url('../fonts/MADE-TOMMY-Bold.otf');

 }

 

 @font-face {

  font-family: madeTommyExtraBold;

  src: url('../fonts/MADE-TOMMY-ExtraBold.otf');

 }



 @font-face {

   font-family: maura;

   src: url('../fonts/MUARA\ DEMO\ .ttf');

 }

 

 html {

  padding: 0;

  overflow-x: hidden;

  min-width: 100vw;

  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 {

  height: 160px;

 }

 

 header ul {

  display: inline-flex;

  position: relative;

  list-style: none;

  margin-right: 50px;

 }

 

 header .nav-menu {

  visibility: hidden;

  position: absolute;

 }

 header #banner {
  position: absolute;
  top: 175px;
  left: 18px;
 }

 header #banner:hover {
  width: 135px;
  height: 165px;
  left: 10px;
 }
 

 @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;

   display: flex;

   justify-content: flex-end;
  }

  header #banner {
    top: 144px;
   }

  @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: #DF6215;

  padding: 3px;

  font-family: madeTommyMedium;

  white-space: nowrap;

 }

 

 header .nav-link:hover {

  border-bottom: 2px #DF6215 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 {

  /* position: relative; */

  z-index: -1;

 }

 

 #main #sectionOne {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background-color: #DF6215;

  min-height: 700px;

 }



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

  #main #sectionOne {

    justify-content: center;

    padding-top: 50px;

    padding-bottom: 50px;

  }

 }



#main #sectionOne .text-div {

  display: flex;

  flex-direction: column;

  align-items: center;

  color: white;

  font-size: 80px;

  font-family: maura;

  margin-left: 100px;

}



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

  #main #sectionOne .text-div {

    margin-left: 0;

  }

}



#main #sectionOne .text-div .row-one {

  margin: 0;

  margin-bottom: -30px;

  white-space: nowrap;

}



#main #sectionOne .text-div .row-two {

  margin: 0;

  font-size: 180px;

  margin-top: -30px;

}



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

  #main #sectionOne .text-div .row-one {

    font-size: 100px;

  }

  #main #sectionOne .text-div .row-two {

    font-size: 113px;

    margin-top: -10px;

  }

}



#main #sectionOne .text-div .img-div {

  width: 800px;

  display: none;

}



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

  #main #sectionOne .text-div .img-div {

    display: block;

    max-width: 90vw;

  }

}



#main #sectionOne .text-div .contact-button {

  background-color: #292357;

  font-size: 40px;

  padding: 2px 50px 2px 50px;

  border-radius: 10px;

  text-decoration: none;

  color: white;

}



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

  #main #sectionOne .img-div {

    display: none;

  }

 }



#main #sectionOne .img-div img {

  width: 800px;

}

 

#main #sectionTwo {

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

  background-size: cover;

  min-height: 800px;

  display: flex;

  align-items: center;

  display: flex;

  justify-content: space-around;

}



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

  #main #sectionTwo {

    flex-direction: column;

  }

}



#main #sectionTwo .text-div {

  display: flex;

  flex-direction: column;

  max-width: 500px;

  color: #292357;

  margin-left: 20px;

  margin-right: 20px;

}



#main #sectionTwo .text-div h1 {

  font-family: maura;

  font-size: 40px;

}



#main #sectionTwo .text-div p {

  font-family: madeTommyMedium;

}



#main #sectionTwo a {

  text-decoration: none;

}



#main #sectionTwo .services-div {

  display: flex;

  flex-wrap: wrap;

  max-width: 400px;

}



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

  #main #sectionTwo .services-div {

    justify-content: center;

    margin-bottom: 50px;

  }

}



#main #sectionTwo .services-div .service {

  display: flex;

  flex-direction: column;

  align-items: center;

}



#main #sectionTwo .services-div .service img {

  height: 150px;

}



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

  #main #sectionTwo .services-div .service img {

    height: 120px;

  }

}



#main #sectionTwo .services-div .service p {

  margin: 0;

  font-family: madeTommyBold;

  color: #292357;

}



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

  #main #sectionTwo .services-div .service p {

    font-size: 14px;

  }

}

 

 #main #sectionThree {

  display: flex;

  justify-content: space-around;

  align-items: center;

  background-color: #292357;

  min-height: 700px;

 }



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

   #main #sectionThree {

     flex-direction: column-reverse;

   }

 }



#main #sectionThree .left form {

  display: flex;

  flex-direction: column;

  width: 500px;

  margin-left: 30px;

  margin-right: 30px;

  max-width: 90vw;

}



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

  #main #sectionThree .left form {

    margin-bottom: 50px;

  }

}



 #main #sectionThree .left form label {

   color: white;

   font-family: madeTommyMedium;

   font-size: 20px;

   font-weight: inherit;

 }



 #main #sectionThree .left form input {

   background-color: #292357;

   border: none;

   border-bottom: 2px solid white;

   color: white;

   outline: none;

   margin-bottom: 10px;

   min-width: 500px;

   max-width: 90vw;

 }



 #main #sectionThree .left form textarea {

  background-color: #292357;

  border: none;

  border-bottom: 2px solid white;

  color: white;

  resize: none;

  outline: none;

  height: 200px;

  margin-bottom: 10px;

}

#main #sectionThree .left .wpforms-submit-container {
 display: flex;
 
 justify-content: flex-end;

}



#main #sectionThree .left form button {

  position: relative;

  align-self: flex-end;

  background-color: #DF6215;

  border: none;

  border-radius: 2px;

  font-family: maura;

  font-size: 20px;

  letter-spacing: 3px;

  color: white;

  width: 120px;

  padding-top: 5px;

  padding-bottom: 5px;

}



#main #sectionThree .right {

  position: relative;

  align-self: flex-end;

  display: flex;

  flex-direction: column;

}



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

  #main #sectionThree .right {

    height: 677px;

    margin-right: 30px;

    justify-content: space-between;

  }

}



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

  #main #sectionThree .right {

    flex-direction: row-reverse;

    justify-content: space-around;

    height: fit-content;

    align-items: center;

    width: 100vw;

    margin-right: 0;

  }

}



#main #sectionThree .right h1 {

  font-family: maura;

  font-size: 60px;

  color: white;

  white-space: nowrap;

}



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

  #main #sectionThree .right h1 {

    font-size: 40px;

  }

}



#main #sectionThree .right img {

  height: 500px;

}



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

  #main #sectionThree .right img {

    height: 250px;

  }

}



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

  #main #sectionThree .right img {

    height: 120px;

  }

}



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

  #main #sectionThree .right img {

    display: none;

  }

}

 

footer {

  display: flex;

  height: 300px;

  background-color: white;

  justify-content: space-between;

  align-items: center;

  padding: 0 80px 0 20px;

}



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

  footer {

    padding: 0 50px 0 0;

  }

}



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

  footer {

    padding-right: 10px;

  }

}



footer .left img {

  height: 300px;

}



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

  footer .left img {

    height: 160px;

    width: 160px;

  }

}

footer .middle img {
  height: 372px;
}


footer .right a {
  text-decoration: none;
}



footer .right .info {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  color: #DF6215;

  font-family: madeTommyMedium;

  white-space: nowrap;

}

@media screen and (max-width: 850px) {
  footer .middle img {
    height: 200px;
    bottom: 69px;
    position: relative;
  }
}

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

  footer .right .info {

    font-size: 10px;

  }

}


@media screen and (max-width: 480px) {
  
  footer {
    flex-direction: column;
  }

  footer .middle img {
    position: inherit;
  }
}



footer .right .info img {

  margin-left: 10px;

  height: 30px;

}