/* KSR FASTag — Portfolio Stylesheet */
:root {
  --bg:#F8FAFC; --bg2:#F1F5F9; --glass:rgba(255,255,255,0.7);
  --border:rgba(226,232,240,0.8); --ink:#0F172A; --ink2:#475569; --ink3:#94A3B8;
  --accent-start:#FADAC0; --accent-end:#F9CAA8;
  --peach:#FADAC0; --peach-soft:#FEF0E4; --peach-deep:#A6672E;
  --mint:#10B981; --mint-soft:#D1FAE5; --mint-deep:#065F46;
  --sky:#3B82F6; --sky-soft:#DBEAFE; --sky-deep:#1E40AF;
  --rose:#EC4899; --rose-soft:#FCE7F3; --rose-deep:#9D174D;
  --lav:#8B5CF6; --lav-soft:#EDE9FE; --lav-deep:#5B21B6;
  --gold:#F59E0B; --gold-soft:#FEF3C7; --gold-deep:#92400E;
  --sp:cubic-bezier(0.16,1,0.3,1); --ease:cubic-bezier(0.4,0,0.2,1);
  --transition-duration:0.3s;
}

/* Dark theme overrides */
[data-theme="dark"] {
  --bg:#090A0F;
  --bg2:#131520;
  --ink:#F1F5F9;
  --ink2:#94A3B8;
  --ink3:#64748B;
  --glass:rgba(15,17,26,0.7);
  --border:rgba(255,255,255,0.08);
}

/* Smooth transitions */
html[data-theme] {
  transition: background-color var(--transition-duration) var(--ease), color var(--transition-duration) var(--ease);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;}
html{scroll-behavior:smooth;}
body{
background:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:
    background-color 0.4s ease,
    color 0.4s ease;
}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;}
button{font-family:inherit;cursor:pointer;} a{color:inherit;text-decoration:none;}
::selection{background:var(--peach-soft);color:var(--peach-deep);}

/* 
  3D CANVAS LAYER STRATEGY:
  - The canvas sits fixed on top of the page (z-index:10) with pointer-events:none
    so clicks pass through to HTML content beneath.
  - Hero text & buttons use z-index:11 to appear in front of the canvas.
  - Nav and floating UI are z-index:100+ so they are always on top.
  - Background sections that should NOT show the 3D car use z-index:12 to cover it.
*/
#canvas-wrap{
  position:relative;
  width:100%; height:100%;
  pointer-events:none; z-index:10; overflow:hidden;
}
#canvas-wrap canvas{width:100%;height:100%;display:block;}

/* Root — no stacking context, just flow */
#root{position:relative; z-index:0;}

/* Gradient ambient blobs — decorative, sit beneath hero text */
body::before{
  content:''; position:fixed; border-radius:50%;
  pointer-events:none; z-index:9; filter:blur(110px); opacity:0.25;
  transition:opacity 0.4s ease, background 0.4s ease;
  width:480px;height:480px;top:-100px;left:-100px;
  background:radial-gradient(circle,var(--accent-start),var(--accent-end));
}
/*
  body::after is defined later in this file (merged road-line rule).
  It combines the decorative blob + the subtle moving road texture.
*/
body::after{
  content:'';
  position:fixed;
  inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 80px,
      rgba(250,218,192,.04) 80px 82px
    );
  z-index:-1;
  pointer-events:none;
}

/* In dark mode — tone down the peach blob */
[data-theme="dark"] body::before{
  background:radial-gradient(circle,rgba(250,218,192,0.25),transparent) !important;
  opacity:0.10 !important;
}

/* Hero section — canvas shows through here (canvas is z-index:10, hero text is z-index:11) */
.hero {
  background:transparent;
  position:relative;
  overflow:hidden; /* clip canvas */
}

/* Theme toggle — pill button inside navbar flow */
.theme-btn {
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  color:#FFFFFF;
  border-radius:999px;
  padding:7px 16px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  transition:background var(--transition-duration) var(--ease),
             color var(--transition-duration) var(--ease),
             border-color var(--transition-duration) var(--ease),
             transform 0.25s var(--sp);
}
.theme-btn:hover {
  background:rgba(255,255,255,0.15);
  border-color:var(--accent-start);
  transform:translateY(-1px);
}
/* ADD FROM HERE */

[data-theme="light"] .theme-btn{
  background:#ffffff;
  color:#111827;
  border:1px solid #dbe2ea;
}

[data-theme="light"] .theme-btn:hover{
  background:#f1f5f9;
}

[data-theme="dark"] .theme-btn{
  background:rgba(255,255,255,0.08);
  color:#ffffff;
}

/* ADD TILL HERE */

.hero>.wrap, .hero .hero-eyebrow, .hero h1, .hero .hero-lede, .hero .hero-actions {
  position:relative; z-index:11;
}

/* Sections BELOW the hero — solid background covers the canvas */
section:not(.hero), footer {
  position:relative; z-index:12;
  background:var(--bg);
}
.bg2 { background:var(--bg2) !important; }

.wrap{max-width:1100px;margin:0 auto;padding:0 28px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
@media(max-width:780px){.grid3,.grid2{grid-template-columns:1fr;}}

/* HERO — transparent so 3D canvas shows through */
.nav{
  position:sticky;top:0;z-index:100;
  transition:background .35s,box-shadow .35s,backdrop-filter .35s;
}
.nav.solid{
  background:var(--glass);
  backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--border);

}
[data-theme="dark"] .nav.solid{
  background:rgba(9, 10, 15, 0.9);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-icon{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent-start),var(--accent-end));
  display:flex;align-items:center;justify-content:center;
  color:var(--peach-deep);font-weight:800;font-size:18px;
  box-shadow:0 4px 14px rgba(166,103,46,0.2);
  transition:transform .3s var(--sp);
}
.brand-icon:hover{transform:scale(1.08);}
.brand-icon img{width:100%;height:100%;object-fit:contain;}
.brand-title{
  font-family:'Syncopate',sans-serif;
  font-size:15px;font-weight:700;letter-spacing:1px;
  background:linear-gradient(135deg,var(--accent-start) 0%,var(--accent-end) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-transform:uppercase;
}
.brand-sub{font-size:10px;color:rgba(255,255,255,0.4);font-weight:500;letter-spacing:1.2px;margin-top:-2px;}
.nav-links{display:flex;align-items:center;gap:24px;}
.nav-link{
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,0.7);
  background:none;border:none;padding-bottom:2px;
  position:relative;letter-spacing:0.2px;
  transition:color .2s;
}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:-1px;
  width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  transition:width .25s var(--ease);
}
.nav-link:hover{color:#FFFFFF;}
.nav-link:hover::after{width:100%;}
@media(max-width:680px){.nav-link{display:none;}}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;border-radius:50px;border:none;
  font-size:14px;font-weight:600;letter-spacing:0.3px;
  transition:transform 0.25s var(--sp),box-shadow 0.25s var(--sp),background-color 0.25s var(--ease),border-color 0.25s var(--ease),color 0.25s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(166,103,46,0.18);}
.btn:active{transform:translateY(0) scale(0.97);}

.btn-primary{
  background:linear-gradient(135deg,var(--peach-deep),#C47B38);
  color:#FFFFFF;box-shadow:0 4px 16px rgba(166,103,46,0.25);
}
.btn-primary:hover{box-shadow:0 8px 24px rgba(166,103,46,0.4);}

.btn-ghost{
  background:rgba(255,255,255,0.08);color:#FFFFFF;
  border:1px solid rgba(255,255,255,0.15);backdrop-filter:blur(10px);
}
.btn-ghost:hover{background:rgba(255,255,255,0.18);border-color:var(--peach);}

.btn-peach{
  background:linear-gradient(135deg,var(--peach-deep),#C47B38);
  color:#FFFFFF;box-shadow:0 4px 16px rgba(166,103,46,0.25);
}
.btn-peach:hover{box-shadow:0 8px 24px rgba(166,103,46,0.4);}

.btn-outline{
  background:transparent;color:#FFFFFF;
  border:1.5px solid rgba(255,255,255,0.3);
}
.btn-outline:hover{background:rgba(255,255,255,0.1);border-color:var(--accent-start);}
.btn-sm{padding:8px 20px;font-size:13px;}

/* HERO — transparent viewport for 3D car */
.hero{padding:36px 0 20px; background:transparent; min-height:100vh; position:relative;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(250,218,192,0.15);color:var(--peach);
  font-size:12px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;
  padding:6px 16px;border-radius:999px;margin-bottom:22px;
  opacity:0;animation:fadeUp .7s var(--sp) .1s forwards;
}
.hero-dot{
  width:7px;height:7px;border-radius:50%;background:var(--peach);
  animation:breathe 2.5s ease-in-out infinite;
}
.hero h1{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(36px,5.5vw,68px);
  font-weight:800;line-height:1.04;letter-spacing:-2px;
  max-width:740px;margin-bottom:18px;
  color:#FFFFFF;
  opacity:0;animation:fadeUp .8s var(--sp) .22s forwards;
}
.hero h1 .ksr-name{
  font-family:'Syncopate',sans-serif;
  font-size:clamp(38px,5.8vw,72px);
  letter-spacing:-1px;
  background:linear-gradient(135deg,var(--peach) 0%,var(--peach-deep) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-lede{
  font-size:17px;line-height:1.7;color:rgba(255,255,255,0.7);
  max-width:520px;margin-bottom:30px;
  opacity:0;animation:fadeUp .8s var(--sp) .34s forwards;
}
.hero-actions{
  display:flex;gap:14px;flex-wrap:wrap;margin-bottom:50px;
  opacity:0;animation:fadeUp .8s var(--sp) .46s forwards;
}
/* Spacer for the 3D car floating area — extra room for full car visibility */
.hero-car-space{height:420px;position:relative;}


/* STATS STRIP */
.stats-strip{
  display:flex;
  background:var(--glass);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;

  width:82%;
  max-width:1050px;
  margin:120px auto 0;
}
.stat-item{
  flex:1;padding:26px 20px;text-align:center;
  border-right:1px solid var(--border);
  transition:background .3s;
}
.stat-item:last-child{border-right:none;}
.stat-item:hover{background:rgba(255,255,255,0.55);}
.stat-num{
  font-family:'Syncopate',sans-serif;
  font-size:20px;font-weight:700;letter-spacing:0px;
  background:linear-gradient(135deg,var(--peach-deep),var(--ink));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-lbl{font-size:12.5px;color:var(--ink2);margin-top:5px;font-weight:500;}

/* SECTION TAGS */
.stag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;margin-bottom:12px;
}
.t-mint{background:var(--mint-soft);color:var(--mint-deep);}
.t-sky {background:var(--sky-soft); color:var(--sky-deep);}
.t-peach{background:var(--peach-soft);color:var(--peach-deep);}
.t-lav{background:var(--lav-soft);color:#4A3E8A;}
.t-gold{background:var(--gold-soft);color:#7A5500;}

.section-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(26px,3.2vw,38px);
  font-weight:800;letter-spacing:-1px;margin-bottom:10px;
}
.section-sub{font-size:15.5px;color:var(--ink2);line-height:1.65;max-width:560px;margin-bottom:36px;}
section{padding:72px 0;position:relative;z-index:12;background:var(--bg);transition:background var(--transition-duration) var(--ease);}
.bg2{background:var(--bg2) !important;}

/* SERVICE CARDS */
.svc-card{
  background:var(--card-bg);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:20px;
  padding:28px 24px;position:relative;overflow:hidden;
  transition:transform .3s var(--sp),box-shadow .3s var(--sp);
}
.svc-card::before{
  content:'';position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,transparent 60%);
  pointer-events:none;
}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(166,103,46,0.08);}
.svc-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:16px;font-weight:800;letter-spacing:-0.5px;
  transition:transform .25s var(--sp);
}
.svc-card:hover .svc-icon{transform:scale(1.08);}
.svc-card h3{font-size:16.5px;font-weight:700;margin-bottom:8px;letter-spacing:-0.3px;}
.svc-card p{font-size:14px;line-height:1.65;color:var(--ink2);}
.ic-sky{background:var(--sky-soft);color:var(--sky-deep);}
.ic-mint{background:var(--mint-soft);color:var(--mint-deep);}
.ic-peach{background:var(--peach-soft);color:var(--peach-deep);}
.ic-lav{background:var(--lav-soft);color:#4A3E8A;}
.ic-gold{background:var(--gold-soft);color:#7A5500;}
.ic-rose{background:var(--rose-soft);color:#8C3D50;}

/* PHOTO SLOTS */
.photo-slot{
  border-radius:20px;border:2px dashed var(--border);
  background:var(--glass);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  color:var(--ink3);transition:all .3s var(--sp);
  aspect-ratio:4/3;cursor:pointer;
  

}
.why-grid .photo-slot{
  max-width:550px;
  height:450px;
  margin:0 auto;
}
.photo-slot.square{aspect-ratio:1/1;}
.slot-plus{font-size:32px;opacity:0.45;transition:transform .25s var(--sp);}
.slot-lbl{font-size:12.5px;text-align:center;padding:0 16px;font-weight:600;letter-spacing:0.2px;}
.photo-slot:hover{
  border-color:var(--peach-deep);background:var(--peach-soft);color:var(--peach-deep);
  transform:translateY(-4px);box-shadow:0 12px 24px rgba(166,103,46,0.12);
}
.photo-slot:hover .slot-plus{transform:scale(1.15);}

/* Why Us photo right column — fill the column height */
#why .grid2 > .reveal > .photo-slot,
#why .grid2 > .photo-slot {
  min-height: 480px;
  aspect-ratio: auto;
}

/* WHY CARD */
.why-card{
  background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:20px;padding:28px;margin-top:16px;
}
.why-list{display:flex;flex-direction:column;gap:14px;}
.why-item{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--ink2);line-height:1.55;}
.why-check{
  flex-shrink:0;width:24px;height:24px;border-radius:8px;
  background:var(--mint-soft);color:var(--mint-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;margin-top:1px;
}


/* TRUST STRIP */
.trust-strip{
  background:linear-gradient(135deg,var(--mint-soft),var(--sky-soft));
  border-radius:24px;padding:36px 32px;
  display:flex;align-items:center;gap:0;
  border:1px solid var(--border);overflow:hidden;
}
.trust-item{
  flex:1;display:flex;flex-direction:column;
  align-items:center;gap:5px;
  border-right:1px solid var(--border);padding:0 12px;
}
.trust-item:last-child{border-right:none;}
.trust-num{
  font-family:'Syncopate',sans-serif;
  font-size:22px;font-weight:700;color:var(--mint-deep);letter-spacing:-0.5px;
}
.trust-lbl{font-size:12.5px;color:var(--ink2);text-align:center;font-weight:500;}

/* CTA CARD */
.cta-card{
  background:linear-gradient(135deg,var(--ink),#3A2E28);
  color:var(--bg);border-radius:28px;padding:52px 44px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:28px;position:relative;overflow:hidden;
}
.cta-card::before{
  content:'';position:absolute;top:-50%;right:-10%;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,169,122,0.22),transparent 65%);
  pointer-events:none;
}
.cta-card::after{
  content:'';position:absolute;bottom:-40%;left:-5%;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(133,191,166,0.18),transparent 65%);
  pointer-events:none;
}
.cta-h{font-size:clamp(24px,3vw,32px);font-weight:800;margin-bottom:10px;letter-spacing:-0.8px;}
.cta-p{font-size:15px;color:rgba(247,243,238,0.7);max-width:400px;line-height:1.6;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:1;}

/* FOOTER */
.footer{border-top:1px solid var(--border);padding:28px 0;margin-top:0;position:relative;z-index:12;background:var(--bg);transition:background var(--transition-duration) var(--ease);}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink2);}
.footer-brand{font-family:'Syncopate',sans-serif;font-weight:700;font-size:13px;color:var(--ink);letter-spacing:1px;}
.footer-sub{font-size:12px;color:var(--ink3);margin-top:3px;font-weight:500;}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s var(--sp),transform .75s var(--sp);}
.reveal.in{opacity:1;transform:translateY(0);}

/* KEYFRAMES */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.5);opacity:0.5;}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}}

/* ══════════════════════════════════════════
   MULTI-PAGE SHARED ADDITIONS
══════════════════════════════════════════ */

/* Brand as anchor */
.brand-link{text-decoration:none;color:inherit;}

/* Nav-link works as <a> too */
.nav-link{text-decoration:none;display:inline-block;}
.nav-link.active{color:var(--ink);}
.nav-link.active::after{width:100%;}

/* Nav-end: controls group */
.nav-end{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* Hamburger button */
.hamburger{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:38px;height:38px;border:1px solid var(--border);
  border-radius:10px;background:var(--glass);cursor:pointer;padding:0;flex-shrink:0;
}
.hamburger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s var(--sp);}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.is-open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile slide-down menu */
.mobile-menu{
  display:none;flex-direction:column;padding:0 20px 16px;gap:0;
  border-top:1px solid var(--border);
  background:var(--glass);backdrop-filter:blur(18px);
  animation:fadeDown .25s var(--sp);
}
.mobile-menu.open{display:flex;}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.mobile-link{
  display:block;padding:13px 4px;font-size:15px;font-weight:600;
  color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--border);
  transition:color .2s;
}
.mobile-link:last-of-type{border-bottom:none;}
.mobile-link:hover,.mobile-link.active{color:var(--peach-deep);}
.mobile-menu .btn{margin-top:12px;justify-content:center;}

/* ── PAGE BANNER (inner pages) ── */
.page-banner{
  padding:88px 0 60px;border-bottom:1px solid var(--border);
  position:relative;z-index:12;background:var(--bg);
  overflow:hidden;
}
.page-banner::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--peach-soft) 0%,transparent 48%,var(--sky-soft) 100%);
  opacity:.38;pointer-events:none;
}
[data-theme="dark"] .page-banner::before{opacity:.04;}
.page-banner .wrap{position:relative;}
.breadcrumb{font-size:12px;color:var(--ink3);font-weight:500;letter-spacing:.3px;margin-bottom:14px;}
.breadcrumb a{color:var(--ink2);text-decoration:none;transition:color .2s;}
.breadcrumb a:hover{color:var(--ink);}
.breadcrumb span{margin:0 6px;color:var(--ink3);}
.page-banner h1{
  font-size:clamp(30px,4.5vw,54px);font-weight:800;letter-spacing:-1.5px;
  line-height:1.08;margin-bottom:14px;
}
.page-banner h1 .accent{
  background:linear-gradient(135deg,var(--peach),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.page-banner .sub{font-size:16px;color:var(--ink2);max-width:520px;line-height:1.65;}

/* ── PROCESS STEPS ── */
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;}
.process-step{
  display:flex;flex-direction:column;gap:10px;
  padding:28px 22px;background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:20px;
  transition:transform .35s var(--sp),box-shadow .35s var(--sp);
}
.process-step:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(43,37,32,.1);}
.step-num{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--peach-deep),#C47B38);
  color:#fff;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 12px rgba(166,103,46,0.3);
}
.step-title{font-size:16px;font-weight:700;margin-top:4px;}
.step-desc{font-size:14px;color:var(--ink2);line-height:1.62;}
@media(max-width:780px){.process-steps{grid-template-columns:1fr;}}

/* ── TEAM GRID ── */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px;}
.team-card{
  background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:20px;
  padding:28px 20px;text-align:center;
  transition:transform .35s var(--sp),box-shadow .35s var(--sp);
}
.team-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(43,37,32,.1);}
.team-avatar{
  width:68px;height:68px;border-radius:50%;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--peach-soft),#FDE8D0);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:800;color:var(--peach-deep);
  border:2px solid var(--border);
}
.team-name{font-size:15px;font-weight:700;margin-bottom:4px;}
.team-role{font-size:12.5px;color:var(--ink3);font-weight:500;}
@media(max-width:780px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.team-grid{grid-template-columns:1fr;}}

/* ── CONTACT CARDS ── */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px;}
.contact-card{
  background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:20px;
  padding:28px 24px;display:flex;flex-direction:column;gap:8px;
  transition:transform .35s var(--sp);
}
.contact-card:hover{transform:translateY(-4px);}
.contact-icon{font-size:26px;margin-bottom:4px;}
.contact-card-label{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--ink3);text-transform:uppercase;}
.contact-card-value{font-size:15px;font-weight:600;color:var(--ink);}
.contact-card a{
  color:var(--peach-deep);font-weight:700;font-size:14px;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  transition:color .2s;
}
.contact-card a:hover{color:var(--peach);}
@media(max-width:780px){.contact-cards{grid-template-columns:1fr;}}

/* ── ENQUIRY FORM ── */
.enquiry-form{
  background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:24px;padding:40px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group.full{grid-column:1 / -1;}
.form-label{font-size:12px;font-weight:700;color:var(--ink2);letter-spacing:.5px;text-transform:uppercase;}
.form-input,.form-textarea{
  padding:13px 16px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:14px;
  outline:none;transition:border-color .2s,box-shadow .2s;width:100%;
}
.form-textarea{resize:vertical;min-height:110px;}
.form-input:focus,.form-textarea:focus{border-color:var(--peach-deep);box-shadow:0 0 0 3px rgba(166,103,46,0.12);}
.form-input::placeholder,.form-textarea::placeholder{color:var(--ink3);}
@media(max-width:600px){.form-grid{grid-template-columns:1fr;}.enquiry-form{padding:24px 18px;}}

/* ── GALLERY FILTER ── */
.gallery-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.filter-btn{
  padding:8px 20px;border-radius:999px;border:1.5px solid var(--border);
  background:var(--glass);color:var(--ink2);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .2s var(--sp);
}
.filter-btn:hover,.filter-btn.active{
  background:linear-gradient(135deg,var(--peach-deep),#C47B38);
  color:#ffffff;border-color:transparent;
  box-shadow:0 4px 14px rgba(166,103,46,0.3);
}

/* ── ABOUT STORY ── */
.about-story{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
}
.story-body{font-size:15.5px;line-height:1.75;color:var(--ink2);}
.story-body p{margin-bottom:18px;}
.story-body p:last-child{margin-bottom:0;}
.story-highlights{display:flex;flex-direction:column;gap:14px;}
.highlight-item{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:16px;padding:18px;
}
.hi-icon{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.hi-title{font-size:14.5px;font-weight:700;margin-bottom:3px;}
.hi-desc{font-size:13px;color:var(--ink2);line-height:1.55;}
@media(max-width:780px){.about-story{grid-template-columns:1fr;gap:28px;}}

/* ── SHOW HAMBURGER on mobile ── */
@media(max-width:600px){
  .hamburger{display:flex;}
  .nav-end .theme-btn{padding:6px 10px;font-size:11px;}
}

/* ═══════════════════════════════════════════════════
   TABLET  — ≤ 900px
   ═══════════════════════════════════════════════════ */
@media(max-width:900px){

  /* Wrap padding */
  .wrap{padding:0 20px;}

  /* Nav — tighten spacing */
  .nav-inner{gap:10px;padding:14px 0;}
  .nav-links{gap:14px;}
  .nav-link{font-size:13px;}
  .btn-sm{padding:8px 16px;font-size:12px;}

  /* Hide "Get a Quote" CTA in nav on tablet to prevent overflow */
  .nav-links .btn{display:none;}

  /* Hero */
  .hero{padding:28px 0 16px;min-height:auto;}
  .hero h1{font-size:clamp(32px,5vw,54px);letter-spacing:-1.5px;max-width:100%;}
  .hero h1 .ksr-name{font-size:clamp(34px,5.4vw,58px);}
  [data-theme="light"] .hero h1{
  color:#0F172A !important;
}
  .hero-lede{font-size:16px;max-width:100%;}
  .hero-actions{margin-bottom:32px;}

  /* Car canvas — reduce height slightly on tablet */
  .hero-car-space{height:360px;}

  /* Grids */
  .grid3{grid-template-columns:repeat(2,1fr);gap:16px;}
  .grid2{grid-template-columns:repeat(2,1fr);gap:20px;}

  /* Stats — 2×2 grid on tablet */
  .stats-strip{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    border-radius:16px;
  }
  .stat-item{
    border-right:none;
    border-bottom:1px solid var(--border);
    padding:20px 16px;
  }
  .stat-item:nth-child(odd){border-right:1px solid var(--border);}
  .stat-item:nth-child(3),.stat-item:nth-child(4){border-bottom:none;}

  /* Sections */
  section{padding:52px 0;}

  /* Trust strip — allow wrap */
  .trust-strip{
    flex-wrap:wrap;
    padding:28px 24px;
    gap:0;
    border-radius:20px;
  }
  .trust-item{
    flex:0 0 50%;
    border-right:none;
    border-bottom:1px solid var(--border);
    padding:16px 12px;
  }
  .trust-item:nth-child(odd){border-right:1px solid var(--border);}
  .trust-item:nth-child(3),.trust-item:nth-child(4){border-bottom:none;}

  /* CTA card */
  .cta-card{padding:40px 32px;gap:24px;}

  /* Footer */
  .footer-inner{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* ═══════════════════════════════════════════════════
   PHONE  — ≤ 600px
   ═══════════════════════════════════════════════════ */
@media(max-width:600px){

  /* Wrap */
  .wrap{padding:0 16px;}

  /* Nav — minimal: brand + theme/sound only */
  .nav-inner{padding:12px 0;gap:8px;}
  .nav-links{display:none;}        /* hide all nav links on phone */
  .theme-btn{
    padding:6px 12px;
    font-size:12px;
    gap:4px;
  }
  /* Keep sound + theme toggles side by side, no label text overflow */
  .nav-inner > div:last-child{flex-shrink:0;}

  /* Hero — stack nicely, centre text on phone */
  .hero{padding:20px 0 0;min-height:auto;}
  .hero-eyebrow{font-size:11px;padding:5px 14px;margin-bottom:16px;}
  .hero h1{
    font-size:clamp(30px,8vw,44px);
    letter-spacing:-1px;
    line-height:1.08;
    margin-bottom:14px;
    max-width:100%;
    text-align:center;
  }
  .hero h1 .ksr-name{
    font-size:clamp(32px,8.5vw,46px);
    display:block;
    text-align:center;
  }
  .hero-eyebrow{
    display:flex;
    justify-content:center;
    width:100%;
  }
  .hero-lede{
    font-size:14.5px;
    line-height:1.65;
    margin-bottom:22px;
    text-align:center;
    max-width:100%;
  }
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-bottom:24px;
  }
  .hero-actions .btn{
    justify-content:center;
    padding:13px 20px;
    font-size:14px;
  }

  /* Car canvas — centred, taller so car isn't cropped */
  .hero-car-space{
    height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    overflow:visible;
  }
  #canvas-wrap{
    width:100%;
    height:300px;
  }

  /* Grids — single column */
  .grid3{grid-template-columns:1fr;gap:14px;}
  .grid2{grid-template-columns:1fr;gap:16px;}

  /* Sections */
  section{padding:40px 0;}

  /* Stats — single column stack */
  .stats-strip{
    display:flex;
    flex-direction:column;
    border-radius:16px;
    margin-top:28px;
  }
  .stat-item{
    border-right:none !important;
    border-bottom:1px solid var(--border);
    padding:18px 20px;
    text-align:left;
    display:flex;
    align-items:center;
    gap:14px;
  }
  .stat-item:last-child{border-bottom:none;}
  .stat-num{font-size:17px;}
  .stat-lbl{font-size:12px;margin-top:0;}

  /* Section headings */
  .section-title{font-size:clamp(22px,6vw,30px);letter-spacing:-0.5px;}
  .section-sub{font-size:14px;margin-bottom:24px;}

  /* Service cards */
  .svc-card{padding:22px 18px;}
  .svc-icon{width:42px;height:42px;font-size:18px;margin-bottom:12px;}
  .svc-card h3{font-size:15px;}
  .svc-card p{font-size:13.5px;}

  /* Trust strip — full stack */
  .trust-strip{
    flex-direction:column;
    align-items:stretch;
    padding:20px 20px;
    gap:0;
    border-radius:16px;
  }
  .trust-item{
    flex:unset;
    border-right:none !important;
    border-bottom:1px solid var(--border);
    padding:14px 0;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .trust-item:last-child{border-bottom:none;}
  .trust-num{font-size:18px;}
  .trust-lbl{text-align:right;font-size:12px;}

  /* CTA card */
  .cta-card{
    padding:32px 22px;
    border-radius:20px;
    flex-direction:column;
    text-align:center;
  }
  .cta-h{font-size:22px;letter-spacing:-0.5px;}
  .cta-p{font-size:14px;max-width:100%;}
  .cta-actions{
    width:100%;
    flex-direction:column;
    gap:10px;
  }
  .cta-actions .btn{
    justify-content:center;
    width:100%;
    text-align:center;
  }
  .cta-actions a{width:100%;}

  /* Why card */
  .why-card{padding:20px;}
  .why-item{font-size:13.5px;gap:10px;}

  /* Photo slots — tighter on phone */
  .photo-slot{border-radius:14px;}
  .slot-plus{font-size:26px;}
  .slot-lbl{font-size:12px;}

  /* Footer */
  .footer{padding:20px 0;}
  .footer-inner{flex-direction:column;align-items:center;text-align:center;gap:6px;}
  .footer-brand{font-size:12px;}
  .footer-sub{font-size:11px;}

  /* Buttons globally */
  .btn{padding:12px 20px;font-size:13.5px;border-radius:12px;}
  .btn-sm{padding:7px 14px;font-size:12px;}

  /* Reduce blob decoration on small screens */
  body::before{width:280px;height:280px;top:-60px;left:-80px;}
}
/* ===== ABOUT SECTION ===== */

.about-section{
  padding:40px 0 80px;;
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:48px;
  align-items:start;
}

.about-visual{
  position:relative;
  min-height:560px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(
    135deg,
    rgba(250,218,192,.08),
    rgba(249,202,168,.08)
  );
  border:1px solid var(--border);
}

.about-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

#about-canvas-wrap{
  width:100%;
  height:560px;
}

.about-content{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.about-content .section-title{
  font-size:58px;
  line-height:1.1;
}

.about-content .section-sub{
  font-size:18px;
  line-height:1.9;
  color:var(--ink3);
}

.about-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:10px;
}

.stat-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:28px;
  text-align:center;
  backdrop-filter:blur(20px);
}

.stat-card h3{
  font-size:36px;
  margin:0 0 10px;
  background:linear-gradient(
    90deg,
    var(--peach-deep),
    #C47B38
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.stat-card span{
  color:var(--ink3);
}

/* Mobile */

@media(max-width:992px){

  .about-grid{
    grid-template-columns:1fr;
    gap:32px;
  }

  .about-visual{
    min-height:320px;
  }

  .about-content .section-title{
    font-size:40px;
  }

  #about-canvas-wrap{
    height:320px;
  }
}
.about-img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.about-tag{
  display:inline-block;
  padding:8px 18px;
  border-radius:999px;
  border:1px solid rgba(166,103,46,.4);
  color:var(--peach-deep);
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:20px;
  width:fit-content;
}
.about-visual .photo-slot{
  width:100%;
  height:100%;
  min-height:560px;
  aspect-ratio:auto !important;
}
.stag{
  display:inline-block;
  width:fit-content;
  padding:8px 18px;
  border-radius:999px;
}
.why-grid .photo-slot{
   min-height:450px;
}
  .stat-card{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:28px;
  text-align:center;
  backdrop-filter:blur(20px);
}

/* Animated glow */
.stat-card::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(250,218,192,.12),
    transparent
  );
  transform:rotate(25deg);
  animation:cardGlow 5s linear infinite;
}

@keyframes cardGlow{
  0%{
    transform:translateX(-100%) rotate(25deg);
  }
  100%{
    transform:translateX(100%) rotate(25deg);
  }
}

.stat-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 40px rgba(166,103,46,.12);
}
.contact-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;

  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  padding:50px;
  backdrop-filter:blur(20px);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  color:#fff;
}

.contact-details{
  margin-top:25px;
}

.contact-details p{
  margin-bottom:12px;
  color:var(--ink3);
}

@media(max-width:992px){
  .contact-box{
    grid-template-columns:1fr;
  }
}
/* body::after (road texture) is defined above near body::before — merged rule */
.contact-form input,
.contact-form textarea{
  transition:all .3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--peach-deep);
  box-shadow:0 0 20px rgba(166,103,46,.18);
  transform:translateY(-2px);
}
.contact-form button{
  position:relative;
  overflow:hidden;
  transition:.4s;
}

.contact-form button:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 0 30px rgba(166,103,46,.35);
}
.contact-section{
  animation:contactFade 1s ease;
}

@keyframes contactFade{
  from{
    opacity:0;
    transform:translateY(50px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* floatCard animation removed — continuous float was distracting on contact-info */
.contact-section{
  position:relative;
}
/* floatBox animation removed — continuous float was distracting on why-card */
.why-card li{
  transition:.3s ease;
}

.why-card li:hover{
  transform:translateX(12px);
  color:var(--peach-deep);
}
.photo-slot.square{
  position:relative;
  overflow:hidden;
}
/*Stats Counter Hover*/
.stat-item{
  transition:.4s ease;
}

.stat-item:hover{
  transform:translateY(-12px);
  box-shadow:0 15px 40px rgba(166,103,46,.12);
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(60px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* =========================
   FOOTER
========================= */

.footer{
  margin-top:80px;
  border-top:1px solid rgba(255,255,255,.08);
  background:#090b12;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  padding:50px 0 30px;
  flex-wrap:wrap;
}

.footer-brand{
  font-size:28px;
  font-weight:800;
  color:#fff;
  letter-spacing:1px;
}

.footer-sub{
  color:#9aa4b2;
  margin-top:10px;
  line-height:1.7;
}

.footer-contact{
  color:#cfd6e4;
  margin-top:8px;
  font-size:14px;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-links a{
  color:#9aa4b2;
  text-decoration:none;
  transition:.3s;
}

.footer-links a:hover{
  color:var(--peach-deep);
  transform:translateX(5px);
}

.footer-right{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-badge{
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:#dfe7f3;
  transition:.3s;
}

.footer-badge:hover{
  transform:translateY(-3px);
  border-color:var(--peach-deep);
  box-shadow:0 0 20px rgba(166,103,46,.22);
}

.footer-bottom{
  text-align:center;
  padding:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#8b95a7;
  font-size:14px;
}

/* Mobile */

@media (max-width:768px){

  .footer-inner{
    flex-direction:column;
    gap:30px;
  }

  .footer-brand{
    font-size:22px;
  }

  .footer-links{
    width:100%;
  }

  .footer-right{
    width:100%;
  }

  .footer-badge{
    text-align:center;
  }
}
/* smooth*/
.footer{
  
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width:768px){

  .wrap{
    width:92%;
    margin:auto;
  }

  /* Navbar */

  .nav{
    padding:12px 0;
  }

  .nav-links{
    display:none;
  }

  .nav-actions{
    gap:8px;
  }

  .btn,
  .sound-btn,
  .theme-btn{
    padding:10px 14px;
    font-size:13px;
  }

  /* Hero */

  .hero{
    grid-template-columns:1fr;
    gap:30px;
    text-align:center;
  }

  .hero h1{
    font-size:42px;
    line-height:1.1;
  }

  .hero p{
    font-size:16px;
  }

  .hero-actions{
    justify-content:center;
    flex-wrap:wrap;
  }

  /* Stats */

  .stats{
    grid-template-columns:1fr 1fr;
  }

  /* Service Cards */

  .service-grid{
    grid-template-columns:1fr;
  }

  /* About */

  .about-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .about-visual{
    min-height:280px;
  }

  /* Contact */

  .contact-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .contact-form{
    width:100%;
  }

  .contact-form input,
  .contact-form textarea{
    width:100%;
  }

  /* Footer */

  .footer-inner{
    flex-direction:column;
    text-align:center;
    align-items:center;
  }

  .footer-links{
    align-items:center;
  }

  .footer-right{
    width:100%;
  }

  .footer-badge{
    width:100%;
  }
}

/* Extra Small Mobile */

@media (max-width:480px){

  .hero h1{
    font-size:34px;
  }

  .section-title{
    font-size:30px;
  }

  .stats{
    grid-template-columns:1fr;
  }

  .btn{
    width:100%;
  }

  .hero-actions{
    flex-direction:column;
  }

  .contact-card{
    padding:25px 20px;
  }

  .footer-brand{
    font-size:20px;
  }
}
[data-theme="light"] .hero .hero-title-secondary{
  color:#334155 !important;
}
[data-theme="light"] .nav{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid #CBD5E1;
}

[data-theme="light"] .nav-link{
  color:#334155 !important;
  font-weight:600;
}

[data-theme="light"] .brand-title{
  color:#0F172A !important;
}

[data-theme="light"] .brand-sub{
  color:#64748B !important;
}
/* LIGHT THEME HERO TEXT FIX */
[data-theme="light"] .hero h1{
  color:#0F172A !important;
  text-shadow:none !important;
}

[data-theme="light"] .hero-lede,
[data-theme="light"] .hero p{
  color:#475569 !important;
}

[data-theme="light"] .hero-eyebrow{
  color:var(--peach-deep) !important;
  background:var(--peach-soft) !important;
}
/* Light Theme Contact Card Border */
[data-theme="light"] .contact-card{
  background:#ffffff !important;
  border:1px solid #dbe2ea !important;
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
}

/* Inputs */
[data-theme="light"] .contact-card input,
[data-theme="light"] .contact-card textarea{
  background:#f8fafc !important;
  border:1px solid #dbe2ea !important;
  color:#0f172a !important;
}

/* Input Focus */
[data-theme="light"] .contact-card input:focus,
[data-theme="light"] .contact-card textarea:focus{
  border-color:#3b82f6 !important;
  box-shadow:0 0 0 4px rgba(59,130,246,0.12);
}
 [data-theme="light"] input,
[data-theme="light"] textarea{
  color:#0F172A !important;
  background:#FFFFFF !important;
  border:1px solid #CBD5E1 !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder{
  color:#64748B !important;
}
[data-theme="light"] .contact-box,
[data-theme="light"] .contact-card,
[data-theme="light"] .contact-form{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
  border-radius:24px;
}

/* OUR TIE-UPS FLEX GRID */
.partners-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.partner-item-wrap {
  flex: 0 0 calc(20% - 13px);
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .partner-item-wrap {
    flex: 0 0 calc(25% - 12px);
  }
}
@media (max-width: 768px) {
  .partner-item-wrap {
    flex: 0 0 calc(33.333% - 11px);
  }
}
@media (max-width: 480px) {
  .partner-item-wrap {
    flex: 0 0 calc(50% - 8px);
  }
}
@media (max-width: 768px) {
  /* Flex direction-ஐ column-ஆக மாற்றுங்கள் */
  .hero-container,
  .services-grid,
  .navbar {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  /* Padding மற்றும் Text Size-ஐ மொபைலுக்கு ஏற்ப குறைக்கவும் */
  h1 {
    font-size: 28px !important;
  }

  body {
    overflow-x: hidden; /* Side scrolling தவிர்க்க */
  }
}
/* 1. மொபைல் திரையை விட்டு வெளியே போகாமல் தடுக்க */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 2. Hero Section மற்றும் Heading Text-ஐ மொபைலுக்கு ஏற்ப சுருக்க */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 26px !important; /* பெரிய எழுத்துகளை மொபைலுக்கு ஏற்ப சிறியதாக்க */
    white-space: normal !important; /* வரிகள் உடையாமல் இருக்க */
    word-break: break-word !important;
  }

  /* 3. Hero / Main Container அளவை 100% ஆக மாற்ற */
  .hero-section, 
  .hero-container, 
  header, 
  section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
}
@media screen and (max-width: 768px) {
  /* Cards சுற்றியிருக்கும் Container-ஐ 1-column ஆக மாற்ற */
  .stats-container, 
  .grid-container, 
  .about-cards {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    align-items: center !important;
  }

  /* கார்டுகளின் பிக்ஸட் அகலத்தை மாற்றி 100% ஆக்க */
  .stat-card, 
  .card, 
  .info-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
  }


  .stat-card h2, 
  .stat-card h3,
  .card-title {
    font-size: 20px !important;
    word-wrap: break-word !important;
  }
}
/* Netlify Badge-ஐ மறைக்க */
.netlify-badge, 
[class*="netlify"] {
  display: none !important;
}
 /* Floating Icon */
.wa-widget-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #00e676;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 230, 118, 0.4);
  z-index: 9999;
}

/* Popup Container Dark Theme */
.wa-popup-box {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 25px;
  width: 360px;
  background: #111418;
  border: 1px solid #22272e;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  font-family: sans-serif;
  color: #fff;
}

.wa-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #22272e;
}

.wa-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wa-avatar {
  width: 40px;
  height: 40px;
  background: #00e676;
  color: #111;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-user-info h4 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.wa-user-info p {
  margin: 2px 0 0 0;
  font-size: 11px;
  color: #00e676;
}

.online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #00e676;
  border-radius: 50%;
}

.wa-close-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 22px;
  cursor: pointer;
}

.wa-popup-body {
  padding: 16px;
}

.wa-notice {
  background: #191e24;
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  color: #aaa;
  margin-bottom: 15px;
  line-height: 1.4;
}

.wa-popup-body label {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  color: #888;
  margin-bottom: 6px;
}

.wa-popup-body input,
.wa-popup-body select,
.wa-popup-body textarea {
  width: 100%;
  background: #191e24;
  border: 1px solid #2a313a;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 12px;
  box-sizing: border-box;
  font-size: 13px;
}

.wa-submit-btn {
  width: 100%;
  background: #00e676;
  color: #111;
  font-weight: bold;
  border: none;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.5px;
}

@media (max-width: 480px) {
  .wa-popup-box {
    width: 90%;
    right: 5%;
  }
}
/* Input, Select & Textarea - Dark Background Setup */
.wa-popup-body input,
.wa-popup-body textarea {
  background-color: #1a1e24 !important; /* வெள்ளைக்கு பதில் டார்க் பேக்கிரவுண்ட் */
  color: #ffffff !important;            /* டைப் பண்ணும் எழுத்துக்கள் வெள்ளை நிறத்தில் தெரிய */
  border: 1px solid #2d353e !important;   /* மெலிதான பார்டர் */
  outline: none !important;
}

/* Placeholder Text Color (டைப் பண்றதுக்கு முன்னாடி தெரியுற Text) */
.wa-popup-body input::placeholder,
.wa-popup-body textarea::placeholder {
  color: #6c788a !important;
}

/* Click / Focus பண்ணும்போது பச்சை நிற பார்டர் வர */
.wa-popup-body input:focus,
.wa-popup-body select:focus,
.wa-popup-body textarea:focus {
  border-color: #00e676 !important;
  box-shadow: 0 0 5px rgba(0, 230, 118, 0.3) !important;
}
/* Buy FASTag Button Final Style */
.buy-fastag-btn {
  background-color: #00e676 !important; /* பிரகாசமான வாட்ஸ்அப் பச்சை */
  color: #0d1117 !important;            /* கருப்பு நிற எழுத்துக்கள் */
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 8px !important;
  vertical-align: middle !important;
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.4) !important;
  transition: all 0.3s ease !important;
}

.buy-fastag-btn:hover {
  background-color: #00c853 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 18px rgba(0, 230, 118, 0.6) !important;
}
/* Mobile Header Clean Responsive Layout */
@media (max-width: 768px) {
  /* Navbar Container layout fix */
  header nav, 
  header .nav-wrap,
  header > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Logo size adjustment for mobile */
  .brand-title {
    font-size: 14px !important;
  }
  .brand-sub {
    font-size: 8px !important;
  }

  /* Buy FASTag Button Mobile Visible Fix */
  .buy-fastag-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 10px !important;
    padding: 6px 10px !important;
    margin: 0 4px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }

  /* Dark Theme Button Fix */
  .theme-btn {
    display: inline-flex !important;
    font-size: 10px !important;
    padding: 5px 8px !important;
  }

  /* Popup placement on Mobile Screens */
  .wa-popup-box {
    width: 92% !important;
    left: 4% !important;
    right: 4% !important;
    bottom: 75px !important;
  }
}/* Mobile Responsive Fix for Buy FASTag Button */
@media (max-width: 768px) {
  /* Logo-வை மொபைலுக்கு ஏத்த மாதிரி சின்னதாக்க */
  .brand-title {
    font-size: 13px !important;
  }
  .brand-sub {
    display: none !important; /* Subtitle-ஐ மட்டும் மொபைலில் மறைக்க */
  }

  /* Get a Quote பட்டனை மொபைலில் மறைத்து Buy FASTag-ஐ மட்டும் காட்ட */
  .btn-peach.btn-sm {
    display: none !important;
  }

  /* Buy FASTag பட்டன் மொபைலில் கட்டாயம் தெரிய */
  .buy-fastag-btn {
    display: inline-flex !important;
    visibility: visible !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    border-radius: 12px !important;
  }

  /* Popup மொபைல் ஸ்கிரீனின் நடுவில் வர */
  .wa-popup-box {
    width: 90% !important;
    left: 5% !important;
    right: 5% !important;
    bottom: 80px !important;
  }
}