@font-face { font-display: swap; }
/* ================================================================
   ANTIM SANSKAR SEVA — Complete Stylesheet v3
   Brand: Deep Crimson #8B0000 · Rich Red #C41E3A · Pure White
   Clean, Dignified, High-Conversion UI
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --r1: #8B0000;   /* Deep Crimson */
  --r2: #C41E3A;   /* Brand Red */
  --r3: #E53E3E;   /* Accent Red */
  --w1: #FFFFFF;
  --w2: #FAFAFA;   /* Clean Off-white */
  --w3: #F9F1F1;   /* Soft Cream */
  --gold: #D4AF37; /* Sacred Gold */
  --gold2: #F5D76E;
  --tx1: #1F1F1F;
  --tx2: #4A4A4A;
  --tx3: #666666;
  --wa: #25D366;
  --shadow: 0 6px 24px rgba(0,0,0,0.06);
  --shadow-md: 0 12px 36px rgba(139,0,0,0.12);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.18);
  --r: 16px;
  --t: all 0.3s cubic-bezier(0.4,0,0.2,1);
  --fp: 'Poppins', sans-serif;
  --fd: 'Playfair Display', serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--fp); color: var(--tx1); background: var(--w1); overflow-x: hidden; padding-bottom: 58px; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ===== URGENT STRIP ===== */
.urgent-strip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  background: linear-gradient(90deg, #5A0000, #8B0000, #C41E3A, #8B0000, #5A0000);
  background-size: 300% 100%;
  animation: bgSlide 4s linear infinite;
  color: white; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 16px; font-size: 0.8rem; font-weight: 600;
}
@keyframes bgSlide { 0%{background-position:0%} 100%{background-position:300%} }
.strip-dot { width:8px;height:8px;border-radius:50%;background:#FFD700;animation:blink 1s infinite;flex-shrink:0 }
@keyframes blink { 50%{opacity:0} }
.strip-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-cta {
  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4);
  color: white; padding: 3px 12px; border-radius: 20px; font-size: 0.76rem;
  font-weight: 700; white-space: nowrap; transition: var(--t);
}
.strip-cta:hover { background: rgba(255,255,255,0.35); }
.strip-x { background:none;border:none;color:rgba(255,255,255,0.7);cursor:pointer;font-size:1rem;margin-left:6px; }

/* ===== HEADER ===== */
.header {
  position: sticky; top: 32px; z-index: 9000;
  background: rgba(255,255,255,0.98); backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: var(--t);
}
.header.scrolled { top: 0; box-shadow: 0 6px 24px rgba(0,0,0,0.12); }
.navbar { display:flex;align-items:center;justify-content:space-between;padding:10px 24px; }

/* BRAND LOGO - Clean Proper Size in Navbar */
.nav-logo { display:flex;align-items:center;padding:2px 0; }
.logo-img { height: 72px; width: auto; object-fit: contain; max-width: 280px; }
.logo-fallback { display:none;align-items:center; }

/* NAV LINKS */
.nav-links { display:flex;align-items:center;gap:4px; }
.nav-links > li > a {
  color: #222222 !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  padding: 7px 12px !important;
  border-radius: 30px !important;
  letter-spacing: 0.1px !important;
  text-shadow: none !important;
  transition: all 0.2s ease !important;
}

.nav-links > li > a:hover {
  color: #8b0000 !important;
  font-weight: 600 !important;
  background: rgba(139, 0, 0, 0.08) !important;
  box-shadow: none !important;
}
.has-drop { position:relative; }
.drop-menu {
  display:none;position:absolute;top:calc(100%+6px);left:0;
  background:white;border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,0.12);
  border:1px solid rgba(0,0,0,0.08);
  min-width:240px;padding:8px;z-index:200;
}
.has-drop:hover .drop-menu { display:block;animation:dropFade 0.2s ease; }
@keyframes dropFade { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.drop-menu li a { display:block;padding:9px 14px;font-size:0.84rem;border-radius:8px;transition:var(--t); }
.drop-menu li a:hover { background:var(--w3);color:var(--r1); }
.nav-call-btn {
  background:linear-gradient(135deg,var(--r1),var(--r2));color:white!important;
  padding:10px 18px!important;border-radius:10px!important;font-weight:700!important;
  box-shadow:0 4px 14px rgba(139,0,0,0.25);transition:var(--t);
}
.nav-call-btn:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,0,0,0.35)!important; }

/* HAMBURGER */



/* SIDEBAR */
.sidebar {
  position:fixed;top:0;left:0;height:100vh;width:82%;max-width:320px;
  background:white;z-index:9999;transform:translateX(-100%);
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
  display:flex;flex-direction:column;box-shadow:8px 0 40px rgba(0,0,0,0.2);overflow-y:auto;
}
.sidebar.open { transform:translateX(0); }
.sb-top { display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,0.08); }
.sb-x { background:var(--w3);border:none;width:34px;height:34px;border-radius:50%;color:var(--r1);font-weight:800;cursor:pointer; }
.sb-nav { display:flex;flex-direction:column;padding:12px 0; }
.sb-nav a { padding:14px 20px;font-size:0.98rem;font-weight:600;border-bottom:1px solid rgba(0,0,0,0.05);color:var(--tx1); }
.sb-bottom { margin-top:auto;padding:20px;display:flex;flex-direction:column;gap:10px; }
.sb-call { display:block;background:linear-gradient(135deg,var(--r1),var(--r2));color:white;text-align:center;padding:12px;border-radius:10px;font-weight:700; }
.sb-call2 { background:linear-gradient(135deg,#660000,#8B0000); }
.sb-wa { display:flex;align-items:center;justify-content:center;gap:8px;background:var(--wa);color:white;padding:12px;border-radius:10px;font-weight:700; }
.overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9998;opacity:0;pointer-events:none;transition:opacity 0.3s; }
.overlay.active { opacity:1;pointer-events:all; }

/* ===== HERO ===== */
.hero { position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden; }
.hero-bg { position:absolute;inset:0; }
.hero-img { width:100%;height:100%;object-fit:cover;object-position:center; }
/* Clean, natural overlay — replacing harsh bright red with dignified dark vignette */
.hero-overlay {
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(20, 10, 10, 0.82) 0%, rgba(40, 15, 15, 0.75) 50%, rgba(15, 5, 5, 0.88) 100%);
}
.particles { position:absolute;inset:0;overflow:hidden;pointer-events:none; }
.particle { position:absolute;border-radius:50%;animation:floatUp linear infinite; }
@keyframes floatUp {
  0%{transform:translateY(100vh) scale(0);opacity:0}
  15%{opacity:0.8}85%{opacity:0.3}
  100%{transform:translateY(-10vh) scale(1.8);opacity:0}
}
.hero-om {
  position:absolute;right:6%;top:50%;transform:translateY(-50%);
  font-size:clamp(8rem,16vw,14rem);color:rgba(255,255,255,0.04);
  font-family:serif;pointer-events:none;line-height:1;
}

.hero-content { position:relative;z-index:2;width:100%; }
.hero-inner { max-width:760px;padding:40px 0; }
/* 20% Advance Booking discount badge in hero */
.hero-discount-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(245,215,110,0.2));
  border: 1.5px solid rgba(245,215,110,0.6);
  color: #F5D76E; padding: 9px 18px; border-radius: 50px;
  font-size: 0.88rem; font-weight: 700; letter-spacing: 0.5px;
  margin-bottom: 16px; transition: var(--t); cursor: pointer;
  text-decoration: none;
}
.hero-discount-badge:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.4), rgba(245,215,110,0.35));
  transform: translateY(-2px);
}
.hdb-icon { font-size: 1.1rem; }
.hdb-text strong { color: #FFD700; }
.hdb-arrow { font-size: 1.1rem; opacity: 0.7; }

.hero-badge {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(212,175,55,0.18);border:1px solid rgba(212,175,55,0.4);
  color:#F5D76E;padding:8px 18px;border-radius:50px;
  font-size:0.82rem;font-weight:600;letter-spacing:1px;margin-bottom:22px;
}
.badge-dot { width:7px;height:7px;border-radius:50%;background:#FFD700;animation:blink 1s infinite; }
.hero-h1 { display:flex;flex-direction:column;gap:6px;margin-bottom:20px; }
.h1-hindi { font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:700;color:#F5D76E;letter-spacing:1px; }
.h1-brand { font-family:var(--fd);font-size:clamp(2.2rem,5.5vw,4.2rem);font-weight:900;color:white;line-height:1.1; }
.h1-tagline { font-size:clamp(0.85rem,1.8vw,1.1rem);color:rgba(255,220,220,0.85);letter-spacing:5px;text-transform:uppercase;font-weight:400; }
.hero-sub { font-size:clamp(0.95rem,2vw,1.1rem);color:rgba(255,255,255,0.9);line-height:1.8;margin-bottom:32px; }
.hero-sub strong{color:#F5D76E}

.hero-actions { display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px; }
.btn-call {
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--r1),var(--r2));
  color:white;padding:15px 28px;border-radius:50px;
  font-size:0.96rem;font-weight:700;
  box-shadow:0 8px 24px rgba(139,0,0,0.4);transition:var(--t);
}
.btn-call:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(139,0,0,0.55)}
.btn-call2 {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.14);border:1.5px solid rgba(255,255,255,0.4);
  color:white;padding:15px 28px;border-radius:50px;
  font-size:0.96rem;font-weight:700;transition:var(--t);
}
.btn-call2:hover{background:rgba(255,255,255,0.25)}
.btn-wa {
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:white;padding:15px 26px;border-radius:50px;
  font-size:0.96rem;font-weight:700;
  box-shadow:0 8px 24px rgba(37,211,102,0.35);transition:var(--t);
}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(37,211,102,0.5)}
.pulse-btn { animation:pulseGlow 2.5s infinite; }
@keyframes pulseGlow {
  0%,100%{box-shadow:0 8px 24px rgba(139,0,0,0.4)}
  50%{box-shadow:0 8px 36px rgba(196,30,58,0.7),0 0 0 10px rgba(196,30,58,0.1)}
}

.emergency-bar {
  display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,0.1);border:1px solid rgba(245,215,110,0.35);
  border-radius:14px;padding:16px 20px;backdrop-filter: none !important;
}
.emrg-icon{font-size:2.2rem}
.emrg-info{display:flex;flex-direction:column;gap:3px}
.emrg-info b{color:white;font-size:0.88rem;font-weight:700}
.emrg-info span{color:rgba(245,215,110,0.9);font-size:0.78rem}
.emrg-btn {
  margin-left:auto;background:linear-gradient(135deg,#E53E3E,#9B0000);
  color:white;padding:10px 18px;border-radius:10px;
  font-weight:800;font-size:0.84rem;white-space:nowrap;
}

.scroll-hint { position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2; }
.scroll-arrow {
  width:20px;height:20px;border-right:3px solid rgba(255,255,255,0.5);
  border-bottom:3px solid rgba(255,255,255,0.5);transform:rotate(45deg);
  animation:arrowBounce 1.5s infinite;
}
@keyframes arrowBounce{0%,100%{transform:rotate(45deg)}50%{transform:rotate(45deg) translateY(6px)}}

/* ===== STATS BAR ===== */
.stats-bar { background:linear-gradient(135deg,var(--r1),var(--r2));padding:26px 0; }
.stats-row { display:flex;align-items:center;justify-content:center;flex-wrap:wrap; }
.stat { display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 32px;flex:1;min-width:110px; }
.snum,.snum-fix { font-family:var(--fd);font-size:clamp(1.8rem,3.8vw,2.5rem);font-weight:900;color:white;line-height:1; }
.splus { font-size:1.3rem;color:var(--gold2);font-weight:700; }
.slbl { font-size:0.78rem;color:rgba(255,230,230,0.9);font-weight:500;text-align:center; }
.stat-div { width:1px;height:44px;background:rgba(255,255,255,0.2); }

/* ===== ADVANCE BOOKING CTA SECTION (Right after Hero) ===== */
.adv-cta-section { padding: 48px 0; background: var(--w3); border-bottom: 1px solid rgba(139,0,0,0.08); }
.adv-cta-box {
  background: white; border-radius: 20px; padding: 36px 44px;
  box-shadow: 0 12px 36px rgba(139,0,0,0.08); border: 2px solid rgba(139,0,0,0.12);
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.adv-cta-left { flex: 1.2; min-width: 300px; }
.adv-cta-badge {
  display: inline-block; background: var(--w3); color: var(--r1);
  padding: 5px 14px; border-radius: 50px; font-size: 0.78rem; font-weight: 700;
  margin-bottom: 12px; border: 1px solid rgba(139,0,0,0.15);
}
.adv-cta-title { font-family: var(--fd); font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 800; color: var(--r1); margin-bottom: 10px; }
.adv-cta-sub { font-size: 0.92rem; color: var(--tx2); line-height: 1.7; margin-bottom: 16px; }
.adv-cta-perks { display: flex; gap: 10px; flex-wrap: wrap; }
.adv-cta-perks span {
  background: var(--w3); color: var(--r1); padding: 5px 12px; border-radius: 8px;
  font-size: 0.78rem; font-weight: 600; border: 1px solid rgba(139,0,0,0.1);
}
.adv-cta-right { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 220px; }
.adv-book-btn {
  width: 100%; text-align: center; background: linear-gradient(135deg, var(--r1), var(--r2));
  color: white; padding: 15px 28px; border-radius: 12px; font-weight: 700; font-size: 1rem;
  box-shadow: 0 8px 24px rgba(139,0,0,0.3); transition: var(--t);
}
.adv-book-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(139,0,0,0.45); }
.adv-or { font-size: 0.8rem; color: #888; }
.adv-call { font-weight: 700; color: var(--r1); font-size: 0.95rem; }
.adv-call:hover { text-decoration: underline; }

/* ===== SECTION HEADERS ===== */
.sec-head { text-align:center;margin-bottom:48px; }
.sec-badge {
  display:inline-block;background:var(--w3);color:var(--r1);
  border:1px solid rgba(139,0,0,0.15);padding:5px 16px;border-radius:50px;
  font-size:0.78rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;
}
.sec-title { font-family:var(--fd);font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:800;color:var(--tx1);margin-bottom:12px; }
.sec-sub { font-size:0.94rem;color:var(--tx3);max-width:620px;margin:0 auto;line-height:1.7; }

/* ===== SERVICES SECTION — CLEAN WHITE BACKGROUND ===== */
.services { padding:80px 0; background:var(--w1); position: relative; overflow: hidden; color: var(--tx1); }

.services .sec-title { color: var(--r1) !important; text-shadow: none; }
.services .sec-sub { color: var(--tx3) !important; text-shadow: none; }

/* Video slideshow removed on this section so the white background shows cleanly */
.bg-video-wrapper { display: none; }

.bg-video-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.1); filter: brightness(1.05) contrast(1.1);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bg-video-slide.active {
  opacity: 0.82; transform: scale(1.0);
}

.bg-video-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at center, rgba(15, 3, 3, 0.35) 0%, rgba(15, 3, 3, 0.65) 70%, rgba(15, 3, 3, 0.85) 100%),
              linear-gradient(180deg, rgba(15, 3, 3, 0.7) 0%, rgba(20, 4, 4, 0.5) 50%, rgba(15, 3, 3, 0.8) 100%);
  z-index: 2;
}

.bg-video-badge {
  position: absolute; top: 18px; right: 24px; z-index: 10;
  background: rgba(196, 30, 58, 0.92); backdrop-filter: none !important;
  border: 1px.5px solid #FFD700; color: #FFF;
  padding: 8px 18px; border-radius: 50px; font-size: 0.78rem; font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.5px;
  box-shadow: 0 6px 20px rgba(196, 30, 58, 0.4);
}

.bgv-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #FFD700;
  animation: blink 1.2s infinite; flex-shrink: 0;
}

/* DECORATED AMBULANCE SECTION */
.dec-amb-section {
  background: white; border-radius: 20px; padding: 36px;
  box-shadow: 0 10px 32px rgba(139,0,0,0.08); border: 2px solid rgba(139,0,0,0.1);
  margin-bottom: 48px;
}
.dec-amb-header {
  display: flex; align-items: center; gap: 18px; margin-bottom: 28px;
  padding-bottom: 20px; border-bottom: 1px solid rgba(139,0,0,0.08); flex-wrap: wrap;
}
.dec-amb-icon { font-size: 2.5rem; flex-shrink: 0; }
.dec-amb-title { font-family: var(--fd); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--r1); }
.dec-amb-sub { font-size: 0.88rem; color: var(--tx3); margin-top: 2px; }
.dec-amb-call-btn {
  margin-left: auto; background: linear-gradient(135deg, var(--r1), var(--r2));
  color: white; padding: 12px 22px; border-radius: 50px; font-weight: 700;
  font-size: 0.88rem; white-space: nowrap; transition: var(--t);
}
.dec-amb-call-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139,0,0,0.3); }

/* Two cards side by side */
.dec-amb-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.dec-amb-card {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1); border: 1.5px solid rgba(139,0,0,0.1);
  background: var(--w2); transition: var(--t);
}
.dec-amb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.15); }
.dec-amb-img {
  position: relative; height: 280px; overflow: hidden; background: #111;
}
.dec-amb-img img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s;
}
.dec-amb-card:hover .dec-amb-img img { transform: scale(1.06); }
.dec-amb-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  padding: 18px 14px 12px;
}
.dec-amb-features {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.dec-amb-features span {
  background: rgba(255,255,255,0.18); backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.3); color: white;
  padding: 4px 10px; border-radius: 50px; font-size: 0.72rem; font-weight: 600;
}
.dec-amb-foot {
  padding: 18px 20px 20px;
}
.dec-amb-foot p {
  font-size: 0.85rem; color: var(--tx3); line-height: 1.65; margin-bottom: 14px;
}
@media(max-width:700px){
  .dec-amb-grid { grid-template-columns: 1fr; }
  .dec-amb-img { height: 220px; }
  .dec-amb-header { flex-direction: column; align-items: flex-start; }
  .dec-amb-call-btn { margin-left: 0; width: 100%; text-align: center; }
}

.amb-section-head {
  display: flex; align-items: center; gap: 18px; margin-bottom: 28px;
  padding-bottom: 20px; border-bottom: 1px solid rgba(139,0,0,0.08);
}
.amb-section-icon { font-size: 2.5rem; flex-shrink: 0; }
.amb-section-title { font-family: var(--fd); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--r1); }
.amb-section-sub { font-size: 0.88rem; color: var(--tx3); margin-top: 2px; }
.amb-call-btn {
  margin-left: auto; background: linear-gradient(135deg, var(--r1), var(--r2));
  color: white; padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 0.88rem;
  white-space: nowrap; transition: var(--t);
}
.amb-call-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139,0,0,0.3); }

/* DUAL AMBULANCE PHOTO FRAME — Both photos side by side in one box */
.amb-dual-frame {
  display: flex;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(139,0,0,0.15);
  box-shadow: 0 10px 32px rgba(0,0,0,0.1);
  background: #111;
  height: 300px;
}
.amb-dual-photo {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.amb-dual-photo img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s;
  display: block;
}
.amb-dual-photo:hover img { transform: scale(1.05); }
.amb-dual-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(139,0,0,0.9), transparent);
  color: white; padding: 14px 14px 10px;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.5px;
}
.amb-dual-divider {
  width: 3px; background: white; flex-shrink: 0; z-index: 2;
}
@media(max-width:600px){
  .amb-dual-frame { flex-direction: column; height: auto; }
  .amb-dual-photo { height: 200px; }
  .amb-dual-divider { width: 100%; height: 3px; }
}

.amb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.amb-card {
  background: var(--w2); border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(139,0,0,0.1); transition: var(--t);
  display: flex; flex-direction: column;
}
.amb-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(139,0,0,0.25); }
.amb-img-wrap { position: relative; height: 260px; overflow: hidden; background: #eee; }
.amb-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.amb-card:hover .amb-img-wrap img { transform: scale(1.05); }
.amb-tag {
  position: absolute; top: 12px; left: 12px; background: rgba(139,0,0,0.9);
  color: white; padding: 4px 12px; border-radius: 50px; font-size: 0.7rem; font-weight: 700; z-index: 2;
}
.amb-tag.urgent { background: #E53E3E; animation: pulseRed 1.5s infinite; }
@keyframes pulseRed{0%,100%{box-shadow:0 0 0 0 rgba(229,62,62,0.5)}50%{box-shadow:0 0 0 6px rgba(229,62,62,0)}}
.amb-img-badge {
  position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.75);
  color: white; padding: 4px 10px; border-radius: 6px; font-size: 0.65rem; font-weight: 700; letter-spacing: 1px;
}
.amb-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.amb-card-body h3 { font-family: var(--fd); font-size: 1.25rem; font-weight: 700; color: var(--tx1); margin-bottom: 8px; }
.amb-card-body p { font-size: 0.87rem; color: var(--tx3); line-height: 1.7; margin-bottom: 16px; flex: 1; }
.amb-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.amb-features span {
  background: white; color: var(--r1); padding: 4px 10px; border-radius: 50px;
  font-size: 0.72rem; font-weight: 600; border: 1px solid rgba(139,0,0,0.12);
}

/* GENERAL SERVICES GRID */
.srv-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px; }
.srv-card {
  background:white;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);border:1px solid rgba(139,0,0,0.08);
  transition:var(--t);display:flex;flex-direction:column;
}
.srv-card:hover { transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(139,0,0,0.2); }
.srv-img-box { position:relative;height:210px;overflow:hidden;background:var(--w3); }
.srv-img-box img { width:100%;height:100%;object-fit:cover;transition:transform 0.4s; }
.srv-card:hover .srv-img-box img { transform:scale(1.06); }
.srv-overlay-lbl {
  position:absolute;top:10px;right:10px;background:rgba(139,0,0,0.85);
  color:white;padding:4px 10px;border-radius:50px;font-size:0.65rem;font-weight:700;z-index:2;
}

/* SPECIAL VISUAL BOXES (Humanized AI Artwork for Pandit / Shraddh / Pind / Flowers) */

/* Pandit Box */
.pandit-img-box { background: linear-gradient(135deg, #FFF8E1, #FFE0B2); position: relative; }
.pandit-scene {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative; padding: 12px;
}
.pandit-glow { position: absolute; width: 140px; height: 140px; background: radial-gradient(circle, rgba(255,152,0,0.3), transparent 70%); border-radius: 50%; }
.havan-illustration { display: flex; align-items: flex-end; gap: 12px; z-index: 2; margin-bottom: 6px; }
.havan-kund-art { width: 50px; height: 35px; background: linear-gradient(to top, #795548, #A1887F); clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.havan-flames { font-size: 1.8rem; animation: flicker 1s infinite alternate; }
.pandit-silhouette { display: flex; flex-direction: column; align-items: center; }
.p-head { width: 28px; height: 28px; border-radius: 50%; background: #D7CCC8; position: relative; }
.p-tilak { width: 3px; height: 8px; background: var(--r2); position: absolute; top: 3px; left: 50%; transform: translateX(-50%); }
.p-shawl { width: 34px; height: 36px; background: linear-gradient(to bottom, #FFE0B2, #FFB74D); border-radius: 4px; }
.p-hands { font-size: 1.2rem; margin-top: -6px; }
.pandit-diyas-row { font-size: 0.85rem; letter-spacing: 4px; z-index: 2; margin-top: 4px; }
.pandit-om-bg { position: absolute; right: 12px; top: 12px; font-family: serif; font-size: 2.2rem; color: rgba(139,0,0,0.15); }
.pandit-flowers-row { font-size: 0.8rem; z-index: 2; margin-top: 2px; }

/* Shraddh Box */
.shraddh-img-box { background: linear-gradient(135deg, #F5E6D3, #E0C3A0); position: relative; }
.shraddh-scene { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; position: relative; }
.shraddh-bg-glow { position: absolute; inset: 0; background: radial-gradient(circle, rgba(212,175,55,0.25), transparent 75%); }
.shraddh-pandit-area { display: flex; align-items: center; gap: 16px; z-index: 2; margin-bottom: 6px; }
.s-pandit-fig { display: flex; flex-direction: column; align-items: center; }
.s-p-head { width: 24px; height: 24px; border-radius: 50%; background: #D7CCC8; position: relative; }
.s-p-tilak { width: 3px; height: 6px; background: var(--r2); position: absolute; top: 2px; left: 50%; transform: translateX(-50%); }
.s-p-body { width: 30px; height: 32px; background: #FFE0B2; border-radius: 4px; }
.s-p-arms { font-size: 1.1rem; }
.shraddh-thali { display: flex; flex-direction: column; align-items: center; }
.thali-plate { font-size: 2.2rem; }
.thali-items { font-size: 0.8rem; letter-spacing: 2px; margin-top: -6px; }
.shraddh-diyas { font-size: 0.9rem; letter-spacing: 3px; z-index: 2; }
.shraddh-om { position: absolute; left: 12px; top: 10px; font-family: serif; font-size: 2rem; color: rgba(139,0,0,0.18); }
.shraddh-label { font-size: 0.85rem; font-weight: 800; color: var(--r1); z-index: 2; letter-spacing: 2px; margin-top: 2px; }

/* Pind Daan Box */
.pind-img-box { background: linear-gradient(180deg, #FFB74D 0%, #FF9800 35%, #29B6F6 65%, #0288D1 100%); position: relative; overflow: hidden; }
.pind-scene-art { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; }
.ganga-bg { position: absolute; inset: 0; }
.ganga-wave { position: absolute; width: 200%; height: 20px; background: rgba(255,255,255,0.25); border-radius: 50%; left: -50%; animation: waveFlow 3s linear infinite; }
.w1{top:50%}.w2{top:65%;animation-delay:1s}.w3{top:80%;animation-delay:2s}
@keyframes waveFlow{0%{transform:translateX(0)}100%{transform:translateX(25%)}}
.pind-ritual-area { display: flex; align-items: center; gap: 14px; z-index: 3; margin-bottom: 4px; }
.pind-pandit { display: flex; flex-direction: column; align-items: center; }
.pp-head { width: 24px; height: 24px; border-radius: 50%; background: #D7CCC8; position: relative; }
.pp-tilak { width: 3px; height: 6px; background: var(--r2); position: absolute; top: 2px; left: 50%; transform: translateX(-50%); }
.pp-body { width: 28px; height: 30px; background: #FFF; border-radius: 4px; }
.pp-arms { font-size: 1rem; }
.pind-items-art { font-size: 1.5rem; z-index: 3; }
.pind-om { font-size: 1.8rem; color: #FFF; font-family: serif; z-index: 3; }
.pind-label { font-size: 0.9rem; font-weight: 800; color: #FFF; z-index: 3; letter-spacing: 2px; }
.pind-loc { font-size: 0.65rem; color: rgba(255,255,255,0.9); font-weight: 600; z-index: 3; }

/* Flower Box */
.flower-img-box { background: linear-gradient(135deg, #FFF3E0, #FFE0B2); position: relative; }
.flower-shringaar-scene { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; }
.flower-burst { text-align: center; }
.fb-ring { font-size: 0.85rem; letter-spacing: 2px; }
.fb-ring.fb1 { font-size: 1.1rem; }
.garland-hang { font-size: 0.9rem; letter-spacing: 4px; margin: 2px 0; }
.shringaar-diyas { font-size: 0.85rem; letter-spacing: 3px; }
.shringaar-brand { font-size: 0.6rem; font-weight: 800; color: var(--r1); letter-spacing: 1.5px; }

/* SERVICE BODY */
.srv-body { padding:20px;display:flex;flex-direction:column;flex:1; }
.srv-icon { font-size:1.6rem;margin-bottom:6px; }
.srv-body h3 { font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--tx1);margin-bottom:8px; }
.srv-body p { font-size:0.85rem;color:var(--tx3);line-height:1.65;margin-bottom:14px;flex:1; }
.srv-tags { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px; }
.srv-tags span { background:var(--w3);color:var(--r1);padding:3px 9px;border-radius:50px;font-size:0.7rem;font-weight:600; }
.srv-btn {
  width:100%;background:linear-gradient(135deg,var(--r1),var(--r2));
  color:white;border:none;padding:11px;border-radius:10px;
  font-family:var(--fp);font-size:0.88rem;font-weight:700;cursor:pointer;transition:var(--t);
}
.srv-btn:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,0,0,0.3); }

/* ===== 3-TIER SERVICE PACKAGES STYLES ===== */
.packages-section { position: relative; z-index: 3; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.pkg-card {
  background: rgba(255,255,255,0.96); backdrop-filter: none !important;
  border-radius: 20px; padding: 32px 24px; border: 2px solid rgba(255,255,255,0.8);
  box-shadow: 0 14px 40px rgba(0,0,0,0.25); display: flex; flex-direction: column;
  position: relative; transition: var(--t); transform-style: preserve-3d;
}
.pkg-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 50px rgba(139,0,0,0.35); }
.pkg-card.popular {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF5 100%);
  border: 2.5px solid #FFD700; transform: scale(1.04);
}
.pkg-badge {
  position: absolute; top: -14px; right: 20px;
  background: var(--r1); color: white; padding: 4px 14px; border-radius: 50px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 1px;
}
.pkg-badge.popular-badge {
  background: linear-gradient(90deg, #FFD700, #D4AF37); color: #1A0000;
  box-shadow: 0 4px 14px rgba(212,175,55,0.4);
}
.pkg-title { font-family: var(--fd); font-size: 1.25rem; font-weight: 800; color: var(--r1); margin-bottom: 6px; }
.pkg-sub { font-size: 0.83rem; color: var(--tx3); margin-bottom: 20px; line-height: 1.5; }
.pkg-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; flex: 1; }
.pkg-item { font-size: 0.84rem; color: var(--tx1); font-weight: 500; display: flex; align-items: center; gap: 6px; }

/* ===== FAQ ACCORDION STYLES ===== */
.faq-section { padding: 80px 0; background: var(--w2); }
.faq-accordion { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: white; border-radius: 12px; border: 1.5px solid rgba(139,0,0,0.08);
  box-shadow: var(--shadow); overflow: hidden; transition: var(--t);
}
.faq-question {
  width: 100%; text-align: left; background: none; border: none; padding: 18px 22px;
  font-family: var(--fp); font-size: 0.95rem; font-weight: 700; color: var(--r1);
  display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: var(--t);
}
.faq-question:hover { background: var(--w3); }
.faq-icon { font-size: 1.3rem; font-weight: 800; transition: transform 0.3s ease; color: var(--r2); }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 22px 20px; font-size: 0.88rem; color: var(--tx2); line-height: 1.7; border-top: 1px solid rgba(139,0,0,0.06); }
.faq-item.active .faq-answer { display: block; animation: dropFade 0.3s ease; }

@media(max-width:900px){
  .pkg-grid { grid-template-columns: 1fr; }
  .pkg-card.popular { transform: none; }
}

/* ===== ABOUT ===== */
.about { padding:80px 0;background:var(--w2); }
.about-grid { display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center; }
.about-img-wrap { position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg); }
.about-img-wrap img { width:100%;aspect-ratio:4/3;object-fit:cover; }
.about-badge-box {
  position:absolute;bottom:20px;left:20px;
  background:linear-gradient(135deg,var(--r1),var(--r2));color:white;
  padding:12px 18px;border-radius:12px;text-align:center;
  box-shadow:0 8px 20px rgba(139,0,0,0.35);
}
.about-yr { font-family:var(--fd);font-size:1.8rem;font-weight:900;line-height:1; }
.about-yr-lbl { font-size:0.7rem;font-weight:600; }
.about-p { font-size:0.94rem;color:var(--tx3);line-height:1.8;margin-bottom:14px; }
.about-p strong { color:var(--r1); }
.about-vals { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 24px; }
.val { display:flex;align-items:flex-start;gap:10px;background:white;padding:12px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.val-ic { font-size:1.3rem;margin-top:2px;flex-shrink:0; }
.val b { font-size:0.83rem;color:var(--tx1);display:block; }
.val small { font-size:0.74rem;color:var(--tx3); }
.about-btn {
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--r1),var(--r2));
  color:white;padding:13px 24px;border-radius:50px;
  font-weight:700;font-size:0.9rem;transition:var(--t);
  box-shadow:0 6px 18px rgba(139,0,0,0.25);
}
.about-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,0,0,0.35)}

/* ===== WHY ===== */
.why { padding:80px 0;background:white; }
.why-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.why-card { background:var(--w3);border-radius:var(--r);padding:26px 20px;text-align:center;border:1px solid rgba(139,0,0,0.08);transition:var(--t); }
.why-card:hover { background:linear-gradient(135deg,var(--r1),var(--r2));transform:translateY(-5px);box-shadow:var(--shadow-md); }
.why-card:hover h3,.why-card:hover p { color:white; }
.why-ic { font-size:2.2rem;margin-bottom:12px; }
.why-card h3 { font-family:var(--fd);font-size:1.02rem;font-weight:700;color:var(--tx1);margin-bottom:6px;transition:var(--t); }
.why-card p { font-size:0.83rem;color:var(--tx3);line-height:1.65;transition:var(--t); }

/* ===== BOOKING ===== */
.booking { position:relative;padding:80px 0;overflow:hidden; }
.booking-bg { position:absolute;inset:0;background:linear-gradient(135deg,var(--r1) 0%,#4A0000 100%); }
.booking-bg::before { content:'ॐ';position:absolute;top:50%;left:4%;transform:translateY(-50%);font-size:16rem;color:rgba(255,255,255,0.03);font-family:serif; }
.booking-grid { position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start; }
.booking-title { font-family:var(--fd);font-size:clamp(1.5rem,3vw,2.2rem);color:white;margin-bottom:10px; }
.booking-sub { color:rgba(255,255,255,0.85);font-size:0.92rem;line-height:1.7;margin-bottom:20px; }
.book-offers { display:flex;flex-direction:column;gap:8px;margin-bottom:22px; }
.b-offer { background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);color:white;padding:10px 14px;border-radius:10px;font-size:0.85rem; }
.book-contact-row { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px; }
.bnum { display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:white;padding:10px 14px;border-radius:10px;font-weight:700;font-size:0.92rem;transition:var(--t); }
.bnum:hover { background:rgba(255,255,255,0.22); }
.book-wa-row { display:flex;gap:10px;flex-wrap:wrap; }
.bwa { display:inline-flex;align-items:center;gap:6px;background:rgba(37,211,102,0.22);border:1px solid rgba(37,211,102,0.4);color:white;padding:9px 13px;border-radius:10px;font-weight:600;font-size:0.8rem;transition:var(--t); }
.bwa:hover { background:rgba(37,211,102,0.35); }

/* Booking Form */
.book-form { background:white;border-radius:18px;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,0.2); }
.book-form h3 { font-family:var(--fd);font-size:1.35rem;font-weight:800;color:var(--r1);margin-bottom:18px;text-align:center; }
.f-group { margin-bottom:12px; }
.f-group label { display:block;font-size:0.78rem;font-weight:600;color:var(--tx1);margin-bottom:4px; }
.f-group input,.f-group select,.f-group textarea {
  width:100%;padding:10px 12px;border:1.5px solid rgba(139,0,0,0.14);border-radius:8px;
  font-family:var(--fp);font-size:0.86rem;color:var(--tx1);background:white;outline:none;resize:none;transition:var(--t);
}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus { border-color:var(--r2);box-shadow:0 0 0 3px rgba(196,30,58,0.1); }
.f-discount { background:var(--w3);border:1px dashed rgba(139,0,0,0.2);color:var(--r1);padding:8px 12px;border-radius:8px;font-size:0.78rem;margin-bottom:12px;text-align:center; }
.f-submit { width:100%;background:linear-gradient(135deg,var(--r1),var(--r2));color:white;border:none;padding:13px;border-radius:10px;font-family:var(--fp);font-size:0.92rem;font-weight:700;cursor:pointer;transition:var(--t); }
.f-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,0,0,0.35)}
.f-or { text-align:center;color:#999;font-size:0.75rem;margin:10px 0; }
.f-call-row { display:flex;gap:8px; }
.f-call { flex:1;text-align:center;background:linear-gradient(135deg,var(--r1),var(--r2));color:white;padding:10px;border-radius:8px;font-weight:700;font-size:0.85rem; }

/* ===== TESTIMONIALS ===== */
.testi { padding:80px 0;background:var(--w2); }
.testi-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.testi-card { background:white;border-radius:var(--r);padding:24px;box-shadow:var(--shadow);border:1px solid rgba(139,0,0,0.07);transition:var(--t); }
.testi-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.t-stars { color:#FFB800;font-size:0.95rem;margin-bottom:8px; }
.testi-card p { font-size:0.86rem;color:var(--tx3);line-height:1.75;margin-bottom:16px; }
.t-author { display:flex;align-items:center;gap:10px; }
.t-av { width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--r1),var(--r2));color:white;display:flex;align-items:center;justify-content:center;font-weight:800; }
.t-author b { display:block;font-size:0.85rem;color:var(--tx1); }
.t-author span { font-size:0.72rem;color:var(--tx3); }

/* ===== CONTACT ===== */
.contact { padding:80px 0;background:white; }
.contact-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.c-card { border-radius:var(--r);padding:28px 22px;text-align:center;box-shadow:var(--shadow);transition:var(--t);border:1px solid rgba(139,0,0,0.08); }
.c-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.c-phone{background:linear-gradient(135deg,var(--r1),var(--r2));color:white}
.c-wa{background:linear-gradient(135deg,#128C7E,#25D366);color:white}
.c-hours{background:var(--w3)}
.c-icon{font-size:2.2rem;margin-bottom:10px;display:flex;justify-content:center}
.c-card h3{font-family:var(--fd);font-size:1.1rem;font-weight:700;margin-bottom:12px;color:white}
.c-hours h3{color:var(--r1)}
.c-num{display:block;font-family:var(--fp);font-size:1.3rem;font-weight:700;letter-spacing:0.5px;color:white;margin-bottom:8px;}
.c-num:hover{text-decoration:underline}
.c-phone p{color:rgba(255,255,255,0.85);font-size:0.8rem;margin-top:8px}
.c-wa-btn{display:block;background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.3);color:white;padding:10px;border-radius:8px;font-weight:700;margin-bottom:8px;font-size:0.85rem;}
.c-wa-btn:hover{background:rgba(255,255,255,0.28)}
.hour-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(139,0,0,0.06);font-size:0.84rem}
.hour-row span{color:var(--tx3)}.hour-row b{color:var(--r1)}

/* ===== FOOTER ===== */
.footer { background:#160404; }
.footer-body { display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding:48px 24px; }
.f-logo-img { height: 54px; width: auto; object-fit: contain; margin-bottom: 14px; background: transparent; display: inline-block; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.f-desc { color:rgba(255,255,255,0.55);font-size:0.83rem;line-height:1.75;margin-bottom:14px; }
.f-wa-btns { display:flex;gap:8px; }
.f-wa-icon { display:flex;align-items:center;gap:6px;background:rgba(37,211,102,0.15);border:1px solid rgba(37,211,102,0.3);color:rgba(255,255,255,0.85);padding:7px 12px;border-radius:8px;font-size:0.76rem;font-weight:600; }
.f-wa-icon:hover { background:#25D366;color:white; }
.f-col h4 { font-weight:700;color:white;font-size:0.88rem;margin-bottom:12px; }
.f-col ul { display:flex;flex-direction:column;gap:6px; }
.f-col ul li a { color:rgba(255,255,255,0.55);font-size:0.8rem;transition:var(--t); }
.f-col ul li a:hover { color:white;padding-left:3px; }
.f-contact-nums { display:flex;flex-direction:column;gap:8px; }
.f-cnum { display:inline-block;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.85);padding:8px 12px;border-radius:8px;font-weight:700;font-size:0.82rem; }
.f-cnum:hover { background:var(--r1);color:white; }
.f-cwa { background:rgba(37,211,102,0.15);color:#25D366;display:flex;align-items:center;gap:6px; }
.f-seo-hidden { display:none; }
.footer-bottom { background:rgba(0,0,0,0.35);padding:14px 24px;text-align:center;color:rgba(255,255,255,0.45);font-size:0.78rem; }

/* ===== FLOATING WA ===== */

.fwa-btn { width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,0.25);transition:var(--t);position:relative; }
.fwa1 { background:linear-gradient(135deg,#25D366,#128C7E); }
.fwa2 { background:linear-gradient(135deg,#128C7E,#075E54); }
.fwa-btn:hover { transform:scale(1.1); }
.fwa-tip { position:absolute;right:60px;background:#222;color:white;padding:4px 9px;border-radius:6px;font-size:0.72rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:var(--t); }
.fwa-btn:hover .fwa-tip { opacity:1; }

/* ===== STICKY BOTTOM CALL BAR — ALL SCREENS (Red | Green split like screenshot) ===== */
.mob-call-bar {
  display: flex !important;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 8500;
  height: 58px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
}
.mob-call-a {
  flex: 1;
  background: #8B0000;
  color: white;
  text-align: center;
  padding: 0 16px;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.15);
  transition: background 0.2s;
}
.mob-call-a:hover { background: #6B0000; }
.mob-wa-a {
  flex: 1;
  background: #25D366;
  color: white;
  text-align: center;
  padding: 0 16px;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}
.mob-wa-a:hover { background: #1EB856; }

/* ===== MODAL ===== */
.modal { position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:99999;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter: none !important; }
.modal.open { display:flex; }
.modal-box { background:white;border-radius:18px;padding:28px;max-width:420px;width:100%;position:relative;box-shadow:0 24px 60px rgba(0,0,0,0.3); }
.modal-x { position:absolute;top:10px;right:10px;background:var(--w3);border:none;width:30px;height:30px;border-radius:50%;font-size:0.9rem;cursor:pointer;color:var(--r1);font-weight:700; }
.modal-title { font-family:var(--fd);font-size:1.2rem;font-weight:800;color:var(--r1);margin-bottom:4px; }
.modal-wa { display:flex;flex-direction:column;gap:8px;margin:12px 0; }
.mwa-btn { display:flex;align-items:center;justify-content:center;gap:8px;background:#25D366;color:white;padding:12px;border-radius:8px;font-weight:700;font-size:0.88rem; }
.modal-calls { display:flex;gap:8px; }
.mcall { flex:1;text-align:center;background:linear-gradient(135deg,var(--r1),var(--r2));color:white;padding:10px;border-radius:8px;font-weight:700;font-size:0.85rem; }

/* TOAST */
.toast { position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(100px);background:linear-gradient(135deg,var(--r1),var(--r2));color:white;padding:12px 24px;border-radius:50px;font-weight:700;font-size:0.85rem;z-index:99998;box-shadow:0 6px 24px rgba(139,0,0,0.35);opacity:0;transition:all 0.4s;white-space:nowrap; }
.toast.show { opacity:1;transform:translateX(-50%) translateY(0); }

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 4px;
  background: linear-gradient(90deg, #D4AF37, #FF5252, #FFD700, #C41E3A);
  z-index: 10001; transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

/* ===== NORMAL CLEAN CIRCLE CURSOR ===== */
@media (hover: hover) and (pointer: fine) {
  .cursor-dot { display: none !important; }
  .cursor-ring {
    width: 26px; height: 26px;
    border: 2px solid var(--r1);
    border-radius: 50%; position: fixed; top: -13px; left: -13px;
    pointer-events: none; z-index: 999998;
    transition: transform 0.08s ease-out, border-color 0.2s;
  }
  .cursor-ring.active {
    border-color: #25D366;
    transform: scale(1.3);
  }
}

/* ===== TESTIMONIALS CAROUSEL (IMAGE MATCHING DESIGN) ===== */
.testi-carousel-wrap {
  position: relative; max-width: 1040px; margin: 36px auto 0;
  display: flex; align-items: center; gap: 16px;
}
.testi-track-container { width: 100%; overflow: hidden; padding: 24px 0; }
.testi-track { display: flex; gap: 24px; transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1); }
.t-slide-card {
  width: calc(33.333% - 16px); flex-shrink: 0;
  background: white; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden; display: flex; flex-direction: column; text-align: center;
  position: relative; transition: all 0.35s ease; border: 1px solid rgba(0,0,0,0.04);
}
.t-slide-card:hover { transform: translateY(-8px); box-shadow: 0 18px 45px rgba(37,211,102,0.22); }
.t-card-top { height: 52px; background: white; width: 100%; }
.t-avatar-wrapper {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 10;
}
.t-avatar-circle {
  width: 68px; height: 68px; background: #CBD5E1; border-radius: 50%;
  border: 4px solid white; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.t-green-body {
  background: linear-gradient(135deg, #128C7E, #25D366);
  padding: 44px 22px 26px; border-radius: 24px; color: white;
  display: flex; flex-direction: column; flex: 1; justify-content: space-between;
}
.t-quote { font-size: 2.5rem; color: rgba(255,255,255,0.95); line-height: 1; font-family: Georgia, serif; font-weight: bold; margin-bottom: 2px; }
.t-quote.end-q { text-align: right; margin-top: -10px; margin-bottom: 12px; }
.t-text { font-size: 0.88rem; color: white; line-height: 1.65; margin: 4px 0; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.t-name { font-family: var(--fp); font-size: 0.96rem; font-weight: 900; color: white; letter-spacing: 1px; text-transform: uppercase; margin-top: 14px; }
.t-loc { font-size: 0.78rem; color: rgba(255,255,255,0.9); font-weight: 600; margin-top: 2px; display: block; }
.t-arrow {
  width: 48px; height: 48px; border-radius: 50%; background: #25D366; color: white;
  border: none; font-size: 1.4rem; font-weight: bold; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(37,211,102,0.4); transition: all 0.25s ease; z-index: 15;
}
.t-arrow:hover { background: #128C7E; transform: scale(1.15); box-shadow: 0 8px 24px rgba(18,140,126,0.5); }

/* EXPANDABLE 400+ REVIEWS SECTION STYLES */
.reviews-400-expandable {
  margin-top: 36px; padding: 32px; background: white; border-radius: 24px;
  border: 2px solid rgba(139,0,0,0.12); box-shadow: 0 16px 45px rgba(0,0,0,0.1);
  animation: dropFade 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.r400-header { text-align: center; margin-bottom: 24px; }
.r400-header h3 { font-family: var(--fd); font-size: 1.35rem; font-weight: 800; color: var(--r1); margin-bottom: 6px; }
.r400-header p { font-size: 0.85rem; color: var(--tx3); }
.r400-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.r400-card { background: var(--w2); padding: 18px; border-radius: 14px; border: 1px solid rgba(139,0,0,0.08); transition: var(--t); }
.r400-card:hover { transform: translateY(-4px); background: white; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.r400-stars { color: #FFD700; font-size: 0.9rem; margin-bottom: 6px; }
.r400-card p { font-size: 0.84rem; color: var(--tx2); font-style: italic; line-height: 1.6; margin-bottom: 8px; }
.r400-card b { display: block; font-size: 0.84rem; color: var(--r1); font-weight: 800; }
.r400-card span { font-size: 0.74rem; color: var(--tx3); font-weight: 500; }
/* ===== 50+ STATIONS COVERAGE SECTION STYLES ===== */
.locations-section { padding: 80px 0; background: var(--w2); border-bottom: 1px solid rgba(139,0,0,0.06); }
.loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.loc-card {
  background: white; border-radius: 18px; padding: 24px;
  border: 1.5px solid rgba(139,0,0,0.08); box-shadow: var(--shadow);
  transition: var(--t);
}
.loc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.loc-head { font-family: var(--fp); font-size: 1.05rem; font-weight: 800; color: var(--r1); margin-bottom: 14px; }
.loc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-pill {
  background: var(--w3); color: var(--r1); border: 1px solid rgba(139,0,0,0.12);
  padding: 5px 12px; border-radius: 50px; font-size: 0.78rem; font-weight: 600;
  transition: var(--t); cursor: default;
}
.loc-pill:hover { background: var(--r1); color: white; transform: scale(1.05); }

.pan-india-banner {
  margin-top: 32px; background: linear-gradient(135deg, var(--r1), var(--r2));
  color: white; border-radius: 20px; padding: 28px 32px; display: flex;
  align-items: center; gap: 24px; box-shadow: var(--shadow-lg);
}
.pib-ic { font-size: 2.5rem; flex-shrink: 0; }
.pib-txt { flex: 1; }
.pib-txt h3 { font-family: var(--fd); font-size: 1.25rem; font-weight: 800; margin-bottom: 6px; }
.pib-txt p { font-size: 0.85rem; color: rgba(255,255,255,0.9); line-height: 1.6; }
.pib-btn {
  background: white; color: var(--r1); padding: 12px 22px; border-radius: 50px;
  font-weight: 800; font-size: 0.88rem; white-space: nowrap; transition: var(--t);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.pib-btn:hover { background: #FFFDF5; transform: scale(1.04); }

/* ===== BUTTON 400+ REVIEWS (MATCHING ATTACHED IMAGE EXACTLY) ===== */
.btn-all-reviews {
  background: linear-gradient(180deg, #A80000 0%, #8B0000 50%, #6E0000 100%);
  color: white; border: 2px solid rgba(255,215,0,0.4); padding: 16px 36px;
  border-radius: 50px; font-family: var(--fp); font-size: 1rem; font-weight: 800;
  cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 12px 30px rgba(139,0,0,0.45); display: inline-flex; align-items: center;
  gap: 10px; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  animation: pulseGlow 3s infinite alternate;
}
.btn-all-reviews:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 45px rgba(139,0,0,0.6);
  border-color: #FFD700;
}
@keyframes pulseGlow {
  0% { box-shadow: 0 10px 25px rgba(139,0,0,0.4); }
  100% { box-shadow: 0 14px 40px rgba(196,30,58,0.7); }
}

/* ===== MAKE US 1% BETTER EVERYDAY STYLES ===== */
.feedback-1percent { padding: 80px 0; background: var(--w3); border-top: 1px solid rgba(139,0,0,0.08); }
.f1-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: start; }
.f1-form-card {
  background: white; border-radius: 20px; padding: 28px;
  box-shadow: var(--shadow-md); border: 1.5px solid rgba(139,0,0,0.1);
}
.f1-form-card h3 { font-family: var(--fd); font-size: 1.3rem; font-weight: 800; color: var(--r1); margin-bottom: 6px; }
.star-rating-select { display: flex; gap: 8px; font-size: 1.6rem; cursor: pointer; margin-top: 4px; }
.star-rating-select span { transition: transform 0.15s ease; opacity: 0.35; }
.star-rating-select span.active-star, .star-rating-select span:hover { opacity: 1; transform: scale(1.2); }
.f1-suggestions-card {
  background: white; border-radius: 20px; padding: 28px;
  box-shadow: var(--shadow-md); border: 1.5px solid rgba(139,0,0,0.1);
}
.f1-suggestions-card h3 { font-family: var(--fd); font-size: 1.3rem; font-weight: 800; color: var(--r1); margin-bottom: 6px; }
.f1-suggestions-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.f1-sug-item {
  background: var(--w2); border-left: 4px solid #25D366; padding: 14px 16px;
  border-radius: 0 12px 12px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.f1-sug-quote { font-size: 0.84rem; color: var(--tx1); font-style: italic; line-height: 1.6; margin-bottom: 6px; }
.f1-sug-author { font-size: 0.78rem; color: var(--tx3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.f1-sug-author b { color: var(--r1); }
.f1-tag { background: rgba(37,211,102,0.15); color: #128C7E; font-weight: 700; font-size: 0.7rem; padding: 2px 8px; border-radius: 50px; margin-left: auto; }

/* 400+ REVIEWS MODAL CARDS */
.modal-reviews-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.m-rev-card { background: var(--w2); padding: 16px; border-radius: 12px; border: 1px solid rgba(139,0,0,0.08); }
.m-rev-card p { font-size: 0.85rem; color: var(--tx2); margin: 6px 0; line-height: 1.6; font-style: italic; }
.m-rev-card b { font-size: 0.84rem; color: var(--r1); }
.m-rev-card span { font-size: 0.76rem; color: var(--tx3); }

@media(max-width:900px){
  .t-slide-card { min-width: 100%; }
  .f1-grid { grid-template-columns: 1fr; }
}

/* ===== 3D CARD DEPTH & SHIMMER EFFECTS ===== */
.srv-card, .dec-amb-card, .testi-card, .c-card, .adv-cta-box, .why-card {
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

.srv-card::after, .dec-amb-card::after, .testi-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform 0.6s ease; pointer-events: none;
}

.srv-card:hover::after, .dec-amb-card:hover::after, .testi-card:hover::after {
  transform: translateX(100%);
}

.reveal { opacity:0;transform:translateY(35px) scale(0.98);transition:opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.visible { opacity:1;transform:translateY(0) scale(1); }

/* MOBILE TOUCH MICRO-INTERACTIONS */
.touch-active {
  transform: scale(0.96) !important;
  opacity: 0.9 !important;
  transition: transform 0.1s ease !important;
}

/* RESPONSIVE */
@media(max-width:1100px){
  .amb-grid{grid-template-columns:1fr}
  .footer-body{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .nav-links{display:none}
  
  .about-grid{grid-template-columns:1fr}
  .booking-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .adv-cta-box{flex-direction:column;align-items:stretch;padding:28px 24px}
  .adv-cta-right{min-width:auto}
}
@media(max-width:640px){
  .header{top:28px}
  .logo-img{height:54px}
  .hero-inner{padding:28px 0}
  .hero-actions{flex-direction:column}
  .btn-call,.btn-call2,.btn-wa{justify-content:center;text-align:center}
  .emergency-bar{flex-wrap:wrap}.emrg-btn{width:100%;text-align:center;margin:0}
  .srv-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .footer-body{grid-template-columns:1fr;padding:32px 20px}
  .f-call-row,.modal-calls{flex-direction:column}
  .stat{padding:10px;min-width:90px}
  .stat-div{display:none}
  .amb-section{padding:20px}
  .amb-section-head{flex-wrap:wrap}
  .amb-call-btn{width:100%;text-align:center;margin-top:6px}
  .mob-call-a,.mob-wa-a{font-size:0.85rem;gap:6px}
}

/* ===== ANDROID PHONE OPTIMIZATIONS (6-7 inch, ~360-480px) ===== */
@media(max-width:640px){
  /* Reserve space so sticky bottom call bar never covers page content */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px));}

  /* Stats: 2-column grid instead of squeezed 5-across */
  .stats-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 4px;width:100%;}
  .stats-row .stat:nth-child(5){grid-column:1 / -1;}
  .stat{padding:10px 8px;min-width:0;}
  .snum,.snum-fix{font-size:clamp(1.6rem,7vw,2.1rem);}
  .slbl{font-size:0.72rem;}

  /* Sticky call/whatsapp bar — safe-area aware, no overflow */
  .mob-call-bar{
    height:auto;min-height:56px;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .mob-call-a,.mob-wa-a{
    padding:14px 8px;font-size:0.9rem;gap:6px;
    min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}

@media(max-width:430px){
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .snum,.snum-fix{font-size:1.5rem;}
  .splus{font-size:1rem;}
  .slbl{font-size:0.68rem;line-height:1.25;}
  .mob-call-a,.mob-wa-a{font-size:0.82rem;padding:12px 6px;letter-spacing:0;}
  .fwa{bottom:calc(72px + env(safe-area-inset-bottom, 0px)) !important;}
}

/* ===== PHONE HERO IMAGE CROP FIX (portrait phones) ===== */
@media(max-width:640px){
  html,body{max-width:100vw;overflow-x:hidden;}
  .hero{min-height:auto;}
  .hero-img{
    width:100vw;height:100%;
    object-fit:cover;
    object-position:60% center; /* pull focal point toward bird */
  }
  .hero-bg{width:100vw;left:0;right:0;}
  .hero-inner{max-width:100%;padding:24px 4px;}
  .hero-h1{gap:4px;margin-bottom:14px;}
  .hero-sub{margin-bottom:22px;}
}
@media(max-width:430px){
  .hero-img{object-position:65% center;}
}

/* ===== HIDE THIRD-PARTY EDITOR BADGE (best-effort, published site) ===== */
#vikas-mishra-badge,
[id^="vikas-mishra-badge"],
[class*="vikas-mishra-badge"],
a[href*="vikas-mishra.dev"][class*="badge"],
iframe[src*="vikas-mishra.dev"][style*="fixed"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.f-address-box {
  margin-top: 18px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.f-addr-title {
  color: #FFD700 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
.f-addr-text {
  font-style: normal !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}







/* ===== SLIM COMPACT HEADER OPTIMIZATION ===== */




/* ===== FLOATING WIDGET GROUP ===== */
.floating-widget-group {
  position: fixed !important;
  bottom: 85px !important;
  right: 20px !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.float-btn {
  position: static !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
  border: 2.5px solid #ffffff !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  text-decoration: none !important;
  margin: 0 !important;
}

.float-call-btn {
  position: static !important;
  background: #d32f2f !important;
}

.float-wa-btn {
  position: static !important;
  background: #25D366 !important;
}

@media (max-width: 768px) {
  .floating-widget-group {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    gap: 12px !important;
  }
  .float-btn {
    width: 48px !important;
    height: 48px !important;
    border-width: 2px !important;
  }
}

  .float-btn {
    width: 48px !important;
    height: 48px !important;
    border-width: 2px !important;
  }
  .float-btn svg {
    width: 24px !important;
    height: 24px !important;
  }
}

  .float-btn {
    width: 48px !important;
    height: 48px !important;
    border-width: 2px !important;
  }
  .float-btn svg {
    width: 24px !important;
    height: 24px !important;
  }
}

  .float-btn {
    width: 50px !important;
    height: 50px !important;
    border-width: 2px !important;
  }
  .float-btn svg {
    width: 24px !important;
    height: 24px !important;
  }
}




}

}


/* ===== HOME PAGE CARDS & BOXES IN BRIGHT WHITE COLOUR ===== */
.address-highlight-card,
.clean-office-card,
.office-address-card,
.address-card-hero,
.r400-card,
.t-card-top,
.val,
.why,
.contact,
.testi-card,
.book-form,
.modal-box,
.service-card {
  background: #ffffff !important;
  color: #222222 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.address-highlight-card h3,
.clean-office-card h3,
.office-address-card h3,
.address-card-hero h3,
.r400-card h3,
.val h4,
.why h2,
.contact h2,
.testi-card p,
.book-form label,
.book-form h3 {
  color: #111111 !important;
}

.address-highlight-card p,
.clean-office-card p,
.office-address-card p,
.address-card-hero p,
.r400-card p,
.val p {
  color: #444444 !important;
}

.book-form input,
.book-form select,
.book-form textarea {
  background: #ffffff !important;
  border: 1px solid #dddddd !important;
  color: #222222 !important;
}

.book-form input::placeholder,
.book-form textarea::placeholder {
  color: #888888 !important;
}


/* ===== FLOATING WHITE CAPSULE NAVBAR (EXACT MATCH TO IMAGE 2) ===== */
.header,
.header.scrolled {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(96%, 1360px) !important;
  max-width: 1360px !important;
  z-index: 999999 !important;
  background: #ffffff !important;
  border-radius: 40px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  padding: 4px 18px 4px 20px !important;
  border: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 0 !important;
  width: 100% !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

.nav-logo img,
.logo-img {
  height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: clamp(5px, 0.75vw, 13px) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 1 !important;
}

.nav-links > li > a {
  color: #333333 !important;
  font-weight: 600 !important;
  font-size: clamp(0.74rem, 0.75vw, 0.82rem) !important;
  padding: 6px clamp(4px, 0.5vw, 9px) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

.nav-links > li > a:hover {
  color: #c62828 !important;
}

.nav-call-btn {
  background: #c62828 !important;
  color: #ffffff !important;
  padding: 7px clamp(11px, 0.85vw, 16px) !important;
  border-radius: 50px !important;
  font-size: clamp(0.76rem, 0.78vw, 0.82rem) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(198, 40, 40, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-right: 4px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1120px) {
  .header,
  .header.scrolled {
    width: 96% !important;
    padding: 4px 14px 4px 16px !important;
  }
  .nav-links {
    gap: 5px !important;
  }
  .nav-links > li > a {
    font-size: 0.73rem !important;
    padding: 5px 5px !important;
  }
  .nav-call-btn {
    padding: 6px 12px !important;
    font-size: 0.76rem !important;
    margin-right: 2px !important;
  }
}

@media (max-width: 992px) {
  .header,
  .header.scrolled {
    top: 10px !important;
    width: 94% !important;
    border-radius: 35px !important;
    padding: 2px 6px !important;
  }
}



/* ===== MOBILE HAMBURGER BUTTON (THREE DASH ) ===== */
.mobile-hamburger-btn {
  display: none;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  z-index: 10002;
}

.mobile-hamburger-btn .hamburger-bar {
  display: block;
  width: 24px;
  height: 2.5px;
  background: #111111;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* ===== MOBILE SLIDE-OUT DRAWER MENU ===== */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

.mobile-nav-drawer.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mobile-drawer-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 82%;
  max-width: 340px;
  height: 100%;
  background: linear-gradient(180deg, #1c0a0a 0%, #0d0404 100%);
  border-left: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.mobile-nav-drawer.active .mobile-drawer-content {
  transform: translateX(0);
}

.mobile-drawer-header {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-drawer-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mobile-drawer-close:hover {
  background: #c62828;
  border-color: #c62828;
}

.mobile-drawer-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.mobile-drawer-badge {
  background: rgba(198, 40, 40, 0.2);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #FFD700;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

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

.mobile-drawer-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #f1f1f1;
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
}

.mobile-drawer-links a:hover,
.mobile-drawer-links a:active {
  background: linear-gradient(90deg, rgba(198, 40, 40, 0.3) 0%, rgba(255, 215, 0, 0.15) 100%);
  border-color: #FFD700;
  color: #FFD700;
  transform: translateX(4px);
}

.mobile-drawer-links .m-icon {
  font-size: 1.2rem;
}

.mobile-drawer-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 15px;
}

.m-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.m-cta-btn.m-call {
  background: linear-gradient(135deg, #c62828 0%, #8b0000 100%);
  color: #ffffff;
  border: 1.5px solid #FFD700;
}

.m-cta-btn.m-wa {
  background: #25D366;
  color: #ffffff;
}

/* ===== RESPONSIVE MEDIA QUERIES FOR MOBILE MENU ===== */
@media (max-width: 992px) {
  .nav-links {
    display: none !important;
  }
  .mobile-hamburger-btn {
    display: flex !important;
  }
}

/* ===== PERFORMANCE & 0.01S IMAGE LATENCY OPTIMIZATIONS ===== */
img {
  content-visibility: auto;
  transform: translateZ(0);
}

.hero-bg, .hero-content, .card {
  will-change: transform, opacity;
}



/* ===== 100% PERFECT MOBILE PHONE UI OVERRIDES (320px - 768px) ===== */

/* Prevent horizontal overflow on smartphones */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
  touch-action: manipulation;
}

/* Ensure container elements never stretch wider than phone screen */
*, *:before, *:after {
  box-sizing: border-box !important;
}

/* Mobile Header Capsule Optimization */
@media (max-width: 768px) {
  .site-header,
  header,
  .floating-header-pill {
    top: 10px !important;
    width: 94% !important;
    padding: 8px 14px !important;
    border-radius: 40px !important;
    min-height: 52px !important;
  }

  .site-header .brand-logo img,
  header .brand-logo img,
  .header-logo-img {
    height: 32px !important;
    width: auto !important;
    max-width: 130px !important;
  }

  /* Roaming 20% OFF Offer Badge Mobile Fix */
  
  /* Hero Section Phone Alignment */
  .hero-section {
    padding-top: 150px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
    text-align: center !important;
  }

  .hero-title,
  h1.hero-main-title {
    font-size: 1.65rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 12px !important;
    padding: 0 8px !important;
  }

  .hero-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    margin-bottom: 20px !important;
    padding: 0 10px !important;
  }

  /* Stack Hero Buttons vertically with full width on phone */
  .hero-cta-group,
  .hero-buttons {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 0 10px !important;
  }

  .hero-cta-group a,
  .hero-buttons a,
  .btn-primary,
  .btn-secondary {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    border-radius: 30px !important;
  }

  /* 1-Column Responsive Grid Layout for Cards */
  .services-grid,
  .office-grid,
  .address-grid,
  .features-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 12px !important;
  }

  /* Phone Optimized Card Styles */
  .card,
  .service-card,
  .clean-office-card,
  .address-highlight-card,
  .r400-card {
    padding: 16px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
  }

  .card img,
  .service-card img {
    height: 170px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  .card-title,
  h3.service-title {
    font-size: 1.15rem !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
  }

  .card-desc,
  p.service-desc {
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
  }

  /* Form Phone Optimization (Prevents iOS zoom on focus) */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents auto-zoom on mobile safari */
    padding: 12px 14px !important;
    border-radius: 10px !important;
    width: 100% !important;
  }

  /* Bottom Right Floating Action Buttons Phone Position */
  .floating-widget-group {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    gap: 10px !important;
  }

  .float-btn {
    width: 46px !important;
    height: 46px !important;
  }

  .float-btn svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Extra Small Smartphones (< 360px) */
@media (max-width: 360px) {
  .hero-title,
  h1.hero-main-title {
    font-size: 1.45rem !important;
  }
  }




/* ===== PERFECT MOBILE HERO BG VISIBILITY & COLLISION FIX ===== */
@media (max-width: 768px) {
  /* 1. Full Hero Background Image Visible (85vh height) */
  .hero,
  .hero-section,
  #home {
    min-height: 85vh !important;
    padding-top: 105px !important;
    padding-bottom: 40px !important;
    background-size: cover !important;
    background-position: center center !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* 2. Floating 20% OFF Offer Badge Positioned Right Below White Navbar Header (No Collision!) */
  
  /* 3. Hero Main Title Shifted Down to Avoid Badge Collision */
  .hero-title,
  h1.hero-main-title,
  .hero-content h1 {
    margin-top: 38px !important;
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9) !important;
  }

  .hero-subtitle,
  .hero-content p {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    color: #f5f5f5 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
  }

  /* 4. Stats Counter Section Glassmorphic Overlay (Doesn't block hero bg!) */
  .stats-section,
  .hero-stats,
  

  .stat-item .stat-number,
  .stat-number {
    font-size: 1.6rem !important;
    color: #FFD700 !important;
  }

  .stat-item .stat-label,
  .stat-label {
    font-size: 0.78rem !important;
    color: #e0e0e0 !important;
  }
}






  /* 2. 24/7 Golden Badge Positioned Tightly Above Antim Sanskar Seva Line */
  .hero-badge,
  .hero-tagline,
  .badge-247,
  .gold-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 40px !important; /* Clears roaming offer badge at top: 65px */
    margin-bottom: 8px !important; /* Tightly attached right above title line! */
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
    border-radius: 20px !important;
    background: rgba(255, 215, 0, 0.15) !important;
    border: 1px solid rgba(255, 215, 0, 0.45) !important;
    color: #FFD700 !important;
    max-width: 90% !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* 3. Title Sits Immediately Under 24/7 Badge Line */
  .hero-title,
  h1.hero-main-title,
  .hero-content h1 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 1.6rem !important;
    line-height: 1.22 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95) !important;
  }

  /* 4. Subtitle Position */
  .hero-subtitle,
  .hero-content p {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
    color: #f5f5f5 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
  }
}




/* ===== EXACT GREEN BOX POSITION FOR 24/7 GOLDEN BADGE ON MOBILE PHONE ===== */
@media (max-width: 768px) {
  /* 1. Hero Content Container Top Offset */
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-top: 88px !important; /* Pulls content into perfect alignment */
  }

  /* 2. 24/7 Golden Badge Positioned EXACTLY in Green Box Spot */
  .hero-badge,
  .hero-tagline,
  .badge-247,
  .gold-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important; /* Move down into green box spot right above title */
    margin-bottom: 12px !important; /* Crisp gap above Antim Sanskar Seva line */
    padding: 7px 16px !important;
    font-size: 0.8rem !important;
    border-radius: 20px !important;
    background: rgba(45, 25, 5, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.65) !important;
    color: #FFD700 !important;
    max-width: 92% !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  }

  /* 3. Main Title Positioned Immediately Under 24/7 Badge */
  .hero-title,
  h1.hero-main-title,
  .hero-content h1 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 1.6rem !important;
    line-height: 1.22 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95) !important;
  }
}




/* ===== RESPONSIVE & ANIMATED THREE DASH HAMBURGER MENU (MATCHING SCREENSHOT) ===== */
.mobile-hamburger-btn {
  display: flex !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  padding: 8px 10px !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  z-index: 1000000 !important;
  transition: transform 0.2s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.mobile-hamburger-btn:active {
  transform: scale(0.9) !important;
}

.mobile-hamburger-btn .hamburger-bar {
  display: block !important;
  width: 24px !important;
  height: 2.8px !important;
  background: #8b0000 !important; /* Rich Dark Maroon matching user screenshot */
  border-radius: 3px !important;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease !important;
}

/* Transform Three Dash  into 'X' when active */
.mobile-hamburger-btn.active .hamburger-bar:nth-child(1) {
  transform: translateY(7.8px) rotate(45deg) !important;
}
.mobile-hamburger-btn.active .hamburger-bar:nth-child(2) {
  opacity: 0 !important;
}
.mobile-hamburger-btn.active .hamburger-bar:nth-child(3) {
  transform: translateY(-7.8px) rotate(-45deg) !important;
}

@media (min-width: 993px) {
  .mobile-hamburger-btn {
    display: none !important;
  }
}









.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 120px;
}

.stat-number {
  font-family: 'Outfit', 'Georgia', serif !important;
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  letter-spacing: -0.02em;
}

.stat-number.stat-247 {
  font-size: 2.3rem;
  color: #ffffff !important;
}

.stat-plus {
  color: #FFD700 !important;
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 2px;
}

.stat-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #ffffff !important;
  margin-top: 6px;
  opacity: 0.95;
  white-space: nowrap;
}

.stat-divider {
  width: 1px;
  height: 45px;
  background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
  .stats-section {
    padding: 20px 10px;
  }
  
  .stat-divider {
    display: none;
  }
  .stat-number {
    font-size: 1.7rem;
  }
  .stat-number.stat-247 {
    font-size: 1.75rem;
  }
  .stat-label {
    font-size: 0.78rem;
    white-space: normal;
  }
}







.stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 !important;
}

.stat-number {
  font-family: 'Times New Roman', 'Outfit', serif !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}

.stat-plus {
  color: #FFD700 !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
}

.stat-label {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  margin-top: 4px !important;
  opacity: 0.95 !important;
  white-space: nowrap !important;
}

.stat-divider {
  width: 1px !important;
  height: 42px !important;
  background: rgba(255, 255, 255, 0.25) !important;
}

@media (max-width: 768px) {
  
  
  .stat-divider {
    display: none !important;
  }
  .stat-number {
    font-size: 1.55rem !important;
  }
  .stat-label {
    font-size: 0.76rem !important;
    white-space: normal !important;
  }
}



/* ===== RED STATS COUNTER BAR (100% MATCH TO SECOND IMAGE) ===== */
.stats-section {
  width: 100% !important;
  background: linear-gradient(90deg, #8b0000 0%, #a70000 50%, #700000 100%) !important;
  border-top: 1px solid rgba(255, 215, 0, 0.35) !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.35) !important;
  padding: 24px 0 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

.stats-counter-bar {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
}

.stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 !important;
  min-width: 120px !important;
}

.stat-number {
  font-family: 'Times New Roman', 'Outfit', serif !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  letter-spacing: -0.02em !important;
}

.stat-number.stat-247 {
  font-size: 2.3rem !important;
  color: #ffffff !important;
}

.stat-plus {
  color: #FFD700 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  margin-top: 2px !important;
}

.stat-label {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  margin-top: 6px !important;
  opacity: 0.95 !important;
  white-space: nowrap !important;
}

.stat-divider {
  width: 1px !important;
  height: 45px !important;
  background: rgba(255, 255, 255, 0.25) !important;
}

@media (max-width: 768px) {
  .stats-section {
    padding: 20px 10px !important;
  }
  .stats-counter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 10px !important;
  }
  .stat-divider {
    display: none !important;
  }
  .stat-number {
    font-size: 1.7rem !important;
  }
  .stat-number.stat-247 {
    font-size: 1.75rem !important;
  }
  .stat-label {
    font-size: 0.78rem !important;
    white-space: normal !important;
  }
}





  .stats-counter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 10px !important;
  }

  .stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .stat-number,
  .stat-item .stat-number,
  .stat-number.stat-247 {
    font-family: 'Times New Roman', 'Outfit', serif !important;
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    color: #ffffff !important; /* Pure White Numbers on Mobile! */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  }

  .stat-plus {
    color: #FFD700 !important; /* Gold Plus & Percent Signs! */
    font-weight: 700 !important;
    font-size: 1.3rem !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: #ffffff !important; /* Pure White Labels on Mobile! */
    margin-top: 4px !important;
    opacity: 0.95 !important;
  }
}






  .stats-counter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 0 2px !important;
    gap: 3px !important;
  }

  .stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 1 0px !important;
    min-width: 0 !important;
    padding: 0 2px !important;
  }

  .stat-number,
  .stat-item .stat-number {
    font-family: 'Times New Roman', 'Outfit', serif !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  }

  .stat-number.stat-247 {
    font-size: 1.15rem !important;
    color: #ffffff !important;
  }

  .stat-plus {
    color: #FFD700 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.6rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin-top: 3px !important;
    opacity: 0.95 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  .stat-divider {
    display: block !important;
    width: 1px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    flex-shrink: 0 !important;
  }
}






  .stats-counter-bar {
    display: flex !important;
    flex-direction: column !important; /* VERTICAL STACK ON MOBILE */
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 4px 0 !important;
  }

  .stat-number,
  .stat-item .stat-number {
    font-family: 'Times New Roman', 'Outfit', serif !important;
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  }

  .stat-number.stat-247 {
    font-size: 1.95rem !important;
    color: #ffffff !important;
  }

  .stat-plus {
    color: #FFD700 !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin-top: 4px !important;
    opacity: 0.95 !important;
    white-space: normal !important;
  }

  .stat-divider {
    display: block !important;
    width: 50% !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    margin: 2px 0 !important;
  }
}






.stats-counter-bar {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-around !important;
  min-width: 100% !important;
}

.stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 1 0px !important;
  min-width: 0 !important;
  padding: 0 4px !important;
}

.stat-number,
.stat-item .stat-number {
  font-family: 'Times New Roman', 'Outfit', serif !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.stat-number.stat-247 {
  font-size: 2.3rem !important;
  color: #ffffff !important;
}

.stat-plus {
  color: #FFD700 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  margin-top: 2px !important;
}

.stat-label,
.stat-item .stat-label {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  margin-top: 5px !important;
  opacity: 0.95 !important;
  white-space: nowrap !important;
}

.stat-divider {
  display: block !important;
  width: 1px !important;
  height: 44px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  .stats-section {
    padding: 16px 8px !important;
  }

  .stats-counter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    min-width: 640px !important; /* Preserves 100% exact look from screenshot on phones via smooth touch scroll! */
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .stat-number,
  .stat-item .stat-number {
    font-size: 1.4rem !important;
  }

  .stat-number.stat-247 {
    font-size: 1.45rem !important;
  }

  .stat-plus {
    font-size: 1.1rem !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }

  .stat-divider {
    display: block !important;
    width: 1px !important;
    height: 36px !important;
  }
}






  .hero-content {
    padding-top: 0 !important;
  }

  .hero-badge,
  .hero-tagline,
  .badge-247 {
    margin-top: 45px !important;
    margin-bottom: 12px !important;
  }

  .hero-title,
  h1.hero-main-title,
  .hero-content h1 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 1.65rem !important;
    line-height: 1.22 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95) !important;
  }

  /* 2. Fill Rich Crimson Red Background at Marked Green Line (100% Android Width) */
  .stats-section,
  #home .stats-section,
  .hero-stats,
  .stats-counter-bar-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    background: linear-gradient(90deg, #8b0000 0%, #a70000 50%, #700000 100%) !important;
    background-color: #a70000 !important; /* FILL RICH RED COLOR! */
    border-top: 1px solid rgba(255, 215, 0, 0.4) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.4) !important;
    margin-top: 25px !important; /* Sits right at marked green line */
    padding: 14px 4px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* 3. Fit 100% On Android Screen Width without truncation */
  .stats-counter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    gap: 2px !important;
    box-sizing: border-box !important;
  }

  .stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 1 0px !important;
    min-width: 0 !important;
    padding: 0 2px !important;
  }

  .stat-number,
  .stat-item .stat-number {
    font-family: 'Times New Roman', 'Outfit', serif !important;
    font-size: 1.15rem !important; /* Perfectly sized for Android phone screens! */
    font-weight: 800 !important;
    color: #ffffff !important; /* Pure White Numbers */
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  }

  .stat-number.stat-247 {
    font-size: 1.2rem !important;
    color: #ffffff !important;
  }

  .stat-plus {
    color: #FFD700 !important; /* Gold Plus & Percent Symbols */
    font-weight: 700 !important;
    font-size: 0.95rem !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.62rem !important;
    font-weight: 500 !important;
    color: #ffffff !important; /* Crisp White Labels */
    margin-top: 3px !important;
    opacity: 0.95 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
  }

  .stat-divider {
    display: block !important;
    width: 1px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    flex-shrink: 0 !important;
  }
}






@media (max-width: 768px) {
  /* 1. Header Clearance */
  .hero-section,
  #home {
    padding-top: 125px !important;
  }

  .hero-badge {
    margin-top: 48px !important;
    margin-bottom: 14px !important;
  }

  .hero-title,
  h1.hero-main-title {
    margin-top: 0 !important;
  }

  /* 2. Entire Stats Box (Green Box Area) Made 100% Solid Red */
  .stats-section,
  #home .stats-section,
  .hero-stats,
  .stats-counter-bar-wrapper,
  .stats-counter-bar {
    width: 100% !important;
    max-width: 100% !important;
    background: #a70000 !important;
    background: linear-gradient(90deg, #8b0000 0%, #a70000 50%, #700000 100%) !important;
    background-color: #a70000 !important;
    border-top: 1px solid rgba(255, 215, 0, 0.4) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.4) !important;
    margin-top: 25px !important;
    padding: 16px 4px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
  }

  .stats-counter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 2px !important;
    gap: 2px !important;
  }

  .stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 1 0px !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    background: transparent !important;
  }

  .stat-number,
  .stat-item .stat-number {
    font-family: 'Times New Roman', 'Outfit', serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #ffffff !important; /* Pure White Numbers */
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  }

  .stat-number.stat-247 {
    font-size: 1.2rem !important;
    color: #ffffff !important;
  }

  .stat-plus {
    color: #FFD700 !important; /* Gold Plus & Percent Symbols */
    font-weight: 700 !important;
    font-size: 0.95rem !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.62rem !important;
    font-weight: 500 !important;
    color: #ffffff !important; /* Pure White Labels */
    margin-top: 3px !important;
    opacity: 0.95 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
  }

  .stat-divider {
    display: block !important;
    width: 1px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    flex-shrink: 0 !important;
  }
}




/* ===== 100% UNTOUCHABLE RED STATS BAR ON ALL PHONES & TABLETS ===== */
html body .stats-section,
html body #home .stats-section,
html body .hero-stats,
html body .stats-counter-bar-wrapper {
  background: linear-gradient(90deg, #8b0000 0%, #a70000 50%, #700000 100%) !important;
  background-color: #a70000 !important;
  border-top: 1px solid rgba(255, 215, 0, 0.4) !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.4) !important;
}

html body .stats-counter-bar,
html body .stat-item {
  background: transparent !important;
  background-color: transparent !important;
}

html body .stat-number,
html body .stat-label {
  color: #ffffff !important;
}




/* ===== RESPONSIVE THREE DASH HAMBURGER MENU FOR ANDROID & MOBILE ===== */
@media (max-width: 992px) {
  .navbar.container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 14px !important;
    width: 100% !important;
  }

  .mobile-hamburger-btn {
    display: flex !important;
    position: relative !important;
    z-index: 1000001 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 8px 12px !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    -webkit-tap-highlight-color: rgba(139, 0, 0, 0.2) !important;
    user-select: none !important;
    touch-action: manipulation !important;
  }

  .mobile-hamburger-btn:active {
    transform: scale(0.92) !important;
  }

  .mobile-hamburger-btn .hamburger-bar {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    background: #8b0000 !important; /* Rich Dark Maroon matching user screenshot */
    border-radius: 3px !important;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease !important;
  }

  /* Transform Three Dash into 'X' when active */
  .mobile-hamburger-btn.active .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }
  .mobile-hamburger-btn.active .hamburger-bar:nth-child(2) {
    opacity: 0 !important;
  }
  .mobile-hamburger-btn.active .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }
}

@media (min-width: 993px) {
  .mobile-hamburger-btn {
    display: none !important;
  }
}






/* ===== PERFECT MOBILE DRAWER BUTTONS (MATCHING USER SCREENSHOTS 100%) ===== */
.mobile-nav-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999999 !important;
  display: flex !important;
  justify-content: flex-end !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  pointer-events: none !important;
}

.mobile-nav-drawer.active {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mobile-drawer-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.mobile-drawer-content {
  position: relative !important;
  width: 320px !important;
  max-width: 86vw !important;
  height: 100% !important;
  background: #140505 !important; /* Dark Luxury Background matching 1st screenshot */
  display: flex !important;
  flex-direction: column !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8) !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 2 !important;
  overflow-y: auto !important;
  padding: 20px 16px !important;
}

.mobile-nav-drawer.active .mobile-drawer-content {
  transform: translateX(0) !important;
}

.mobile-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.mobile-drawer-close {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 1.3rem !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-drawer-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.m-drawer-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important; /* Dark Capsule Pill matching 1st screenshot */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 13px 16px !important;
  color: #f1f1f1 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2) !important;
  touch-action: manipulation !important;
}

.m-drawer-btn:active {
  transform: scale(0.97) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Emergency 24/7 Pill Button */
.m-drawer-btn.m-badge-btn {
  background: rgba(80, 10, 10, 0.7) !important;
  border: 1.5px solid #FFD700 !important;
  color: #FFD700 !important;
  font-weight: 700 !important;
  justify-content: center !important;
}

/* Advance Booking Gold Highlight Pill Button */
.m-drawer-btn.m-gold-highlight {
  background: rgba(80, 10, 10, 0.6) !important;
  border: 1.5px solid #FFD700 !important;
  color: #FFD700 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2) !important;
}

.m-icon {
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
}

.mobile-drawer-cta {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.m-cta-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 13px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: #ffffff !important;
}

.m-cta-btn.m-call {
  background: #a70000 !important;
}

.m-cta-btn.m-wa {
  background: #25D366 !important;
}




/* ===== MASTER 100% RESPONSIVE BUTTONS DESIGN SYSTEM FOR PHONE & PC ===== */

/* 1. Global Button Touch & Active Rules */
button,
.btn,
.srv-btn,
.f-submit,
.btn-all-reviews,
.m-drawer-btn,
.m-cta-btn,
.mobile-hamburger-btn,
.mobile-drawer-close,
.modal-x,
.faq-question,
.t-arrow,
a.hero-cta {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(139, 0, 0, 0.2) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

button:active,
.btn:active,
.srv-btn:active,
.f-submit:active,
.btn-all-reviews:active,
.m-drawer-btn:active,
.m-cta-btn:active,
.mobile-hamburger-btn:active,
.modal-x:active,
.faq-question:active,
a.hero-cta:active {
  transform: scale(0.96) !important;
}

/* 2. Mobile Specific Button Responsive Layout (max-width: 768px) */
@media (max-width: 768px) {
  /* Service Card Buttons */
  .srv-btn,
  button.srv-btn {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    margin-top: 12px !important;
    box-sizing: border-box !important;
  }

  /* Drawer Navigation Pill Buttons */
  .m-drawer-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }

  /* Drawer Call & WhatsApp CTA Buttons */
  .m-cta-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Form Submit Button */
  .f-submit,
  button.f-submit {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
    box-sizing: border-box !important;
  }

  /* View All Reviews Button */
  .btn-all-reviews {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }

  /* Testimonial Arrow Buttons */
  .t-arrow {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    font-size: 1.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* FAQ Accordion Header Buttons */
  .faq-question {
    min-height: 48px !important;
    font-size: 0.95rem !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* 3. Section Scroll Margin Fix (Header Clearance) */
section,
[id] {
  scroll-margin-top: 90px !important;
}








/* 1. 24/7 Golden Badge Left-Aligned */
.hero-badge,
.hero-tagline,
.badge-247,
.gold-pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* 2. Main Title Left-Aligned */
.hero-title,
h1.hero-main-title,
.hero-content h1 {
  text-align: left !important;
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 3. Tagline & Subtitle Left-Aligned */
.hero-subtitle,
.hero-tagline-sub,
.hero-content p.subtitle {
  text-align: left !important;
  margin-left: 0 !important;
  justify-content: flex-start !important;
}

/* 4. Description Paragraph Left-Aligned */
.hero-description,
.hero-content p,
.hero-p {
  text-align: left !important;
  margin-left: 0 !important;
  max-width: 650px !important;
}

@media (max-width: 768px) {
  .hero-content,
  #home .hero-content {
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero-badge,
  .hero-tagline,
  .badge-247,
  .gold-pill-badge {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  .hero-title,
  h1.hero-main-title,
  .hero-content h1 {
    text-align: left !important;
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
  }

  .hero-subtitle,
  .hero-description,
  .hero-content p {
    text-align: left !important;
    margin-left: 0 !important;
  }
}






  .hero-badge,
  .hero-tagline,
  .badge-247,
  .gold-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .hero-title,
  h1.hero-main-title,
  .hero-content h1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-subtitle,
  .hero-tagline-sub,
  .hero-content p.subtitle {
    text-align: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-description,
  .hero-content p,
  .hero-p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 780px !important;
  }
}

/* 2. MOBILE PHONE SCREENS (max-width: 768px) -> LEFT-ALIGNED */
@media (max-width: 768px) {
  .hero-content,
  #home .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Left-aligned for Phone */
    text-align: left !important; /* Left-aligned for Phone */
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero-badge,
  .hero-tagline,
  .badge-247,
  .gold-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  .hero-title,
  h1.hero-main-title,
  .hero-content h1 {
    text-align: left !important;
    margin-left: 0 !important;
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
  }

  .hero-subtitle,
  .hero-description,
  .hero-content p {
    text-align: left !important;
    margin-left: 0 !important;
  }
}






/* 1. PC DESKTOP SCREENS (min-width: 769px) -> Left-Aligned & Shifted DOWN lower */
@media (min-width: 769px) {
  .hero,
  .hero-section,
  #home {
    padding-top: 155px !important; /* Pushes content further down on PC */
    padding-bottom: 60px !important;
    padding-left: 6.5% !important; /* Generous left spacing matching user screenshot */
    padding-right: 6.5% !important;
  }

  .hero-content,
  #home .hero-content {
    align-items: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 820px !important;
  }

  .hero-badge,
  .hero-tagline,
  .badge-247,
  .gold-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: 20px !important; /* Gap above main title */
    text-align: left !important;
  }

  .hero-title,
  h1.hero-main-title,
  .hero-content h1 {
    text-align: left !important;
    margin-left: 0 !important;
    font-size: 3.2rem !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }

  .hero-subtitle,
  .hero-tagline-sub,
  .hero-content p.subtitle {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-bottom: 16px !important;
  }

  .hero-description,
  .hero-content p,
  .hero-p {
    text-align: left !important;
    margin-left: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1.55 !important;
    max-width: 780px !important;
  }
}

/* 2. MOBILE PHONE SCREENS (max-width: 768px) -> Left-Aligned & Shifted DOWN lower */
@media (max-width: 768px) {
  .hero,
  .hero-section,
  #home {
    padding-top: 130px !important; /* Pushes content down on phone */
    padding-bottom: 40px !important;
    padding-
    padding-right: 20px !important;
  }

  .hero-content,
  #home .hero-content {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .hero-badge,
  .hero-tagline,
  .badge-247,
  .gold-pill-badge {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    margin-bottom: 12px !important;
  }

  .hero-title,
  h1.hero-main-title,
  .hero-content h1 {
    text-align: left !important;
    margin-left: 0 !important;
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }

  .hero-subtitle,
  .hero-description,
  .hero-content p {
    text-align: left !important;
    margin-left: 0 !important;
  }
}




/* ===== DESKTOP ONLY: SHIFT HERO CONTENT SLIGHTLY TO THE RIGHT ===== */
@media (min-width: 769px) {
  .hero,
  .hero-section,
  #home {
    padding-top: 155px !important;
    padding-bottom: 60px !important;
    padding-left: 13.5% !important; /* Shifts hero content block to the right on PC */
    padding-right: 5% !important;
  }

  .hero-content,
  #home .hero-content {
    align-items: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 760px !important;
  }

  .hero-badge,
  .hero-tagline,
  .badge-247,
  .gold-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    text-align: left !important;
  }

  .hero-title,
  h1.hero-main-title,
  .hero-content h1 {
    text-align: left !important;
    margin-left: 0 !important;
    font-size: 3.2rem !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }

  .hero-subtitle,
  .hero-tagline-sub,
  .hero-content p.subtitle {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-bottom: 16px !important;
  }

  .hero-description,
  .hero-content p,
  .hero-p {
    text-align: left !important;
    margin-left: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1.55 !important;
    max-width: 720px !important;
  }
}

/* MOBILE PHONE UNTOUCHED */
@media (max-width: 768px) {
  .hero,
  .hero-section,
  #home {
    padding-top: 130px !important;
    padding-bottom: 40px !important;
    padding-
    padding-right: 20px !important;
  }
}




/* ===== PHONE-ONLY 100% RESPONSIVE TOUCH BUTTON SYSTEM (max-width: 768px) ===== */
@media (max-width: 768px) {
  /* Touch target optimizations */
  button,
  .btn,
  .srv-btn,
  .f-submit,
  .btn-all-reviews,
  .m-drawer-btn,
  .m-cta-btn,
  .mobile-hamburger-btn,
  .mobile-drawer-close,
  .modal-x,
  .faq-question,
  .t-arrow {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(139, 0, 0, 0.25) !important;
    cursor: pointer !important;
    user-select: none !important;
    min-height: 48px !important;
    transition: transform 0.15s ease, background 0.2s ease !important;
  }

  button:active,
  .btn:active,
  .srv-btn:active,
  .f-submit:active,
  .m-drawer-btn:active,
  .m-cta-btn:active,
  .mobile-hamburger-btn:active {
    transform: scale(0.96) !important;
  }

  .m-drawer-btn {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 13px 16px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .m-drawer-btn.m-gold-highlight {
    background: rgba(80, 10, 10, 0.75) !important;
    border: 1.5px solid #FFD700 !important;
    color: #FFD700 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.25) !important;
  }

  .m-drawer-btn.m-badge-btn {
    background: rgba(90, 15, 15, 0.8) !important;
    border: 1.5px solid #FFD700 !important;
    color: #FFD700 !important;
    font-weight: 700 !important;
    justify-content: center !important;
  }
}




/* ===== MAKE RED STATS COUNTER BAR MUCH LARGER IN SIZE & HEIGHT ===== */
.stats-section,
#home .stats-section,
.hero-stats,
.stats-counter-bar-wrapper {
  background: linear-gradient(90deg, #8b0000 0%, #a70000 50%, #700000 100%) !important;
  background-color: #a70000 !important;
  border-top: 2px solid rgba(255, 215, 0, 0.45) !important;
  border-bottom: 2px solid rgba(255, 215, 0, 0.45) !important;
  padding: 38px 0 !important; /* Generous height on PC */
  width: 100% !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  box-sizing: border-box !important;
}

.stats-counter-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-around !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 1 0px !important;
  background: transparent !important;
}

.stat-number,
.stat-item .stat-number {
  font-family: 'Times New Roman', 'Outfit', serif !important;
  font-size: 2.3rem !important; /* BIG Prominent Numbers for PC */
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.stat-number.stat-247 {
  font-size: 2.4rem !important;
  color: #ffffff !important;
}

.stat-plus {
  color: #FFD700 !important; /* Gold Plus & Percent */
  font-weight: 800 !important;
  font-size: 1.8rem !important;
  margin-left: 2px !important;
}

.stat-label,
.stat-item .stat-label {
  font-size: 0.95rem !important; /* BIG Clear Labels for PC */
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-top: 6px !important;
  opacity: 0.95 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

.stat-divider {
  display: block !important;
  width: 1px !important;
  height: 52px !important; /* Taller Dividers */
  background: rgba(255, 255, 255, 0.4) !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  .stats-section,
  #home .stats-section,
  .hero-stats {
    padding: 24px 0 !important; /* Prominent Height for Phone */
    margin-top: 20px !important;
  }

  .stat-number,
  .stat-item .stat-number {
    font-size: 1.45rem !important;
  }

  .stat-number.stat-247 {
    font-size: 1.5rem !important;
  }

  .stat-plus {
    font-size: 1.2rem !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.7rem !important;
    margin-top: 4px !important;
  }

  .stat-divider {
    height: 38px !important;
  }
}




/* ===== PHONE-ONLY RED STATS BOX UNCLUTTERED OPTIMIZATION (max-width: 768px) ===== */
/* DO NOT TOUCH DESKTOP PC AT ALL! (min-width: 769px IS 100% UNTOUCHED) */

@media (max-width: 768px) {
  .stats-section,
  #home .stats-section,
  .hero-stats,
  .stats-counter-bar-wrapper {
    padding: 14px 2px !important;
    margin-top: 18px !important;
    border-top: 1.5px solid rgba(255, 215, 0, 0.4) !important;
    border-bottom: 1.5px solid rgba(255, 215, 0, 0.4) !important;
    background: linear-gradient(90deg, #8b0000 0%, #a70000 50%, #700000 100%) !important;
    background-color: #a70000 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  }

  .stats-counter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 1px !important;
    gap: 1px !important;
  }

  .stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 1 0px !important;
    min-width: 0 !important;
    padding: 0 1px !important;
    background: transparent !important;
  }

  .stat-number,
  .stat-item .stat-number {
    font-family: 'Times New Roman', 'Outfit', serif !important;
    font-size: 1.05rem !important; /* Perfect uncluttered font size for phone */
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .stat-number.stat-247 {
    font-size: 1.1rem !important;
  }

  .stat-plus {
    color: #FFD700 !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    margin-left: 1px !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.58rem !important; /* Clean uncluttered label size */
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-top: 3px !important;
    opacity: 0.95 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important; /* PREVENTS WORD BREAKING! */
    word-break: keep-all !important;
    hyphens: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }

  .stat-divider {
    display: block !important;
    width: 1px !important;
    height: 24px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    flex-shrink: 0 !important;
  }
}




/* ===== RED STATS BOX SLEEK SMALLER FONT SIZE FOR MOBILE PHONE (max-width: 768px) ===== */
@media (max-width: 768px) {
  .stats-section,
  #home .stats-section,
  .hero-stats,
  .stats-counter-bar-wrapper {
    padding: 10px 2px !important; /* Sleek compact height */
    margin-top: 16px !important;
    border-top: 1px solid rgba(255, 215, 0, 0.4) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.4) !important;
    background: linear-gradient(90deg, #8b0000 0%, #a70000 50%, #700000 100%) !important;
    background-color: #a70000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  }

  .stats-counter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 1px !important;
    gap: 1px !important;
  }

  .stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 1 0px !important;
    min-width: 0 !important;
    padding: 0 1px !important;
    background: transparent !important;
  }

  .stat-number,
  .stat-item .stat-number {
    font-family: 'Times New Roman', 'Outfit', serif !important;
    font-size: 0.92rem !important; /* Sleek smaller font size for phone */
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .stat-number.stat-247 {
    font-size: 0.96rem !important;
  }

  .stat-plus {
    color: #FFD700 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    margin-left: 1px !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.52rem !important; /* Sleek smaller label size for phone */
    font-weight: 500 !important;
    color: #ffffff !important;
    margin-top: 2px !important;
    opacity: 0.92 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  .stat-divider {
    display: block !important;
    width: 1px !important;
    height: 20px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    flex-shrink: 0 !important;
  }
}




/* ===== REPLACE MOBILE STATS BAR WITH IMAGE 2 EXACT CLEAN FIT (max-width: 768px) ===== */
/* DO NOT TOUCH DESKTOP PC AT ALL! (min-width: 769px IS 100% UNTOUCHED) */

@media (max-width: 768px) {
  .stats-section,
  #home .stats-section,
  .hero-stats,
  .stats-counter-bar-wrapper {
    background: linear-gradient(90deg, #8b0000 0%, #a70000 50%, #700000 100%) !important;
    background-color: #a70000 !important;
    padding: 16px 2px !important; /* Generous clean height matching Image 2 */
    margin-top: 18px !important;
    border-top: 1.5px solid rgba(255, 215, 0, 0.4) !important;
    border-bottom: 1.5px solid rgba(255, 215, 0, 0.4) !important;
    width: 100% !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .stats-counter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  .stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex: 1 1 20% !important; /* Exactly 20% per item so NO collision */
    max-width: 20% !important;
    min-width: 0 !important;
    padding: 0 1px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .stat-number,
  .stat-item .stat-number {
    font-family: 'Times New Roman', 'Outfit', serif !important;
    font-size: 0.82rem !important; /* Scaled for 100% clean fit on Android phone screens! */
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .stat-number.stat-247 {
    font-size: 0.86rem !important;
    color: #ffffff !important;
  }

  .stat-plus {
    color: #FFD700 !important; /* Metallic Gold Accent */
    font-weight: 800 !important;
    font-size: 0.7rem !important;
    margin-left: 1px !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.48rem !important; /* Scaled so text NEVER collides or overlaps */
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-top: 3px !important;
    opacity: 0.95 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }

  .stat-divider {
    display: block !important;
    width: 1px !important;
    height: 22px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
}






  .stats-counter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
  }

  .stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 1 0px !important;
    background: transparent !important;
  }

  .stat-number,
  .stat-item .stat-number {
    font-family: 'Times New Roman', 'Outfit', serif !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
  }

  .stat-number.stat-247 {
    font-size: 2.3rem !important;
    color: #ffffff !important;
  }

  .stat-plus {
    color: #FFD700 !important;
    font-weight: 800 !important;
    font-size: 1.7rem !important;
    margin-left: 2px !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-top: 6px !important;
    opacity: 0.95 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.25 !important;
  }

  .stat-divider {
    display: block !important;
    width: 1px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    flex-shrink: 0 !important;
  }
}

/* ===== MOBILE PHONE ULTRA SMALL CLEAN STYLING (max-width: 768px) ===== */
@media (max-width: 768px) {
  .stats-section,
  #home .stats-section,
  .hero-stats,
  .stats-counter-bar-wrapper {
    background: linear-gradient(90deg, #8b0000 0%, #a70000 50%, #700000 100%) !important;
    background-color: #a70000 !important;
    padding: 10px 2px !important;
    margin-top: 16px !important;
    border-top: 1px solid rgba(255, 215, 0, 0.4) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.4) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  }

  .stats-counter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  .stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex: 1 1 20% !important;
    max-width: 20% !important;
    min-width: 0 !important;
    padding: 0 1px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .stat-number,
  .stat-item .stat-number {
    font-family: 'Times New Roman', 'Outfit', serif !important;
    font-size: 0.72rem !important; /* ULTRA SMALL NUMBERS FOR PHONE (11px) */
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  }

  .stat-number.stat-247 {
    font-size: 0.75rem !important;
    color: #ffffff !important;
  }

  .stat-plus {
    color: #FFD700 !important;
    font-weight: 700 !important;
    font-size: 0.62rem !important;
    margin-left: 1px !important;
  }

  .stat-label,
  .stat-item .stat-label {
    font-size: 0.44rem !important; /* ULTRA SMALL LABELS FOR PHONE (7px) */
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-top: 2px !important;
    opacity: 0.95 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    hyphens: none !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }

  .stat-divider {
    display: block !important;
    width: 1px !important;
    height: 18px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
}




/* ===== DESKTOP PC STYLING (min-width: 769px) - UNTOUCHED ===== */
@media (min-width: 769px) {
  .desktop-stats-bar {
    display: block !important;
  }
  
  .mobile-stats-svg-wrapper {
    display: none !important;
  }
}

/* ===== MOBILE PHONE STYLING (max-width: 768px) - PERFECT 100% SVG GRAPHIC FIT ===== */
@media (max-width: 768px) {
  .desktop-stats-bar {
    display: none !important;
  }

  .mobile-stats-svg-wrapper {
    display: block !important;
    width: 100% !important;
    margin-top: 18px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  }

  .phone-stats-svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}




/* ===== TESTIMONIALS CAROUSEL ARROWS & TRACK STYLING (PC & PHONE 100% RESPONSIVE) ===== */
.testi-carousel-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 30px auto !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

.testi-track-container {
  overflow: hidden !important;
  width: 100% !important;
  padding: 15px 0 !important;
}

.testi-track {
  display: flex !important;
  gap: 24px !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  width: max-content !important;
}

.t-slide-card {
  flex: 0 0 340px !important;
  width: 340px !important;
  box-sizing: border-box !important;
}

/* Green Circular Arrow Buttons matching attached user screenshot */
.t-arrow {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border-radius: 50% !important;
  background: #10b981 !important; /* Bright Emerald Green */
  color: #ffffff !important;
  border: none !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  touch-action: manipulation !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.t-arrow:hover {
  background: #059669 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6) !important;
}

.t-arrow:active {
  transform: scale(0.92) !important;
}

.t-arrow.t-prev {
  margin-right: 14px !important;
}

.t-arrow.t-next {
  margin-left: 14px !important;
}

@media (max-width: 768px) {
  .testi-carousel-wrap {
    margin: 15px auto !important;
    padding: 0 4px !important;
  }

  .testi-track {
    gap: 16px !important;
  }

  .t-slide-card {
    flex: 0 0 280px !important;
    width: 280px !important;
  }

  .t-arrow {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1.2rem !important;
  }

  .t-arrow.t-prev {
    margin-right: 6px !important;
  }

  .t-arrow.t-next {
    margin-left: 6px !important;
  }
}




/* ===== RESPONSIVE ALL REVIEWS TOGGLE BUTTON & EXPANDABLE GRID ===== */
.btn-all-reviews {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 36px !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #8b0000 0%, #a70000 50%, #700000 100%) !important;
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  border: 2px solid #FFD700 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 25px rgba(139, 0, 0, 0.45) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  touch-action: manipulation !important;
  user-select: none !important;
  min-height: 52px !important;
}

.btn-all-reviews:hover,
.btn-all-reviews.active-toggle {
  transform: scale(1.04) !important;
  background: linear-gradient(135deg, #a70000 0%, #c00000 100%) !important;
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.35) !important;
}

.btn-all-reviews:active {
  transform: scale(0.96) !important;
}

.reviews-400-expandable {
  margin-top: 30px !important;
  padding: 30px 20px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(139, 0, 0, 0.12) !important;
}

.r400-header {
  text-align: center !important;
  margin-bottom: 28px !important;
}

.r400-header h3 {
  font-size: 1.6rem !important;
  color: #8b0000 !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}

.r400-header p {
  color: #475569 !important;
  font-size: 0.95rem !important;
}

.r400-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}

.r400-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.r400-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 22px rgba(139, 0, 0, 0.12) !important;
  border-color: #FFD700 !important;
}

.r400-stars {
  color: #f59e0b !important;
  font-size: 1.1rem !important;
  margin-bottom: 8px !important;
}

.r400-card p {
  color: #334155 !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  font-style: italic !important;
  margin-bottom: 12px !important;
}

.r400-card b {
  color: #1e293b !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

.r400-card span {
  color: #64748b !important;
  font-size: 0.8rem !important;
  margin-top: 2px !important;
}

@media (max-width: 768px) {
  .btn-all-reviews {
    font-size: 0.92rem !important;
    padding: 14px 22px !important;
    width: 92% !important;
  }

  .r400-grid {
    grid-template-columns: 1fr !important;
  }
}




/* ===== MASTER TESTIMONIALS & REVIEWS RESPONSIVE SYSTEM ===== */
.testi-carousel-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 30px auto !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

.testi-track-container {
  overflow: hidden !important;
  width: 100% !important;
  padding: 15px 0 !important;
}

.testi-track {
  display: flex !important;
  gap: 24px !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  width: max-content !important;
}

.t-slide-card {
  flex: 0 0 340px !important;
  width: 340px !important;
  box-sizing: border-box !important;
}

/* Green Circular Arrow Buttons */
.t-arrow {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 20 !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
  touch-action: manipulation !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.t-arrow:active {
  transform: scale(0.92) !important;
}

.t-arrow.t-prev {
  margin-right: 12px !important;
}

.t-arrow.t-next {
  margin-left: 12px !important;
}

@media (max-width: 768px) {
  .testi-carousel-wrap {
    position: relative !important;
    margin: 15px auto !important;
    padding: 0 6px !important;
  }

  .testi-track-container {
    width: 100% !important;
    padding: 10px 0 !important;
  }

  .testi-track {
    gap: 16px !important;
  }

  .t-slide-card {
    flex: 0 0 calc(100vw - 64px) !important;
    width: calc(100vw - 64px) !important;
    max-width: 330px !important;
  }

  /* Position arrows nicely over left & right edges on phone */
  .t-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1.2rem !important;
  }

  .t-arrow.t-prev {
    left: 2px !important;
    margin-right: 0 !important;
  }

  .t-arrow.t-next {
    right: 2px !important;
    margin-left: 0 !important;
  }
}




/* ===== TESTIMONIAL SLIDE CARD HIGH CONTRAST VISIBILITY STYLING ===== */
.t-slide-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  box-sizing: border-box !important;
}

.t-card-top {
  height: 40px !important;
  background: #f8fafc !important;
}

.t-avatar-wrapper {
  margin-top: -26px !important;
  display: flex !important;
  justify-content: center !important;
}

.t-avatar-circle {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background: #e2e8f0 !important;
  border: 3px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.t-green-body {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  padding: 18px 16px 16px 16px !important;
  color: #ffffff !important;
  text-align: center !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 250px !important;
  box-sizing: border-box !important;
}

.t-quote {
  font-size: 2.2rem !important;
  line-height: 1 !important;
  color: #FFD700 !important; /* Gold Quote Marks */
  font-family: serif !important;
  opacity: 0.95 !important;
}

.t-text {
  color: #ffffff !important; /* BRIGHT SOLID WHITE TEXT */
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  margin: 8px 0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.t-name {
  color: #FFD700 !important; /* BRIGHT GOLD NAME */
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  margin-top: 10px !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  display: block !important;
  visibility: visible !important;
}

.t-loc {
  color: #ffffff !important; /* SOLID WHITE LOCATION */
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  opacity: 0.95 !important;
  display: block !important;
  visibility: visible !important;
}




/* ===== MASTER PHONE LAYOUT FOR TESTIMONIAL CAROUSEL ===== */
@media (max-width: 768px) {
  .testi-carousel-wrap {
    position: relative !important;
    margin: 15px auto !important;
    padding: 0 45px !important; /* Leave room for left & right arrows */
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .testi-track-container {
    width: 100% !important;
    overflow: hidden !important;
    padding: 10px 0 !important;
  }

  .testi-track {
    display: flex !important;
    gap: 16px !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  .t-slide-card {
    flex: 0 0 calc(100vw - 110px) !important;
    width: calc(100vw - 110px) !important;
    max-width: 320px !important;
    min-width: 260px !important;
  }

  /* Arrows neatly flanking the card left and right */
  .t-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 1.1rem !important;
    z-index: 99 !important;
  }

  .t-arrow.t-prev {
    left: 2px !important;
  }

  .t-arrow.t-next {
    right: 2px !important;
  }
}




.btn-all-reviews {
  position: relative !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 32px !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #8b0000 0%, #a70000 50%, #700000 100%) !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  border: 2px solid #FFD700 !important;
  box-shadow: 0 8px 25px rgba(139, 0, 0, 0.45) !important;
  touch-action: manipulation !important;
  user-select: none !important;
  min-height: 52px !important;
}

.btn-all-reviews:active {
  transform: scale(0.96) !important;
}

@media (max-width: 768px) {
  .btn-all-reviews {
    font-size: 0.9rem !important;
    padding: 14px 18px !important;
    width: 94% !important;
    margin: 0 auto !important;
  }
}




/* ===== UNFILTERED ENGINEER BRAND TAG UNDER HERO SCROLL ARROW (PC & PHONE) ===== */
.scroll-hint {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 25px !important;
  margin-bottom: 10px !important;
}

.unfiltered-engineer-brand-tag {
  margin-top: 10px !important;
  display: inline-block !important;
  background: rgba(60, 10, 10, 0.75) !important;
  border: 1px solid rgba(255, 215, 0, 0.45) !important;
  border-radius: 20px !important;
  padding: 5px 16px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(4px) !important;
}

.unfiltered-engineer-brand-tag span {
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  white-space: nowrap !important;
}

.unfiltered-engineer-brand-tag strong {
  color: #FFD700 !important;
  font-weight: 800 !important;
}

@media (max-width: 768px) {
  .scroll-hint {
    margin-top: 18px !important;
    margin-bottom: 5px !important;
  }

  .unfiltered-engineer-brand-tag {
    margin-top: 8px !important;
    padding: 4px 12px !important;
  }

  .unfiltered-engineer-brand-tag span {
    font-size: 0.78rem !important;
  }
}




/* ===== UNFILTERED ENGINEER CLICKABLE REVEAL BRAND TAG ===== */
.scroll-hint {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 25px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.scroll-arrow {
  cursor: pointer !important;
}

.unfiltered-engineer-brand-tag {
  display: none;
  margin-top: 10px !important;
  background: rgba(60, 10, 10, 0.85) !important;
  border: 1px solid rgba(255, 215, 0, 0.5) !important;
  border-radius: 20px !important;
  padding: 5px 16px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  animation: fadeInBrandTag 0.25s ease-in-out !important;
}

@keyframes fadeInBrandTag {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.unfiltered-engineer-brand-tag span {
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  white-space: nowrap !important;
}

.unfiltered-engineer-brand-tag strong {
  color: #FFD700 !important;
  font-weight: 800 !important;
}

@media (max-width: 768px) {
  .scroll-hint {
    margin-top: 18px !important;
    margin-bottom: 5px !important;
  }

  .unfiltered-engineer-brand-tag {
    margin-top: 8px !important;
    padding: 4px 12px !important;
  }

  .unfiltered-engineer-brand-tag span {
    font-size: 0.78rem !important;
  }
}




/* ===== GUARANTEED PROMINENT GLOWING DOWN ARROW BUTTON FOR DESKTOP PC & PHONE ===== */
.scroll-hint {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 25px auto 15px auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 9999 !important;
  user-select: none !important;
  touch-action: manipulation !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.scroll-arrow {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%) !important;
  color: #700000 !important;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.75), 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  border: 2px solid #ffffff !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  animation: bounceDownArrow 2s infinite !important;
  cursor: pointer !important;
}

.scroll-arrow::after {
  content: '∨' !important;
  display: block !important;
  line-height: 1 !important;
}

@keyframes bounceDownArrow {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(8px); }
  60% { transform: translateY(4px); }
}

.scroll-arrow:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.95) !important;
}

.unfiltered-engineer-brand-tag {
  display: none;
  margin-top: 12px !important;
  background: rgba(60, 10, 10, 0.9) !important;
  border: 1px solid rgba(255, 215, 0, 0.6) !important;
  border-radius: 20px !important;
  padding: 6px 18px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  animation: fadeInBrandTag 0.25s ease-in-out !important;
}

@keyframes fadeInBrandTag {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.unfiltered-engineer-brand-tag span {
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  white-space: nowrap !important;
}

.unfiltered-engineer-brand-tag strong {
  color: #FFD700 !important;
  font-weight: 800 !important;
}

@media (max-width: 768px) {
  .scroll-hint {
    margin-top: 18px !important;
    margin-bottom: 5px !important;
  }

  .scroll-arrow {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 1.4rem !important;
  }

  .unfiltered-engineer-brand-tag {
    margin-top: 8px !important;
    padding: 4px 12px !important;
  }

  .unfiltered-engineer-brand-tag span {
    font-size: 0.78rem !important;
  }
}




/* ===== DELETE SCROLL HINT & BRAND TAG ON MOBILE PHONE SCREEN (VISIBLE ON PC ONLY) ===== */
@media (max-width: 768px) {
  .scroll-hint,
  #heroScrollHint,
  .scroll-arrow,
  .unfiltered-engineer-brand-tag,
  #unfilteredBrandTag {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 769px) {
  .scroll-hint {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 25px auto 15px auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 9999 !important;
  }
}




/* ===== FOOTER ENGINEER CREDIT STYLING (PC & MOBILE) ===== */
.footer-bottom {
  padding: 20px 0 25px 0 !important;
  background: #200202 !important;
  border-top: 1px solid rgba(255, 215, 0, 0.2) !important;
  text-align: center !important;
}

.footer-engineer-credit {
  margin-top: 8px !important;
  font-size: 0.92rem !important;
  color: #e2e8f0 !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  visibility: visible !important;
}

.footer-engineer-credit strong {
  color: #FFD700 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

@media (max-width: 768px) {
  .footer-bottom {
    padding: 16px 12px 90px 12px !important; /* Leave room for sticky call bar on phone */
  }

  .footer-engineer-credit {
    font-size: 0.82rem !important;
    margin-top: 6px !important;
  }
}




/* ===== MASTER 100% RESPONSIVE BOOKING MODAL (PC & PHONE) ===== */
.modal {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.75) !important;
  z-index: 999999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(5px) !important;
}

.modal-box {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  max-width: 480px !important;
  width: 100% !important;
  position: relative !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
  border: 2px solid #8b0000 !important;
  box-sizing: border-box !important;
}

.modal-x {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  background: #f1f5f9 !important;
  border: none !important;
  font-size: 1.3rem !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #334155 !important;
  font-weight: 700 !important;
}

.modal-title {
  color: #8b0000 !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

.mwa-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #25D366 !important;
  color: #ffffff !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35) !important;
  touch-action: manipulation !important;
}

.modal-calls {
  display: flex !important;
  gap: 12px !important;
}

.mcall {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #8b0000 !important;
  color: #ffffff !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  touch-action: manipulation !important;
}

/* Book Now Buttons General Responsiveness */
.btn-book, .btn-primary, button[onclick*="openModal"] {
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-book:active, .btn-primary:active, button[onclick*="openModal"]:active {
  transform: scale(0.96) !important;
}

@media (max-width: 768px) {
  .modal-box {
    padding: 22px 18px !important;
    max-width: 95% !important;
  }

  .modal-title {
    font-size: 1.15rem !important;
  }

  .mwa-btn {
    font-size: 0.95rem !important;
    padding: 12px 16px !important;
  }

  .modal-calls {
    flex-direction: column !important;
    gap: 8px !important;
  }
}



/* ===== LOCATION ACCORDION ===== */
.loc-accordion-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

/* ===== SMOOTH ANIMATIONS ===== */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-ready {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ===== MOBILE DRAWER SCROLL FIX ===== */
.mobile-drawer-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}


/* ===== FAST BUTTON RESPONSIVENESS ===== */
.adv-book-btn, .srv-btn, .btn-book, .btn-primary, .f-submit, .float-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out !important;
}

.adv-book-btn:active, .srv-btn:active, .btn-book:active, .btn-primary:active, .f-submit:active, .float-btn:active {
  transform: scale(0.94) !important;
  opacity: 0.9 !important;
}


/* ===== ADVANCE BOOKING REDIRECT PULSE ===== */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.8); transform: scale(1); }
  50% { box-shadow: 0 0 25px 12px rgba(37,211,102,0.5); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); transform: scale(1); }
}

[href*="advance-booking"], .adv-book-btn, .srv-overlay-lbl, .m-gold-highlight {
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
}


/* ===== ADVANCE BOOKING RESPONSIVE STYLES (MATCHING SCREENSHOT 5) ===== */
@media (max-width: 768px) {
  .booking-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .booking-title {
    font-size: 1.6rem !important;
  }
  .booking-sub {
    font-size: 0.92rem !important;
  }
  .b-offer {
    font-size: 0.88rem !important;
    padding: 10px 16px !important;
  }
  .book-form {
    padding: 22px 16px !important;
  }
}


/* ===== MASTER ANDROID PHONE OPTIMIZATION (320px - 768px) ===== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-font-smoothing: antialiased !important;
  -webkit-text-size-adjust: 100% !important;
}

@media (max-width: 768px) {
  /* Containers & Padding */
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  section {
    padding: 35px 0 !important;
  }

  /* Advance Booking Section Android Optimization */
  .booking, section#advance-booking {
    padding: 35px 10px !important;
  }

  .booking-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .booking-info {
    gap: 14px !important;
  }

  .booking-title {
    font-size: 1.45rem !important;
    line-height: 1.28 !important;
  }

  .booking-sub {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
  }

  .book-offers {
    gap: 8px !important;
  }

  .b-offer {
    padding: 10px 14px !important;
    font-size: 0.84rem !important;
    border-radius: 12px !important;
    line-height: 1.35 !important;
  }

  .book-contact-row, .book-wa-row {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .bnum, .bwa {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Form Card Android Optimization */
  .book-form {
    padding: 20px 14px !important;
    border-radius: 16px !important;
    gap: 12px !important;
  }

  .book-form h3 {
    font-size: 1.25rem !important;
    margin-bottom: 6px !important;
  }

  .f-group label {
    font-size: 0.82rem !important;
  }

  .f-group input, .f-group select, .f-group textarea {
    font-size: 16px !important; /* Prevents auto-zoom on Android Chrome & Safari */
    padding: 12px 12px !important;
    min-height: 46px !important;
    border-radius: 8px !important;
  }

  .f-discount {
    font-size: 0.82rem !important;
    padding: 8px 10px !important;
  }

  .f-submit {
    min-height: 50px !important;
    font-size: 1rem !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
  }

  .f-call-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .f-call {
    width: 100% !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
  }

  /* Section Titles & Badges */
  .sec-title {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
  }

  .sec-sub {
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
  }

  .sec-badge {
    font-size: 0.78rem !important;
    padding: 5px 12px !important;
  }

  /* Floating Buttons Phone Position */
  .floating-widget-group {
    bottom: 16px !important;
    right: 14px !important;
    gap: 10px !important;
  }

  .float-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
  }

  .float-btn svg {
    width: 24px !important;
    height: 24px !important;
  }
}


/* ===== ADVANCE BOOKING CLEAN PC & MOBILE PHONE STYLES ===== */
.booking {
  background: #5a0000 !important;
  padding: 60px 0 !important;
  color: #ffffff !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.booking-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  align-items: start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.booking-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.booking-title {
  color: #ffffff !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  font-family: 'Times New Roman', serif !important;
}

.booking-sub {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.book-offers {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 10px !important;
}

.b-offer {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 30px !important;
  padding: 12px 20px !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.book-contact-row, .book-wa-row {
  display: flex !important;
  gap: 12px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}

.bnum {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  padding: 10px 18px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
}

.bwa {
  background: #2e6930 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  padding: 10px 18px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
}

.book-form {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 30px 24px !important;
  color: #222222 !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.book-form h3 {
  color: #8b0000 !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  margin: 0 0 10px 0 !important;
  text-align: center !important;
}

.f-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}

.f-group label {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #444444 !important;
}

.f-group input, .f-group select, .f-group textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #cccccc !important;
  font-size: 16px !important;
  background: #ffffff !important;
  color: #222222 !important;
  box-sizing: border-box !important;
}

.f-discount {
  background: #fff1f2 !important;
  border: 1px dashed #e11d48 !important;
  color: #be123c !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  text-align: center !important;
  font-weight: 600 !important;
}

.f-submit {
  width: 100% !important;
  padding: 14px 20px !important;
  background: #b22222 !important;
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(178,34,34,0.4) !important;
}

.f-or {
  text-align: center !important;
  color: #777777 !important;
  font-size: 0.85rem !important;
  margin: 4px 0 !important;
}

.f-call-row {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
}

.f-call {
  flex: 1 !important;
  text-align: center !important;
  background: #8b0000 !important;
  color: #ffffff !important;
  padding: 12px 10px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
}

/* ===== PHONE MOBILE BREAKPOINT (CRITICAL STACKING FIX FOR ANDROID & IPHONE) ===== */
@media (max-width: 768px) {
  .booking {
    padding: 35px 12px !important;
  }

  .booking-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    width: 100% !important;
  }

  .booking-info {
    width: 100% !important;
    gap: 14px !important;
    text-align: center !important;
    align-items: center !important;
  }

  .booking-title {
    font-size: 1.5rem !important;
    text-align: center !important;
  }

  .booking-sub {
    font-size: 0.9rem !important;
    text-align: center !important;
  }

  .book-offers {
    width: 100% !important;
    gap: 8px !important;
  }

  .b-offer {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.88rem !important;
    padding: 10px 14px !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }

  .book-contact-row, .book-wa-row {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .bnum, .bwa {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
  }

  .book-form {
    width: 100% !important;
    padding: 20px 14px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
  }

  .f-call-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .f-call {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ===== HYPER-FAST 0.01s INSTANT RESPONSE OVERRIDES ===== */
* {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

html {
  scroll-behavior: auto !important; /* Instant jump without scroll lag */
}

button, a, .btn-book, .btn-primary, .f-submit, .loc-accordion-btn, .faq-question, .float-btn, .srv-btn, .adv-book-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
  transition: transform 0.05s ease-out !important;
}

button:active, a:active, .btn-book:active, .btn-primary:active, .f-submit:active, .srv-btn:active, .adv-book-btn:active {
  transform: scale(0.94) translateZ(0) !important;
}




/* ===== MASTER 20% OFF MOVING OFFER BAR (MOBILE & DESKTOP PERFECT) ===== */


.hero {
  overflow-x: hidden !important;
}





@media (max-width: 768px) {
  }


/* ===== PERFECT SMOOTH ROAMING 20% OFF OFFER BADGE ===== */
.hero {
  position: relative !important;
  overflow-x: hidden !important;
}

@keyframes roamLeftToRightDesktop {
  0% {
    left: 20px;
    transform: translateY(0);
  }
  50% {
    left: calc(50% - 150px);
    transform: translateY(-4px);
  }
  100% {
    left: calc(100% - 320px);
    transform: translateY(0);
  }
}

@keyframes roamLeftToRightMobile {
  0% {
    left: 10px;
    transform: translateY(0);
  }
  50% {
    left: calc(50% - 110px);
    transform: translateY(-3px);
  }
  100% {
    left: calc(100% - 240px);
    transform: translateY(0);
  }
}

.floating-roaming-offer,
a.floating-roaming-offer,
#roamingOffer {
  position: absolute !important;
  top: 125px !important;
  
  z-index: 99999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 22px !important;
  background: linear-gradient(135deg, #d32f2f 0%, #8b0000 100%) !important;
  color: #ffffff !important;
  border: 2px solid #FFD700 !important;
  border-radius: 40px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 18px rgba(211, 47, 47, 0.65), 0 0 16px rgba(255, 215, 0, 0.6) !important;
  animation: roamLeftToRightDesktop 10s ease-in-out infinite alternate !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.floating-roaming-offer:active,
.floating-roaming-offer:hover {
  animation-play-state: paused !important;
  transform: scale(1.06) !important;
  box-shadow: 0 0 26px rgba(255, 215, 0, 0.95), 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

.floating-roaming-offer strong {
  color: #FFD700 !important;
  font-weight: 800 !important;
}

.floating-roaming-offer .fro-arrow {
  color: #FFD700 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
}

@media (max-width: 768px) {
  .floating-roaming-offer,
  a.floating-roaming-offer,
  #roamingOffer {
    top: 105px !important;
    height: 34px !important;
    padding: 0 16px !important;
    font-size: 0.78rem !important;
    border-width: 1.8px !important;
    animation: roamLeftToRightMobile 7s ease-in-out infinite alternate !important;
  }
}


/* ===== GUARANTEED 100% WORKING ROAMING 20% OFF BADGE ===== */
.floating-roaming-offer,
a.floating-roaming-offer,
#roamingOffer {
  position: fixed !important;
  top: 100px !important;
  
  z-index: 999999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 18px !important;
  background: linear-gradient(135deg, #d32f2f 0%, #8b0000 100%) !important;
  color: #ffffff !important;
  border: 2px solid #FFD700 !important;
  border-radius: 40px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 20px rgba(211, 47, 47, 0.75), 0 0 16px rgba(255, 215, 0, 0.7) !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.floating-roaming-offer strong {
  color: #FFD700 !important;
  font-weight: 800 !important;
}

.floating-roaming-offer .fro-arrow {
  color: #FFD700 !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
}

@media (max-width: 768px) {
  .floating-roaming-offer,
  a.floating-roaming-offer,
  #roamingOffer {
    top: 92px !important;
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 0.78rem !important;
    border-width: 1.8px !important;
  }
}


/* ===== 100% MOBILE PHONE MASTER OPTIMIZATION (ANDROID & IOS SAFARI) ===== */
@media (max-width: 768px) {
  /* 1. Prevent Horizontal Page Scroll & Fix Viewport */
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  /* 2. Apple iOS Safari Anti-Auto-Zoom on Form Inputs */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important; /* Minimum 16px stops iOS Safari auto-zoom */
    padding: 14px 16px !important;
    border-radius: 12px !important;
    min-height: 48px !important;
    background: #ffffff !important;
    color: #111111 !important;
    border: 1.5px solid #cccccc !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08) !important;
  }

  /* 3. 48px Minimum Touch Targets for All Buttons & Links (Google Material & Apple Guidelines) */
  button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .srv-btn,
  .f-submit,
  .adv-book-btn,
  .hero-buttons a,
  a[href^="tel:"]:not(.float-btn),
  a[href^="https://wa.me"] {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    padding: 12px 20px !important;
    touch-action: manipulation !important;
  }

  /* 4. Hero Mobile Layout & Clear Spacing */
  .hero {
    padding-top: 140px !important;
    padding-bottom: 45px !important;
    text-align: center !important;
  }

  .hero-h1,
  h1.hero-main-title {
    font-size: 1.7rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    margin-top: 15px !important;
    margin-bottom: 12px !important;
  }

  .hero-sub,
  .hero-subtitle {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    padding: 0 8px !important;
  }

  /* 5. Mobile Phone Bottom Sticky Emergency Action Bar */
  .mobile-bottom-sticky-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 62px !important;
    background: #111111 !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 6px 10px !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
    border-top: 2px solid #FFD700 !important;
  }

  .m-sticky-btn {
    flex: 1 !important;
    height: 46px !important;
    margin: 0 4px !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3) !important;
  }

  .m-sticky-call {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important;
    border: 1px solid #ff5252 !important;
  }

  .m-sticky-wa {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    border: 1px solid #69F0AE !important;
  }

  /* Shift floating widgets up so they don't cover the bottom bar */
  .floating-widget-group {
    bottom: 72px !important;
    right: 14px !important;
  }

  /* Add bottom padding to body so content isn't covered by sticky bar */
  body {
    
  }

  /* 6. Card Grids 1-Column Stacking */
  .services-grid,
  .office-grid,
  .address-grid,
  .features-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 12px !important;
  }

  /* 7. Card Styling for Mobile */
  .card,
  .service-card,
  .clean-office-card {
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
  }
}


/* ===== FLOATING CIRCULAR CALL & WHATSAPP BUTTONS (100% CONSTANT EXACT IMAGE 2) ===== */
.floating-widget-group {
  position: fixed !important;
  bottom: 100px !important;
  right: 18px !important;
  z-index: 9999999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.float-btn,
a.float-btn,
a.float-call-btn,
a.float-wa-btn {
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 10px rgba(255, 255, 255, 0.3) !important;
  border: 3px solid #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.float-call-btn {
  background: #d32f2f !important;
}

.float-wa-btn {
  background: #25D366 !important;
}

.float-btn svg {
  width: 28px !important;
  height: 28px !important;
  fill: #ffffff !important;
}

.float-btn:active,
.float-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7) !important;
}

@media (max-width: 768px) {
  .floating-widget-group {
    bottom: 20px !important;
    right: 16px !important;
    gap: 12px !important;
  }
  .float-btn,
  a.float-btn,
  a.float-call-btn,
  a.float-wa-btn {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-width: 2.5px !important;
  }
  .float-btn svg {
    width: 26px !important;
    height: 26px !important;
  }
}

/* ===== FOOTER CREDIT DESKTOP HIDE OVERRIDE ===== */
@media (min-width: 769px) {
  .footer-engineer-credit {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
  }
}
@media (max-width: 768px) {
  .footer-engineer-credit {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}