/* ═══════════════════════════════════════════════════════════
   THE BLUE WAVES — COMPLETE MULTI-PAGE STYLESHEET 2026
   style.css — UNIFIED DEEP NAVY THEME, BALANCED HEIGHT & RESPONSIVE
════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   1. VARIABLES & RESET
══════════════════════════════════════════════════════════ */
:root {
  --primary:        #0d47a1;
  --primary-dark:   #08053f;
  --primary-light:  #fffdf4;
  --primary-mid:    #ffcf00;
  --accent:         #ffcf00;
  --dark:           #08053f;
  --dark-navy:      #08053f;
  --deep-blue:      #0d47a1;
  --dark-2:         #1e293b;
  --text:           #334155;
  --text-light:     #64748b;
  --text-xs:        #94a3b8;
  --border:         #e2e8f0;
  --bg-light:       #fffdf4;
  --bg-card:        #ffffff;
  --white:          #ffffff;
  --success:        #16a34a;
  --warning:        #ffcf00;
  --danger:         #ef4444;
  --radius:         12px;
  --radius-lg:      18px;
  --radius-xl:      24px;
  --shadow-sm:      0 2px 8px rgba(14,165,233,.06);
  --shadow:         0 4px 18px rgba(14,165,233,.1);
  --shadow-md:      0 8px 30px rgba(14,165,233,.14);
  --shadow-lg:      0 12px 45px rgba(14,165,233,.18);
  --transition:     0.3s cubic-bezier(.4,0,.2,1);
  --font-body:      'Inter', sans-serif;
  --font-heading:   'Poppins', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  color: var(--dark);
  font-weight: 700;
  line-height: 1.25;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; transition: var(--transition); }
ul { list-style: none; padding: 0; margin: 0; }

/* Clean Section Spacing & Visual Separation */
.section-padding { padding: 64px 0; }
.section-padding-sm { padding: 40px 0; }
.section-padding-balanced { padding: 56px 0; }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #ffeb3b 0%, #ffcf00 50%, #f5b800 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-warm {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section Labels & Titles */
.section-label {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: 100px;
  margin-bottom: 10px;
}
.section-label-white {
  background: rgba(14,165,233,.2);
  border: 1px solid rgba(56,189,248,.35);
  color: #7dd3fc;
}
.section-title {
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -.02em;
}
.section-subtitle {
  color: var(--text-light);
  font-size: 14.5px;
  max-width: 560px;
  margin: 0 auto;
}

/* Consistent section heading treatment across every page. */
.section-padding-balanced .section-label,
.section-padding-sm .section-label,
.how-we-work-section .section-label {
  background: #ffcf00 !important;
  color: #08053f !important;
  border-radius: 0 !important;
  padding: 5px 14px !important;
  letter-spacing: 0.02em;
  text-transform: none;
}

.section-padding-balanced .section-title,
.section-padding-sm .section-title,
.how-we-work-section .section-title {
  color: #08053f !important;
  letter-spacing: 0 !important;
}

.section-padding-balanced .section-subtitle,
.section-padding-sm .section-subtitle,
.how-we-work-section .section-subtitle {
  color: #667085 !important;
}
.section-text {
  color: var(--text-light);
  font-size: 14.5px;
  line-height: 1.7;
  margin-bottom: 12px;
}
.section-divider {
  width: 50px; height: 3.5px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 100px;
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════
   2. TOPBAR & NAVBAR
══════════════════════════════════════════════════════ */
.topbar {
  background: linear-gradient(90deg, #0a4a8a, #0ea5e9);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 0;
  z-index: 1100;
  position: relative;
}
.topbar-link { color:#fff; opacity:.92; font-weight:600; }
.topbar-link:hover { opacity:1; color:#fff; }

#mainNav {
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(14,165,233,.1);
  padding: 10px 0;
  transition: var(--transition);
  z-index: 1050;
}
#mainNav.scrolled {
  padding: 6px 0;
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
}
.logo-icon { flex-shrink:0; border-radius:8px; overflow:hidden; display:flex; }
.logo-text  { display:flex; flex-direction:column; }
.logo-name  { font-family:var(--font-heading); font-weight:800; font-size:16px; color:var(--dark); line-height:1.1; }
.logo-tagline { font-size:9.5px; font-weight:600; color:var(--primary); letter-spacing:.05em; text-transform:uppercase; }
.nav-link {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--dark) !important;
  padding: 6px 12px !important;
  border-radius: 6px;
  transition: var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--primary) !important; background: var(--primary-light); }
.btn-nav { font-size:13px; padding:7px 18px; border-radius:8px; font-weight:600; }
.dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 220px;
}
.dropdown-item {
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  color: var(--text);
}
.dropdown-item:hover { background: var(--primary-light); color: var(--primary-dark); }

/* ══════════════════════════════════════════════════════════
   3. BUTTONS & FORM CONTROLS
══════════════════════════════════════════════════════ */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none; color: #fff; font-weight: 600;
  border-radius: var(--radius); transition: var(--transition);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), #0a5499);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14,165,233,.35);
  color: #fff;
}
.btn-outline-primary {
  border: 1.5px solid var(--primary); color: var(--primary);
  font-weight: 600; border-radius: var(--radius); background: transparent;
}
.btn-outline-primary:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

.feature-pill {
  display:flex; align-items:center; gap:8px;
  background:var(--bg-light); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px;
  font-size:13px; font-weight:500;
  transition:var(--transition);
}
.feature-pill:hover { background:var(--primary-light); border-color:var(--primary); }

/* ═══════════════════════════════════════════════════════
   4. UNIFIED DEEP NAVY HERO SECTION (ALL PAGES)
═══════════════════════════════════════════════════════ */
.page-hero, .hero-navy-unified {
  position: relative;
  padding: 36px 0 28px;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 80% at 75% 20%, #0c2854 0%, #040d1a 70%, #020710 100%);
  color: #ffffff;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .08;
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(4,13,26,.88) 0%, rgba(12,40,84,.8) 100%);
}
.page-hero-content { position:relative; z-index:2; text-align:center; }
.page-hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(14,165,233,.18); border:1px solid rgba(14,165,233,.35);
  color:#7dd3fc; padding:5px 15px; border-radius:100px;
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:14px; backdrop-filter:blur(8px);
}
.page-hero h1, .hero-navy-unified h1 {
  font-size:clamp(1.9rem, 3.4vw, 2.9rem); font-weight:800;
  color:#fff; line-height:1.15; letter-spacing:-.025em; margin-bottom:12px;
}
.page-hero p, .hero-navy-unified p { color:rgba(255,255,255,.8); font-size:15px; max-width:580px; margin:0 auto 18px; line-height:1.65; }

.breadcrumb-wrap { display:flex; justify-content:center; margin-top:8px; }
.breadcrumb { background:rgba(255,255,255,.07); backdrop-filter:blur(8px); border-radius:100px; padding:5px 16px; margin:0; display:inline-flex; align-items:center; gap:6px; }
.breadcrumb-item a { color:rgba(255,255,255,.7); font-size:12px; font-weight:500; }
.breadcrumb-item a:hover { color:#fff; }
.breadcrumb-item.active { color:#7dd3fc; font-size:12px; font-weight:600; }
.breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.4); content:"›"; font-size:14px; }

/* Hero stats strip */
.hero-stats-strip {
  position: relative; z-index: 2;
  display:flex; gap:0; justify-content:center;
  background:rgba(255,255,255,.06); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius);
  padding:14px 24px; margin-top:24px; width:fit-content; margin-inline:auto;
  flex-wrap:wrap;
}
.hero-stat-item { text-align:center; padding:4px 20px; border-right:1px solid rgba(255,255,255,.1); }
.hero-stat-item:last-child { border-right:none; }
.hero-stat-num { font-family:var(--font-heading); font-size:1.5rem; font-weight:800; color:#fff; }
.hero-stat-lbl { font-size:10.5px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.05em; }

/* ══════════════════════════════════════════════════════════
   5. SERVICE & DETAIL CARDS
══════════════════════════════════════════════════════ */
.service-card-clean {
  background:#ffffff; border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:var(--transition);
  height:100%; display:flex; flex-direction:column;
}
.service-card-clean:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--primary); }
.svc-thumb-wrap { height:190px; overflow:hidden; position:relative; }
.svc-thumb-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.service-card-clean:hover .svc-thumb-wrap img { transform:scale(1.06); }
.svc-price-tag {
  position:absolute; bottom:10px; right:10px;
  background:rgba(15,23,42,.88); backdrop-filter:blur(6px);
  color:#38bdf8; font-weight:800; font-size:12px;
  padding:4px 12px; border-radius:100px;
}
.svc-card-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.svc-card-body h4 { font-size:17px; font-weight:700; margin-bottom:6px; }
.svc-card-body p { font-size:13.5px; color:var(--text-light); line-height:1.6; margin-bottom:16px; flex:1; }

.service-detail-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; transition:var(--transition); height:100%; text-align:center;
}
.service-detail-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--primary); }
.sdc-icon {
  width:52px; height:52px; border-radius:14px; margin:0 auto 12px;
  background:var(--primary-light); display:flex; align-items:center;
  justify-content:center; font-size:22px; color:var(--primary); transition:var(--transition);
}
.service-detail-card:hover .sdc-icon { background:var(--primary); color:#fff; }
.service-detail-card h5 { font-size:15px; margin-bottom:6px; }
.service-detail-card p { color:var(--text-light); font-size:13px; margin:0; }

/* ══════════════════════════════════════════════════════════
   6. HOW IT WORKS & PROCESS CARDS
══════════════════════════════════════════════════════ */
.how-step-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:32px 22px; text-align:center;
  position:relative; transition:var(--transition); height:100%;
  box-shadow:var(--shadow-sm);
}
.how-step-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.how-step-card.featured-step {
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border-color:transparent; color:#fff; box-shadow:var(--shadow-md);
}
.how-step-card.featured-step h4, .how-step-card.featured-step p { color:#fff !important; }
.how-step-card.featured-step .step-big-num {
  color:var(--primary) !important;
  opacity:1 !important;
  text-shadow:none;
  position:relative;
  z-index:1;
}
.step-big-num {
  font-family:var(--font-heading); font-size:2.8rem; font-weight:900;
  color:var(--primary-light); line-height:1; margin-bottom:10px; display:block;
  position:relative;
  z-index:1;
}
.step-icon-wrap {
  width:60px; height:60px; border-radius:50%;
  background:var(--primary-light); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; margin:0 auto 16px; transition:var(--transition);
}
.how-step-card.featured-step .step-icon-wrap { background:rgba(255,255,255,.2); color:#fff; }
.how-step-card h4 { font-size:17px; margin-bottom:8px; }
.how-step-card p { color:var(--text-light); font-size:13.5px; line-height:1.55; }

/* Map & Service Areas */
.map-wrap { 
  border-radius:var(--radius-lg); 
  overflow:hidden; 
  height:320px;
  box-shadow:var(--shadow-md);
}
.map-wrap iframe { 
  width:100%; 
  height:100%;
  display:block;
}

/* Feature Pills */
.feature-pill {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:var(--bg-light);
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  font-size:13px;
  font-weight:500;
  color:var(--text);
  transition:var(--transition);
  cursor:pointer;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.feature-pill i {
  font-size:16px;
  flex-shrink:0;
  min-width:16px;
}
.feature-pill:hover {
  background:linear-gradient(135deg, var(--bg-light), #f9f9f9);
  border-color:var(--primary);
  box-shadow:0 4px 12px rgba(13, 71, 161, 0.1);
}
.feature-pill:hover i {
  color:var(--primary) !important;
}

/* Process Step Alt */
.process-step-alt {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 18px; text-align:center; height:100%; transition:var(--transition);
  position:relative; overflow:hidden;
}
.process-step-alt:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--primary); }
.step-num-badge {
  position:absolute; top:12px; right:12px; width:28px; height:28px;
  background:var(--primary-light); color:var(--primary); font-weight:800;
  font-size:12px; border-radius:6px; display:flex; align-items:center; justify-content:center;
}
.process-step-alt .step-icon { font-size:2rem; color:var(--primary); margin-bottom:12px; display:block; }
.process-step-alt h4 { font-size:15.5px; margin-bottom:6px; }
.process-step-alt p { color:var(--text-light); font-size:13px; margin:0; }

/* ══════════════════════════════════════════════════════════
   7. RATES & PRICING TABLES
══════════════════════════════════════════════════════ */
.rate-tabs .nav-pills { gap:6px; flex-wrap:wrap; justify-content:center; }
.rate-tabs .nav-link {
  background:var(--white); border:1px solid var(--border);
  color:var(--text); font-weight:600; font-size:13px;
  padding:8px 18px; border-radius:100px;
}
.rate-tabs .nav-link.active, .rate-tabs .nav-link:hover {
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border-color:transparent; color:#fff;
  box-shadow:0 4px 12px rgba(14,165,233,.25);
}
.pricing-table { width:100%; border-collapse:collapse; }
.pricing-table th { background:var(--dark); color:#fff; font-family:var(--font-heading); font-weight:600; font-size:12.5px; padding:11px 15px; text-align:left; }
.pricing-table td { padding:10px 15px; border-bottom:1px solid var(--border); font-size:13.5px; vertical-align:middle; }
.pricing-table tr:nth-child(even) td { background:var(--bg-light); }
.pricing-table tr:hover td { background:var(--primary-light); }
.price-tag { font-weight:700; color:var(--primary-dark); font-size:14px; }

/* ══════════════════════════════════════════════════════════
   8. FOOTER & FLOATING
══════════════════════════════════════════════════════ */
.site-footer { background:var(--dark-navy); color:rgba(255,255,255,.75); }
.footer-top { padding:54px 0 36px; border-bottom:1px solid rgba(255,255,255,.07); }
.footer-brand { font-family:var(--font-heading); font-weight:800; font-size:17px; color:#fff; }
.footer-desc { font-size:13px; line-height:1.6; margin-top:6px; color:rgba(255,255,255,.6); }
.social-links { display:flex; gap:8px; margin-top:16px; }
.social-links a {
  width:34px; height:34px; background:rgba(255,255,255,.07); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7);
  font-size:14px; transition:var(--transition);
}
.social-links a:hover { background:var(--primary); color:#fff; transform:translateY(-2px); }
.footer-heading { color:#fff; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-links li { margin-bottom:8px; }
.footer-links a { color:rgba(255,255,255,.6); font-size:13px; display:flex; align-items:center; gap:5px; }
.footer-links a:hover { color:var(--primary); padding-left:3px; }
.footer-contact p { font-size:13px; color:rgba(255,255,255,.6); margin-bottom:8px; line-height:1.5; }
.footer-contact a { color:rgba(255,255,255,.8); }
.footer-contact a:hover { color:var(--primary); }
.footer-bottom { padding:16px 0; background:rgba(0,0,0,.35); }
.footer-bottom p { font-size:12px; color:rgba(255,255,255,.5); margin:0; }
.footer-legal-links { display:flex; flex-wrap:wrap; gap:14px; }
.footer-legal-links a { font-size:12px; color:rgba(255,255,255,.45); }
.footer-legal-links a:hover { color:var(--primary); }

.whatsapp-float {
  position:fixed; bottom:24px; right:24px;
  width:52px; height:52px;
  background:linear-gradient(135deg,#25d366,#20b038);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff; box-shadow:0 4px 18px rgba(37,211,102,.4);
  z-index:9999; transition:var(--transition);
}
.whatsapp-float:hover { color:#fff; transform:scale(1.06); }
.scroll-top {
  position:fixed; bottom:86px; right:24px;
  width:40px; height:40px; background:var(--dark); color:#fff;
  border:none; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; z-index:9998;
  opacity:0; pointer-events:none; transition:var(--transition);
}
.scroll-top.visible { opacity:1; pointer-events:all; }
.scroll-top:hover { background:var(--primary); transform:translateY(-2px); }

/* ══════════════════════════════════════════════════════════
   9. RESPONSIVE BREAKPOINTS (ALL PAGES)
══════════════════════════════════════════════════════ */
@media (max-width:1199.98px) {
  .section-padding { padding:52px 0; }
  .page-hero, .hero-navy-unified { padding:46px 0 34px; }
}
@media (max-width:991.98px) {
  .section-padding { padding:46px 0; }
  .page-hero, .hero-navy-unified { padding:42px 0 30px; }
  .hero-stats-strip { padding:10px 16px; }
  .hero-stat-item { padding:4px 12px; }
  .navbar-collapse {
    background:rgba(255,255,255,.98); border-radius:var(--radius);
    padding:14px; margin-top:8px; box-shadow:var(--shadow-md);
    border:1px solid var(--border);
  }
  .section-subtitle { font-size: 13.5px; }
}
@media (max-width:767.98px) {
  .section-padding { padding:38px 0; }
  .page-hero, .hero-navy-unified { padding:36px 0 26px; }
  .page-hero h1, .hero-navy-unified h1 { font-size:1.85rem; }
  .section-title { font-size:1.6rem; }
  .section-subtitle { font-size: 13px; }
  .hero-stats-strip { flex-direction:column; width:auto; }
  .hero-stat-item { border-right:none; border-bottom:1px solid rgba(255,255,255,.1); }
  .hero-stat-item:last-child { border-bottom:none; }
  .footer-top { padding:36px 0 24px; }
  
  /* Disable transform-based animations on mobile to prevent horizontal overflow */
  .btn-outline-primary:hover,
  .service-card-clean:hover,
  .how-step-card:hover,
  .process-step-alt:hover,
  .social-links a:hover,
  .whatsapp-float:hover,
  .scroll-top:hover {
    transform: none !important;
  }
}
@media (max-width:575.98px) {
  .topbar { font-size:11px; text-align:center; }
  .topbar .container { justify-content:center !important; }
  .section-title { font-size: 1.4rem; }
  .section-subtitle { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════
   10. SHARED BLUE WAVES THEME OVERRIDES
   Keeps all secondary pages aligned with the About page.
══════════════════════════════════════════════════════════ */
.btn-primary,
.btn-rate-toggle {
  background: linear-gradient(135deg, #0d47a1, #08053f) !important;
}

.btn-primary:hover,
.btn-rate-toggle:hover {
  background: linear-gradient(135deg, #08053f, #0d47a1) !important;
  box-shadow: 0 8px 20px rgba(13, 71, 161, 0.28) !important;
}

.page-hero,
.hero-navy-unified,
.franchise-hero-section,
.rates-hero-section,
section[class$="-hero-navy"] {
  background: radial-gradient(ellipse 90% 80% at 75% 20%, #0d47a1 0%, #08053f 70%, #050329 100%) !important;
}

.page-hero-badge,
.section-label-white,
.franchise-hero-section .section-label-white,
.rates-hero-section .section-label-white,
section[class$="-hero-navy"] .section-label-white {
  background: rgba(255, 207, 0, 0.18) !important;
  border-color: rgba(255, 207, 0, 0.5) !important;
  color: #ffeb3b !important;
}

.page-hero-overlay {
  background: linear-gradient(135deg, rgba(8, 5, 63, 0.9), rgba(13, 71, 161, 0.78)) !important;
}

.franchise-hero-badge-tag,
.rates-hero-badge-tag,
section[class$="-hero-navy"] .dc-hero-badge-tag,
section[class$="-hero-navy"] .comm-hero-badge-tag,
section[class$="-hero-navy"] .carpet-hero-badge-tag,
section[class$="-hero-navy"] .wi-hero-badge-tag,
section[class$="-hero-navy"] .hk-hero-badge-tag,
.contact-hero-badge-tag {
  background: rgba(8, 5, 63, 0.9) !important;
  border-color: rgba(255, 207, 0, 0.45) !important;
}

.franchise-hero-badge-tag i,
.rates-hero-badge-tag i,
section[class$="-hero-navy"] [class$="-hero-badge-tag"] i,
.contact-hero-badge-tag i {
  color: #ffcf00 !important;
}

.get-started-step-card,
.why-benefit-item,
.facility-card-landing,
.op-capability-card,
.rate-cat-card,
.promise-box-landing,
.contact-info-card,
.trust-pillar-card {
  border-color: rgba(8, 5, 63, 0.12) !important;
  box-shadow: 0 10px 26px rgba(8, 5, 63, 0.06) !important;
}

.get-started-step-card,
.why-benefit-item {
  border-left-color: #ffcf00 !important;
}

.get-started-step-card:hover,
.why-benefit-item:hover,
.facility-card-landing:hover,
.op-capability-card:hover,
.rate-cat-card:hover,
.promise-box-landing:hover,
.contact-info-card:hover,
.trust-pillar-card:hover {
  border-color: #ffcf00 !important;
  box-shadow: 0 18px 34px rgba(8, 5, 63, 0.14) !important;
}

.step-icon-circle,
.facility-icon-pill,
.promise-icon-pill,
.contact-info-icon,
.trust-pillar-icon,
.rate-cat-icon {
  background: #ffcf00 !important;
  color: #08053f !important;
}

.rate-cat-icon {
  box-shadow: 0 6px 16px rgba(255, 207, 0, 0.28) !important;
}

.rate-cat-card h3,
.price-tag,
.clean-price-val {
  color: #08053f !important;
}

.btn-rate-toggle {
  color: #ffffff !important;
}

.clean-price-table th {
  background: #08053f !important;
}

.clean-price-table tr:hover td,
.pricing-table tr:hover td {
  background: #fffdf4 !important;
}

.rates-counter-navy {
  background: #08053f !important;
}

.rates-counter-num {
  color: #ffcf00 !important;
}

.rates-landing-cta {
  background: linear-gradient(135deg, #08053f 0%, #0d47a1 65%, #0d6c99 100%) !important;
}

.franchise-form-card {
  border-color: rgba(8, 5, 63, 0.12) !important;
  box-shadow: 0 14px 32px rgba(8, 5, 63, 0.08) !important;
}

/* Exact supplied brand logo used consistently in every header and footer. */
.logo-icon {
  width: 154px;
  height: 68px;
  background: url('images/bluewaveslog.png') center / contain no-repeat;
  overflow: hidden;
}

.logo-icon svg,
.logo-text {
  display: none !important;
}

.footer-top .d-flex.align-items-center.gap-2.mb-3 > svg,
.footer-brand {
  display: none !important;
}

.footer-top .d-flex.align-items-center.gap-2.mb-3::before {
  content: '';
  display: block;
  width: 205px;
  height: 90px;
  background: url('images/bluewaveslog.png') center / contain no-repeat;
}

@media (max-width: 767.98px) {
  .logo-icon {
    width: 142px;
    height: 62px;
  }

  .footer-top .d-flex.align-items-center.gap-2.mb-3::before {
    width: 180px;
    height: 79px;
  }
}

/* Modern shared navigation treatment. */
#mainNav {
  position: relative;
  padding: 7px 0;
  border-bottom: 1px solid rgba(8, 5, 63, 0.08);
  box-shadow: 0 6px 22px rgba(8, 5, 63, 0.06);
}

#mainNav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #ffcf00;
}

#mainNav .navbar-brand {
  margin-left: -6px;
  transition: transform 0.3s ease;
}

#mainNav .navbar-brand:hover {
  transform: translateY(-1px);
}

#mainNav .logo-icon {
  width: 128px;
  height: 56px;
}

#mainNav .navbar-nav {
  gap: 4px !important;
}

#mainNav .nav-link {
  position: relative;
  color: #08053f !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 13px !important;
  border-radius: 8px;
  transition: color 0.25s ease, background 0.25s ease;
}

#mainNav .nav-link::after {
  content: '';
  position: absolute;
  right: 13px;
  bottom: 4px;
  left: 13px;
  height: 2px;
  background: #ffcf00;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

#mainNav .nav-link:hover,
#mainNav .nav-link.active {
  color: #0d47a1 !important;
  background: #fffdf4;
}

#mainNav .nav-link:hover::after,
#mainNav .nav-link.active::after {
  transform: scaleX(1);
}

#mainNav .btn-nav {
  position: relative;
  overflow: hidden;
  background: #ffcf00 !important;
  color: #08053f !important;
  border: 0;
  border-radius: 7px;
  padding: 9px 18px;
  box-shadow: 0 5px 12px rgba(255, 207, 0, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#mainNav .btn-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.28);
  transform: translateX(-110%) skewX(-18deg);
  transition: transform 0.4s ease;
}

#mainNav .btn-nav:hover {
  color: #08053f !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255, 207, 0, 0.4);
}

#mainNav .btn-nav:hover::before {
  transform: translateX(110%) skewX(-18deg);
}

#mainNav .navbar-toggler {
  border: 1px solid rgba(8, 5, 63, 0.16);
  border-radius: 8px;
  padding: 8px 10px;
}

#mainNav .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(255, 207, 0, 0.28);
}

#mainNav .navbar-toggler-icon {
  width: 1.25em;
  height: 1.25em;
}

@media (max-width: 991.98px) {
  #mainNav .navbar-collapse {
    margin-top: 8px;
    border-top: 3px solid #ffcf00;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 24px rgba(8, 5, 63, 0.1);
  }

  #mainNav .nav-link::after {
    right: 14px;
    left: 14px;
  }

  #mainNav .btn-nav {
    display: inline-block;
    margin-top: 5px;
  }
}

@media (max-width: 575.98px) {
  #mainNav .logo-icon {
    width: 120px;
    height: 52px;
  }
}

/* Premium About-inspired overview used by every service page. */
#service-overview {
  position: relative;
  background: #f7f7f7 !important;
  overflow: hidden;
}

#service-overview::before {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  left: -150px;
  bottom: -140px;
  border: 1px solid rgba(255, 207, 0, 0.35);
  border-radius: 50%;
  pointer-events: none;
}

#service-overview > .container {
  position: relative;
  z-index: 1;
}

#service-overview .row {
  align-items: stretch !important;
}

#service-overview .col-lg-6:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 28px;
}

#service-overview .section-label {
  width: fit-content;
  background: #ffcf00;
  color: #08053f;
  border-radius: 0;
  padding: 5px 14px;
  letter-spacing: 0.02em;
  text-transform: none;
}

#service-overview .section-title {
  color: #08053f;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  letter-spacing: 0;
}

#service-overview .col-lg-6:first-child > p {
  color: #526174 !important;
  font-size: 14.5px !important;
  line-height: 1.8 !important;
}

#service-overview .about-img-frame {
  position: relative;
  height: 310px !important;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 0 28px 0 28px;
  border-left: 7px solid #ffcf00;
  background: #08053f;
  box-shadow: 14px 14px 0 rgba(255, 207, 0, 0.26), 0 18px 34px rgba(8, 5, 63, 0.16);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

#service-overview .about-img-frame:hover {
  transform: translateY(-7px);
  box-shadow: 14px 20px 0 rgba(255, 207, 0, 0.35), 0 24px 42px rgba(8, 5, 63, 0.2);
}

#service-overview .about-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease, filter 0.55s ease;
}

#service-overview .about-img-frame:hover img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

#service-overview .experience-float-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: #08053f !important;
  border: 0 !important;
  border-radius: 0 14px 0 14px;
  padding: 12px 18px;
  box-shadow: 0 8px 18px rgba(8, 5, 63, 0.25);
}

#service-overview .experience-float-badge h3 {
  color: #ffcf00 !important;
}

#service-overview .col-lg-6:last-child {
  display: flex;
  align-items: center;
}

#service-overview .col-lg-6:last-child > .p-3 {
  position: relative;
  width: 100%;
  padding: 30px 30px 28px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 18px !important;
  border-top: 4px solid #ffcf00 !important;
  box-shadow: 0 16px 34px rgba(8, 5, 63, 0.09);
  animation: servicePanelReveal 0.75s ease both;
}

#service-overview .col-lg-6:last-child > .p-3::before {
  content: 'CARE STANDARD';
  display: block;
  margin-bottom: 20px;
  color: #0d47a1;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

#service-overview .col-lg-6:last-child > .p-3 hr {
  border-color: rgba(8, 5, 63, 0.12) !important;
  opacity: 1 !important;
}

#service-overview .col-lg-6:last-child > .p-3 p {
  color: #526174 !important;
  line-height: 1.75 !important;
}

#service-overview .col-lg-6:last-child > .p-3 > div:last-child p {
  color: #08053f !important;
}

#service-overview .col-lg-6:last-child > .p-3 > div:last-child i {
  color: #ffcf00 !important;
}

@keyframes servicePanelReveal {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 991.98px) {
  #service-overview .col-lg-6:first-child { padding-right: 12px; }
  #service-overview .col-lg-6:last-child { margin-top: 18px; }
}

@media (max-width: 767.98px) {
  #service-overview .about-img-frame { height: 260px !important; }
  #service-overview .col-lg-6:last-child > .p-3 { padding: 24px 20px !important; }
}

/* Compact portfolio showcase shared by all service pages. */
#garment-cards {
  position: relative;
  background: #fffdf4 !important;
  overflow: hidden;
}

#garment-cards::before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  right: -120px;
  top: -100px;
  border: 1px solid rgba(255, 207, 0, 0.35);
  border-radius: 50%;
  pointer-events: none;
}

#garment-cards .container {
  position: relative;
  z-index: 1;
}

#garment-cards .section-label {
  background: #ffcf00;
  color: #08053f;
  border-radius: 0;
  padding: 5px 14px;
  letter-spacing: 0.02em;
  text-transform: none;
}

#garment-cards .section-title {
  color: #08053f;
  letter-spacing: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.55rem);
}

#garment-cards .section-subtitle {
  color: #667085;
}

#garment-cards .row.g-4 {
  --bs-gutter-y: 1.25rem;
  --bs-gutter-x: 1.25rem;
}

#garment-cards .classy-garment-card {
  border: 0 !important;
  border-top: 3px solid #ffcf00 !important;
  border-radius: 4px 4px 14px 14px !important;
  box-shadow: 0 10px 24px rgba(8, 5, 63, 0.09) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  animation: portfolioCardReveal 0.65s ease both;
}

#garment-cards .col-lg-4:nth-child(2) .classy-garment-card { animation-delay: 0.08s; }
#garment-cards .col-lg-4:nth-child(3) .classy-garment-card { animation-delay: 0.16s; }
#garment-cards .col-lg-4:nth-child(4) .classy-garment-card { animation-delay: 0.24s; }
#garment-cards .col-lg-4:nth-child(5) .classy-garment-card { animation-delay: 0.32s; }
#garment-cards .col-lg-4:nth-child(6) .classy-garment-card { animation-delay: 0.4s; }

#garment-cards .classy-garment-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 20px 34px rgba(8, 5, 63, 0.16) !important;
}

#garment-cards .garment-img-wrap {
  height: 145px !important;
}

#garment-cards .garment-img-wrap img {
  transition: transform 0.55s ease, filter 0.55s ease;
}

#garment-cards .classy-garment-card:hover .garment-img-wrap img {
  transform: scale(1.07);
  filter: saturate(1.08);
}

#garment-cards .garment-price-pill {
  background: #ffcf00 !important;
  color: #08053f !important;
  border-radius: 0 8px 0 8px !important;
  font-weight: 800;
}

#garment-cards .garment-body {
  padding: 16px 17px 18px !important;
}

#garment-cards .garment-body h4 {
  color: #08053f !important;
  font-size: 15.5px !important;
  line-height: 1.3;
  margin-bottom: 6px !important;
}

#garment-cards .garment-body p {
  color: #667085 !important;
  font-size: 12.5px !important;
  line-height: 1.55;
}

@keyframes portfolioCardReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767.98px) {
  #garment-cards .garment-img-wrap { height: 160px !important; }
}

/* Four-card portfolio layout shared by every service page. */
#garment-cards,
#commercial-sectors,
#carpet-types,
#wardrobe-cards,
#housekeeping-solutions {
  position: relative;
  background: #fffdf4 !important;
  overflow: hidden;
}

#garment-cards .section-label,
#commercial-sectors .section-label,
#carpet-types .section-label,
#wardrobe-cards .section-label,
#housekeeping-solutions .section-label {
  background: #ffcf00;
  color: #08053f;
  border-radius: 0;
  padding: 5px 14px;
  letter-spacing: 0.02em;
  text-transform: none;
}

#garment-cards .section-title,
#commercial-sectors .section-title,
#carpet-types .section-title,
#wardrobe-cards .section-title,
#housekeeping-solutions .section-title {
  color: #08053f;
  letter-spacing: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.55rem);
}

#garment-cards .section-subtitle,
#commercial-sectors .section-subtitle,
#carpet-types .section-subtitle,
#wardrobe-cards .section-subtitle,
#housekeeping-solutions .section-subtitle {
  color: #667085;
}

#garment-cards .row > .col-lg-4:nth-child(n+5),
#commercial-sectors .row > .col-lg-4:nth-child(n+5),
#carpet-types .row > .col-lg-4:nth-child(n+5),
#wardrobe-cards .row > .col-lg-4:nth-child(n+5),
#housekeeping-solutions .row > .col-lg-4:nth-child(n+5) {
  display: none;
}

#garment-cards .row > .col-lg-4,
#commercial-sectors .row > .col-lg-4,
#carpet-types .row > .col-lg-4,
#wardrobe-cards .row > .col-lg-4,
#housekeeping-solutions .row > .col-lg-4 {
  flex: 0 0 25%;
  max-width: 25%;
}

#garment-cards .garment-price-pill,
#commercial-sectors .garment-price-pill,
#carpet-types .garment-price-pill,
#wardrobe-cards .garment-price-pill,
#housekeeping-solutions .garment-price-pill {
  display: none !important;
}

#commercial-sectors .classy-garment-card,
#carpet-types .classy-garment-card,
#wardrobe-cards .classy-garment-card,
#housekeeping-solutions .classy-garment-card {
  border: 0 !important;
  border-top: 3px solid #ffcf00 !important;
  border-radius: 4px 4px 14px 14px !important;
  box-shadow: 0 10px 24px rgba(8, 5, 63, 0.09) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

#commercial-sectors .classy-garment-card:hover,
#carpet-types .classy-garment-card:hover,
#wardrobe-cards .classy-garment-card:hover,
#housekeeping-solutions .classy-garment-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 20px 34px rgba(8, 5, 63, 0.16) !important;
}

#commercial-sectors .garment-img-wrap,
#carpet-types .garment-img-wrap,
#wardrobe-cards .garment-img-wrap,
#housekeeping-solutions .garment-img-wrap {
  height: 145px !important;
}

#commercial-sectors .garment-body,
#carpet-types .garment-body,
#wardrobe-cards .garment-body,
#housekeeping-solutions .garment-body {
  padding: 16px 17px 18px !important;
}

#commercial-sectors .garment-body h4,
#carpet-types .garment-body h4,
#wardrobe-cards .garment-body h4,
#housekeeping-solutions .garment-body h4 {
  color: #08053f !important;
  font-size: 15.5px !important;
  line-height: 1.3;
  margin-bottom: 6px !important;
}

#commercial-sectors .garment-body p,
#carpet-types .garment-body p,
#wardrobe-cards .garment-body p,
#housekeeping-solutions .garment-body p {
  color: #667085 !important;
  font-size: 12.5px !important;
  line-height: 1.55;
}

@media (max-width: 991.98px) {
  #garment-cards .row > .col-lg-4,
  #commercial-sectors .row > .col-lg-4,
  #carpet-types .row > .col-lg-4,
  #wardrobe-cards .row > .col-lg-4,
  #housekeeping-solutions .row > .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 575.98px) {
  #garment-cards .row > .col-lg-4,
  #commercial-sectors .row > .col-lg-4,
  #carpet-types .row > .col-lg-4,
  #wardrobe-cards .row > .col-lg-4,
  #housekeeping-solutions .row > .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Signature Section 7 image panel shared by all service pages. */
#booking-form {
  position: relative;
  background: #f7f7f7 !important;
  overflow: hidden;
}

#booking-form .row {
  align-items: stretch !important;
}

#booking-form .col-lg-6:first-child {
  order: 2;
}

#booking-form .col-lg-6:last-child {
  display: flex;
  align-items: center;
  order: 1;
  padding-right: 16px;
}

#booking-form .col-lg-6:last-child .about-img-frame {
  position: relative;
  width: 100%;
  height: 420px !important;
  max-width: 500px;
  margin-right: auto;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #08053f 0 28%, transparent 28%);
  box-shadow: none;
  transform: translateX(70px);
  opacity: 0;
  transition: opacity 0.75s ease, transform 0.75s ease;
}

#booking-form .col-lg-6:last-child .about-img-frame::before {
  content: none;
}

#booking-form .col-lg-6:last-child .about-img-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 58%, rgba(8, 5, 63, 0.28) 100%);
  pointer-events: none;
}

#booking-form .col-lg-6:last-child .about-img-frame.is-visible {
  transform: translateX(0);
  opacity: 1;
}

#booking-form .col-lg-6:last-child .about-img-frame img {
  position: absolute;
  overflow: hidden;
  top: 16%;
  left: 3%;
  z-index: 1;
  width: 100%;
  height: 72%;
  object-fit: cover;
  border: 9px solid #ffffff;
  border-radius: 18px 34px 18px 34px;
  outline: 3px solid #ffcf00;
  box-shadow: 0 16px 34px rgba(8, 5, 63, 0.16);
  filter: none;
}

#booking-form .col-lg-6:last-child .experience-float-badge {
  position: absolute;
  left: 22px;
  top: 12px;
  z-index: 3;
  background: #08053f !important;
  border: 0 !important;
  border-radius: 4px 14px 4px 14px;
  padding: 14px 18px;
  box-shadow: 0 9px 18px rgba(8, 5, 63, 0.28);
}

#booking-form .col-lg-6:last-child .experience-float-badge h3 {
  color: #ffcf00 !important;
}

#booking-form .col-lg-6:last-child .experience-float-badge span {
  color: #ffffff;
}

#booking-form .whatsapp-service-card {
  position: relative;
  border: 0;
  border-top: 4px solid #ffcf00;
  border-radius: 4px 4px 18px 18px;
  padding: 34px 30px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(8, 5, 63, 0.1);
}

#booking-form .whatsapp-service-card h3,
#booking-form .whatsapp-service-card p,
#booking-form .whatsapp-service-card .section-label,
#booking-form .whatsapp-service-card .whatsapp-service-points,
#booking-form .whatsapp-service-card .whatsapp-service-button {
  position: relative;
  z-index: 1;
}

#booking-form .whatsapp-service-card h3 {
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  line-height: 1.25;
}

#booking-form .whatsapp-service-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

#booking-form .whatsapp-service-points span {
  color: #08053f;
  font-size: 13.5px;
  font-weight: 600;
}

#booking-form .whatsapp-service-points i {
  margin-right: 8px;
  color: #ffcf00;
}

#booking-form .whatsapp-service-button {
  background: #16a34a !important;
  border: 0;
  color: #ffffff !important;
  padding: 13px 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

#booking-form .whatsapp-service-button:hover {
  background: #12813b !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(22, 163, 74, 0.25);
}

@media (max-width: 991.98px) {
  #booking-form .col-lg-6:first-child {
    order: 1;
  }

  #booking-form .col-lg-6:last-child {
    order: 2;
    padding-right: 12px;
    margin-top: 22px;
  }
}

@media (max-width: 767.98px) {
  #booking-form .whatsapp-service-card { padding: 28px 20px; }
  #booking-form .col-lg-6:last-child .about-img-frame {
    height: 290px !important;
    max-width: 390px;
    transform: translateX(45px);
  }

  #booking-form .col-lg-6:last-child .about-img-frame::before {
    top: 10%;
    right: 4%;
    width: 80%;
    border-width: 7px;
  }

  #booking-form .col-lg-6:last-child .about-img-frame::after {
    font-size: 7rem;
  }

  #booking-form .col-lg-6:last-child .about-img-frame img {
    top: 18%;
    left: 2%;
    height: 68%;
    border-width: 6px;
    border-radius: 14px 24px 14px 24px;
  }

  #booking-form .col-lg-6:last-child .about-img-frame.is-visible {
    transform: translateX(0);
  }
}

/* Shared centered hero used by About, Rates, and Franchise pages. */
.about-hero-banner {
  position: relative;
  height: 380px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero-banner .hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.about-hero-banner .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8, 5, 63, 0.78), rgba(13, 71, 161, 0.5));
}

.about-hero-banner .hero-content {
  position: relative;
  z-index: 5;
  text-align: center;
  color: #ffffff;
}

.about-hero-banner .hero-content h1 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 6px;
}

.about-hero-banner .hero-content nav ol {
  justify-content: center;
}

.about-hero-banner .hero-content .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.75);
}

.about-hero-banner .hero-content .breadcrumb-item.active {
  color: #ffeb3b;
}

@media (max-width: 767.98px) {
  .about-hero-banner { height: 220px; }
  .about-hero-banner .hero-content h1 { font-size: 2.2rem; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE: HOW IT WORKS & SERVICE AREAS
══════════════════════════════════════════════════════════ */

/* How It Works Section - Mobile Responsive */
@media (max-width: 991.98px) {
  .how-step-card {
    padding: 28px 18px;
  }
  .step-big-num {
    font-size: 2.2rem;
  }
  .step-icon-wrap {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }
  .how-step-card h4 {
    font-size: 15px;
  }
  .how-step-card p {
    font-size: 13px;
  }
}

@media (max-width: 767.98px) {
  .how-step-card {
    padding: 24px 16px;
    margin-bottom: 12px;
  }
  .step-big-num {
    font-size: 1.8rem;
    margin-bottom: 8px;
  }
  .step-icon-wrap {
    width: 48px;
    height: 48px;
    font-size: 20px;
    margin-bottom: 12px;
  }
  .how-step-card h4 {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .how-step-card p {
    font-size: 12px;
    line-height: 1.5;
  }
}

@media (max-width: 575.98px) {
  .how-step-card {
    padding: 20px 14px;
  }
  .step-big-num {
    font-size: 1.6rem;
  }
  .step-icon-wrap {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .how-step-card h4 {
    font-size: 13px;
  }
  .how-step-card p {
    font-size: 11px;
  }
}

/* Service Areas Section - Mobile Responsive */
@media (max-width: 767.98px) {
  #service-areas {
    overflow: hidden !important;
  }
  
  #service-areas .row.align-items-center {
    flex-direction: column-reverse;
  }
  
  #service-areas .col-lg-6:first-child {
    order: 2;
  }
  
  #service-areas .col-lg-6:last-child {
    order: 1;
    margin-bottom: 24px;
  }
  
  .map-wrap {
    height: 250px !important;
  }
  
  .map-wrap iframe {
    height: 250px !important;
  }
  
  #service-areas .row.g-2 {
    gap: 8px !important;
  }
  
  #service-areas .row.g-2 > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  #service-areas .feature-pill {
    font-size: 12px;
    padding: 8px 10px;
    gap: 6px;
    width: 100%;
    border-color: var(--border) !important;
    background: var(--bg-light) !important;
  }
  
  #service-areas .feature-pill:hover {
    background: var(--bg-light) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
  }
  
  #service-areas .feature-pill i {
    font-size: 14px;
    color: var(--primary) !important;
  }
}

@media (max-width: 575.98px) {
  #service-areas {
    overflow: hidden !important;
  }
  
  #service-areas .row.g-2 {
    gap: 6px !important;
  }
  
  #service-areas .row.g-2 > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  .map-wrap {
    height: 200px !important;
  }
  
  .map-wrap iframe {
    height: 200px !important;
  }
  
  #service-areas .feature-pill {
    font-size: 11px;
    padding: 6px 8px;
    width: 100%;
    border-color: var(--border) !important;
    background: var(--bg-light) !important;
  }
  
  #service-areas .feature-pill:hover {
    background: var(--bg-light) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
  }
  
  #service-areas .feature-pill {
    font-size: 11px;
    padding: 6px 8px;
  }
  
  #service-areas .section-title {
    font-size: 1.5rem;
  }
  
  #service-areas {
    overflow: hidden;
  }
  
  #service-areas .container {
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
  }
}