menders

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="en">

<title>Contact Us | Chawla Green Motors</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

<link href="../bikes/assets/img/logo.png" rel="icon">

<link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
    rel="stylesheet">

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

/* Coming soon badge style in nav (same as dealer-network / about) */
    .nav-coming-soon {
      display: inline-block;
      margin-left: 6px;
      padding: 0 6px;
      border-radius: 999px;
      background: #f97316;
      color: #111827;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

/* DROPDOWN WRAPPER */
    .navbar .dropdown {
      position: relative;
    }

/* Chevron animation */
    .navbar .dropdown > a i {
      font-size: 12px;
      margin-left: 4px;
      transition: transform 0.2s ease;
    }

.navbar .dropdown:hover > a i {
      transform: rotate(180deg);
    }

/* DROPDOWN PANEL (hidden by default) */
    .navbar .dropdown ul {
      position: absolute;
      top: calc(100% + 8px);
      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;
    }

/* SHOW DROPDOWN ON HOVER (desktop) + WHEN ACTIVE (mobile) */
    .navbar .dropdown:hover > ul,
    .navbar .dropdown.dropdown-active > ul {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

/* DROPDOWN LIST ITEMS */
    .navbar .dropdown ul li {
      width: 100%;
    }

/* DROPDOWN LINKS */
    .navbar .dropdown ul li a {
      display: block;
      padding: 8px 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;
    }

.navbar .dropdown ul li a:hover {
      background: rgba(55, 65, 81, 0.85);
      color: #ffffff;
    }
    #contact{
        padding-bottom: 3rem;
    }
    .info, form{
        padding: 20px 10px;
    }
    #footer .social-links a {
    background: rgba(11, 94, 215, 0.08) !important;
    color: #0b5ed7 !important;
    border: 1px solid rgba(11, 94, 215, 0.18);
}

/* ===== Mobile sidebar menu (right slide) ===== */
.mobile-sidebar-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  z-index: 9998;
}

.mobile-sidebar{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(88vw, 360px);
  background: #ffffff;
  transform: translateX(105%);
  transition: transform .26s ease;
  z-index: 9999;

display: flex;
  flex-direction: column;
  padding: 18px 16px;

box-shadow: -24px 0 60px rgba(0,0,0,0.25);
}

.mobile-sidebar.open{
  transform: translateX(0);
}

.mobile-sidebar-overlay.open{
  opacity: 1;
  visibility: visible;
}

.mobile-sidebar-close{
  border: 0;
  background: transparent;
  font-size: 18px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
}

.mobile-sidebar-close:hover{
  background: rgba(0,0,0,0.06);
}

.mobile-sidebar-nav{
  margin-top: 6px;
  overflow: auto;
  padding-right: 6px;
}

.ms-link{
  display: flex;
  align-items: center;
  justify-content: space-between;

padding: 12px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 600;
}

.ms-link:hover{
  background: rgba(0,0,0,0.05);
}

.ms-link.active{
  background: rgba(11, 94, 215, 0.10);
  color: #0b5ed7;
}

.ms-group{
  margin: 6px 0;
}

.ms-accordion{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 10px;
  border-radius: 12px;

display: flex;
  align-items: center;
  justify-content: space-between;

font-weight: 700;
  color: #0f172a;
}

.ms-accordion:hover{
  background: rgba(0,0,0,0.05);
}

.ms-sub{
  display: none;
  padding-left: 10px;
  margin-top: 6px;
}

.ms-sub.open{
  display: block;
}

.ms-sublink{
  display: flex;
  align-items: center;
  justify-content: space-between;

padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #334155;
  font-weight: 600;
}

.ms-sublink:hover{
  background: rgba(0,0,0,0.05);
}

/* show sidebar toggle only on mobile (bootstrap usually does this, but safe) */
@media (min-width: 992px){
  #mobileNavToggle{ display: none !important; }
  .breadcrumbs{
      margin-top: 0;
  }
}

/* prevent page scroll when menu open */
body.menu-open{
  overflow: hidden;
}

/* your existing badge class can stay; optional small tweak for mobile */
.nav-coming-soon{
  margin-left: 8px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
}
.navbar-mobile{
    display: none !important;
}
  </style>
</head>

<header id="header" class="sticky-top d-flex align-items-center">
  <div class="container d-flex align-items-center">

<nav id="navbar" class="navbar">
      <ul>
        <li class="dropdown">
          <a href="cars.html#car-lineup"><span>Models</span> <i class="bi bi-chevron-down"></i></a>
          <ul>
            <li><a href="box.html">Box</a></li>
            <li><a href="007.html">007</a></li>
            <li>
              <a href="vigo.html">
                Vigo 
              </a>
            </li>
          </ul>
        </li>
        <li><a href="dealers-network.html">Dealers Network</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html" class="active">Contact Us</a></li>
      </ul>

<i class="bi bi-list mobile-nav-toggle" id="mobileNavToggle"></i>
    </nav>

</div>
</header>

<div class="mobile-sidebar-overlay" id="mobileSidebarOverlay" aria-hidden="true"></div>

<div class="ms-group">
      <button class="ms-accordion" type="button" id="msModelsBtn" aria-expanded="false">
        <span>Models</span>
        <i class="bi bi-chevron-down"></i>
      </button>
      <div class="ms-sub" id="msModelsSub">
        <a class="ms-sublink" href="box.html">Box</a>
        <a class="ms-sublink" href="007.html">007</a>
        <a class="ms-sublink" href="vigo.html">
          Vigo 
        </a>
      </div>
    </div>

<a class="ms-link" href="dealers-network.html">Dealers Network</a>
    <a class="ms-link" href="about.html">About Us</a>
    <a class="ms-link active" href="contact.html">Contact Us</a>
  </nav>
</aside>

<section id="breadcrumbs" class="breadcrumbs">
      <div class="container">

<div class="d-flex justify-content-between align-items-center">
          <h2>Contact</h2>
          <ol>
            <li><a href="../index.html">Home</a></li>
            <li>Contact</li>
          </ol>
        </div>

</div>
    </section>

<section id="contact" class="contact mb-5">
      <div class="container">

<div class="col-lg-4">
            <div class="info fade-slide-down">
              <div class="address">
                <i class="bi bi-geo-alt"></i>
                <h4>Chawla Green Motors Pvt. Ltd:</h4>
                <p> 130 E1 Gulberg III - Main Boulevard, Lahore</p>
              </div>

<div class="email fade-slide-down">
                <i class="bi bi-envelope"></i>
                <h4>Email:</h4>
                <p>info@chawlagreenmotors.com</p>
              </div>

<div class="phone fade-slide-down">
                <i class="bi bi-phone"></i>
                <h4>Phone</h4>
                <p>+92 311 4995162</p>
              </div>
            </div>

</div>

<form action="contactDone.php" method="post" class="php-email-form">
              <div class="row">
                <div class="col-md-6 form-group">
                  <input type="text" name="name" class="form-control" placeholder="Your Name" required>
                </div>
                <div class="col-md-6 form-group mt-3 mt-md-0">
                  <input type="email" class="form-control" name="email" placeholder="Your Email" required>
                </div>
              </div>
              <div class="form-group mt-3">
                <input type="text" class="form-control" name="subject" placeholder="Subject" required>
              </div>
              <div class="form-group mt-3">
                <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
              </div>
              <div class="my-3" style="display: none!important">
                <div class="loading">Loading</div>
                <div class="error-message"></div>
                <div class="sent-message">Your message has been sent. Thank you!</div>
              </div>
              <div class="text-center">
                <button type="submit" onclick="submitDone()">Send Message</button>
              </div>
            </form>

</div>

</div>
    </section>

</main>

<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="text-light mb-4">Address</h3>
            <p><i class="bi bi-geo-alt-fill me-2"></i>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="../bikes/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../bikes/assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="../bikes/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="../bikes/assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="../bikes/assets/vendor/waypoints/noframework.waypoints.js"></script>
  <script src="../bikes/assets/vendor/php-email-form/validate.js"></script>

<script src="../bikes/assets/js/main.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
      const fadeSlideElements = document.querySelectorAll('.fade-slide-down');
      const slideInElements = document.querySelectorAll('.slide-in-right');

function checkVisibility() {
        const windowHeight = window.innerHeight;

fadeSlideElements.forEach(element => {
          const positionFromTop = element.getBoundingClientRect().top;
          if (positionFromTop - windowHeight <= 0) {
            element.classList.add('visible');
          }
        });

slideInElements.forEach(element => {
          const positionFromTop = element.getBoundingClientRect().top;
          if (positionFromTop - windowHeight <= 0) {
            element.classList.add('visible');
          }
        });
      }

window.addEventListener('scroll', checkVisibility);
      checkVisibility();
    });
    
      
  (function(){
    const toggle = document.getElementById('mobileNavToggle');
    const sidebar = document.getElementById('mobileSidebar');
    const overlay = document.getElementById('mobileSidebarOverlay');
    const closeBtn = document.getElementById('mobileSidebarClose');

const modelsBtn = document.getElementById('msModelsBtn');
    const modelsSub = document.getElementById('msModelsSub');

function openMenu(){
      sidebar.classList.add('open');
      overlay.classList.add('open');
      document.body.classList.add('menu-open');
      sidebar.setAttribute('aria-hidden', 'false');
      overlay.setAttribute('aria-hidden', 'false');
    }

function closeMenu(){
      sidebar.classList.remove('open');
      overlay.classList.remove('open');
      document.body.classList.remove('menu-open');
      sidebar.setAttribute('aria-hidden', 'true');
      overlay.setAttribute('aria-hidden', 'true');
    }

if(toggle){
      toggle.addEventListener('click', function(e){
        e.preventDefault();
        openMenu();
      });
    }

if(closeBtn) closeBtn.addEventListener('click', closeMenu);
    if(overlay) overlay.addEventListener('click', closeMenu);

// Close on ESC
    document.addEventListener('keydown', function(e){
      if(e.key === 'Escape') closeMenu();
    });

// Accordion for Models
    if(modelsBtn && modelsSub){
      modelsBtn.addEventListener('click', function(){
        const isOpen = modelsSub.classList.toggle('open');
        modelsBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
      });
    }

// Close menu when clicking a link
    if(sidebar){
      sidebar.addEventListener('click', function(e){
        const a = e.target.closest('a');
        if(a) closeMenu();
      });
    }
  })();
  </script>

</body>

</html>