@font-face {
  font-family: 'Cera Pro Regular';
  src: url('font/CeraPro-Regular.eot');
  src: url('font/CeraPro-Regular.eot?#iefix') format('embedded-opentype'),
  url('font/CeraPro-Regular.woff') format('woff'),
  url('font/CeraPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  }

  @font-face {
  font-family: 'Cera Pro Light';
  src: url('font/CeraPro-Light.eot');
  src: url('font/CeraPro-Light.eot?#iefix') format('embedded-opentype'),
  url('font/CeraPro-Light.woff') format('woff'),
  url('font/CeraPro-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  }

  @font-face {
  font-family: 'Cera Pro Black';
  src: url('font/CeraPro-Black.eot');
  src: url('font/CeraPro-Black.eot?#iefix') format('embedded-opentype'),
  url('font/CeraPro-Black.woff') format('woff'),
  url('font/CeraPro-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  }

  @font-face {
  font-family: 'Cera Pro Medium';
  src: url('font/CeraPro-Medium.eot');
  src: url('font/CeraPro-Medium.eot?#iefix') format('embedded-opentype'),
  url('font/CeraPro-Medium.woff') format('woff'),
  url('font/CeraPro-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  }

  @font-face {
  font-family: 'Cera Pro Thin';
  src: url('font/CeraPro-Thin.eot');
  src: url('font/CeraPro-Thin.eot?#iefix') format('embedded-opentype'),
  url('font/CeraPro-Thin.woff') format('woff'),
  url('font/CeraPro-Thin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  }

  html, body {
    scroll-behavior: smooth;
  }


  /* header */

  .navbar {
    overflow: hidden;
    background-color: rgba(256,256,256,.9);
    margin-top: -10px;
    position: relative;
    z-index: 1000000;
    height: 60px;
    /*padding: 20px -20px 40px 10px;*/
    /*height: 70px;*/
  }
  
 
  

/* #navbar img {
    width: 140px;
} */
.navbar h3 {
  font-family: 'Cera Pro Medium';
  padding-left: 70px;
  color: rgb(90, 90, 90);
  font-size: 20px;
  cursor: pointer;
  padding-top: 5px;
}

.slickkk div li img {
  width: 50% !important;

}

#mobnav {
    display: none;
}

#header-right {
    float: right;
    padding-right: 70px;
    margin-top: -50px;
    
}



#widenav a {
    font-size: 115%;
    padding: 5px 10px 10px 10px;
    /* text-transform: uppercase; */
    font-family: 'Cera Pro Light';
    color: rgb(114, 114, 114);
    cursor: pointer;
    position: relative;
    top: 10px;
}

/*.active-link, #widenav a:hover {
    color: rgb(48, 48, 48) !important;
}*/

#drawer {
    height: 100vh; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: rgb(255, 255, 255); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 100px; 
    transition: 0.5s;
    box-shadow: 2px 0px 5px 0px rgba(153, 153, 153, 0.75);
    user-select: none;


}

#drawer a {
    padding: 8px 8px 38px 82px;
    text-decoration: none;
    font-size: 45px;
    color: #818181;
    display: block;
    transition: 0.3s;
    font-family: 'Cera Pro Light';
    
}

#drawer a:hover {
    /* color: #1d1d1d; */
}
.myButton {
  /*box-shadow:inset 0px 1px 0px 0px #f29c93;*/
  background:linear-gradient(to bottom, #fe1a00 5%, #e02020 100%);
  background-color:#fe1a00;
  border-radius:8px;
  /*border:1px solid #d83526;*/
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family: 'Cera Pro Light';
  height: 18px;
  vertical-align: middle;
  margin-top: -5px;
  margin-left: 4%;
  margin-right: -5%;
}
.myButton:hover {
  background:linear-gradient(to bottom, #ce0100 5%, #e02020 100%);
  background-color:#ce0100;
  color: white;
}
.myButton:active {
  position:relative;
  top:1px;
}
#closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    margin-left: 50px;
    margin-top: 20px;
    font-size: 496% !important;
}

#closebtn:hover {
    color: #000;
}


.sticky {
  position: fixed;
  /*top: 100;*/
  width: 98.5%;

  /* text-align: center; */
}

.sticky + .content1 {
  /*padding-top: 360px;*/
}


  h2{
    font-family: 'Cera Pro Black';
    font-size: 60px;
    text-transform: uppercase;
    color: #858585;
    text-align: left;
    padding-left: 5%;
  }
  .grid {
    display: grid;
    grid-template-rows: repeat(1,1fr);
    grid-template-columns: repeat(12, calc(calc(100% - 8%) / 12));
    grid-gap: 10px;
  }
  .box {
    padding: 10px;
    background: white;
    text-align: center;
  }
  .box:nth-child(1), .box:nth-child(2) { 
    grid-column: span 6;
  }
  .box:nth-child(3), .box:nth-child(4) { 
    grid-column: span 6;
  }
  .box:nth-child(5), .box:nth-child(6), .box:nth-child(7) {
    grid-column: span 4;
  }
  .box:nth-child(8), .box:nth-child(9) { 
    grid-column: span 6;
  }
  .box:nth-child(10) {
    grid-column: span 12;
  }
  .box:nth-child(11), .box:nth-child(12), .box:nth-child(13), .box:nth-child(14) 
  {
    grid-column: span 3;
  }
  .box:nth-child(15) {
    grid-column: span 12;
  }

  /* about */

  .about_left {
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 10%;
  }
  .about_left h2 {
    margin-left: -5%;
    padding-top: 30%;
  }
  .about_left p {
    font-size: 25px;
    line-height: 1.6;
    text-align: left;
    font-family: 'Cera Pro Light';
    color: #2a2a2a;
  }
  .about_left img {
    float: left;
    width: 7%;
    margin-right: 20px;
    margin-top: 5%;
     -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  }
  .about_left img:hover {
   -webkit-filter: none;
   -moz-filter: none;
   -ms-filter: none;
   filter: none;
  }
  .about_right img {
    /*padding: 15% 10% 25% 0%;*/
    width: 100%;
    height: 80%;
    padding-top: 20%;
    margin-left: 1%;
    /* padding-bottom: 15%; */
  }

  /* and about */

  /* features */

  .features_left img {
    width: 48%;
  }
  .features_left .one {
    margin-top: 15%;
    padding-left: 10%;
  }
  .features_left .two {
    margin-top: -3%;
    padding-left: 10%;
  }
  .features_left .right_top, .features_left .right_bottom {
    margin-left: -3%;
    margin-bottom: -10%;
  }
  .features_right h2 {
    margin-left: 4%;
    padding-top: 30%;
  }
  .features_right p {
    font-size: 25px;
    line-height: 1.6;
    text-align: left;
    font-family: 'Cera Pro Light';
    color: #2a2a2a;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 25%;
  }

  /*hover*/
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}
/* Zoom In #2 */
.hover01 figure img {
  width: 78%;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.hover01 figure:hover img {
  width: 81%;
}

  /* end features*/

  /* services */

  .service_left {
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 20%;
    padding-top: 20%;
  }
  .service_left h2 {
    margin-left: -5%;
    padding-top: 20%;
  }
  .service_left p {
    font-size: 25px;
    line-height: 1.6;
    text-align: left;
    font-family: 'Cera Pro Light';
    color: #2a2a2a;
  }
  .service_right img {
    width: 80%;
    padding-top: 20%;
    margin-left: 12%;
    /* padding-bottom: 10%;
    margin-left: 10%;
    margin-top: 18%; */
  }

  /* end services */

  /* int features */

  .intfeature_left img {
    width: 90%;
    padding-top: 20%;
  }

  .intfeature_mid h2 {
    margin-top: 55%;
    text-align: center;
  }

  .intfeature_right img {
    width: 90%;
    padding-top: 20%;
    padding-bottom: 20%;
  }

  /* end int features */

  /* stat */

  .stat1 img, .stat2 img, .stat3 img, .stat4 img {
    width: 80%;
  }

  /* end stat */

  /* contact */

  /* .contact {
    border-radius: 20px;
    background-image: linear-gradient(270deg, #FB6D76 0%, #ee4343 100%); 
    margin-left: 10%;
    margin-right: 10%;
    background-color: white;
    margin-top: 10%;
    margin-bottom: 7%;
}

.contact .mail {
    font-size: 250%;
    font-family: 'Cera Pro Regular';
    letter-spacing: 5px;
    color: white;
    text-align: center;
    padding-top: 0%;
}

.contact .add {
    font-size: 120%;
    font-family: 'Cera Pro Light';
    letter-spacing: 2px;
    color: white;
    text-align: center;
    padding-top: 3%;
}

.contact .number {
    font-size: 120%;
    font-family: 'Cera Pro Light';
    letter-spacing: 2px;
    color: white;
    text-align: center;
    padding-top: -1%;
}

.contact .social-icons {
  margin-left: 37%;
}

.contact .social-icons img {
    width: 6.5%;
    float: left;
    margin-top: 7%;
    margin-left: 3%;
    margin-bottom: 10%;
} */

.contact {
  border-radius: 40px;
   /*border: 1px black solid;*/
   background-image:linear-gradient(to bottom, #fdfbfb 5%, #ebedee 100%);
   /* background-color: white; */
  box-shadow: 20px 20px 40px #f8f8f8, 0 0 25px #f3f3f3, 0 0 5px #f2f2f2 ;
   margin-left: 10%;
   margin-right: 10%;
   background-color: white;
   margin-top: 10%;
   margin-bottom: 8%;
}
.contact .icons {
  padding-top: 3%;
  margin-bottom: 10%;
}
.contact .icons span {
  float: left;
  margin-left: -2%;
  width: 30%;
}
.icons span img {
  width: 12%;
  margin-right: 7%;
}
.icons .btn1 {
  font-family: 'Cera Pro medium';
  color: white;
  background:linear-gradient(to bottom, #fe1a00 5%, #e02020 100%);
  background-color:#fe1a00;
  font-size: 115%;
  margin-right: -48%;
  padding: 1%;
  padding-left: 3%;
  padding-right: 3%;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}
.contact .info .mail {
  font-size: 260%;
  font-family: 'Cera Pro regular';
  margin-top: -3%;
}
.info {
  /* background: url('img/building15.png'); */
  background-blend-mode: lighten;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.info .add {
  font-size: 125%;
  font-family: 'Cera Pro medium';
  float: right;
  margin-right: 23%;
  color: black !important ;
}
.info .loc1 {
  width: 10%;
  margin-left: 3%;
  margin-top: 1%;
}
.info .loc2 {
  width: 10%;
  margin-left: 7%;
  margin-top: 1%;
}
.info .number {
  font-size: 125%;
  font-family: 'Cera Pro medium';
  line-height: 1.3;
  float: left;
  margin-left: 25%;
}

.info img {
  transform: scale(.2,.2);
  margin-left: -48.5%;
}

.info .everify {
  margin-top: 2%;
}

.info .logoline {
  margin-top: 20%;
  margin-left: 16%;
  padding-bottom: 2%;
  font-family: 'Cera Pro regular';
  font-size: 70%;
  margin-bottom: 3%;
}

.info .terms {
  margin-top: -2%;
  padding-bottom: 2%;
  font-family: 'Cera Pro regular';
}

.info img {
  width: 100%;
  overflow: hidden;
  opacity: .7;
  position: absolute;
}

  /* end contact */


  /* mobile optimization */

  @media (min-width: 360px) and (max-width: 1024px) {
    .grid {
      display: block;
    }
    .box {
      margin: 10px 0;
    }
    h2 {
      text-align: center;
    }
    
    /* header */
    .navbar {
        height: 140px;
    }
    .navbar h3{
      margin-top: 5%;
    }
    .navbar h3 a {
      padding-top: 10px;
      font-size: 180%;
    }
    .navbar img {
        width: 100px !important;
    }
    #widenav {
        display: none;
    }
    #header-right button{
      margin-top: -30px;
    }
    #mobnav {
        display: block;
        background: none;
        padding: 4px 8px 4px 8px;
        border: solid 1px #e3e3e3;
        line-height: 10px;
        color:  rgb(114, 114, 114);
        border-radius: 18px;
        position: relative;
        top: -3px;
    }
    #mobnav:hover {
        color:  rgb(46, 46, 46);
    }

    /* End of header */

    .about_left h2 {
      padding-left: 10%;
    }

    .about_left p {
      text-align: center;
      font-size: 200%;
      padding-left: 8%;
    }

    .about_left .in {
      margin-left: 40%;
    }

    .about_right img {
      margin-top: 10%;
      width: 100%;
      margin-bottom: -10%;
    }

    .features_left .one {
      margin-left: -5%;
      margin-right: -5%;
      margin-top: -20%;
    }

    .features_left .two {
      margin-left: -5%;
      margin-right: -5%;
    }

    .features_right h2 {
      margin-left: 0%;
    }

    .features_right p {
      text-align: center;
      font-size: 200%;
      margin-left: 5%;
    }

    .intfeature_mid h2 {
      margin-top: 40%;
      margin-left: 0%;
    }

    .intfeature_left img {
      padding-top: 0%;
      width: 70%;
      padding-left: 3%;
    }

    .intfeature_right img {
      padding-top: 0%;
      width: 70%;
      padding-left: 3%;
    }

    .service_left h2 {
      margin-top: 10%;
      padding-left: 10%;
    }

    .service_left p {
      text-align: center;
      font-size: 200%;
      padding-left: 5%;
      padding-bottom: -20px;
    }

    .service_right img {
      padding-left: 1%;
      margin-top: -25%;
    }

    .stat_left h2 {
      margin-left: -5%;
    }

    .stat1, .stat2, .stat3, .stat4 {
      margin-left: 3%;
    }

    .contact {
      margin-left: 5%;
      margin-right: 2%;
      margin-bottom: 15%;
      margin-top: 30%;
    }
    .contact .icons {
      padding-top: 3%;
      margin-bottom: 10%;
    }
    .contact .icons span {
      /*float: none;
      margin-left: -4%;
      width: 100%;*/
      display: none;
    }
    .icons span img {
      width: 12%;
      margin-right: 7%;
    }
    .icons button {
      font-family: 'Cera Pro medium';
      color: white;
      background-color: #e02020;
      font-size: 360%;
      margin-top: 5%;
      margin-right: 0%;
      padding: 1.3%;
      padding-left: 3%;
      padding-right: 3%;
      border-radius: 40px;
    }
    .contact .info .mail {
      font-size: 200%;
      font-family: 'Cera Pro regular';
      margin-top: 20%;
      margin-bottom: 10%;
      /*margin-top: -3%;*/
    }

    .contact .icons a {
      display: block !important;
      margin: 0 auto !important;
      margin: 80px !important;

    }

    .contact {
      padding: 20px !important;
    }
    .info {
      /* background: url('img/building15.png'); */
      background-blend-mode: lighten;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    .info .add {
      font-size: 145%;
      font-family: 'Cera Pro regular';
      margin-bottom: 5%;
      float: right;
      margin-right: 10%;
    }
    .info .loc1 {
      width: 10%;
      margin-left: -3%;
      margin-top: 7%;
    }
    .info .loc2 {
      width: 10%;
      margin-left: 15%;
      margin-top: 7%;
    }
    .info .number {
      font-size: 145%;
      font-family: 'Cera Pro regular';
      line-height: 1.3;
      float: left;
      margin-left: 10%;
    }
    .info img {
      transform: scale(.4,.4);
      /* margin-top: 10%; */
    }

    .info .everify {
      margin-top: 13%;
    }
    .info .logoline {
      margin-top: 40%;
      padding-bottom: 2%;
      font-family: 'Cera Pro regular';
      font-size: 70%;
    }
    .info .terms {
      padding-bottom: 2%;
      font-family: 'Cera Pro light';
      font-size: 60%;
    }
    .form-popup {
      margin-left: 17%;
      margin-top: 30%;
    }

    .bloga {
      margin: 60px !important;
      margin-bottom: 150px !important;
    }
  }
  .slick-prev, .slick-next{
    background: #c4c4c4 !important;
    border-radius: 50% !important;
    opacity: 0.8;
    color: white;
  } 

  .slick-prev:hover , .slick-next:hover, .slick-next:focus {
    background: #e3e3e3 !important;
    color: white;

  }
  .slick-disabled {
    display: none !important;
  }
  /* end mobile optimization */