menders

Back Back Up Advanced Editor

<!DOCTYPE html>
<html data-wf-domain="www.dongfeng-nammi-box.ch" data-wf-page="vigo-page" data-wf-site="6673de3350ec9a81ecfa64a2" lang="en"
  data-wf-locale="en">

<head>
  <meta charset="utf-8">
  <title>Dongfeng VIGO | CHAWLA GREEN MOTORS</title>

<link href="css/dongfeng-nammi-box.webflow.7ffe7ed09.min.css" rel="stylesheet" type="text/css">

<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');

</script>

<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">

/* 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: 20px 6vw 0;  
    background-image: url("images/vigo-hero-mob.webp");
    background-size: cover;            /* cover on mobile */
    background-position: center bottom;
  }
/* Change ONLY the second (white) button on mobile */
  .hero-vigo-meta-bottom .top-cta-vigo a.btn-vigo-outline{
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #ffffff;
    border: none;
  }

.hero-vigo-meta-bottom .top-cta-vigo a.btn-vigo-outline:hover{
    background: linear-gradient(135deg, #16a34a, #166534);
    color: #ffffff;
  }

.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;
  }
  .header--dual-logos{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
  }

.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:14px 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;
  }
}

@media (max-width: 767px) {

/* Hide text + badges */
  .hero-vigo-meta-bottom .title-subline,
  .hero-vigo-meta-bottom .badge-vigo-spec {
    display: none !important;
  }

/* Keep meta container visible */
  .hero-vigo-meta-bottom {
    display: flex;
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    margin: 0;
    z-index: 10;
  }

/* Buttons layout */
  .hero-vigo-meta-bottom .top-cta-vigo {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

.hero-vigo-meta-bottom .top-cta-vigo a {
    font-size: 13px;
    padding: 10px 22px;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
  }
}

</style>
</head>

<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>

<div class="navigation header-center-nav">

<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 
          </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>

<div class="burger">
      <div class="burger-element"></div>
      <div class="burger-element"></div>
      <div class="burger-element"></div>
    </div>
  </div>

<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>

<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</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>

<section class="title-section title-section--vigo">
  <div class="hero-vigo-inner">
    <div class="hero-vigo-heading">
      <h1 class="title vigo-title-glow">DONGFENG VIGO</h1>
    </div>

<div class="hero-vigo-meta hero-vigo-meta-bottom">
      <div class="title-subline">SMART · SERENE · SENSORY</div>

<span class="badge-vigo-spec">
        Range up to <span>480 km (CLTC)*</span> &nbsp;|&nbsp; Electric SUV · 5 seats · 5 doors
      </span>

<div class="top-cta-vigo">
        <a href="pdf/vigo-brochure.pdf" target="_blank" class="btn-vigo-primary w-button">Download brochure</a>
        <a href="pdf/vigo-price-list.pdf" target="_blank" class="btn-vigo-outline w-button">Price list</a>
      </div>
    </div>
  </div>
</section>

<section class="framed-image-section after-title stats-overlay-section">
  <div class="stats-overlay-wrap">

<img src="images/vigo-stats.webp" loading="lazy" alt="Dongfeng VIGO highlights"
      class="stats-bg">

<div class="stats-overlay" aria-label="VIGO highlights">

<div class="stat-block">
        <div class="stat-top">Range</div>
        <div class="stat-main">
          <span class="stat-num" data-count="480">0</span>
          <span class="stat-unit">km</span>
        </div>
        
      </div>

<div class="stat-block">
        <div class="stat-top">Battery Capacity</div>
        <div class="stat-main">
          <span class="stat-num" data-float="51.5">0.0</span>
          <span class="stat-unit">kWh</span>
        </div>
      </div>

<div class="stat-block">
        <div class="stat-top">Wheel Base</div>
        <div class="stat-main">
          <span class="stat-num" data-count="2715">0</span>
          <span class="stat-unit">mm</span>
        </div>
      </div>

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

<section class="key-facts">
    <div class="key-fact">
      <img loading="lazy" alt="" src="images/667d4a954c1325247d9a2f3f_range_battery.svg" class="fact-icon">
      <p class="p-16">
        Range up to <strong class="bold">480 km (CLTC)*</strong><br>
        Efficient EV platform with LFP battery options (44.94 / 51.87 kWh).
      </p>
    </div>

<div class="key-fact">
      <img loading="lazy" alt="" src="images/667c023bf89cca890b51b85e_mileage_2.svg" class="fact-icon">
      <p class="p-16">
        <strong class="bold">100% electric SUV</strong><br>
        FWD, smooth torque delivery and multiple drive modes (Comfort / Eco / Sport).
      </p>
    </div>

<div class="key-fact">
      <img loading="lazy" alt="" src="images/667c000ba5445918d245924e_size.svg" class="fact-icon">
      <p class="p-16">
        Compact SUV size<br>
        <strong>4306 × 1868 × 1654 mm</strong> · Wheelbase <strong>2715 mm</strong>.
      </p>
    </div>

<div class="key-fact">
      <img loading="lazy" alt="" src="images/667d7fe10e223eab292d67b4_smart-car.svg" class="fact-icon">
      <p class="p-16">
        <strong>12.8"</strong> centre display · <strong>8.88"</strong> cluster<br>
        <strong>50W</strong> wireless charging · 360° camera (variant).
      </p>
    </div>
  </section>

<section class="color-config color-config--vigo">
  <img src="images/667577b24203d7e652ef4a21_link-arrow-white.svg" loading="lazy"
    style="transform: rotateZ(180deg);" alt="" class="tooltip">

<div class="color-switch-wrap">
    <a href="#" class="color-switch w-inline-block"
      data-color="white" data-img="images/vigo-white.png" style="--dot-color:#ffffff;"></a>

<div class="color-wrap" data-color="white">
    <img src="images/vigo-white.png" loading="lazy" alt="VIGO in White" class="color-image">
    <div class="color-name-wrap"><div class="color-name">White</div></div>
  </div>

<div class="color-wrap" data-color="silver">
    <img src="images/vigo-silver.png" loading="lazy" alt="VIGO in Silver" class="color-image">
    <div class="color-name-wrap"><div class="color-name">Silver</div></div>
  </div>

<div class="color-wrap" data-color="yellow">
    <img src="images/vigo-yellow.png" loading="lazy" alt="VIGO in Yellow" class="color-image">
    <div class="color-name-wrap"><div class="color-name">Yellow</div></div>
  </div>

<div class="color-wrap" data-color="orange">
    <img src="images/vigo-orange.png" loading="lazy" alt="VIGO in Orange" class="color-image">
    <div class="color-name-wrap"><div class="color-name">Orange</div></div>
  </div>

<div class="color-wrap" data-color="green">
    <img src="images/vigo-green.png" loading="lazy" alt="VIGO in Green" class="color-image">
    <div class="color-name-wrap"><div class="color-name">Green</div></div>
  </div>

<div class="color-wrap" data-color="black">
    <img src="images/vigo-black.png" loading="lazy" alt="VIGO in Black" class="color-image">
    <div class="color-name-wrap"><div class="color-name">Black</div></div>
  </div>
</section>

<section class="centered-text-section" id="slogan">
    <div class="margin-adjust-2vw">
      <p class="p-16">
        <span class="price">Drive Your Dreams</span>
      </p>
    </div>
    <div class="margin-adjust-4vw">
      <h2 class="h2">Smart Cabin Tech. Confident Urban SUV.</h2>
    </div>
    <div class="buttons-wrap">
      <a href="#contact" class="button-primary hover-el w-button">Get in touch</a>
      <a href="#contact" class="bread-crumb-wrap w-inline-block">
        <div class="p-16">
          <strong>Register for a test drive</strong>
        </div>
        <img loading="lazy" src="images/66757729c0619a25468ae95f_link-arrow-black.svg" alt="" class="link-arrow">
      </a>
    </div>
  </section>

<section class="framed-image-section interior-switcher">

<div class="interior-switch-cards">
      <button class="interior-card active" data-target="white">
        <span class="card-dot white"></span>
        <span class="card-text">Grey and Black</span>
      </button>

<button class="interior-card" data-target="black">
        <span class="card-dot black"></span>
        <span class="card-text">Beige and Black</span>
      </button>
    </div>

</div>

</section>

<section class="performance-vigo">
    <div class="perf-vigo-inner">

<div class="perf-vigo-left">
        <div class="margin-adjust-1vw">
          <div class="perf-vigo-eyebrow">Tech · Space · Efficiency</div>
          <h2 class="h2">VIGO Highlights</h2>
        </div>

<div class="margin-adjust-5vw">
          <p class="p-16">
            Dongfeng VIGO is designed for modern daily driving — comfortable seating, smart infotainment, efficient charging,
            and practical SUV utility including a split tailgate and versatile cabin space.
          </p>
        </div>

<div class="perf-vigo-metrics">
          <div class="perf-vigo-metric">
            <div class="metric-value">12.8<span class="metric-unit">"</span></div>
            <div class="metric-label">Centre display</div>
          </div>
          <div class="perf-vigo-metric">
            <div class="metric-value">50<span class="metric-unit">W</span></div>
            <div class="metric-label">Wireless phone charging</div>
          </div>
          <div class="perf-vigo-metric">
            <div class="metric-value">4306<span class="metric-unit">mm</span></div>
            <div class="metric-label">SUV length · 2715mm wheelbase</div>
          </div>
        </div>
      </div>

<div class="perf-vigo-right">
        <div class="perf-vigo-feature">
          <div class="feature-marker"></div>
          <h3>Exterior &amp; Practicality</h3>
          <p class="p-16">
            Adaptive LED headlights, roof rails, front trunk and a split tailgate designed for easy loading and everyday use.
          </p>
          <div class="feature-tags">
            <span>Adaptive LED</span>
            <span>Split tailgate</span>
            <span>Roof rails</span>
            <span>Front trunk</span>
          </div>
        </div>

<div class="perf-vigo-feature">
          <div class="feature-marker"></div>
          <h3>Cabin &amp; Comfort</h3>
          <p class="p-16">
            Power seat adjustment (variant), automatic A/C with rear vents, PM2.5 filter and practical storage for daily commutes.
          </p>
          <div class="feature-tags">
            <span>Auto A/C</span>
            <span>Rear vents</span>
            <span>PM2.5 filter</span>
          </div>
        </div>

<div class="perf-vigo-feature">
          <div class="feature-marker"></div>
          <h3>Smart Connectivity</h3>
          <p class="p-16">
            8.88” full LCD cluster, 12.8” centre screen, screen mirroring, Bluetooth and 50W wireless charging to keep you connected.
          </p>
          <div class="feature-tags">
            <span>8.88" cluster</span>
            <span>12.8" display</span>
            <span>Bluetooth</span>
            <span>50W charging</span>
          </div>
        </div>
      </div>

</div>
  </section>

<section class="split-image-section">
    <img src="images/vigo-dash.webp" loading="lazy" alt="VIGO cockpit" class="split-section-image image-only">
    <img src="images/vigo-rear.webp" loading="lazy" alt="VIGO rear seats" class="split-section-image image-only">
  </section>

<section class="centered-text-section">
    <div class="margin-adjust-2vw">
      <h2 class="h2">Smart. Serene. Sensory.</h2>
    </div>
    <div class="margin-adjust-5vw">
      <p class="p-16">
        From urban commutes to weekend drives, VIGO gives you quiet electric confidence, a modern interface,
        and practical SUV space — built for comfort, safety and everyday convenience.
      </p>
    </div>
    <div class="buttons-wrap">
      <a href="booking.html" class="button-primary hover-vfa w-button">Book now</a>
    </div>
  </section>

<section class="full-screen-image-section">
    <img src="images/vigo-back.webp" loading="lazy" alt="VIGO on the road" class="full-width-image">
  </section>

<section class="split-section mobile-wrap-up">
    <div class="split-section-content-wrap lh-el-gradient">
      <div class="split-section-content">
        <div class="margin-adjust-1vw">
          <h3 class="h4">Electric SUV for Real Life</h3>
        </div>
        <div class="margin-adjust-4vw">
          <p class="p-16">
            With compact SUV proportions, modern driver assistance (variant) and smart efficiency,
            VIGO is made for daily practicality — easy parking, comfortable seating and flexible storage.
          </p>
        </div>
        <div class="buttons-wrap">
          <a href="booking.html" class="button-primary reverse w-button">Book now</a>
        </div>
      </div>
    </div>
    <img width="338" height="524" alt="VIGO side profile" src="images/vigo-side.webp" loading="lazy" class="split-section-image _100">
  </section>

<section id="contact" class="contact-section">
    <div class="text-intro-40-left">
      <div class="margin-adjust-1vw">
        <h4 class="h4">Ready to experience VIGO?</h4>
      </div>
      <p class="p-16 max-width">
        Reserve your Dongfeng VIGO test drive or request more information — our team will get back to you shortly.
      </p>
    </div>

<div class="form-block w-form">
      <form id="wf-form-contact-request" action="sendEmail.php" method="POST" class="form">
        <p class="p-16"><em class="italic">Fields marked with (*) are required.</em></p>

<div class="field-wrapper-50">
            <div class="select-field-wrapper">
              <div class="chevron-wrap">
                <img loading="lazy" src="images/667577b2672f8075969cc28e_chevron-black.svg" alt="" class="chevron-down">
              </div>
              <select id="exterior-color" name="color" required class="select-field w-select">
                <option value="">Exterior color*</option>
                <option value="white">White</option>
                <option value="silver">Silver</option>
                <option value="yellow">Yellow</option>
                <option value="orange">Orange</option>
                <option value="green">Green</option>
                <option value="black">Black</option>
                <option value="no preference">I have no preference</option>
              </select>
            </div>
          </div>
        </div>

<select id="brand" name="brand" class="hidden-field w-select">
          <option value="DONGFENG">DONGFENG</option>
        </select>
        <select id="model" name="model" class="hidden-field w-select">
          <option value="CGM-VIGO">CGM-VIGO</option>
        </select>

<div class="success-message w-form-done">
        <div class="p-16">
          Thank you, we have successfully received your request.<br>
          Our team will contact you shortly.
        </div>
      </div>
      <div class="error-message w-form-fail">
        <div class="p-16">Something went wrong. Please try again.</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-3 offset-md-1 col-md-6">
            <h3 class="mb-4">Address</h3>
            <p><i class="bi bi-geo-alt-fill me-2"></i>Flagship Showroom : 130 E1 Gulberg III - Main Boulevard, Lahore</p>
            <p><i class="bi bi-telephone-fill me-2"></i><a href="tel:+923114995162">+92 311 4995162</a></p>
            <p><i class="bi bi-envelope-fill me-2"></i>info@chawlagreenmotors.com</p>
          </div>

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

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

<script src="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>
  
  (function () {
    const heroImg = document.querySelector('#heroCarImage'); // keep if you want hero to update too
    const switches = document.querySelectorAll('.color-config--vigo .color-switch');
    const wraps = document.querySelectorAll('.color-config--vigo .color-wrap');

function setColor(color, img) {
      wraps.forEach(w => w.dataset.color === color ? w.classList.add('active') : w.classList.remove('active'));
      switches.forEach(s => s.dataset.color === color ? s.classList.add('active') : s.classList.remove('active'));
      if (heroImg && img) heroImg.src = img;
    }

switches.forEach(sw => {
      sw.addEventListener('click', function (e) {
        e.preventDefault();
        setColor(this.dataset.color, this.dataset.img);
      });
    });

// initial state
    const first = switches[0];
    if (first) setColor(first.dataset.color, first.dataset.img);
  })();

document.addEventListener("DOMContentLoaded", () => {
  const counters = document.querySelectorAll(".stat-num");

const animate = (el) => {
    const target =
      el.dataset.count ? parseInt(el.dataset.count) :
      el.dataset.float ? parseFloat(el.dataset.float) : 0;

const isFloat = el.dataset.float !== undefined;
    let start = 0;
    const duration = 1200;
    const startTime = performance.now();

const update = (now) => {
      const progress = Math.min((now - startTime) / duration, 1);
      const value = start + (target - start) * progress;

el.textContent = isFloat ? value.toFixed(1) : Math.floor(value);

if (progress < 1) requestAnimationFrame(update);
    };

requestAnimationFrame(update);
  };

counters.forEach(counter => observer.observe(counter));
});

(function(){
    const img = document.getElementById('interiorImage');
    const cards = document.querySelectorAll('.interior-card');
    if(!img || !cards.length) return;

cards.forEach(card => {
      card.addEventListener('click', () => {
        if(card.classList.contains('active')) return;

cards.forEach(c => c.classList.remove('active'));
        card.classList.add('active');

const target = card.dataset.target;
        const nextSrc = img.dataset[target];

img.style.opacity = '0';
        setTimeout(() => {
          img.src = nextSrc;
          img.style.opacity = '1';
        }, 220);
      });
    });
  })();

</script>
</body>

</html>