File "booking-20260907141015-20260907163639.html"
Full Path: /home/chawlag2/public_html/cars/css/booking-20260907141015-20260907163639.html
File size: 98.65 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Booking Form</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/booking.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- NOTE: this was in your file as a stylesheet link; leaving as-is -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="alternate" hreflang="x-default" href="https://www.dongfeng-nammi-box.ch/">
<link rel="alternate" hreflang="de" href="https://www.dongfeng-nammi-box.ch/">
<link rel="alternate" hreflang="en" href="https://www.dongfeng-nammi-box.ch/en">
<meta content="Stylish, practical, and innovative – CGM-Box is your perfect companion for everyday journeys with a range of 430 km" name="description">
<meta content="CGM-Box – the new rising star in affordable electric mobility in Pakistan" property="og:title">
<meta content="Stylish, practical, and innovative – CGM-Box is your perfect companion for everyday journeys with a range of 430 km for only CHF 21,990.–, available in Switzerland from autumn 2024." property="og:description">
<meta content="images/668681a7e07badadddadde51_Sharing_Image.webp" property="og:image">
<meta content="CGM-Box – the new rising star in affordable electric mobility in Switzerland" property="twitter:title">
<meta content="Stylish, practical, and innovative – CGM-Box is your perfect companion for everyday journeys with a range of 430 km" property="twitter:description">
<meta content="https://cdn.prod.website-files.com/6673de3350ec9a81ecfa64a2/668681a7e07badadddadde51_Sharing_Image.webp" property="twitter:image">
<meta property="og:type" content="website">
<meta content="summary_large_image" name="twitter:card">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="css/dongfeng-nammi-box.webflow.7ffe7ed09.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);
</script>
<link href="images/6675a83c20d748b3dea3be18_Favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/6675a84021eb67bac0af9632_Webclip.png" rel="apple-touch-icon">
<script id="Cookiebot" src="js/uc.js" data-cbid="d7888c28-abe6-4050-b8bb-a20ac72085b2" data-blockingmode="auto" type="text/javascript"></script>
<!-- Google tag (gtag.js) -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-BX12GEE1BJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-BX12GEE1BJ');
function bookNow() {
alert("COMING SOON!");
}
</script>
<link href="css/floating.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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>
#footer p a{ color:#2e4155 !important; }
#footer .footer-top .footer-links ul a,i{ color:#2e4155 !important; }
/* WRAPPER FOR MAIN MENU */
.header-main-menu {
display:flex;
align-items:center;
gap:24px;
margin-right:24px;
position:relative;
z-index:1000;
}
/* TOP-LEVEL LINKS */
.header-link-007 {
font-size:13px;
letter-spacing:0.16em;
text-transform:uppercase;
color:#ffffff;
text-decoration:none;
padding:6px 4px;
display:inline-block;
}
.header-link-007:hover { color:#38bdf8; }
/* PARENT ITEM */
.menu-item-007 { position:relative; }
/* DROPDOWN PANEL */
.menu-dropdown-007{
position:absolute;
top:30px;
left:0;
min-width:190px;
background:rgba(15,23,42,0.98);
border-radius:12px;
padding:8px 0;
box-shadow:0 18px 40px rgba(0,0,0,0.75);
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:all 0.20s ease;
z-index:2000;
pointer-events:none;
}
.menu-item-007:hover .menu-dropdown-007{
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
}
.dropdown-link-007{
display:block;
padding:10px 16px;
font-size:12px;
letter-spacing:0.14em;
text-transform:uppercase;
color:#e5e7eb;
text-decoration:none;
white-space:nowrap;
transition:background 0.18s ease, color 0.18s ease;
}
.dropdown-link-007:hover{
background:rgba(55,65,81,0.85);
color:#ffffff;
}
.badge-coming-soon{
display:inline-flex;
align-items:center;
padding:2px 8px;
border-radius:999px;
background:rgba(248,250,252,0.08);
border:1px solid rgba(248,250,252,0.35);
font-size:9px;
margin-left:6px;
text-transform:uppercase;
letter-spacing:0.12em;
color:#fbbf24;
}
.btn-header-link{ width:100%; text-align:left; }
.custom-control-inline{ width:auto; }
@media screen and (max-width:479px){
.color-name-wrap{ bottom:90px; left:40%; }
}
.logo-wrap{ width:auto !important; }
.nav-link{ align-self:center; top:25% !important; }
@media (max-width:991px){
.header-main-menu{ display:none; }
}
/* 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; }
#footer .social-links a{
background:rgba(11,94,215,0.08) !important;
color:#0b5ed7 !important;
border:1px solid rgba(11,94,215,0.18);
}
/* HEADER LAYOUT */
.logo{
position:inherit !important;
margin-top:20px !important;
width:180px;
height:auto;
}
.header--dual-logos{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
background:#000000;
height:135px;
}
.header--dual-logos .logo-wrap{ width:auto !important; }
.header-left-logo,
.header-right-logo{
display:flex;
align-items:center;
flex:0 0 auto;
}
.header-center-nav{
flex:1 1 auto;
display:flex;
align-items:center;
justify-content:center;
gap:28px;
}
.header-center-nav .header-main-menu{ margin-right:0 !important; }
.header-center-nav .nav-buttons-wrap{ display:flex; gap:12px; }
.header-center-nav .button-secondary.reverse-no-hover,
.header-center-nav .button-primary.reverse-no-hover{ white-space:nowrap; }
.mobile-menu-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:80px 16px 10px;
border-bottom:1px solid rgba(148,163,184,0.25);
margin-bottom:6px;
}
.mobile-menu-header .mobile-logo{ display:flex; align-items:center; }
.mobile-menu-header img{ height:38px; width:auto; display:block; }
.nav-mobile-menu .nav-link{
padding:14px 18px;
width:100%;
text-align:left;
top:auto !important;
align-self:auto !important;
}
.nav-mobile-menu{
max-height:100vh;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding-bottom:28px;
}
.nav-submenu{
margin-top:4px;
margin-bottom:10px;
padding-left:16px;
border-left:2px solid rgba(148,163,184,0.35);
}
.nav-sub-link{
padding-top:10px !important;
padding-bottom:10px !important;
opacity:0.92;
font-size:13px;
letter-spacing:0.12em;
}
@media screen and (max-width:1199px){
.header-center-nav .nav-buttons-wrap{ display:none; }
}
@media screen and (max-width:991px){
.logo{ display:flex; }
.header-main-menu{ display:flex; }
}
@media (max-width:767px){
.header-main-menu{ display:none; }
.header--dual-logos .logo-wrap{ display:none; }
}
/* FIXED: your CSS was broken here */
.burger-element{
background-color:#ffffff;
}
</style>
</head>
<body>
<header class="header header--dual-logos">
<!-- LEFT: Chawla Logo -->
<a href="../index.html" class="logo-wrap w-inline-block header-left-logo">
<img loading="lazy" alt="Chawla Group" src="images/logo2.png" class="logo light">
</a>
<!-- CENTER -->
<div class="navigation header-center-nav">
<!-- main menu (desktop) -->
<div class="header-main-menu">
<div class="menu-item-007">
<a href="../cars.html" class="header-link-007">Models</a>
<div class="menu-dropdown-007">
<a href="box.html" class="dropdown-link-007">Box</a>
<a href="007.html" class="dropdown-link-007">007</a>
<a href="vigo.html" class="dropdown-link-007">
Vigo <span class="badge-coming-soon">Coming Soon</span>
</a>
</div>
</div>
<a href="about.html" class="header-link-007">About Us</a>
<a href="contact.html" class="header-link-007">Contact Us</a>
</div>
<nav class="nav-buttons-wrap">
<a href="booking.html" class="button-primary reverse-no-hover w-button">Book now</a>
<a href="dealers-network.html" class="button-secondary reverse-no-hover w-button">Locations</a>
</nav>
<!-- burger -->
<div class="burger">
<div class="burger-element"></div>
<div class="burger-element"></div>
<div class="burger-element"></div>
</div>
</div>
<!-- RIGHT: Dongfeng Logo -->
<a href="../index.html" class="logo-wrap w-inline-block header-right-logo">
<img loading="lazy" alt="Dongfeng"
src="images/6675a6a246c2cbec25eb9aa5_dongfeng_logo_white.svg"
class="logo light">
</a>
</header>
<section class="nav-mobile-wrap">
<nav class="nav-mobile-menu">
<div class="close-menu">
<img loading="lazy" src="images/667d85fe1c9bb91e2148b21c_X.svg" alt="" class="close-menu-icon">
</div>
<div class="mobile-menu-header">
<a href="../index.html" class="mobile-logo">
<img loading="lazy" src="images/logo2.png" alt="Chawla" style="height: 80px;">
</a>
<a href="../index.html" class="mobile-logo">
<img loading="lazy" src="images/dongfeng-logo-black.png" alt="Dongfeng">
</a>
</div>
<a href="../cars.html" class="nav-link hover-el">Models</a>
<div class="nav-submenu">
<a href="box.html" class="nav-link nav-sub-link hover-el">• Box</a>
<a href="007.html" class="nav-link nav-sub-link hover-el">• 007</a>
<a href="vigo.html" class="nav-link nav-sub-link hover-el">• Vigo (Coming Soon)</a>
</div>
<a href="about.html" class="nav-link hover-el">About Us</a>
<a href="contact.html" class="nav-link hover-el">Contact Us</a>
<a href="booking.html" class="nav-link hover-vf">Book now</a>
<a href="dealers-network.html" class="nav-link hover-el">Locations</a>
</nav>
</section>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto ">
<div class="card card0 border-0" style="background-image: linear-gradient(283deg,var(--ocean-eyes)25%,var(--white)75%,#f9faf5 104%);">
<div class="row d-flex">
<div class="col-lg-6">
<div class="card1 pb-5">
<div class="row">
<!-- <img src="images/logo2.png" class="logo"> -->
</div>
<br/>
<!-- ===================== BOX (LUX) SPECS (LEFT) - START ===================== -->
<div class="row" id="rowLUX" style="display: block">
<div class="col-md-12">
<div id="main">
<div class="container">
<div class="accordion" id="faq">
<div class="card">
<div class="card-header" id="faqhead1">
<a href="#" id="dimCard1" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq1"
aria-expanded="true" aria-controls="faq1"><b>DIMENSIONS</b></a>
</div>
<div id="faq1" class="collapse" aria-labelledby="faqhead1" data-parent="#faq">
<table class="" border="1" style="margin-left: 3%">
<tr>
<td colspan="6">
<img id="carImg" src="images/lux430.jpg" class="image" style="height: 390px; width: 100%;">
</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Length (mm)</b></td>
<td style="padding: 5px">4030</td>
<td style="padding: 5px"><b>Width (mm)</b></td>
<td style="padding: 5px">1810</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Height (mm)</b></td>
<td style="padding: 5px">1570</td>
<td style="padding: 5px"><b>Wheelbase (mm)</b></td>
<td style="padding: 5px">2660</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Body Structure</b></td>
<td colspan="3" style="padding: 5px">5 Door - 5 Seats (HB)</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faqhead2">
<a href="#" id="elecCard1" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq2"
aria-expanded="true" aria-controls="faq2"><b>ELECTRICAL INFORMATION</b></a>
</div>
<div id="faq2" class="collapse" aria-labelledby="faqhead2" data-parent="#faq">
<table class="" border="1" style="margin-left: 3%">
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>AC Charger Power 6.6 KW</b></td>
<td style="padding: 5px">S</td>
<td style="padding: 5px"><b>DC Charging Time</b></td>
<td style="padding: 5px">30 Minutes</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Fast Charging Percentage</b></td>
<td style="padding: 5px">80%</td>
<td style="padding: 5px"><b>AC Charger Type 2 Euro</b></td>
<td style="padding: 5px">S</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>DC Combo (CCS)</b></td>
<td style="padding: 5px">S</td>
<td style="padding: 5px"><b>Battery Type LFP</b></td>
<td style="padding: 5px">LFP (Lithium Iron Phosphate)</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Battery Capacity</b></td>
<td style="padding: 5px">42.3 KWH</td>
<td style="padding: 5px"><b>Battery Pre-Heating</b></td>
<td style="padding: 5px">S</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Battery Cooling Scheme</b></td>
<td style="padding: 5px">S</td>
<td style="padding: 5px"><b>Vehicle Warranty</b></td>
<td style="padding: 5px">4 Years or 150,000 KM</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Battery Warranty</b></td>
<td colspan="3" style="padding: 5px">8 Years or 200,000 KM</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faqhead3">
<a href="#" id="perCard1" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq3"
aria-expanded="true" aria-controls="faq3"><b>PERFORMANCE</b></a>
</div>
<div id="faq3" class="collapse" aria-labelledby="faqhead3" data-parent="#faq">
<table class="" border="1" style="margin-left: 3%">
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Max Speed</b></td>
<td style="padding: 5px">140 KM/H</td>
<td style="padding: 5px"><b>CLTC Comprehensive Range</b></td>
<td style="padding: 5px">430 KM</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Motor Power</b></td>
<td style="padding: 5px">70KW</td>
<td style="padding: 5px"><b>Motor Type</b></td>
<td style="padding: 5px">Permanent Magnet Synchronous Motor</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Motor Layout</b></td>
<td style="padding: 5px">Front</td>
<td style="padding: 5px"><b>Number of Motors</b></td>
<td style="padding: 5px">1</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faqhead_4">
<a href="#" id="priceCard1" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq_4"
aria-expanded="true" aria-controls="faq_4"><b>PRICING</b></a>
</div>
<div id="faq_4" class="collapse" aria-labelledby="faqhead_4" data-parent="#faq">
<table class="" border="1" style="margin-left: 3%">
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Price</b></td>
<td style="padding: 5px" colspan="3">PKR 6,400,000 /-</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px" colspan="4">* PKR 15,00,000 as advance for booking.</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===================== BOX (LUX) SPECS (LEFT) - END ===================== -->
<!-- ===================== BOX (FLAGSHIP) SPECS (LEFT) - START ===================== -->
<div class="row" id="rowFlagship" style="display: none">
<div class="col-md-12">
<div id="main">
<div class="container">
<div class="accordion" id="faq">
<div class="card">
<div class="card-header" id="faqhead4">
<a href="#" id="dimCard2" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq4"
aria-expanded="true" aria-controls="faq4"><b>DIMENSIONS</b></a>
</div>
<div id="faq4" class="collapse" aria-labelledby="faqhead4" data-parent="#faq">
<table class="" border="1" style="margin-left: 3%; margin-right: 2%;">
<tr>
<td colspan="6" style="padding: 5px">
<img id="carImg" src="images/flagship430.jpg" class="image" style="height: 390px; width: 100%;">
</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>Length (mm)</b></td>
<td style="padding: 5px;">4030</td>
<td style="padding: 5px;"><b>Width (mm)</b></td>
<td style="padding: 5px;">1810</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>Height (mm)</b></td>
<td style="padding: 5px;">1570</td>
<td style="padding: 5px;"><b>Wheelbase (mm)</b></td>
<td style="padding: 5px;">2660</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>Body Structure</b></td>
<td colspan="3" style="padding: 5px;">5 Door - 5 Seats (HB)</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faqhead5">
<a href="#" id="elecCard2" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq5"
aria-expanded="true" aria-controls="faq5"><b>ELECTRICAL INFORMATION</b></a>
</div>
<div id="faq5" class="collapse" aria-labelledby="faqhead5" data-parent="#faq">
<table class="" border="1" style="margin-left: 3%;">
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>AC Charger Power 6.6 KW</b></td>
<td style="padding: 5px;">S</td>
<td style="padding: 5px;"><b>DC Charging Time</b></td>
<td style="padding: 5px;">30 Minutes</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>Fast Charging Percentage</b></td>
<td style="padding: 5px;">80%</td>
<td style="padding: 5px;"><b>AC Charger Type 2 Euro</b></td>
<td style="padding: 5px;">S</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>DC Combo (CCS)</b></td>
<td style="padding: 5px;">S</td>
<td style="padding: 5px;"><b>Battery Type LFP</b></td>
<td style="padding: 5px;">LFP (Lithium Iron Phosphate)</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>Battery Capacity</b></td>
<td style="padding: 5px;">42.3 KWH</td>
<td style="padding: 5px;"><b>Battery Pre-Heating</b></td>
<td style="padding: 5px;">S</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>Battery Cooling Scheme</b></td>
<td style="padding: 5px;">S</td>
<td style="padding: 5px;"><b>Vehicle Warranty</b></td>
<td style="padding: 5px;">4 Years or 150,000 KM</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>Battery Warranty</b></td>
<td colspan="3" style="padding: 5px;">8 Years or 200,000 KM</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faqhead6">
<a href="#" id="perCard2" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq6"
aria-expanded="true" aria-controls="faq6"><b>PERFORMANCE</b></a>
</div>
<div id="faq6" class="collapse" aria-labelledby="faqhead6" data-parent="#faq">
<table class="" border="1" style="margin-left: 3%">
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>Max Speed</b></td>
<td style="padding: 5px;">140 KM/H</td>
<td style="padding: 5px;"><b>CLTC Comprehensive Range</b></td>
<td style="padding: 5px;">430 KM</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>Motor Power</b></td>
<td style="padding: 5px;">70KW</td>
<td style="padding: 5px;"><b>Motor Type</b></td>
<td style="padding: 5px;">Permanent Magnet Synchronous Motor</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px;"><b>Motor Layout</b></td>
<td style="padding: 5px;">Front</td>
<td style="padding: 5px;"><b>Number of Motors</b></td>
<td style="padding: 5px;">1</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faqhead_6">
<a href="#" id="priceCard2" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq_6"
aria-expanded="true" aria-controls="faq_6"><b>PRICING</b></a>
</div>
<div id="faq_6" class="collapse" aria-labelledby="faqhead_6" data-parent="#faq">
<table class="" border="1" style="margin-left: 3%">
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px"><b>Price</b></td>
<td style="padding: 5px" colspan="3">PKR 6,800,000 /-</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 5px" colspan="4">* PKR 15,00,000 as advance for booking.</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===================== BOX (FLAGSHIP) SPECS (LEFT) - END ===================== -->
<!-- ===================== 007 SPECS (LEFT) - START ===================== -->
<div class="row" id="row007" style="display: none">
<div class="col-md-12">
<div id="main">
<div class="container">
<div class="accordion" id="faq007">
<div class="card">
<div class="card-header" id="faq007head1">
<a href="#" id="dimCard007" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq007_1"
aria-expanded="true" aria-controls="faq007_1"><b>DIMENSIONS</b></a>
</div>
<div id="faq007_1" class="collapse" aria-labelledby="faq007head1" data-parent="#faq007">
<table border="1" style="margin-left: 3%; width: 94%;">
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Length (mm)</b></td><td style="padding:5px;">4880</td>
<td style="padding:5px;"><b>Width (mm)</b></td><td style="padding:5px;">1895</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Height (mm)</b></td><td style="padding:5px;">1460</td>
<td style="padding:5px;"><b>Wheelbase (mm)</b></td><td style="padding:5px;">2915</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Doors</b></td><td style="padding:5px;">5</td>
<td style="padding:5px;"><b>Seats</b></td><td style="padding:5px;">5</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faq007head2">
<a href="#" id="elecCard007" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq007_2"
aria-expanded="true" aria-controls="faq007_2"><b>ELECTRICAL INFORMATION</b></a>
</div>
<div id="faq007_2" class="collapse" aria-labelledby="faq007head2" data-parent="#faq007">
<table border="1" style="margin-left: 3%; width: 94%;">
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Battery Capacity (kWh)</b></td>
<td style="padding:5px;">Essence: 58.4</td>
<td style="padding:5px;">Prestige: 73.5</td>
<td style="padding:5px;">Excellence: 73.5</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Driving Range (km) - CLTC</b></td>
<td style="padding:5px;">Essence: 550</td>
<td style="padding:5px;">Prestige: 650</td>
<td style="padding:5px;">Excellence: 565</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>V2L (220V AC Power Output)</b></td>
<td style="padding:5px;">Essence: -</td>
<td style="padding:5px;">Prestige: ✓</td>
<td style="padding:5px;">Excellence: ✓</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Fast & Standard AC/DC Dual Charging</b></td>
<td style="padding:5px;">Essence: -</td>
<td style="padding:5px;">Prestige: ✓</td>
<td style="padding:5px;">Excellence: ✓</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Warranty (Battery & Motor)</b></td>
<td style="padding:5px;" colspan="3">8 Years / 200,000 KM</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Warranty (Vehicle)</b></td>
<td style="padding:5px;" colspan="3">5 Years / 150,000 KM</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faq007head3">
<a href="#" id="perCard007" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq007_3"
aria-expanded="true" aria-controls="faq007_3"><b>PERFORMANCE</b></a>
</div>
<div id="faq007_3" class="collapse" aria-labelledby="faq007head3" data-parent="#faq007">
<table border="1" style="margin-left: 3%; width: 94%;">
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Drive Type</b></td>
<td style="padding:5px;">Essence: RWD</td>
<td style="padding:5px;">Prestige: RWD</td>
<td style="padding:5px;">Excellence: AWD</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Max Power (kW)</b></td>
<td style="padding:5px;">160</td>
<td style="padding:5px;">200</td>
<td style="padding:5px;">200+200</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Max Torque (N·m)</b></td>
<td style="padding:5px;">310</td>
<td style="padding:5px;">320</td>
<td style="padding:5px;">320+320</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>0–100 km/h</b></td>
<td style="padding:5px;"><6s</td>
<td style="padding:5px;"><6s</td>
<td style="padding:5px;"><3.5s</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faq007head4">
<a href="#" id="priceCard007" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq007_4"
aria-expanded="true" aria-controls="faq007_4"><b>PRICING</b></a>
</div>
<div id="faq007_4" class="collapse" aria-labelledby="faq007head4" data-parent="#faq007">
<table border="1" style="margin-left: 3%; width: 94%;">
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Variant</b></td>
<td style="padding:5px;"><b>Ex-Lahore Price (PKR)</b></td>
<td style="padding:5px;"><b>Booking Amount (PKR)</b></td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;">ESSENCE</td>
<td style="padding:5px;">11,900,000</td>
<td style="padding:5px;">2,400,000</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;">PRESTIGE</td>
<td style="padding:5px;">12,450,000</td>
<td style="padding:5px;">2,500,000</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;">EXCELLENCE</td>
<td style="padding:5px;">13,900,000</td>
<td style="padding:5px;">2,800,000</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===================== 007 SPECS (LEFT) - END ===================== -->
<!-- ===================== VIGO SPECS (LEFT) - START ===================== -->
<div class="row" id="rowVigo" style="display:none">
<div class="col-md-12">
<div id="main">
<div class="container">
<div class="accordion" id="faqVigo">
<div class="card">
<div class="card-header" id="faqVigoHead1">
<a href="#" id="dimCardVigo" class="btn btn-header-link collapsed"
data-toggle="collapse" data-target="#faqVigo_1"
aria-expanded="true" aria-controls="faqVigo_1"><b>DIMENSIONS</b></a>
</div>
<div id="faqVigo_1" class="collapse" aria-labelledby="faqVigoHead1" data-parent="#faqVigo">
<table border="1" style="margin-left: 3%; width:94%;">
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Vehicle Type</b></td><td style="padding:5px;">SUV</td>
<td style="padding:5px;"><b>Doors</b></td><td style="padding:5px;">5</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Seats</b></td><td style="padding:5px;">5</td>
<td style="padding:5px;"><b>Wheelbase (mm)</b></td><td style="padding:5px;">2715</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Length (mm)</b></td><td style="padding:5px;">4306</td>
<td style="padding:5px;"><b>Width (mm)</b></td><td style="padding:5px;">1868</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Height (mm)</b></td><td style="padding:5px;">1654</td>
<td style="padding:5px;"><b>Tire Size</b></td><td style="padding:5px;">225/55 R18</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faqVigoHead2">
<a href="#" id="elecCardVigo" class="btn btn-header-link collapsed"
data-toggle="collapse" data-target="#faqVigo_2"
aria-expanded="true" aria-controls="faqVigo_2"><b>ELECTRICAL INFORMATION</b></a>
</div>
<div id="faqVigo_2" class="collapse" aria-labelledby="faqVigoHead2" data-parent="#faqVigo">
<table border="1" style="margin-left: 3%; width:94%;">
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Battery Capacity (kWh)</b></td>
<td style="padding:5px;">E1 Dynamic: 44.94</td>
<td style="padding:5px;">E2 Premium: 44.94</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Driving Range (km) - CLTC</b></td>
<td style="padding:5px;">E1 Dynamic: 430</td>
<td style="padding:5px;">E2 Premium: 430</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Max AC Charging</b></td>
<td style="padding:5px;" colspan="2">6.6 kW</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Max DC Charging</b></td>
<td style="padding:5px;" colspan="2">60 kW</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Warranty (Battery & Motor)</b></td>
<td style="padding:5px;" colspan="2">8 Years / 200,000 KM</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Warranty (Vehicle)</b></td>
<td style="padding:5px;" colspan="2">5 Years / 150,000 KM</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faqVigoHead3">
<a href="#" id="perCardVigo" class="btn btn-header-link collapsed"
data-toggle="collapse" data-target="#faqVigo_3"
aria-expanded="true" aria-controls="faqVigo_3"><b>PERFORMANCE</b></a>
</div>
<div id="faqVigo_3" class="collapse" aria-labelledby="faqVigoHead3" data-parent="#faqVigo">
<table border="1" style="margin-left: 3%; width:94%;">
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Motor Type</b></td>
<td style="padding:5px;" colspan="2">PMSM (Permanent Magnet Synchronous Motor)</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Drive Type</b></td>
<td style="padding:5px;" colspan="2">FWD</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Max Power (kW)</b></td>
<td style="padding:5px;" colspan="2">120</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Max Torque (N·m)</b></td>
<td style="padding:5px;" colspan="2">230</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Top Speed (km/h)</b></td>
<td style="padding:5px;" colspan="2">150</td>
</tr>
</table>
</div>
</div>
<div class="card">
<div class="card-header" id="faqVigoHead4">
<a href="#" id="priceCardVigo" class="btn btn-header-link collapsed"
data-toggle="collapse" data-target="#faqVigo_4"
aria-expanded="true" aria-controls="faqVigo_4"><b>PRICING</b></a>
</div>
<div id="faqVigo_4" class="collapse" aria-labelledby="faqVigoHead4" data-parent="#faqVigo">
<table border="1" style="margin-left: 3%; width:94%;">
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;"><b>Variant</b></td>
<td style="padding:5px;"><b>Ex-Lahore Price (PKR)</b></td>
<td style="padding:5px;"><b>Booking Amount (PKR)</b></td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;">E1 Dynamic - 430</td>
<td style="padding:5px;">6,999,000</td>
<td style="padding:5px;">1,200,000</td>
</tr>
<tr style="background-color:#f9f9f9;">
<td style="padding:5px;">E2 Premium - 430</td>
<td style="padding:5px;">7,499,000</td>
<td style="padding:5px;">1,200,000</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===================== VIGO SPECS (LEFT) - END ===================== -->
</div>
</div>
<div class="col-lg-6">
<form action="addCustomerBookingDone.php" method="post" enctype="multipart/form-data">
<div class="card2 card border-0 px-4 py-5" id="formCard">
<!-- ===================== CAR MODEL SELECTOR - START ===================== -->
<div id="modelSelector">
<div class="row px-3 mb-4">
<label class="mb-1"><h6 class="mb-0 text-sm">Car Model</h6></label>
</div>
<div class="row px-3 mb-4">
<div class="custom-control custom-control-inline">
<input id="boxModel" type="radio" name="carModel" value="BOX" class="custom-control-input"
onchange="showCarModel(this.id)" checked>
<label for="boxModel" class="custom-control-label text-sm">BOX</label>
</div>
<div class="custom-control custom-control-inline">
<input id="car007Model" type="radio" name="carModel" value="007" class="custom-control-input"
onchange="showCarModel(this.id)">
<label for="car007Model" class="custom-control-label text-sm">007</label>
</div>
<!-- ✅ ADDED: VIGO -->
<div class="custom-control custom-control-inline">
<input id="vigoModel" type="radio" name="carModel" value="VIGO" class="custom-control-input"
onchange="showCarModel(this.id)">
<label for="vigoModel" class="custom-control-label text-sm">VIGO</label>
</div>
</div>
</div>
<!-- ===================== CAR MODEL SELECTOR - END ===================== -->
<div id="variantBox" style="display:block;"></div>
<!-- ===================== 007 VARIANTS (RIGHT) - START ===================== -->
<div id="variant007" style="display:none;">
<div class="row px-3 mb-2">
<label class="mb-1"><h6 class="mb-0 text-sm">007 Variant</h6></label>
</div>
<div class="row px-3 mb-2">
<div class="custom-control custom-control-inline">
<input id="essence007" type="radio" name="variant" value="007 ESSENCE" class="custom-control-input" onchange="showSpecs007(this.id)">
<label for="essence007" class="custom-control-label text-sm">ESSENCE</label>
</div>
<div class="custom-control custom-control-inline">
<input id="prestige007" type="radio" name="variant" value="007 PRESTIGE" class="custom-control-input" onchange="showSpecs007(this.id)">
<label for="prestige007" class="custom-control-label text-sm">PRESTIGE</label>
</div>
<div class="custom-control custom-control-inline">
<input id="excellence007" type="radio" name="variant" value="007 EXCELLENCE" class="custom-control-input" onchange="showSpecs007(this.id)">
<label for="excellence007" class="custom-control-label text-sm">EXCELLENCE</label>
</div>
</div>
<div class="row px-3 mb-4">
<div style="width:100%; background:#111; color:#fff; padding:12px; border-radius:10px;">
<div class="d-flex justify-content-between">
<span>Ex-Lahore Price</span>
<b id="price007Text">PKR -</b>
</div>
<div class="d-flex justify-content-between">
<span>Booking Amount</span>
<b id="booking007Text">PKR -</b>
</div>
</div>
</div>
</div>
<!-- ===================== 007 VARIANTS (RIGHT) - END ===================== -->
<!-- ===================== VIGO VARIANTS (RIGHT) - START ===================== -->
<div id="variantVigo" style="display:none;">
<div class="row px-3 mb-2">
<label class="mb-1"><h6 class="mb-0 text-sm">Vigo Variant</h6></label>
</div>
<div class="row px-3 mb-2">
<div class="custom-control custom-control-inline">
<input id="vigoE1" type="radio" name="variant" value="VIGO E1 DYNAMIC - 430"
class="custom-control-input" onchange="showSpecsVigo(this.id)">
<label for="vigoE1" class="custom-control-label text-sm">E1 DYNAMIC</label>
</div>
<div class="custom-control custom-control-inline">
<input id="vigoE2" type="radio" name="variant" value="VIGO E2 PREMIUM - 430"
class="custom-control-input" onchange="showSpecsVigo(this.id)">
<label for="vigoE2" class="custom-control-label text-sm">E2 PREMIUM</label>
</div>
</div>
<div class="row px-3 mb-4">
<div style="width:100%; background:#111; color:#fff; padding:12px; border-radius:10px;">
<div class="d-flex justify-content-between">
<span>Ex-Lahore Price</span>
<b id="priceVigoText">PKR -</b>
</div>
<div class="d-flex justify-content-between">
<span>Booking Amount</span>
<b id="bookingVigoText">PKR -</b>
</div>
</div>
</div>
</div>
<!-- ===================== VIGO VARIANTS (RIGHT) - END ===================== -->
<!-- ===================== BOX VARIANTS (RIGHT) - START ===================== -->
<div id="variantBoxOptions" style="display:block;">
<div class="row px-3 mb-4">
<div class="custom-control custom-control-inline">
<input id="lux" type="radio" name="variant" value="LUX 430" class="custom-control-input"
onchange="showSpecs(this.id)" checked>
<label for="lux" class="custom-control-label text-sm">LUX 430</label>
</div>
<div class="custom-control custom-control-inline">
<input id="flagship" type="radio" name="variant" value="FLAGSHIP 430" class="custom-control-input"
onchange="showSpecs(this.id)">
<label for="flagship" class="custom-control-label text-sm">FLAGSHIP 430</label>
</div>
</div>
</div>
<!-- ===================== BOX VARIANTS (RIGHT) - END ===================== -->
<script type="text/javascript">
// ✅ FIX: your code referenced whiteClr, but your inputs are blackClr & greyClr
function showSpecs(id)
{
if(id == 'lux')
{
document.getElementById('rowLUX').style.display = "block";
document.getElementById('rowFlagship').style.display = "none";
document.getElementById('greyClr').disabled = true;
document.getElementById('blackClr').disabled = false;
document.getElementById('blackClr').checked = true; // default interior for LUX
}
else if(id == 'flagship')
{
document.getElementById('rowLUX').style.display = "none";
document.getElementById('rowFlagship').style.display = "block";
document.getElementById('blackClr').disabled = true;
document.getElementById('greyClr').disabled = false;
document.getElementById('greyClr').checked = true; // default interior for Flagship
}
else
{
document.getElementById('rowLUX').style.display = "none";
document.getElementById('rowFlagship').style.display = "none";
document.getElementById('blackClr').disabled = false;
document.getElementById('greyClr').disabled = false;
}
}
function showColors(id)
{
if(id == 'ocean')
{
document.getElementById('dimCard1').style.backgroundColor = "#4e8bc0";
document.getElementById('faq1').style.backgroundColor = "#4e8bc0";
document.getElementById('dimCard2').style.backgroundColor = "#4e8bc0";
document.getElementById('faq4').style.backgroundColor = "#4e8bc0";
document.getElementById('elecCard1').style.backgroundColor = "#4e8bc0";
document.getElementById('faq2').style.backgroundColor = "#4e8bc0";
document.getElementById('elecCard2').style.backgroundColor = "#4e8bc0";
document.getElementById('faq5').style.backgroundColor = "#4e8bc0";
document.getElementById('perCard1').style.backgroundColor = "#4e8bc0";
document.getElementById('faq3').style.backgroundColor = "#4e8bc0";
document.getElementById('perCard2').style.backgroundColor = "#4e8bc0";
document.getElementById('faq6').style.backgroundColor = "#4e8bc0";
document.getElementById('priceCard1').style.backgroundColor = "#4e8bc0";
document.getElementById('faq_4').style.backgroundColor = "#4e8bc0";
document.getElementById('priceCard2').style.backgroundColor = "#4e8bc0";
document.getElementById('faq_6').style.backgroundColor = "#4e8bc0";
document.getElementById('formCard').style.backgroundColor = "#4e8bc0";
}
else if(id == 'vanilla')
{
document.getElementById('dimCard1').style.backgroundColor = "#d4d4d4";
document.getElementById('faq1').style.backgroundColor = "#d4d4d4";
document.getElementById('dimCard2').style.backgroundColor = "#d4d4d4";
document.getElementById('faq4').style.backgroundColor = "#d4d4d4";
document.getElementById('elecCard1').style.backgroundColor = "#d4d4d4";
document.getElementById('faq2').style.backgroundColor = "#d4d4d4";
document.getElementById('elecCard2').style.backgroundColor = "#d4d4d4";
document.getElementById('faq5').style.backgroundColor = "#d4d4d4";
document.getElementById('perCard1').style.backgroundColor = "#d4d4d4";
document.getElementById('faq3').style.backgroundColor = "#d4d4d4";
document.getElementById('perCard2').style.backgroundColor = "#d4d4d4";
document.getElementById('faq6').style.backgroundColor = "#d4d4d4";
document.getElementById('priceCard1').style.backgroundColor = "#d4d4d4";
document.getElementById('faq_4').style.backgroundColor = "#d4d4d4";
document.getElementById('priceCard2').style.backgroundColor = "#d4d4d4";
document.getElementById('faq_6').style.backgroundColor = "#d4d4d4";
document.getElementById('formCard').style.backgroundColor = "#d4d4d4";
}
else if(id == 'lavendar')
{
document.getElementById('dimCard1').style.backgroundColor = "#9c81c5";
document.getElementById('faq1').style.backgroundColor = "#9c81c5";
document.getElementById('dimCard2').style.backgroundColor = "#9c81c5";
document.getElementById('faq4').style.backgroundColor = "#9c81c5";
document.getElementById('elecCard1').style.backgroundColor = "#9c81c5";
document.getElementById('faq2').style.backgroundColor = "#9c81c5";
document.getElementById('elecCard2').style.backgroundColor = "#9c81c5";
document.getElementById('faq5').style.backgroundColor = "#9c81c5";
document.getElementById('perCard1').style.backgroundColor = "#9c81c5";
document.getElementById('faq3').style.backgroundColor = "#9c81c5";
document.getElementById('perCard2').style.backgroundColor = "#9c81c5";
document.getElementById('faq6').style.backgroundColor = "#9c81c5";
document.getElementById('priceCard1').style.backgroundColor = "#9c81c5";
document.getElementById('faq_4').style.backgroundColor = "#9c81c5";
document.getElementById('priceCard2').style.backgroundColor = "#9c81c5";
document.getElementById('faq_6').style.backgroundColor = "#9c81c5";
document.getElementById('formCard').style.backgroundColor = "#9c81c5";
}
else if(id == 'electric')
{
document.getElementById('dimCard1').style.backgroundColor = "#bfd536";
document.getElementById('faq1').style.backgroundColor = "#bfd536";
document.getElementById('dimCard2').style.backgroundColor = "#bfd536";
document.getElementById('faq4').style.backgroundColor = "#bfd536";
document.getElementById('elecCard1').style.backgroundColor = "#bfd536";
document.getElementById('faq2').style.backgroundColor = "#bfd536";
document.getElementById('elecCard2').style.backgroundColor = "#bfd536";
document.getElementById('faq5').style.backgroundColor = "#bfd536";
document.getElementById('perCard1').style.backgroundColor = "#bfd536";
document.getElementById('faq3').style.backgroundColor = "#bfd536";
document.getElementById('perCard2').style.backgroundColor = "#bfd536";
document.getElementById('faq6').style.backgroundColor = "#bfd536";
document.getElementById('priceCard1').style.backgroundColor = "#bfd536";
document.getElementById('faq_4').style.backgroundColor = "#bfd536";
document.getElementById('priceCard2').style.backgroundColor = "#bfd536";
document.getElementById('faq_6').style.backgroundColor = "#bfd536";
document.getElementById('formCard').style.backgroundColor = "#bfd536";
}
else
{
document.getElementById('dimCard1').style.backgroundColor = "silver";
document.getElementById('faq1').style.backgroundColor = "silver";
document.getElementById('dimCard2').style.backgroundColor = "silver";
document.getElementById('faq4').style.backgroundColor = "silver";
document.getElementById('elecCard1').style.backgroundColor = "silver";
document.getElementById('faq2').style.backgroundColor = "silver";
document.getElementById('elecCard2').style.backgroundColor = "silver";
document.getElementById('faq5').style.backgroundColor = "silver";
document.getElementById('perCard1').style.backgroundColor = "silver";
document.getElementById('faq3').style.backgroundColor = "silver";
document.getElementById('perCard2').style.backgroundColor = "silver";
document.getElementById('faq6').style.backgroundColor = "silver";
document.getElementById('priceCard1').style.backgroundColor = "silver";
document.getElementById('faq_4').style.backgroundColor = "silver";
document.getElementById('priceCard2').style.backgroundColor = "silver";
document.getElementById('faq_6').style.backgroundColor = "silver";
document.getElementById('formCard').style.backgroundColor = "silver";
}
}
</script>
<!-- ===================== BOX COLORS (RIGHT) - START ===================== -->
<div id="colorsBox" style="display:block;">
<div class="row px-3 mb-4">
<label class="mb-1"><h6 class="mb-0 text-sm">Exterior Color</h6></label>
</div>
<div class="row px-3 mb-4">
<div class="custom-control custom-control-inline">
<input id="ocean" type="radio" name="color" value="Ocean Eyes" class="custom-control-input" onchange="showColors(this.id)" checked>
<label for="ocean" class="custom-control-label text-sm">Ocean Eyes</label>
</div>
<div class="custom-control custom-control-inline">
<input id="vanilla" type="radio" name="color" value="Vanilla Frost" class="custom-control-input" onchange="showColors(this.id)">
<label for="vanilla" class="custom-control-label text-sm">Vanilla Frost</label>
</div>
<div class="custom-control custom-control-inline">
<input id="lavendar" type="radio" name="color" value="Lavender Haze" class="custom-control-input" onchange="showColors(this.id)">
<label for="lavendar" class="custom-control-label text-sm">Lavender Haze</label>
</div>
<div class="custom-control custom-control-inline">
<input id="electric" type="radio" name="color" value="Electric Lemon" class="custom-control-input" onchange="showColors(this.id)">
<label for="electric" class="custom-control-label text-sm">Electric Lemon</label>
</div>
<div class="custom-control custom-control-inline">
<input id="silver" type="radio" name="color" value="Silver Frost" class="custom-control-input" onchange="showColors(this.id)">
<label for="silver" class="custom-control-label text-sm">Silver Forest</label>
</div>
</div>
<div class="row px-3 mb-4">
<label class="mb-1"><h6 class="mb-0 text-sm">Interior Color</h6></label>
</div>
<div class="row px-3 mb-4">
<div class="custom-control custom-control-inline">
<input id="blackClr" type="radio" name="interiorColor" value="Black / White" class="custom-control-input" checked>
<label for="blackClr" class="custom-control-label text-sm">Black / White</label>
</div>
<div class="custom-control custom-control-inline">
<input id="greyClr" type="radio" name="interiorColor" value="Black / Grey" class="custom-control-input">
<label for="greyClr" class="custom-control-label text-sm">Black / Grey</label>
</div>
</div>
</div>
<!-- ===================== BOX COLORS (RIGHT) - END ===================== -->
<!-- ===================== 007 COLORS (RIGHT) - START ===================== -->
<div id="colors007" style="display:none;">
<div class="row px-3 mb-4">
<label class="mb-1"><h6 class="mb-0 text-sm">Exterior Color (007)</h6></label>
</div>
<div class="row px-3 mb-4">
<div class="custom-control custom-control-inline">
<input id="007black" type="radio" name="color" value="007 Black" class="custom-control-input">
<label for="007black" class="custom-control-label text-sm">Black</label>
</div>
<div class="custom-control custom-control-inline">
<input id="007white" type="radio" name="color" value="007 White" class="custom-control-input">
<label for="007white" class="custom-control-label text-sm">White</label>
</div>
<div class="custom-control custom-control-inline">
<input id="007golden" type="radio" name="color" value="007 Golden" class="custom-control-input">
<label for="007golden" class="custom-control-label text-sm">Golden</label>
</div>
<div class="custom-control custom-control-inline">
<input id="007purple" type="radio" name="color" value="007 Purple" class="custom-control-input">
<label for="007purple" class="custom-control-label text-sm">Purple</label>
</div>
<div class="custom-control custom-control-inline">
<input id="007grey" type="radio" name="color" value="007 Grey" class="custom-control-input">
<label for="007grey" class="custom-control-label text-sm">Grey</label>
</div>
</div>
<div class="row px-3 mb-4">
<label class="mb-1"><h6 class="mb-0 text-sm">Interior Color (007)</h6></label>
</div>
<div class="row px-3 mb-4">
<div class="custom-control custom-control-inline">
<input id="007int_blackgrey" type="radio" name="interiorColor" value="007 Black + Grey" class="custom-control-input">
<label for="007int_blackgrey" class="custom-control-label text-sm">Black + Grey</label>
</div>
<div class="custom-control custom-control-inline">
<input id="007int_blackwhite" type="radio" name="interiorColor" value="007 Black + White" class="custom-control-input">
<label for="007int_blackwhite" class="custom-control-label text-sm">Black + White</label>
</div>
</div>
</div>
<!-- ===================== 007 COLORS (RIGHT) - END ===================== -->
<!-- ===================== VIGO COLORS (RIGHT) - START ===================== -->
<div id="colorsVigo" style="display:none;">
<div class="row px-3 mb-4">
<label class="mb-1"><h6 class="mb-0 text-sm">Exterior Color (VIGO)</h6></label>
</div>
<div class="row px-3 mb-4">
<div class="custom-control custom-control-inline">
<input id="vigo_white" type="radio" name="color" value="VIGO White" class="custom-control-input">
<label for="vigo_white" class="custom-control-label text-sm">White</label>
</div>
<div class="custom-control custom-control-inline">
<input id="vigo_silver" type="radio" name="color" value="VIGO Silver" class="custom-control-input">
<label for="vigo_silver" class="custom-control-label text-sm">Silver</label>
</div>
<div class="custom-control custom-control-inline">
<input id="vigo_yellow" type="radio" name="color" value="VIGO Yellow" class="custom-control-input">
<label for="vigo_yellow" class="custom-control-label text-sm">Yellow</label>
</div>
<div class="custom-control custom-control-inline">
<input id="vigo_orange" type="radio" name="color" value="VIGO Orange" class="custom-control-input">
<label for="vigo_orange" class="custom-control-label text-sm">Orange</label>
</div>
<div class="custom-control custom-control-inline">
<input id="vigo_green" type="radio" name="color" value="VIGO Green" class="custom-control-input">
<label for="vigo_green" class="custom-control-label text-sm">Green</label>
</div>
<div class="custom-control custom-control-inline">
<input id="vigo_black" type="radio" name="color" value="VIGO Black" class="custom-control-input">
<label for="vigo_black" class="custom-control-label text-sm">Black</label>
</div>
</div>
<div class="row px-3 mb-4">
<label class="mb-1"><h6 class="mb-0 text-sm">Interior Color (VIGO)</h6></label>
</div>
<div class="row px-3 mb-4">
<div class="custom-control custom-control-inline">
<input id="vigo_int_beige" type="radio" name="interiorColor" value="VIGO Beige + Black" class="custom-control-input">
<label for="vigo_int_beige" class="custom-control-label text-sm">Beige + Black</label>
</div>
<div class="custom-control custom-control-inline">
<input id="vigo_int_grey" type="radio" name="interiorColor" value="VIGO Grey + Black" class="custom-control-input">
<label for="vigo_int_grey" class="custom-control-label text-sm">Grey + Black</label>
</div>
</div>
</div>
<!-- ===================== VIGO COLORS (RIGHT) - END ===================== -->
<!-- ===================== CUSTOMER FORM - START ===================== -->
<div class="row">
<div class="col-lg-6">
<label class="mb-1"><h6 class="mb-0 text-sm">Fullname</h6></label>
<input class="mb-4" type="text" name="fullname" placeholder="Enter Fullname" required>
</div>
<div class="col-lg-6">
<label class="mb-1"><h6 class="mb-0 text-sm">Father/Husband</h6></label>
<input class="mb-4" type="text" name="guardian" placeholder="Enter guardian name" required>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<label class="mb-1"><h6 class="mb-0 text-sm">Email</h6></label>
<input class="mb-4" type="text" name="email" placeholder="Enter Email" required>
</div>
<div class="col-lg-6">
<label class="mb-1"><h6 class="mb-0 text-sm">Password</h6></label>
<input class="mb-4" type="password" name="password" placeholder="Enter Password" required>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<label class="mb-1"><h6 class="mb-0 text-sm">DOB</h6></label>
<input class="mb-4" type="date" name="dob" placeholder="Enter Date of Birth" required>
</div>
<div class="col-lg-6">
<label class="mb-1"><h6 class="mb-0 text-sm">Phone#</h6></label>
<input class="mb-4" type="text" name="contactNo" placeholder="Enter Contact No" required>
</div>
</div>
<div class="row px-3">
<label class="mb-1"><h6 class="mb-0 text-sm">Address</h6></label>
<textarea class="form-control" rows="3" name="address" required></textarea>
</div>
<br/>
<div class="row">
<div class="col-lg-6">
<label class="mb-1"><h6 class="mb-0 text-sm">Country</h6></label>
<select class="form-control" name="country" required>
<option>--Select--</option>
<option selected>Pakistan</option>
</select>
</div>
<div class="col-lg-6">
<label class="mb-1"><h6 class="mb-0 text-sm">City</h6></label>
<input list="cities" class="form-control" name="city" required>
<datalist id="cities">
<option>--Select--</option>
<option value="Islamabad">Islamabad</option>
<option value="" disabled>Punjab Cities</option>
<option value="Ahmed Nager Chatha">Ahmed Nager Chatha</option>
<option value="Ahmadpur East">Ahmadpur East</option>
<option value="Ali Khan Abad">Ali Khan Abad</option>
<option value="Alipur">Alipur</option>
<option value="Arifwala">Arifwala</option>
<option value="Attock">Attock</option>
<option value="Bhera">Bhera</option>
<option value="Bhalwal">Bhalwal</option>
<option value="Bahawalnagar">Bahawalnagar</option>
<option value="Bahawalpur">Bahawalpur</option>
<option value="Bhakkar">Bhakkar</option>
<option value="Burewala">Burewala</option>
<option value="Chillianwala">Chillianwala</option>
<option value="Chakwal">Chakwal</option>
<option value="Chichawatni">Chichawatni</option>
<option value="Chiniot">Chiniot</option>
<option value="Chishtian">Chishtian</option>
<option value="Daska">Daska</option>
<option value="Darya Khan">Darya Khan</option>
<option value="Dera Ghazi Khan">Dera Ghazi Khan</option>
<option value="Dhaular">Dhaular</option>
<option value="Dina">Dina</option>
<option value="Dinga">Dinga</option>
<option value="Dipalpur">Dipalpur</option>
<option value="Faisalabad">Faisalabad</option>
<option value="Ferozewala">Ferozewala</option>
<option value="Fateh Jhang">Fateh Jang</option>
<option value="Ghakhar Mandi">Ghakhar Mandi</option>
<option value="Gojra">Gojra</option>
<option value="Gujranwala">Gujranwala</option>
<option value="Gujrat">Gujrat</option>
<option value="Gujar Khan">Gujar Khan</option>
<option value="Hafizabad">Hafizabad</option>
<option value="Haroonabad">Haroonabad</option>
<option value="Hasilpur">Hasilpur</option>
<option value="Haveli Lakha">Haveli Lakha</option>
<option value="Jatoi">Jatoi</option>
<option value="Jalalpur">Jalalpur</option>
<option value="Jattan">Jattan</option>
<option value="Jampur">Jampur</option>
<option value="Jaranwala">Jaranwala</option>
<option value="Jhang">Jhang</option>
<option value="Jhelum">Jhelum</option>
<option value="Kalabagh">Kalabagh</option>
<option value="Karor Lal Esan">Karor Lal Esan</option>
<option value="Kasur">Kasur</option>
<option value="Kamalia">Kamalia</option>
<option value="Kamoke">Kamoke</option>
<option value="Khanewal">Khanewal</option>
<option value="Khanpur">Khanpur</option>
<option value="Kharian">Kharian</option>
<option value="Khushab">Khushab</option>
<option value="Kot Addu">Kot Addu</option>
<option value="Jauharabad">Jauharabad</option>
<option value="Lahore">Lahore</option>
<option value="Lalamusa">Lalamusa</option>
<option value="Layyah">Layyah</option>
<option value="Liaquat Pur">Liaquat Pur</option>
<option value="Lodhran">Lodhran</option>
<option value="Malakwal">Malakwal</option>
<option value="Mamoori">Mamoori</option>
<option value="Mailsi">Mailsi</option>
<option value="Mandi Bahauddin">Mandi Bahauddin</option>
<option value="Mian Channu">Mian Channu</option>
<option value="Mianwali">Mianwali</option>
<option value="Multan">Multan</option>
<option value="Murree">Murree</option>
<option value="Muridke">Muridke</option>
<option value="Mianwali Bangla">Mianwali Bangla</option>
<option value="Muzaffargarh">Muzaffargarh</option>
<option value="Narowal">Narowal</option>
<option value="Nankana Sahib">Nankana Sahib</option>
<option value="Okara">Okara</option>
<option value="Renala Khurd">Renala Khurd</option>
<option value="Pakpattan">Pakpattan</option>
<option value="Pattoki">Pattoki</option>
<option value="Pir Mahal">Pir Mahal</option>
<option value="Qaimpur">Qaimpur</option>
<option value="Qila Didar Singh">Qila Didar Singh</option>
<option value="Rabwah">Rabwah</option>
<option value="Raiwind">Raiwind</option>
<option value="Rajanpur">Rajanpur</option>
<option value="Rahim Yar Khan">Rahim Yar Khan</option>
<option value="Rawalpindi">Rawalpindi</option>
<option value="Sadiqabad">Sadiqabad</option>
<option value="Safdarabad">Safdarabad</option>
<option value="Sahiwal">Sahiwal</option>
<option value="Sangla Hill">Sangla Hill</option>
<option value="Sarai Alamgir">Sarai Alamgir</option>
<option value="Sargodha">Sargodha</option>
<option value="Shakargarh">Shakargarh</option>
<option value="Sheikhupura">Sheikhupura</option>
<option value="Sialkot">Sialkot</option>
<option value="Sohawa">Sohawa</option>
<option value="Soianwala">Soianwala</option>
<option value="Siranwali">Siranwali</option>
<option value="Talagang">Talagang</option>
<option value="Taxila">Taxila</option>
<option value="Toba Tek Singh">Toba Tek Singh</option>
<option value="Vehari">Vehari</option>
<option value="Wah Cantonment">Wah Cantonment</option>
<option value="Wazirabad">Wazirabad</option>
<option value="" disabled>Sindh Cities</option>
<option value="Badin">Badin</option>
<option value="Bhirkan">Bhirkan</option>
<option value="Rajo Khanani">Rajo Khanani</option>
<option value="Chak">Chak</option>
<option value="Dadu">Dadu</option>
<option value="Digri">Digri</option>
<option value="Diplo">Diplo</option>
<option value="Dokri">Dokri</option>
<option value="Ghotki">Ghotki</option>
<option value="Haala">Haala</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Islamkot">Islamkot</option>
<option value="Jacobabad">Jacobabad</option>
<option value="Jamshoro">Jamshoro</option>
<option value="Jungshahi">Jungshahi</option>
<option value="Kandhkot">Kandhkot</option>
<option value="Kandiaro">Kandiaro</option>
<option value="Karachi">Karachi</option>
<option value="Kashmore">Kashmore</option>
<option value="Keti Bandar">Keti Bandar</option>
<option value="Khairpur">Khairpur</option>
<option value="Kotri">Kotri</option>
<option value="Larkana">Larkana</option>
<option value="Matiari">Matiari</option>
<option value="Mehar">Mehar</option>
<option value="Mirpur Khas">Mirpur Khas</option>
<option value="Mithani">Mithani</option>
<option value="Mithi">Mithi</option>
<option value="Mehrabpur">Mehrabpur</option>
<option value="Moro">Moro</option>
<option value="Nagarparkar">Nagarparkar</option>
<option value="Naudero">Naudero</option>
<option value="Naushahro Feroze">Naushahro Feroze</option>
<option value="Naushara">Naushara</option>
<option value="Nawabshah">Nawabshah</option>
<option value="Nazimabad">Nazimabad</option>
<option value="Qambar">Qambar</option>
<option value="Qasimabad">Qasimabad</option>
<option value="Ranipur">Ranipur</option>
<option value="Ratodero">Ratodero</option>
<option value="Rohri">Rohri</option>
<option value="Sakrand">Sakrand</option>
<option value="Sanghar">Sanghar</option>
<option value="Shahbandar">Shahbandar</option>
<option value="Shahdadkot">Shahdadkot</option>
<option value="Shahdadpur">Shahdadpur</option>
<option value="Shahpur Chakar">Shahpur Chakar</option>
<option value="Shikarpaur">Shikarpaur</option>
<option value="Sukkur">Sukkur</option>
<option value="Tangwani">Tangwani</option>
<option value="Tando Adam Khan">Tando Adam Khan</option>
<option value="Tando Allahyar">Tando Allahyar</option>
<option value="Tando Muhammad Khan">Tando Muhammad Khan</option>
<option value="Thatta">Thatta</option>
<option value="Umerkot">Umerkot</option>
<option value="Warah">Warah</option>
<option value="" disabled>Khyber Cities</option>
<option value="Abbottabad">Abbottabad</option>
<option value="Adezai">Adezai</option>
<option value="Alpuri">Alpuri</option>
<option value="Akora Khattak">Akora Khattak</option>
<option value="Ayubia">Ayubia</option>
<option value="Banda Daud Shah">Banda Daud Shah</option>
<option value="Bannu">Bannu</option>
<option value="Batkhela">Batkhela</option>
<option value="Battagram">Battagram</option>
<option value="Birote">Birote</option>
<option value="Chakdara">Chakdara</option>
<option value="Charsadda">Charsadda</option>
<option value="Chitral">Chitral</option>
<option value="Daggar">Daggar</option>
<option value="Dargai">Dargai</option>
<option value="Dera Ismail Khan">Dera Ismail Khan</option>
<option value="Doaba">Doaba</option>
<option value="Dir">Dir</option>
<option value="Drosh">Drosh</option>
<option value="Hangu">Hangu</option>
<option value="Haripur">Haripur</option>
<option value="Karak">Karak</option>
<option value="Kohat">Kohat</option>
<option value="Kulachi">Kulachi</option>
<option value="Lakki Marwat">Lakki Marwat</option>
<option value="Latamber">Latamber</option>
<option value="Madyan">Madyan</option>
<option value="Mansehra">Mansehra</option>
<option value="Mardan">Mardan</option>
<option value="Mastuj">Mastuj</option>
<option value="Mingora">Mingora</option>
<option value="Nowshera">Nowshera</option>
<option value="Paharpur">Paharpur</option>
<option value="Pabbi">Pabbi</option>
<option value="Peshawar">Peshawar</option>
<option value="Saidu Sharif">Saidu Sharif</option>
<option value="Swabi">Swabi</option>
<option value="Swat">Swat</option>
<option value="Tangi">Tangi</option>
<option value="Tank">Tank</option>
<option value="Thall">Thall</option>
<option value="Timergara">Timergara</option>
<option value="Tordher">Tordher</option>
<option value="" disabled>Balochistan Cities</option>
<option value="Awaran">Awaran</option>
<option value="Barkhan">Barkhan</option>
<option value="Chagai">Chagai</option>
<option value="Dera Bugti">Dera Bugti</option>
<option value="Gwadar">Gwadar</option>
<option value="Harnai">Harnai</option>
<option value="Jafarabad">Jafarabad</option>
<option value="Jhal Magsi">Jhal Magsi</option>
<option value="Kacchi">Kacchi</option>
<option value="Kalat">Kalat</option>
<option value="Kech">Kech</option>
<option value="Kharan">Kharan</option>
<option value="Khuzdar">Khuzdar</option>
<option value="Killa Abdullah">Killa Abdullah</option>
<option value="Killa Saifullah">Killa Saifullah</option>
<option value="Kohlu">Kohlu</option>
<option value="Lasbela">Lasbela</option>
<option value="Lehri">Lehri</option>
<option value="Loralai">Loralai</option>
<option value="Mastung">Mastung</option>
<option value="Musakhel">Musakhel</option>
<option value="Nasirabad">Nasirabad</option>
<option value="Nushki">Nushki</option>
<option value="Panjgur">Panjgur</option>
<option value="Pishin Valley">Pishin Valley</option>
<option value="Quetta">Quetta</option>
<option value="Sherani">Sherani</option>
<option value="Sibi">Sibi</option>
<option value="Sohbatpur">Sohbatpur</option>
<option value="Washuk">Washuk</option>
<option value="Zhob">Zhob</option>
<option value="Ziarat">Ziarat</option>
</datalist>
</div>
</div>
<br/>
<div class="row">
<div class="col-lg-4">
<label class="mb-1"><h6 class="mb-0 text-sm">CNIC/NTN</h6></label>
<input class="mb-4" type="text" name="cnic" placeholder="Enter CNIC/NTN" required>
</div>
<div class="col-lg-4">
<label class="mb-1"><h6 class="mb-0 text-sm">CNIC Front</h6></label>
<input class="mb-4" type="file" name="image1ToUpload" required>
</div>
<div class="col-lg-4">
<label class="mb-1"><h6 class="mb-0 text-sm">CNIC Back</h6></label>
<input class="mb-4" type="file" name="image2ToUpload" required>
</div>
</div>
<br/>
<div class="row mb-3 px-3">
<button type="submit" class="button-primary hover-lh w-button text-center">Submit</button>
</div>
<!-- ===================== CUSTOMER FORM - END ===================== -->
</div>
</form>
</div>
</div>
</div>
</div>
<div class="wrapper">
<a href="https://api.whatsapp.com/send?phone=+923114995162&text=Hello" class="float" target="_blank">
<i class="fa fa-whatsapp" style="font-size: x-large;"></i>
</a>
</div>
</section>
<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 (Coming Soon)</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>
<!-- JS includes -->
<script src="js/jquery-3.5.1.min.dc5e7f18c8.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="js/webflow.47f6ebd2463ade7f4b066282b5b2bc43.js" type="text/javascript"></script>
<script src="js/form-124.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="js/floating.js"></script>
<script type="text/javascript">
function showCarModel(id)
{
if(id == 'boxModel')
{
// LEFT specs
document.getElementById('row007').style.display = "none";
document.getElementById('rowVigo').style.display = "none";
document.getElementById('rowLUX').style.display = "block";
document.getElementById('rowFlagship').style.display = "none";
// RIGHT variants
document.getElementById('variantBox').style.display = "block";
document.getElementById('variantBoxOptions').style.display = "block";
document.getElementById('variant007').style.display = "none";
document.getElementById('variantVigo').style.display = "none";
// RIGHT colors
document.getElementById('colorsBox').style.display = "block";
document.getElementById('colors007').style.display = "none";
document.getElementById('colorsVigo').style.display = "none";
// default BOX variant + colors
document.getElementById('lux').checked = true;
showSpecs('lux');
document.getElementById('ocean').checked = true;
showColors('ocean');
}
else if(id == 'car007Model')
{
// LEFT specs
document.getElementById('rowLUX').style.display = "none";
document.getElementById('rowFlagship').style.display = "none";
document.getElementById('rowVigo').style.display = "none";
document.getElementById('row007').style.display = "block";
// RIGHT variants
document.getElementById('variantBox').style.display = "none";
document.getElementById('variantBoxOptions').style.display = "none";
document.getElementById('variantVigo').style.display = "none";
document.getElementById('variant007').style.display = "block";
// RIGHT colors
document.getElementById('colorsBox').style.display = "none";
document.getElementById('colorsVigo').style.display = "none";
document.getElementById('colors007').style.display = "block";
// default 007 selection
document.getElementById('essence007').checked = true;
showSpecs007('essence007');
// default exterior color
document.getElementById('007black').checked = true;
}
else if(id == 'vigoModel')
{
// LEFT specs
document.getElementById('rowLUX').style.display = "none";
document.getElementById('rowFlagship').style.display = "none";
document.getElementById('row007').style.display = "none";
document.getElementById('rowVigo').style.display = "block";
// RIGHT variants
document.getElementById('variantBox').style.display = "none";
document.getElementById('variantBoxOptions').style.display = "none";
document.getElementById('variant007').style.display = "none";
document.getElementById('variantVigo').style.display = "block";
// RIGHT colors
document.getElementById('colorsBox').style.display = "none";
document.getElementById('colors007').style.display = "none";
document.getElementById('colorsVigo').style.display = "block";
// default VIGO selection
document.getElementById('vigoE1').checked = true;
showSpecsVigo('vigoE1');
// default colors
document.getElementById('vigo_white').checked = true;
document.getElementById('vigo_int_beige').checked = true;
}
}
function showSpecs007(id)
{
if(id == 'essence007')
{
document.getElementById('price007Text').innerHTML = "PKR 11,900,000";
document.getElementById('booking007Text').innerHTML = "PKR 2,400,000";
document.getElementById('007int_blackgrey').disabled = false;
document.getElementById('007int_blackwhite').disabled = true;
document.getElementById('007int_blackgrey').checked = true;
}
else if(id == 'prestige007')
{
document.getElementById('price007Text').innerHTML = "PKR 12,450,000";
document.getElementById('booking007Text').innerHTML = "PKR 2,500,000";
document.getElementById('007int_blackgrey').disabled = false;
document.getElementById('007int_blackwhite').disabled = true;
document.getElementById('007int_blackgrey').checked = true;
}
else if(id == 'excellence007')
{
document.getElementById('price007Text').innerHTML = "PKR 13,900,000";
document.getElementById('booking007Text').innerHTML = "PKR 2,800,000";
document.getElementById('007int_blackgrey').disabled = true;
document.getElementById('007int_blackwhite').disabled = false;
document.getElementById('007int_blackwhite').checked = true;
}
}
function showSpecsVigo(id)
{
if(id == 'vigoE1')
{
document.getElementById('priceVigoText').innerHTML = "PKR 6,999,000";
document.getElementById('bookingVigoText').innerHTML = "PKR 1,200,000";
}
else if(id == 'vigoE2')
{
document.getElementById('priceVigoText').innerHTML = "PKR 7,499,000";
document.getElementById('bookingVigoText').innerHTML = "PKR 1,200,000";
}
}
// initialize default view
window.onload = function(){
showCarModel('boxModel');
};
</script>
</body>
</html>