File "index.html"
Full Path: /home/chawlag2/public_html/cars/admin/index.html
File size: 42.58 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Electric Cars | Chawla Green Motors</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="../bikes/assets/img/logo.png" rel="icon">
<!-- Google Fonts -->
<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">
<!-- Vendor CSS Files -->
<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">
<!-- Template Main CSS File -->
<link href="../bikes/assets/css/style.css" rel="stylesheet">
<!-- Cars page specific CSS (LIGHT + CORPORATE, WHITE + GRAYS) -->
<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>
<body>
<a href="https://api.whatsapp.com/send?phone=+923114995162&text=Hello" class="float" target="_blank">
<i class="bi bi-whatsapp"></i>
</a>
<!-- HEADER (keep your existing header as-is) -->
<header id="header" class="sticky-top d-flex align-items-center">
<div class="container d-flex align-items-center">
<h1 class="logo me-auto">
<a href="../index.html">
<img src="../bikes/assets/img/logo2.png" class="img-fluid" style="width: 130px;" alt="">
</a>
</h1>
<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>
<!-- CHANGE: add id so we can hook JS -->
<i class="bi bi-list mobile-nav-toggle" id="mobileNavToggle"></i>
</nav>
</div>
</header>
<!-- ADD: Mobile sidebar + overlay (place right after header, before main content) -->
<div class="mobile-sidebar-overlay" id="mobileSidebarOverlay" aria-hidden="true"></div>
<aside class="mobile-sidebar" id="mobileSidebar" aria-hidden="true">
<button class="mobile-sidebar-close" id="mobileSidebarClose" aria-label="Close menu">
<i class="bi bi-x-lg"></i>
</button>
<nav class="mobile-sidebar-nav" aria-label="Mobile navigation">
<a class="ms-link active" href="../index.html">Home</a>
<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>
<!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero">
<div id="heroCarousel" data-bs-interval="5000" class="carousel slide carousel-fade" data-bs-ride="carousel">
<ol class="carousel-indicators" id="hero-carousel-indicators"></ol>
<div class="carousel-inner" role="listbox">
<!-- BOX -->
<div class="carousel-item active home-filter">
<!-- ✅ CENTER CAR IMAGE (middle layer) -->
<div class="hero-car-layer">
<img src="images/box.webp" alt="Dongfeng Box" class="hero-car-img">
</div>
<!-- LEFT TITLE (same as your template) -->
<div class="carousel-container1">
<h1 class="airstrike-h1 animate__animated animate__fadeInDown car-hero-title">BOX</h1>
</div>
<!-- RIGHT CONTENT (same as your template) -->
<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>
<!-- 007 -->
<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-container1">
<h1 class="airstrike-h1 animate__animated animate__fadeInDown car-hero-title">007</h1>
</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>
<!-- VIGO -->
<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-container1">
<h1 class="airstrike-h1 animate__animated animate__fadeInDown car-hero-title">VIGO</h1>
</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>
<a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
</a>
</div>
</section>
<!-- End Hero -->
<main id="main">
<!-- ======= About 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>
<!-- ======= BIG MODEL BOXES ======= -->
<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>
<!-- BOX -->
<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>
<!-- 007 -->
<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 & active rear spoiler</span>
</div>
<div class="car-model-features">
<span class="car-feature-tag">Frameless windows & hidden handles</span>
<span class="car-feature-tag">15.6" 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>
<!-- VIGO -->
<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>
<!-- ======= EV Technology Highlight 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 & 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 ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="footer-info">
<img src="../bikes/assets/img/logo.png" style="width: 50%" alt="">
<br>
<p>
</p>
<div class="social-links mt-3">
<a href="https://facebook.com/dongfengmotorspakistan/" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="https://www.instagram.com/dongfengmotorpakistan/" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="https://www.tiktok.com/@chawlageenmotors?_t=8qzo4RFxV3P&_r=1" class="instagram"><i class="bi bi-tiktok"></i></a>
<a href="https://www.youtube.com/@ChawlaGreenMotors" class="instagram"><i class="bi bi-youtube"></i></a>
<a href="https://snapchat.com/t/WuXX9kPU" class="instagram"><i class="bi bi-snapchat"></i></a>
<a href="https://www.threads.net/@chawlagreenmotors" class="threads"><i class="bi bi-threads"></i></a>
<a href="https://www.linkedin.com/company/chawla-green-motors/about/?viewAsMember=true" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<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 class="col-lg-2 offset-md-1 col-md-6 footer-links">
<h3>Our Cars</h3>
<ul>
<li><i class="bx bx-chevron-right"></i><a href="box.html">BOX</a></li>
<li><i class="bx bx-chevron-right"></i><a href="007.html">007</a></li>
<li><i class="bx bx-chevron-right"></i><a href="vigo.html">VIGO </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="copyright">
© Copyright Chawla Green Motors. Designed & Developed By <a href="https://buraqsys.com"><strong><span>Buraqsys Studio (PVT) Ltd.</span></strong></a>.
</div>
</div>
</footer>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center">
<i class="bi bi-arrow-up-short"></i>
</a>
<!-- Vendor JS Files -->
<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>
<!-- Template Main JS File -->
<script src="../bikes/assets/js/main.js"></script>
<script>
(function(){
const toggle = document.getElementById('mobileNavToggle');
const sidebar = document.getElementById('mobileSidebar');
const overlay = document.getElementById('mobileSidebarOverlay');
const closeBtn = document.getElementById('mobileSidebarClose');
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>