menders

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="en">

<title>Electric Cars | Chawla Green Motors</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

<link href="../bikes/assets/img/logo.png" rel="icon">

<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700|Poppins:300,400,500,600,700"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.cdnfonts.com/css/airstrike" rel="stylesheet">

<link href="../bikes/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="../bikes/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../bikes/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="../bikes/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="../bikes/assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="../bikes/assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="../bikes/assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

<link href="../bikes/assets/css/style.css" rel="stylesheet">

<style>
    :root{
      /* More “corporate” (white + grays) */
      --bg: #eef1f5;          /* page light gray */
      --surface: #ffffff;     /* cards */
      --surface-2: #f1f3f6;   /* pills */
      --surface-3: #e9edf3;   /* section gray */
      --text: #0f172a;
      --muted: #64748b;
      --border: #d9dee7;

--shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
      --shadow-2: 0 10px 24px rgba(15, 23, 42, 0.08);

--brand: #0b5ed7;
      --brand-2: #084298;
    }

/* GLOBAL */
    body{
      background: var(--bg) !important;
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text) !important;
    }

/* remove template dark backgrounds */
    body.bg-secondary{ background: var(--bg) !important; }
    #main, main#main{ background: transparent !important; }

/* HEADER (LIGHT GLASS) */
    #header{
      background: rgba(255,255,255,0.88) !important;
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
      z-index: 9999;
    }

#navbar ul li a,
    #navbar ul li a:focus{
      color: var(--text) !important;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: none;
    }

#navbar a:hover,
    #navbar .active,
    #navbar .active:focus,
    #navbar li:hover>a{
      color: var(--brand) !important;
    }

.mobile-nav-toggle{ color: var(--text) !important; }

/* =========================================================
   HERO / SLIDER (BOX + 007 + VIGO) — COMPLETE RESPONSIVE CSS
   Fixes:
   - No overlapping (proper layout per slide)
   - Car centered, fully visible (contain)
   - Title left on desktop, content right on desktop
   - Stacks nicely on tablet/mobile
   - Controls/indicators aligned & clickable
   ========================================================= */

/* Root (keep your vars if already defined) */
:root{
  --border: rgba(148,163,184,.35);
  --text: #0f172a;
}

/* SECTION */
#hero{
  position: relative;
  overflow: hidden;
  height: calc(100vh - 86px);
  min-height: 560px;
  background: linear-gradient(180deg, #f4f6f9 0%, #e9edf3 100%);
  border-bottom: 1px solid var(--border);
}

/* If you have a sticky header, keep space on smaller screens */
@media (max-width: 991.98px){
  #hero{
    margin-top: 72px !important;
    height: calc(100vh - 72px);
    min-height: 520px;
  }
  
  #hero .carousel-container1{
      align-items: flex-start !important;
      top: 10px;
  }
  #hero .carousel-container{
      align-items: flex-end !important;
      width: 500px;
      padding: 10px 0;
  }
}

/* BOOTSTRAP CAROUSEL HEIGHT */
#heroCarousel,
#hero .carousel-inner,
#hero .carousel-item{
  height: 100%;
}

/* SLIDE LAYOUT (IMPORTANT: stops overlapping) */
#hero .carousel-item{
  position: relative;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* remove any old template overlays */
.home-filter,
.home-filter1{ filter: none !important; }
.home-filter::before,
.home-filter::after{ content: none !important; }

/* ---- CENTER CAR LAYER (middle) ---- */
.hero-car-layer{
  position: absolute;
  inset: 0;
  z-index: 1;                 /* behind text, above bg */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: clamp(12px, 2vw, 28px);
}

.hero-car-img{
  width: min(1100px, 92vw);
  height: min(520px, 72vh);
  object-fit: contain;        /* FULL car visible */
  object-position: center;
  filter: drop-shadow(0 22px 44px rgba(15, 23, 42, 0.18));
}

/* ---- TEXT LAYERS (top) ---- */
.carousel-container1,
.carousel-container{
  position: relative;
  z-index: 2;                 /* above car */
  width: 100%;
  top: auto;
  left: auto;
  transform: none;
}

/* Desktop: Title LEFT, content RIGHT */
.carousel-container1{
  position: absolute;
  left: clamp(18px, 4vw, 58px);
  top: 50%;
  transform: translateY(-50%);
  width: 32%;
  min-width: 260px;
  text-align: left;
  pointer-events: none; /* keeps clicks on controls working */
}

.carousel-container{
  position: absolute;
  right: clamp(18px, 4vw, 58px);
  top: 50%;
  transform: translateY(-50%);
  width: 34%;
  min-width: 280px;
  text-align: left;
}

/* Ensure inner container doesn’t add its own unexpected positioning */
.carousel-container .container{
  width: 100%;
  max-width: 520px;
  padding: 0;
  text-align: left;
}

/* ---- TYPO ---- */
.car-hero-title{
  font-family: 'Airstrike', 'Poppins', sans-serif;
  letter-spacing: 0.16em;
  font-size: clamp(44px, 6.2vw, 78px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  margin: 0;
  pointer-events: none;
  -webkit-text-fill-color: #0f172a !important;
}

.car-hero-badge{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0.32rem 0.95rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #334155;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.85rem;
  border: 1px solid var(--border);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.car-hero-subtitle{
  font-size: 18px;
  line-height: 1.45;
  color: #4b5563;
  margin: 0;
  max-width: 520px;
}

.car-hero-buttons{
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.car-hero-buttons .btn{
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.75rem 1.9rem;
  white-space: nowrap;
}

/* Coming soon pill if you use it */
.coming-soon-pill{
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(15, 23, 42, .18);
  background: rgba(15, 23, 42, .06);
  color: #0f172a;
}

/* ---- INDICATORS / CONTROLS ---- */
#hero .carousel-indicators{
  z-index: 3;
  margin-bottom: 18px;
}

#hero .carousel-control-prev,
#hero .carousel-control-next{
  z-index: 3;
  width: 10%;
}

#hero .carousel-control-prev-icon,
#hero .carousel-control-next-icon{
  background-image: none; /* because you're using bi icons */
}

/* Make chevrons visible */
#hero .carousel-control-prev-icon.bi,
#hero .carousel-control-next-icon.bi{
  font-size: 28px;
  color: rgba(15, 23, 42, 0.75);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Large tablets: reduce widths so they don’t collide */
@media (max-width: 1199.98px){
  .carousel-container1{ width: 30%; }
  .carousel-container{ width: 38%; }
  .hero-car-img{ width: min(980px, 92vw); height: min(480px, 70vh); }
}

/* Tablets / small laptops: stack to center (no overlap) */
@media (max-width: 991.98px){
  #hero .carousel-item{
    align-items: center;
    justify-content: center;
  }

.carousel-container1,
  .carousel-container{
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    min-width: 0;
    text-align: center;
    pointer-events: auto;
  }

.carousel-container1{
    margin-bottom: 12px;
    pointer-events: none; /* title only */
  }

.carousel-container .container{
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
  }

.car-hero-buttons{
    justify-content: center;
  }

.hero-car-layer{
    padding: 18px;
    top: 0px;
    align-items: flex-start;    
  }

.hero-car-img{
    width: min(920px, 92vw);
    height: min(480px, 60vh);
  }
}

/* Mobile */
@media (max-width: 767.98px){
  #hero{
    min-height: 520px;
  }

.hero-car-img{
    width: 94vw;
    height: 46vh;
  }

.car-hero-title{
    font-size: clamp(34px, 10vw, 48px);
    letter-spacing: 0.14em;
  }

.car-hero-subtitle{
    font-size: 15px;
    padding: 0 10px;
  }

.car-hero-buttons .btn{
    padding: 0.7rem 1.4rem;
    font-size: 11px;
  }

#hero .carousel-control-prev,
  #hero .carousel-control-next{
    width: 14%;
  }
  
  #hero .carousel-container1{
      align-items: flex-start !important;
      top: 10px;
  }
  #hero .carousel-container{
      align-items: flex-end !important;
      width: 80%;
      bottom: 10px;
  }
  .hero-car-layer{
      top: 35px;
  }
  #hero .carousel-indicators{
      margin-bottom: 2px;
  }
}

/* Small phones */
@media (max-width: 479.98px){
  .hero-car-img{
    height: 42vh;
  }

.car-hero-badge{
    font-size: 10px;
  }
}

.btn-view{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: none;
  color: #fff !important;
  box-shadow: 0 14px 26px rgba(11, 94, 215, 0.18);
}

.btn-view:hover{
  background: linear-gradient(135deg, var(--brand-2), #052c65);
  color: #fff !important;
}

.coming-soon-pill{
  display: inline-block;
  margin-left: .5rem;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ABOUT (give it a gray section background to avoid “all white”) */
    #aboutCar{
      background: var(--surface-3) !important;
      border-bottom: 1px solid var(--border);
    }

.about-card{
      background: var(--surface);
      color: var(--text);
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-2);
    }

.about-card .card-title{ font-weight: 800; }
    .about-card .card-text{ color: #475569; }

/* LINEUP */
    #car-lineup{
      background: linear-gradient(180deg, var(--bg) 0%, #f6f7f9 100%);
      padding: 70px 0 60px 0;
      border-bottom: 1px solid var(--border);
    }

#car-lineup .section-title h2{
      font-weight: 900;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      font-size: 20px;
      margin-bottom: 0.4rem;
      color: var(--text);
    }

#car-lineup .section-title p{
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 0;
    }

.car-model-box{
      background: var(--surface);
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      margin-bottom: 32px;
      color: var(--text);
      position: relative;
    }

.car-model-box-inner{
      padding: 30px 34px;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
      gap: 24px;
      align-items: center;
    }

.car-model-name{
      font-family: 'Airstrike', 'Inter', sans-serif;
      letter-spacing: 0.18em;
      font-size: 32px;
      text-transform: uppercase;
      margin-bottom: 6px;
      color: var(--text);
    }

.car-model-tagline{
      font-size: 13px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }

.car-model-summary{
      font-size: 14px;
      color: #475569;
      margin-bottom: 14px;
    }

.car-model-specs{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
    }

.car-spec-pill{
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: #334155;
    }

.car-model-features{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 18px;
    }

.car-feature-tag{
      font-size: 11px;
      padding: 3px 9px;
      border-radius: 999px;
      background: #f1f5ff;
      color: #1e3a8a;
      border: 1px solid #dbe7ff;
    }

.car-model-image{
      width: 100%;
      height: auto;
      display: block;
      filter: drop-shadow(0 18px 32px rgba(15, 23, 42, 0.18));
    }

.car-model-badge{
      position: absolute;
      top: 18px;
      right: 18px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      border: 1px solid var(--border);
      color: #334155;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    }

.car-model-label{
      position: absolute;
      bottom: 14px;
      right: 22px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: rgba(51, 65, 85, 0.65);
    }

/* accents */
    .car-box-box{ border-top: 4px solid rgba(59, 130, 246, 0.55); }
    .car-box-007{ border-top: 4px solid rgba(239, 68, 68, 0.45); }
    .car-box-vigo{ border-top: 4px solid rgba(16, 185, 129, 0.45); }

/* TECH */
    .car-tech-section{
      background: linear-gradient(135deg, #f3f5f8, #ffffff);
      color: var(--text);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

.car-tech-highlight{
      border-radius: 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 1rem 1.2rem;
      margin-bottom: 0.9rem;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    }

.car-tech-highlight h6{
      font-size: 0.86rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--brand);
      margin-bottom: 0.25rem;
      font-weight: 900;
    }

.car-tech-highlight p{
      font-size: 0.88rem;
      margin-bottom: 0;
      color: #475569;
    }

/* coming soon in nav */
    .nav-coming-soon{
      display: inline-block;
      margin-left: 6px;
      padding: 0 6px;
      border-radius: 999px;
      background: #fff7ed;
      border: 1px solid #fed7aa;
      color: #9a3412;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

/* DROPDOWN (LIGHT) */
    .navbar .dropdown{ position: relative; }
    .navbar .dropdown > a i{
      font-size: 12px;
      margin-left: 4px;
      transition: transform 0.2s ease;
    }
    .navbar .dropdown:hover > a i{ transform: rotate(180deg); }

.navbar .dropdown ul{
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      min-width: 200px;
      background: rgba(255,255,255,0.98);
      border-radius: 14px;
      padding: 8px 0;
      border: 1px solid var(--border);
      box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14);
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: all 0.20s ease;
      z-index: 2000;
      pointer-events: none;
    }

.navbar .dropdown:hover > ul,
    .navbar .dropdown.dropdown-active > ul{
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

.navbar .dropdown ul li a{
      display: block;
      padding: 10px 16px;
      font-size: 12px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: #0f172a !important;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.18s ease, color 0.18s ease;
    }

.navbar .dropdown ul li a:hover{
      background: rgba(11, 94, 215, 0.08);
      color: var(--brand) !important;
    }

/* FOOTER (LIGHT + GRAY) */
    #footer{
      background: #ffffff !important;
      border-top: 1px solid var(--border);
      color: #334155 !important;
    }

#footer .footer-top{
      background: linear-gradient(180deg, #ffffff, #f3f5f8) !important;
      padding-top: 45px;
    }

#footer h3,
    #footer h4,
    #footer .footer-info p,
    #footer .footer-links ul li a{
      color: #334155 !important;
    }

#footer .footer-links ul li a:hover{ color: var(--brand) !important; }

#footer .social-links a{
      background: rgba(11, 94, 215, 0.08) !important;
      color: var(--brand) !important;
      border: 1px solid rgba(11, 94, 215, 0.18);
    }

#footer .social-links a:hover{
      background: rgba(11, 94, 215, 0.14) !important;
      color: var(--brand-2) !important;
    }

#footer .copyright{
      color: #64748b !important;
    }

/* Responsive */
    @media (max-width: 991.98px){
      .car-model-box-inner{ grid-template-columns: minmax(0, 1fr); }
      .car-model-image-wrapper{ order: -1; }
    }

@media (max-width: 575.98px){
      .car-hero-title{ font-size: 40px; }
      .car-hero-subtitle{ font-size: 16px; }
      .car-hero-buttons .btn{ width: 100%; text-align: center; }
      .car-model-box-inner{ padding: 24px 20px; }
      .car-model-name{ font-size: 26px; }
    }
    
    /* ===== Mobile sidebar menu (right slide) ===== */
.mobile-sidebar-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  z-index: 9998;
}

.mobile-sidebar{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(88vw, 360px);
  background: #ffffff;
  transform: translateX(105%);
  transition: transform .26s ease;
  z-index: 9999;

display: flex;
  flex-direction: column;
  padding: 18px 16px;

box-shadow: -24px 0 60px rgba(0,0,0,0.25);
}

.mobile-sidebar.open{
  transform: translateX(0);
}

.mobile-sidebar-overlay.open{
  opacity: 1;
  visibility: visible;
}

.mobile-sidebar-close{
  border: 0;
  background: transparent;
  font-size: 18px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
}

.mobile-sidebar-close:hover{
  background: rgba(0,0,0,0.06);
}

.mobile-sidebar-nav{
  margin-top: 6px;
  overflow: auto;
  padding-right: 6px;
}

.ms-link{
  display: flex;
  align-items: center;
  justify-content: space-between;

padding: 12px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 600;
}

.ms-link:hover{
  background: rgba(0,0,0,0.05);
}

.ms-link.active{
  background: rgba(11, 94, 215, 0.10);
  color: #0b5ed7;
}

.ms-group{
  margin: 6px 0;
}

.ms-accordion{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 10px;
  border-radius: 12px;

display: flex;
  align-items: center;
  justify-content: space-between;

font-weight: 700;
  color: #0f172a;
}

.ms-accordion:hover{
  background: rgba(0,0,0,0.05);
}

.ms-sub{
  display: none;
  padding-left: 10px;
  margin-top: 6px;
}

.ms-sub.open{
  display: block;
}

.ms-sublink{
  display: flex;
  align-items: center;
  justify-content: space-between;

padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #334155;
  font-weight: 600;
}

.ms-sublink:hover{
  background: rgba(0,0,0,0.05);
}

/* show sidebar toggle only on mobile (bootstrap usually does this, but safe) */
@media (min-width: 992px){
  #mobileNavToggle{ display: none !important; }
}

/* prevent page scroll when menu open */
body.menu-open{
  overflow: hidden;
}

/* your existing badge class can stay; optional small tweak for mobile */
.nav-coming-soon{
  margin-left: 8px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
}
.navbar-mobile{
    display: none !important;
}
#footer p a{
    color: #334155;
}
  </style>
</head>

<header id="header" class="sticky-top d-flex align-items-center">
  <div class="container d-flex align-items-center">

<nav id="navbar" class="navbar">
      <ul>
        <li class="dropdown">
          <a href="cars.html#car-lineup"><span>Models</span> <i class="bi bi-chevron-down"></i></a>
          <ul>
            <li><a href="box.html">Box</a></li>
            <li><a href="007.html">007</a></li>
            <li>
              <a href="vigo.html">
                Vigo 
              </a>
            </li>
          </ul>
        </li>
        <li><a href="dealers-network.html">Dealers Network</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
      </ul>

<i class="bi bi-list mobile-nav-toggle" id="mobileNavToggle"></i>
    </nav>

</div>
</header>

<div class="mobile-sidebar-overlay" id="mobileSidebarOverlay" aria-hidden="true"></div>

<div class="ms-group">
      <button class="ms-accordion" type="button" id="msModelsBtn" aria-expanded="false">
        <span>Models</span>
        <i class="bi bi-chevron-down"></i>
      </button>
      <div class="ms-sub" id="msModelsSub">
        <a class="ms-sublink" href="box.html">Box</a>
        <a class="ms-sublink" href="007.html">007</a>
        <a class="ms-sublink" href="vigo.html">
          Vigo 
        </a>
      </div>
    </div>

<a class="ms-link" href="dealers-network.html">Dealers Network</a>
    <a class="ms-link" href="about.html">About Us</a>
    <a class="ms-link" href="contact.html">Contact Us</a>
  </nav>
</aside>

<section id="hero">
  <div id="heroCarousel" data-bs-interval="5000" class="carousel slide carousel-fade" data-bs-ride="carousel">

<div class="carousel-item active home-filter">
        
        <div class="hero-car-layer">
          <img src="images/box.webp" alt="Dongfeng Box" class="hero-car-img">
        </div>

<div class="carousel-container1">
          <h1 class="airstrike-h1 animate__animated animate__fadeInDown car-hero-title">BOX</h1>
        </div>

<div class="carousel-container">
          <div class="container home-filter1">
            <span class="car-hero-badge animate__animated animate__fadeInDown">
              <i class="bi bi-lightning-charge"></i> UNBOX THE FUTURE
            </span>

<h3 class="animate__animated animate__fadeInDown fw-bold car-hero-subtitle">
              Compact electric city car with frameless doors and hidden handles for modern urban life.
            </h3>

<div class="car-hero-buttons animate__animated animate__fadeInUp">
              <a href="box.html" class="btn btn-view">View Details</a>
            </div>
          </div>
        </div>
      </div>

<div class="carousel-item home-filter">
        <div class="hero-car-layer">
          <img src="images/007T.webp" alt="Dongfeng 007" class="hero-car-img">
        </div>

<div class="carousel-container">
          <div class="container home-filter1">
            <span class="car-hero-badge animate__animated animate__fadeInDown">
              <i class="bi bi-speedometer2"></i> ELECTRIC SPORT SEDAN
            </span>

<h3 class="animate__animated animate__fadeInDown fw-bold car-hero-subtitle">
              Sleek electric fastback with frameless windows, active spoiler and an immersive digital cockpit.
            </h3>

<div class="car-hero-buttons animate__animated animate__fadeInUp">
              <a href="007.html" class="btn btn-view">View Details</a>
            </div>
          </div>
        </div>
      </div>

<div class="carousel-item home-filter">
        <div class="hero-car-layer">
          <img src="images/vigo-suv.png" alt="Dongfeng Vigo" class="hero-car-img">
        </div>

<div class="carousel-container">
          <div class="container home-filter1">
            <span class="car-hero-badge animate__animated animate__fadeInDown">
              <i class="bi bi-ev-front"></i> SMART ELECTRIC SUV
              
            </span>

<h3 class="animate__animated animate__fadeInDown fw-bold car-hero-subtitle">
              Smart electric SUV with panoramic glass roof and advanced safety for family journeys.
            </h3>

<div class="car-hero-buttons animate__animated animate__fadeInUp">
              <a href="vigo.html" class="btn btn-view">View Details</a>
            </div>
          </div>
        </div>
      </div>

</div>

</div>
</section>

<section id="aboutCar" class="about about py-3 py-md-5">
      <div class="container px-5 px-md-0">
        <div class="row content mt-3 mt-md-5">
          <div class="card mb-3 p-0 about-card">
            <div class="row g-0">
              <div class="col-md-4 d-flex">
                <img src="https://chawlagreenmotors.com/bikes/assets/img/chawala_logo2.jpg"
                  class="img-fluid rounded-start" alt="Dongfeng & Chawla">
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">Dongfeng Electric Cars by Chawla Green Motors</h5>
                  <p class="card-text">
                    Chawla Group brings Dongfeng’s world-class EVs to Pakistan through an exclusive and fully compliant
                    partnership, combining decades of local trust with global technology.
                  </p>
                  <p class="card-text text-justify">
                    From compact city cars to intelligent SUVs and sleek fastbacks, Dongfeng’s electric range is designed
                    around real-world usability – efficient powertrains, smart battery management and advanced safety
                    systems that make every drive confident and comfortable.
                  </p>
                  <p class="card-text text-justify">
                    With Chawla Green Motors’ nationwide sales and after-sales network, customers enjoy convenient
                    service, genuine parts and a seamless EV ownership experience from test drive to long-term support.
                  </p>
                </div>
              </div>
            </div>
          </div>

</div>
      </div>
    </section>

<section id="car-lineup">
      <div class="container">
        <div class="row mb-4">
          <div class="col-12 section-title text-center">
            <h2>Our Electric Car Lineup</h2>
            <p>Three distinctive EVs – city hatch, performance sedan and smart SUV – all on one page.</p>
          </div>
        </div>

<div class="car-model-box car-box-box" id="model-box">
          <div class="car-model-box-inner">
            <div>
              <div class="car-model-name">BOX</div>
              <div class="car-model-tagline">UNBOX THE FUTURE</div>
              <p class="car-model-summary">
                An all-electric city hatchback with a clean, modern design, frameless glass doors and hidden handles.
                Ideal for tight streets and easy parking with a premium lounge-like cabin.
              </p>

<div class="car-model-specs">
                <span class="car-spec-pill">CLTC range up to 430 km*</span>
                <span class="car-spec-pill">42.3 kWh LFP battery</span>
                <span class="car-spec-pill">70 kW permanent magnet motor</span>
              </div>

<div class="car-model-features">
                <span class="car-feature-tag">Frameless glass doors</span>
                <span class="car-feature-tag">Hidden door handles</span>
                <span class="car-feature-tag">Wireless phone charging</span>
                <span class="car-feature-tag">32-colour ambient lighting</span>
                <span class="car-feature-tag">Reclining lounge mode</span>
                <span class="car-feature-tag">Large capacity trunk</span>
              </div>

<div class="car-model-buttons">
                <a href="box.html" class="btn btn-sm btn-view">View Details</a>
              </div>
            </div>
            <div class="car-model-image-wrapper">
              <img src="images/box.webp" alt="Dongfeng Box" class="car-model-image">
              <div class="car-model-badge">
                <i class="bi bi-building"></i> City EV
              </div>
              <div class="car-model-label">URBAN ELECTRIC</div>
            </div>
          </div>
        </div>

<div class="car-model-box car-box-007" id="model-007">
          <div class="car-model-box-inner">
            <div>
              <div class="car-model-name">007</div>
              <div class="car-model-tagline">ELECTRIC SPORT SEDAN</div>
              <p class="car-model-summary">
                Sleek electric fastback sedan with a coupé-inspired profile, frameless windows and a driver-focused
                cockpit. Designed for elegant styling and confident long-distance cruising.
              </p>

<div class="car-model-specs">
                <span class="car-spec-pill">LED front lights with active grille shutter</span>
                <span class="car-spec-pill">R18 / R19 sport rims</span>
                <span class="car-spec-pill">Electric tailgate &amp; active rear spoiler</span>
              </div>

<div class="car-model-features">
                <span class="car-feature-tag">Frameless windows &amp; hidden handles</span>
                <span class="car-feature-tag">15.6&quot; central display</span>
                <span class="car-feature-tag">Wireless charging</span>
                <span class="car-feature-tag">Ambient interior lighting</span>
                <span class="car-feature-tag">Annular steering wheel</span>
                <span class="car-feature-tag">Premium audio system</span>
              </div>

<div class="car-model-buttons">
                <a href="007.html" class="btn btn-sm btn-view">View Details</a>
              </div>
            </div>
            <div class="car-model-image-wrapper">
              <img src="images/007T.webp" alt="Dongfeng 007" class="car-model-image">
              <div class="car-model-badge">
                <i class="bi bi-lightning-charge"></i> Fastback EV
              </div>
              <div class="car-model-label">ELECTRIC SPORT SEDAN</div>
            </div>
          </div>
        </div>

<div class="car-model-box car-box-vigo" id="model-vigo">
          <div class="car-model-box-inner">
            <div>
              <div class="car-model-name">
                VIGO
                
              </div>
              <div class="car-model-tagline">SMART ELECTRIC SUV</div>
              <p class="car-model-summary">
                Smart electric SUV with panoramic glass roof, flexible interior space and advanced driver assistance.
                Built to make family journeys quiet, comfortable and efficient.
              </p>

<div class="car-model-specs">
                <span class="car-spec-pill">CLTC range up to 430 km*</span>
                <span class="car-spec-pill">LFP battery options</span>
                <span class="car-spec-pill">Fast DC charging capability</span>
              </div>

<div class="car-model-features">
                <span class="car-feature-tag">Panoramic sunroof</span>
                <span class="car-feature-tag">540° camera view</span>
                <span class="car-feature-tag">Wireless phone charging</span>
                <span class="car-feature-tag">PM2.5 cabin filtration</span>
                <span class="car-feature-tag">Advanced ADAS suite</span>
              </div>

<div class="car-model-buttons">
                <a href="vigo.html" class="btn btn-sm btn-view">View Details</a>
              </div>
            </div>
            <div class="car-model-image-wrapper">
              <img src="images/vigo-suv.png" alt="Dongfeng Vigo" class="car-model-image">
              <div class="car-model-badge">
                <i class="bi bi-sunrise"></i> Electric SUV
              </div>
              <div class="car-model-label">SMART FAMILY EV</div>
            </div>
          </div>
        </div>

<div class="row mt-2">
          <div class="col-12 text-center">
            <small class="text-muted fst-italic">
              *Range values are based on CLTC test cycle from Dongfeng data and may vary with driving style, load and conditions.
            </small>
          </div>
        </div>

</div>
    </section>

<section class="car-tech-section py-5">
      <div class="container">
        <div class="row align-items-center g-4">
          <div class="col-md-6">
            <h2 class="fw-bold mb-3">Smart EV Architecture</h2>
            <p class="mb-4">
              Dongfeng’s dedicated EV platforms integrate battery, motors and control systems for high efficiency,
              strong acceleration and a low centre of gravity – delivering stable handling and a confident drive.
            </p>
            <div class="car-tech-highlight">
              <h6>High-Density LFP Batteries</h6>
              <p>
                Long-life lithium iron phosphate (LFP) packs with fast DC charging and thermal management designed for
                everyday use in local conditions.
              </p>
            </div>
            <div class="car-tech-highlight">
              <h6>Connected Cabin</h6>
              <p>
                Large central displays, full LCD instrument clusters, wireless phone charging and smartphone mirroring
                keep you connected and in control on every trip.
              </p>
            </div>
            <div class="car-tech-highlight">
              <h6>Advanced Safety &amp; ADAS</h6>
              <p>
                Multiple airbags, ESC, TPMS and driver-assist systems such as AEB, ACC, LKA and traffic sign recognition
                help support the driver in complex traffic.
              </p>
            </div>
          </div>
          <div class="col-md-6 text-center">
            <img src="images/ev.jpg" class="img-fluid rounded-4" alt="EV Platform">
          </div>
        </div>
      </div>
    </section>

</main>

<footer id="footer">
    <div class="footer-top">
      <div class="container">
        <div class="row">

<div class="col-lg-3 offset-md-1 col-md-6">
            <h3 class="mb-4">Address</h3>
            <p><i class="bi bi-geo-alt-fill me-2"></i>Flagship Showroom : 130 E1 Gulberg III - Main Boulevard, Lahore</p>
            <p><i class="bi bi-telephone-fill me-2"></i><a href="tel:+923114995162">+92 311 4995162</a></p>
            <p><i class="bi bi-envelope-fill me-2"></i>info@chawlagreenmotors.com</p>
          </div>

</div>
      </div>
    </div>

<div class="container">
      <div class="copyright">
        &copy; Copyright Chawla Green Motors. Designed & Developed By <a href="https://buraqsys.com"><strong><span>Buraqsys Studio (PVT) Ltd.</span></strong></a>. 
      </div>
    </div>
  </footer>

<script src="../bikes/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../bikes/assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="../bikes/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="../bikes/assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="../bikes/assets/vendor/waypoints/noframework.waypoints.js"></script>
  <script src="../bikes/assets/vendor/php-email-form/validate.js"></script>

<script src="../bikes/assets/js/main.js"></script>

const modelsBtn = document.getElementById('msModelsBtn');
    const modelsSub = document.getElementById('msModelsSub');

function openMenu(){
      sidebar.classList.add('open');
      overlay.classList.add('open');
      document.body.classList.add('menu-open');
      sidebar.setAttribute('aria-hidden', 'false');
      overlay.setAttribute('aria-hidden', 'false');
    }

function closeMenu(){
      sidebar.classList.remove('open');
      overlay.classList.remove('open');
      document.body.classList.remove('menu-open');
      sidebar.setAttribute('aria-hidden', 'true');
      overlay.setAttribute('aria-hidden', 'true');
    }

if(toggle){
      toggle.addEventListener('click', function(e){
        e.preventDefault();
        openMenu();
      });
    }

if(closeBtn) closeBtn.addEventListener('click', closeMenu);
    if(overlay) overlay.addEventListener('click', closeMenu);

// Close on ESC
    document.addEventListener('keydown', function(e){
      if(e.key === 'Escape') closeMenu();
    });

// Accordion for Models
    if(modelsBtn && modelsSub){
      modelsBtn.addEventListener('click', function(){
        const isOpen = modelsSub.classList.toggle('open');
        modelsBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
      });
    }

// Close menu when clicking a link
    if(sidebar){
      sidebar.addEventListener('click', function(e){
        const a = e.target.closest('a');
        if(a) closeMenu();
      });
    }
  })();
</script>
</body>
</html>