:root{--kvb-navy:#0a1030;--kvb-teal:#0fb9b1;--kvb-cyan:#22d3ee;--kvb-gold:#e8b93b;--kvb-paper:#f6f9ff;--kvb-shadow-1:0 1px 2px rgba(10,16,48,.08),0 2px 6px rgba(10,16,48,.06);--kvb-shadow-2:0 6px 14px rgba(10,16,48,.10),0 14px 30px rgba(10,16,48,.08);--kvb-shadow-3:0 18px 40px rgba(10,16,48,.18),0 40px 80px rgba(10,16,48,.14);--kvb-radius-m:16px;--kvb-radius-l:22px;--kvb-ease:cubic-bezier(.2,.7,.2,1);--kvb-dur:.42s}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;background:radial-gradient(1200px 600px at 85% -10%,rgba(34,211,238,.10),transparent 60%),radial-gradient(900px 500px at -10% 20%,rgba(15,185,177,.10),transparent 60%),var(--kvb-paper)}
.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,#fff,#f3f7ff);box-shadow:var(--kvb-shadow-1);border-bottom:1px solid rgba(10,16,48,.06);transition:box-shadow var(--kvb-dur) var(--kvb-ease)}
.topbar.is-scrolled{box-shadow:var(--kvb-shadow-2)}
.topbar .brand img{filter:drop-shadow(0 4px 10px rgba(10,16,48,.14));border-radius:10px;background:#fff;padding:4px}
.btn{position:relative;border-radius:10px;transition:transform .18s var(--kvb-ease),box-shadow .18s var(--kvb-ease)}
.btn.primary{background:linear-gradient(180deg,#14d0c6,#0fb9b1 55%,#0b9a94);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.12),0 8px 18px rgba(15,185,177,.35);color:#04211f;font-weight:600}
.btn.secondary{background:linear-gradient(180deg,#fff,#eaf1ff);box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(10,16,48,.10);border:1px solid rgba(10,16,48,.08)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:3px solid var(--kvb-gold);outline-offset:3px}
.hero{position:relative;overflow:clip;background:radial-gradient(900px 500px at 80% 0%,rgba(34,211,238,.22),transparent 60%),radial-gradient(700px 500px at 10% 100%,rgba(232,185,59,.14),transparent 60%),linear-gradient(135deg,#0a1030,#131a4a 55%,#0d2d4a);color:#fff;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 180deg at 50% 50%,transparent 0deg,rgba(34,211,238,.10) 90deg,transparent 180deg,rgba(232,185,59,.08) 270deg,transparent 360deg);animation:kvb-sweep 24s linear infinite;z-index:-1;pointer-events:none;opacity:.6}
@keyframes kvb-sweep{to{transform:rotate(360deg)}}
.hero h1{text-shadow:0 2px 0 rgba(0,0,0,.25),0 18px 40px rgba(0,0,0,.35);letter-spacing:-.5px}
.hero h1 span{background:linear-gradient(180deg,#ffe9a8,#e8b93b 60%,#c8951f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:rgba(255,255,255,.86)}
.hero .trust{color:rgba(255,255,255,.72)}
.hero-card{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-radius:var(--kvb-radius-l);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--kvb-shadow-3);transform:perspective(1200px) rotateY(-4deg) rotateX(2deg);transition:transform var(--kvb-dur) var(--kvb-ease)}
.hero-card:hover{transform:perspective(1200px) rotateY(0) rotateX(0)}
.hero-card .logo-card{background:#fff;border-radius:var(--kvb-radius-m);box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 -2px 0 rgba(0,0,0,.06)}
.hero-card .quick a{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:999px;color:#fff;transition:transform .18s var(--kvb-ease),background .18s var(--kvb-ease)}
.hero-card .quick a:hover{background:rgba(34,211,238,.25);transform:translateY(-2px)}
.service-card{position:relative;background:linear-gradient(180deg,#fff,#f4f8ff);border:1px solid rgba(10,16,48,.06);border-radius:var(--kvb-radius-m);box-shadow:var(--kvb-shadow-1);transition:transform var(--kvb-dur) var(--kvb-ease),box-shadow var(--kvb-dur) var(--kvb-ease),border-color var(--kvb-dur) var(--kvb-ease);overflow:hidden}
.service-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.6),transparent);opacity:0;transition:opacity var(--kvb-dur) var(--kvb-ease)}
.service-card:hover{transform:perspective(900px) translateY(-6px) rotateX(1.2deg);box-shadow:var(--kvb-shadow-3);border-color:rgba(15,185,177,.22)}
.service-card:hover::before{opacity:1}
.service-card .price{display:inline-block;background:linear-gradient(180deg,#fff7dd,#ffefb8);color:#7a5a00;border:1px solid rgba(232,185,59,.35);border-radius:8px;padding:6px 10px;font-style:normal;box-shadow:inset 0 1px 0 #fff}
.step,.chips span,.locations a,.tool-grid > div{background:linear-gradient(180deg,#fff,#f1f6ff);border:1px solid rgba(10,16,48,.06);border-radius:var(--kvb-radius-m);box-shadow:var(--kvb-shadow-1);transition:transform .2s var(--kvb-ease),box-shadow .2s var(--kvb-ease)}
.step:hover,.locations a:hover,.tool-grid > div:hover{transform:translateY(-4px);box-shadow:var(--kvb-shadow-2)}
.step b{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,#14d0c6,#0b9a94);color:#04211f;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px rgba(15,185,177,.35)}
.section-head h2{letter-spacing:-.4px;text-shadow:0 1px 0 rgba(255,255,255,.6),0 8px 24px rgba(10,16,48,.06)}
.faq-list details{background:linear-gradient(180deg,#fff,#f3f7ff);border:1px solid rgba(10,16,48,.07);border-radius:var(--kvb-radius-m);box-shadow:var(--kvb-shadow-1);transition:box-shadow .25s var(--kvb-ease)}
.faq-list details[open]{box-shadow:var(--kvb-shadow-2)}
.faq-list summary{cursor:pointer;font-weight:600}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";float:right;font-weight:700;color:var(--kvb-teal);transition:transform .25s var(--kvb-ease)}
.faq-list details[open] summary::after{content:"\2013";transform:rotate(180deg)}
.contact-box input:focus,.contact-box select:focus,.contact-box textarea:focus{outline:none;border-color:var(--kvb-teal);box-shadow:0 0 0 4px rgba(15,185,177,.18)}
#kvb-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--kvb-teal),var(--kvb-cyan),var(--kvb-gold));z-index:9999;pointer-events:none;box-shadow:0 0 12px rgba(34,211,238,.6);transition:width .08s linear}
.kvb-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--kvb-ease),transform .6s var(--kvb-ease)}
.kvb-reveal.is-in{opacity:1;transform:none}
#mainNav.is-open{background:linear-gradient(180deg,#fff,#eef4ff);border-top:1px solid rgba(10,16,48,.06);box-shadow:var(--kvb-shadow-2);border-radius:0 0 var(--kvb-radius-m) var(--kvb-radius-m)}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}.hero::before{display:none}.hero-card,.service-card,.step,.locations a,.tool-grid > div{transform:none !important}.kvb-reveal{opacity:1 !important;transform:none !important}}
@media (hover:none){.hero-card,.service-card:hover,.step:hover,.locations a:hover{transform:none}.btn:hover{transform:none}}
@media (max-width:520px){.topbar .brand img{width:48px;height:40px}.hero-card{transform:none}}
html,body{overflow-x:hidden;max-width:100%}
img,svg,video{max-width:100%;height:auto}



/* =========================================================
   Hero contrast fix — premium, readable, brand-matched
   ========================================================= */

/* Deepen the hero so both white and gold text sit on rich navy */
.hero{
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(232,185,59,.10), transparent 60%),
    linear-gradient(135deg, #060a20 0%, #0d1338 45%, #062a38 100%) !important;
}

/* "Your Business." — clean, bright, premium white */
.hero h1{
  color: #ffffff !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.45),
    0 16px 40px rgba(0,0,0,.35) !important;
  letter-spacing: -.6px;
  font-weight: 700;
}

/* "Our Responsibility." — LUMINOUS premium gold, not dark amber */
.hero h1 span{
  background: linear-gradient(180deg, #fff6cf 0%, #ffd97a 40%, #f0b73a 75%, #ffd97a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.35))
    drop-shadow(0 0 18px rgba(240,183,58,.45))
    drop-shadow(0 0 40px rgba(240,183,58,.25));
}

/* Tamil line-height + tiny size tweak for glyph density */
:lang(ta) .hero h1{ line-height: 1.18; letter-spacing: -.3px; }

/* Lead paragraph — solid, readable, no fade */
.hero .lead,
.hero p.lead{
  color: #eef4ff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Trust line — softer but still clear */
.hero .trust,
.hero p.trust{
  color: #c8d2ef !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Eyebrow badge above heading — glowing teal */
.hero .eyebrow,
.hero .eyebrow *{
  color: #7ef0ea !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.5),
    0 0 12px rgba(34,211,238,.35);
  letter-spacing: .5px;
  font-weight: 600;
}

/* Secondary button on dark hero — solid, contrasted */
.hero .btn.secondary{
  background: linear-gradient(180deg, #ffffff 0%, #e6eeff 100%) !important;
  color: #0a1030 !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 16px rgba(0,0,0,.35) !important;
}

/* Primary hero button — teal glow to match brand */
.hero .btn.primary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.15),
    0 8px 24px rgba(15,185,177,.45),
    0 2px 6px rgba(0,0,0,.25) !important;
}


/* =========================================================
   Batch 2 — Premium colored service tiles
   ========================================================= */

/* Container */
.tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:22px;
}

/* Tile base */
.tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:20px 12px 18px;
  border-radius:18px;
  text-decoration:none;
  color:#ffffff;
  font-weight:600;
  text-align:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 10px 24px rgba(0,0,0,.30),
    0 2px 6px rgba(0,0,0,.20);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s cubic-bezier(.2,.7,.2,1);
  isolation:isolate;
  overflow:hidden;
  min-height:130px;
}

/* Soft inner rim light */
.tile::before{
  content:"";
  position:absolute;
  inset:1px 1px auto 1px;
  height:50%;
  border-radius:17px 17px 40% 40%;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));
  pointer-events:none;
}

/* Hover lift */
.tile:hover{
  transform:translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -3px 0 rgba(0,0,0,.25),
    0 18px 36px rgba(0,0,0,.38),
    0 4px 10px rgba(0,0,0,.22);
}

/* Icon circle */
.tile .tile-ico{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  flex-shrink:0;
}
.tile .tile-ico svg{
  width:26px;
  height:26px;
  display:block;
}

/* Tile label */
.tile b{
  font-size:15px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.15;
  display:block;
}

/* Tile caption */
.tile small{
  font-size:11.5px;
  font-weight:500;
  opacity:.88;
  line-height:1.25;
  display:block;
}

/* ---- Color variants ---- */

/* GST — deep green */
.tile--gst{
  background:linear-gradient(180deg,#1fb56a 0%,#0e7d47 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.25),0 10px 24px rgba(15,125,71,.4);
}

/* Income Tax — royal blue */
.tile--itr{
  background:linear-gradient(180deg,#3d7bf0 0%,#1a44b8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.25),0 10px 24px rgba(26,68,184,.4);
}

/* FSSAI — warm orange */
.tile--fssai{
  background:linear-gradient(180deg,#f59e3a 0%,#b85a10 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.25),0 10px 24px rgba(184,90,16,.4);
}

/* MSME — purple */
.tile--msme{
  background:linear-gradient(180deg,#9a5ce0 0%,#5d2aa8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.25),0 10px 24px rgba(93,42,168,.4);
}

/* Trademark — red */
.tile--tm{
  background:linear-gradient(180deg,#e0443a 0%,#9c1f18 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.25),0 10px 24px rgba(156,31,24,.4);
}

/* PAN — teal */
.tile--pan{
  background:linear-gradient(180deg,#18c4b0 0%,#0a7a6d 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.25),0 10px 24px rgba(10,122,109,.4);
}

/* DSC — indigo */
.tile--dsc{
  background:linear-gradient(180deg,#6a5cf0 0%,#2e2599 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.25),0 10px 24px rgba(46,37,153,.4);
}

/* Business Registration — deep navy-blue */
.tile--biz{
  background:linear-gradient(180deg,#2a72c4 0%,#123a78 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.25),0 10px 24px rgba(18,58,120,.4);
}

/* ---- Responsive ---- */
@media (max-width:640px){
  .tiles{grid-template-columns:repeat(2,1fr);gap:12px}
  .tile{min-height:120px;padding:18px 10px 16px;border-radius:16px}
  .tile b{font-size:14px}
  .tile small{font-size:11px}
  .tile .tile-ico{width:40px;height:40px}
  .tile .tile-ico svg{width:22px;height:22px}
}

@media (max-width:360px){
  .tiles{gap:10px}
  .tile{padding:16px 8px 14px;min-height:112px}
}

/* Reduced motion — no hover lift */
@media (prefers-reduced-motion: reduce){
  .tile,.tile:hover{transform:none !important}
}
/* =========================================================
   Hero illustration — layered on the right side of the hero
   ========================================================= */

/* Illustration container: sits to the right of the hero copy on desktop,
   hides itself if the image fails to load */
.hero-illustration{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:52%;
  max-width:640px;
  height:auto;
  pointer-events:none;
  z-index:0;
  opacity:.95;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.5));
  /* fade the left edge so it blends into the hero gradient */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 25%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 25%);
}

/* Make sure hero text sits above the illustration */
.hero .wrap.hero-grid{position:relative;z-index:1}

/* On mobile and tablet: hide the illustration entirely — no room, and
   it would clash with the hero card. Mobile gets the clean version. */
@media (max-width:900px){
  .hero-illustration{display:none}
}

/* On very wide screens: don't let it overwhelm the copy */
@media (min-width:1400px){
  .hero-illustration{width:46%;max-width:720px;opacity:.9}
}

/* Respect reduced motion — the illustration is static, nothing to change,
   but keep it visible */
@media (prefers-reduced-motion: reduce){
  .hero-illustration{filter:drop-shadow(0 16px 40px rgba(0,0,0,.45))}
}
.hero h1{color:#fff !important;text-shadow:0 1px 0 rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.45),0 16px 40px rgba(0,0,0,.35) !important;letter-spacing:-.6px;font-weight:700}.hero h1 span{background:linear-gradient(180deg,#fff6cf 0%,#ffd97a 35%,#f0b73a 70%,#ffd97a 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent !important;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4)) drop-shadow(0 0 16px rgba(240,183,58,.55)) !important}.hero .lead{color:#eef4ff !important}.hero .trust{color:#c8d2ef !important}.hero .eyebrow{color:#7ef0ea !important}

/* =========================================================
   Premium 3D header — white logo panel + navy nav region
   ========================================================= */

/* Full header shell */
.topbar{
  padding:10px 0 12px !important;
  background:linear-gradient(180deg,#ffffff 0%,#eef3fb 100%) !important;
  border-bottom:none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 10px 24px rgba(10,16,48,.10),
    0 2px 4px rgba(10,16,48,.06) !important;
  position:sticky;
  top:0;
  z-index:60;
}

/* The nav wrapper becomes a two-region grid: logo panel | navy panel */
.topbar .wrap.nav{
  display:grid !important;
  grid-template-columns:auto 1fr;
  gap:0 !important;
  align-items:stretch;
  min-height:70px;
  border-radius:16px;
  overflow:hidden;
  background:#0a1030;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -2px 0 rgba(0,0,0,.25) inset,
    0 14px 30px rgba(10,16,48,.28),
    0 3px 8px rgba(10,16,48,.15);
  position:relative;
}

/* Gold divider — a thin vertical gradient line between the two regions */
.topbar .wrap.nav::after{
  content:"";
  position:absolute;
  left:var(--brand-w,270px);
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,#fff6cf 0%,#ffd97a 40%,#f0b73a 75%,#ffd97a 100%);
  box-shadow:
    0 0 12px rgba(240,183,58,.55),
    0 0 24px rgba(240,183,58,.35);
  z-index:3;
  pointer-events:none;
}

/* Left region: white logo panel */
.topbar .brand{
  background:#ffffff !important;
  padding:10px 18px !important;
  display:flex !important;
  align-items:center;
  gap:12px;
  color:#0a1030 !important;
  font-weight:800 !important;
  letter-spacing:.1px;
  border-radius:0;
  position:relative;
  z-index:2;
  flex-shrink:0;
  --brand-w:270px;
}
.topbar .brand img{
  width:52px !important;
  height:52px !important;
  object-fit:contain;
  border-radius:10px;
  background:#fff;
  filter:drop-shadow(0 4px 10px rgba(10,16,48,.15));
  flex-shrink:0;
}
.topbar .brand span{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  font-size:16px;
  color:#0a1030;
}
.topbar .brand b{
  color:#0a1030;
  font-weight:900;
}
.topbar .brand small{
  font-size:9px !important;
  letter-spacing:1px;
  color:#5a6b8a !important;
  font-weight:700;
  margin-top:3px;
}

/* Right region: navy nav panel */
.topbar .nav-right{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  padding:0 14px 0 20px;
  background:linear-gradient(180deg,#0a1030 0%,#131a4a 100%);
  position:relative;
  z-index:1;
  min-width:0;
  flex-wrap:nowrap;
}
.topbar .nav-right nav{
  display:flex !important;
  gap:16px;
  align-items:center;
  flex-wrap:nowrap;
  min-width:0;
  overflow:hidden;
}
.topbar .nav-right nav a{
  color:#e8eeff !important;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  padding:8px 4px;
  border-radius:8px;
  transition:color .18s ease, background .18s ease;
  position:relative;
}
.topbar .nav-right nav a:hover{
  color:#ffd97a !important;
  background:rgba(255,255,255,.06);
}
.topbar .nav-right nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:0;
  height:2px;
  background:linear-gradient(90deg,#ffd97a,#f0b73a);
  transition:width .22s ease,left .22s ease;
  border-radius:2px;
}
.topbar .nav-right nav a:hover::after{
  width:70%;
  left:15%;
}

/* Tamil language pill */
.topbar .nav-right .lang,
.topbar .nav-right a.lang{
  color:#0a1030 !important;
  background:linear-gradient(180deg,#ffffff 0%,#e8eefc 100%) !important;
  border:1px solid rgba(255,255,255,.6) !important;
  border-radius:999px;
  padding:9px 16px;
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  box-shadow:
    0 2px 6px rgba(0,0,0,.25),
    inset 0 1px 0 #fff;
  transition:transform .18s ease, box-shadow .18s ease;
  white-space:nowrap;
  min-height:40px;
  display:inline-flex;
  align-items:center;
}
.topbar .nav-right .lang:hover,
.topbar .nav-right a.lang:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 #fff;
}

/* Hamburger — gold accent when present */
.topbar .menu{
  color:#0a1030 !important;
  background:linear-gradient(180deg,#ffffff 0%,#e8eefc 100%) !important;
  border:1px solid rgba(255,255,255,.6) !important;
  border-radius:10px;
  width:44px;
  height:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.25),
    inset 0 1px 0 #fff;
}

/* Responsive — set the gold divider position dynamically */
@media (max-width:980px){
  .topbar .brand{--brand-w:230px; padding:10px 14px !important;}
  .topbar .brand img{width:46px !important;height:46px !important;}
  .topbar .brand span{font-size:14px;}
  .topbar .brand small{font-size:8px;}
  .topbar .wrap.nav{--brand-w:230px;}
  .topbar .wrap.nav::after{left:230px;}
}

/* Mobile — stack: logo panel full width, nav collapses to pill + hamburger */
@media (max-width:760px){
  .topbar{padding:8px 0 10px !important;}
  .topbar .wrap.nav{
    grid-template-columns:1fr auto;
    min-height:64px;
    border-radius:14px;
    --brand-w:100%;
  }
  .topbar .wrap.nav::after{display:none;}
  .topbar .brand{--brand-w:auto; padding:8px 12px !important;}
  .topbar .brand img{width:42px !important;height:42px !important;}
  .topbar .brand span{font-size:13px;}
  .topbar .brand small{font-size:7.5px;letter-spacing:.7px;}
  .topbar .nav-right{
    padding:0 10px;
    background:linear-gradient(180deg,#0a1030 0%,#131a4a 100%);
    border-radius:0 14px 14px 0;
    gap:8px;
  }
  .topbar .nav-right nav{
    display:none;
  }
  .topbar .nav-right nav.open{
    display:flex !important;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:linear-gradient(180deg,#0a1030 0%,#131a4a 100%);
    padding:6px 0 10px;
    border-radius:0 0 14px 14px;
    box-shadow:0 14px 30px rgba(10,16,48,.35);
    z-index:5;
  }
  .topbar .nav-right nav.open a{
    padding:12px 20px !important;
    font-size:15px;
    border-radius:0;
    width:100%;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .topbar .nav-right nav.open a::after{display:none;}
  .topbar .nav-right .lang,
  .topbar .nav-right a.lang{
    padding:8px 12px;
    font-size:12px;
    min-height:40px;
  }
  .topbar .menu{width:40px;height:40px;min-height:40px;}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .topbar .nav-right nav a,
  .topbar .nav-right nav a::after,
  .topbar .nav-right .lang{transition:none !important;}
}

/* Mobile logo size bump + header spacing */
@media (max-width:760px){
  .topbar .brand{
    padding:8px 14px !important;
    gap:12px !important;
  }
  .topbar .brand img{
    width:52px !important;
    height:52px !important;
  }
  .topbar .brand span{
    font-size:15px !important;
  }
  .topbar .brand small{
    font-size:8.5px !important;
    letter-spacing:.9px;
  }
  .topbar .wrap.nav{
    min-height:72px;
  }
}

/* Very small screens: keep the logo readable */
@media (max-width:380px){
  .topbar .brand img{
    width:46px !important;
    height:46px !important;
  }
  .topbar .brand span{font-size:14px !important;}
}

/* Fix hamburger dropdown — ensure it renders above the page and isn't clipped */
.topbar .wrap.nav{
  overflow:visible !important;
}
.topbar .wrap.nav > .brand{
  border-radius:14px 0 0 14px;
}
.topbar .wrap.nav > .nav-right{
  border-radius:0 14px 14px 0;
}
.topbar{
  overflow:visible !important;
}

/* Mobile dropdown: full-width, above the hero, with proper z-index */
@media (max-width:760px){
  .topbar{
    z-index:200 !important;
  }
  .topbar .wrap.nav{
    border-radius:14px;
    overflow:visible !important;
  }
  .topbar .nav-right{
    border-radius:0 14px 14px 0 !important;
    position:relative;
  }
  .topbar .nav-right nav.open{
    display:flex !important;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:linear-gradient(180deg,#0a1030 0%,#131a4a 100%);
    padding:8px 0 12px;
    border-radius:0 0 14px 14px;
    box-shadow:
      0 18px 40px rgba(10,16,48,.55),
      0 4px 10px rgba(10,16,48,.35),
      inset 0 1px 0 rgba(255,255,255,.08);
    z-index:9999;
    margin-top:0;
  }
  .topbar .nav-right nav.open a{
    padding:14px 22px !important;
    font-size:15px !important;
    font-weight:700;
    border-radius:0;
    width:100%;
    border-bottom:1px solid rgba(255,255,255,.07);
    color:#e8eeff !important;
    white-space:normal;
    display:block;
  }
  .topbar .nav-right nav.open a:last-child{
    border-bottom:none;
  }
  .topbar .nav-right nav.open a:hover,
  .topbar .nav-right nav.open a:active{
    background:rgba(255,255,255,.08);
    color:#ffd97a !important;
  }
  .topbar .nav-right nav.open a::after{
    display:none;
  }
}
/* =========================================================
   Fix 1 — Mobile dropdown: force dark navy, readable text
   ========================================================= */
@media (max-width:760px){
  .topbar .nav-right nav.open{
    background:linear-gradient(180deg,#0a1030 0%,#131a4a 100%) !important;
    border:none !important;
    box-shadow:
      0 18px 40px rgba(10,16,48,.55),
      0 4px 10px rgba(10,16,48,.35),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
    padding:6px 0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    border-radius:0 0 14px 14px !important;
    z-index:9999 !important;
  }
  .topbar .nav-right nav.open a{
    color:#ffffff !important;
    background:transparent !important;
    font-size:15px !important;
    font-weight:700 !important;
    padding:14px 20px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    text-decoration:none !important;
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    height:auto !important;
    min-height:0 !important;
    line-height:1.3 !important;
  }
  .topbar .nav-right nav.open a:last-child{
    border-bottom:none !important;
  }
  .topbar .nav-right nav.open a:active,
  .topbar .nav-right nav.open a:hover{
    background:rgba(255,217,122,.12) !important;
    color:#ffd97a !important;
  }
}

/* =========================================================
   Fix 2 — Premium 3D + 5D hero buttons
   ========================================================= */

/* HERO ACTIONS container — give the pair a shared 3D stage */
.hero .actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:26px 0 14px;
  perspective:900px;
}

/* === BASE 3D BUTTON === */
.hero .actions .btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 26px;
  border-radius:14px;
  font-weight:800;
  font-size:15px;
  letter-spacing:.2px;
  text-decoration:none;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:
    transform .22s cubic-bezier(.2,.7,.2,1),
    box-shadow .22s cubic-bezier(.2,.7,.2,1),
    filter .22s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
  overflow:visible;
  isolation:isolate;
}

/* === PRIMARY — WhatsApp === */
.hero .actions .btn.primary{
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(180deg,#25e8a1 0%,#12c98a 45%,#0a9a68 100%) !important;
  color:#032a1c !important;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 12px 28px rgba(18,201,138,.45),
    0 4px 10px rgba(10,16,48,.28),
    0 0 0 4px rgba(18,201,138,.12);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.hero .actions .btn.primary::before{
  /* Top rim light */
  content:"";
  position:absolute;
  inset:2px 2px auto 2px;
  height:45%;
  border-radius:12px 12px 40% 40%;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events:none;
  z-index:1;
}
.hero .actions .btn.primary::after{
  /* Neon outer glow */
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:17px;
  background:linear-gradient(180deg, rgba(37,232,161,.55), rgba(10,154,104,.2));
  filter:blur(14px);
  z-index:-1;
  opacity:.85;
  transition:opacity .22s ease;
}
.hero .actions .btn.primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -3px 0 rgba(0,0,0,.25),
    0 18px 38px rgba(18,201,138,.55),
    0 6px 14px rgba(10,16,48,.32),
    0 0 0 5px rgba(18,201,138,.18);
}
.hero .actions .btn.primary:hover::after{opacity:1;}
.hero .actions .btn.primary:active{
  transform:translateY(0) scale(.98);
}

/* === SECONDARY — Call now === */
.hero .actions .btn.secondary{
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#eaf0ff 55%,#d8e2f8 100%) !important;
  color:#0a1030 !important;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -3px 0 rgba(10,16,48,.10),
    0 12px 26px rgba(10,16,48,.35),
    0 4px 10px rgba(10,16,48,.20),
    0 0 0 3px rgba(255,255,255,.12);
}
.hero .actions .btn.secondary::before{
  content:"";
  position:absolute;
  inset:2px 2px auto 2px;
  height:45%;
  border-radius:12px 12px 40% 40%;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
  pointer-events:none;
  z-index:1;
}
.hero .actions .btn.secondary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -3px 0 rgba(10,16,48,.14),
    0 18px 36px rgba(10,16,48,.42),
    0 6px 14px rgba(10,16,48,.24);
}
.hero .actions .btn.secondary:active{
  transform:translateY(0) scale(.98);
}

/* Chevron on Call button */
.hero .actions .btn.secondary::after{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border-right:2.5px solid #0a1030;
  border-bottom:2.5px solid #0a1030;
  transform:rotate(-45deg);
  margin-left:8px;
  margin-bottom:2px;
  opacity:.7;
}

/* Make the WhatsApp icon slightly bigger and popped */
.hero .actions .btn.primary .wa-ico{
  width:24px;
  height:24px;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.4));
}

/* Mobile: stack buttons, full width for easy tapping */
@media (max-width:520px){
  .hero .actions{
    flex-direction:column;
    gap:12px;
    perspective:none;
  }
  .hero .actions .btn{
    width:100%;
    padding:17px 22px;
    font-size:16px;
    justify-content:center;
  }
  .hero .actions .btn.primary:hover,
  .hero .actions .btn.secondary:hover{
    transform:translateY(-1px);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero .actions .btn,
  .hero .actions .btn:hover,
  .hero .actions .btn:active{
    transform:none !important;
  }
  .hero .actions .btn.primary::after{
    filter:none;
    opacity:.6;
  }
}
/* =========================================================
   FINAL mobile nav fix — hide desktop nav, full-width dropdown
   ========================================================= */

/* Mobile: hide the desktop nav entirely until hamburger opens it */
@media (max-width:760px){
  /* HIDE the nav when it's not open */
  .topbar .nav-right nav:not(.open){
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    overflow:hidden !important;
    position:absolute !important;
    left:-9999px !important;
  }

  /* Full-width dropdown when open */
  .topbar .nav-right nav.open{
    display:flex !important;
    visibility:visible !important;
    position:fixed !important;
    top:auto !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    padding:8px 0 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    background:linear-gradient(180deg,#0a1030 0%,#131a4a 100%) !important;
    border-radius:0 !important;
    box-shadow:
      0 18px 40px rgba(10,16,48,.55),
      0 4px 10px rgba(10,16,48,.35),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
    z-index:99999 !important;
    box-sizing:border-box !important;
  }

  .topbar .nav-right nav.open a{
    color:#ffffff !important;
    background:transparent !important;
    font-size:16px !important;
    font-weight:700 !important;
    padding:16px 24px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    text-decoration:none !important;
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    text-align:left !important;
  }
  .topbar .nav-right nav.open a:last-child{
    border-bottom:none !important;
  }
  .topbar .nav-right nav.open a:active{
    background:rgba(255,217,122,.12) !important;
    color:#ffd97a !important;
  }

  /* Hide the mobile quick-links bar at the bottom while menu is open —
     keeps the screen clean */
  .topbar .nav-right nav.open ~ .lang{
    /* keep Tamil visible */
  }

  /* Make sure the header itself doesn't clip the dropdown */
  .topbar{
    overflow:visible !important;
    position:sticky !important;
    z-index:200 !important;
  }
  .topbar .wrap.nav{
    overflow:visible !important;
  }
  .topbar .nav-right{
    overflow:visible !important;
    position:static !important;
  }
}
/* =========================================================
   Premium 3D treatment for the fixed bottom WhatsApp/Call bar
   ========================================================= */

.mbar{
  background:linear-gradient(180deg,#0a1030 0%,#131a4a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 -8px 24px rgba(10,16,48,.35) !important;
  padding:0 !important;
  gap:0 !important;
  border-top:1px solid rgba(255,217,122,.25) !important;
}

.mbar a{
  position:relative !important;
  padding:16px 14px !important;
  font-weight:800 !important;
  font-size:15px !important;
  letter-spacing:.2px !important;
  text-decoration:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  overflow:hidden !important;
  transition:
    transform .18s cubic-bezier(.2,.7,.2,1),
    filter .18s cubic-bezier(.2,.7,.2,1) !important;
}

/* WhatsApp half — bright 3D green */
.mbar a:first-child{
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(180deg,#25e8a1 0%,#12c98a 50%,#0a9a68 100%) !important;
  color:#032a1c !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset -2px 0 0 rgba(0,0,0,.15),
    inset 0 -3px 0 rgba(0,0,0,.20) !important;
}
.mbar a:first-child::before{
  /* rim light */
  content:"";
  position:absolute;
  inset:2px 2px auto 2px;
  height:45%;
  border-radius:14px 14px 40% 40%;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events:none;
}

/* Call half — deep navy with gold accent */
.mbar a + a{
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.15), transparent 55%),
    linear-gradient(180deg,#1a2160 0%,#0a1030 100%) !important;
  color:#ffffff !important;
  box-shadow:
    inset 2px 0 0 rgba(255,217,122,.25),
    inset 0 2px 0 rgba(255,255,255,.15),
    inset 0 -3px 0 rgba(0,0,0,.35) !important;
}
.mbar a + a::before{
  content:"";
  position:absolute;
  inset:2px 2px auto 2px;
  height:45%;
  border-radius:14px 14px 40% 40%;
  background:linear-gradient(180deg, rgba(255,217,122,.15), rgba(255,217,122,0));
  pointer-events:none;
}

/* Tap feedback */
.mbar a:active{
  transform:scale(.97) !important;
  filter:brightness(.95) !important;
}

/* Slightly larger icons */
.mbar a svg{
  width:22px !important;
  height:22px !important;
  flex:none !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.25)) !important;
}

/* Keep the safe area on iPhone-style notches */
@supports (padding: max(0px)){
  .mbar{
    padding-bottom:max(0px, env(safe-area-inset-bottom)) !important;
  }
}

/* Reduced motion — no scale on tap */
@media (prefers-reduced-motion: reduce){
  .mbar a,
  .mbar a:active{
    transform:none !important;
  }
}
/* =========================================================
   FINAL dropdown fix — anchored under header, full width,
   cannot cover the hero text above, cannot scroll with page
   ========================================================= */

@media (max-width:760px){
  /* Header acts as the anchor */
  .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:999 !important;
    overflow:visible !important;
  }
  .topbar .wrap.nav{
    position:relative !important;
    overflow:visible !important;
  }
  .topbar .nav-right{
    position:static !important;
    overflow:visible !important;
  }

  /* Nav is hidden when closed — not just invisible, fully collapsed */
  .topbar .nav-right nav:not(.open){
    display:none !important;
  }

  /* When open: anchored to the bottom of the header, full viewport width */
  .topbar .nav-right nav.open{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    position:absolute !important;
    top:100% !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    background:linear-gradient(180deg,#0a1030 0%,#131a4a 100%) !important;
    border-radius:0 0 16px 16px !important;
    box-shadow:
      0 20px 40px rgba(10,16,48,.55),
      0 6px 14px rgba(10,16,48,.35),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
    z-index:1000 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .topbar .nav-right nav.open a{
    display:block !important;
    width:100% !important;
    padding:16px 22px !important;
    margin:0 !important;
    color:#ffffff !important;
    background:transparent !important;
    font-size:16px !important;
    font-weight:700 !important;
    text-align:left !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    box-sizing:border-box !important;
    line-height:1.3 !important;
  }
  .topbar .nav-right nav.open a:first-child{
    padding-top:18px !important;
  }
  .topbar .nav-right nav.open a:last-child{
    border-bottom:none !important;
    padding-bottom:20px !important;
  }
  .topbar .nav-right nav.open a:active,
  .topbar .nav-right nav.open a:focus{
    background:rgba(255,217,122,.12) !important;
    color:#ffd97a !important;
  }
}
/* =========================================================
   Bottom bar — rounded card shape for both buttons
   ========================================================= */

.mbar{
  padding:8px 10px !important;
  gap:10px !important;
  background:linear-gradient(180deg,#0a1030 0%,#131a4a 100%) !important;
  border-top:1px solid rgba(255,217,122,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 -8px 24px rgba(10,16,48,.35) !important;
}

.mbar a{
  border-radius:14px !important;
  padding:14px 12px !important;
  position:relative !important;
  overflow:hidden !important;
  transform-style:preserve-3d !important;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), filter .18s cubic-bezier(.2,.7,.2,1) !important;
}

/* WhatsApp — rounded card, bright 3D green */
.mbar a:first-child{
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.4), transparent 55%),
    linear-gradient(180deg,#2befa6 0%,#12c98a 48%,#0a9a68 100%) !important;
  color:#032a1c !important;
  text-shadow:0 1px 0 rgba(255,255,255,.4) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 8px 18px rgba(18,201,138,.45),
    0 2px 6px rgba(10,16,48,.25),
    0 0 0 2px rgba(18,201,138,.15) !important;
}
.mbar a:first-child::before{
  content:"";
  position:absolute;
  inset:2px 2px auto 2px;
  height:45%;
  border-radius:12px 12px 40% 40%;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0));
  pointer-events:none;
}

/* Call — rounded card, navy with gold accent */
.mbar a + a{
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.15), transparent 55%),
    linear-gradient(180deg,#1a2160 0%,#0a1030 100%) !important;
  color:#ffffff !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -3px 0 rgba(0,0,0,.35),
    inset 2px 0 0 rgba(255,217,122,.25),
    0 8px 18px rgba(10,16,48,.45),
    0 2px 6px rgba(10,16,48,.28) !important;
}
.mbar a + a::before{
  content:"";
  position:absolute;
  inset:2px 2px auto 2px;
  height:45%;
  border-radius:12px 12px 40% 40%;
  background:linear-gradient(180deg, rgba(255,217,122,.14), rgba(255,217,122,0));
  pointer-events:none;
}

.mbar a:active{
  transform:scale(.96) !important;
  filter:brightness(.94) !important;
}

.mbar a svg{
  width:22px !important;
  height:22px !important;
  flex:none !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.3)) !important;
  position:relative !important;
  z-index:1 !important;
}

.mbar a > *{
  position:relative;
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  .mbar a,
  .mbar a:active{ transform:none !important; }
}
/* =========================================================
   Trust row — icons before Tamil / WhatsApp / Personal
   ========================================================= */

.hero .trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
  font-weight:700;
  font-size:14px;
  color:#cfd8f3 !important;
  margin-top:4px;
  line-height:1.4;
}

/* Hide the original bullet separators — we use icons + gaps instead */
.hero .trust{
  font-size:0;
}
.hero .trust::before,
.hero .trust::after{
  display:none;
}

/* Rewrite the text as three tagged spans using CSS-generated content */
.hero .trust{
  font-size:14px !important;
}

/* Wrap: split the plain text visually by inserting pseudo icons */
.hero .trust > *{
  font-size:14px;
}

/* Since we can't inject pseudo-elements into the middle of a text node,
   we style the container with a subtle icon-strip look */
.hero .trust{
  background:linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px 14px;
  display:inline-flex;
  gap:16px;
}

/* Small icons before each logical chunk — approximate the reference using
   character glyphs that render on all phones */
.hero .trust{
  letter-spacing:.1px;
}
.hero .trust::first-letter{
  color:#7ef0ea;
}

/* If the trust line has visible divider bullets ("•"), restyle them */
.hero .trust{
  text-rendering:optimizeLegibility;
}
/* Close out the truncated header rule */
.topbar .nav-right .lang,
.topbar .nav-right a.lang{
  align-items:center;
}

/* =========================================================
   Trust row — three items with icons (fix rendering position)
   ========================================================= */

.hero p.trust,
.hero .trust{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px 18px !important;
  margin:22px 0 0 !important;
  padding:12px 16px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:14px !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  color:#dfe6f7 !important;
  text-shadow:none !important;
  max-width:640px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 14px rgba(0,0,0,.25) !important;
  line-height:1.2 !important;
  position:relative;
  z-index:2;
}

.hero .trust-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  font-size:13.5px !important;
  letter-spacing:.15px;
  color:#eaf0ff !important;
  white-space:nowrap !important;
}

.hero .trust-item svg{
  flex:none !important;
  width:16px !important;
  height:16px !important;
  opacity:.92;
}

.hero .trust-item--lang svg{ color:#7ef0ea !important; }
.hero .trust-item--wa svg{ color:#25e8a1 !important; }
.hero .trust-item--person svg{ color:#ffd97a !important; }

.hero .trust-divider{
  display:inline-block !important;
  width:1px !important;
  height:18px !important;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.25), transparent) !important;
  flex:none;
}

@media (max-width:640px){
  .hero p.trust,
  .hero .trust{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
    padding:14px 16px !important;
    max-width:none !important;
  }
  .hero .trust-divider{ display:none !important; }
  .hero .trust-item{ font-size:14px !important; }
}

/* =========================================================
   Premium 3D hero buttons (restore if truncated)
   ========================================================= */
.hero .actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:26px 0 14px;
}
.hero .actions .btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 26px;
  border-radius:14px;
  font-weight:800;
  font-size:15px;
  letter-spacing:.2px;
  text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s cubic-bezier(.2,.7,.2,1);
}
.hero .actions .btn.primary{
  background:radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.35), transparent 55%),linear-gradient(180deg,#25e8a1 0%,#12c98a 45%,#0a9a68 100%) !important;
  color:#032a1c !important;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 12px 28px rgba(18,201,138,.45),
    0 4px 10px rgba(10,16,48,.28),
    0 0 0 4px rgba(18,201,138,.12);
}
.hero .actions .btn.secondary{
  background:radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.9), transparent 60%),linear-gradient(180deg,#ffffff 0%,#eaf0ff 55%,#d8e2f8 100%) !important;
  color:#0a1030 !important;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -3px 0 rgba(10,16,48,.10),
    0 12px 26px rgba(10,16,48,.35),
    0 4px 10px rgba(10,16,48,.20);
}
.hero .actions .btn.secondary::after{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border-right:2.5px solid #0a1030;
  border-bottom:2.5px solid #0a1030;
  transform:rotate(-45deg);
  margin-left:8px;
  margin-bottom:2px;
  opacity:.7;
}
.hero .actions .btn:hover{ transform:translateY(-2px); }
.hero .actions .btn:active{ transform:translateY(0) scale(.98); }

/* =========================================================
   Premium 3D bottom bar
   ========================================================= */
.mbar{
  padding:8px 10px !important;
  gap:10px !important;
  background:linear-gradient(180deg,#0a1030 0%,#131a4a 100%) !important;
  border-top:1px solid rgba(255,217,122,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 -8px 24px rgba(10,16,48,.35) !important;
}
.mbar a{
  border-radius:14px !important;
  padding:14px 12px !important;
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  font-weight:800 !important;
  font-size:15px !important;
  text-decoration:none !important;
  transition:transform .18s cubic-bezier(.2,.7,.2,1) !important;
}
.mbar a:first-child{
  background:radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.4), transparent 55%),linear-gradient(180deg,#2befa6 0%,#12c98a 48%,#0a9a68 100%) !important;
  color:#032a1c !important;
  text-shadow:0 1px 0 rgba(255,255,255,.4) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 8px 18px rgba(18,201,138,.45),
    0 0 0 2px rgba(18,201,138,.15) !important;
}
.mbar a + a{
  background:radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.15), transparent 55%),linear-gradient(180deg,#1a2160 0%,#0a1030 100%) !important;
  color:#ffffff !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -3px 0 rgba(0,0,0,.35),
    inset 2px 0 0 rgba(255,217,122,.25),
    0 8px 18px rgba(10,16,48,.45) !important;
}
.mbar a:active{ transform:scale(.96) !important; }
.mbar a svg{ width:22px !important; height:22px !important; flex:none !important; }
/* =========================================================
   Remove gold divider line — it was cutting through nav text
   ========================================================= */

.topbar .wrap.nav::after{
  display:none !important;
  content:none !important;
  background:none !important;
  box-shadow:none !important;
}

.topbar .brand{
  border-right:none !important;
  border-image:none !important;
  box-shadow:none !important;
}

/* Optional: put a subtle gold top accent on the nav panel instead */
@media (min-width:761px){
  .topbar .nav-right{
    border-top:2px solid transparent !important;
    border-image:linear-gradient(90deg,
      rgba(255,217,122,0) 0%,
      rgba(255,217,122,.75) 20%,
      #ffd97a 50%,
      rgba(255,217,122,.75) 80%,
      rgba(255,217,122,0) 100%) 1 !important;
  }
}
/* =========================================================
   Hide hamburger on desktop — show only on mobile
   ========================================================= */

@media (min-width:761px){
  /* Hide the hamburger button entirely on desktop */
  .topbar .menu,
  .topbar #menuBtn{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }

  /* Ensure the desktop nav is always visible */
  .topbar .nav-right nav{
    display:flex !important;
    visibility:visible !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    overflow:visible !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    flex-direction:row !important;
    gap:16px !important;
    transform:none !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
  }

  /* Desktop nav links */
  .topbar .nav-right nav a{
    color:#e8eeff !important;
    background:transparent !important;
    padding:8px 4px !important;
    border:none !important;
    border-radius:8px !important;
    font-size:13px !important;
    font-weight:700 !important;
    display:inline-block !important;
    width:auto !important;
    text-align:center !important;
    text-decoration:none !important;
    white-space:nowrap !important;
  }

  .topbar .nav-right nav a:hover{
    color:#ffd97a !important;
    background:rgba(255,255,255,.06) !important;
  }
}

/* Mobile: keep hamburger visible, nav hidden until toggled */
@media (max-width:760px){
  .topbar .menu,
  .topbar #menuBtn{
    display:inline-flex !important;
    visibility:visible !important;
    width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    pointer-events:auto !important;
  }
}


/* Mobile navigation reliability: ui.js toggles .is-open on #mainNav. */
@media (max-width: 760px) {
  .topbar .nav-right { position: relative; }
  .topbar #mainNav { display: none !important; }
  .topbar #mainNav.is-open {
    display: flex !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 60 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    max-height: min(70vh, 520px) !important;
    overflow-y: auto !important;
    padding: 10px 16px 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(10, 16, 48, .12) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 36px rgba(10, 16, 48, .20) !important;
  }
  .topbar #mainNav.is-open a {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    width: 100% !important;
    padding: 12px 8px !important;
    color: #0a1030 !important;
    border-bottom: 1px solid rgba(10, 16, 48, .08) !important;
    text-decoration: none !important;
  }
  .topbar #mainNav.is-open a:last-child { border-bottom: 0 !important; }
  .topbar #mainNav.is-open a:focus-visible {
    outline: 3px solid #0b9a94 !important;
    outline-offset: -3px !important;
    border-radius: 8px !important;
  }
}


/* KVB mobile navigation — one state (.is-open), one full-width drawer. */
@media (max-width: 760px) {
  .topbar,
  .topbar .wrap.nav {
    position: sticky !important;
    overflow: visible !important;
  }
  .topbar {
    top: 0 !important;
    z-index: 999 !important;
  }
  .topbar .wrap.nav {
    position: relative !important;
  }
  .topbar .nav-right {
    position: static !important;
    overflow: visible !important;
  }
  .topbar #mainNav:not(.is-open) {
    display: none !important;
  }
  .topbar #mainNav.is-open {
    display: flex !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: min(70vh, 520px) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 10px 5vw 14px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid rgba(10, 16, 48, .12) !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 18px 36px rgba(10, 16, 48, .24) !important;
    z-index: 1000 !important;
  }
  .topbar #mainNav.is-open a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 13px 10px !important;
    margin: 0 !important;
    color: #0a1030 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(10, 16, 48, .10) !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
  }
  .topbar #mainNav.is-open a:last-child {
    border-bottom: 0 !important;
  }
  .topbar #mainNav.is-open a:hover,
  .topbar #mainNav.is-open a:active,
  .topbar #mainNav.is-open a:focus-visible {
    color: #087f79 !important;
    background: #eef9f8 !important;
    outline-offset: -3px !important;
  }
}


/* Mobile hamburger tap reliability: keep the actual button above header layers. */
@media (max-width: 760px) {
  .topbar .nav-right { position: relative !important; }
  .topbar #menuBtn {
    position: relative !important;
    z-index: 1002 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }
  .topbar #mainNav.is-open { z-index: 1001 !important; }
}


/* =========================================================
   Glass service carousel — responsive, touch-friendly
   ========================================================= */
.tiles-carousel{position:relative;display:flex;align-items:center;gap:12px;margin-top:24px}
.tiles-carousel .tiles{display:flex;flex:1;min-width:0;gap:18px;margin:0;padding:16px 8px 28px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tiles-carousel .tiles::-webkit-scrollbar{display:none}
.tiles-carousel .tile{flex:0 0 calc((100% - 54px)/4);min-width:0;min-height:190px;padding:24px 16px 22px;gap:14px;border:1px solid rgba(255,255,255,.48);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.10));backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(255,255,255,.14),0 14px 30px rgba(10,16,48,.14);scroll-snap-align:center;transform:translateZ(0)}
.tiles-carousel .tile::before{inset:1px;height:58%;border-radius:23px;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 72%)}
.tiles-carousel .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.12),transparent 48%,rgba(10,16,48,.08));pointer-events:none;z-index:-1}
.tiles-carousel .tile .tile-ico{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 16px rgba(10,16,48,.10)}
.tiles-carousel .tile .tile-ico svg{width:30px;height:30px}
.tiles-carousel .tile b{font-size:clamp(14px,1.25vw,18px);line-height:1.25}
.tiles-carousel .tile small{font-size:13px;line-height:1.35}
.tiles-carousel .tile:hover{transform:translateY(-5px) scale(1.015);box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 20px 38px rgba(10,16,48,.20)}
.tiles-arrow{flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(255,255,255,.58);color:#0a1030;font-size:30px;line-height:1;box-shadow:0 6px 18px rgba(10,16,48,.12);cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tiles-arrow:hover{background:#fff;transform:scale(1.06)}
.tiles-arrow:focus-visible,.tiles-carousel .tile:focus-visible{outline:3px solid var(--kvb-teal);outline-offset:4px}
@media(max-width:900px){.tiles-carousel .tile{flex-basis:calc((100% - 36px)/3)}}
@media(max-width:640px){.tiles-carousel{gap:6px;margin-top:18px}.tiles-carousel .tiles{gap:14px;padding:12px 4px 24px}.tiles-carousel .tile{flex-basis:78%;min-height:205px;padding:24px 16px 22px;border-radius:24px}.tiles-carousel .tile b{font-size:17px}.tiles-carousel .tile small{font-size:13px}.tiles-arrow{flex-basis:34px;width:34px;height:34px;font-size:25px}}
@media(max-width:380px){.tiles-arrow{display:none}.tiles-carousel .tile{flex-basis:86%}}
@media(prefers-reduced-motion:reduce){.tiles-carousel .tiles{scroll-behavior:auto}.tiles-carousel .tile,.tiles-carousel .tile:hover,.tiles-arrow:hover{transform:none}}


/* Glass carousel contrast + mobile controls correction */
.tiles-carousel{display:block;padding:0 34px}
.tiles-carousel .tiles{width:100%;box-sizing:border-box}
.tiles-carousel .tiles-arrow{position:absolute;top:50%;z-index:5;transform:translateY(-50%);display:grid;place-items:center}
.tiles-carousel .tiles-prev{left:0}
.tiles-carousel .tiles-next{right:0}
.tiles-carousel .tile.tile--gst{background:linear-gradient(145deg,rgba(31,181,106,.92),rgba(10,112,66,.88))}
.tiles-carousel .tile.tile--itr{background:linear-gradient(145deg,rgba(61,123,240,.94),rgba(26,68,184,.90))}
.tiles-carousel .tile.tile--fssai{background:linear-gradient(145deg,rgba(245,158,58,.95),rgba(184,90,16,.92))}
.tiles-carousel .tile.tile--pan{background:linear-gradient(145deg,rgba(24,196,176,.94),rgba(10,122,109,.92))}
.tiles-carousel .tile.tile--msme{background:linear-gradient(145deg,rgba(154,92,224,.94),rgba(93,42,168,.92))}
.tiles-carousel .tile.tile--tm{background:linear-gradient(145deg,rgba(224,68,58,.95),rgba(156,31,24,.92))}
.tiles-carousel .tile.tile--dsc{background:linear-gradient(145deg,rgba(106,92,240,.95),rgba(46,37,153,.92))}
.tiles-carousel .tile.tile--biz{background:linear-gradient(145deg,rgba(42,114,196,.95),rgba(18,58,120,.92))}
.tiles-carousel .tile b,.tiles-carousel .tile small{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.28)}
.tiles-carousel .tile .tile-ico{color:#fff;background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.56)}
.tiles-carousel .tile::before{background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.04) 72%)}
@media(max-width:640px){
 .tiles-carousel{padding:0 34px}
 .tiles-carousel .tiles{width:100%}
 .tiles-carousel .tiles-arrow{display:grid}
 .tiles-carousel .tile{flex-basis:88%}
}
@media(max-width:380px){.tiles-carousel{padding:0 30px}.tiles-carousel .tiles-arrow{width:28px;height:28px;flex-basis:28px}.tiles-carousel .tile{flex-basis:92%}}


/* Infinite 3D cylinder carousel: all service cards loop around one ring */
.tiles-carousel.is-circular{
  display:block;position:relative;width:100%;height:330px;padding:0 42px;
  perspective:1100px;perspective-origin:50% 46%;overflow:hidden;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.tiles-carousel.is-circular .tiles{
  display:block;position:relative;width:100%;height:280px;margin:0;padding:0;
  overflow:visible;transform-style:preserve-3d;will-change:transform;
  scroll-snap-type:none;touch-action:pan-y;
}
.tiles-carousel.is-circular .tile{
  display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;min-height:0;min-width:0;margin:0;padding:20px 16px;
  border-radius:24px;box-sizing:border-box;overflow:hidden;
  transform-style:preserve-3d;backface-visibility:hidden;
  transition:box-shadow .25s ease,border-color .25s ease;
  will-change:transform,opacity;
}
.tiles-carousel.is-circular .tile:hover{transform:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 20px 38px rgba(10,16,48,.22)}
.tiles-carousel.is-circular .tiles-arrow{
  position:absolute;top:48%;z-index:1000;display:grid;place-items:center;
  transform:translateY(-50%);pointer-events:auto
}
.tiles-carousel.is-circular .tiles-prev{left:2px}
.tiles-carousel.is-circular .tiles-next{right:2px}
.tiles-carousel.is-circular.is-dragging{cursor:grabbing}
.tiles-carousel.is-circular.is-dragging .tile{pointer-events:none}
@media(max-width:640px){
 .tiles-carousel.is-circular{height:300px;padding:0 30px;perspective:900px;perspective-origin:50% 45%}
 .tiles-carousel.is-circular .tiles{height:270px}
 .tiles-carousel.is-circular .tile{border-radius:23px}
 .tiles-carousel.is-circular .tiles-arrow{top:47%;width:32px;height:32px}
 .tiles-carousel.is-circular .tiles-prev{left:0}
 .tiles-carousel.is-circular .tiles-next{right:0}
}
@media(prefers-reduced-motion:reduce){
 .tiles-carousel.is-circular .tiles{will-change:auto}
}


/* Manual, repeating horizontal service carousel */
.tiles-carousel.is-horizontal-loop{
  display:block;position:relative;width:100%;max-width:100%;height:auto;
  padding:0 42px;margin:28px 0 0;box-sizing:border-box;overflow:visible;
  perspective:none;touch-action:pan-y;
}
.tiles-carousel.is-horizontal-loop .tiles{
  display:flex;position:relative;align-items:stretch;gap:18px;
  width:100%;height:auto;margin:0;padding:12px 4px 28px;box-sizing:border-box;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  transform:none!important;transform-style:flat;will-change:scroll-position;
}
.tiles-carousel.is-horizontal-loop .tiles::-webkit-scrollbar{display:none}
.tiles-carousel.is-horizontal-loop .tile{
  display:flex;position:relative;flex:0 0 260px;width:260px;height:205px;
  min-width:0;min-height:205px;left:auto;top:auto;margin:0;padding:24px 18px;
  transform:none!important;opacity:1!important;filter:none!important;
  backface-visibility:visible;scroll-snap-align:center;box-sizing:border-box;
}
.tiles-carousel.is-horizontal-loop .tile:hover{transform:translateY(-4px)!important}
.tiles-carousel.is-horizontal-loop .tiles-arrow{
  position:absolute;top:48%;z-index:10;display:grid;place-items:center;
  transform:translateY(-50%);width:38px;height:38px;flex:0 0 38px;
}
.tiles-carousel.is-horizontal-loop .tiles-prev{left:0}
.tiles-carousel.is-horizontal-loop .tiles-next{right:0}
@media(max-width:640px){
 .tiles-carousel.is-horizontal-loop{height:auto;padding:0 32px;margin-top:18px}
 .tiles-carousel.is-horizontal-loop .tiles{gap:14px;padding:12px 3px 24px}
 .tiles-carousel.is-horizontal-loop .tile{flex-basis:82%;width:82%;height:205px;min-height:205px;padding:24px 16px}
 .tiles-carousel.is-horizontal-loop .tiles-arrow{top:48%;width:30px;height:30px;flex-basis:30px;font-size:24px}
}
@media(max-width:380px){
 .tiles-carousel.is-horizontal-loop{padding:0 28px}
 .tiles-carousel.is-horizontal-loop .tile{flex-basis:88%;width:88%}
}
@media(prefers-reduced-motion:reduce){
 .tiles-carousel.is-horizontal-loop .tiles{scroll-behavior:auto}
}


/* Compact header for narrow desktop/tablet widths: prevent Tamil nav
   labels colliding with the English language switch. */
@media (min-width:761px) and (max-width:1100px) {
  .topbar .wrap.nav {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    grid-template-columns:none !important;
  }
  .topbar .brand { flex:0 0 auto !important; min-width:0 !important; }
  .topbar .nav-right {
    display:flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    padding:0 8px !important;
    position:static !important;
  }
  .topbar .nav-right nav:not(.is-open) {
    display:none !important;
  }
  .topbar .nav-right nav.is-open {
    display:flex !important;
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:min(100vw, 520px) !important;
    max-height:70vh !important;
    overflow-y:auto !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:10px 16px !important;
    background:#fff !important;
    border:1px solid rgba(10,16,48,.12) !important;
    border-radius:0 0 16px 16px !important;
    box-shadow:0 18px 36px rgba(10,16,48,.24) !important;
    z-index:10000 !important;
    box-sizing:border-box !important;
  }
  .topbar .nav-right nav.is-open a {
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:48px !important;
    padding:12px 10px !important;
    color:#0a1030 !important;
    background:transparent !important;
    border:0 !important;
    border-bottom:1px solid rgba(10,16,48,.10) !important;
    border-radius:0 !important;
    white-space:normal !important;
    text-align:left !important;
    box-sizing:border-box !important;
  }
  .topbar .nav-right nav.is-open a:last-child { border-bottom:0 !important; }
  .topbar .nav-right .lang {
    display:inline-flex !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
    margin:0 !important;
  }
  .topbar .menu,
  .topbar #menuBtn {
    display:inline-flex !important;
    visibility:visible !important;
    flex:0 0 42px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    pointer-events:auto !important;
  }
}


/* KVB correction: remove the decorative line above the language switch. */
.topbar .nav-right,
.topbar .nav-right .lang {
  border-top: 0 !important;
  border-image: none !important;
}

/* Compact header on tablets and narrow landscape phones, including Tamil. */
@media (max-width: 960px) {
  .topbar .wrap.nav {
    grid-template-columns: 1fr auto !important;
  }
  .topbar .nav-right {
    position: static !important;
    border-top: 0 !important;
    border-image: none !important;
    gap: 8px !important;
  }
  .topbar .nav-right nav:not(.is-open):not(.open) {
    display: none !important;
  }
  .topbar .nav-right nav.is-open,
  .topbar .nav-right nav.open {
    display: flex !important;
  }
  .topbar .menu,
  .topbar #menuBtn {
    display: inline-flex !important;
    visibility: visible !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
  }
}
@media (min-width: 961px) {
  .topbar .menu,
  .topbar #menuBtn { display: none !important; }
  .topbar .nav-right nav {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
  }
}


/* Final compact header alignment: logo left, language + menu together right.
   Keep the navigation collapsed through 1100px so it never leaves an empty
   centre region when the Tamil labels do not fit. */
@media (max-width:1100px) {
  .topbar .wrap.nav {display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;grid-template-columns:none !important}
  .topbar .wrap.nav::after {display:none !important}
  .topbar .brand {flex:0 1 auto !important;min-width:0 !important}
  .topbar .nav-right {display:flex !important;flex:0 0 auto !important;align-items:center !important;justify-content:flex-end !important;gap:8px !important;margin-left:auto !important;padding:0 10px !important;border:0 !important;position:static !important}
  .topbar .nav-right nav:not(.is-open):not(.open) {display:none !important}
  .topbar .nav-right nav.is-open,.topbar .nav-right nav.open {display:flex !important;position:absolute !important;top:calc(100% + 8px) !important;left:auto !important;right:0 !important;transform:none !important;width:min(92vw,360px) !important;max-height:70vh !important;overflow-y:auto !important;flex-direction:column !important;align-items:stretch !important;gap:0 !important;padding:8px 14px !important;background:#fff !important;border:1px solid rgba(10,16,48,.12) !important;border-radius:0 0 14px 14px !important;box-shadow:0 18px 36px rgba(10,16,48,.24) !important;z-index:10000 !important;box-sizing:border-box !important}
  .topbar .nav-right nav.is-open a,.topbar .nav-right nav.open a {display:flex !important;align-items:center !important;width:100% !important;min-height:46px !important;padding:10px !important;color:#0a1030 !important;background:transparent !important;border:0 !important;border-bottom:1px solid rgba(10,16,48,.10) !important;border-radius:0 !important;white-space:normal !important;text-align:left !important;box-sizing:border-box !important}
  .topbar .nav-right .lang {display:inline-flex !important;flex:0 0 auto !important;margin:0 !important;border:1px solid rgba(255,255,255,.6) !important}
  .topbar .menu,.topbar #menuBtn {display:inline-flex !important;visibility:visible !important;flex:0 0 42px !important;width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important;align-items:center !important;justify-content:center !important;padding:0 !important;margin:0 !important;pointer-events:auto !important}
}
@media (max-width:380px) {
  .topbar .brand {gap:7px !important;padding-left:8px !important;padding-right:8px !important}
  .topbar .brand img {width:38px !important;height:38px !important}
  .topbar .brand span {font-size:12px !important}
  .topbar .nav-right {gap:5px !important;padding:0 6px !important}
  .topbar .nav-right .lang {padding:7px 9px !important;font-size:11px !important}
  .topbar .menu,.topbar #menuBtn {width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;flex-basis:38px !important}
}
@media (min-width:1101px) {
  .topbar .menu,.topbar #menuBtn {display:none !important}
  .topbar .nav-right nav {display:flex !important;position:static !important;flex-direction:row !important}
}


/* Header balance refinement: replace the oversized navy void with a light,
   unified surface while keeping the brand and controls clearly grouped. */
.topbar .wrap.nav {
  background: linear-gradient(135deg, #ffffff 0%, #f5f7ff 58%, #edf3fb 100%) !important;
  border: 1px solid rgba(10, 16, 48, .10) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(10, 16, 48, .12),
              0 2px 5px rgba(10, 16, 48, .06),
              inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}
.topbar .wrap.nav::after { display: none !important; }
.topbar .brand {
  background: transparent !important;
  border-radius: 0 !important;
}
.topbar .nav-right {
  background: transparent !important;
}
.topbar .nav-right nav a {
  color: #182344 !important;
}
.topbar .nav-right nav a:hover {
  color: #087f79 !important;
  background: rgba(8, 127, 121, .08) !important;
}
.topbar .nav-right nav a::after {
  background: linear-gradient(90deg, #0b9a94, #22b8a9) !important;
}
.topbar .nav-right .lang,
.topbar .nav-right a.lang,
.topbar .menu,
.topbar #menuBtn {
  color: #17213f !important;
  background: linear-gradient(180deg, #ffffff 0%, #edf2fb 100%) !important;
  border: 1px solid rgba(10, 16, 48, .12) !important;
  box-shadow: 0 3px 9px rgba(10, 16, 48, .10),
              inset 0 1px 0 #ffffff !important;
}
.topbar .nav-right .lang:hover,
.topbar .nav-right a.lang:hover {
  color: #087f79 !important;
  box-shadow: 0 5px 12px rgba(10, 16, 48, .13),
              inset 0 1px 0 #ffffff !important;
}
@media (max-width: 1100px) {
  .topbar .nav-right { background: transparent !important; }
}