*,

*::before,

*::after {

  -webkit-box-sizing: border-box;

          box-sizing: border-box;

}





:root{

    --Black:#000;

    --Blue:#1B56E3;

    --White:#fff;





}





@media (prefers-reduced-motion: no-preference) {

  :root {

    scroll-behavior: smooth;

  }

}





#page{overflow-x: hidden;}



hr {

  margin: 1rem 0;

  color: inherit;

  background-color: currentColor;

  border: 0;

  opacity: 0.25;

}



hr:not([size]) {

  height: 1px;

}



body {

  margin: 0;

  background:  #fff;

  -webkit-text-size-adjust: 100%;

  font-size: 16px;

  overflow-x: hidden;

  font-family: "Montserrat", sans-serif;

  font-optical-sizing: auto;

  color: var(--Black);

  letter-spacing: normal;

  background:

        radial-gradient(circle at 15% 20%, #FEF2F9 0%, transparent 40%),

        radial-gradient(circle at 85% 15%, #ECF7FE 0%, transparent 45%),

        radial-gradient(circle at 20% 85%, #FEF2F9 0%, transparent 45%),

        radial-gradient(circle at 80% 75%, #FEF2F9 0%, transparent 40%),

        #FDFAF7;

}



.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {

  margin-top: 0;

  margin-bottom: 0.5rem;

  font-family: "Montserrat", sans-serif;

  font-weight: 600;

}



.h1, h1 { font-size: 60px; }



.h2, h2 { font-size: 46px; }



.h3, h3 {font-size: 24px;}



.h4, h4 { font-size: 20px;}



.h5, h5 {font-size: 18px;}



.h6, h6 { font-size: 16px;}





p{margin-top: 0; font-size: 16px; font-family: "Montserrat", sans-serif;  line-height:130%; }



a{text-decoration:none;}



.img-fluid{max-width: 100%; height: auto;}



.container{max-width: 1310px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}



.btn{

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex; 

  position: relative; 

  align-items: center; 

  justify-content: space-between;

  gap: 10px; 

  appearance:none; 

  background: transparent; 

  border: 1px solid transparent; 

  position: relative; 

  font-family: "Montserrat", sans-serif;   

  transition: 0.5s ease all;  

  border-radius: 10px; 

  padding:10px 20px ;    

  font-size: 18px; 

  line-height: 1; 

  font-weight: 600;   

  text-align: center;    

  text-decoration: none; 

  cursor: pointer;

  min-width:179px;

}





.btn-primary{ background:var(--White); color:var(--Black);}



.btn-sec{background: var(--Black); color: var(--White);}



.btn-primary:hover{background:transparent; color:var(--White); border-color: var(--White);}



.btn-sec:hover{border-color:var(--Black); color:var(--Black); background: transparent;}



.btn-sec .icon img{filter: invert(1);}



.btn-primary:hover img{

  filter: invert(1);

}



.btn-sec:hover img{

  filter: invert(0);

}





.btn .icon img {

  transition: transform 0.4s ease, filter 0.4s ease; min-width:20px;

}



.btn:hover .icon img {

  transform: translateX(8px);

}



.header_button .btn:hover{

  background:var(--Black);

  border-color:var(--Black);

}



.header_row{

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap:20px;

}



.header_row .logo{

  width: 88px;

  background:var(--White);

  text-align: center;

  border-radius: 0px 0px 10px 10px;

  padding: 10px 0px 15px 0px;

}



.header_wrap{

    background: transparent;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 2;

}





.hero-banner{background: url(../img/hero-banner.jpg) no-repeat top center ; position: relative; background-size: cover; padding-top: 124px; padding-bottom: 53px; height:80vh; min-height: 600px;}





.banner_content{max-width:626px;}



.banner_content h1{color:var(--White); line-height: 115%; font-weight: 600; font-size:60px; margin-bottom:15px;}



.banner_content p{color:var(--White); font-size:24px; font-weight:500;}



.banner_color_plates_w{display: flex; justify-content: space-between; align-items:end;}



.banner_color_plates_w span.icon{display: block;}



.banner_quote_btn .btn-cta{font-size: 46px; color:var(--White); font-weight:600; line-height: 115%;}



.banner_color_plate{background:var(--White); border-radius:30px; border:1px solid var(--Blue); padding:20px 25px;}



.c_plates_w{display: flex; gap:22px;}



.c_plates_w .item{display: flex; gap:5px; align-items: center;}



.banner_color_plate h6{color:var(--Blue); font-size: 16px; font-weight: 600; margin-bottom:10px;}



.c_plates_w .item p{font-size: 14px; color:var(--Black); font-weight: 500; margin:0;}

.color_img img{display: block ;}



.banner_color_plates_w{position: absolute; bottom: 60px; width: 100%; max-width: 1310px; left: 50%; transform: translateX(-50%); padding: 0 15px;}



.counter_wrap{background:var(--Black); padding:30px 0px;}



.counter_wrap .container{max-width:920px;}



.counter_row{display: flex; justify-content: space-between; align-items: center;}



.counter h2{font-size:54px; color: var(--White); line-height: 115%; font-weight: 600; margin-bottom:0px;}



.counter p{color: var(--White); font-size: 24px; font-weight: 500; margin-bottom:0px;}



.counter{text-align: center;}



.our_partner_row{background: url(../img/partner-bg.jpg) no-repeat center ; position: relative; background-size: cover; padding:60px 15px; border-radius:30px;}



.partner_logo .item{background:var(--White); border-radius:10px; margin:0 27px;}



.partner_logo{margin:0 -15px;}



.our_partner_row h2{color:var(--White); text-align: center; margin:0px;}



.partner_btn{text-align: center;}



.partner_logo_inner{margin:60px 0px;}



.our_partner{padding:120px 0px;}



.charger_table{max-width:1133px; margin:0 auto; background: var(--White); border-radius:20px; padding:30px; box-shadow: 0px 4px 50px 0px rgba(179, 175, 175, 0.25); overflow-x: auto;

}



.comparison_table{text-align: center; border-collapse: collapse; width:100%; min-width:540px;}



.comparison_table thead th {

  font-weight: 700;

  padding-bottom: 15px;

  border-bottom: 1px solid var(--Blue);

  font-size:18px;

}



.comparison_table td {

  padding: 16px 10px;

  border-bottom: 1px solid #D8D8D8;

  font-size: 16px;

  font-weight: 500;

}



.comparison_table thead th img{

  margin-bottom:15px;

}



.comparison_table thead th p{margin:0px; font-size:18px; font-weight: 700; color:var(--Black);}



.charger_type h2{text-align: center; font-weight: 600; font-size:46px; color:var(--Black); margin-bottom:40px;}



.payment_box{display: flex; align-items: center; justify-content: space-between; gap:40px; max-width: 1133px; margin: auto; background:var(--White);  border-radius: 20px; padding: 30px; margin-top:20px; box-shadow: 0px 4px 50px 0px rgba(179, 175, 175, 0.25);

}



.payment_divider {

  width: 1px;

  background: #dddddd;

  height: 100px;

}



.payment_logos{display: flex; gap:16px;}



.payment_left h3{font-size:24px; color:var(--Black); margin-bottom:20px; font-weight: 600;}



.payment_right p{font-size:18px; font-weight:600; color:var(--Black); margin-bottom:10px; line-height:120%;}





.accordion-content {display: none; max-width:1028px;}



.accordion-header h3 {position: relative; padding-right: 50px; font-size:24px; font-weight:600; color:var(--Black); margin-bottom:0px; }



.accordion-item {

     border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;  transition: all 0.35s ease; padding-left:90px; position: relative;

}



span.number{position: absolute; left:0; font-size:24px; font-weight:600; color:var(--Black); padding-top:20px;}





.accordion-header{padding:20px 0px; cursor: pointer;}



.accordion-content p {font-size: 16px; color:var(--Black); font-weight:500; margin-bottom:20px;}



/* 42x42 box */

.icon-box {

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 42px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color:var(--Blue);

  border-radius:50%;

}



/* plus lines */

.icon-box::before,

.icon-box::after {

  content: "";

  position: absolute;

  background-color:#fff;

  transition: transform 0.3s, opacity 0.3s;

}



/* vertical line */

.icon-box::before {

  width: 2px;

  height: 10px;

}



/* horizontal line */

.icon-box::after {

  width: 10px;

  height: 2px;

}



/* Open state */

.accordion-item.open .icon-box::before {

  opacity: 0; 

}



.accordion-item.open .icon-box::after {

  transform: rotate(0deg);

}



.our_recent_installation_w{padding:120px 0px;}



.accordion-item.open .icon-box{background-color: var(--Black);}



.accordion-header span.number{position: absolute; left:0;}



.faq_wrap h2{font-size:46px; color:var(--Black); font-weight:600; margin-bottom:30px;}



.ready_install_row{background: url(../img/ready-install.jpg) no-repeat center ; position: relative; background-size: cover; padding:40px 52px; border-radius:30px;}



.ready_install_content{max-width:600px;}



.ready_install_content h2{color:var(--White); font-weight: 600; font-size:46px; margin-bottom:16px;}



.ready_install_content p{color:var(--White); font-size:24px; font-weight: 500; margin-bottom:60px;}



.ready_install_w{padding-top:120px;}



.recent_slider .item{position: relative; padding:0 8px;} 



.play-btn{

  position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 84px;

    height: 84px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(10px);

}



.play-btn::before {

    content: "\f04b";

    font-family: "Font Awesome 6 Free"; 

    font-weight: 900;

    display: inline-block;

    color:#fff;

    font-size:24px;

}


.recent_slider .item .play-btn {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.recent_slider .item.active .play-btn {
    opacity: 1;
    visibility: visible;
}

.recent_slider .item:hover .play-btn {
    opacity: 1;
    visibility: visible;
}

.recent_slider .item .thumbnail_img img {
    transition: transform 0.5s ease;
}

.recent_slider .item:hover .thumbnail_img img {
    transform: scale(1.08);
}


.recent_slider .item.active .thumbnail_img img {
    transform: scale(1.08);
}


.recent_slider .item .item_deails{

  position: absolute;

  bottom:30px;

  left:30px;

  display:none;

}



.recent_slider .item .item_deails h6{color:#70EA6E; font-weight: 600; font-size:16px; margin-bottom:6px;}



.recent_slider .item .item_deails h3{font-size:24px; color:var(--White); margin-bottom:0px; font-weight: 600;}



.thumbnail_img{

    padding-top: 103%;

    display: block;

    position: relative;

    overflow: hidden; 
    
    border-radius:20px;

}



.thumbnail_img img{

    width: 100%;

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    object-fit: cover;

    object-position: top center;

    border-radius: 20px;

}



.mfp-video-wrapper {

    max-width: 400px;

    margin: auto;

    position: relative;

    border-radius:20px;

}

.mfp-video-wrapper video{
  border-radius:20px;
}




.our_recent_row{background:var(--Black); border-radius:30px; padding:30px 40px;}



.our_recent_row h2{color:var(--White); font-size:46px; font-weight: 600; margin-bottom:30px;}



.recent_slider{margin:0 -8px; }



.slide_arrow_btn{display: flex; justify-content: space-between; align-items: center; margin-top:40px;}





.arrow-prev, .arrow-next {

    border:2px solid var(--White);

    cursor: pointer;

    width: 48px;

    height: 48px;

    border-radius: 100px;

    background-color:var(--Black);

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

}





.arrow-prev.disabled, .arrow-next.disabled{

   border-color:#595959;

   color:#595959;

}





.custom-arrow {

    display: flex;

    justify-content: center;

    gap: 20px;

}





.social_icon_w{display:none;}













/* FOOTER CSS */

.footer_row{display: flex; align-items: center; justify-content:space-between;}

.copyright p{margin:0; font-size: 14px; font-weight: 400; color: var(--Black);}

.social-icon{display: flex; margin: 0; padding: 0; list-style: none; gap: 20px;}

.social-icon li a{color:var(--Black); font-size:18px;}

.footer_wrap{padding-top:35px; padding-bottom:40px;}


.sticky-buttons {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10000;
}

.sticky-buttons .whatsapp-btn {
    background-color: #25d366;
    animation: slide 4s linear infinite;
}
.sticky-buttons a {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

@keyframes slide {

  0% { transform: translateY(-30%); }

  50% { transform: translateY(30%); }

  100% { transform: translateY(-30%); }

}




/* MOBILE CSS */
@media (max-width:991px){
    .banner_color_plates_w{
        flex-direction: column-reverse;
    align-items: flex-start;
    gap:15px;
    }
    .payment_logos{flex-wrap: wrap;}
    .payment_box{gap:20px;}
    .slide_arrow_btn{flex-direction: column; gap:20px;}
}



@media (max-width:767px){
    .banner_content h1{font-size:36px;}
    .banner_content p{font-size:18px;}
    .c_plates_w{flex-wrap: wrap; gap:0; gap:10px;}
    .c_plates_w .item{width:47%;}
    .color_img img{min-width:40px;}
    .banner_color_plates_w{position: static; transform: none; padding:0px;}
    .hero-banner{height: auto;}
    .banner_quote_btn .btn-cta{font-size:28px; font-weight: 700;}
    .counter h2{font-size:40px;}
    .counter_row{flex-direction: column; row-gap:30px;}
    .our_partner{padding:60px 0px;}
    .our_partner_row h2{font-size:36px;}
    .our_partner_row{padding:30px 15px;}
    .charger_type h2{font-size:36px;}
    .payment_box{flex-direction: column;}
     .payment_right p br{display: none;}
     .payment_divider{width:100%; height:2px;}
     .payment_right{width:100%;}
     .our_recent_row h2{font-size:36px;}
     .our_recent_installation_w{padding:60px 0px;}
     .our_recent_row{padding:30px;}
     .faq_wrap h2{font-size:36px;}
     .accordion-header h3{font-size:18px;}
     .accordion-item{padding-left:40px;}
     span.number{font-size:18px; padding-top:20px;}
     .icon-box{width:30px; height:30px;}
     .ready_install_w{padding-top:60px;}
     .ready_install_content h2{font-size:36px;}
     .ready_install_row{padding:30px;}
     .ready_install_row p{font-size:18px;}
     .footer_row{gap:10px;}
     .copyright p{text-align: center;}
     .accordion-header h3{padding-right:40px;}
     .recent_slider .item .item_deails h3{font-size:18px;}
     .recent_slider .item .item_deails{bottom:20px; left:20px;}
     .btn{font-size:16px;}
      .recent_slider .item:hover .play-btn,
      .recent_slider .item .play-btn{
        opacity: 1;
        visibility: visible;
      }

      .recent_slider .item:hover .thumbnail_img img{transform: none;}

      .recent_slider .item.active .thumbnail_img img {
    transform:none;}

    .payment_logos{
      gap:2px;
      row-gap:10px;
    }

}

@media (max-width:480px){
    .play-btn{width:60px; height:60px;}
    .play-btn::before{font-size:18px;}
    .comparison_table td{font-size:16px;}
    .banner_color_plate{display:none;}
    .hero-banner{background: url(../img/hero-mobile-banner.jpg) no-repeat top center ; position: relative; background-size: cover; padding-top: 124px; padding-bottom: 40px; height:85vh; display: flex; align-items: end;}
      .hero-banner::before {
        content: '';
        position: absolute;
        inset: 0; 
        background: rgba(0,0,0,0.5); 
        z-index: 1;
    }

    .hero-banner > * {
        position: relative;
        z-index: 2;
    }

}