File "dealers-network.html"
Full Path: /home/chawlag2/public_html/cars/admin/vendor/datatables/dealers-network.html
File size: 28.89 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>Dealer Locator | 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=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
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">
<!-- Main CSS -->
<link href="../bikes/assets/css/style.css" rel="stylesheet">
<!-- Page specific CSS (LIGHT + ELEGANT) -->
<style>
body {
background: #f4f6f9;
font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #0f172a;
}
#main.bg-body-secondary {
background: transparent !important;
}
@media (max-width: 991.98px) {
#dealer-hero {
}
}
/* Hero */
#dealer-hero {
background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
color: #0f172a;
padding: 60px 0 40px;
border-bottom: 1px solid #e5e7eb;
}
#dealer-hero .hero-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.9rem;
border-radius: 999px;
background: #e8edf5;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #334155;
margin-bottom: 0.75rem;
}
#dealer-hero h1 {
letter-spacing: 0.18em;
font-size: 36px;
text-transform: uppercase;
margin-bottom: 0.7rem;
}
#dealer-hero p {
max-width: 650px;
margin: 0 auto;
color: #475569;
font-size: 14px;
}
/* City quick links */
.city-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 24px;
}
.city-link {
padding: 10px 18px;
border-radius: 999px;
background: #ffffff;
border: 1px solid #e5e7eb;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #0f172a;
cursor: pointer;
transition: 0.25s ease;
user-select: none;
}
.city-link:hover {
background: #0b5ed7;
color: #fff;
border-color: #0b5ed7;
}
/* Locations section */
#locations {
padding: 40px 0 70px;
background: #f6f7fb;
}
.location-intro {
margin-bottom: 24px;
}
.location-intro h2 {
text-transform: uppercase;
font-size: 18px;
letter-spacing: 0.14em;
margin-bottom: 0.3rem;
color: #0f172a;
}
.location-intro p {
font-size: 13px;
color: #64748b;
margin: 0;
}
.location-card {
background: #ffffff;
border-radius: 22px;
border: 1px solid #e5e7eb;
padding: 22px 22px 18px;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
color: #0f172a;
margin-bottom: 26px;
position: relative;
overflow: hidden;
}
.location-pill {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.7rem;
border-radius: 999px;
background: #eef2ff;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #3730a3;
margin-bottom: 0.5rem;
border: 1px solid #e0e7ff;
}
.location-title {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.location-title h3 {
font-size: 20px;
margin: 0;
color: #0f172a;
}
.location-subtitle {
font-size: 13px;
color: #64748b;
margin-bottom: 0.4rem;
}
.location-address {
font-size: 14px;
font-weight: 600;
color: #334155;
margin-bottom: 10px;
}
.location-meta {
font-size: 12px;
color: #64748b;
margin-bottom: 10px;
}
.location-map {
border-radius: 16px;
overflow: hidden;
border: 1px solid #e5e7eb;
}
.location-map iframe {
width: 100%;
height: 260px;
border: 0;
}
.location-tagline {
position: absolute;
right: 18px;
top: 18px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #0b5ed7;
font-weight: 800;
}
/* Coming soon badge style in nav */
.nav-coming-soon {
display: inline-block;
margin-left: 6px;
padding: 0 6px;
border-radius: 999px;
background: #ffedd5;
border: 1px solid #fed7aa;
color: #9a3412;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* DROPDOWN WRAPPER */
.navbar .dropdown {
position: relative;
}
/* Chevron animation */
.navbar .dropdown>a i {
font-size: 12px;
margin-left: 4px;
transition: transform 0.2s ease;
}
.navbar .dropdown:hover>a i {
transform: rotate(180deg);
}
/* DROPDOWN PANEL (light) */
.navbar .dropdown ul {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 190px;
background: rgba(255, 255, 255, 0.98);
border-radius: 12px;
padding: 8px 0;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
border: 1px solid #e5e7eb;
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: 8px 16px;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #0f172a;
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: #0b5ed7;
}
@media (max-width: 575.98px) {
.location-card {
padding: 18px 16px 16px;
}
.location-title h3 {
font-size: 18px;
}
.location-map iframe {
height: 220px;
}
}
@media (max-width: 480px) {
.location-title{
margin-top: 20px;
}
.location-tagline{
left: 18px;
top: 10px;
}
}
#footer .social-links a {
background: rgba(11, 94, 215, 0.08) !important;
color: #0b5ed7 !important;
border: 1px solid rgba(11, 94, 215, 0.18);
}
/* ===== 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;
}
.location-phones{
display:flex;
flex-wrap:wrap;
gap:10px;
margin: 6px 0 12px;
}
.location-phones a{
display:inline-flex;
align-items:center;
gap:8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(11, 94, 215, 0.08);
border: 1px solid rgba(11, 94, 215, 0.18);
color: #0b5ed7;
text-decoration:none;
font-weight: 700;
font-size: 12px;
letter-spacing: .06em;
}
.location-phones a:hover{
background: #0b5ed7;
color:#fff;
border-color:#0b5ed7;
}
.location-phones i{ font-size: 14px; }
</style>
</head>
<body class="bg-secondary">
<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" class="active">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" 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 active" 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 -->
<!-- End Header -->
<main id="main" class="bg-body-secondary">
<!-- Hero -->
<section id="dealer-hero">
<div class="container text-center">
<div class="hero-badge">
<i class="bi bi-geo-alt"></i> FIND YOUR NEAREST DEALER
</div>
<h1>Dealer Locator</h1>
<p>
Explore our nationwide network of Dongfeng & Pakistan Showrooms.
Click on any location map to open it in Google Maps for directions.
</p>
<!-- City Cards/Buttons -->
<div class="city-links">
<div class="city-link" onclick="scrollToLocation('lahore-flagship')">Lahore – Flagship</div>
<div class="city-link" onclick="scrollToLocation('lahore-booking')">Lahore – Display Only</div>
<div class="city-link" onclick="scrollToLocation('lahore-bedian')">Bedian (Lahore)</div>
<div class="city-link" onclick="scrollToLocation('islamabad')">Islamabad</div>
<div class="city-link" onclick="scrollToLocation('multan')">Multan</div>
<div class="city-link" onclick="scrollToLocation('faisalabad')">Faisalabad</div>
<div class="city-link" onclick="scrollToLocation('peshawar')">Peshawar</div>
<div class="city-link" onclick="scrollToLocation('karachi')">Karachi</div>
</div>
</div>
</section>
<!-- Locations -->
<section id="locations">
<div class="container">
<div class="location-intro text-center mb-4">
<h2>Locations</h2>
<p>Flagship showroom and regional partners across Pakistan.</p>
</div>
<!-- Flagship Showroom Lahore -->
<div class="location-card" id="lahore-flagship">
<div class="location-tagline">FLAGSHIP</div>
<div class="location-title">
<h3>Flagship Showroom</h3>
<span class="location-subtitle">Lahore</span>
</div>
<div class="location-meta">
<span class="location-pill"><i class="bi bi-geo-alt"></i> SHOWROOM & EXPERIENCE CENTER</span>
</div>
<div class="location-address">
Plot # 130, Main Boulevard, Gulberg, Lahore.
</div>
<div class="location-phones">
<a href="tel:+923114995162"><i class="bi bi-telephone-fill"></i>0311-4995162</a>
</div>
<div class="location-map mt-2">
<iframe loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDw4MB66rEcRE4SwORtm24xydvkRnfPAUc&q=31.5152169,74.3426873"></iframe>
</div>
</div>
<!-- Lahore – Display / Booking Office -->
<div class="location-card" id="lahore-booking">
<div class="location-tagline">LAHORE</div>
<div class="location-title">
<h3>Display / Booking Office</h3>
</div>
<div class="location-meta">
<span class="location-pill"><i class="bi bi-building"></i> CUSTOMER BOOKINGS</span>
</div>
<div class="location-address">
The Ballroom Event Complex, Raiwind Road, Opposite UOL, Lahore.
</div>
<div class="location-phones">
<a href="tel:+923114995164"><i class="bi bi-telephone-fill"></i>0311-4995164</a>
</div>
<div class="location-map mt-2">
<iframe loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDw4MB66rEcRE4SwORtm24xydvkRnfPAUc&q=31.3949582,74.2425639"></iframe>
</div>
</div>
<!-- Lahore – Bedian Defence Motors -->
<div class="location-card" id="lahore-bedian">
<div class="location-tagline">LAHORE</div>
<div class="location-title">
<h3>Bedian Defence Motors</h3>
</div>
<div class="location-meta">
<span class="location-pill"><i class="bi bi-ev-front"></i> SALES & TEST DRIVES</span>
</div>
<div class="location-address">
Main Bedian Road, DHA, Lahore.
</div>
<div class="location-phones">
<a href="tel:+923206792866"><i class="bi bi-telephone-fill"></i>0320-6792866</a>
<a href="tel:+923137244655"><i class="bi bi-telephone-fill"></i>0313-7244655</a>
</div>
<div class="location-map mt-2">
<iframe loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDw4MB66rEcRE4SwORtm24xydvkRnfPAUc&q=31.451861,74.450639"></iframe>
</div>
</div>
<!-- Islamabad -->
<div class="location-card" id="islamabad">
<div class="location-tagline">ISLAMABAD</div>
<div class="location-title">
<h3>Dongfeng Islamabad Motors</h3>
</div>
<div class="location-meta">
<span class="location-pill"><i class="bi bi-geo-alt"></i> SALES & SERVICE</span>
</div>
<div class="location-address">
Khokhar Plaza, Koral, Expressway, Islamabad.
</div>
<div class="location-phones">
<a href="tel:+923001794499"><i class="bi bi-telephone-fill"></i>0300-1794499</a>
</div>
<div class="location-map mt-2">
<iframe src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3322.8289601458328!2d73.12815427569757!3d33.60974207332674!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMzPCsDM2JzM1LjEiTiA3M8KwMDcnNTAuNiJF!5e0!3m2!1sen!2s!4v1766231446190!5m2!1sen!2s" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<!-- Multan -->
<div class="location-card" id="multan">
<div class="location-tagline">MULTAN</div>
<div class="location-title">
<h3>Dongfeng Multan Motors</h3>
</div>
<div class="location-meta">
<span class="location-pill"><i class="bi bi-geo-alt"></i> SALES PARTNER</span>
</div>
<div class="location-address">
Head Muhammad Wala Bridge, Nasarullah Chowk, Multan.
</div>
<div class="location-phones">
<a href="tel:+923499815930"><i class="bi bi-telephone-fill"></i>0349-9815930</a>
</div>
<div class="location-map mt-2">
<iframe loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDw4MB66rEcRE4SwORtm24xydvkRnfPAUc&q=30.2636667,71.4499444"></iframe>
</div>
</div>
<!-- Faisalabad -->
<div class="location-card" id="faisalabad">
<div class="location-tagline">FAISALABAD</div>
<div class="location-title">
<h3>Dongfeng Lyallpur Motors</h3>
</div>
<div class="location-meta">
<span class="location-pill"><i class="bi bi-building"></i> MALL SHOWROOM</span>
</div>
<div class="location-address">
The Grand Atrium Mall, Lyallpur / Faisalabad.
</div>
<div class="location-map mt-2">
<iframe loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDw4MB66rEcRE4SwORtm24xydvkRnfPAUc&q=31.440556,73.122056"></iframe>
</div>
</div>
<!-- Peshawar -->
<div class="location-card" id="peshawar">
<div class="location-tagline">PESHAWAR</div>
<div class="location-title">
<h3>Dongfeng Peshawar Motors</h3>
</div>
<div class="location-meta">
<span class="location-pill"><i class="bi bi-ev-front"></i> SALES & SERVICE</span>
</div>
<div class="location-address">
Landi Arbab, Ring Road, Peshawar.
</div>
<div class="location-phones">
<a href="tel:+923158027777"><i class="bi bi-telephone-fill"></i>0315-8027777</a>
</div>
<div class="location-map mt-2">
<iframe loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDw4MB66rEcRE4SwORtm24xydvkRnfPAUc&q=33.973945,71.545305"></iframe>
</div>
</div>
<!-- Karachi -->
<div class="location-card" id="karachi">
<div class="location-tagline">KARACHI</div>
<div class="location-title">
<h3>Dongfeng Karachi</h3>
</div>
<div class="location-meta">
<span class="location-pill"><i class="bi bi-ev-front"></i> SALES & SERVICE</span>
</div>
<div class="location-address">
Ground Floor, Plot # 02, ST-3, Sector 23
Korangi industrial area, near brooks roundabout, Karachi.
</div>
<div class="location-phones">
<a href="tel:+923268091166"><i class="bi bi-telephone-fill"></i>0326-8091166</a>
<a href="tel:+923268091177"><i class="bi bi-telephone-fill"></i>0326-8091177</a>
<a href="tel:+923268091188"><i class="bi bi-telephone-fill"></i>0326-8091188</a>
</div>
<div class="location-map mt-2">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3620.932450678378!2d67.10063934326172!3d24.83198356628418!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3eb33b00705053dd%3A0xcef07dd3b3086411!2sKia%20Signature%20and%20Honri%20prime%20Karachi!5e0!3m2!1sen!2s!4v1766571486656!5m2!1sen!2s"></iframe>
</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="text-light mb-4">Address</h3>
<p><i class="bi bi-geo-alt-fill me-2"></i>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="cars.html#model-box">BOX</a></li>
<li><i class="bx bx-chevron-right"></i><a href="cars.html#model-007">007</a></li>
<li><i class="bx bx-chevron-right"></i><a href="cars.html#model-vigo">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>
<!-- Main JS -->
<script src="../bikes/assets/js/main.js"></script>
<!-- Smooth Scroll -->
<script>
function scrollToLocation(id) {
const el = document.getElementById(id);
if (!el) return;
const offset = 90; // sticky header offset
const y = el.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({ top: y, behavior: "smooth" });
}
(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>