*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f6f7fb;color:#111}
.container{max-width:1100px;margin:0 auto;padding:0 18px}
a{color:inherit;text-decoration:none}
.muted{color:#666}
.w-100{width:100%}

.header{position:sticky;top:0;z-index:10;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{width:44px;height:44px;border-radius:12px;object-fit:cover}
.brand__name{font-weight:900;letter-spacing:.5px}
.brand__tag{font-size:12px;color:#666}

.nav{display:flex;align-items:center;gap:14px}
.nav a{font-weight:800;font-size:14px;color:#222}
.nav a:hover{color:#1b73e8}
.nav__cta{background:#1b73e8;color:#fff;padding:10px 12px;border-radius:12px}
.nav__cta:hover{background:#155ec0;color:#fff}

.menu-btn{display:none;border:0;background:#111;color:#fff;padding:10px 12px;border-radius:12px;font-weight:900}

.hero{padding:28px 0}
.hero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:stretch}
.pill{display:inline-block;background:#eaf2ff;color:#1b73e8;font-weight:900;padding:6px 10px;border-radius:999px;font-size:12px}
.hero h1{font-size:34px;margin:10px 0 10px}
.accent{color:#1b73e8}
.hero p{color:#555;line-height:1.7;margin:0 0 16px}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:#fff;border-radius:16px;padding:12px;box-shadow:0 8px 25px rgba(0,0,0,.06)}
.stat__num{font-weight:900}
.stat__label{font-size:12px;color:#666;margin-top:4px}

.section{padding:26px 0}
.section.alt{background:#fff}
.section__title{margin:0 0 6px;font-size:24px}
.section__subtitle{margin:0 0 16px;color:#666}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

.card{background:#fff;border-radius:18px;padding:18px;border:1px solid #eef0f5}
.card--shadow{box-shadow:0 10px 30px rgba(0,0,0,.08);border:0}
.divider{height:1px;background:#eef0f5;margin:12px 0}

.contact-row{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.contact-row span{font-size:18px}

.btn{display:inline-block;padding:12px 14px;border-radius:14px;font-weight:900;font-size:14px}
.btn--primary{background:#1b73e8;color:#fff}
.btn--primary:hover{background:#155ec0}
.btn--outline{border:2px solid #1b73e8;color:#1b73e8;background:transparent}
.btn--outline:hover{background:#eaf2ff}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step{background:#f6f7fb;border-radius:18px;padding:16px;border:1px solid #eef0f5;display:flex;gap:12px}
.step__num{width:34px;height:34px;border-radius:12px;background:#1b73e8;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}
.step h4{margin:0 0 6px}
.step p{margin:0;color:#555;line-height:1.5;font-size:14px}

.cta{margin-top:14px;background:#111;color:#fff;border-radius:18px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cta h3{margin:0 0 4px}
.cta .muted{color:#cfcfcf}

.link{display:block;padding:10px 12px;border-radius:14px;background:#f6f7fb;margin:8px 0;font-weight:800}
.link:hover{background:#eaf2ff}

.footer{background:#111;color:#fff;padding:18px 0}
.footer__inner{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.footer__small{color:#bdbdbd;font-size:12px}

.whatsapp-float{
  position:fixed;right:18px;bottom:18px;z-index:99;
  background:#25D366;color:#fff;padding:12px 16px;border-radius:999px;
  font-weight:900;box-shadow:0 8px 22px rgba(0,0,0,.2)
}

input, textarea{
  width:100%;
  padding:12px;
  border:1px solid #ddd;
  border-radius:14px;
  font-size:14px;
  outline:none;
  margin:8px 0 14px;
}
textarea{resize:vertical}

/* Listing page */
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eaf2ff;color:#1b73e8;font-weight:900;font-size:12px}
.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.car-card{background:#fff;border-radius:18px;border:1px solid #eef0f5;overflow:hidden}
.car-card__img{width:100%;height:160px;object-fit:cover;background:#f0f2f6}
.car-card__body{padding:14px}
.price{font-size:18px;font-weight:900;margin:6px 0}
.kv{display:flex;gap:10px;flex-wrap:wrap;color:#555;font-size:13px}
.kv span{background:#f6f7fb;padding:6px 10px;border-radius:999px;border:1px solid #eef0f5}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
select{padding:10px 12px;border-radius:14px;border:1px solid #ddd;font-weight:700}
.search{flex:1;min-width:220px}
.map-wrap{border-radius:18px;overflow:hidden;border:1px solid #eef0f5}
iframe{border:0}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .listing-grid{grid-template-columns:1fr}
  .nav{display:none;position:absolute;left:18px;right:18px;top:70px;background:#fff;border:1px solid #eef0f5;border-radius:18px;padding:12px;flex-direction:column;align-items:stretch}
  .nav a{padding:10px 12px;border-radius:14px;background:#f6f7fb}
  .menu-btn{display:inline-block}
}


/* Watermark Background (Car Mart Logo) */
body{
  position: relative;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image: url("assets/logo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 420px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
header, main, footer{
  position: relative;
  z-index: 1;
}



/* ================================
   CAR MART - BLUE 5 SPORTY THEME
   Primary Blue: #0A3D62 (Petrol Blue)
   Accent: #FF8A00
   ================================ */

:root{
  --cm-bg:#0A3D62;          /* BLUE 5 */
  --cm-surface:#083454;     /* darker section */
  --cm-surface-2:#0D4A73;   /* card bg */
  --cm-border:rgba(255,255,255,.12);
  --cm-text:#F5F7FA;
  --cm-muted:rgba(245,247,250,.78);
  --cm-primary:#FF8A00;
  --cm-primary-2:#E67600;
  --cm-blue:#123B7A;
  --cm-blue-2:#0B2D60;
  --cm-shadow:0 12px 28px rgba(0,0,0,.35);
}

html, body{background:var(--cm-bg) !important;color:var(--cm-text) !important;}
a{color:var(--cm-text) !important;}
p, li, small, span{color:var(--cm-muted) !important;}
h1,h2,h3,h4,h5,h6{color:var(--cm-text) !important;}

header, .header, .navbar, nav{
  background:rgba(8,52,84,.92) !important;
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--cm-border) !important;
}

.card, .box, .panel, .feature, .listing-card, .car-card, .service-card, .form-card{
  background:linear-gradient(180deg,var(--cm-surface),var(--cm-surface-2)) !important;
  border:1px solid var(--cm-border) !important;
  box-shadow:var(--cm-shadow) !important;
  border-radius:16px !important;
}

input, select, textarea{
  background:rgba(255,255,255,.08) !important;
  border:1px solid var(--cm-border) !important;
  color:var(--cm-text) !important;
  border-radius:12px !important;
}

button, .btn, a.btn, .button, input[type="submit"]{
  border-radius:12px !important;
  font-weight:800 !important;
  letter-spacing:.4px !important;
  text-transform:uppercase !important;
  padding:12px 18px !important;
  transition:.25s ease-in-out !important;
  border:1px solid transparent !important;
  cursor:pointer;
}

.btn-primary, .primary, .cta, .button-primary, .btn--primary{
  background:var(--cm-primary) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(255,138,0,.28) !important;
}
.btn-primary:hover, .primary:hover, .cta:hover, .button-primary:hover, .btn--primary:hover{
  background:var(--cm-primary-2) !important;
  transform:translateY(-2px);
}

.btn-secondary, .secondary, .button-secondary, .btn--secondary{
  background:rgba(255,255,255,.10) !important;
  color:var(--cm-text) !important;
  border:1px solid var(--cm-border) !important;
}
.btn-secondary:hover, .secondary:hover, .button-secondary:hover, .btn--secondary:hover{
  border-color:rgba(255,138,0,.55) !important;
  transform:translateY(-2px);
}

footer, .footer{
  background:rgba(5,20,35,.92) !important;
  border-top:1px solid var(--cm-border) !important;
}



/* ================================
   CAR MART - VISIBILITY FIXES
   Make white-on-white items visible
   ================================ */

a, .btn, button { color:#ffffff; }

/* Small pill / tag buttons */
.pill, .tag, .badge, .chip, .mini-btn, .small-btn{
  background:#FF8A00 !important;
  color:#ffffff !important;
  border:none !important;
}

/* Ensure button-like elements are visible */
button, .btn, a.btn, input[type="submit"]{
  background:#FF8A00 !important;
  color:#ffffff !important;
  border:none !important;
}
button:hover, .btn:hover, a.btn:hover, input[type="submit"]:hover{
  background:#E67600 !important;
}

/* How it works / step cards (if any are still white) */
.how-it-works .step,
.step-card,
.work-card,
.work-box{
  background:#132F57 !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,0.12) !important;
}



/* ================================
   CAR MART - KEEP ALL SECTIONS DARK
   Fix remaining light/white sections
   ================================ */

.section-light, .bg-light, .light, .white-section, .white-bg{
  background: transparent !important;
}

/* How it works row cards (force dark) */
.how-it-works, #how-it-works, .howitworks{
  background: transparent !important;
}
.how-it-works .card, .how-it-works .step, .how-it-works .step-card{
  background: #132F57 !important;
  color:#ffffff !important;
}

/* Top info strip (if exists) */
.top-strip, .info-strip, .hero-strip{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color:#ffffff !important;
}

/* CTA bar "Want valuation for your vehicle?" */
.cta-bar, .valuation-cta, .cta-section, .cta-banner{
  background: linear-gradient(90deg, #FF8A00, #E67600) !important;
  color:#ffffff !important;
  border: none !important;
}
.cta-bar *, .valuation-cta *, .cta-section *, .cta-banner *{
  color:#ffffff !important;
}

/* Ensure service cards stay dark */
.services .card, .service-card, .services-card{
  background:#132F57 !important;
  color:#ffffff !important;
}


/* FIX: Show 'Car Mart India – One Stop Vehicle Solution' */
.top-strip h1,.top-strip h2,.top-strip h3,.info-strip h1,.info-strip h2,.info-strip h3,.hero-strip h1,.hero-strip h2,.hero-strip h3{color:#ffffff !important;opacity:1 !important;visibility:visible !important;}
.top-strip p,.info-strip p,.hero-strip p{color:rgba(255,255,255,0.85) !important;opacity:1 !important;}



/* FIX (specific): top headline strip text visibility */
.hero, .hero *{
  opacity: 1 !important;
}
.hero p, .hero small, .hero .subtitle, .hero .tagline{
  color: rgba(255,255,255,0.90) !important;
}
.hero h1, .hero h2, .hero h3{
  color: #ffffff !important;
}



/* FINAL FIX: Ensure top intro text is visible */
.top-intro, .intro, .intro-strip, .hero-intro{
  color:#ffffff !important;
}
.top-intro *, .intro *, .intro-strip *, .hero-intro *{
  color:rgba(255,255,255,0.90) !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* If intro is inside a light box */
.top-intro-box, .intro-box{
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
}


/* FIX: Intro section is inline-styled with white background; force dark */
section[style*="background:#fff"], section[style*="background: #fff"], section[style*="background:#ffffff"], section[style*="border:1px solid #eee"]{background: rgba(255,255,255,0.06) !important;border: 1px solid rgba(255,255,255,0.12) !important;}
section[style*="background:#fff"] h2, section[style*="background:#fff"] p{color:#ffffff !important;}
section[style*="background:#fff"] p{color:rgba(255,255,255,0.88) !important;}



/* ================================
   ORANGE INTRO STRIP
   "Carmart India – One Stop Vehicle Solution"
   ================================ */
section[style*="background:#fff"],
section[style*="background: #fff"],
section[style*="background:#ffffff"],
section[style*="border:1px solid #eee"]{
  background: linear-gradient(90deg, #FF8A00, #E67600) !important;
  border: none !important;
}

section[style*="background:#fff"] h2,
section[style*="background:#fff"] p{
  color:#ffffff !important;
}



/* ================================
   FIX: HOW IT WORKS SECTION (steps)
   ================================ */

/* Section background */
#how-it-works, .how-it-works, .howitworks{
  background: transparent !important;
}

/* Step cards (the 3 white boxes) */
#how-it-works .step,
.how-it-works .step,
.how-it-works .card,
.step-card,
.work-card,
.work-box{
  background: #132F57 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}

/* Step number circle */
#how-it-works .step-number,
.how-it-works .step-number,
.step-number{
  background: #FF8A00 !important;
  color: #ffffff !important;
}

/* Step title + text */
#how-it-works h3,
.how-it-works h3,
#how-it-works p,
.how-it-works p{
  color: rgba(255,255,255,0.90) !important;
}



/* FIX: How it works section (id=process) */
#process{background:transparent !important;}
#process .steps{gap:16px;}
#process .step{
  background:#132F57 !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  border-radius:16px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.25) !important;
  color:#ffffff !important;
}
#process .step h4{color:#ffffff !important;}
#process .step p{color:rgba(255,255,255,0.88) !important;}
#process .step__num{
  background:#FF8A00 !important;
  color:#ffffff !important;
}



/* ================================
   HEADER LOGO + TAGLINE IMPROVEMENT
   ================================ */

.brand__logo img, .logo img{
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
}

/* Brand name */
.brand__name{
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Tagline */
.brand__tag{
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  opacity: 0.85 !important;
}



/* FIX: Header logo size (img has class brand__logo) */
.brand__logo{
  width: 72px !important;
  height: 72px !important;
}

/* Better tagline styling */
.brand__tag{
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  opacity: 0.9 !important;
}



/* Spare Parts Grid */
.parts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-top:14px;
}
.part-card{
  background:#132F57;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  text-align:center;
  padding-bottom:12px;
}
.part-card img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}
.part-card h4{
  margin:10px 0 0;
  color:#ffffff;
  font-weight:800;
}

/* Spare Parts card images */
.product-image{
  width:100%;
  height:160px;
  background:rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}



/* FIX: Ensure spare parts images are visible */
.product-card .product-image img{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}
.product-card .product-image{
  background:transparent !important;
}

/* Spare parts inline images */
.card .img{
  height:140px;
  background:rgba(0,0,0,0.05);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.card .img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}



/* FIX: Spare parts card image overlay issue */
.card .img{
  background: transparent !important;
}
.card .img img{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}



/* HARD FIX: remove any overlay/pseudo element over spare part images */
.card .img{position:relative; overflow:hidden;}
.card .img::before,
.card .img::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
.card .img img{
  position:relative !important;
  z-index:2 !important;
  opacity:1 !important;
}

/* FINAL: Spare part images as background (always visible) */
.card .img{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Follow Us Social Icons */
.follow-us{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.follow-title{font-weight:800;color:#ffffff}
.follow-icons{display:flex;gap:10px}
.social-icon{
  width:38px;height:38px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);
  text-decoration:none;
}
.social-icon:hover{border-color:rgba(255,138,0,0.6);transform:translateY(-1px)}
.social-icon .icon{font-weight:900;color:#ffffff;font-size:16px;line-height:1}

/* Social Follow (Header + Footer) */
.social-follow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.social-text{font-weight:800;color:#fff;font-size:13px;opacity:.95}
.social-btn{
  width:36px;height:36px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  text-decoration:none;
}
.social-btn svg{width:18px;height:18px;fill:#fff}
.social-btn:hover{border-color:rgba(255,138,0,0.7);transform:translateY(-1px)}
.header-social{margin-right:10px}



/* --- Social icon size fix (added) --- */
.social-icon{
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icon .icon,
.social-icon i{
  font-size: 12px !important;
  line-height: 1;
}