@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap');
*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    transition: .3s;
}
:root{
    --white-color: white;
    --black-color: black;
    --light-gray-color: #D1D7D4;
    --light-secondary-color: #7AF0C3;
    --secondary-color: #2CD9A3;
    --light-black-color: #555555;
    --primary-color: #2A2A2A;
    --secondary-font:  "Anton", sans-serif;
  --primary-font: "Funnel Sans", sans-serif;

}
body{
    background-color: #F5F7F6;
}
.d-flex{
    display: flex;
}
.align-center{
    align-items: center;
}
.justify-center{
    justify-content: center;
}
.justify-between{
    justify-content: space-between;
}
.col-1{
    flex: 1;
    width: 100%;
}
.col-2{
    flex: 2;
    width: 100%;
}
.col-3{
    flex: 3;
    width: 100%;
}
.col-4{
    flex: 4;
    width: 100%;
}
.col-5{
    flex: 5;
    width: 100%;
}
.img-fluid{
    max-width: 100%;
    height: auto;
}
.center{
    text-align: center;
}

.container{
    max-width: 1440px;
    width: 100%;
    margin: auto;   
    margin-bottom: 50px;
    padding: 0px 10px;
}
.btn.green a{
    min-height: 59px;
    border-radius: 8px;
    background-color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn.green a p{
    color: var(--primary-color);
    font-size: 18px;
    font-family: var(--secondary-font);
    font-weight: 400;
    text-transform: capitalize;
}
.btn.black a{
    min-height: 59px;
    border-radius: 8px;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn.black a p{
    color: var(--white-color);
    font-size: 18px;
    font-family: var(--secondary-font);
    font-weight: 400;
    text-transform: capitalize;
}


/* code for header starts here */
header{
    padding: 10px 20px;
}
header .btn.black a{
width: 128px;
}
header .btn.green a{
width: 118px;
}
.btn a:hover img{
    transform: translateX(5px);

}
header .menu a{
    font-size: 18px;
    font-weight: 400px;
    color: var(--black-color);
    font-family: var(--secondary-font);
}


/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
header i{
    color: var(--secondary-color) !important;
}

/* code for hero section */
.main-container-header{
    background: url(../images/hero-bg.png) no-repeat center center/cover;
}
.hero-section{
    padding-top: 50px;
}
.hero-section h1{
max-width: 679px;
width: 100%;
font-size: 85px;
line-height: 110%;
font-family: var(--secondary-font);
margin-bottom: 20px;
color: var(--primary-color);
font-size: 400;
}

.hero-section h1 span{

  -webkit-text-stroke: .1px var(--primary-color);
  color: transparent;
}
.hero-section p.main-para{
font-family: var(--primary-font);
font-size: 22px;
max-width: 474.73px;
width: 100%;
line-height: 160%;
color: var(--light-black-color);
margin-bottom: 20px;
}
.hero-section .btn{
max-width: 284px;
width: 100%;
}
.hero-section .btn p{
    color: var(--black-color);
}
.hero-section .hero-image{
    animation: upDown infinite 2s ease-in-out;
}
@keyframes upDown {
    0%{
        transform: translateY(-20px);
    }
    50%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(-20px);
    }
}
.logo-marquee {
  padding: 2.5rem 0;
  position: relative;
}


.logo-marquee--marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
}

.logo-marquee--marquee-group {
  animation: scroll-left 30s linear infinite;
  display: flex;
  flex-shrink: 0;
  width: auto;
}

@media (prefers-reduced-motion) {
  .logo-marquee--marquee-group {
    animation-play-state: paused;
  }
}

.logo-marquee--marquee-group img {
  height: 30px;
  padding: 0 40px;
  width: auto;
}

@media (max-width: 991.98px) {
  .logo-marquee--marquee-group img {
    height: 56px;
    padding: 0 30px;
  }
}
@media (max-width: 767.98px) {
  .logo-marquee--marquee-group img {
    height: 48px;
    padding: 0 20px;
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.repeat-customer .main-heading h1{
    font-size: 48px;
    letter-spacing: -0.5px;
    line-height: 120%;
    font-weight: 500;
    font-family: var(--secondary-font);
    max-width: 572px;
    width: 100%;
    margin: auto;
    margin-top: 100px;
    margin-bottom: 20px;
}
.repeat-customer .main-heading p.main-para{
    max-width: 765px;
    width: 100%;
    margin: auto;
    opacity: .7;
    color: var(--light-black-color);
    font-family: var(--primary-font);
    margin-bottom: 20px;
}
.repeat-customer .main-heading .btn {
    max-width: 313px;
    margin: auto;
}
.repeat-customer .row{
    gap: 12px;
    margin-top: 100px;
}
.repeat-customer .row .box{
    max-width: 241px;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    min-height: 463.37px;
    height: 100%;
}
.repeat-customer .row .swiper-slide:nth-child(3n + 2) .box{
    min-height: 349.92px !important;
    max-height: 349.92px !important;
}
.repeat-customer .row .swiper-slide:nth-child(4n) .box{
    min-height: 225.54px !important;
    max-height: 225.54px !important;
}
.repeat-customer .row .box img{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.repeat-customer .row .box .overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 1;
    background-color: var(--primary-color);
    width: 100%;
    height: 100%;
    opacity: .3;
}
.repeat-customer .row .box p{
    font-family: var(--secondary-font);
    font-size: 22px;
    line-height: 120%;
    position: absolute;
    bottom: 0px;
    padding: 20px 20px;
    text-align: center;
    color: var(--white-color);
    z-index: 2;
}
.rowImage{
    margin-top: 150px;
}
.rowImage h1{
    font-size: 48px;
    line-height: 120%;
    letter-spacing: -0.5px;
    font-family: var(--secondary-font);

    max-width: 333px;
    width: 100%;
    margin-bottom: 20px;
}

.rowImage p.main-para{
    opacity: .7;
    font-size: 18px;
    line-height: 160%;
    color: var(--light-black-color);
    max-width: 407px;
    width: 100%;
    margin-bottom: 20px;

}
.rowImage .btn{
    max-width: 286px;
    margin-bottom: 50px;
}
.rowImage img.rawImage{
    width: 100%;
}
.rowImage .row{
    max-width: 1080px;
    margin: auto;
    width: 100%;
    gap: 89px;
}
.rowImage .row{
    flex-wrap: wrap;
}
.rowImage .row .col-1{
    flex-basis: 390px;
    flex-grow: 1;
}

.fasterEv{
    background: url(../images/bg-container-home.png) no-repeat center center/cover;
    padding: 100px 20px 20px 20px;
}
.fasterEv h1{
    font-size: 48px;
    letter-spacing: -.5px;
    color: #F5F7F6;
    max-width: 828.09px;
    width: 100%;
    margin: auto;
    line-height: 120%;
    font-family: var(--secondary-font);
    text-align: center;
    margin-bottom: 20px;
}
.fasterEv p.main-para{
    opacity: .7;
    font-family: var(--primary-font);
    color: #F5F7F6;
    max-width: 828.09px;
    margin: auto;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.fasterEv .btn{
    max-width: 258.05px;
    margin: auto;
}

.measure .row{
    position: relative;
}
.measure .underline-heading{
    position: absolute;
    top: -150px;
    right: 0px;
    max-width: 910px;
    width: 100%;

}
.measure{
    padding: 200px 0px 100px 0px;
}

.measure h2{
    font-size: 48px;
    line-height: 120%;
    color: var(--primary-color);
    font-family: var(--secondary-font);
    letter-spacing: -0.5px;
}
.measure .main-para{
    color: var(--light-black-color);
    font-family: var(--primary-font);
    font-size: 18px;
    max-width: 531.6px;
    width: 100%;
    margin-bottom: 30px;
}
.measure .btn{
    max-width: 276px;
    width: 100%;
}

.hybrids-section {
    position: relative;
    padding: 50px 0px 0px 0px;
}
.hybrids-section .hybird-text{
    position: relative;
    left: 0px;
    z-index: -1;
    bottom: 125px;
}
.hybrids-section h1{
    font-size: 48px;
    font-family: var(--secondary-font);
    line-height: 120%;
    letter-spacing: -0.5px;
    font-weight: 500;
    max-width: 531.6px;
    width: 100%;
    margin-bottom: 20px;
}
.hybrids-section .row{
    max-width: 1253.6px;
    width: 100%;
    margin: auto;
    gap: 40px;
    flex-wrap: wrap;
    padding: 10px;
}
.hybrids-section .row p.main-para{
    max-width: 531.6px;
    color: var(--light-black-color);
    font-family: var(--primary-font);
    margin-bottom: 20px;
}
.hybrids-section .row h2{
    font-size: 32px;
    line-height: 120%;
    font-weight: bold;
    font-family: var(--primary-font);
    margin-bottom: 20px;
}
.hybrids-section .row .btn{
    max-width: 264px;
    width: 100%;
}
.hybrids-section .row .box-bgGreen{
    background-color: #DCF9F0;
    position: relative;
    border-radius: 32px;
    padding: 40px;
    max-height: 617px;
    overflow-y: auto;
    overflow-x: hidden;
}
.hybrids-section .row .box-bgGreen::-webkit-scrollbar{
    display: none;
}
.hybrids-section .row .col-layer{
    position: relative;
}
.hybrids-section .row .col-layer .boxLayer{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -1px;
    border-radius: 0px 0px 32px 32px;
}

.hybrids-section .row h5{
    font-family: var(--secondary-font);
    font-size: 24px;
    font-weight: 500;
    color: var(--primary-color);
    line-height: 120%;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}
.hybrids-section .row p{
    font-family: var(--primary-font);
    font-size: 18px;
    line-height: 200%;
    color: var(--light-black-color);

}
.hybrids-section .row .col-1{
    flex-basis: 390px;
    flex-grow: 1;

}
.cardBox{
    margin-top:0px;
    margin-bottom: 100px;
    background: url(../images/greenBgFlex.svg) no-repeat center center/cover;
    padding: 86px 0px 36px 0px;
}
.cardBox .row{
    gap: 30px;
    flex-wrap: wrap;
}
.cardBox .box{
    flex-basis: 350px;
    flex-grow: 1;
    display: flex;
    padding: 30px;
    max-width: 534px;
    min-height: 305px;
    gap: 30px;
    border-radius: 16px;
    background-color: var(--white-color);
}
.cardBox .box .flexBox{
max-width: 80px;
width: 80px;
height: 80px;
min-height: 110px;
}
.cardBox .box h2{
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.5px;
    color: var(--black-color);
    font-family: var(--secondary-font);
    font-weight: 400;
    margin-bottom: 20px;
}
.cardBox .box p.main-para{
    line-height: 140%;
    margin-bottom: 30px;
    font-weight: 200;
    font-family: var(--primary-font);
    color: var(--black-color);
    font-size: 18px;
}
.cardBox .box .btn{
    max-width: 159px;
}

.faq-wrapper {
  max-width: 900px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
}

.faq-item {
  background: var(--white-color);
  border-radius: 14px;
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid #D1D7D4;
}

.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 32px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}.faq-question span{
    font-weight: 400;
    max-width: 650px;
    width: 100%;
    letter-spacing: -0.5px;
    line-height: 120%;
    font-family: var(--secondary-font);
    color: var(--primary-color);
    font-size: 24px;
    text-align: left;

}

.faq-question i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1ed79b;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 26px;
  transition: max-height 0.35s ease;
}

.faq-answer p {
  padding: 0 0 28px;
  margin: 0;
  font-size: 16px;
  line-height: 166%;
  color: var(--light-black-color);
}

/* ACTIVE STATE */
.faq-item.active .faq-answer {
  max-height: 260px;
}

.faq-item.active .faq-question i {
  transform: rotate(90deg);
}
.faq-item.active .faq-question{
    padding: 32px 26px 10px 26px;
}
.faq {
    position: relative;
}
.faq .rightCircle{
    position: absolute;
    left: 0px;
    top: 0%;
    z-index: -1;
}
.faq .leftCircle{
    position: absolute;
    right: 0px;
    top: 0%;
    z-index: -1;
}
.faq h1{
    font-family: var(--secondary-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.5px;
    text-align: center;
    color: var(--black-color);
}


/* code for footer */
footer{
    background-color: var(--primary-color);
    padding: 30px;
}
footer .container{
    margin-bottom: 0px !important;
}
footer .menuFooter{
    font-size: 32px;
    font-weight: 200;
    font-family: var(--primary-font);
    letter-spacing: -4%;
    color: #D1D7D4;
    display: block;
}
footer .container,
footer .container .row,
footer .container .col-1{
    min-height: 448px;
}
footer .container .row{
    flex-wrap: wrap;
}
footer .col-1{
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    /* min-height: 448px; */
    min-height: 100%;
    flex-basis: 400px;
    flex-grow: 1;
}
footer .col-1 #social-media{
    font-size: 24px;
    color: var(--secondary-color);
    display: block;
    margin-bottom: 10px;
}
footer .col-1 .number-mail{
    color: #D1D7D4;
    font-size: 18px;
    font-family: var(--primary-font);
    line-height: 180%;
    font-weight: 100;
    display: block;
}

footer .col-1 .appDetail{
    margin-top: 40px;

}

footer .col-1 .appDetail a{
    display: block;
    color: #D1D7D4;
    font-size: 18px;
    font-weight: 100;
    font-family: var(--primary-font);
    line-height: 160%;

}
footer .col-1 .appDetail a i{
    transform: rotate(-45deg);
    font-size: 12px;
}
footer .col-1 .sideline{
    width: 1px;
    height: 44px;
    background-color: #D1D7D4;
}
footer .col-1 .mainBox .pribox:nth-child(1){
    flex: 1.4;
    width: 100%;
}
footer .col-1 .mainBox .pribox:nth-child(2){
    flex: 2;
    width: 100%;
}
footer .col-1 .mainBox .pribox .dot{
    width: 8px;
    height: 8px;
    line-height: 8px;
    border-radius: 50%;
    background-color: var(--secondary-color);
}
footer .col-1 .mainBox .pribox .sub-box{
    gap: 12px;
    height: 29px;
}
footer .col-1 .mainBox .pribox .sub-box p{
    font-weight: 100;
    line-height: 160%;
    font-size: 18px;
    font-family: var(--primary-font);
    color: #D1D7D4;
}
footer .col-1 .mainBox .pribox .sub-box i{
    font-size: 38px;
    color: var(--secondary-color);
    transform: rotate(-40deg);
}
footer .col-1 .sub-box a{
    font-size: 10px;
    font-family: var(--primary-font);
    opacity: .6;
    font-weight: 300;
    line-height: 150%;
    color: #D1D7D4;
}

footer .col-1 .sub-box p.copyRight{
    font-family: var(--primary-font);
    font-weight: 300;
    line-height: 150%;
    font-size: 10px;
    color: #D1D7D4;
}



/* code for dealer page */

.stream-second .row{
    padding: 100px 0px 50px 0px; 
display: flex;
align-items: center;
}
.stream-second .row h1{
    max-width: 402.55px;
    width: 100%;
    font-family: var(--secondary-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.5px;
    padding-left: 50px;
}
.stream-second .row p{
    max-width: 617px;
    width: 100%;
    font-size: 18px;
    font-family: var(--primary-font);
    line-height: 160%;
    color: var(--light-black-color);
    opacity: .7;
}

.stream-second .row img{
    width: 100%;
    min-height: 676px;
    object-fit: cover;
}

.shop-section .col-1 h1{
    max-width: 333px;
    font-family: var(--secondary-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.5px;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.shop-section .col-1 .pri-content{
    margin-bottom: 16px;
}
.shop-section .col-1 .pri-content h2{
font-family: var(--primary-font);
font-weight: bold;
font-size: 18px;
line-height: 160%;
color: var(--primary-color);

}
.shop-section .col-1 .pri-content p{
    max-width: 360px;
    width: 100%;
    opacity: .7;
    font-family: var(--primary-font);
    line-height: 160%;
    color: var(--light-black-color);

}
.shop-section .container{
    padding: 100px 20px;
    max-width: 1268px;
    margin: auto;
}
.shop-section .row{
    gap: 81px;
}
.shop-section .row .flexBtn{
    gap: 20px;
}
.shop-section .row .flexBtn .btn{
    width: 284px;
}
.shop-section .row .flexBtn .checkClick{
    font-size: 18px;
    font-family: var(--secondary-font);
    font-weight: 400;
    color: var(--primary-color);
}
.shop-section{
    background-color: var(--white-color);
    position: relative;
    padding-top: 50px;
}
.shop-section .dotted-line{
    position: absolute;
    right: 0px;
    top: 50px;
    width: 50%;
}
.shop-section .bottomCircle{
    position: absolute;
    /* z-index: -1; */
    left: 0px;
    bottom: 0px;
}


.shop .shop-section .bottomCircle{
    position: absolute;
    /* z-index: -1; */
    right: 15.6% !important;
    left: auto;
    bottom: 0px;
}
.stream-second-new .container{
    max-width: 1168px;
    margin: auto;
    width: 100%;
}
.stream-second-new .container h1{
    max-width: 402.55px;
    font-size: 48px;
    font-weight: 400;
    font-family: var(--secondary-font);
    color: var(--primary-color);
    line-height: 120%;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}

.stream-second-new .container p.mainpara{
    max-width: 425px;
    width: 100%;
    opacity: 0.7;
    font-weight: 100;
    font-size: 18px;
    line-height: 160%;
    color: var(--light-black-color);
    font-family: var(--primary-font);
    margin-bottom: 20px;
}

.stream-second-new .Shop-Union{
    width: 100%;
}
.stream-second-new .row{
    gap: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}
.stream-second-new .container .btn {
    max-width: 242px;
}
.contactUs .row{
    max-width: 1228px;
    margin: auto;
    width: 100%;
}
.contactUs .col-1.contact-form h1{
    font-family: var(--secondary-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.5px;
    color: var(--primary-color);
    margin-bottom: 16px;
}
.contactUs .col-1.contact-form p.main-para{
    opacity: .7;
    font-family: var(--primary-font);
    font-weight: 100;
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 160%;
    color: var(--light-black-color);
}
.contactUs .col-1.contact-form .box-col-1{
    flex: 1;
}
.contactUs .col-1.contact-form .sub-box-col h3{
    font-size: 24px;
    font-family: var(--secondary-font);
    color: var(--primary-color);
    letter-spacing: -0.5px;
    line-height: 120%;
    font-weight: 200;

}
.contactUs .col-1.contact-form .sub-box-col{
    gap: 7px;
    margin-bottom: 14px;
}
.contactUs .col-1.contact-form h6{
    font-size: 18px;
    font-family: var(--primary-font);
    color: var(--primary-color);
    font-weight: 600;
    max-width: 284px;
    width: 100%;
}
.contactUs .row{
    gap: 40px;
}
.contactUs form{
    max-width: 640px;
    width: 100%;
    min-height: 603px;
    padding: 50px;
    border-radius: 16px;
    background-color: #EEEEEE;
}
.contactUs form h1{
    font-size: 48px;
    color: var(--primary-color);
    font-family: var(--secondary-font);
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    

}
.contactUs form p.main-para{
    color: var(--light-black-color);
    font-family: var(--primary-font);
    font-weight: 100;
    font-size: 18px;
    line-height: 160%;
    opacity: .7;
    margin-bottom: 22px;
}
.contactUs form .boxFlex input{
    flex: 1;
    min-height: 61px;
    /* max-width: 243px; */
    width: 100%;
    border-radius: 8px;
    background-color: #F5F7F6;
    color: var(--primary-color);

    font-family: var(--primary-font);
    font-size: 18px;
    font-weight: 100;
    padding: 0px 24px;
    outline: none;
    border: 1px solid #C0BFBF;

}
.contactUs form .boxFlex{
    gap: 16px;
    margin-bottom: 16px;
}
.contactUs form select{
    width: 100%;
    min-height: 61px;
    cursor: pointer;
    width: 100%;
    border-radius: 8px;
    background-color: #F5F7F6;
    color: var(--primary-color);
    font-family: var(--primary-font);
    font-size: 18px;
    font-weight: 100;
    padding: 0px 24px;
    outline: none;
    border: 1px solid #C0BFBF;
    margin-bottom: 16px;
}


.contactUs form textarea{
    flex: 1;
    min-height: 101px;
    width: 100%;
    border-radius: 8px;
    background-color: #F5F7F6;
    color: var(--primary-color);

    font-family: var(--primary-font);
    font-size: 18px;
    font-weight: 100;
    padding: 24px 24px;
    margin-bottom: 16px;
    outline: none;
    border: 1px solid #C0BFBF;
}

.contactUs form .btn{
    border: none;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: end;
}
.contactUs form .btn a{
    width: 131px;
}

.support .row{
    border-radius: 16px;
    background-color: var(--white-color);
    border: 1px solid #D1D7D4;
    padding: 50px;
max-width: 1170px;    
margin: auto;
width: 100%;
margin-bottom: 50px;
}
.support .row h1{
    font-family: var(--secondary-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.5px;
    color: var(--black-color);
    margin-bottom: 14px;
}
.support .row p{
    font-family: var(--primary-font);
    line-height: 160%;
    font-size: 18px;
    color: var(--light-black-color);
    margin-bottom: 20px;
}
.support .row p.list{
    padding-left: 20px;
}

.support .row h3{
    font-size: 24px;
    font-family: var(--secondary-font);
    line-height: 120%;
    letter-spacing: -0.5px;
    color: var(--black-color);
    margin-bottom: 20px;
    font-weight: 400;

}
.support .row .bg-colored{
    padding: 20px;
    border-radius: 9px;
    background-color: #E8F5FF;
    display: inline-block;
    margin-bottom: 30px;
}
.hero-section h2{
    font-size: 32px;
    font-family: var(--secondary-font);
    color: var(--primary-color);
    line-height: 120%;
    letter-spacing: -0.5px;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 20px;
}
.voltscore-section .row{
    gap: 40px;
    padding: 50px 0px;
    flex-wrap: wrap;
}
.voltscore-section .row h1{
    font-size: 48px;
    line-height: 120%;
    color: var(--primary-color);
    font-family: var(--secondary-font);
    font-weight: 400;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}
.voltscore-section .row p{
    color: var(--light-black-color);
    font-size: 18px;
    font-family: var(--primary-font);
    font-weight: 100;
    line-height: 160%;
    margin-bottom: 26px;
}
.voltscore-section .row p.main-para{
    max-width: 624px;
    width: 100%;

}
.voltscore-section .row .col-1{
    flex-basis: 350px;
    flex-grow: 1;
}
.low-high .row{
    padding: 100px 0px;
    flex-wrap: wrap;
    gap: 50px;
}
.low-high .row .col-1{
    flex-basis: 390px;
    flex-grow: 1;
}
.low-high .row h1{
    font-size: 48px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.5px;
    color: var(--primary-color);
    font-family: var(--secondary-font);
    margin-bottom: 20px;
}
.low-high .row p{
    font-family: var(--primary-font);
    opacity: .7;
    font-size: 20px;
    line-height: 160%;
    color: var(--primary-color);
}
.aboutUs .row,
.about-underline .row{
    gap: 50px;
    max-width: 1260px;
    margin: auto;
    width: 100%;
}
.aboutUs .row img{
    width: 100%;
}
.aboutUs h1{
    font-size: 48px;
    line-height: 120%;
    font-family: var(--secondary-font);
    letter-spacing: -0.5px;
    color: var(--primary-color);
    font-weight: 400;
    margin-bottom: 24px;
}
.aboutUs p{
    font-family: var(--primary-font);
    max-width: 425px;
    width: 100%;
    opacity: .7;
    font-size: 18px;
    font-weight: 100;
    line-height: 160%;
}

.about-underline{
    position: relative;
}
.about-underline h1{
    font-size: 48px;
    font-family: var(--secondary-font);
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.5px;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.about-underline .row{
    padding: 100px 0px;
}
.about-underline .underline-dotted{
    position: absolute;
    right: 0px;
    top: 40px;
}
.about-underline p{
font-family: var(--primary-font);
color: var(--light-black-color);
line-height: 160%;
font-size: 18px;
opacity: .7;

}
.about-grid{
    margin-bottom: 100px;
}
.about-grid .row{
    gap: 30px;
    max-width: 1250px;
    width: 100%;
    margin: auto;
    flex-wrap: wrap;
}
.about-grid .box{
    flex-basis: 300px;
    flex-basis: 1;
    max-width: 400px;
    width: 100%;
    min-height: 300px;
    background-color: #EFEFEF;
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}
.about-grid .box h2{
    font-size: 24px;
    font-family: var(--secondary-font);
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.5px;

}
.about-grid .box p{
    opacity: .7;
    font-family: var(--primary-font);
    font-weight: 100;
    font-size: 18px;
    line-height: 160%;
    color: var(--light-black-color);

}
.battery .container .row{
    max-width: 1250px;
    width: 100%;
    margin: auto;
    background: url(../images/green-bg-color.svg) no-repeat center center/cover;
    min-height: 458px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.battery .container .row h1{
    font-family: var(--secondary-font);
    color: var(--primary-color);
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -0.5px;
    line-height: 120%;

    margin-bottom: 24px;
}
.battery .container .row p.main-para{
    opacity: .7;
    font-family: var(--primary-font);
    line-height: 160%;
    color: var(--light-black-color);
    margin-bottom: 40px;
    font-size: 18px;

}
.battery .container .row .btn{
    max-width: 219px;
    margin: auto;
}
.battery{
    position: relative;
}
.battery .bottomCircle{
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: -1;
}
.battery .container{
    margin-bottom: 0px;
    padding-bottom: 100px;
    padding-top: 36px;
    padding-left: 20px;
    padding-right: 20px;
}



.bg-green-card{
    min-height: 486px;
    background: url(../images/green-bg-color.svg) no-repeat center center/cover;

}
.bg-green-card .container{
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 486px;
}
.bg-green-card .row{
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 50px 0px;
    gap: 20px;
}
.bg-green-card .row .col-1{
    max-width: 605px;
    min-height: 306px;
    border-radius: 16px;
    background-color: var(--white-color);
    padding: 50px;
    flex-basis: 400px;
    flex-grow: 1;
}
.bg-green-card .row .col-1 h1{
    margin-bottom: 24px;
    font-family: var(--secondary-font);
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.5px;
    color: var(--primary-color);

}
.bg-green-card .row .col-1 p.main-para{
    font-family: var(--primary-font);
    opacity: 0.7;
    font-size: 18px;
    font-weight: 100;
    line-height: 160%;
    color: var(--light-black-color);
    margin-bottom: 30px;

}
.card-grid .container .row{
    background-color: #EFEFEF;
    max-width: 1250px;
    width: 100%;
    margin: auto;
    padding: 86px 40px;
}
.card-grid .container .row h1{
    font-size: 48px;
    font-family: var(--secondary-font);
    line-height: 120%;
    letter-spacing: -0.5px;
    text-align: center;
    margin-bottom: 24px;
}
.card-grid .container .row p.main-para{
    max-width: 613px;
    opacity: .7;
    font-family: var(--primary-font);
    color: var(--light-black-color);
    line-height: 160%;
    font-size: 18px;
    width: 100%;
    margin: auto;
    text-align: center;
    margin-bottom: 30px;
}
.card-grid .sub-row {
    gap: 20px;
    flex-wrap: wrap;
}
.card-grid .box{
    max-width: 370px;
    width: 100%;
    min-height: 259px;
    background-color: var(--white-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    flex-basis: 250px;
    flex-grow: 1;
}
.card-grid .box h2{
    font-size: 24px;
    font-weight: 400;
    font-family: var(--secondary-font);
    letter-spacing: -0.5px;
    line-height: 120%;
    color: var(--primary-color);
}
.card-grid .box p{
    color: var(--light-black-color);
    font-family: var(--primary-font);
    font-weight: 100;
    opacity: 0.7;
    font-size: 18px;
    line-height: 160%;
    max-width: 310px;
    width: 100%;
}
.certified .col-12 h1{
    font-size: 40px;
    font-family: var(--secondary-font);
    line-height: 120%;
    letter-spacing: -0.5px;
    font-size: 400;
    margin-bottom: 20px;
    color: var(--primary-color);
}
.certified .col-12 p{
    color: var(--light-black-color);
    font-family: var(--primary-font);
    font-weight: 100;
    font-size: 18px;
    line-height: 160%;
    opacity: 0.7;

    max-width: 782px;
    width: 100%;
    margin: auto;
}

.certified .box-search{
    max-width: 700px;
    width: 100%;
    min-height: 61px;
    border-radius: 8px;
    border: 1px solid #555555;
    gap: 8px;
    text-align: left !important;
    margin: auto;
    padding: 0px 24px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.certified .box-search input{
    border: none;
    outline: none;
    font-family: var(--primary-font);
    opacity: 0.7;
    font-weight: 100;
    font-size: 18px;
    line-height: 160%;
    color: var(--primary-color);
    width: 100%;
    background-color: transparent;
}
.certified .box-search input::placeholder{
    color: var(--light-black-color);
}
.certified .box-search i{
    color: #555555;
    opacity: 0.7;
    font-size: 19px;
}
.certified .row{
    gap: 30px;
    max-width: 1250px;
    width: 100%;
    margin: auto;
    flex-wrap: wrap;
    justify-content: center;
}
.certified .row .box{
    max-width: 400px;
    min-height: 450px;
    border-radius: 16px;
    background-color: var(--white-color);
    padding: 20px;
    flex-basis: 350px;
    flex-grow: 1;
}
.certified .box p.verify{
    background-color: rgba(122, 240, 195, .2);
    color: var(--secondary-color);
    font-family: var(--primary-font);
    font-weight: 100;
    font-size: 14px;
    line-height: 160%;
    margin-bottom: 16px;
    max-width: 134px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 43px;


}
.certified .box h2{
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.5px;

    margin-bottom: 14px;
}
.certified .box .small-box{
    margin-bottom: 6px;
    gap: 6px;
}
.certified .box .small-box:nth-child(5){
    margin-bottom: 30px;
}
.certified .box .small-box i{
    font-size: 20px;
    color: var(--secondary-color);

}
.certified .box .small-box p{
    font-weight: 100;
    opacity: 0.7;
    font-family: var(--primary-font);
    color: var(--light-black-color);
    font-size: 18px;
    line-height: 160%;

}
.certified .box p.main-para{
    opacity: 0.7;
    font-family: var(--primary-font);
    line-height: 160%;
    font-size: 18px;
    color: var(--light-black-color);
    font-weight: 100;
    max-width: 351px;
    width: 100%;

    margin-bottom: 30px;
}
.certified .box .btn{
    max-width: 149px;
}
.certified .row .btn.noBg a{
    max-width: 231px;
    width: 100%;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 100px;
    background-color: transparent;
    border: 1px solid var(--primary-color);
}
.certified .row .btn.noBg a p{
    color: var(--primary-color);
}

.socail-proof{
    min-height: 611px;
    background: url(../images/green-bg-color.svg) no-repeat center center/cover;

}
.socail-proof h1{
    color: var(--primary-color);
    font-size: 48px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.5px;
    font-family: var(--secondary-font);
}
.socail-proof .container{
    flex-direction: column;
    min-height: 611px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 50px 0px 50px 0px;
}
.socail-proof .container p.main-para{
    font-family: var(--primary-font);
    font-size: 18px;
    line-height: 160%;
    color: var(--primary-color);
    font-weight: 400;
    margin-bottom: 30px;
}
.socail-proof .container p.main-para span{
    padding-left: 20px;
}
.socail-proof .container .row{
    gap: 40px;
    flex-wrap: wrap;
    padding: 0px 10px;
    justify-content: center;
}
.socail-proof .container .box{
    flex-basis: 200px;
    flex-grow: 1;
    min-height: 274px;
    max-width: 435px;
    width: 100%;
    padding: 50px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 16px;
    background-color: var(--white-color);
    flex-basis: 250px;
    flex-grow: 1;

}
.socail-proof .container .box p{
    font-family: var(--primary-font);
    max-width: 330px;
    width: 100%;
    font-weight: 100;
    font-size: 18px;
    color: var(--black-color);

}
.three-grid{
    padding: 50px 0px;
}
.three-grid h1{
    font-family: var(--secondary-font);
    color: var(--primary-color);
    line-height: 120%;
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -0.5px;
    text-align: center;
    margin-bottom: 50px;
}
.three-grid .row{
    flex-wrap: wrap;
    gap: 80px;
}
.three-grid .row img{
    flex: 1;
    flex-basis: 200px;
    flex-grow: 1;
    max-width: 225.52px;
    width: 100%;
    min-height: 134.73px;
}





































@media screen and (min-width: 860.99px) {
    .pc{
        display: none;
    }
}
@media screen and (max-width: 860.98px) {
    .mobile{
        display: none;
    }
    .contactUs .row{
        flex-direction: column-reverse;
    }
}

@media screen and (max-width: 957.98px) {
    .hero-section .row{
        padding-bottom: 100px;
    }
    .hero-section .row img.hero-image{
        display: none;
    }
    .hero-section .row{
        flex-direction: column-reverse;
    }
    .measure .row{
        flex-direction: column;
        gap: 40px;
        padding: 10px;
    }
    .low-high .row{
        padding: 50px 0px;
    }
}

@media screen and (max-width: 888.98px){
footer .container,
footer .container .row,
footer .container .col-1{
    min-height: 250px;
    flex-wrap: wrap;
}
footer .container .col-1 .mainBox{
    gap: 40px;
    flex-direction: column;
}
.aboutUs .row,.about-underline .row,
    .shop-section .row,.stream-second .row,.stream-second-new .row{
    flex-direction: column;
    gap: 20px;
}
.dealer-shop{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
}
.shop-section .col-1 h1{
    max-width: 100%;
}
.shop-section .bottomCircle{
    opacity: 0.2;
    z-index: -1;
}
.stream-second .row h1,.stream-second-new .container h1,.stream-second-new .container p.mainpara{
    max-width: 600px;
    padding: 0px !important;
}.stream-second .row{
    padding-top: 0px !important;
}.stream-second .row img{
    min-height: 300px !important;
}
}


@media screen and (max-width: 660.98px){
    .hero-section h1{
        font-size: 65px;
    }
        .logo-marquee--marquee-group img {
            height: 20px;
        }
        .repeat-customer .main-heading h1{
            margin-top: 10px;
            font-size: 38px;
        }
        .hybrids-section .hybird-text{
            bottom: 20px;
        }
        .contactUs form{
            padding: 50px 20px;
        }
        .shop-section .row .flexBtn{
            flex-direction: column;
            align-items: start;
        }
}
@media screen and (max-width: 450.98px){
    .contactUs form .boxFlex{
        flex-direction: column;
    }
    .battery .container .row h1{
        font-size: 38px;
    }
.cardBox .box{
    flex-direction: column;
    gap: 0px;
}
.faq-item.active .faq-question{
    padding: 10px;
    gap: 20px;
}
.faq-question span{
    font-size: 18px;
}
.faq-answer p{
    font-size: 12px;
}
.faq-item.active .faq-answer{
    padding: 10px;
}
.faq-question i{
    width: 20px;
    height: 20px;
    font-size: 10px;
}

footer .container .col-1 .box{
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}
footer{
    padding: 10px 0px;
}
}