File "vigo-coming.html"
Full Path: /home/chawlag2/public_html/cars/fonts/vigo-coming.html
File size: 28.26 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dongfeng VIGO | Chawla Green Motors | Coming Soon</title>
<!-- Favicons -->
<link href="../bikes/assets/img/logo.png" rel="icon">
<!-- main Webflow stylesheet from Box page -->
<meta name="description"
content="Smart. Serene. Sensory – Dongfeng VIGO is a modern electric SUV with 12.8” centre display, 50W wireless charging, 360° camera and up to 480 km (CLTC) range*.">
<meta property="og:title" content="Dongfeng VIGO – Smart. Serene. Sensory.">
<meta property="og:description"
content="All-electric SUV with up to 480 km (CLTC) range*, 12.8” centre display, 50W wireless charging and advanced safety – brought to Pakistan by Chawla Green Motors.">
<meta property="og:image" content="images/vigo-hero-share.webp">
<meta property="og:type" content="website">
<meta property="twitter:title" content="Dongfeng VIGO – Smart. Serene. Sensory.">
<meta property="twitter:description"
content="Electric SUV with smart cabin tech, strong safety features and efficient EV performance.">
<meta property="twitter:image" content="images/vigo-hero-share.webp">
<meta name="twitter:card" content="summary_large_image">
<meta content="width=device-width, initial-scale=1" name="viewport">
<!-- main Webflow stylesheet from Box page -->
<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>
<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');
// If Vigo is still coming soon, keep this:
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">
<!-- Vendor CSS Files -->
<link href="../bikes/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
<link href="../bikes/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../bikes/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="../bikes/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="../bikes/assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="../bikes/assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="../bikes/assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="../bikes/assets/css/style.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", "Segoe UI", sans-serif !important;
}
body {
height: 150vh;
overflow: hidden;
}
/* Main Wrapper */
.coming-soon {
position: relative;
width: 100%;
height: 120vh;
padding-bottom: 200px;
}
/* Background Image */
.bg {
position: absolute;
inset: 0;
background-image: url("images/coming-soon-vigo.png"); /* YOUR IMAGE */
background-size: contain;
background-position: center top;
filter: blur(12px) brightness(0.7);
/*transform: scale(1.1);*/
}
/* Content Overlay */
.content {
position: relative;
z-index: 2;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
backdrop-filter: blur(6px);
background: rgba(0, 0, 0, 0.35);
}
/* Badge */
.badge {
display: inline-block;
padding: 8px 18px;
border-radius: 30px;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
margin-bottom: 20px;
}
/* Heading */
.content h1 {
font-size: clamp(32px, 5vw, 56px);
color: #ffffff;
font-weight: 600;
margin-bottom: 16px;
}
/* Description */
.content p {
font-size: clamp(16px, 2.5vw, 20px);
color: rgba(255, 255, 255, 0.85);
max-width: 700px;
line-height: 1.6;
}
/* Divider */
.divider {
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, #ffffff, transparent);
margin: 30px 0;
opacity: 0.6;
}
/* Footer */
.footer-text {
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
}
/* Responsive tweaks */
@media (max-width: 768px) {
.content {
padding: 30px 15px;
}
}
/* =========================
VIGO HERO
========================= */
/* Desktop / default */
.title-section--vigo{
position: relative;
overflow: hidden;
width: 100% !important;
/* desktop hero image */
background-image: url("images/vigo-hero.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
/* FIX: header overlap + meta cut */
min-height: 155vh;
padding: 220px 5vw;
}
/* Container */
.hero-vigo-inner{
position: relative;
max-width: 1200px;
margin: 0 auto;
height: 100%;
min-height: inherit;
display: flex;
flex-direction: column;
}
/* Title */
.hero-vigo-heading{
position: relative;
z-index: 2;
text-align: center;
margin-top: 90px;
}
.title-section--vigo .title{
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: clamp(52px, 8vw, 100px);
margin: 0;
}
.vigo-title-glow{
color: #ffffff;
text-shadow:
0 2px 18px rgba(0,0,0,0.55),
0 0 28px rgba(56,189,248,0.35);
-webkit-text-stroke: 1px rgba(0,0,0,0.25);
}
/* Meta pinned to bottom (desktop) */
.hero-vigo-meta-bottom{
margin-top: auto; /* pushes to bottom */
padding-bottom: 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
position: relative;
z-index: 2;
}
.title-section--vigo .title-subline{
margin-top: 0;
font-size: 18px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #ffffff;
font-weight: 700;
}
/* Optional: slight bottom fade for readability */
.title-section--vigo::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height: 42%;
background: linear-gradient(to top, rgba(2,6,23,0.70), rgba(2,6,23,0));
pointer-events:none;
}
/* Tablet tweaks */
@media (max-width: 991px){
.title-section--vigo{
min-height: 120vh;
padding: 170px 5vw 70px;
}
}
@media (max-width: 767px){
.title-section--vigo{
min-height: 100vh;
height: 100vh;
padding: 130px 6vw 0;
background-image: url("images/vigo-hero-mob.webp");
background-size: cover; /* cover on mobile */
background-position: center;
}
.hero-vigo-meta-bottom{
display: none !important; /* hide meta on mobile */
}
.title-section--vigo .title,
.vigo-title-glow{
font-size: clamp(30px, 9vw, 44px);
letter-spacing: 0.14em;
}
/* remove bottom fade since meta is hidden (optional) */
.title-section--vigo::after{
display: none;
}
}
.badge-vigo-spec {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
background: rgba(15, 23, 42, 0.7);
color: #e5e7eb;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.badge-vigo-spec span { font-weight: 600; color: #a5b4fc; }
.top-cta-vigo {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.8rem;
margin-top: 4px;
}
.top-cta-vigo a {
border-radius: 999px;
padding-inline: 22px;
padding-block: 10px;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.btn-vigo-primary { background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; border: none; }
.btn-vigo-primary:hover { background: linear-gradient(135deg, #16a34a, #166534); color: #fff; }
.btn-vigo-outline { border: 1px solid #ffffff; color: #ffffff; background: transparent; }
.btn-vigo-outline:hover { background: #ffffff; color: #020617; }
/* HEADER MAIN MENU --------------------------------------------- */
.header-main-menu {
display: flex;
align-items: center;
gap: 24px;
margin-right: 24px;
position: relative;
z-index: 1000;
}
.header-link-vigo {
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
padding: 6px 4px;
display: inline-block;
}
.header-link-vigo:hover { color: #38bdf8; }
.menu-item-vigo { position: relative; }
.menu-dropdown-vigo {
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-vigo:hover .menu-dropdown-vigo {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.dropdown-link-vigo {
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-vigo:hover { background: rgba(55, 65, 81, 0.85); color: #ffffff; }
.badge-coming-soon {
display: inline-block;
margin-left: 6px;
padding: 2px 7px;
border-radius: 999px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
background: rgba(251, 191, 36, 0.15);
border: 1px solid rgba(234, 179, 8, 0.4);
color: #facc15;
}
/* EXTRA SECTION (VIGO) ----------------------------------------- */
.performance-vigo {
background: radial-gradient(circle at top, #020617 0, #020617 46%, #050816 100%);
color: #f9fafb;
padding-block: 80px;
}
.perf-vigo-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 40px;
align-items: flex-start;
}
.perf-vigo-eyebrow {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 6px;
}
.perf-vigo-left .p-16 { color: #cbd5f5; }
.perf-vigo-metrics {
margin-top: 26px;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.perf-vigo-metric {
min-width: 160px;
padding: 14px 18px;
border-radius: 18px;
background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.22), rgba(15, 23, 42, 0.96));
border: 1px solid rgba(148, 163, 184, 0.6);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.metric-value { font-size: 26px; font-weight: 600; letter-spacing: 0.04em; }
.metric-unit { font-size: 15px; font-weight: 400; }
.metric-label { margin-top: 4px; font-size: 12px; color: #e5e7eb; opacity: 0.85; }
.perf-vigo-right { position: relative; padding-left: 18px; }
.perf-vigo-right::before {
content: "";
position: absolute;
left: 6px;
top: 6px;
bottom: 6px;
width: 1px;
background: linear-gradient(to bottom, rgba(148, 163, 184, 0.1), rgba(148, 163, 184, 0.65));
}
.perf-vigo-feature { position: relative; padding-left: 20px; margin-bottom: 26px; }
.perf-vigo-feature:last-child { margin-bottom: 0; }
.perf-vigo-feature h3 { font-size: 18px; margin-bottom: 4px; }
.perf-vigo-feature .p-16 { font-size: 14px; color: #e5e7eb; }
.feature-marker {
position: absolute;
left: -2px;
top: 4px;
width: 10px;
height: 10px;
border-radius: 999px;
background: #38bdf8;
box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.3);
}
.feature-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.feature-tags span {
font-size: 11px;
padding: 4px 9px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.92);
border: 1px solid rgba(148, 163, 184, 0.7);
}
@media (max-width: 991px) {
.perf-vigo-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.perf-vigo-right { padding-left: 10px; }
}
@media (max-width: 767px) { .perf-vigo-metric { min-width: 130px; } }
/* COLOR SWITCHING ---------------------------------------------- */
.color-config--vigo{
width: 100% !important;
height: 550px !important;
padding: 70px 0 80px;
background: radial-gradient(900px 500px at 60% 45%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, #0b1220 0%, #0f2742 40%, #1b4f7a 70%, #2e7bbf 100%);
position: relative;
overflow: hidden;
}
.color-wrap{
background-image: none !important;
}
/* dots */
.color-config--vigo .color-switch-wrap{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:18px;
}
/* ✅ Fix #1: circle shows original color even before click */
.color-config--vigo .color-switch{
width:26px;
height:26px;
border-radius:50%;
border:2px solid rgba(255,255,255,0.95);
cursor:pointer;
background-color: var(--dot-color) !important; /* <- important fix */
opacity:1 !important; /* <- so it looks colored */
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
transition: transform .2s ease, box-shadow .2s ease;
}
.color-config--vigo .color-switch.active{
box-shadow: 0 0 0 3px rgba(56,189,248,0.75), 0 10px 24px rgba(0,0,0,0.35);
transform: scale(1.06);
}
/* ✅ Fix #2: image fully visible (no crop, no huge cut) */
.color-config--vigo .color-wrap{
display:none;
width:100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 5vw;
}
.color-config--vigo .color-wrap.active{ display:block; }
.color-config--vigo .color-image{
width:100%;
height: clamp(340px, 52vw, 560px);
object-fit: contain; /* <- key: show full car */
object-position: center;
display:block;
filter: drop-shadow(0 28px 55px rgba(0,0,0,0.45));
}
.color-config--vigo .color-name-wrap{ text-align:center; margin-top: 10px; }
.color-config--vigo .color-name{
display:inline-block;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
color: #fff;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 12px;
}
@media (max-width: 767px){
.color-config--vigo{ padding: 55px 0 60px; }
.color-config--vigo .color-image{ height: 360px; }
}
.logo-wrap { width: auto !important; }
.nav-link { align-self: center; top: 25% !important; }
.split-section-image._100
{
aspect-ratio: 1 !important;
object-position: 50% 100% !important;
}
@media (max-width: 991px) {
.header-main-menu { display: none; }
}
@media screen and (max-width: 479px) {
.color-name-wrap {
bottom: 90px;
left: 40%;
}
}
/* 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: #0b5ed7 !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 p a { color: #2e4155 !important; }
#footer .footer-top .footer-links ul a,i { color: #2e4155 !important; }
/* HEADER LAYOUT: left Chawla, center menu+buttons, right Dongfeng */
.logo{
position: inherit !important;
margin-top: 20px !important;
width: 180px;
height: auto;
}
@media screen and (max-width: 991px) {
.logo {
display: flex;
}
.header-main-menu {
display: flex;
}
}
.header--dual-logos{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
background-color: #000000;
height: 135px;
}
.burger-element{
background-color: #fff;
}
.header--dual-logos .logo-wrap{ width:auto !important; }
.header-left-logo,
.header-right-logo{
display:flex;
align-items:center;
flex:0 0 auto;
}
/* center nav area */
.header-center-nav{
flex:1 1 auto;
display:flex;
align-items:center;
justify-content:center;
gap:28px;
}
/* remove right push on desktop menu */
.header-center-nav .header-main-menu{
margin-right:0 !important;
}
/* keep buttons tight and centered with menu */
.header-center-nav .nav-buttons-wrap{
display:flex;
gap:12px;
}
/* optional: make header a bit cleaner */
.header-center-nav .button-secondary.reverse-no-hover,
.header-center-nav .button-primary.reverse-no-hover{
white-space:nowrap;
}
/* MOBILE MENU HEADER (logos left/right) */
.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; /* your code sets top:25% - avoid it in mobile menu */
align-self:auto !important;
}
.nav-mobile-menu{
max-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 28px; /* breathing space at bottom */
}
.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;
}
/* show burger on smaller, hide center buttons if needed */
@media screen and (max-width: 1199px){
.header-center-nav .nav-buttons-wrap{ display:none; }
}
/* ===============================
STATS OVERLAY SECTION
================================ */
.stats-overlay-section {
position: relative;
overflow: hidden;
}
/* image wrapper */
.stats-overlay-wrap {
position: relative;
}
/* background image */
.stats-bg {
width: 100%;
height: auto;
display: block;
}
/* overlay container */
.stats-overlay {
position: absolute;
left: 50%;
bottom: 5%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 36px;
padding:0;
color: #ffffff;
z-index: 2;
}
/* stat block */
.stat-block {
display: flex;
flex-direction: column;
align-items: center;
min-width: 140px;
text-align: center;
}
/* small label */
.stat-top {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.75;
margin-bottom: 6px;
}
/* main number */
.stat-main {
display: flex;
align-items: baseline;
gap: 4px;
}
/* animated number */
.stat-num {
font-size: 44px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
}
/* units */
.stat-unit,
.stat-prefix {
font-size: 16px;
opacity: 0.85;
}
/* sub text */
.stat-sub {
font-size: 11px;
opacity: 0.65;
margin-top: 4px;
}
/* divider */
.stat-divider {
width: 1px;
height: 80px;
background: rgba(255, 255, 255, 0.25);
}
/* ===============================
RESPONSIVE
================================ */
@media (max-width: 991px) {
.stats-overlay {
gap: 24px;
padding: 18px 24px;
}
.stat-num {
font-size: 36px;
}
}
@media (max-width: 767px) {
.stats-overlay {
position: static;
transform: none;
margin: -100px auto 0;
width: calc(100% - 32px);
justify-content: space-between;
}
.stat-block {
min-width: auto;
}
.stat-num {
font-size: 32px;
}
}
@media (max-width: 479px) {
.stats-overlay {
display:none;
}
}
/* ===============================
INTERIOR IMAGE SWITCHER
=============================== */
.interior-image-wrap{
position: relative;
width: 100%;
}
/* image fade */
.interior-image{
transition: opacity 420ms ease;
}
/* cards container */
.interior-switch-cards{
position: absolute;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
display: flex;
gap: 14px;
z-index: 3;
}
/* card style buttons */
.interior-card{
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.35);
background: rgba(2,6,23,0.45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #ffffff;
font-size: 14px;
letter-spacing: .04em;
cursor: pointer;
transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.interior-card:hover{
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0,0,0,0.35);
}
/* active state */
.interior-card.active{
background: rgba(15,23,42,0.75);
border-color: rgba(56,189,248,0.85);
box-shadow: 0 0 0 3px rgba(56,189,248,0.35);
}
/* color dots */
.card-dot{
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #ffffff;
}
.card-dot.white{ background: #f8fafc; }
.card-dot.black{ background: #0b0b0f; }
/* mobile */
@media (max-width: 767px){
.interior-switch-cards{
bottom: 14px;
gap: 10px;
}
.interior-card{
padding: 10px 14px;
font-size: 13px;
}
.header-main-menu {
display: none;
}
.header--dual-logos .logo-wrap{
display: none;
}
.header--dual-logos{
height: 85px;
}
}
</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: Menu + Buttons (Get in touch removed) -->
<div class="navigation header-center-nav">
<!-- main menu (desktop) -->
<div class="header-main-menu">
<div class="menu-item-vigo">
<a href="../cars.html" class="header-link-vigo">Models</a>
<div class="menu-dropdown-vigo">
<a href="box.html" class="dropdown-link-vigo">Box</a>
<a href="007.html" class="dropdown-link-vigo">007</a>
<a href="vigo.html" class="dropdown-link-vigo">
Vigo <span class="badge-coming-soon">Coming Soon</span>
</a>
</div>
</div>
<a href="about.html" class="header-link-vigo">About Us</a>
<a href="contact.html" class="header-link-vigo">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 stays in center area for mobile/tablet -->
<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">
<!-- Chawla black logo (you will replace link later if needed) -->
<img loading="lazy" src="images/logo2.png" alt="Chawla" style="height: 80px;">
</a>
<a href="../index.html" class="mobile-logo">
<!-- Dongfeng black logo (you said you will replace link later) -->
<img loading="lazy" src="images/dongfeng-logo-black.png" alt="Dongfeng">
</a>
</div>
<!-- menu items -->
<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="coming-soon">
<!-- Blurred Background -->
<div class="bg"></div>
<!-- Overlay Content -->
<div class="content">
<span class="badge">Coming Soon</span>
<h1>VIGO. The Future Is Almost Here.</h1>
<p>
A bold new chapter by <strong>VIGO</strong> is on the way.<br />
Designed for the future. Built to redefine mobility.
</p>
<div class="divider"></div>
<span class="footer-text">© 2025 VIGO | Chawla Green Motors All Rights Reserved</span>
</div>
</div>
<!-- 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>
</body>
</html>