menders

Back Back Up Advanced Editor

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

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

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

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

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

<div class="close-men