@import url("https://use.typekit.net/oov2wcw.css");

* {
  font-family: 'Arial', sans-serif;
}
body{
  margin: 0;
}
body.active{
  overflow: hidden;
}
header{
  width: 100%;
  position: fixed;
  padding-top: 64px;
  padding-left: 180px;
  display: flex;
  align-items: flex-end;
  transition: ease-in-out 0.5s all;
}
header.scrolled{
  background-color: #142f6c;
}
header .logo a img{
  width: 100%;
}
header .linkWrapper.mobile{
  display: none;
}
header .linkWrapper ul{
  padding-left: 0;
  display: flex;
  list-style-type: none;
}
header .linkWrapper ul li{
  margin: 0 20px;
}
header .linkWrapper ul li a{
  color: #c9ac7d;
  text-decoration: none;
  font-family: 'century-gothic', Arial;
  font-size: 35px;
  text-transform: uppercase;
}
.bannerImage img{
  width: 100%;
}
.contentSection{
 padding-bottom: 200px;
}
.contentSection.sty2{
 padding: 200px 0;
}
.contentSection h1{
  font-size: 63.5px;
  text-align: center;
  font-family: 'century-gothic', Arial;
  text-transform: uppercase;
  color: #142f6c;
}
.contentSection p{
  padding: 0 91px;
  font-size: 34px;
  text-align: center;
  color: #142f6c;
}
.servicesSection{
  background-color: #142f6c;
  display: flex;
}
.servicesSection .imgWrapper img{
  width: 100%;
}
.servicesSection .blockwrapper{
width: 100%;
}
.servicesSection .blockwrapper h2{
  font-family: 'century-gothic', Arial;
  font-size: 67.5px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
.servicesSection .blockwrapper .innerBoxes{
  display: flex;
  flex-wrap: wrap;
}
.servicesSection .blockwrapper .innerBoxes .items{
  flex: 0 0 50%;
  max-width: 50%;
  margin-bottom: 50px;
}
.servicesSection .blockwrapper .innerBoxes .boxInner{
  background-color: #e6d2b1;
  max-width: 75%;
  min-height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.servicesSection .blockwrapper .innerBoxes .boxInner p{
  font-size: 42.24px;
  line-height: 1.1;
  color: #142f6c;
  text-transform: uppercase;
}
.box{
  background-color: #142f6c;
  min-height: 200px;
}

@media screen and (max-width: 1700px) {
  .contentSection h1{
    font-size: 55px;
  }
  .contentSection p{
    font-size: 30px;
  }
  .servicesSection .blockwrapper h2{
    font-size: 60px;
  }
  .servicesSection .blockwrapper .innerBoxes .boxInner p {
    font-size: 33.24px;
  }
  header{
    padding-left: 150px;
  }
  header .logo{
    flex: 0 0 30% ;
  }
  header .linkWrapper ul li a{
    font-size: 30px;
  }
}
@media screen and (max-width: 1400px) {
  header{
    padding-left: 70px;
  }
  header .linkWrapper ul li a{
    font-size: 25px;
  }
}
@media screen and (max-width: 1200px) {
  .contentSection h1{
    font-size: 45px;
  }
  .contentSection p{
    font-size: 20px;
  }
  .servicesSection .blockwrapper h2{
    font-size: 50px;
  }
  .servicesSection .blockwrapper .innerBoxes .boxInner p {
    font-size: 23px;
  }
  header{
    padding-left: 100px;
  }
  header .logo{
    flex: 0 0 25% ;
  }
  header .linkWrapper ul li a{
    font-size: 20px;
  }
}
header .openbtn{
  display: none;
}
@media screen and (max-width: 992px) {
  header{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding: 0;
    justify-content: space-between;
  }
  header .linkWrapper{
    display: none;
  }
  header .logo{
    margin-left: 40px;
    display: block;
  }
  header .openbtn{
    z-index: 9999;
    margin-right: 40px;
    display: block;
  }
  .contentSection{
    padding-bottom: 50px;
  }
  .contentSection.sty2{
    padding: 50px 0;
  }
  .contentSection h1{
    font-size: 35px;
  }
  .contentSection p{
    font-size: 17px;
  }
  .servicesSection .blockwrapper h2{
    font-size: 40px;
  }
  .servicesSection .blockwrapper .innerBoxes .boxInner p {
    font-size: 20px;
  }
  header .linkWrapper ul li a{
    font-size: 20px;
  }
}
@media screen and (max-width: 768px) {
  .contentSection h1{
    font-size: 25px;
  }
  .contentSection p{
    padding: 0 15px;
    font-size: 15px;
  }
  .servicesSection .blockwrapper h2{
    font-size: 30px;
  }
  .servicesSection .blockwrapper .innerBoxes .boxInner p {
    font-size: 15px;
  }
  header .linkWrapper ul li a{
    font-size: 17px;
  }
  .servicesSection .blockwrapper .innerBoxes{
    justify-content: space-evenly;
  }
  .servicesSection{
    flex-direction: column
  }
  .servicesSection .blockwrapper .innerBoxes .items {
    flex: 0 0 45%;
    max-width: 45%;
  }
  .servicesSection .blockwrapper .innerBoxes .items .boxInner{
    max-width: 100%;
  }
  .bannerImage{
    min-height: 400px;
  }
  .bannerImage img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: inherit;
  }
  header .logo{
    flex: 0 0 40%;
  }
}
.openbtn {
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.openbtn .openbtn-area{
  transition: all .4s;
}

.openbtn span {
  position: absolute;
  background: #fff;
  display: inline-block;
  border-radius: 3px;
  left: 13px;
  height: 3px;
  transition: all .4s;
  width: 50%;
  &:nth-of-type(1) {
      top: 16px;
  }
  &:nth-of-type(2) {
      top: 24px;
  }
  &:nth-of-type(3) {
      top: 32px;
  }
}

.openbtn.active .openbtn-area {
  transform: rotatex(360deg);
}


.openbtn.active span{
  &:nth-of-type(1) {
      width: 45%;
      top: 18px;
      left: 14px;
      transform: translateY(6px) rotate(-135deg);
  }
  &:nth-of-type(2) {
      opacity: 0;
  }
  &:nth-of-type(3) {
      width: 45%;
      top: 30px;
      left: 14px;
      transform: translateY(-6px) rotate(135deg);
  }
}
header .mobile-menu{
  position: absolute;
  background-color: #142f6c;
  height: 100vh;
  left: 100%;
  top: 0;
  width: 100%;
  margin-top: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-left: 0;
  transition: ease-in-out 0.5s all;
}
header .mobile-menu.active{
  left: 0 
}
header .mobile-menu li{
  margin: 10px 0;
}
header .mobile-menu li a{
  color: #fff;
  font-family: 'century-gothic', Arial;
  text-transform: uppercase;
  text-decoration: none;
}