menders

Back Back Up Advanced Editor

<!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>
  
  <link href="../bikes/assets/img/logo.png" rel="icon">
  
   <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*.">

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

// If Vigo is still coming soon, keep this:
    function bookNow() { alert("COMING SOON!"); }
  </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: 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>

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

<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 (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">
    
    <div class="bg"></div>

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