:root{
      --primary:#e63946;
      --accent:#ff4757;
      --secondary:#1d3557;
      --dark:#0a0e27;
      --dark2:#121633;
      --light:#1a1d2e;
      --text:#ffffff;
      --muted:#a8a8a8;
      --card:#151a36;
      --ring:rgba(230,57,70,.25);
      --transition:all .25s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:var(--dark);
      color:var(--text);
      overflow-x:hidden;
      line-height:1.6;
    }
    section{padding:80px 0}
    a{color:inherit}

    /* Navbar */
    .navbar{
      background:rgba(10,14,39,.92);
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(255,255,255,.06);
      transition:var(--transition);
      padding:14px 0;
    }
    .navbar.scrolled{
      background:rgba(10,14,39,.98);
      box-shadow:0 10px 30px rgba(0,0,0,.25);
    }
    .nav-link{
      color:var(--text);
      font-weight:600;
      margin:0 10px;
      position:relative;
      transition:var(--transition);
      opacity:.9;
    }
    .nav-link:hover{color:var(--primary); opacity:1}
    .nav-link.active{color:var(--primary); opacity:1}
    .nav-link::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:-8px;
      width:0;
      height:2px;
      background:var(--primary);
      transform:translateX(-50%);
      transition:var(--transition);
    }
    .nav-link:hover::after,
    .nav-link.active::after{width:70%}

    .btn-cta{
      background:var(--primary);
      color:#fff;
      border:none;
      border-radius:10px;
      padding:10px 16px;
      font-weight:700;
      transition:var(--transition);
      text-decoration:none;
      display:inline-flex;
      gap:8px;
      align-items:center;
      justify-content:center;
      box-shadow:0 10px 30px rgba(230,57,70,.20);
    }
    .btn-cta:hover{background:var(--accent); transform:translateY(-1px); color:#fff}
    .btn-ghost{
      background:transparent;
      border:1px solid rgba(255,255,255,.18);
      border-radius:10px;
      padding:10px 16px;
      font-weight:700;
      transition:var(--transition);
      text-decoration:none;
      display:inline-flex;
      gap:8px;
      align-items:center;
      justify-content:center;
	  color:#eee;
    }
    .btn-ghost:hover{border-color:rgba(230,57,70,.6); transform:translateY(-1px); color:#fff}

    /* Hero */
    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      padding-top:90px;
      position:relative;
      background:
        linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)),
        url('https://images.pexels.com/photos/164634/pexels-photo-164634.jpeg?auto=compress&cs=tinysrgb&w=1920')
        center/cover no-repeat;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(
          110deg,
          rgba(255,255,255,0.07) 0px,
          rgba(255,255,255,0.07) 1px,
          transparent 1px,
          transparent 22px
        );
      opacity:.14;
      transform:translateX(-20%);
      animation:speedLines 7s linear infinite;
      pointer-events:none;
      z-index:1;
    }
    @keyframes speedLines{
      0%{transform:translateX(-25%)}
      100%{transform:translateX(25%)}
    }
    .hero::after{
      content:"";
      position:absolute;
      left:-20%;
      right:-20%;
      bottom:-40px;
      height:170px;
      background:radial-gradient(circle at 50% 30%, rgba(230,57,70,.35), transparent 62%);
      filter:blur(12px);
      opacity:.65;
      animation:roadGlow 5.5s ease-in-out infinite;
      pointer-events:none;
      z-index:1;
    }
    @keyframes roadGlow{
      0%,100%{transform:translateY(0); opacity:.55}
      50%{transform:translateY(-10px); opacity:.82}
    }
    .hero-content{position:relative; z-index:3}
    .hero h1{
      font-size:3.1rem;
      font-weight:900;
      letter-spacing:.2px;
      line-height:1.12;
      text-shadow: 2px 10px 25px rgba(0,0,0,.45);
	  padding-top:20px;
    }
    .hero p.lead{
      color:#f0f0f0;
      max-width:820px;
      margin:16px auto 0;
      font-size:1.2rem;
    }
    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:center;
      margin-top:18px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      border-radius:999px;
      color:#fff;
      font-weight:700;
      font-size:.95rem;
      backdrop-filter: blur(10px);
    }
    .pill i{color:var(--primary)}
    .hero-cta-row{
      display:flex;
      gap:12px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:22px;
    }

    /* Lead Card (high-conversion) */
    .lead-card{
      margin-top:26px;
      background:rgba(255,255,255,.95);
      color:#111;
      border-radius:16px;
      box-shadow:0 18px 60px rgba(0,0,0,.35);
      padding:18px;
      max-width:1040px;
      margin-left:auto;
      margin-right:auto;
      position:relative;
      overflow:hidden;
    }
    .lead-card::before{
      content:"";
      position:absolute;
      inset:-40px -70px auto auto;
      width:180px;
      height:180px;
      background:radial-gradient(circle, rgba(230,57,70,.20), transparent 60%);
      filter:blur(2px);
    }
    .lead-card h5{font-weight:900; margin:0 0 10px}
    .lead-card .hint{color:#555; font-size:.95rem}
    .form-control, .form-select{
      border-radius:12px;
      border:2px solid #e9e9e9;
      height:48px;
    }
    textarea.form-control{height:auto}
    .form-control:focus, .form-select:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 .2rem var(--ring);
    }
    .form-small{
      font-size:.92rem;
      color:#666;
    }
    .mini-cta{
      background:var(--primary);
      border:none;
      border-radius:12px;
      height:48px;
      font-weight:900;
      color:#fff;
      transition:var(--transition);
      width:100%;
    }
    .mini-cta:hover{background:var(--accent); transform:translateY(-1px)}

    /* Sections */
    .section-title h2{
      font-weight:900;
      font-size:2.4rem;
      margin-bottom:10px;
      position:relative;
      display:inline-block;
    }
    .section-title h2::after{
      content:"";
      position:absolute;
      left:0; bottom:-10px;
      width:42%;
      height:3px;
      background:linear-gradient(to right, var(--primary), transparent);
      opacity:.9;
      animation:titleSweep 2.8s ease-in-out infinite;
    }
    @keyframes titleSweep{
      0%,100%{width:35%; opacity:.65}
      50%{width:62%; opacity:1}
    }
    .subtitle{color:var(--muted); font-size:1.05rem}

    .soft-bg{background:var(--light)}
    .dark-bg{background:var(--dark)}
    .cardx{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:16px;
      padding:22px;
      height:100%;
      transition:var(--transition);
    }
    .cardx:hover{transform:translateY(-6px); border-color:rgba(230,57,70,.35); box-shadow:0 20px 60px rgba(0,0,0,.25)}
    .cardx .icon{
      width:52px;height:52px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      background:rgba(230,57,70,.12);
      border:1px solid rgba(230,57,70,.25);
      margin-bottom:14px;
    }
    .cardx .icon i{font-size:1.6rem; color:var(--primary)}
    .cardx h5{font-weight:900; margin:0 0 8px}
    .cardx p{color:var(--muted); margin:0}

    /* Inventory Cards */
    .vehicle-card{
      background:var(--card);
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      height:100%;
      transition:var(--transition);
      position:relative;
    }
    .vehicle-card:hover{transform:translateY(-8px); border-color:rgba(230,57,70,.35); box-shadow:0 22px 60px rgba(230,57,70,.12)}
    .vehicle-img{width:100%; height:220px; object-fit:cover; transition:transform 600ms ease, filter 600ms ease}
    .vehicle-card:hover .vehicle-img{transform:scale(1.06); filter:saturate(1.12) contrast(1.05)}
    .vehicle-body{padding:18px}
    .vehicle-title{font-weight:900; margin:0 0 8px}
    .vehicle-price{color:var(--primary); font-weight:900; font-size:1.3rem}
    .specs{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
    .spec{
      display:inline-flex; gap:6px; align-items:center;
      padding:6px 10px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      border-radius:999px;
      color:rgba(255,255,255,.85);
      font-size:.88rem;
    }
    .spec i{color:var(--primary)}
    .badge-top{
      position:absolute;
      top:12px; left:12px;
      padding:7px 10px;
      border-radius:999px;
      font-weight:900;
      font-size:.78rem;
      background:rgba(0,0,0,.55);
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(10px);
    }
    .badge-top.used{border-color:rgba(230,57,70,.45)}
    .badge-top.new{border-color:rgba(60,210,130,.45)}
    .badge-top i{margin-right:6px}

    .btn-view{
      width:100%;
      border:none;
      height:46px;
      border-radius:12px;
      font-weight:900;
      background:var(--primary);
      color:#fff;
      transition:var(--transition);
      margin-top:12px;
    }
    .btn-view:hover{background:var(--accent); transform:translateY(-1px)}

    /* Trust strip */
    .trust-strip{
      padding:18px 0;
      background:rgba(255,255,255,.04);
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .trust-item{
      display:flex; gap:10px; align-items:center;
      color:rgba(255,255,255,.9);
      font-weight:800;
      justify-content:center;
    }
    .trust-item i{color:var(--primary); font-size:1.4rem}

    /* Valuation */
    .valuation-box{
      background:linear-gradient(180deg, rgba(230,57,70,.10), rgba(255,255,255,.03));
      border:1px solid rgba(230,57,70,.25);
      border-radius:16px;
      padding:22px;
    }
    .valuation-result{
      border-radius:14px;
      border:1px dashed rgba(255,255,255,.25);
      padding:16px;
      background:rgba(0,0,0,.18);
    }
    .valuation-result h4{font-weight:900; margin:0}
    .valuation-result p{color:var(--muted); margin:6px 0 0}

    /* FAQ */
    .accordion-item{
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      border-radius:14px;
      overflow:hidden;
      margin-bottom:12px;
    }
    .accordion-button{
      background:transparent;
      color:#fff;
      font-weight:900;
      box-shadow:none;
    }
    .accordion-button:not(.collapsed){color:#fff; background:rgba(230,57,70,.08)}
    .accordion-body{color:var(--muted)}

    /* Testimonials */
    .quote{
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      border-radius:16px;
      padding:22px;
      height:100%;
      transition:var(--transition);
    }
    .quote:hover{transform:translateY(-6px); border-color:rgba(230,57,70,.3)}
    .stars{color:#ffd700}
    .quote p{color:var(--muted); font-style:italic}
    .quote h6{margin:0; font-weight:900}
    .quote small{color:var(--muted)}

    /* Footer */
    footer{
      padding:60px 0 30px;
      border-top:1px solid rgba(255,255,255,.08);
      background:var(--dark);
    }
    .footer-link{color:var(--muted); text-decoration:none}
    .footer-link:hover{color:var(--primary)}

    /* Floating WhatsApp */
    .wa-float{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:9999;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .wa-bubble{
      background:rgba(0,0,0,.55);
      border:1px solid rgba(255,255,255,.14);
      color:#fff;
      padding:10px 12px;
      border-radius:999px;
      font-weight:900;
      display:none;
      backdrop-filter: blur(10px);
    }
    .wa-btn{
      width:54px;
      height:54px;
      border-radius:16px;
      background:#25D366;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      box-shadow:0 18px 50px rgba(0,0,0,.35);
      transition:var(--transition);
      border:1px solid rgba(255,255,255,.18);
    }
    .wa-btn:hover{transform:translateY(-2px)}
    .wa-btn i{font-size:1.6rem}

    /* Reveal */
    @media (prefers-reduced-motion: reduce){
      *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
    }
    .reveal{opacity:0; transform:translateY(22px); transition:opacity 700ms ease, transform 700ms ease}
    .reveal.show{opacity:1; transform:translateY(0)}

    /* Responsive */
    @media (max-width: 992px){
      .hero h1{
		  font-size:2.3rem;
		  padding-top:25px;
		  
		  }
    }
    @media (max-width: 576px){
      section{padding:56px 0}
      .lead-card{padding:14px}
      .wa-bubble{display:none !important}
    }
    @media (min-width: 768px){
      .wa-bubble{display:block}
    }
	
	/* =============================
   PRELOADER
   ============================= */
.preloader{
  position:fixed;
  inset:0;
  background:#ffffff;
  z-index:100000; /* above everything */
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .45s ease, visibility .45s ease;
}

.preloader.hide{
  opacity:0;
  visibility:hidden;
}

.preloader-inner{
  position:relative;
  width:min(520px, 86vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

/* Logo “car running in place” effect */
.preloader-logo{
  width:min(190px, 55vw);
  height:auto;
  transform-origin:center;
  /* running-in-place: tiny vibration + slight tilt */
  animation:carIdleRun 0.55s ease-in-out infinite;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
}

/* Road line animation under logo */
.road{
  width:min(240px, 70vw);
  height:18px;
  border-radius:999px;
  position:relative;
  overflow:hidden;
  opacity:.75;
  background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.02));
}

/* moving dashed lines (gives "moving forward" feel while staying in place) */
.road::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,.18) 0px,
      rgba(0,0,0,.18) 20px,
      transparent 20px,
      transparent 42px
    );
  transform:translateX(0);
  animation:roadMove 0.7s linear infinite;
}

/* subtle speed streaks behind logo */
.preloader-inner::before{
  content:"";
  position:absolute;
  width:420px;
  height:180px;
  max-width:92vw;
  top:-26px;
  left:50%;
  transform:translateX(-50%);
  background:
    repeating-linear-gradient(
      110deg,
      rgba(0,0,0,.07) 0px,
      rgba(0,0,0,.07) 1px,
      transparent 1px,
      transparent 20px
    );
  opacity:.18;
  filter:blur(.2px);
  animation:speedSweep 1.1s linear infinite;
  pointer-events:none;
}

/* loading text */
.loading-text{
  font-weight:900;
  letter-spacing:.3px;
  color:#111;
  font-size:.95rem;
  opacity:.6;
  animation:blink 1.2s ease-in-out infinite;
}

/* Animations */
@keyframes carIdleRun{
  0%   { transform:translateY(0) rotate(0deg); }
  25%  { transform:translateY(-1px) rotate(-0.4deg); }
  50%  { transform:translateY(0) rotate(0.35deg); }
  75%  { transform:translateY(1px) rotate(-0.25deg); }
  100% { transform:translateY(0) rotate(0deg); }
}

@keyframes roadMove{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-62px); }
}

@keyframes speedSweep{
  0%   { transform:translateX(-55%) }
  100% { transform:translateX(-45%) }
}

@keyframes blink{
  0%,100%{opacity:.35}
  50%{opacity:.75}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .preloader-logo, .road::before, .preloader-inner::before, .loading-text{
    animation:none !important;
  }
}

/* =============================
   THEME POPUP MODAL
   ============================= */
.popup-modal{
  background: var(--dark2);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.popup-head{
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 14px 18px;
}

.popup-body{
  padding: 18px;
}

.popup-input{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  height: 46px;
}

.popup-input::placeholder{ color: rgba(255,255,255,.55); }

.popup-input:focus{
  border-color: rgba(230,57,70,.7) !important;
  box-shadow: 0 0 0 .2rem var(--ring) !important;
}

.popup-radio{
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.popup-radio input{
  accent-color: var(--primary);
}

.popup-submit{
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  border-radius: 12px;
  padding: 12px 38px;
  border: none;
  box-shadow: 0 12px 35px rgba(230,57,70,.25);
  transition: var(--transition);
}

.popup-submit:hover{
  background: var(--accent);
  transform: translateY(-1px);
  color: #fff;
}

/* ✅ Fix: make <select> dropdown options readable */
.popup-modal select.popup-input{
  color: #fff;                 /* text inside closed select */
  color-scheme: dark;          /* helps Chrome/Edge render dropdown in dark mode */
}

/* Dropdown list (options) */
.popup-modal select.popup-input option,
.popup-modal select.popup-input optgroup{
  background: #ffffff !important;  /* dropdown list background */
  color: #111111 !important;       /* dropdown list text */
}

/* =============================
   ABOUT PAGE (MyCarHub Theme)
   ============================= */

.about-hero{
  min-height: 62vh;
  padding-top: 110px;
  padding-bottom: 70px;
  position: relative;
  background:
    linear-gradient(rgba(0,0,0,.70), rgba(0,0,0,.72)),
    url('https://images.pexels.com/photos/164634/pexels-photo-164634.jpeg?auto=compress&cs=tinysrgb&w=1920')
    center/cover no-repeat;
  overflow: hidden;
}
.about-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      110deg,
      rgba(255,255,255,0.07) 0px,
      rgba(255,255,255,0.07) 1px,
      transparent 1px,
      transparent 22px
    );
  opacity:.12;
  transform:translateX(-20%);
  animation:speedLines 7s linear infinite;
  pointer-events:none;
  z-index:1;
}
.about-hero::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  bottom:-40px;
  height:170px;
  background:radial-gradient(circle at 50% 30%, rgba(230,57,70,.35), transparent 62%);
  filter:blur(12px);
  opacity:.65;
  animation:roadGlow 5.5s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}
.about-hero-inner{ position:relative; z-index:2; }

.about-breadcrumb{
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  color:rgba(255,255,255,.85);
  font-weight:800;
  margin-bottom:18px;
}
.about-crumb-link{
  color:rgba(255,255,255,.9);
  text-decoration:none;
}
.about-crumb-link:hover{ color:var(--primary); }
.about-crumb-sep{ opacity:.6; }
.about-crumb-current{ color:#fff; }

.about-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 22px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.about-panel::before{
  content:"";
  position:absolute;
  inset:-60px -80px auto auto;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(230,57,70,.22), transparent 60%);
  filter:blur(2px);
  opacity:.9;
}
.about-panel-badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(230,57,70,.12);
  border:1px solid rgba(230,57,70,.25);
  color:#fff;
  font-weight:900;
  margin-bottom:12px;
}
.about-panel h4{
  font-weight:900;
  margin:0 0 8px;
}

.about-card{
  background: var(--card);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  padding: 22px;
}
.about-card h3, .about-card h4{ font-weight:900; }

.about-feature{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.about-feature:first-of-type{ border-top:none; padding-top:0; }
.about-feature h6{ font-weight:900; margin:0 0 4px; }
.about-feature-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(230,57,70,.12);
  border:1px solid rgba(230,57,70,.25);
  flex: 0 0 auto;
}
.about-feature-icon i{ color:var(--primary); font-size:1.2rem; }

.about-side{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px;
}
.about-side h5{ font-weight:900; }

.about-stats{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top: 12px;
}
.about-stat{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: 12px 14px;
}
.about-stat .num{
  font-weight: 900;
  color: var(--primary);
  font-size: 1.25rem;
  line-height: 1;
}
.about-stat .lbl{
  color: rgba(255,255,255,.75);
  font-weight: 800;
  margin-top: 6px;
}

.about-cta{
  background: linear-gradient(180deg, rgba(230,57,70,.10), rgba(255,255,255,.03));
  border:1px solid rgba(230,57,70,.25);
  border-radius: 16px;
  padding: 22px;
}
.about-cta h3{ font-weight:900; }


/* =========================
   BIG LEFT OVERLAP LOGO
========================= */

.custom-navbar {
  background: rgba(7, 12, 30, 0.92);
  backdrop-filter: blur(8px);
  min-height: 82px;
  z-index: 9999;
}

.navbar-wrap {
  position: relative;
}

/* Logo holder stays on left */
.logo-overlap-wrap {
  position: absolute;
  left: 12px;
  top: -6px;
  z-index: 10010;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-decoration: none;
}

/* Main big logo */
.logo-overlap {
  width: 170px;
  height: auto;
  display: block;
  position: relative;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
  transition: transform 0.35s ease, filter 0.35s ease;
}

/* Hover small premium effect */
.logo-overlap:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
}

/* Give navbar content space so menu doesn't hit logo */
.custom-navbar .navbar-collapse {
  margin-left: 210px;
}

/* Optional: a little top breathing room in hero */
.hero {
  padding-top: 130px;
}

/* If your hero text comes too close, keep this */
.hero-content {
  position: relative;
  z-index: 2;
}

/* Tablet */
@media (max-width: 1199.98px) {
  .logo-overlap {
    width: 145px;
  }

  .custom-navbar .navbar-collapse {
    margin-left: 180px;
  }
}

/* Mobile */
@media (max-width: 991.98px) {
  .custom-navbar {
    min-height: 76px;
  }

  .logo-overlap-wrap {
    position: relative;
    left: 0;
    top: 0;
  }

  .logo-overlap {
    width: 110px;
  }

  .custom-navbar .navbar-collapse {
    margin-left: 0;
    margin-top: 14px;
    background: rgba(7, 12, 30, 0.96);
    padding: 14px;
    border-radius: 12px;
  }

  .hero {
    padding-top: 110px;
  }
}

.logo-overlap-wrap {
  top: 0;
}

.logo-overlap {
  width: 185px;
}

.logo-overlap {
  transform: translateY(8px);
}

.logo-overlap {
  width: 180px;
  height: auto;
  display: block;
  transform: translateY(6px);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

/* =========================
   BIG LEFT LOGO WITH BOX
========================= */

.custom-navbar {
  background: rgba(7, 12, 30, 0.92);
  backdrop-filter: blur(8px);
  min-height: 82px;
  z-index: 9999;
}

.navbar-wrap {
  position: relative;
}

.logo-overlap-wrap {
  position: absolute;
  left: 12px;
  top: -6px;
  z-index: 10010;
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Visible background only behind logo */
.logo-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 16, 35, 0.88);   /* box background */
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 10px 14px 12px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 18px rgba(228, 49, 62, 0.16);
  backdrop-filter: blur(8px);
  transition: all 0.35s ease;
}

/* Logo image */
.logo-overlap {
  width: 180px;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
  transition: all 0.35s ease;
}

/* Hover effect */
.logo-overlap-wrap:hover .logo-box {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 22px rgba(228, 49, 62, 0.22);
}

.logo-overlap-wrap:hover .logo-overlap {
  transform: scale(1.02);
}

/* Give menu space from logo */
.custom-navbar .navbar-collapse {
  margin-left: 235px;
}

/* Hero spacing */
.hero {
  padding-top: 130px;
}

/* Tablet */
@media (max-width: 1199.98px) {
  .logo-overlap {
    width: 160px;
  }

  .logo-box {
    padding: 9px 12px 10px;
  }

  .custom-navbar .navbar-collapse {
    margin-left: 210px;
  }
}

/* Mobile */
@media (max-width: 991.98px) {
  .logo-overlap-wrap {
    position: relative;
    left: 0;
    top: 0;
  }

  .logo-box {
    padding: 8px 10px;
    border-radius: 14px;
  }

  .logo-overlap {
    width: 115px;
  }

  .custom-navbar .navbar-collapse {
    margin-left: 0;
    margin-top: 14px;
    background: rgba(7, 12, 30, 0.96);
    padding: 14px;
    border-radius: 12px;
  }

  .hero {
    padding-top: 110px;
  }
}

/* Lead popup mobile fix */
.lead-popup-dialog{
  max-width: 920px;
}

#leadPopup .popup-modal{
  max-height: calc(100vh - 24px);
  border-radius: 18px;
}

#leadPopup .modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#leadPopup .popup-body{
  padding: 20px;
}

#leadPopup .popup-input,
#leadPopup .popup-radio{
  min-height: 48px;
}

#leadPopup .form-label{
  margin-bottom: 6px;
  font-size: .95rem;
}

#leadPopup .popup-submit{
  width: 100%;
}

/* Tablet */
@media (max-width: 991.98px){
  .lead-popup-dialog{
    max-width: calc(100% - 24px);
    margin: 12px auto;
  }

  #leadPopup .popup-body{
    padding: 16px;
  }
}

/* Mobile */
@media (max-width: 767.98px){
  .lead-popup-dialog{
    max-width: calc(100% - 16px);
    margin: 8px auto;
  }

  #leadPopup .popup-modal{
    border-radius: 14px;
    max-height: calc(100vh - 16px);
  }

  #leadPopup .popup-head{
    padding: 12px 14px;
  }

  #leadPopup .popup-head .modal-title{
    font-size: 1rem;
    line-height: 1.35;
    padding-right: 10px;
  }

  #leadPopup .popup-body{
    padding: 14px;
  }

  #leadPopup .row{
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }

  /* make everything full width on mobile */
  #leadPopup [class*="col-md-4"],
  #leadPopup [class*="col-md-6"],
  #leadPopup [class*="col-lg-"]{
    width: 100%;
    flex: 0 0 100%;
  }

  #leadPopup .popup-input{
    height: 46px;
    font-size: 16px; /* avoids zoom on iPhone */
  }

  #leadPopup select.popup-input{
    padding-right: 38px;
  }

  #leadPopup .popup-radio{
    min-height: 46px;
    height: auto;
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  #leadPopup .popup-submit{
    padding: 12px 18px;
    min-height: 46px;
  }

  #leadPopup .small{
    font-size: .82rem;
  }
}

/* Lead popup position fix for mobile */
.lead-popup-dialog{
  max-width: 920px;
}

/* desktop/tablet normal look */
#leadPopup .popup-modal{
  max-height: calc(100vh - 40px);
  overflow: hidden;
}

#leadPopup .modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* mobile fix */
@media (max-width: 767.98px){
  /* navbar height space */
  #leadPopup .modal-dialog{
    margin: 128px 8px 8px 8px;
    max-width: calc(100% - 16px);
    align-items: flex-start;
  }

  #leadPopup .popup-modal{
    max-height: calc(100vh - 104px);
    border-radius: 14px;
  }

  #leadPopup .popup-head{
    padding: 12px 14px;
  }

  #leadPopup .popup-body{
    padding: 14px;
  }

  #leadPopup .popup-head .modal-title{
    font-size: 1rem;
    line-height: 1.35;
  }

  /* force full width fields */
  #leadPopup .col-md-4,
  #leadPopup .col-md-6,
  #leadPopup .col-lg-4,
  #leadPopup .col-lg-6{
    width: 100%;
    flex: 0 0 100%;
  }

  #leadPopup .popup-input{
    height: 46px;
    font-size: 16px;
  }

  #leadPopup .popup-radio{
    height: auto;
    min-height: 46px;
    padding: 10px 12px;
    flex-wrap: wrap;
  }

  #leadPopup .popup-submit{
    width: 100%;
  }
}	

.cart-box{
  background: rgba(255,255,255,.04);
  padding: 14px;
  border-radius: 12px;
}

.cart-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  padding:8px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
}

.cart-item-name{
  font-weight:700;
}

.cart-item-price{
  color:var(--primary);
  font-weight:700;
}

/* =============================
   CART SYSTEM (NEW)
============================= */

.cart-box{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px;
}

.cart-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  margin-bottom:10px;
}

.cart-item-name{
  font-weight:800;
  color:#fff;
}

.cart-item-price{
  color:var(--primary);
  font-weight:800;
}

.remove-cart-btn{
  font-size:.8rem;
  padding:4px 10px;
}

/* Mobile */
@media (max-width: 767.98px){
  .cart-box{
    padding:14px;
  }

  .cart-item{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =============================
   DESKTOP POPUP FIX - ALL MODALS
============================= */

/* shared modal sizing for lead popup, cart popup, car modal */
.lead-popup-dialog{
  max-width: 1040px;
  width: calc(100% - 48px);
  margin: 96px auto 24px;
}

#leadPopup .popup-modal,
#cartEnquiryModal .popup-modal,
#carModal .modal-content{
  width: 100%;
  max-height: calc(100vh - 120px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

/* body should scroll inside popup, not break layout */
#leadPopup .modal-body,
#cartEnquiryModal .modal-body,
#carModal .modal-body{
  overflow-y: auto;
  max-height: calc(100vh - 190px);
  -webkit-overflow-scrolling: touch;
}

/* better desktop form spacing */
#leadPopup .popup-body,
#cartEnquiryModal .popup-body{
  padding: 22px;
}

#leadPopup .popup-head,
#cartEnquiryModal .popup-head{
  padding: 16px 22px;
}

#leadPopup .popup-head .modal-title,
#cartEnquiryModal .popup-head .modal-title{
  font-size: 1.2rem;
  line-height: 1.3;
}

/* selected car list should not look cramped */
#cartSelectedCars{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
  max-height: 120px;
  overflow-y: auto;
}

/* textarea in popup should feel balanced */
#cartEnquiryModal textarea.popup-input,
#leadPopup textarea.popup-input{
  min-height: 110px;
  height: auto;
  padding-top: 14px;
}

/* better modal backdrop layering with navbar */
.modal{
  z-index: 20000;
}
.modal-backdrop{
  z-index: 19990;
}
.custom-navbar{
  z-index: 1030;
}

/* large desktop */
@media (min-width: 1400px){
  .lead-popup-dialog{
    max-width: 1100px;
  }
}

/* laptop / tablet landscape */
@media (max-width: 1199.98px){
  .lead-popup-dialog{
    max-width: 960px;
    width: calc(100% - 32px);
    margin: 90px auto 20px;
  }

  #leadPopup .popup-modal,
  #cartEnquiryModal .popup-modal,
  #carModal .modal-content{
    max-height: calc(100vh - 110px);
  }
}

/* tablet */
@media (max-width: 991.98px){
  .lead-popup-dialog{
    max-width: 92%;
    margin: 88px auto 16px;
  }

  #leadPopup .popup-body,
  #cartEnquiryModal .popup-body{
    padding: 18px;
  }
}

/* mobile */
@media (max-width: 767.98px){
  .lead-popup-dialog{
    max-width: calc(100% - 16px);
    width: calc(100% - 16px);
    margin: 128px auto 8px;
  }

  #leadPopup .popup-modal,
  #cartEnquiryModal .popup-modal,
  #carModal .modal-content{
    max-height: calc(100vh - 136px);
    border-radius: 14px;
  }

  #leadPopup .modal-body,
  #cartEnquiryModal .modal-body,
  #carModal .modal-body{
    max-height: calc(100vh - 210px);
  }

  #leadPopup .popup-body,
  #cartEnquiryModal .popup-body{
    padding: 14px;
  }

  #leadPopup .popup-head,
  #cartEnquiryModal .popup-head{
    padding: 12px 14px;
  }

  #leadPopup .popup-head .modal-title,
  #cartEnquiryModal .popup-head .modal-title{
    font-size: 1rem;
  }

  #leadPopup .col-md-4,
  #leadPopup .col-md-6,
  #leadPopup .col-lg-4,
  #leadPopup .col-lg-6,
  #cartEnquiryModal .col-md-4,
  #cartEnquiryModal .col-md-6,
  #cartEnquiryModal .col-lg-4,
  #cartEnquiryModal .col-lg-6,
  #carModal .col-md-4,
  #carModal .col-md-6,
  #carModal .col-lg-4,
  #carModal .col-lg-6{
    width: 100%;
    flex: 0 0 100%;
  }
}