body{
   scroll-behavior: smooth;
}
html.lenis,
html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}
::-webkit-scrollbar {
    width: 0px;
}
::-webkit-scrollbar-thumb {
    background: #ca252b; 
}
::-webkit-scrollbar-thumb:hover {
    background: #ca252b; 
}
.hc-offcanvas-nav.hc-nav-1.nav-position-left .nav-container {
    transform: translate3d(-493px, 0, 0);
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype'),
        url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bodoni Moda 18pt';
    src: url('../fonts/BodoniModa18pt-Regular.eot');
    src: url('../fonts/BodoniModa18pt-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/BodoniModa18pt-Regular.woff2') format('woff2'),
        url('../fonts/BodoniModa18pt-Regular.woff') format('woff'),
        url('../fonts/BodoniModa18pt-Regular.ttf') format('truetype'),
        url('../fonts/BodoniModa18pt-Regular.svg#BodoniModa18pt-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.eot');
    src: url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Medium.woff2') format('woff2'),
        url('../fonts/Roboto-Medium.woff') format('woff'),
        url('../fonts/Roboto-Medium.ttf') format('truetype'),
        url('../fonts/Roboto-Medium.svg#Roboto-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


@font-face {
  font-family: "Inter_18ptMedium";
  src: url("../fonts/Inter_18ptMedium.eot");
  src: url("../fonts/Inter_18ptMedium.eot") format("embedded-opentype"),
    url("../fonts/Inter_18ptMedium.woff2") format("woff2"),
    url("../fonts/Inter_18ptMedium.woff") format("woff"),
    url("../fonts/Inter_18ptMedium.ttf") format("truetype"),
    url("../fonts/Inter_18ptMedium.svg#Inter_18ptMedium") format("svg");
}
@font-face {
  font-family: "Inter_18ptBold";
  src: url("../fonts/Inter_18ptBold.eot");
  src: url("../fonts/Inter_18ptBold.eot") format("embedded-opentype"),
    url("../fonts/Inter_18ptBold.woff2") format("woff2"),
    url("../fonts/Inter_18ptBold.woff") format("woff"),
    url("../fonts/Inter_18ptBold.ttf") format("truetype"),
    url("../fonts/Inter_18ptBold.svg#Inter_18ptBold") format("svg");
}


     *{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter', sans-serif;
}

/* HEADER */
.header{
  position:absolute;
  top:0;
  width:100%;
 padding: 20px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:10;
}
header.smaller {
top: 0px;
  transition: all 0.3s ease-in-out;
  position: fixed;
  width: 100%;
  z-index: 9999;
  left: 0;
}
 header.smaller .headercolor{
  background: #333;
  box-shadow: 0px 3px 6px #00000029;
 padding: 20px 20px;
}


.logo{
  font-size:34px;
  font-weight:600;
}
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 2;
  padding: 5rem 3rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all .5s;
  transition: all .5s;
}
header .ibt {
 display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  padding: 5px 30px;
  background: #fff;
  border-radius: 100vmax;
}
header .logo {
width: 200px;
  position: absolute;
left: 40px;
  right: 0;
  -webkit-transition: all .5s;
  transition: all .5s;
}
header.smaller .logo {
width: 180px;
  bottom: 40px;
  left: 4%;
}

.header-right{
display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;justify-content: end;
  width: 100%;
}
.numberflex svg {
  width: 30px; color: #fff;
}
header .phone svg {
  width:25px;
  fill: #fff;
}
.numberflex {display: flex; gap: 10px;align-items: center;}
.number span {color: #fff;}
.ibt-logo{
  height:34px;
}

.phone,.lang{
  font-size:14px;
  opacity:.8;
}

/* MENU */
.menu-btn{
  top: 40px;
  left: 45%;
  width: 41px;
  height: 30px;
  background:#00953e;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  z-index:20;
  cursor:pointer;
}
header.smaller .menu-btn {
  top: 50px;
}
.menu-btn span{
  width:18px;
  height:2px;
  background:#000;
}
.menus{
  position: absolute;
 right: 50%;
  color: #fff;
bottom: 20px;
}
.menus h6 {
  margin: 0;
  font-size: 14px;
}
 header.smaller .menus{
  position: absolute;
right: 50%;
  color: #fff;
bottom: 50px;
}

 header.smaller  .logo img {
  background: #fff;
  padding: 5px 15px;
}

/* HERO */
.hero{
  height:100vh;
  position:relative;
  overflow:hidden;
}



.hero-content{
  position:absolute;
  left:80px;
  bottom:40px;z-index: 9;
  right: 80px;
  padding-top: 20px;
}

.hero h1{
  font-size:70px;
  font-weight:500;
  color: #fff;
}
 .hero p{
  color: #fff;
  font-size: 16px;
}
/* DISCOVER */
.discover{
  position:absolute;
  right:60px;
  bottom:80px;
  display:flex;
  align-items:center;
  gap:15px;
  font-size:14px;
z-index: 9;
}
.discover span {color: #fff; font-size: 20px;}

.scroll-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#00953e;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:bounce 1.8s infinite;
}

/* ANIMATIONS */
.reveal.active{
  opacity:1;
  transform:translateY(0);
  transition:1s ease;
}

@keyframes bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(8px); }
}
* MENU BUTTON */
.menu-btn{
  position:fixed;
  top:40px;
  left:40px;
  width:48px;
  height:48px;
  background:#ffe600;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  z-index:9999;
}

.menu-btn span{
  width:18px;
  height:2px;
  background:#000;
  transition:.3s ease;
}

/* X MORPH */
.menu-btn.active span:nth-child(1){
  transform:rotate(45deg) translate(4px,4px);
}
.menu-btn.active span:nth-child(2){
  transform:rotate(-45deg) translate(4px,-4px);
}

/* MENU PANEL */
.solino-menu{
  position:absolute;
  top:110px;
left: 40%;
  width:320px;
  background:#00953e;
  border-radius:14px;
  padding:25px;
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition:.3s ease;
  z-index:9998;
}

.solino-menu.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.solino-menu ul{
  list-style:none;
}

.solino-menu li{
  margin:12px 0;
}

.solino-menu a{
  color:#000;
  text-decoration:none;
  font-size:16px;
}
.menu-btn{
  position:absolute;
top: 40px;
left: 50%;
  width: 40px;
  height: 30px;
  background:transparent;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:9999;
}

.menu-btn span{
  position:absolute;
  width:20px;
  height:2px;
  background:#fff;
  transition:.35s cubic-bezier(.77,0,.18,1);
}

/* hamburger positions */
.menu-btn span:nth-child(1){
  transform:translateY(-6px);
}
.menu-btn span:nth-child(2){
  transform:translateY(0);
}
.menu-btn span:nth-child(3){
  transform:translateY(6px);
}

/* X MORPH */
.menu-btn.active span:nth-child(1){
  transform:rotate(45deg);
}
.menu-btn.active span:nth-child(2){
  opacity:0;
}
.menu-btn.active span:nth-child(3){
  transform:rotate(-45deg);
}


/* banner */
.banner {
    overflow: hidden;
    position: relative;
}

.vedio-banner::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 1;
}

.banner-img video {
    width: 100%;
}

@media (min-aspect-ratio: 16/9) {
    .back-video {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    .back-video {
        width: auto;
        height: 100%;
    }
}
/* why */
.why-solar{
 padding: 100px 0;
  background: #141314;
}


.content{
  width:45%;
}

.content h2{
  font-size:48px;
  margin-bottom:40px;font-family: 'Inter', sans-serif;color: #fff;
}

.slide-content{
  display:none;
  animation: fadeUp .6s ease;color: #fff;
}

.slide-content.active{
  display:block;padding-left: 15%;
}

.count{
  font-size:14px;
  font-weight:600;
}

.content h3{
  font-size:28px;
  margin:20px 0;color: #fff;
}

.content p{
  line-height:1.7;
  color: #000;
  padding-right: 20%;color: #fff;
}

.why-solar .btn{
  display:inline-block;
  margin-top:30px;
  padding:14px 28px;
  background:#000;
  color:#fff;
  border-radius:30px;
  text-decoration:none;margin-left: 15%;
}

/* IMAGE SIDE */
.image-wrapper{
  width:55%;
  position:relative;
}

.solar-slider img{
  width:100%;
  height:520px;
  object-fit:cover;
  border-top-left-radius:300px;
  border-bottom-left-radius:300px;
}

/* arrows */
.nav-arrows{
  position:absolute;
  left:-35px;
  top:50%;
  transform:translateY(-50%);
  background:#f4e300;
  border-radius:50px;
  padding:10px;
  display:flex;
  gap:10px;
}

.nav-arrows button{
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
}

/* animation */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.image-wrapper{
  position:relative;
  z-index:1;
}

.solar-slider{
  position:relative;
  z-index:1;
}

.nav-arrows{
position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  background: #00953e;
  border-radius: 50px;
  padding: 12px 20px;
  display: flex;
  gap: 30px;
  z-index: 10;
  pointer-events: auto;
}

.nav-arrows button{
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
  pointer-events:auto;
}
.why-container {padding: 0 0 0 60px; margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;}

  .whyborder {border-top: 1px solid #fff;; margin: 0 60px;
  padding: 30px 0; padding-bottom: 50px;}

/* counter */
.counter{
letter-spacing: 1px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;color: #00983d;
  font-size: 72px;margin: 0;
}
.sub-container {padding: 0 60px;}
 .counterbox hr{
  margin: 50px 0;margin-bottom: 70px;height: 1px;
  background-color: #000;
  opacity: 9;
 }
 .counterbox p {
  font-weight: normal;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
/* how */
.howwrapper {padding: 60px 0;}
.howimg img {border-radius: 5px}
.howyellow svg {width: 25px;
  fill: #000;}
  .howtext {position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
  background: #fff;
  border-radius: 5px;
  padding: 40px 20px;width: 80%;
}
.howyellow  {
  width: 30%;
  text-align: right;
  position: absolute;
  top: -50px;
  background: #fff;
  padding: 15px 20px;
  border-radius: 5px;
  left: 0;
}
.howhead h5  {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 500;
  padding-bottom: 90px;
}
.howhead  p {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 500;
  margin: 0px;
}
.howtext a {text-decoration: none; color: #000;}
.howtext:hover {
  background: #00953e;
  -webkit-transition: all .5s;
  transition: all .5s;
}


.howtext:hover .howyellow {
  background: #00953e;
  -webkit-transition: all .5s;
  transition: all .5s;
}
.howtext a:hover .howyellow{
  width: 40%;
  -webkit-transition: all .5s;
  transition: all .5s;
  background: #00953e;
}
/* free */
.freewraper {padding-bottom: 80px;}
.freemargin  {
  border-top: 1px solid #000;
  margin-top: 60px;
  padding-top: 100px;
}
.freeleft h4 {
  font-size: 48px;
  margin-bottom: 40px;
  font-family: 'Inter', sans-serif;
  padding-right: 20%;
font-weight: 400;
}
.freeleft  p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
 font-weight: 400;
  margin: 0px;padding-bottom: 15px;
}
.freebtn{padding-top: 30px;}
.freebtn a {
  background: #000;
  color: #fff;
  border-radius: 30px;
  padding: 16px 30px;
  text-decoration: none;
  font-size: 16px;
}
.freebtn a:hover {background: #00953e;
  color: #000;
  -webkit-transition: all .5s;
  transition: all .5s;}
  header .logo img{
  background: #fff;
padding: 10px 15px;
}
.list.yellow {
  background: #00953e;
}
.wemargin .list {
  width: 70%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
padding: 40px 45px;
  border-radius: 20px;
}
.wemargin .list ol li {
  list-style: circle;
font-size: 22px;line-height: 40px;
}
 .wemargin .list ol{
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 30px;
}
.wewrapper { padding: 60px 0;}
.weright h5  {
  font-size: 27px;
  margin-bottom: 60px;
  font-weight: 500;text-align: center;
}
.webox h6 {
  font-size: 20px;
  font-weight: 500;
  margin-top: 20px;
  text-align: center;
  padding: 30px 30px;
}
.webox  {
  text-align: center;padding: 20px 20px;
}
/* parallax */
/* SECTION */
.solino-section{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}

/* BG IMAGE */
.solino-bg{
  position:absolute;
  inset:0;
  background:url("../images/image-04.jpg") center/cover no-repeat;
background-attachment: fixed;
}


/* OVERLAY */
.solino-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:1;
}

/* HEADING */
.solino-heading{
  position:absolute;
 top: 8%;
  left:0%;right: 0;
  text-align:center;
  color:#fff;
  z-index:2;
}

.solino-heading h1{
  font-size:clamp(32px,5vw,64px);
  font-weight:600;
  line-height:1.15;
}

/* PLUS BUTTON */
.solino-plus{
  position:absolute;
  width:44px;
  height:44px;
  background:#00953e;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  cursor:pointer;
  transition:.3s ease;
  z-index:3;
}


.solino-plus span {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* rotate when active */
.solino-plus.active span {
  transform: rotate(135deg);
}

/* PLUS POSITIONS */
.p1{ top:62%; left:32%; }
.p2{ top:48%; right:26%; }
.p3{ bottom:20%; right:32%; }

/* INFO CARD */


.solino-card.active{
  opacity:1;
  pointer-events:auto;
transform: translate(-105%,-100%);
}

.solino-card h4{
  font-size:17px;
  font-weight:600;
  margin-bottom:12px;
}

.solino-card p{
  font-size:14px;
  line-height:1.7;
  color:#333;
}

/* CLOSE */
.solino-close{
  position:absolute;
  bottom:-18px;
  left:-18px;
  width:42px;
  height:42px;
  background:#FFD400;
  border:none;
  border-radius:4px;
  font-size:18px;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}

/* QUOTE BUTTON */
.solino-quote{
  position:fixed;
  right:20px;
  bottom:20px;
  background:#ff5a00;
  color:#fff;
  padding:14px 20px;
  border-radius:30px;
  font-weight:600;
  cursor:pointer;
  z-index:6;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.solino-card h4{
  font-size:16px;
  font-weight:600;
  margin-bottom:8px;
}

.solino-card p{
  font-size:14px;
  line-height:1.6;
  color:#333;
}
.solino-card {
  position: absolute;
  width: 300px;
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 15px 40px rgba(0,0,0,.25);

  /* animation start */
  opacity: 0;
  transform: scale(0.8) translate(-105%,-110%);
  pointer-events: none;
  
  /* smooth animation */
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 5;
}

.solino-card.active {
  opacity: 1;
  pointer-events: auto;

  /* scale up and move into place */
transform: scale(1) translate(-105%,-110%);
}


/* CARD CONTENT */
.solino-card h4{
  font-size:16px;
  font-weight:600;
  margin-bottom:8px;
}

.solino-card p{
  font-size:14px;
  line-height:1.6;
  color:#333;
}

.solino-card p{
  font-size:14px;
  line-height:1.6;
  color:#333;
}

/* CLOSE BUTTON INSIDE CARD */
.solino-card .solino-close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  background:#FFD400;
  border:none;
  border-radius:4px;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}


/* te slider */

.teswhy-solar{
  padding:100px 0;
}


.tescontent{
  width:45%;
}

.tescontent h2{
  font-size:48px;
  margin-bottom:40px;font-family: 'Inter', sans-serif;
}

.tesslide-content{
  display:none;
  animation: fadeUp .6s ease;
}

.tesslide-content.active{
  display:block;padding-left: 15%;
}

.tescount{
  font-size:14px;
  font-weight:600;
}

.tescontent h3{
  font-size:28px;
  margin:20px 0;
}

.tescontent p{
  line-height:1.7;
  color: #000;
  padding-right: 20%;
}

.teswhy-solar .btn{
  display:inline-block;
  margin-top:30px;
  padding:14px 28px;
  background:#000;
  color:#fff;
  border-radius:30px;
  text-decoration:none;margin-left: 15%;
}

/* IMAGE SIDE */
.tesimage-wrapper{
  width:55%;
  position:relative;
}

.tessolar-slider img{
  width:100%;
  height:520px;
  object-fit:cover;
  border-top-right-radius:300px;
  border-bottom-right-radius:300px;
}

/* arrows */
.tesnav-arrows{
  position:absolute;
  right:-35px;
  top:50%;
  transform:translateY(-50%);
  background:#f4e300;
  border-radius:50px;
  padding:10px;
  display:flex;
  gap:10px;
}

.tesnav-arrows button{
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
}

/* animation */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.tesimage-wrapper{
  position:relative;
  z-index:1;
}

.tessolar-slider{
  position:relative;
  z-index:1;
}

.tesnav-arrows{
position: absolute;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
  background: #00953e;
  border-radius: 50px;
  padding: 12px 20px;
  display: flex;
  gap: 30px;
  z-index: 10;
  pointer-events: auto;
}

.tesnav-arrows button{
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
  pointer-events:auto;
}
.teswhy-container {padding: 0 60px 0 0px; margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;}

  .teswhyborder {border-top: 1px solid #000; margin: 0 60px;
  padding: 30px 0; padding-bottom: 50px;}
/* form */
 .solino-contact{
    background:#00953e;
    padding:80px 0;
  }

  .solino-title{
font-size: 39px;
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  padding-right: 0px;
  }

 .solino-contact .form-control,
 .solino-contact .form-select{
    background:transparent;
    border:none;
    border-bottom:1px solid #ffffff;
    border-radius:0;
    padding-left:0;padding-bottom: 0;
  padding-top: 0;height: 20px;
  }

 .solino-contact .form-control:focus,
  .solino-contact .form-select:focus{
    box-shadow:none;
    border-color:#000;
  }

.solino-contact label{
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  }

 .solino-contact .send-btn{
    background:#fff;
    color:#000;
    border-radius:30px;
    padding:12px 30px;
    border:none;
  }

 .solino-contact .send-btn:hover{
    background:#111;transition: 0.5s;  color:#fff;
  }

 .solino-contact  .checkbox-text{
   font-size: 16px;
  color: #fff;
  margin-bottom: 5px;
  }
  .formp p {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #fff;
  }
  .formchecks {padding-top: 0px;}
  /* footer */
   .solino-footer{
    min-height:80vh;
    position:relative;
    padding:80px 60px;
  }

  .solino-logo{
    font-size:72px;
    font-weight:700;
  }

  .powered{
    font-size:14px;
    margin-left:6px;
  }

  .footer-email{
    font-size:32px;
    font-weight:500;
  }

  /* social icons */
  .social-icons{
    position:absolute;
    right:60px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    gap:12px;
  }

  .social-icons a{
    width:48px;
    height:48px;
    background:#000;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:18px;
  }

  /* scroll top */
  .scroll-top{
    position:absolute;
    right:60px;
    top:80px;
    width:48px;
    height:48px;
    background:#00953e;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    cursor:pointer;
  }

  /* bottom bar */
  .footer-bottom{
    border-top:1px solid #000;
    padding:20px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
  }

  .get-quote{
    position:fixed;
    right:20px;
    bottom:20px;
    background:#ff4d00;
    color:#fff;
    padding:14px 20px;
    border-radius:30px;
    font-weight:600;
    text-decoration:none;
  }
  
/* CTA */
.cta{
  display:flex;
}

.plus{
  background:#00953e;
  border:none;
  padding:10px 15px;
  color:#000;margin-left: 5px;
}

.work-btn{
  background:#00953e;
  border:none;
  padding:8px 10px;
  color:#000;
}
/* services */

/* SECTION */
.section{
  display:flex;
  gap:80px;padding: 60px 0;padding-bottom: 40px;padding-top: 0;
}
.serleft , .serright {padding-top: 0px;}
.ser-container{display: flex;
  gap: 80px;margin: 0 200px;}
.sers-container{
margin: 0 200px;}
.wrapper { padding: 60px 0;}
/* PIN AREA */
.wrapper{
  position:relative;
}
.ourser-container {
  margin: 0 200px;
}
/* LEFT */
.left{
  flex:1;
  display:flex;
  gap:20px;
}

.indicator{
  width:20px;
  position:relative;
}

.dot{
  width:10px;
  height:10px;
  background:#00953e;
  position:absolute;
left: 65px;
  border-radius:2px;
}

.steps{
  flex:1;
}

.step{
  margin:20px 0;
  font-size:30px;
  color:#aaa;
  transition:0.3s;margin-bottom: 40px;
}

.step.active{
  color:#000;padding-left: 50px;
}

/* RIGHT */
.right{
  flex:1;
  height:500px;
  position:relative;
}

.image{
  position:absolute;
  width:100%;
  opacity:0;
  transform:scale(1.1);
  transition:0.6s;
}

.image.active{
  opacity:1;
  transform:scale(1);
}

/* EXTRA SPACE */

.servicewrapp {background: #eee;padding-top: 80px;}
.oursilderwrapper {padding-bottom: 80px;background: #eee;}
.step span {
  font-size: 20px;color: #696869;
}
.oursildermargin a { color:#000; text-decoration: none;}
.step h4 {
 font-size: 25px;display: flex;
  align-items: center;
  gap: 10px; color:#000;
}

.step p {
  font-size: 15px;
padding-left: 30px;color: #696869; color:#000;
}

.prolefts .nav {
  display: block;padding-left: 70px;
}
.proflexs  {
  display: flex;
  align-items: center;
}
.prolefts .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: transparent;position: relative;padding: 0;
}

.prolefts .nav-pills .nav-link {
  color: #eee;
  background-color: transparent;padding: 0;text-align: left;
}
 .productwrap{
  background-color: #141314;
padding: 120px 0;
}
.prolefts h2 {
  color: #eee;
  font-size: 50px;}
.prolefts p{color: #7c7b7c;
  font-size: 16px;
  padding-right: 35%;}
.prolefts .nav-pills .nav-link.active::before{position: absolute;content: '';right: -30px;
bottom: 40px;width: 10px;height: 10px; background-color: #00953e;} 
 .proboxs {padding-bottom: 5px;display: flex;
  gap: 30px;
  align-items: center;}

 .proboxs img{
height: 60px;
  margin-bottom: 5px;
}


/* SECTION */
.stats-section {
  display: flex;
  gap: 20px;
  padding: 120px 60px;  background: #e9e9e9;
}

/* IMAGE BOX */
.image-box {
  flex: 1;
  overflow: hidden; width: 100%;
  height: 100%;
}

.image-box img {
  width: 100%;
  height: 100%;
}

/* STAT BOX */
.stat-box {
flex: 1;
  background: #fff;
  padding: 50px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* NUMBER */
.count {
  font-size: 70px;
  font-weight: 300;
  margin: 0;
}

/* TEXT */
.label {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.serleft h2  {
font-size: 55px;
  padding-bottom: 40px;
  color: #141314;
  font-weight: 600;
  padding-right: 11%;line-height: 56px;
}
.serright h6  {
  color: #00953e;
  text-align: right;
  font-size: 17px;
  text-transform: uppercase;
}

/* about */
.aboutwrapper {padding: 120px 0;background-color: #eee;}
.serleft h6  {
  color: #000;
text-align: left;
  font-size: 16px;
  text-transform: uppercase;position: relative;padding-left: 30px;margin: 0;
}
.serleft h6::before{position: absolute;content: '';left: 0;;
bottom: 5px;width: 10px;height: 10px; background-color: #00953e;} 
.visionleft h4 {
  padding-bottom: 20px;
  border-bottom: 1px solid #bebebe;
  margin-bottom: 20px;
  font-size: 18px;
}
.visionleft {padding-top: 40px;}
.visionleft p {
  color: #403d40;
  font-size: 16px;
  padding-right: 10%;
}

.productwrap .tab-content img{
  max-height: 450px;
  min-height: 450px;
}


.productwrap .tab-content h6{
 color: #fff;padding-top: 20px;
}
.desktop {display: block;}
.phone {display: none;}
.rights{padding-left: 80px;}
/* footer */

/* FOOTER */
.footers{
  position:relative;
  padding:100px 60px;
  overflow:hidden;background-color: #141314;
}

/* GRID */
.container-fluids{
  margin:auto;
  position:relative;
  z-index:2;
}

/* LEFT */
.lefts{
  width:300px;
}

.lefts h3{
  color:#fff;
  margin-bottom:20px;
  font-size:18px;
}

.lefts input{
  width:100%;
  padding:10px;
  margin-bottom:10px;
  background-color: #333;
border: 1px solid #ffffff5c;
  color:#fff;font-size: 14px;
}

.subscribes{
  display:flex;
}

.subscribes button{
  flex:1;
  padding:13px;
  border:none;
  font-weight:500;
  cursor:pointer;
  transition:.3s;background: #eee;
  color: #272627;font-size: 14px;
}

.subscribes button:hover{
  background:#fff;
}

.pluss{
 width: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  color: #000;
  font-size: 20px;
  transition: .3s;
  margin-left: 5px;
}

.pluss:hover{
  background:#444;
}

.smalls{
 margin-top: 10px;
  font-size: 14px;
  color: #737373;
}

/* CENTER */
.centers ul{
  list-style:none;padding-left: 0;
}
 .centers{
  text-align: center;
}
.centers li{
  margin-bottom:12px;
  letter-spacing:2px;
  font-size:13px;
  cursor:pointer;
  transition:.3s;color: #818081 !important;
}

.centers li:hover{
  color:#fff;
}

/* RIGHT */
.rights p {
  margin-bottom: 5px;
  font-size: 16px;
  transition: .3s;
  color: #818081 !important;
  text-decoration: underline;
}
.rights p:hover{
  opacity:1;
  color:#fff;
}

/* BOTTOM */
.bottoms{
text-align: center;
  margin-top: 100px;
  font-size: 15px;
  z-index: 2;
  position: relative;
  color: #818081;
}
.bottoms p { margin: 0;padding-bottom: 5px;}
/* CANVAS */
canvas{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}

.servicedesktop{display: block;}
.servicephone  {display: none;}
/* contact */
 .contactwrapper{
  background-color: #eee;
  padding: 60px 0px;
margin-top: 80px;
}

.headersub {
  background-color: #eee;
}

.headersub .menu-btn span {
  background: #000;
}
.headersub .menus {
  color: #000;
}
.contactcenter h2{
  font-size: 55px;
}
.contactright h4 {
  font-size: 28px;
  margin-bottom: 20px;
}

.rightscontact p {
  margin-bottom: 5px;
  font-size: 16px;
  transition: .3s;
  color: #818081 !important;
  text-decoration: underline;
}
.contactcenter {padding-left: 80px;position: relative;display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;}

.contactright .form-control {
background: transparent;
  border-radius: 0;
  border: none;
  margin-bottom: 25px;
  padding: 12px 25px;
  font-weight: 400;
  padding-left: 0;color: #c2c0c0;
border-bottom: 1px solid #c2c0c0;width: 100%;
}
.contactright .form-control::placeholder {color: #c2c0c0;font-size: 13px;  }
.contactright h2 {
  font-size: 32px;
  padding-top: 40px;
  padding-bottom: 20px;
}
.formbtn {margin-top: 20px;text-align: center;}
.formbtn a:hover {background: #000;color: #fff;transition: 0.5s;}
/* about */

.aboutswrapper {
background-color: #141314;
  padding: 140px 0px;padding-bottom: 0;
}

.sersleft h2  {
font-size: 55px;
  padding-bottom: 40px;
color: #eee;
  font-weight: 600;
  padding-right: 11%;line-height: 42px;
}
.sersright h6  {
  color: #eee;
  text-align: right;
  font-size: 17px;
  text-transform: uppercase;
}

.sersleft h6  {
color: #eee;
text-align: left;
  font-size: 32px;position: relative;margin: 0;padding-bottom: 90px;
}
.visionsleft h4 {
  padding-bottom: 20px;
  border-bottom: 1px solid #bebebe;
  margin-bottom: 20px;
  font-size: 18px; color: #000;
}
.visionsleft p {
 color: #000;
  font-size: 16px;
  padding-right: 10%;text-align: justify;
}
.visionsleft  {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
  padding: 20px;
  border-radius: 25px;
  background: rgb(255, 255, 255);
  margin: 0 20px;height: 100%;
}
.visionsline{border-bottom: 1px solid #ffffff59;padding-bottom: 80px;}
 .footline h2{
  font-weight: 600;
  color: #3c3c3c;
  text-align: center;
  font-size: 320px;
  /* position: absolute;bottom: -140px;left: 10%;
  right: 10%; */
  text-align: center;
  margin-bottom: -250px;
 }


.aboutbanner-text h2 {
  font-size: 60px;
  color: #fff;
}
.aboutbanner-text h3 {
  font-size: 60px;
  color: #fff;margin-left: 60px;
}
.aboutbanner {
  position: relative;
  margin-top: -5px;
}


.aboutbanner-text {
  position: absolute;
  left: 0%;
  top: 15%;
  transform: translate(0%, 0%);
  right: 0px;
}

.aboutbanner-container {
  margin: 0 30%;
}


.aboutbanner-text p {
  font-size: 15px;
  color: #fff;margin-left: 60px;padding-right: 40%;
}
.about-container {margin: 0 20%;}

.abouttextswrap{padding: 100px 0;background-color: #eee;}
.aboutbanner { background-image: url(../images/about-banner.jpg);width: 100%;height: 100vh;
  background-size: cover;background-attachment: fixed; background-repeat: no-repeat }
.abouttextleft {padding-right: 70px;}

.abouttextright h4 {
  font-size: 32px;
  padding-bottom: 40px;  color: #000;
}

.abouttextright span {
  color: #00953e;
  font-size: 20px;
  padding-left: 60px;
}

.abouttextright p {
  color: #000;
  font-size: 15px;
}


.sersleft p {
  color: #fff;
  font-size: 16px;
  padding-right: 10%;text-align: justify;
}
.steps a{text-decoration: none;}
/* back to top  */

#button {
    display: inline-block;
    background-color: #27b060;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 20px;
    right: 30px;
    transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

#button:hover {
    background:#00953e;
    transition: 0.5s;
}

#button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    color: #fff;
}

#button.show {
    opacity: 1;
    visibility: visible;
}

#button.show {
    visibility: visible;
}

.servicesbanner { background-image: url(../images/service-banner.jpg);width: 100%;height: 100vh;
  background-size: cover;background-attachment: fixed; background-repeat: no-repeat }

 .serviceleft .nav{
  display: block;
}
.serviceswrap{padding: 60px 0;background-color: #eee;}

  .serviceleft h2{
  font-size: 45px;padding-bottom: 80px;
}
.serviceswrap .nav-pills .nav-link {
  color: #3c3c3c;
  background-color: transparent;
  padding: 0;
  text-align: left;border-bottom:1px solid #3c3c3c3b;
  border-radius: 0;
  margin-bottom: 20px;
}
.serviceswrap .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #3c3c3c;
  background-color: transparent;
  position: relative;
  padding: 0;border-bottom: 1px solid #3c3c3c3b;
  border-radius: 0;
  margin-bottom: 20px;color: #00953e;
}
   .servicemargins h6{
  font-size: 15px;
  margin: 0;
  padding-bottom: 5px;
}

    .servicemargins  h4{
  font-size: 30px;
}
    .servicemargins  h5{
  font-size: 30px;border-bottom:1px solid #3c3c3c3b; padding-bottom: 50px;margin-bottom: 50px;
}
.servicesrights p {font-size: 16px;}