/* ==========================================================================
   QUICKCARE AMBULANCE WEBSITE - MODERN EMERGENCY DESIGN SYSTEM
   ========================================================================== */

/* --- CSS Variables & Theme Tokens (Original Dark Mode) --- */
:root, [data-theme="dark"] {
    --color-bg-dark: #0b0f19;
    --color-bg-navy: #0f172a;
    --color-bg-card: rgba(15, 23, 42, 0.75);
    --color-bg-card-solid: #0f172a;
    --color-bg-input: rgba(255, 255, 255, 0.06);

    --color-primary-red: #ef4444;
    --color-primary-red-hover: #dc2626;
    --color-red-glow: rgba(239, 68, 68, 0.4);

    --color-cyan: #06b6d4;
    --color-cyan-glow: rgba(6, 182, 212, 0.4);
    --color-badge-bg: rgba(6, 182, 212, 0.15);
    --color-badge-text: #38bdf8;
    
    --color-text-heading: #ffffff;
    --color-text-white: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-text-dim: #64748b;

    --color-border-glass: rgba(255, 255, 255, 0.12);
    --color-border-hover: rgba(6, 182, 212, 0.35);

    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.25);
    --shadow-red: 0 8px 24px rgba(239, 68, 68, 0.35);
    --shadow-cyan: 0 8px 24px rgba(6, 182, 212, 0.35);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Light Mode Theme Tokens (Natively inherited by all current & future components) --- */
[data-theme="light"] {
    --color-bg-dark: #f8fafc;        /* Main page background */
    --color-bg-navy: #ffffff;        /* Navbar, sections & modal background */
    --color-bg-card: #ffffff;        /* Card & widget background */
    --color-bg-card-solid: #ffffff;
    --color-bg-input: #f8fafc;

    --color-cyan: #0284c7;           /* High contrast ocean blue */
    --color-cyan-glow: rgba(2, 132, 199, 0.25);
    --color-badge-bg: #e0f2fe;       /* Light cyan badge background */
    --color-badge-text: #0369a1;     /* Bold cyan badge text */

    --color-text-heading: #0f172a;   /* Deep Slate 900 for headings */
    --color-text-white: #0f172a;     /* Primary text color in light mode */
    --color-text-muted: #334155;     /* Dark Slate 700 for body & labels */
    --color-text-dim: #475569;       /* Slate 600 for subtext */

    --color-border-glass: #cbd5e1;   /* Sharp light slate border */
    --color-border-hover: #0284c7;   /* Accent border hover */

    --shadow-glass: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
    --shadow-card: 0 12px 32px 0 rgba(0, 0, 0, 0.08);
}

/* 1. Hero Section in Light Mode - White Background with 50-60% Transparent Video */
[data-theme="light"] .hero {
    background: #ffffff !important;
}

[data-theme="light"] .hero-video-bg video {
    opacity: 0.50 !important; /* 50-60% transparent video */
    filter: brightness(1.05) contrast(0.95);
}

[data-theme="light"] .hero-overlay {
    background: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.40) 0%, 
        rgba(255, 255, 255, 0.65) 60%, 
        rgba(255, 255, 255, 0.92) 100%
    ) !important;
}

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

[data-theme="light"] .highlight-text,
[data-theme="light"] .hero-title .highlight-text,
[data-theme="light"] .section-title .highlight-text {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #0284c7 !important;
    font-weight: 900 !important;
    display: inline-block;
}

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

[data-theme="light"] .hero-features-list .feature-item,
[data-theme="light"] .h-feature-item {
    color: #1e293b !important;
    font-weight: 600 !important;
}

[data-theme="light"] .btn-emergency-xl {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.35) !important;
}

[data-theme="light"] .btn-air-hero {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.3) !important;
    border: 1.5px solid #38bdf8 !important;
}

[data-theme="light"] .btn-call-hero {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1.5px solid #0284c7 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25) !important;
}

[data-theme="light"] .btn-call-hero strong {
    color: #ffffff !important;
}

[data-theme="light"] .btn-call-hero small {
    color: #94a3b8 !important; /* Crisp light slate text on dark navy button */
    font-weight: 500 !important;
}

[data-theme="light"] .btn-call-hero .hero-btn-icon-box {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.18) !important;
}

[data-theme="light"] .btn-call-hero:hover {
    background: #1e293b !important;
    border-color: #38bdf8 !important;
}

/* 2. Navbar in Light Mode */
[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .active-status-badge {
    background: #e6f4ea !important;
    border: 1.5px solid #a8dab5 !important;
    color: #137333 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .status-count {
    color: #0f172a !important; /* Deep Slate 900 for max unit number visibility */
    font-weight: 900 !important;
    font-size: 0.95rem !important;
}

[data-theme="light"] #lbl-units-ready {
    color: #137333 !important;
    font-weight: 700 !important;
}

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

[data-theme="light"] .brand-sub {
    color: #0284c7 !important;
}

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

[data-theme="light"] .nav-link:hover, 
[data-theme="light"] .nav-link.active {
    color: #0284c7 !important;
}

/* 3. Section Titles & Subtitles in Light Mode */
[data-theme="light"] .section-title {
    color: #0f172a;
}

[data-theme="light"] .section-subtitle {
    color: #334155;
    font-weight: 500;
}

/* 4. Stats Banner Cards in Light Mode */
[data-theme="light"] .stat-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .stat-number {
    color: #0f172a !important;
}

[data-theme="light"] .stat-label {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* 5. Service Cards in Light Mode */
[data-theme="light"] .service-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .service-card h3 {
    color: #0f172a !important;
}

[data-theme="light"] .service-desc {
    color: #334155 !important;
}

[data-theme="light"] .service-features li {
    color: #1e293b !important;
    font-weight: 500 !important;
}

[data-theme="light"] .service-price-badge {
    background: rgba(15, 23, 42, 0.88) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 700 !important;
}

/* 6. Form Inputs & Selects in Light Mode */
[data-theme="light"] .input-with-btn input,
[data-theme="light"] .form-group input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-group textarea {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #94a3b8 !important;
    font-weight: 500 !important;
}

[data-theme="light"] .input-with-btn input::placeholder,
[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
    color: #64748b !important;
}

[data-theme="light"] .form-group label {
    color: #0f172a !important;
    font-weight: 700 !important;
}

[data-theme="light"] .form-select option {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* 7. Red Badges, Call Links & Service Tags in Light Mode */
[data-theme="light"] .badge-rapid,
[data-theme="light"] .section-badge.red-badge,
[data-theme="light"] .red-badge,
[data-theme="light"] .red-pill,
[data-theme="light"] .red-bg,
[data-theme="light"] .service-tag.red-tag,
[data-theme="light"] .red-tag {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
    font-weight: 800 !important;
}

[data-theme="light"] .service-tag.gray-tag,
[data-theme="light"] .gray-tag {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 800 !important;
}

[data-theme="light"] .service-tag.cyan-tag,
[data-theme="light"] .cyan-tag {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #7dd3fc !important;
    font-weight: 800 !important;
}

[data-theme="light"] .service-tag.blue-tag,
[data-theme="light"] .blue-tag {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #93c5fd !important;
    font-weight: 800 !important;
}

[data-theme="light"] .quick-call-link.call-top-btn,
[data-theme="light"] .hotline-btn.call-us-btn {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .quick-call-link.call-top-btn:hover,
[data-theme="light"] .hotline-btn.call-us-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

[data-theme="light"] .btn-book-rate,
[data-theme="light"] .btn-book-rate.red-btn-rate {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
    font-weight: 800 !important;
}

[data-theme="light"] .btn-book-rate:hover,
[data-theme="light"] .btn-book-rate.red-btn-rate:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

/* 8. Quick Dispatch Calculator Card in Light Mode */
[data-theme="light"] .quick-dispatch-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .quick-dispatch-card .card-title {
    color: #0f172a !important;
}

[data-theme="light"] .quick-dispatch-card .card-subtitle {
    color: #334155 !important;
}

[data-theme="light"] .callback-eta-badge {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #334155 !important;
}

[data-theme="light"] .callback-eta-item span {
    color: #334155 !important;
}

[data-theme="light"] .callback-eta-item span strong {
    color: #b91c1c !important;
}

[data-theme="light"] .eta-val.highlight {
    color: #0284c7 !important;
}

/* 8. Pricing Section & Sub-Badges in Light Mode */
[data-theme="light"] .pricing-card-item {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .pricing-card-item.featured-pricing {
    background: #ffffff !important;
    border: 2px solid #ef4444 !important;
}

[data-theme="light"] .p-card-info h4 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

[data-theme="light"] .p-badge {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    font-weight: 800 !important;
    border: 1px solid rgba(2, 132, 199, 0.3) !important;
}

[data-theme="light"] .p-card-price {
    color: #0f172a !important;
}

[data-theme="light"] .p-card-price strong {
    color: #ef4444 !important;
}

[data-theme="light"] .p-card-desc {
    color: #334155 !important;
}

[data-theme="light"] .btn-book-pricing {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
    background: rgba(2, 132, 199, 0.06) !important;
}

[data-theme="light"] .btn-book-pricing:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
}

[data-theme="light"] .cyan-bg { background: #e0f2fe !important; color: #0284c7 !important; }
[data-theme="light"] .blue-bg { background: #dbeafe !important; color: #1d4ed8 !important; }
[data-theme="light"] .red-bg { background: #fee2e2 !important; color: #dc2626 !important; }
[data-theme="light"] .gray-bg { background: #f1f5f9 !important; color: #475569 !important; }

[data-theme="light"] .estimator-box {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .estimator-summary {
    background: rgba(2, 132, 199, 0.06) !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
}

[data-theme="light"] .est-total-row span {
    color: #0f172a !important;
}

/* 9. First Aid Guide Cards in Light Mode */
[data-theme="light"] .guide-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .guide-content h3 {
    color: #0284c7 !important;
    font-weight: 800 !important;
}

[data-theme="light"] .guide-content p {
    color: #334155 !important;
    font-weight: 500 !important;
}

[data-theme="light"] .guide-number {
    color: rgba(2, 132, 199, 0.15) !important;
}

/* 10. Live Tracker Radar HUD in Light Mode */
[data-theme="light"] .map-hud-bar {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .hud-label {
    color: #475569 !important;
}

[data-theme="light"] .hud-val {
    color: #0f172a !important;
}

/* 11. Toast Notification in Light Mode */
[data-theme="light"] .toast-notification {
    background: #ffffff !important;
    border: 1px solid #0284c7 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .toast-content h4 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

[data-theme="light"] .toast-content p {
    color: #334155 !important;
    font-weight: 500 !important;
}

/* 12. Emergency Modal in Light Mode */
[data-theme="light"] .modal-backdrop {
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(8px) !important;
}

[data-theme="light"] .modal-dialog {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .modal-header h3 {
    color: #0f172a !important;
}

[data-theme="light"] .modal-header p {
    color: #334155 !important;
    font-weight: 500 !important;
}

[data-theme="light"] .modal-close {
    color: #475569 !important;
}

[data-theme="light"] .modal-close:hover {
    color: #ef4444 !important;
}

[data-theme="light"] .btn-secondary {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .consultation-divider span {
    background: #ffffff !important;
    color: #334155 !important;
    font-weight: 700 !important;
}

/* 13. Section Background Overrides in Light Mode */
[data-theme="light"] .pricing-matrix-section {
    background: #f1f5f9 !important;
}

[data-theme="light"] .pricing-tab-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

[data-theme="light"] .pricing-tab-btn:hover,
[data-theme="light"] .pricing-tab-btn.active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

[data-theme="light"] .tracker-section {
    background: #f8fafc !important;
}

[data-theme="light"] .stats-section {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .guidelines-section {
    background: #f8fafc !important;
}

[data-theme="light"] .footer {
    background: #f8fafc !important;
    border-top: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .footer .brand-name,
[data-theme="light"] .footer-title,
[data-theme="light"] .footer-col h4 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

[data-theme="light"] .footer .brand-sub {
    color: #0284c7 !important;
}

[data-theme="light"] .footer-desc,
[data-theme="light"] .footer-links a,
[data-theme="light"] .footer-col ul li a,
[data-theme="light"] .contact-item,
[data-theme="light"] .footer-col p {
    color: #334155 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .footer-links a:hover,
[data-theme="light"] .footer-col ul li a:hover {
    color: #0284c7 !important;
}

[data-theme="light"] .footer-bottom {
    border-top: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

[data-theme="light"] .footer-bottom a {
    color: #475569 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .footer-bottom a:hover {
    color: #0284c7 !important;
}

/* --- High-Performance GPU-Accelerated Day / Night Switch --- */
.theme-pill-switch {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.pill-track {
    position: relative;
    width: 72px;
    height: 38px;
    border-radius: 999px;
    background-color: #0f172a;
    border: 2px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.theme-pill-switch:hover .pill-track {
    border-color: var(--color-cyan);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.theme-pill-switch:active .pill-thumb {
    transform: scale(0.92);
}

.icon-slot {
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.slot-sun {
    color: #f59e0b; /* Warm Sun */
    opacity: 0.85;
}

.slot-moon {
    color: #94a3b8; /* Cool Moon */
    opacity: 0.85;
}

.pill-thumb {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transform: translateX(34px); /* Dark mode: translated 34px to the right */
    will-change: transform;
    transition: transform 0.32s cubic-bezier(0.34, 1.45, 0.64, 1), background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}

.pill-thumb i {
    transition: transform 0.35s ease;
}

/* Light Mode State */
[data-theme="light"] .pill-track {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .pill-thumb {
    transform: translateX(0); /* Light mode: back to the left */
    background-color: #0f172a;
    color: #fbbf24;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.3);
}

[data-theme="light"] .pill-thumb i {
    transform: rotate(360deg);
}

/* Global Silk-Smooth Theme Transition */
html.theme-in-transition,
html.theme-in-transition *,
html.theme-in-transition *::before,
html.theme-in-transition *::after {
    transition: background-color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-delay: 0s !important;
}

/* --- Base & Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
}

.container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.text-danger { color: var(--color-primary-red); }
.text-success { color: #10b981; }
.text-info { color: var(--color-cyan); }
.white { color: #ffffff !important; }
.cyan { color: var(--color-cyan) !important; }

/* --- Glassmorphism Panels --- */
.glass-panel {
    background: var(--color-bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

/* --- Emergency Header Ticker --- */
/* --- Emergency Header Ticker --- */
.emergency-bar {
    background: linear-gradient(90deg, #991b1b 0%, #dc2626 40%, #ef4444 60%, #b91c1c 100%);
    color: #ffffff;
    padding: 7px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    position: relative;
    z-index: 100;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.emergency-bar-content {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pulse-indicator {
    width: 9px;
    height: 9px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.8);
    animation: pulseGlow 1.5s infinite;
    flex-shrink: 0;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.ticker-text {
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 0.82rem;
    color: #ffffff;
}

.ticker-text strong {
    font-weight: 800;
    letter-spacing: 0.03em;
}

.emergency-contacts {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.quick-call-link {
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap !important;
    line-height: 1;
    flex-shrink: 0;
}

.quick-call-link.call-top-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    padding: 5px 13px;
    border-radius: var(--radius-full);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.82rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(6px);
}

.quick-call-link.call-top-btn:hover {
    background: #ffffff;
    color: #b91c1c;
    border-color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.quick-call-link.wa-top-link {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    padding: 5px 13px;
    border-radius: var(--radius-full);
    color: #ffffff !important;
    font-weight: 800;
    font-size: 0.82rem;
    box-shadow: 0 2px 10px rgba(37, 211, 102, 0.4);
}

.quick-call-link.wa-top-link:hover {
    background: linear-gradient(135deg, #2ae06c 0%, #159b8c 100%);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.6);
}

/* --- Navigation Header --- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(11, 15, 25, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-glass);
    padding: 16px 0;
    transition: var(--transition);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 44px;
    height: 44px;
    background: radial-gradient(circle, #ef4444 0%, #b91c1c 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
}

.logo-icon.red-bg {
    background: #dc2626;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff;
    line-height: 1;
}

.brand-sub {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--color-cyan);
    margin-top: 2px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    font-weight: 500;
    color: var(--color-text-muted);
    transition: var(--transition);
    font-size: 0.95rem;
    position: relative;
}

.nav-link:hover, .nav-link.active {
    color: var(--color-text-white);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-cyan);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--color-cyan);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.active-status-badge {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    animation: blink 1.2s infinite alternate;
}

@keyframes blink {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* --- Buttons System --- */
.btn {
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition);
    font-size: 0.95rem;
}

.btn-emergency {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: var(--shadow-red);
}

.btn-emergency:hover {
    background: linear-gradient(135deg, #f87171 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.5);
}

.pulse-button {
    animation: pulseButton 2s infinite;
}

@keyframes pulseButton {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* --- Unified Hero CTA Buttons (Exact Symmetrical Matching) --- */
.btn-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    min-height: 72px;
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    flex: 1 1 calc(50% - 14px);
    min-width: 250px;
    max-width: 100%;
}

.hero-btn-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    transition: transform 0.25s ease;
}

.hero-btn-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    flex: 1;
}

.hero-btn-content strong {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #ffffff;
}

.hero-btn-content small {
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

/* 1. Ground Emergency Ambulance Button */
.btn-emergency-xl {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(239, 68, 68, 0.38);
    animation: pulseButton 2.4s infinite;
}

.btn-emergency-xl .hero-btn-icon-box {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.btn-emergency-xl .hero-btn-content small {
    color: rgba(255, 255, 255, 0.92);
}

.btn-emergency-xl:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(239, 68, 68, 0.55);
}

.btn-emergency-xl:hover .hero-btn-icon-box {
    transform: scale(1.1);
}

/* 2. Air Ambulance Charter Button */
.btn-air-hero {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(2, 132, 199, 0.35);
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.btn-air-hero .hero-btn-icon-box {
    background: rgba(255, 255, 255, 0.2);
    color: #38bdf8;
}

.btn-air-hero .hero-btn-content small {
    color: rgba(255, 255, 255, 0.9);
}

.btn-air-hero:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 14px 34px rgba(14, 165, 233, 0.5);
    border-color: rgba(56, 189, 248, 0.6);
}

.btn-air-hero:hover .hero-btn-icon-box {
    transform: scale(1.1);
    color: #ffffff;
}

/* 3. Call Emergency Hotline Button */
.btn-call-hero {
    background: rgba(15, 23, 42, 0.88);
    border: 1.5px solid var(--color-cyan);
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(6, 182, 212, 0.22);
    backdrop-filter: blur(12px);
}

.btn-call-hero .hero-btn-icon-box {
    background: rgba(6, 182, 212, 0.18);
    color: var(--color-cyan);
}

.btn-call-hero .hero-btn-content small {
    color: #94a3b8;
}

.btn-call-hero:hover {
    background: rgba(6, 182, 212, 0.2);
    border-color: #38bdf8;
    transform: translateY(-3px);
    box-shadow: var(--shadow-cyan);
}

.btn-call-hero:hover .hero-btn-icon-box {
    transform: scale(1.1);
    color: #ffffff;
    background: var(--color-cyan);
}

.btn-primary {
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
    color: #ffffff;
    box-shadow: var(--shadow-cyan);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(6, 182, 212, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-white);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   HERO SECTION & SEAMLESS VIDEO BACKGROUND
   ========================================================================== */
.hero {
    position: relative;
    min-height: calc(100vh - 110px);
    display: flex;
    align-items: center;
    padding: 60px 0;
    overflow: hidden;
}

/* Video Wrapper & HTML5 Video element */
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-video-element {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: brightness(0.85) contrast(1.1);
}

/* Dark Gradient Glass Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg, 
        rgba(11, 15, 25, 0.65) 0%, 
        rgba(15, 23, 42, 0.82) 60%, 
        rgba(11, 15, 25, 0.98) 100%
    );
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 5;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.hero-text-side {
    max-width: 680px;
}

.badge-rapid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.highlight-text {
    background: linear-gradient(135deg, #06b6d4 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #38bdf8;
    display: inline-block;
}

.hero-description {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    margin-bottom: 36px;
    max-width: 580px;
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.hero-features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-glass);
}

.h-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-white);
}

.h-feature-item i {
    color: var(--color-cyan);
    font-size: 1.1rem;
}

/* Floating Video Player Controls Widget */
.video-controls-widget {
    position: absolute;
    bottom: 28px;
    right: 28px;
    z-index: 20;
    display: flex;
    gap: 10px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-border-glass);
    padding: 6px;
    border-radius: var(--radius-full);
}

.video-ctrl-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: var(--transition);
    position: relative;
}

.video-ctrl-btn:hover {
    background: var(--color-cyan);
    color: #000000;
    transform: scale(1.1);
}

.ctrl-tooltip {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}

.video-ctrl-btn:hover .ctrl-tooltip {
    opacity: 1;
}

/* --- Hero Dispatch Card Widget --- */
.quick-dispatch-card {
    padding: 32px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-tag {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-white);
    margin-bottom: 8px;
}

.form-group label i {
    color: var(--color-cyan);
}

.input-with-btn {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-btn input,
.form-group input,
.form-select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(11, 15, 25, 0.8);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-md);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition);
}

.input-with-btn input {
    padding-right: 50px;
}

.input-with-btn input:focus,
.form-group input:focus,
.form-select:focus,
.form-group textarea:focus {
    border-color: var(--color-cyan);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
    outline: none;
}

.btn-locate {
    position: absolute;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(6, 182, 212, 0.2);
    color: var(--color-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--transition);
}

.phone-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.country-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(11, 15, 25, 0.85);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-md);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
    flex-shrink: 0;
}

.flag-icon-img {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    vertical-align: middle;
}

.country-picker-btn:hover {
    border-color: var(--color-cyan);
    background: rgba(6, 182, 212, 0.15);
}

[data-theme="light"] .country-picker-btn {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(0, 0, 0, 0.15);
}

/* Country Picker Modal Dialog Overlay */
.country-picker-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 10, 18, 0.85);
    backdrop-filter: blur(12px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}

.country-picker-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.country-picker-dialog {
    background: #0f172a;
    border: 1px solid var(--color-border-glass);
    border-radius: 20px;
    width: 90%;
    max-width: 440px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    transition: var(--transition);
}

.country-picker-backdrop.active .country-picker-dialog {
    transform: translateY(0) scale(1);
}

.cp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--color-border-glass);
}

.cp-header h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
}

.cp-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--color-text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
}

.cp-close-btn:hover {
    background: #ef4444;
    color: #ffffff;
}

.cp-search-box {
    position: relative;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-glass);
}

.cp-search-icon {
    position: absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.cp-search-box input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: rgba(11, 15, 25, 0.8);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-md);
    color: #ffffff;
    font-size: 0.9rem;
}

.cp-search-box input:focus {
    border-color: var(--color-cyan);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
    outline: none;
}

.cp-country-list {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
    padding: 8px 12px;
}

.cp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
}

.cp-item:hover {
    background: rgba(6, 182, 212, 0.15);
}

.cp-item.selected {
    background: rgba(6, 182, 212, 0.25);
    border-left: 3px solid var(--color-cyan);
}

.cp-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cp-flag {
    font-size: 1.4rem;
    line-height: 1;
}

.cp-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
}

.cp-code {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-left: 4px;
}

.cp-dial {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-cyan);
}

/* Light Theme Adjustments for Country Picker Modal */
[data-theme="light"] .country-picker-dialog {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .cp-header h3 {
    color: #0f172a;
}

[data-theme="light"] .cp-name {
    color: #0f172a;
}

[data-theme="light"] .cp-search-box input {
    background: #f8fafc;
    color: #0f172a;
    border-color: rgba(0, 0, 0, 0.12);
}

.form-select option {
    background: #0f172a;
    color: #ffffff;
}

.callback-eta-badge {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.callback-eta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.callback-eta-item i {
    font-size: 1.1rem;
}

.badge-priority {
    font-size: 0.7rem;
    font-weight: 800;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    padding: 3px 8px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
}

.btn-dispatch-submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--shadow-red);
    transition: var(--transition);
}

.btn-dispatch-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.5);
}

/* ==========================================================================
   STATS SECTION
   ========================================================================== */
.stats-section {
    padding: 40px 0;
    background: rgba(15, 23, 42, 0.95);
    border-y: 1px solid var(--color-border-glass);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-glass);
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: rgba(6, 182, 212, 0.15);
    color: var(--color-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   SERVICES SECTION
   ========================================================================== */
.services-section {
    padding: 100px 0;
    position: relative;
}

.section-header {
    margin-bottom: 60px;
}

.section-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-cyan);
    background: rgba(6, 182, 212, 0.1);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
}

.section-badge.red-badge {
    color: var(--color-primary-red);
    background: rgba(239, 68, 68, 0.1);
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.section-subtitle {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    max-width: 650px;
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.service-card-v2 {
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-card-v2:hover {
    transform: translateY(-6px);
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}

.card-v2-img-wrap {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}

.card-v2-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.service-card-v2:hover .card-v2-img {
    transform: scale(1.05);
}

.card-v2-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-v2-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.3;
}

.card-v2-desc {
    font-size: 0.88rem;
    color: #94a3b8;
    margin-bottom: 16px;
    line-height: 1.4;
}

.card-v2-price {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: #ef4444;
    margin-bottom: 18px;
    margin-top: auto;
}

.card-v2-price.quote-text {
    color: #ef4444;
}

.btn-red-pill {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    padding: 10px 22px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
    border: none;
    cursor: pointer;
}

.btn-red-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.6);
    background: linear-gradient(135deg, #f87171 0%, #b91c1c 100%);
}

/* ==========================================================================
   TRANSPARENT PRICING & FARE MATRIX SECTION
   ========================================================================== */
.pricing-matrix-section {
    padding: 90px 0;
    position: relative;
    background: rgba(11, 15, 25, 0.4);
}

.pricing-tabs-wrapper {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 44px;
    flex-wrap: wrap;
}

.pricing-tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border-glass);
    color: var(--color-text-muted);
    padding: 10px 22px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.pricing-tab-btn:hover,
.pricing-tab-btn.active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border-color: #ef4444;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

.pricing-grid-layout {
    display: block;
    width: 100%;
}

.pricing-cards-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

@media (max-width: 1024px) {
    .pricing-cards-column {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .pricing-cards-column {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.pricing-card-item {
    padding: 22px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    position: relative;
}

.pricing-card-item:hover {
    transform: translateY(-4px);
    border-color: var(--color-cyan);
}

.pricing-card-item.featured-pricing {
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(160deg, rgba(127, 29, 29, 0.25) 0%, rgba(15, 23, 42, 0.85) 100%);
}

.p-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.p-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.cyan-bg { background: rgba(6, 182, 212, 0.15); color: var(--color-cyan); }
.blue-bg { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.red-bg { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.gray-bg { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }

.p-card-info h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 4px;
}

.p-badge {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.cyan-pill { background: rgba(6, 182, 212, 0.15); color: var(--color-cyan); }
.blue-pill { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.red-pill { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.gray-pill { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }

.p-card-price {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 8px;
}

.p-card-price .currency {
    color: #ef4444;
    font-size: 1.1rem;
    margin-right: 2px;
}

.p-card-price small {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-left: 4px;
}

.p-card-price.highlight-red {
    color: #ef4444;
}

.p-card-desc {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    line-height: 1.4;
    margin-top: auto;
}

.btn-book-rate {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border-glass);
    color: var(--color-cyan);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    transition: var(--transition);
}

.btn-book-rate:hover {
    background: var(--color-cyan);
    color: #000000;
}

.btn-book-rate.red-btn-rate {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.btn-book-rate.red-btn-rate:hover {
    background: #ef4444;
    color: #ffffff;
}

/* Estimator Column Box */
.estimator-box {
    padding: 28px;
    border-radius: 20px;
    position: sticky;
    top: 100px;
    border: 1px solid rgba(6, 182, 212, 0.3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.estimator-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.estimator-header i {
    font-size: 2.2rem;
}

.estimator-header h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 2px;
}

.estimator-header p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.estimator-summary {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 14px;
    padding: 18px;
    margin: 20px 0;
    border: 1px solid var(--color-border-glass);
}

.est-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.est-divider {
    height: 1px;
    background: var(--color-border-glass);
    margin: 12px 0;
}

.est-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.est-total-row span {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.95rem;
}

.est-total-row h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 900;
    color: #ef4444;
}

.btn-block {
    width: 100%;
}

.est-note {
    display: block;
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 12px;
}

/* Light Mode Overrides for Pricing Matrix */
[data-theme="light"] .pricing-card-item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .p-card-info h4 {
    color: #0f172a;
}

[data-theme="light"] .p-card-price {
    color: #0f172a;
}

[data-theme="light"] .estimator-box {
    background: #ffffff;
    border-color: rgba(6, 182, 212, 0.4);
}

[data-theme="light"] .estimator-summary {
    background: #f8fafc;
}

[data-theme="light"] .est-total-row span {
    color: #0f172a;
}

.service-card {
    padding: 0;
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-border-hover);
}

.service-img-box {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-card:hover .service-img {
    transform: scale(1.06);
}

.service-price-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    color: #ffffff;
    border: 1px solid var(--color-cyan);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.service-price-badge.red-badge-bg {
    border-color: #ef4444;
    background: rgba(127, 29, 29, 0.9);
}

.service-price-badge.gray-badge-bg {
    border-color: #64748b;
    background: rgba(30, 41, 59, 0.9);
}

.service-card-body {
    padding: 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.service-card h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 0;
}

.service-tag {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
}

.cyan-tag { background: rgba(6, 182, 212, 0.15); color: var(--color-cyan); border: 1px solid rgba(6, 182, 212, 0.3); }
.blue-tag { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.red-tag { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
.gray-tag { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.3); }

.service-card p {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    margin-bottom: 20px;
}

.service-features {
    list-style: none;
    margin-bottom: 24px;
}

.service-features li {
    font-size: 0.85rem;
    color: var(--color-text-white);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.service-features li i {
    color: var(--color-cyan);
}

.service-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-glass);
}

.price-detail {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.price-detail strong {
    color: var(--color-cyan);
    font-size: 1.05rem;
    font-family: var(--font-heading);
}

.btn-book-service {
    padding: 10px 18px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

.btn-link-service:hover {
    gap: 10px;
    color: #ffffff;
}

/* ==========================================================================
   TRACKER SECTION (RADAR MOCKUP)
   ========================================================================== */
.tracker-section {
    padding: 80px 0;
    background: radial-gradient(circle at center, rgba(6, 182, 212, 0.05) 0%, transparent 70%);
}

.tracker-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 48px;
    align-items: center;
}

.tracker-info h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    margin-top: 10px;
    margin-bottom: 16px;
}

.tracker-info p {
    color: var(--color-text-muted);
    margin-bottom: 32px;
}

.tracker-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 36px;
}

.step-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid var(--color-cyan);
    color: var(--color-cyan);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-text h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
}

.step-text p {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.tracker-map-container {
    height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--color-border-glass);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.8);
}

.map-mockup {
    width: 100%;
    height: 100%;
    background: #09111e;
    position: relative;
    overflow: hidden;
}

.map-grid-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(6, 182, 212, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
}

.radar-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(6, 182, 212, 0.25);
}

.tracker-map-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(6, 182, 212, 0.3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    background: #0f172a;
}

.map-mockup {
    position: relative;
    width: 100%;
    height: 380px;
    background: #080d19;
    overflow: hidden;
}

.map-pin-item {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 800;
    z-index: 5;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

#pin-base-depot { top: 18%; left: 8%; }
#pin-patient-home { top: 68%; left: 30%; }
#pin-hosp-alpha { top: 20%; left: 68%; }

.base-pin {
    background: rgba(148, 163, 184, 0.2);
    border: 1px solid #94a3b8;
    color: #cbd5e1;
}

.patient-home-pin {
    background: rgba(239, 68, 68, 0.2);
    border: 1.5px solid #ef4444;
    color: #fca5a5;
    animation: homePulse 2s infinite alternate;
}

@keyframes homePulse {
    from { box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
    to { box-shadow: 0 0 16px rgba(239, 68, 68, 0.9); }
}

.hospital-alpha-pin {
    background: rgba(16, 185, 129, 0.2);
    border: 1.5px solid #10b981;
    color: #34d399;
}

.map-ambulance-unit {
    position: absolute;
    z-index: 10;
    color: #ffffff;
    font-size: 1.5rem;
    background: #ef4444;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 22px #ef4444;
    transition: all 0.5s ease;
}

.unit-popup {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid var(--color-cyan);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.map-route-line {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-hud-bar {
    background: #0f172a;
    border-top: 1px solid var(--color-border-glass);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.hud-item {
    display: flex;
    flex-direction: column;
}

.hud-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 2px;
    text-transform: uppercase;
}

.hud-val {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
}

.hud-val.highlight-eta {
    color: var(--color-cyan);
}

/* Light Theme Adjustments for Map HUD Bar */
[data-theme="light"] .map-hud-bar {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .hud-val {
    color: #0f172a;
}

.hud-stat {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
}

.hud-stat span {
    color: var(--color-text-dim);
    font-weight: 700;
}

/* ==========================================================================
   GUIDELINES SECTION
   ========================================================================== */
.guidelines-section {
    padding: 90px 0;
}

.guidelines-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.guide-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
    overflow: hidden;
}

.guide-number {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
    position: absolute;
    top: 10px;
    right: 16px;
    line-height: 1;
}

.guide-content h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-cyan);
}

.guide-content p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background: #070a12;
    border-top: 1px solid var(--color-border-glass);
    padding: 80px 0 30px;
    margin-top: 60px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-desc {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 20px 0 24px;
}

.footer-hotlines {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hotline-btn {
    background: rgba(255, 255, 255, 0.08);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hotline-btn.call-us-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid var(--color-border-glass);
}

.hotline-btn.call-us-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

.hotline-btn.wa-us-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.hotline-btn.wa-us-btn:hover {
    background: linear-gradient(135deg, #34d399 0%, #047857 100%);
    color: #ffffff;
}

.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    transition: var(--transition);
}

.footer-col ul li a:hover {
    color: var(--color-cyan);
    padding-left: 4px;
}

.footer-col p {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-bottom: 12px;
}

.footer-bottom {
    border-top: 1px solid var(--color-border-glass);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--color-text-dim);
}

.footer-legal {
    display: flex;
    gap: 20px;
}

/* ==========================================================================
   MODAL & TOAST DIALOGS
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 10, 18, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}

.modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-dialog {
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 36px;
    position: relative;
    box-sizing: border-box;
    transform: translateY(20px);
    transition: var(--transition);
    scrollbar-width: thin;
    scrollbar-color: var(--color-cyan) rgba(255, 255, 255, 0.05);
}

/* Custom Scrollbar for Scrollable Form */
.modal-dialog::-webkit-scrollbar {
    width: 6px;
}

.modal-dialog::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.modal-dialog::-webkit-scrollbar-thumb {
    background: var(--color-cyan);
    border-radius: 8px;
}

[data-theme="light"] .modal-dialog::-webkit-scrollbar-thumb {
    background: #0284c7;
}

.modal-backdrop.active .modal-dialog {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    color: var(--color-text-muted);
    font-size: 1.8rem;
    transition: var(--transition);
}

.modal-close:hover {
    color: var(--color-primary-red);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.modal-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.main-lang-toggle,
.modal-lang-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
    padding: 3px 4px 3px 12px;
    gap: 4px;
    backdrop-filter: blur(10px);
    transition: var(--transition);
    flex-shrink: 0;
}

.main-lang-icon,
.modal-lang-icon {
    color: var(--color-cyan);
    font-size: 1.15rem;
    margin-right: 2px;
}

.lang-pill-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-pill-btn:hover {
    color: #ffffff;
}

.lang-pill-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    font-weight: 800;
}

[data-theme="light"] .modal-lang-toggle {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .lang-pill-btn {
    color: #475569;
}

[data-theme="light"] .lang-pill-btn.active {
    background: var(--color-danger);
    color: #ffffff;
}

.modal-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.modal-header h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
}

.modal-header p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 28px;
}

.required-star {
    color: #ef4444;
    font-weight: 900;
    margin-left: 3px;
    font-size: 1rem;
}

.modal-consultation-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-glass);
    text-align: center;
}

.consultation-divider {
    position: relative;
    margin-bottom: 18px;
}

.consultation-divider span {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    background: #0f172a;
    padding: 0 12px;
    text-transform: uppercase;
}

[data-theme="light"] .consultation-divider span {
    background: #ffffff;
    color: #475569;
}

.consultation-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
}

@media (max-width: 480px) {
    .consultation-buttons {
        flex-direction: column;
        gap: 10px;
    }
}

.btn-call-consult {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
    flex: 1;
}

.btn-call-consult:hover {
    background: linear-gradient(135deg, #f87171 0%, #b91c1c 100%);
    color: #ffffff;
}

.btn-wa-consult {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
    flex: 1;
}

.btn-wa-consult:hover {
    background: linear-gradient(135deg, #34d399 0%, #047857 100%);
    color: #ffffff;
}

/* Toast */
.toast-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1100;
    background: #0f172a;
    border: 1px solid var(--color-cyan);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-notification.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.toast-icon {
    font-size: 1.8rem;
    color: #10b981;
}

.toast-content h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
}

.toast-content p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   ALWAYS FLOATING EMERGENCY ACTION BAR (BOTTOM RIGHT)
   ========================================================================== */
.floating-emergency-bar {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    display: flex;
    gap: 12px;
    align-items: center;
}

.float-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 0.95rem;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
    text-decoration: none;
    line-height: 1;
}

.float-call {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
    animation: floatGlowRed 2s infinite;
}

.float-whatsapp {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
    animation: floatGlowGreen 2s infinite 0.5s;
}

.float-call:hover, .float-whatsapp:hover {
    transform: translateY(-4px) scale(1.05);
}

@keyframes floatGlowRed {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes floatGlowGreen {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.float-btn i {
    font-size: 1.3rem;
}

/* Mobile Menu Button Base Styling */
/* Universal Header Menu Button across ALL screen sizes (Desktop & Laptop Included) */
.mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1.5px solid rgba(239, 68, 68, 0.4);
    font-weight: 800;
    font-size: 0.9rem;
    transition: var(--transition);
    cursor: pointer;
}

.menu-btn-label {
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
}

.mobile-menu-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

[data-theme="light"] .mobile-menu-btn {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1.5px solid #fca5a5 !important;
}

[data-theme="light"] .mobile-menu-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

/* Hide default inline horizontal nav-menu on Desktop so the Menu Button opens the 11-section drawer overlay */
.nav-menu {
    display: none;
}

/* Desktop/Laptop (>= 1025px) Multi-Column Glassmorphism Drawer Overlay */
@media (min-width: 1025px) {
    .nav-menu.mobile-active {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(11, 15, 25, 0.96) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        padding: 32px 48px !important;
        gap: 16px !important;
        border-bottom: 2px solid var(--color-cyan) !important;
        z-index: 1000;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85) !important;
        border-radius: 0 0 24px 24px !important;
    }

    [data-theme="light"] .nav-menu.mobile-active {
        background: rgba(255, 255, 255, 0.98) !important;
        border-bottom: 2px solid #0284c7 !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
    }

    .nav-menu.mobile-active .nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 0.95rem;
        font-weight: 700;
        color: #ffffff;
        transition: all 0.25s ease;
    }

    [data-theme="light"] .nav-menu.mobile-active .nav-link {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
    }

    .nav-menu.mobile-active .nav-link:hover {
        background: rgba(239, 68, 68, 0.15) !important;
        border-color: #ef4444 !important;
        color: #ef4444 !important;
        transform: translateY(-2px);
    }

    [data-theme="light"] .nav-menu.mobile-active .nav-link:hover {
        background: #fee2e2 !important;
        color: #dc2626 !important;
        border-color: #fca5a5 !important;
    }

    .nav-menu.mobile-active .nav-link i {
        font-size: 1.2rem;
        color: var(--color-cyan);
    }

    [data-theme="light"] .nav-menu.mobile-active .nav-link i {
        color: #0284c7 !important;
    }
}

/* ==========================================================================
   COMPLETE FLUID RESPONSIVE BREAKPOINTS (Android, iPhone, iPad, Desktop)
   ========================================================================== */

/* Laptop & Tablet Landscape (<= 1024px) */
@media (max-width: 1024px) {
    .active-status-badge, 
    #nav-sos-btn {
        display: none !important; /* Hide header buttons on tablet/mobile so header width never overflows! */
    }

    .nav-menu.mobile-active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(11, 15, 25, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 24px;
        gap: 18px;
        border-bottom: 1px solid var(--color-border-glass);
        z-index: 100;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    }

    [data-theme="light"] .nav-menu.mobile-active {
        background: rgba(255, 255, 255, 0.98);
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hero-text-side {
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(2.2rem, 5vw, 3.2rem);
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .tracker-wrapper {
        grid-template-columns: 1fr;
        padding: 32px 24px;
    }

    .stats-grid, .guidelines-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE SYSTEM (COMPACT & PROPORTIONATE SCALING)
   ========================================================================== */

/* Tablets & Mobile Devices (<= 768px) */
@media (max-width: 768px) {
    /* Global Section & Container Spacing */
    .container {
        padding: 0 14px;
    }

    .section {
        padding: 40px 0 !important;
    }

    .section-header {
        margin-bottom: 22px !important;
    }

    .section-title {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    .section-subtitle {
        font-size: 0.82rem !important;
        margin-bottom: 18px !important;
        line-height: 1.4 !important;
    }

    .section-badge {
        font-size: 0.68rem !important;
        padding: 3px 8px !important;
        margin-bottom: 8px !important;
    }

    /* Emergency Header Ticker */
    .emergency-bar {
        padding: 5px 12px;
        gap: 6px;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(90deg, #991b1b 0%, #dc2626 50%, #b91c1c 100%);
    }

    .emergency-bar-content {
        gap: 6px;
        font-size: 0.72rem;
        flex: 0 1 auto;
        min-width: 0;
    }

    .pulse-indicator {
        width: 7px;
        height: 7px;
    }

    .ticker-text {
        font-size: 0.72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ticker-text strong {
        font-size: 0.72rem;
    }

    .emergency-contacts {
        gap: 6px;
        flex-shrink: 0;
    }

    .quick-call-link {
        font-size: 0.70rem;
        white-space: nowrap !important;
    }

    .quick-call-link.call-top-btn {
        padding: 4px 8px;
        font-size: 0.70rem;
        border-width: 1px;
        border-color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.22);
    }

    .quick-call-link.call-top-btn i {
        font-size: 0.72rem;
    }

    .quick-call-link.wa-top-link {
        padding: 4px 9px;
        font-size: 0.70rem;
        border-width: 1px;
    }

    .quick-call-link.wa-top-link i {
        font-size: 0.75rem;
    }

    /* Hero Section */
    .hero {
        padding: 24px 0 36px !important;
    }

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

    .hero-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 14px !important;
    }

    .hero-description {
        font-size: 0.90rem !important;
        line-height: 1.45 !important;
        margin-bottom: 22px !important;
    }

    .badge-rapid {
        font-size: 0.70rem !important;
        padding: 4px 10px !important;
        margin-bottom: 14px !important;
    }

    .hero-cta-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        margin-bottom: 22px !important;
    }

    .btn-hero-cta,
    .btn-emergency-xl,
    .btn-air-hero,
    .btn-call-hero {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 56px !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }

    .hero-btn-icon-box {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.3rem !important;
        border-radius: 8px !important;
    }

    .hero-btn-content strong {
        font-size: 0.86rem !important;
    }

    .hero-btn-content small {
        font-size: 0.68rem !important;
    }

    .hero-features-list {
        gap: 10px !important;
        padding-top: 14px !important;
        flex-wrap: wrap !important;
    }

    .h-feature-item {
        font-size: 0.78rem !important;
        gap: 6px !important;
    }

    /* Hero Quick Dispatch / Callback Card */
    .quick-dispatch-card {
        padding: 18px 14px !important;
        border-radius: 14px !important;
    }

    .card-header {
        margin-bottom: 6px !important;
    }

    .card-title {
        font-size: 1rem !important;
        gap: 6px !important;
    }

    .live-tag {
        font-size: 0.64rem !important;
        padding: 2px 6px !important;
    }

    .card-subtitle {
        font-size: 0.76rem !important;
        margin-bottom: 14px !important;
    }

    .form-group {
        margin-bottom: 12px !important;
    }

    .form-group label {
        font-size: 0.78rem !important;
        margin-bottom: 5px !important;
    }

    .form-group input,
    .form-select,
    .phone-input-group input,
    .form-group textarea {
        font-size: 0.84rem !important;
        padding: 9px 12px !important;
        border-radius: 10px !important;
    }

    .callback-eta-badge {
        padding: 8px 10px !important;
        margin-bottom: 12px !important;
        font-size: 0.74rem !important;
        border-radius: 10px !important;
    }

    .hero-callback-actions {
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .btn-loc-action {
        padding: 8px 12px !important;
        border-radius: 10px !important;
        gap: 10px !important;
        min-height: 46px !important;
    }

    .btn-loc-action .action-btn-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.15rem !important;
        border-radius: 8px !important;
    }

    .btn-loc-action .action-btn-text strong {
        font-size: 0.80rem !important;
    }

    .btn-loc-action .action-btn-text span {
        font-size: 0.66rem !important;
    }

    .btn-loc-action .action-btn-arrow {
        font-size: 0.95rem !important;
    }

    /* Live Fleet Stats Section (Compact 2x2 Grid) */
    .stats-section {
        padding: 24px 0 !important;
    }

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

    .stat-card {
        padding: 12px 10px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }

    .stat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.25rem !important;
        border-radius: 8px !important;
    }

    .stat-number {
        font-size: 1.3rem !important;
        line-height: 1.1 !important;
    }

    .stat-label {
        font-size: 0.70rem !important;
        line-height: 1.2 !important;
    }

    /* Verified Google Reviews */
    .reviews-section {
        padding: 40px 0 !important;
    }

    .reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-top: 18px !important;
    }

    .review-card {
        padding: 14px 14px !important;
        border-radius: 14px !important;
        gap: 8px !important;
    }

    .review-user-header {
        gap: 10px !important;
    }

    .review-avatar {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.90rem !important;
    }

    .review-user-header h4 {
        font-size: 0.86rem !important;
    }

    .review-meta {
        font-size: 0.68rem !important;
    }

    .stars {
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
    }

    .review-time {
        font-size: 0.68rem !important;
    }

    .badge-new {
        font-size: 0.58rem !important;
        padding: 1px 5px !important;
    }

    .review-text {
        font-size: 0.80rem !important;
        line-height: 1.4 !important;
    }

    /* Why Choose Us */
    .why-choose-section {
        padding: 40px 0 !important;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .why-card {
        padding: 12px 10px !important;
        border-radius: 12px !important;
        gap: 8px !important;
    }

    .why-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.2rem !important;
        border-radius: 8px !important;
    }

    .why-card h4 {
        font-size: 0.86rem !important;
    }

    .why-card p {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
    }

    /* Patient Journey */
    .journey-section {
        padding: 40px 0 !important;
    }

    .journey-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .journey-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .journey-img-wrap {
        height: 130px !important;
        border-radius: 10px !important;
    }

    .journey-card h4 {
        font-size: 0.88rem !important;
    }

    .journey-card p {
        font-size: 0.74rem !important;
    }

    /* Services Section */
    .services-section {
        padding: 40px 0 !important;
    }

    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .service-card {
        padding: 14px !important;
        border-radius: 14px !important;
        gap: 10px !important;
    }

    .service-img {
        height: 140px !important;
        border-radius: 10px !important;
    }

    .service-title {
        font-size: 1rem !important;
    }

    .service-desc {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }

    .service-features li {
        font-size: 0.74rem !important;
    }

    .service-price {
        font-size: 0.85rem !important;
    }

    .btn-book-service {
        padding: 8px 14px !important;
        font-size: 0.80rem !important;
        border-radius: 8px !important;
    }

    /* Service Areas (Locations) */
    .service-areas-section {
        padding: 40px 0 !important;
    }

    .location-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .city-card {
        padding: 10px 8px !important;
        border-radius: 10px !important;
    }

    .city-name {
        font-size: 0.78rem !important;
    }

    .city-badge {
        font-size: 0.60rem !important;
        padding: 2px 5px !important;
    }

    .city-card p {
        font-size: 0.70rem !important;
        line-height: 1.25 !important;
    }

    .area-link {
        font-size: 0.72rem !important;
        padding: 4px 8px !important;
    }

    /* Pricing Section */
    .pricing-section {
        padding: 40px 0 !important;
    }

    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .pricing-card-item {
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }

    .pricing-name {
        font-size: 1rem !important;
    }

    .price-amount {
        font-size: 1.45rem !important;
    }

    .price-period {
        font-size: 0.72rem !important;
    }

    .pricing-features li {
        font-size: 0.75rem !important;
    }

    .btn-book-rate {
        padding: 8px 14px !important;
        font-size: 0.80rem !important;
        border-radius: 8px !important;
    }

    /* About Us Section */
    .about-section {
        padding: 40px 0 !important;
    }

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

    .about-stat-box {
        padding: 10px 8px !important;
        border-radius: 10px !important;
    }

    .about-stat-num {
        font-size: 1.25rem !important;
    }

    .about-stat-lbl {
        font-size: 0.68rem !important;
    }

    /* Payment & QR Section */
    .payment-section {
        padding: 40px 0 !important;
    }

    .payment-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .qr-scanner-card,
    .bank-details-card {
        padding: 16px 14px !important;
        border-radius: 14px !important;
    }

    .qr-code-img {
        max-width: 190px !important;
    }

    .bank-item {
        font-size: 0.80rem !important;
    }

    /* Floating Emergency Bar */
    .floating-emergency-bar {
        bottom: 16px !important;
        right: 14px !important;
        gap: 8px !important;
    }

    .float-label {
        display: none !important;
    }

    .float-btn {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }

    .float-btn i {
        font-size: 1.3rem !important;
    }

    /* Floating Video Controls */
    .video-controls-widget {
        bottom: 14px !important;
        left: 14px !important;
        right: auto !important;
        padding: 4px !important;
        gap: 6px !important;
    }

    .video-ctrl-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.95rem !important;
    }

    /* Tracker Map Mobile Styling & Pin Scaling */
    .map-mockup {
        height: 250px !important;
    }

    .map-pin-item {
        padding: 3px 7px !important;
        font-size: 0.60rem !important;
        gap: 3px !important;
        border-radius: 10px !important;
    }

    .map-pin-item i {
        font-size: 0.75rem !important;
    }

    #pin-base-depot { top: 12%; left: 4%; }
    #pin-patient-home { top: 72%; left: 16%; }
    #pin-hosp-alpha { top: 12%; left: 52%; }

    .map-ambulance-unit {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.95rem !important;
    }

    .unit-popup {
        font-size: 0.58rem !important;
        padding: 2px 5px !important;
        top: -24px !important;
    }

    .map-hud-bar {
        padding: 10px 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .hud-label {
        font-size: 0.55rem !important;
    }

    .hud-val {
        font-size: 0.76rem !important;
    }

    /* Form Rows & Footer */
    .form-row {
        grid-template-columns: 1fr !important;
    }

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

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

    .footer-bottom {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
}

/* Smartphone Portrait Devices (<= 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 12px !important;
    }

    .section {
        padding: 32px 0 !important;
    }

    .navbar {
        padding: 8px 0 !important;
    }

    .brand-name {
        font-size: 1.1rem !important;
    }

    .brand-sub {
        font-size: 0.50rem !important;
    }

    .hero {
        padding: 16px 0 28px !important;
    }

    .hero-title {
        font-size: 1.65rem !important;
        line-height: 1.18 !important;
    }

    .hero-description {
        font-size: 0.82rem !important;
        margin-bottom: 16px !important;
    }

    .badge-rapid {
        font-size: 0.64rem !important;
        padding: 3px 8px !important;
        margin-bottom: 10px !important;
    }

    .hero-cta-group {
        gap: 8px !important;
        margin-bottom: 18px !important;
    }

    .btn-hero-cta,
    .btn-emergency-xl,
    .btn-air-hero,
    .btn-call-hero {
        min-height: 50px !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
        gap: 8px !important;
    }

    .hero-btn-icon-box {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.2rem !important;
        border-radius: 7px !important;
    }

    .hero-btn-content strong {
        font-size: 0.80rem !important;
    }

    .hero-btn-content small {
        font-size: 0.64rem !important;
    }

    .quick-dispatch-card {
        padding: 14px 12px !important;
        border-radius: 12px !important;
    }

    .card-title {
        font-size: 0.92rem !important;
    }

    .card-subtitle {
        font-size: 0.70rem !important;
        margin-bottom: 10px !important;
    }

    .form-group {
        margin-bottom: 8px !important;
    }

    .form-group label {
        font-size: 0.72rem !important;
        margin-bottom: 3px !important;
    }

    .form-group input,
    .form-select,
    .phone-input-group input,
    .form-group textarea {
        font-size: 0.80rem !important;
        padding: 7px 10px !important;
        border-radius: 8px !important;
    }

    .callback-eta-badge {
        padding: 6px 8px !important;
        margin-bottom: 8px !important;
        font-size: 0.70rem !important;
        border-radius: 8px !important;
    }

    .btn-loc-action {
        padding: 6px 10px !important;
        border-radius: 8px !important;
        gap: 8px !important;
        min-height: 40px !important;
    }

    .btn-loc-action .action-btn-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.95rem !important;
        border-radius: 6px !important;
    }

    .btn-loc-action .action-btn-text strong {
        font-size: 0.74rem !important;
    }

    .btn-loc-action .action-btn-text span {
        font-size: 0.62rem !important;
    }

    /* Section Headings */
    .section-title {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
    }

    .section-subtitle {
        font-size: 0.76rem !important;
        margin-bottom: 14px !important;
    }

    /* Stats Grid */
    .stats-grid {
        gap: 8px !important;
    }

    .stat-card {
        padding: 8px 8px !important;
        gap: 8px !important;
        border-radius: 10px !important;
    }

    .stat-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 1.05rem !important;
    }

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

    .stat-label {
        font-size: 0.64rem !important;
    }

    /* Reviews */
    .review-card {
        padding: 10px 10px !important;
        border-radius: 10px !important;
        gap: 6px !important;
    }

    .review-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.80rem !important;
    }

    .review-user-header h4 {
        font-size: 0.78rem !important;
    }

    .review-text {
        font-size: 0.74rem !important;
        line-height: 1.3 !important;
    }

    /* Modal Dialogs */
    .modal-dialog {
        width: 96% !important;
        max-width: 96% !important;
        padding: 14px 12px !important;
        border-radius: 14px !important;
    }

    .modal-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .modal-header h3 {
        font-size: 1.05rem !important;
    }

    .modal-header p {
        font-size: 0.72rem !important;
    }

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

    .modal-actions .btn {
        width: 100% !important;
    }

    /* Toast Notification Mobile Positioning */
    .toast-notification {
        left: 12px !important;
        right: 12px !important;
        bottom: 70px !important;
        transform: translateY(20px);
    }

    .toast-notification.show {
        transform: translateY(0);
    }

    /* Floating Emergency Bar */
    .floating-emergency-bar {
        bottom: 12px !important;
        right: 10px !important;
        gap: 6px !important;
    }

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

    .float-btn i {
        font-size: 1.15rem !important;
    }
}

/* ==========================================================================
   NEW SECTIONS: SERVICE AREAS, PAYMENT, CONTACT, LOCATION
   ========================================================================== */

/* --- 1. Ambulance Service Areas --- */
.service-areas-section {
    padding: 90px 0;
    position: relative;
}

.coverage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 40px;
}

@media (max-width: 1024px) {
    .coverage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .coverage-grid {
        grid-template-columns: 1fr;
    }
}

.coverage-card {
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid var(--color-border-glass);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.coverage-card:hover {
    transform: translateY(-4px);
    border-color: #ef4444;
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.25);
}

.coverage-card-icon {
    font-size: 1.6rem;
    background: rgba(239, 68, 68, 0.12);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.coverage-card-info h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.district-tag {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(2, 132, 199, 0.15);
    color: var(--color-cyan);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.coverage-card-info p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin-bottom: 12px;
}

.area-link {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}

.area-link:hover {
    gap: 8px;
    color: #f87171;
}

/* --- View More Locations Button --- */
.view-more-container {
    margin-top: 24px;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.btn-view-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 34px;
    font-size: 0.98rem;
    font-weight: 800;
    font-family: var(--font-heading);
    letter-spacing: 0.3px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.32);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.btn-view-more:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 32px rgba(239, 68, 68, 0.55);
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    color: #ffffff !important;
}

.btn-view-more i {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.btn-view-more:hover i {
    transform: translateX(6px);
}

/* --- Service Areas Dedicated Page Styles --- */
.service-areas-hero {
    padding: 70px 0 30px;
    position: relative;
    background: radial-gradient(circle at 50% 20%, rgba(239, 68, 68, 0.08) 0%, transparent 70%);
}

.area-search-container {
    max-width: 820px;
    margin: 36px auto 0;
    padding: 24px;
    border-radius: 20px;
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid var(--color-border-glass);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.area-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.area-search-input-wrap .search-icon {
    position: absolute;
    left: 18px;
    font-size: 1.25rem;
    color: #ef4444;
    pointer-events: none;
}

.area-search-input-wrap input {
    width: 100%;
    padding: 14px 44px 14px 48px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    color: var(--color-text-white);
    background: rgba(11, 15, 25, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    outline: none;
    transition: all 0.25s ease;
}

.area-search-input-wrap input:focus {
    border-color: #ef4444;
    background: rgba(11, 15, 25, 0.95);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
}

.btn-clear-search {
    position: absolute;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

.btn-clear-search:hover {
    color: #ef4444;
}

.area-filter-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.area-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.25s ease;
}

.area-pill:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: var(--color-text-white);
    transform: translateY(-2px);
}

.area-pill.active {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4);
}

.area-pill.active i {
    color: #ffffff !important;
}

/* Light Mode Overrides for View More & Service Areas Page */
[data-theme="light"] .btn-view-more {
    color: #ffffff !important;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.25);
}

[data-theme="light"] .btn-view-more:hover {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    box-shadow: 0 12px 30px rgba(220, 38, 38, 0.4);
}

[data-theme="light"] .service-areas-hero {
    background: radial-gradient(circle at 50% 20%, rgba(239, 68, 68, 0.05) 0%, transparent 70%);
}

[data-theme="light"] .area-search-container {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .area-search-input-wrap input {
    color: #0f172a;
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="light"] .area-search-input-wrap input:focus {
    background: #ffffff;
    border-color: #ef4444;
}

[data-theme="light"] .area-pill {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}

[data-theme="light"] .area-pill:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

[data-theme="light"] .area-pill.active {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* Mobile responsive for service areas page & buttons */
@media (max-width: 640px) {
    .btn-view-more {
        width: 100%;
        max-width: 340px;
        padding: 13px 20px;
        font-size: 0.9rem;
    }
    .area-search-container {
        padding: 16px;
        margin-top: 24px;
    }
    .area-search-input-wrap input {
        font-size: 0.88rem;
        padding: 12px 36px 12px 42px;
    }
    .area-filter-pills {
        gap: 6px;
    }
    .area-pill {
        padding: 8px 14px;
        font-size: 0.8rem;
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* --- 2. Easy & Secure Payment Options --- */
.payment-section {
    padding: 90px 0;
    position: relative;
    background: rgba(11, 15, 25, 0.5);
}

.payment-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 32px;
    margin-top: 40px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .payment-grid {
        grid-template-columns: 1fr;
    }
}

.payment-card {
    padding: 32px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

.upi-qr-card {
    position: relative;
}

.qr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.qr-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qr-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(239, 68, 68, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: #0f172a;
}

.qr-user-info {
    display: flex;
    flex-direction: column;
}

.qr-holder-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin: 0;
    line-height: 1.2;
}

.qr-gpay-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.qr-accepted-tag {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.qr-image-wrapper {
    display: flex;
    justify-content: center;
    margin: 8px 0 16px;
}

.qr-scanner-frame {
    position: relative;
    width: 100%;
    max-width: 270px;
    background: #ffffff;
    border-radius: 20px;
    padding: 10px 10px 6px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.qr-scanner-frame:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

/* Floating Download QR Button in top-right of QR Image */
.btn-qr-download {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(15, 23, 42, 0.88);
    color: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-qr-download i {
    font-size: 0.85rem;
    color: #38bdf8;
    transition: transform 0.2s ease;
}

.btn-qr-download:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
}

.btn-qr-download:hover i {
    color: #ffffff;
    transform: translateY(1px);
}

.btn-qr-download.downloading {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
}

.qr-code-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

/* UPI ID Row with Copy Button */
.qr-upi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4px;
}

.qr-upi-info {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.qr-upi-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.qr-upi-val {
    font-size: 0.85rem;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.2px;
    word-break: break-all;
}

.btn-copy-upi {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-copy-upi:hover {
    transform: scale(1.04);
    box-shadow: 0 5px 14px rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, #f87171, #ef4444);
}

.btn-copy-upi.copied {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.qr-scan-instruction {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.qr-scan-instruction i {
    color: #10b981;
    font-size: 0.95rem;
}

.bank-card-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bank-table {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-border-glass);
}

.b-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.b-val {
    font-size: 0.95rem;
    color: var(--color-text-white);
    font-weight: 800;
}

.highlight-acc, .highlight-ifsc {
    color: #ef4444;
    letter-spacing: 0.5px;
}

/* Copy Button Beside Bank Details */
.b-val-with-copy {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-copy-val {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy-val.icon-only {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.95rem;
}

.btn-copy-val:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.btn-copy-val.copied {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}

[data-theme="light"] .btn-copy-val {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
}

[data-theme="light"] .btn-copy-val:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-copy-val.copied {
    background: #166534 !important;
    color: #ffffff !important;
    border-color: #166534 !important;
}

.payment-discount-box {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 12px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--color-text-white);
    margin-bottom: 24px;
}

.payment-gateways-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.gateway-badge {
    font-size: 0.82rem;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gateway-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* PhonePe Badge & Uploaded Logo */
.phonepe-badge-img {
    background: #ffffff !important;
    padding: 3px 8px !important;
    border: 1px solid #cbd5e1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.badge-brand-img {
    height: 22px;
    width: auto;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.phonepe-hdr-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
}

.phonepe-badge {
    background: #ffffff !important;
    color: #5f259f !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 900 !important;
}

.phonepe-circle-logo {
    width: 22px;
    height: 22px;
    background: #5f259f;
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.phonepe-text {
    color: #5f259f;
    font-weight: 800;
    font-size: 0.88rem;
}

/* GPay Badge (Image 1) */
.gpay-badge {
    background: #ffffff !important;
    color: #3c4043 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 800 !important;
}

.gpay-g-svg {
    flex-shrink: 0;
}

.gpay-text {
    color: #5f6368;
    font-weight: 700;
    font-size: 0.88rem;
    font-family: Arial, sans-serif;
}

/* BHIM Official Logo Badge (Uploaded Image) */
.bhim-badge-img {
    background: #ffffff !important;
    padding: 3px 8px !important;
    border: 1px solid #cbd5e1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bhim-badge-img .badge-brand-img {
    height: 20px;
}

/* Paytm Official Badge with Circular Icon */
.paytm-badge {
    background: #ffffff !important;
    color: #002970 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 900 !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.paytm-circle-logo {
    width: 22px;
    height: 22px;
    background: #00b9f1;
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 185, 241, 0.35);
}

.paytm-brand-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: -0.3px;
}

.paytm-brand-text .pay-dark {
    color: #002970;
}

.paytm-brand-text .tm-cyan {
    color: #00b9f1;
}

/* PayPal Badge */
.paypal-badge {
    background: linear-gradient(135deg, #003087 0%, #0079c1 100%) !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
}

/* MasterCard Badge */
.mastercard-badge {
    background: #111827 !important;
    color: #ffffff !important;
    border: 1px solid #374151 !important;
}

.mc-dots {
    display: inline-flex;
    position: relative;
    width: 22px;
    height: 14px;
    align-items: center;
}

.dot-red {
    width: 14px;
    height: 14px;
    background: #eb001b;
    border-radius: 50%;
    position: absolute;
    left: 0;
}

.dot-orange {
    width: 14px;
    height: 14px;
    background: #f79e1b;
    border-radius: 50%;
    position: absolute;
    right: 0;
    opacity: 0.9;
}

/* VISA Badge */
.visa-badge {
    background: linear-gradient(135deg, #1a1f71 0%, #00579f 100%) !important;
    color: #f7b600 !important;
    font-style: italic !important;
    border: 1px solid #2563eb !important;
}

/* Apple Pay Badge */
.apple-badge {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
}

/* Stripe Badge */
.stripe-badge {
    background: linear-gradient(135deg, #635bff 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    border: 1px solid #818cf8 !important;
}

/* --- 3. Contact Us Section --- */
.contact-section {
    padding: 90px 0;
    position: relative;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 36px;
    margin-top: 40px;
}

@media (max-width: 960px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.helplines-card {
    padding: 26px;
    border-radius: 18px;
}

.helplines-card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

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

@media (max-width: 500px) {
    .helpline-buttons-grid {
        grid-template-columns: 1fr;
    }
}

.helpline-num-btn {
    background: rgba(239, 68, 68, 0.12);
    border: 1.5px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
}

.helpline-num-btn:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.contact-method-card {
    padding: 20px 24px;
    border-radius: 16px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.method-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.wa-method .method-icon { background: rgba(37, 211, 102, 0.15); color: #25D366; }
.email-method .method-icon { background: rgba(2, 132, 199, 0.15); color: var(--color-cyan); }
.office-method .method-icon { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.contact-method-card h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 4px;
}

.contact-method-card p {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-bottom: 6px;
}

.method-link {
    font-size: 0.82rem;
    font-weight: 800;
    color: #25D366;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.open-hours-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: #10b981;
}

.contact-form-card {
    padding: 30px;
    border-radius: 20px;
}

.contact-form-card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-sub-note {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

/* --- 4. Our Location Section --- */
.location-section {
    padding: 90px 0;
    position: relative;
    background: rgba(11, 15, 25, 0.5);
}

.location-container-box {
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    margin-top: 40px;
}

@media (max-width: 900px) {
    .location-container-box {
        grid-template-columns: 1fr;
    }
}

.map-embed-wrapper iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
}

.location-details-sidebar {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.loc-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.loc-head i {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.loc-head h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 8px;
}

.loc-head p {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.loc-contacts-list p {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-white);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* --- LIGHT MODE OVERRIDES FOR NEW SECTIONS --- */
[data-theme="light"] .service-areas-section,
[data-theme="light"] .contact-section {
    background: #ffffff !important;
}

[data-theme="light"] .payment-section,
[data-theme="light"] .location-section {
    background: #f8fafc !important;
}

[data-theme="light"] .coverage-card,
[data-theme="light"] .payment-card,
[data-theme="light"] .helplines-card,
[data-theme="light"] .contact-method-card,
[data-theme="light"] .contact-form-card,
[data-theme="light"] .location-container-box {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .coverage-card-info h4,
[data-theme="light"] .phonepe-brand-title,
[data-theme="light"] .qr-holder-name,
[data-theme="light"] .bank-card-title,
[data-theme="light"] .b-val,
[data-theme="light"] .helplines-card h3,
[data-theme="light"] .contact-method-card h4,
[data-theme="light"] .contact-form-card h3,
[data-theme="light"] .loc-head h4,
[data-theme="light"] .loc-contacts-list p {
    color: #0f172a !important;
}

[data-theme="light"] .coverage-card-info p,
[data-theme="light"] .qr-sub,
[data-theme="light"] .b-label,
[data-theme="light"] .payment-discount-box,
[data-theme="light"] .contact-method-card p,
[data-theme="light"] .form-sub-note,
[data-theme="light"] .loc-head p {
    color: #334155 !important;
    font-weight: 500 !important;
}

[data-theme="light"] .district-tag {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

[data-theme="light"] .gateway-badge {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .upi-qr-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .qr-upi-row {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .qr-upi-label {
    color: #64748b !important;
}

[data-theme="light"] .qr-upi-val {
    color: #0369a1 !important;
}

[data-theme="light"] .qr-scan-instruction {
    color: #64748b !important;
}

[data-theme="light"] .helpline-num-btn {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1.5px solid #fca5a5 !important;
}

[data-theme="light"] .helpline-num-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   NEW SECTIONS: ABOUT US, GOOGLE REVIEWS, BLOG, FAQ
   ========================================================================== */

/* --- 1. About Us Section --- */
.about-section {
    padding: 90px 0;
    position: relative;
    background: rgba(11, 15, 25, 0.4);
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 50px;
}

@media (max-width: 900px) {
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.about-stat-box {
    padding: 24px;
    border-radius: 16px;
    text-align: center;
}

.about-stat-num {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-text-white);
    margin-bottom: 4px;
}

.about-stat-lbl {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.about-content-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 960px) {
    .about-content-grid {
        grid-template-columns: 1fr;
    }
}

.about-subhead {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

@media (max-width: 600px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

.value-card {
    padding: 18px;
    border-radius: 14px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.v-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.value-card h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 4px;
}

.value-card p {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.commitments-box {
    padding: 28px;
    border-radius: 20px;
    margin-bottom: 24px;
}

.commitments-box h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.commit-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.commit-list li {
    font-size: 0.9rem;
    color: var(--color-text-white);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}

.about-cta-banner {
    padding: 24px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-cta-banner h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 4px;
}

.about-cta-banner p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* --- 2. Verified Google Reviews --- */
.reviews-section {
    padding: 90px 0;
    position: relative;
    background: rgba(11, 15, 25, 0.5);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 40px;
}

@media (max-width: 1024px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }
}

.review-card {
    padding: 24px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    border-color: #ef4444;
}

.review-user-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ef4444;
    color: #ffffff;
    font-weight: 900;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-avatar.bg-blue { background: #0284c7; }
.review-avatar.bg-green { background: #10b981; }
.review-avatar.bg-orange { background: #f59e0b; }
.review-avatar.bg-purple { background: #8b5cf6; }
.review-avatar.bg-teal { background: #14b8a6; }

.review-user-header h4 {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--color-text-white);
}

.review-meta {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.review-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars {
    font-size: 0.85rem;
    letter-spacing: 2px;
}

.review-time {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.badge-new {
    font-size: 0.65rem;
    font-weight: 900;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.review-text {
    font-size: 0.88rem;
    color: var(--color-text-white);
    line-height: 1.5;
    font-style: italic;
}

/* --- 3. Emergency Care & Ambulance Blog --- */
.blog-section {
    padding: 90px 0;
    position: relative;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

.blog-card {
    padding: 26px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-cyan);
}

.blog-cat-tag {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    width: fit-content;
    margin-bottom: 12px;
}

.blog-card h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 10px;
    line-height: 1.35;
}

.blog-card p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin-bottom: 18px;
}

.blog-read-link {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--color-cyan);
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.blog-read-link:hover {
    color: #38bdf8;
}

/* --- 4. Frequently Asked Questions (FAQ) --- */
.faq-section {
    padding: 90px 0;
    position: relative;
    background: rgba(11, 15, 25, 0.5);
}

.faq-accordion-wrapper {
    max-width: 840px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
}

.faq-item:hover {
    border-color: rgba(2, 132, 199, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.faq-item.active {
    border-color: rgba(2, 132, 199, 0.55);
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.15);
    background: rgba(15, 23, 42, 0.95);
}

.faq-question-btn {
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    gap: 16px;
    transition: color 0.25s ease;
}

.faq-item:hover .faq-question-btn {
    color: #38bdf8;
}

.faq-item.active .faq-question-btn {
    color: #38bdf8;
}

.faq-q-text {
    flex: 1;
    line-height: 1.4;
}

.faq-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(2, 132, 199, 0.12);
    border: 1px solid rgba(2, 132, 199, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    font-size: 1.25rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.faq-item:hover .faq-icon-circle {
    background: rgba(2, 132, 199, 0.2);
    border-color: rgba(2, 132, 199, 0.45);
    color: #ffffff;
}

.faq-item.active .faq-icon-circle {
    transform: rotate(180deg);
    background: rgba(229, 9, 20, 0.16);
    border-color: rgba(229, 9, 20, 0.4);
    color: #ff4d4d;
}

.faq-answer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease, opacity 0.3s ease;
    padding: 0 24px;
    opacity: 0;
}

.faq-item.active .faq-answer-content {
    max-height: 400px;
    padding: 0 24px 22px;
    opacity: 1;
}

.faq-answer-content p {
    font-size: 0.95rem;
    color: #cbd5e1;
    line-height: 1.65;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
}

.faq-answer-content strong {
    color: #ffffff;
    font-weight: 700;
}

/* --- LIGHT MODE OVERRIDES FOR ABOUT, REVIEWS, BLOG, FAQ --- */
[data-theme="light"] .about-section,
[data-theme="light"] .blog-section {
    background: #ffffff !important;
}

[data-theme="light"] .reviews-section,
[data-theme="light"] .faq-section {
    background: #f8fafc !important;
}

[data-theme="light"] .about-stat-box,
[data-theme="light"] .value-card,
[data-theme="light"] .commitments-box,
[data-theme="light"] .about-cta-banner,
[data-theme="light"] .review-card,
[data-theme="light"] .blog-card,
[data-theme="light"] .faq-item {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .about-stat-num,
[data-theme="light"] .about-subhead,
[data-theme="light"] .value-card h4,
[data-theme="light"] .commitments-box h3,
[data-theme="light"] .commit-list li,
[data-theme="light"] .about-cta-banner h4,
[data-theme="light"] .review-user-header h4,
[data-theme="light"] .review-text,
[data-theme="light"] .faq-question-btn {
    color: #0f172a !important;
}

[data-theme="light"] .faq-icon-circle {
    background: #e0f2fe !important;
    border-color: #7dd3fc !important;
    color: #0284c7 !important;
}

[data-theme="light"] .faq-item.active {
    background: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.12) !important;
}

[data-theme="light"] .faq-item.active .faq-icon-circle {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}

[data-theme="light"] .about-stat-lbl,
[data-theme="light"] .about-p,
[data-theme="light"] .value-card p,
[data-theme="light"] .about-cta-banner p,
[data-theme="light"] .review-meta,
[data-theme="light"] .review-time,
[data-theme="light"] .blog-card p,
[data-theme="light"] .faq-answer-content p {
    color: #334155 !important;
    font-weight: 500 !important;
}

[data-theme="light"] .faq-answer-content strong {
    color: #0f172a !important;
}

[data-theme="light"] .faq-answer-content p {
    border-top-color: #e2e8f0 !important;
}

/* ==========================================================================
   WHY CHOOSE US SECTION (Scroll-Based Animated Air Ambulance & Medical Staff)
   ========================================================================== */
.why-choose-section {
    padding: 100px 0;
    position: relative;
    background: radial-gradient(circle at 10% 40%, rgba(2, 132, 199, 0.08) 0%, transparent 60%),
                radial-gradient(circle at 90% 80%, rgba(239, 68, 68, 0.06) 0%, transparent 50%),
                rgba(11, 15, 25, 0.5);
    overflow: hidden;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 1024px) {
    .why-choose-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

/* --- Left Visual Animation Stage --- */
.why-visual-stage {
    position: relative;
    width: 100%;
    transform: translateX(-90px);
    opacity: 0;
    filter: blur(5px);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease, filter 0.85s ease;
    will-change: transform, opacity;
}

.air-ambulance-scene-box {
    position: relative;
    border-radius: 24px;
    padding: 20px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.scene-top-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 16px;
}

.pulse-red-dot {
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    animation: blink 1.2s infinite alternate;
}

.scene-badge-text {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Layer 1: Background Chartered Jet */
.jet-backdrop-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
}

.jet-backdrop-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.why-visual-stage:hover .jet-backdrop-img {
    transform: scale(1.04);
}

.jet-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 15, 25, 0.85) 0%, transparent 60%);
}

.jet-status-tag {
    position: absolute;
    bottom: 12px;
    left: 14px;
    background: rgba(11, 15, 25, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-cyan);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Layer 2: Foreground Aeromedical Specialists Team */
.crew-foreground-card {
    position: relative;
    border-radius: 18px;
    padding: 12px;
    background: rgba(11, 15, 25, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    transform: scale(0.9) translateY(24px);
    opacity: 0;
    transition: transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s, opacity 0.75s ease 0.35s;
    margin-bottom: 0;
}

.crew-img-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: 14px;
    overflow: hidden;
}

.crew-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.crew-pose-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid #10b981;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.crew-details-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.crew-badge-item {
    display: flex;
    flex-direction: column;
}

.crew-badge-item strong {
    font-size: 0.82rem;
    color: #ffffff;
    font-weight: 800;
}

.crew-badge-item span {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* Live Flight Telemetry HUD Widget */
.air-hud-widget {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(11, 15, 25, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.air-hud-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.air-hud-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
}

.hud-sub {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-text-muted);
}

.hud-main {
    font-size: 0.82rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Right Content Column & 5 Standout Points --- */
.why-content-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    transform: translateX(80px);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 0.85s ease 0.15s;
    will-change: transform, opacity;
}

.why-points-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.why-point-card {
    padding: 12px 18px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, border-color 0.3s ease;
    transform: translateX(50px);
    opacity: 0;
    will-change: transform, opacity;
}

.why-point-card:hover {
    transform: translateX(4px) !important;
    border-color: #10b981;
}

.point-tick-box {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    border: 1.5px solid #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.tick-icon {
    color: #10b981;
    font-size: 1.2rem;
}

.point-content {
    flex: 1;
}

.point-content h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-white);
    margin-bottom: 0;
    line-height: 1.35;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.point-highlight-tag {
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.point-content p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.why-action-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* --- SCROLL TRIGGERED ACTIVE STATES (.in-view) --- */
.why-choose-section.in-view .why-visual-stage {
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
}

.why-choose-section.in-view .crew-foreground-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.why-choose-section.in-view .why-content-col {
    transform: translateX(0);
    opacity: 1;
}

.why-choose-section.in-view .why-point-card {
    transform: translateX(0);
    opacity: 1;
}

.why-choose-section.in-view .why-point-card:nth-child(1) { transition-delay: 0.25s; }
.why-choose-section.in-view .why-point-card:nth-child(2) { transition-delay: 0.38s; }
.why-choose-section.in-view .why-point-card:nth-child(3) { transition-delay: 0.51s; }
.why-choose-section.in-view .why-point-card:nth-child(4) { transition-delay: 0.64s; }
.why-choose-section.in-view .why-point-card:nth-child(5) { transition-delay: 0.77s; }

.why-choose-section.in-view .point-tick-box {
    animation: tickPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tickPop {
    0% { transform: scale(0.6); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* --- LIGHT MODE COMPATIBILITY FOR WHY CHOOSE US --- */
[data-theme="light"] .why-choose-section {
    background: radial-gradient(circle at 10% 40%, rgba(2, 132, 199, 0.04) 0%, transparent 60%),
                radial-gradient(circle at 90% 80%, rgba(239, 68, 68, 0.03) 0%, transparent 50%),
                #f8fafc !important;
}

[data-theme="light"] .air-ambulance-scene-box,
[data-theme="light"] .crew-foreground-card,
[data-theme="light"] .air-hud-widget,
[data-theme="light"] .why-point-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .scene-top-badge {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
}

[data-theme="light"] .scene-badge-text {
    color: #b91c1c !important;
}

[data-theme="light"] .crew-badge-item strong,
[data-theme="light"] .point-content h4 {
    color: #0f172a !important;
}

[data-theme="light"] .crew-badge-item span,
[data-theme="light"] .point-content p,
[data-theme="light"] .hud-sub {
    color: #334155 !important;
    font-weight: 500 !important;
}

[data-theme="light"] .air-hud-divider {
    background: #cbd5e1 !important;
}

[data-theme="light"] .point-tick-box {
    background: #dcfce7 !important;
    border-color: #16a34a !important;
}

[data-theme="light"] .tick-icon {
    color: #16a34a !important;
}

[data-theme="light"] .point-highlight-tag {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
}

@media (max-width: 640px) {
    .why-choose-section {
        padding: 60px 0;
    }

    .air-ambulance-scene-box {
        padding: 14px;
    }

    .jet-backdrop-wrapper {
        height: 180px;
    }

    .crew-img-wrapper {
        height: 160px;
    }

    .air-hud-widget {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .air-hud-divider {
        width: 100%;
        height: 1px;
    }

    .why-point-card {
        padding: 14px;
        gap: 12px;
    }

    .point-content h4 {
        font-size: 0.92rem;
    }

    .point-content p {
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   3D PATIENT TRANSFORMATION JOURNEY SECTION
   ========================================================================== */
.journey-section {
    padding: 100px 0;
    position: relative;
    background: radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.06) 0%, transparent 60%),
                rgba(11, 15, 25, 0.7);
    overflow: hidden;
}

.journey-interactive-wrapper {
    perspective: 1200px;
    margin-top: 40px;
}

/* Stage Step Navigation Buttons */
.journey-steps-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

@media (max-width: 840px) {
    .journey-steps-nav {
        grid-template-columns: 1fr;
    }
}

.journey-step-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
}

.journey-step-btn:hover {
    background: rgba(15, 23, 42, 0.9);
    border-color: var(--color-cyan);
    transform: translateY(-2px);
}

.journey-step-btn.active {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(16, 185, 129, 0.12) 100%);
    border-color: var(--color-cyan);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.25);
    transform: translateY(-3px);
}

.step-num-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 900;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.journey-step-btn.active .step-num-badge {
    background: var(--color-cyan);
    color: #000000;
    box-shadow: 0 0 14px var(--color-cyan);
}

.step-btn-text strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2px;
}

.step-btn-text small {
    display: block;
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

/* 3D Holographic Parallax Stage Box */
.journey-3d-stage-box {
    border-radius: 24px;
    padding: 36px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    transform-style: preserve-3d;
    position: relative;
}

.journey-slide-container {
    position: relative;
    min-height: 440px;
}

.journey-slide {
    display: none;
    grid-template-columns: 1.15fr 1fr;
    gap: 36px;
    align-items: center;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.journey-slide.active {
    display: grid;
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: slide3DIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide3DIn {
    0% {
        opacity: 0;
        transform: translateY(25px) rotateX(4deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

@media (max-width: 960px) {
    .journey-slide {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Slide Visual Stage */
.slide-visual-col {
    position: relative;
    width: 100%;
}

.slide-img-box {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.journey-slide:hover .slide-img {
    transform: scale(1.03);
}

.slide-badge-pill {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.74rem;
    font-weight: 800;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.slide-badge-pill.danger-glow { border-color: rgba(239, 68, 68, 0.6); box-shadow: 0 0 16px rgba(239, 68, 68, 0.4); }
.slide-badge-pill.cyan-glow { border-color: rgba(6, 182, 212, 0.6); box-shadow: 0 0 16px rgba(6, 182, 212, 0.4); }
.slide-badge-pill.success-glow { border-color: rgba(16, 185, 129, 0.6); box-shadow: 0 0 16px rgba(16, 185, 129, 0.4); }

.pulse-beacon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: blink 1s infinite alternate;
}
.pulse-beacon.cyan { background: var(--color-cyan); }
.pulse-beacon.green { background: #10b981; }

/* Slide Info Column */
.slide-info-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.slide-phase-tag {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.slide-info-col h3 {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
}

.slide-desc {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* 3D Live Telemetry HUD Card */
.slide-hud-card {
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(11, 15, 25, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}

.hud-status-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--radius-full);
}

.hud-status-badge.alert-badge { background: rgba(239, 68, 68, 0.18); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.35); }
.hud-status-badge.info-badge { background: rgba(6, 182, 212, 0.18); color: var(--color-cyan); border: 1px solid rgba(6, 182, 212, 0.35); }
.hud-status-badge.success-badge { background: rgba(16, 185, 129, 0.18); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.35); }

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

.vital-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vital-lbl {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}

.vital-val {
    font-size: 1.05rem;
    font-weight: 900;
}

.vital-val small {
    font-size: 0.65rem;
    font-weight: 700;
}

.slide-points-mini {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mini-point {
    font-size: 0.86rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* Controls & Progress Dots */
.journey-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.journey-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.journey-nav-btn:hover {
    background: var(--color-cyan);
    color: #000000;
    border-color: var(--color-cyan);
    transform: scale(1.08);
}

.journey-progress-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prog-dot {
    width: 28px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: all 0.3s ease;
}

.prog-dot.active {
    width: 48px;
    background: var(--color-cyan);
    box-shadow: 0 0 10px var(--color-cyan);
}

/* --- LIGHT MODE FOR PATIENT JOURNEY --- */
[data-theme="light"] .journey-section {
    background: radial-gradient(circle at 80% 20%, rgba(2, 132, 199, 0.04) 0%, transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 60%),
                #ffffff !important;
}

[data-theme="light"] .journey-step-btn {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
}

[data-theme="light"] .journey-step-btn.active {
    background: #e0f2fe !important;
    border-color: #0284c7 !important;
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.15) !important;
}

[data-theme="light"] .step-num-badge {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .journey-step-btn.active .step-num-badge {
    background: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(2, 132, 199, 0.4) !important;
}

[data-theme="light"] .step-btn-text strong,
[data-theme="light"] .slide-info-col h3,
[data-theme="light"] .mini-point {
    color: #0f172a !important;
}

[data-theme="light"] .step-btn-text small,
[data-theme="light"] .slide-desc,
[data-theme="light"] .vital-lbl,
[data-theme="light"] .hud-header {
    color: #334155 !important;
    font-weight: 500 !important;
}

[data-theme="light"] .journey-3d-stage-box,
[data-theme="light"] .slide-hud-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .journey-nav-btn {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .journey-nav-btn:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

[data-theme="light"] .prog-dot {
    background: #cbd5e1 !important;
}

[data-theme="light"] .prog-dot.active {
    background: #0284c7 !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.4) !important;
}

@media (max-width: 640px) {
    .journey-section {
        padding: 60px 0;
    }

    .journey-3d-stage-box {
        padding: 16px;
    }

    .slide-img-box {
        height: 220px;
    }

    .slide-info-col h3 {
        font-size: 1.15rem;
    }

    .hud-vitals-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ==========================================================================
   CHARTERED AIR AMBULANCE QUOTATION MODAL
   ========================================================================== */
.air-modal-dialog {
    max-width: 720px !important;
    width: 100%;
}

.air-modal-header {
    border-bottom: 1px solid rgba(6, 182, 212, 0.25);
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.air-badge-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: var(--color-cyan);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    margin-bottom: 6px;
}

.air-icon-glow {
    background: rgba(6, 182, 212, 0.15) !important;
    border: 1px solid var(--color-cyan) !important;
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.35);
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--color-cyan);
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    margin: 18px 0 12px 0;
    letter-spacing: 0.5px;
}

.input-with-icon {
    position: relative;
    width: 100%;
}

.input-icon-left {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-cyan);
    font-size: 1.1rem;
    pointer-events: none;
}

.input-with-icon input {
    padding-left: 42px !important;
}

.phone-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-right: none;
    border-radius: 12px 0 0 12px;
    padding: 0 14px;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Light Theme for Air Ambulance Modal */
[data-theme="light"] .air-badge-top {
    background: #e0f2fe !important;
    border-color: #7dd3fc !important;
    color: #0284c7 !important;
}

[data-theme="light"] .form-section-header {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-left-color: #0284c7 !important;
}

[data-theme="light"] .phone-prefix {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .input-icon-left {
    color: #0284c7 !important;
}

/* Country Selection Button with Flag & Search Badge */
.country-select-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
}

.country-select-btn:hover {
    border-color: var(--color-cyan);
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.2);
}

.country-btn-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.country-btn-left .flag-icon-img {
    width: 26px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.country-name-txt {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
}

.country-dropdown-arrow {
    font-size: 1.25rem;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
}

.country-select-btn:hover .country-dropdown-arrow {
    color: var(--color-cyan);
    transform: translateY(1px);
}

/* Airport Label Row & Count Pill */
.airport-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
}

.airport-count-pill {
    font-size: 0.68rem;
    font-weight: 800;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    letter-spacing: 0.3px;
}

.airport-select {
    padding-left: 42px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
}

/* Light Theme Overrides */
[data-theme="light"] .country-select-btn {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .country-select-btn:hover {
    border-color: #0284c7 !important;
    background: #f0f9ff !important;
}

[data-theme="light"] .country-name-txt {
    color: #0f172a !important;
}

[data-theme="light"] .country-dropdown-arrow {
    color: #64748b !important;
}

[data-theme="light"] .country-select-btn:hover .country-dropdown-arrow {
    color: #0284c7 !important;
}

[data-theme="light"] .airport-count-pill {
    background: #dcfce7 !important;
    border-color: #86efac !important;
    color: #15803d !important;
}

/* Scheduled Takeoff Date/Time Box */
.schedule-datetime-box {
    margin-top: 10px;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: rgba(6, 182, 212, 0.08);
    border: 1.5px dashed rgba(6, 182, 212, 0.4);
    border-radius: 14px;
    animation: schedFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

[data-theme="light"] .schedule-datetime-box {
    background: #f0f9ff !important;
    border-color: #7dd3fc !important;
}

/* 12-Hour Time & AM/PM Picker Group */
.time-ampm-picker-group {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.time-select-wrapper {
    flex: 1;
}

.time-sub-select {
    width: 100%;
    padding: 10px 8px !important;
    text-align: center;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

.time-colon-separator {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-cyan);
    user-select: none;
}

.ampm-toggle-btn-group {
    display: flex;
    background: rgba(15, 23, 42, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
}

.ampm-btn {
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 800;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ampm-btn.active {
    background: var(--color-cyan);
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
}

.ampm-btn:hover:not(.active) {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Light Mode Overrides for AM/PM Picker */
[data-theme="light"] .time-colon-separator {
    color: #0284c7 !important;
}

[data-theme="light"] .ampm-toggle-btn-group {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .ampm-btn {
    color: #64748b !important;
}

[data-theme="light"] .ampm-btn.active {
    background: #0284c7 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   NON-GLOWING PRESET "SELECT" PLACEHOLDER STYLING FOR ALL DROPDOWNS
   ========================================================================== */
select option[value=""] {
    color: #94a3b8 !important;
    background: #0f172a !important;
    font-weight: 500;
    text-shadow: none !important;
}

select:has(option[value=""]:checked) {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

select option:not([value=""]) {
    color: #ffffff !important;
    background: #0f172a !important;
    font-weight: 600;
}

/* Light Theme */
[data-theme="light"] select option[value=""] {
    color: #94a3b8 !important;
    background: #ffffff !important;
}

[data-theme="light"] select:has(option[value=""]:checked) {
    color: #64748b !important;
}

[data-theme="light"] select option:not([value=""]) {
    color: #0f172a !important;
    background: #ffffff !important;
}

/* ==========================================================================
   AIR AMBULANCE DISPATCH ACTION CARD (MODAL CARD VIEW)
   ========================================================================== */
.air-dispatch-card-view {
    padding: 10px 2px;
    animation: airCardSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes airCardSlideIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.air-ticket-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.air-ticket-header {
    text-align: center;
    padding-bottom: 4px;
}

.air-ticket-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.air-ticket-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
}

.air-ticket-subtitle {
    font-size: 0.88rem;
    color: #94a3b8;
    line-height: 1.45;
    max-width: 540px;
    margin: 0 auto;
}

/* Route & Summary Box */
.air-route-summary-box {
    background: rgba(15, 23, 42, 0.75);
    border: 1.5px solid rgba(6, 182, 212, 0.3);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.route-flight-path {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    margin-bottom: 14px;
}

.route-point {
    display: flex;
    flex-direction: column;
    max-width: 40%;
}

.route-point.origin {
    text-align: left;
}

.route-point.destination {
    text-align: right;
}

.point-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--color-cyan);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.point-airport {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
}

.point-city {
    font-size: 0.8rem;
    color: #94a3b8;
}

.route-plane-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    padding: 0 12px;
}

.plane-line {
    flex: 1;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.6), transparent);
}

.plane-circle-icon {
    width: 32px;
    height: 32px;
    background: rgba(6, 182, 212, 0.2);
    border: 1.5px solid var(--color-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-cyan);
    font-size: 1.1rem;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}

.summary-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-item .s-label {
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}

.summary-item .s-val {
    font-size: 0.92rem;
    font-weight: 700;
    color: #f1f5f9;
}

/* Dispatch Action Cards */
.air-dispatch-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dispatch-action-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 16px;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.dispatch-action-card:hover {
    transform: translateY(-3px);
}

/* WhatsApp Card Specific */
.dispatch-wa-card {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.15) 0%, rgba(18, 140, 126, 0.25) 100%);
    border: 2px solid #25d366;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.25);
}

.dispatch-wa-card:hover {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.25) 0%, rgba(18, 140, 126, 0.38) 100%);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
    border-color: #2ee271;
}

.wa-icon-bg {
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5);
}

/* Gmail / Email Card Specific */
.dispatch-email-card {
    background: linear-gradient(135deg, rgba(234, 67, 53, 0.12) 0%, rgba(66, 133, 244, 0.18) 100%);
    border: 2px solid rgba(234, 67, 53, 0.7);
    box-shadow: 0 6px 20px rgba(234, 67, 53, 0.2);
}

.dispatch-email-card:hover {
    background: linear-gradient(135deg, rgba(234, 67, 53, 0.22) 0%, rgba(66, 133, 244, 0.28) 100%);
    box-shadow: 0 10px 28px rgba(234, 67, 53, 0.35);
    border-color: #ea4335;
}

.gmail-icon-bg {
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(234, 67, 53, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gmail-svg-icon {
    width: 26px;
    height: 26px;
    display: block;
}

.dispatch-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.dispatch-card-content {
    flex: 1;
    display: flex;
    align-items: center;
}

.dispatch-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
}

.dispatch-card-btn-arrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 900;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 14px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.dispatch-action-card:hover .dispatch-card-btn-arrow {
    background: #ffffff;
    color: #0f172a;
    transform: translateX(3px);
}

/* Footer Back/Close */
.air-ticket-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    gap: 12px;
}

.btn-secondary-outline {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #94a3b8;
    padding: 9px 18px;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-secondary-outline:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

/* Light Mode Overrides for Dispatch Card View */
[data-theme="light"] .air-ticket-title {
    color: #0f172a !important;
}

[data-theme="light"] .air-route-summary-box {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .point-airport {
    color: #0f172a !important;
}

[data-theme="light"] .summary-item .s-val {
    color: #0f172a !important;
}

[data-theme="light"] .dispatch-card-title {
    color: #0f172a !important;
}

[data-theme="light"] .dispatch-card-desc {
    color: #475569 !important;
}

[data-theme="light"] .btn-secondary-outline {
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

[data-theme="light"] .btn-secondary-outline:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS FOR DISPATCH TICKET & ACTION BUTTONS
   ========================================================================== */
@media (max-width: 640px) {
    .air-dispatch-card-view {
        padding: 4px 0;
    }

    .air-ticket-header {
        padding-bottom: 2px;
    }

    .air-ticket-badge {
        font-size: 0.72rem;
        padding: 3px 10px;
        margin-bottom: 6px;
    }

    .air-ticket-title {
        font-size: 1.15rem;
        margin-bottom: 4px;
        line-height: 1.25;
    }

    .air-ticket-subtitle {
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .air-route-summary-box {
        padding: 12px 14px;
        border-radius: 12px;
    }

    /* Stack Route on Mobile to Prevent Jumbled Narrow Columns */
    .route-flight-path {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .route-point {
        max-width: 100% !important;
        width: 100%;
    }

    .route-point.origin,
    .route-point.destination {
        text-align: left !important;
    }

    .point-tag {
        font-size: 0.68rem;
        margin-bottom: 1px;
    }

    .point-airport {
        font-size: 0.92rem;
        line-height: 1.3;
        word-break: break-word;
    }

    .point-city {
        font-size: 0.75rem;
    }

    .route-plane-divider {
        padding: 0;
        justify-content: flex-start;
        gap: 6px;
        margin: 1px 0;
    }

    .route-plane-divider .plane-line {
        display: none;
    }

    .route-plane-divider .plane-circle-icon {
        width: 24px;
        height: 24px;
        font-size: 0.85rem;
    }

    /* Summary Details Grid */
    .summary-details-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .summary-item .s-label {
        font-size: 0.68rem;
        gap: 4px;
    }

    .summary-item .s-val {
        font-size: 0.82rem;
        line-height: 1.25;
        word-break: break-word;
    }

    /* Compact Buttons on Mobile */
    .air-dispatch-actions {
        gap: 10px;
    }

    .dispatch-action-card {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 12px;
    }

    .dispatch-card-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 1.3rem;
    }

    .gmail-svg-icon {
        width: 20px;
        height: 20px;
    }

    .dispatch-card-title {
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .dispatch-card-btn-arrow {
        padding: 5px 9px;
        font-size: 0.7rem;
        gap: 3px;
    }

    .dispatch-card-btn-arrow i {
        font-size: 0.75rem;
    }

    /* Footer Buttons */
    .air-ticket-footer {
        padding-top: 4px;
        gap: 8px;
    }

    .air-ticket-footer .btn {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }

    .btn-secondary-outline {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   EMERGENCY MEDICAL GUIDE READER MODAL (CARD VIEW) STYLING
   ========================================================================== */

.blog-card {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-cyan);
    box-shadow: 0 16px 36px rgba(6, 182, 212, 0.25);
}

.guide-modal-dialog {
    max-width: 820px;
    padding: 36px 36px 28px;
    border: 1.5px solid rgba(6, 182, 212, 0.4);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(6, 182, 212, 0.18);
    border-radius: 24px;
    background: rgba(11, 15, 25, 0.97);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}

.guide-modal-header {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--color-border-glass);
    padding-bottom: 20px;
}

.guide-header-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.guide-cat-badge {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.guide-read-time {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-cyan);
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.guide-verified-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.guide-modal-title {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 8px;
}

.guide-modal-subtitle {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

.guide-modal-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--color-text-white);
    font-size: 0.92rem;
    line-height: 1.6;
}

.guide-lead-text {
    font-size: 0.96rem;
    color: #e2e8f0;
    line-height: 1.65;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3.5px solid var(--color-cyan);
    padding: 14px 18px;
    border-radius: 0 12px 12px 0;
}

.guide-section-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.guide-block-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.guide-table-responsive {
    width: 100%;
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--color-border-glass);
}

.guide-comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.86rem;
    background: rgba(15, 23, 42, 0.65);
}

.guide-comparison-table th {
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.08);
    font-family: var(--font-heading);
    font-weight: 800;
    color: #ffffff;
    border-bottom: 1px solid var(--color-border-glass);
}

.guide-comparison-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--color-text-muted);
    line-height: 1.45;
}

.guide-comparison-table tr:last-child td {
    border-bottom: none;
}

.guide-key-points-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 640px) {
    .guide-key-points-grid {
        grid-template-columns: 1fr;
    }
}

.guide-key-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--color-border-glass);
    border-radius: 14px;
    padding: 16px;
    transition: var(--transition);
}

.guide-key-card h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.guide-key-card p {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0;
}

.guide-key-card.border-red { border-left: 3.5px solid #ef4444; }
.guide-key-card.border-cyan { border-left: 3.5px solid var(--color-cyan); }
.guide-key-card.border-blue { border-left: 3.5px solid #3b82f6; }
.guide-key-card.border-green { border-left: 3.5px solid #10b981; }
.guide-key-card.border-amber { border-left: 3.5px solid #f59e0b; }

.guide-step-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guide-step-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid var(--color-border-glass);
    border-radius: 14px;
    padding: 14px 18px;
}

.guide-step-item .step-num {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid #ef4444;
    color: #fca5a5;
    font-weight: 900;
    font-family: var(--font-heading);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guide-step-item .step-content h4 {
    font-family: var(--font-heading);
    font-size: 0.96rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
}

.guide-step-item .step-content p {
    font-size: 0.84rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0;
}

.guide-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.guide-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: #e2e8f0;
    line-height: 1.45;
}

.guide-checklist li i {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.guide-pricing-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guide-pricing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--color-border-glass);
    border-radius: 12px;
    padding: 14px 18px;
    gap: 12px;
    flex-wrap: wrap;
}

.guide-pricing-item .route-info strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.guide-pricing-item .route-info span {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.guide-pricing-item .route-cost {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--color-cyan);
    white-space: nowrap;
}

.guide-callout-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    border-radius: 14px;
}

.guide-callout-box.emergency-callout {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.guide-callout-box.emergency-callout .callout-icon {
    color: #ef4444;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.guide-callout-box.warning-callout {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.guide-callout-box.warning-callout .callout-icon {
    color: #f59e0b;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.guide-callout-box.tip-callout {
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.4);
}

.guide-callout-box.tip-callout .callout-icon {
    color: var(--color-cyan);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.guide-callout-box .callout-text {
    font-size: 0.86rem;
    color: #e2e8f0;
    line-height: 1.5;
}

.guide-modal-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-glass);
}

.guide-footer-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.guide-footer-actions .btn {
    flex: 1;
    min-width: 180px;
    justify-content: center;
    font-size: 0.88rem;
    padding: 12px 18px;
}

/* Light Theme Overrides for Guide Reader Modal */
[data-theme="light"] .guide-modal-dialog {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18) !important;
}

[data-theme="light"] .guide-modal-title,
[data-theme="light"] .guide-block-title,
[data-theme="light"] .guide-step-item .step-content h4,
[data-theme="light"] .guide-key-card h4,
[data-theme="light"] .guide-pricing-item .route-info strong,
[data-theme="light"] .guide-comparison-table th {
    color: #0f172a !important;
}

[data-theme="light"] .guide-modal-subtitle,
[data-theme="light"] .guide-comparison-table td,
[data-theme="light"] .guide-key-card p,
[data-theme="light"] .guide-step-item .step-content p,
[data-theme="light"] .guide-pricing-item .route-info span {
    color: #475569 !important;
}

[data-theme="light"] .guide-lead-text {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-left-color: #0284c7 !important;
}

[data-theme="light"] .guide-comparison-table {
    background: #f8fafc !important;
}

[data-theme="light"] .guide-comparison-table th {
    background: #e2e8f0 !important;
}

[data-theme="light"] .guide-comparison-table td {
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .guide-key-card,
[data-theme="light"] .guide-step-item,
[data-theme="light"] .guide-pricing-item {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .guide-checklist li {
    color: #1e293b !important;
}

[data-theme="light"] .guide-callout-box .callout-text {
    color: #1e293b !important;
}

[data-theme="light"] .guide-pricing-item .route-cost {
    color: #0284c7 !important;
}

/* ==========================================================================
   INTERSTATE MEDICAL TRANSFERS SUBSECTION STYLING
   ========================================================================== */

.interstate-corridors-wrapper {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.interstate-header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    border-radius: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.interstate-header-content {
    flex: 1;
    min-width: 280px;
}

.interstate-subheading {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin-top: 8px;
    margin-bottom: 6px;
}

.interstate-subdesc {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    max-width: 680px;
    line-height: 1.5;
    margin: 0;
}

.interstate-badges-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.corridor-pill-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--color-border-glass);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.interstate-features-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 24px 30px;
    border-radius: 18px;
    margin-top: 32px;
}

@media (max-width: 900px) {
    .interstate-features-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .interstate-features-bar {
        grid-template-columns: 1fr;
    }
}

.if-feature {
    display: flex;
    align-items: center;
    gap: 14px;
}

.if-feature i {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.if-feature strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    color: #ffffff;
    font-weight: 800;
}

.if-feature span {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* Light Mode Overrides for Interstate Section */
[data-theme="light"] .interstate-header-box,
[data-theme="light"] .interstate-features-bar {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .interstate-subheading,
[data-theme="light"] .if-feature strong {
    color: #0f172a !important;
}

[data-theme="light"] .interstate-subdesc,
[data-theme="light"] .if-feature span {
    color: #475569 !important;
}

[data-theme="light"] .corridor-pill-badge {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

/* ==========================================================================
   LOCATION & INTERSTATE COMPACT CARD VIEW BOOKING MODAL
   ========================================================================== */
.loc-booking-dialog {
    max-width: 460px;
    width: 92%;
    padding: 1.8rem 1.8rem 1.4rem;
    border-radius: 18px;
    background: rgba(13, 20, 36, 0.96);
    border: 1px solid rgba(239, 68, 68, 0.35);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(239, 68, 68, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.loc-booking-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-right: 1.5rem;
}

.loc-modal-icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
}

.loc-header-text {
    flex: 1;
}

.loc-modal-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

.loc-modal-subtitle {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.35;
    margin: 0;
}

/* Fast Form Styling */
.loc-booking-form .form-group {
    margin-bottom: 1.1rem;
}

.loc-booking-form label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 0.4rem;
}

.loc-booking-form .form-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 0.92rem;
    font-family: var(--font-body);
    transition: var(--transition-base);
}

.loc-booking-form .form-input:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
    background: rgba(15, 23, 42, 0.95);
}

/* Action Buttons (Call Now & WhatsApp) */
.loc-booking-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.3rem;
    margin-bottom: 1.1rem;
}

.hero-callback-actions {
    margin-top: 1rem;
    margin-bottom: 0;
}

.btn-loc-action {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.btn-loc-action:hover {
    transform: translateY(-2px);
}

.btn-loc-call {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.35);
}

.btn-loc-call:hover {
    box-shadow: 0 12px 22px rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
}

.btn-loc-wa {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.3);
}

.btn-loc-wa:hover {
    box-shadow: 0 12px 22px rgba(37, 211, 102, 0.45);
    background: linear-gradient(135deg, #2ae06c 0%, #159b8c 100%);
}

.btn-loc-mail {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(2, 132, 199, 0.35);
}

.btn-loc-mail:hover {
    box-shadow: 0 12px 22px rgba(2, 132, 199, 0.5);
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
}

.action-btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.action-btn-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.action-btn-text strong {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ffffff;
}

.action-btn-text span {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.88);
}

.action-btn-arrow {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.75);
    transition: transform 0.2s ease;
}

.btn-loc-action:hover .action-btn-arrow {
    transform: translateX(4px);
    color: #ffffff;
}

/* Trust Badges Footer */
.loc-modal-trust-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-pill {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.trust-pill strong {
    color: #ffffff;
}

/* Light Mode Overrides for Location Booking Modal */
[data-theme="light"] .loc-booking-dialog {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .loc-modal-title,
[data-theme="light"] .trust-pill strong {
    color: #0f172a !important;
}

[data-theme="light"] .loc-modal-subtitle,
[data-theme="light"] .trust-pill {
    color: #64748b !important;
}

[data-theme="light"] .loc-booking-form label {
    color: #334155 !important;
}

[data-theme="light"] .loc-booking-form .form-input {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .loc-modal-trust-footer {
    border-top-color: #e2e8f0 !important;
}

@media (max-width: 576px) {
    .loc-booking-dialog {
        padding: 1.4rem 1.1rem;
        width: 94%;
    }
    .loc-booking-header {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    .loc-modal-icon-badge {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    .loc-modal-title {
        font-size: 1.1rem;
    }
    .loc-booking-actions {
        margin-top: 1.1rem;
        gap: 0.65rem;
    }
    .btn-loc-action {
        padding: 0.8rem 1rem;
        gap: 0.75rem;
    }
    .action-btn-icon {
        width: 36px;
        height: 36px;
        font-size: 1.15rem;
    }
    .action-btn-text strong {
        font-size: 0.88rem;
    }
    .action-btn-text span {
        font-size: 0.72rem;
    }
}

/* ==========================================================================
   MASTER GLOBAL MOBILE SCALING OVERRIDES (COMPREHENSIVE ALL-SECTION FIT)
   ========================================================================== */
@media (max-width: 768px) {
    html {
        font-size: 14px !important;
    }

    /* 1. Global Container, Section Spacing & Common Typography */
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .section,
    .reviews-section,
    .why-choose-section,
    .journey-section,
    .about-section,
    .services-section,
    .pricing-matrix-section,
    .tracker-section,
    .guidelines-section,
    .service-areas-section,
    .payment-section,
    .blog-section,
    .faq-section,
    .contact-section,
    .location-section {
        padding: 28px 0 !important;
    }

    .section-header {
        margin-bottom: 14px !important;
    }

    .section-title,
    .section-header h2,
    .tracker-info h2,
    .guidelines-section h2 {
        font-size: 1.30rem !important;
        line-height: 1.20 !important;
        margin-bottom: 6px !important;
        font-weight: 800 !important;
    }

    .section-subtitle,
    .section-header p,
    .tracker-info p,
    .guidelines-section p {
        font-size: 0.74rem !important;
        margin-bottom: 10px !important;
        line-height: 1.35 !important;
    }

    .section-badge {
        font-size: 0.58rem !important;
        padding: 2px 6px !important;
        margin-bottom: 5px !important;
    }

    /* 2. Hero Section & Instant Callback Card */
    .hero {
        padding: 12px 0 20px !important;
    }

    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .hero-title {
        font-size: 1.60rem !important;
        line-height: 1.18 !important;
        margin-bottom: 8px !important;
    }

    .hero-description {
        font-size: 0.76rem !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }

    .badge-rapid {
        font-size: 0.60rem !important;
        padding: 2px 6px !important;
        margin-bottom: 8px !important;
    }

    .hero-cta-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 7px !important;
        margin-bottom: 14px !important;
    }

    .btn-hero-cta,
    .btn-emergency-xl,
    .btn-air-hero,
    .btn-call-hero {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        padding: 6px 10px !important;
        border-radius: 9px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .hero-btn-icon-box {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.15rem !important;
        border-radius: 6px !important;
    }

    .hero-btn-content strong {
        font-size: 0.78rem !important;
    }

    .hero-btn-content small {
        font-size: 0.62rem !important;
    }

    .hero-features-list {
        gap: 5px !important;
        padding-top: 8px !important;
    }

    .h-feature-item {
        font-size: 0.68rem !important;
        gap: 4px !important;
    }

    .h-feature-item i {
        font-size: 0.80rem !important;
    }

    .quick-dispatch-card {
        padding: 12px 10px !important;
        border-radius: 10px !important;
    }

    .card-header {
        margin-bottom: 3px !important;
    }

    .card-title {
        font-size: 0.88rem !important;
        gap: 4px !important;
    }

    .live-tag {
        font-size: 0.56rem !important;
        padding: 1px 4px !important;
    }

    .card-subtitle {
        font-size: 0.68rem !important;
        margin-bottom: 8px !important;
    }

    .form-group {
        margin-bottom: 6px !important;
    }

    .form-group label {
        font-size: 0.70rem !important;
        margin-bottom: 2px !important;
    }

    .form-group input,
    .form-select,
    .phone-input-group input,
    .form-group textarea {
        padding: 6px 8px !important;
        font-size: 0.78rem !important;
        border-radius: 7px !important;
    }

    .callback-eta-badge {
        padding: 5px 6px !important;
        margin-bottom: 6px !important;
        font-size: 0.68rem !important;
        border-radius: 6px !important;
    }

    .hero-callback-actions {
        gap: 6px !important;
        margin-top: 6px !important;
    }

    .btn-loc-action {
        padding: 6px 8px !important;
        border-radius: 8px !important;
        gap: 6px !important;
        min-height: 38px !important;
    }

    .action-btn-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.90rem !important;
        border-radius: 5px !important;
    }

    .action-btn-text strong {
        font-size: 0.72rem !important;
    }

    .action-btn-text span {
        font-size: 0.60rem !important;
    }

    .action-btn-arrow {
        font-size: 0.80rem !important;
    }

    /* 3. Live Stats (Compact 2x2 Dashboard Grid) */
    .stats-section {
        padding: 14px 0 !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .stat-card {
        padding: 6px 8px !important;
        gap: 6px !important;
        border-radius: 8px !important;
    }

    .stat-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 1.05rem !important;
        border-radius: 6px !important;
    }

    .stat-number {
        font-size: 1.10rem !important;
        line-height: 1.1 !important;
    }

    .stat-label {
        font-size: 0.62rem !important;
        line-height: 1.2 !important;
    }

    /* 4. Google Reviews (Compact Cards) */
    .reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .review-card {
        padding: 10px 10px !important;
        border-radius: 10px !important;
        gap: 5px !important;
    }

    .review-user-header {
        gap: 6px !important;
    }

    .review-avatar {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.78rem !important;
    }

    .review-user-header h4 {
        font-size: 0.80rem !important;
    }

    .review-meta {
        font-size: 0.62rem !important;
    }

    .stars {
        font-size: 0.68rem !important;
        letter-spacing: 1px !important;
    }

    .review-time {
        font-size: 0.62rem !important;
    }

    .badge-new {
        font-size: 0.52rem !important;
        padding: 1px 3px !important;
    }

    .review-text {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }

    /* 5. Why Choose Us Section */
    .why-choose-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .air-ambulance-scene-box {
        min-height: auto !important;
        padding: 10px 8px !important;
        border-radius: 10px !important;
    }

    .why-points-list {
        gap: 6px !important;
    }

    .why-point-card {
        padding: 7px 8px !important;
        border-radius: 8px !important;
        gap: 6px !important;
    }

    .point-tick-box {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.90rem !important;
    }

    .point-content h4 {
        font-size: 0.75rem !important;
        line-height: 1.25 !important;
    }

    .why-visual-stage,
    .crew-img-wrapper,
    .jet-backdrop-wrapper {
        display: none !important;
    }

    .why-action-row {
        flex-direction: column !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }

    .why-action-row .btn {
        width: 100% !important;
        padding: 7px 10px !important;
        font-size: 0.72rem !important;
        justify-content: center !important;
    }

    /* 6. Patient Journey (3-Stage Interactive Cards) */
    .journey-interactive-wrapper {
        padding: 0 !important;
    }

    .journey-steps-nav {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        margin-bottom: 8px !important;
    }

    .journey-step-btn {
        padding: 5px 3px !important;
        border-radius: 6px !important;
        gap: 4px !important;
    }

    .step-num-badge {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.62rem !important;
    }

    .step-btn-text strong {
        font-size: 0.66rem !important;
    }

    .step-btn-text small {
        display: none !important;
    }

    .journey-3d-stage-box {
        padding: 8px 8px !important;
        border-radius: 10px !important;
    }

    .journey-slide {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .slide-img-box {
        height: 120px !important;
        border-radius: 6px !important;
    }

    .slide-badge-pill {
        font-size: 0.52rem !important;
        padding: 2px 5px !important;
    }

    .slide-phase-tag {
        font-size: 0.58rem !important;
        margin-bottom: 3px !important;
    }

    .slide-info-col h3 {
        font-size: 0.84rem !important;
        margin-bottom: 4px !important;
    }

    .slide-desc {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    .slide-hud-card {
        padding: 6px 6px !important;
        margin-bottom: 6px !important;
        border-radius: 6px !important;
    }

    .hud-header {
        font-size: 0.58rem !important;
        margin-bottom: 3px !important;
    }

    .hud-vitals-grid {
        gap: 4px !important;
    }

    .vital-item {
        padding: 3px 4px !important;
    }

    .vital-lbl {
        font-size: 0.50rem !important;
    }

    .vital-val {
        font-size: 0.76rem !important;
    }

    .slide-points-mini {
        gap: 3px !important;
    }

    .mini-point {
        font-size: 0.64rem !important;
        gap: 4px !important;
    }

    .journey-controls-row {
        margin-top: 6px !important;
        gap: 6px !important;
    }

    .journey-nav-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.80rem !important;
    }

    /* 7. About Us Section */
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        margin-top: 8px !important;
        margin-bottom: 10px !important;
    }

    .about-stat-box {
        padding: 6px 5px !important;
        border-radius: 7px !important;
    }

    .about-stat-num {
        font-size: 1.05rem !important;
    }

    .about-stat-lbl {
        font-size: 0.58rem !important;
    }

    .about-content-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .about-subhead {
        font-size: 0.86rem !important;
        margin-bottom: 4px !important;
    }

    .about-p {
        font-size: 0.70rem !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
    }

    .value-card {
        padding: 6px 5px !important;
        border-radius: 6px !important;
        gap: 4px !important;
    }

    .v-icon {
        font-size: 0.90rem !important;
    }

    .value-card h4 {
        font-size: 0.72rem !important;
    }

    .value-card p {
        font-size: 0.60rem !important;
        line-height: 1.2 !important;
    }

    .commitments-box {
        padding: 8px 8px !important;
        border-radius: 8px !important;
    }

    .commitments-box h3 {
        font-size: 0.82rem !important;
        margin-bottom: 5px !important;
    }

    .commit-list li {
        font-size: 0.68rem !important;
        gap: 5px !important;
        margin-bottom: 4px !important;
    }

    .about-cta-banner {
        padding: 8px 8px !important;
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
    }

    .about-cta-banner h4 {
        font-size: 0.76rem !important;
    }

    .about-cta-banner p {
        font-size: 0.62rem !important;
    }

    /* 8. Services Section */
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .service-card {
        padding: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        margin-bottom: 14px !important;
    }

    .service-img-box {
        height: 175px !important;
        border-radius: 0 !important;
    }

    .service-price-badge {
        font-size: 0.74rem !important;
        padding: 4px 10px !important;
        border-radius: 8px !important;
    }

    .service-title-row {
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .service-title-row h3 {
        font-size: 1.12rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
    }

    .service-tag {
        font-size: 0.68rem !important;
        padding: 3px 8px !important;
        border-radius: 14px !important;
    }

    .service-card-body p.service-desc-text {
        font-size: 0.84rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }

    .service-card-footer {
        padding-top: 12px !important;
        margin-top: 12px !important;
        gap: 10px !important;
    }

    .btn-book-service {
        padding: 8px 16px !important;
        font-size: 0.82rem !important;
        min-height: 38px !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
    }

    /* 9. Pricing Matrix & Instant Fare Estimator */
    .pricing-tabs-wrapper {
        gap: 4px !important;
        margin-bottom: 10px !important;
    }

    .pricing-tab-btn {
        padding: 4px 9px !important;
        font-size: 0.66rem !important;
    }

    .pricing-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .pricing-cards-column {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .pricing-card-item {
        padding: 16px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 10px !important;
    }

    .p-card-header {
        gap: 10px !important;
        margin-bottom: 8px !important;
    }

    .p-card-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 1.10rem !important;
        border-radius: 8px !important;
    }

    .p-card-info h4 {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
    }

    .p-badge {
        font-size: 0.64rem !important;
        padding: 2px 6px !important;
    }

    .p-card-price {
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        margin: 6px 0 !important;
    }

    .p-card-desc {
        font-size: 0.80rem !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    .btn-book-rate {
        padding: 8px 14px !important;
        font-size: 0.80rem !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
    }

    /* 10. Live GPS Telemetry Tracker */
    .tracker-wrapper {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 10px 8px !important;
        border-radius: 10px !important;
    }

    .tracker-info h2 {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        margin-top: 3px !important;
        margin-bottom: 6px !important;
    }

    .tracker-info p {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .tracker-steps {
        gap: 5px !important;
        margin-bottom: 8px !important;
    }

    .step-item {
        gap: 6px !important;
    }

    .step-num {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.68rem !important;
    }

    .step-text h4 {
        font-size: 0.74rem !important;
    }

    .step-text p {
        font-size: 0.62rem !important;
        line-height: 1.2 !important;
    }

    .btn-sim-trigger {
        padding: 6px 10px !important;
        font-size: 0.70rem !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .tracker-map-container {
        height: 170px !important;
        border-radius: 8px !important;
    }

    .map-mockup {
        height: 135px !important;
    }

    .map-pin-item {
        padding: 2px 5px !important;
        font-size: 0.56rem !important;
        gap: 3px !important;
    }

    .map-ambulance-unit {
        padding: 2px 5px !important;
        font-size: 0.58rem !important;
    }

    .unit-popup {
        font-size: 0.52rem !important;
        padding: 1px 3px !important;
    }

    .map-hud-bar {
        padding: 4px 6px !important;
        gap: 4px !important;
    }

    .hud-label {
        font-size: 0.48rem !important;
    }

    .hud-val {
        font-size: 0.66rem !important;
    }

    /* 11. Guidelines & Emergency Protocols */
    .guidelines-section h2 {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
    }

    .guidelines-section p {
        font-size: 0.68rem !important;
    }

    .guidelines-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        margin-top: 10px !important;
    }

    .guide-card {
        padding: 8px 6px !important;
        border-radius: 8px !important;
    }

    .guide-number {
        font-size: 1.25rem !important;
        top: 3px !important;
        right: 5px !important;
    }

    .guide-content h3 {
        font-size: 0.74rem !important;
        margin-bottom: 3px !important;
    }

    .guide-content p {
        font-size: 0.60rem !important;
        line-height: 1.2 !important;
    }

    /* 12. Coverage Areas & Interstate Transfers */
    .coverage-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        margin-top: 10px !important;
    }

    .coverage-card {
        padding: 6px 5px !important;
        border-radius: 7px !important;
        gap: 5px !important;
    }

    .coverage-card-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.85rem !important;
        border-radius: 5px !important;
    }

    .coverage-card-info h4 {
        font-size: 0.72rem !important;
    }

    .district-tag {
        font-size: 0.50rem !important;
        padding: 1px 3px !important;
    }

    .coverage-card-info p {
        font-size: 0.60rem !important;
        line-height: 1.18 !important;
        margin-bottom: 3px !important;
    }

    .area-link {
        font-size: 0.62rem !important;
        padding: 1px 3px !important;
    }

    .interstate-corridors-wrapper {
        margin-top: 16px !important;
        padding-top: 12px !important;
    }

    .interstate-header-box {
        padding: 8px 8px !important;
        border-radius: 8px !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .interstate-subheading {
        font-size: 0.92rem !important;
        margin-top: 2px !important;
    }

    .interstate-subdesc {
        font-size: 0.66rem !important;
        line-height: 1.22 !important;
    }

    .interstate-badges-row {
        gap: 4px !important;
    }

    .interstate-badges-row .section-badge {
        font-size: 0.52rem !important;
        padding: 1px 4px !important;
    }

    .interstate-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        margin-top: 10px !important;
    }

    .interstate-card {
        padding: 6px 5px !important;
        border-radius: 7px !important;
        gap: 5px !important;
    }

    .interstate-card-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.85rem !important;
        border-radius: 5px !important;
    }

    .interstate-card-info h4 {
        font-size: 0.72rem !important;
    }

    .interstate-card-info p {
        font-size: 0.60rem !important;
        line-height: 1.18 !important;
    }

    /* 13. Payment & QR Scanner */
    .payment-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .qr-scanner-card,
    .bank-details-card {
        padding: 10px 8px !important;
        border-radius: 10px !important;
    }

    .qr-scanner-frame {
        padding: 6px !important;
        border-radius: 8px !important;
    }

    .qr-code-img {
        max-width: 130px !important;
    }

    .qr-avatar-img {
        width: 26px !important;
        height: 26px !important;
    }

    .qr-holder-name {
        font-size: 0.80rem !important;
    }

    .qr-upi-row strong {
        font-size: 0.68rem !important;
    }

    .bank-card-title {
        font-size: 0.86rem !important;
        margin-bottom: 6px !important;
    }

    .bank-details-list {
        gap: 4px !important;
    }

    .bank-item {
        padding: 5px 6px !important;
        font-size: 0.66rem !important;
    }

    .bank-lbl {
        font-size: 0.56rem !important;
    }

    .bank-val {
        font-size: 0.70rem !important;
    }

    .btn-copy-mini {
        padding: 2px 4px !important;
        font-size: 0.58rem !important;
    }

    .payment-gateways-row {
        gap: 4px !important;
        margin-top: 6px !important;
    }

    .payment-discount-box {
        padding: 6px 8px !important;
        font-size: 0.64rem !important;
        border-radius: 6px !important;
        margin-top: 6px !important;
    }

    /* 14. Blog & Medical Guides */
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .blog-card {
        padding: 8px !important;
        border-radius: 8px !important;
        gap: 5px !important;
    }

    .blog-img-box {
        height: 95px !important;
        border-radius: 6px !important;
    }

    .blog-content h4 {
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
    }

    .blog-content p {
        font-size: 0.65rem !important;
        line-height: 1.25 !important;
    }

    .blog-tag {
        font-size: 0.52rem !important;
        padding: 1px 3px !important;
    }

    .blog-read-time {
        font-size: 0.56rem !important;
    }

    .blog-link {
        font-size: 0.66rem !important;
        margin-top: 3px !important;
    }

    /* 15. FAQ Accordion */
    .faq-accordion-wrapper {
        margin-top: 10px !important;
        gap: 6px !important;
    }

    .faq-item {
        border-radius: 8px !important;
    }

    .faq-question-btn {
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .faq-question {
        font-size: 0.72rem !important;
    }

    .faq-icon {
        font-size: 0.85rem !important;
    }

    .faq-answer {
        padding: 0 10px 8px !important;
        font-size: 0.66rem !important;
        line-height: 1.3 !important;
    }

    /* 16. Contact Us */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 10px 8px !important;
        border-radius: 10px !important;
    }

    .contact-info-col {
        gap: 8px !important;
    }

    .helpline-buttons-grid {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    .contact-btn {
        padding: 6px 8px !important;
        font-size: 0.72rem !important;
        min-height: 36px !important;
        border-radius: 6px !important;
    }

    .contact-details-box {
        padding: 6px 8px !important;
        gap: 4px !important;
        font-size: 0.66rem !important;
    }

    .contact-form-card h3 {
        font-size: 0.86rem !important;
        margin-bottom: 6px !important;
    }

    .contact-form-actions-grid {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    /* 17. Location & Map */
    .location-container-box {
        grid-template-columns: 1fr !important;
        margin-top: 10px !important;
        border-radius: 10px !important;
    }

    .map-embed-wrapper {
        height: 220px !important;
        min-height: 220px !important;
    }

    .location-details-sidebar {
        padding: 16px 14px !important;
        gap: 12px !important;
    }

    .loc-head h4 {
        font-size: 0.95rem !important;
    }

    .loc-head p {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
    }

    .loc-contacts-list {
        gap: 6px !important;
    }

    .loc-contact-item {
        font-size: 0.82rem !important;
    }

    /* 18. Footer */
    .footer {
        padding: 20px 0 12px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .footer-brand .brand-name {
        font-size: 1.05rem !important;
    }

    .footer-desc {
        font-size: 0.66rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    .footer-title,
    .footer-col h4 {
        font-size: 0.76rem !important;
        margin-bottom: 5px !important;
    }

    .footer-links li a {
        font-size: 0.64rem !important;
    }

    .footer-bottom {
        padding-top: 8px !important;
        margin-top: 10px !important;
        font-size: 0.60rem !important;
    }

    /* 19. Floating Controls & Video Widget */
    .floating-emergency-bar {
        bottom: 10px !important;
        right: 8px !important;
        gap: 5px !important;
    }

    .float-label {
        display: none !important;
    }

    .float-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.10rem !important;
    }

    .video-controls-widget {
        bottom: 8px !important;
        left: 8px !important;
        right: auto !important;
        padding: 2px !important;
        gap: 3px !important;
    }

    .video-ctrl-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.80rem !important;
    }

    /* 20. Modals & Dialogs */
    .modal-dialog,
    .loc-booking-dialog,
    .air-modal-dialog,
    .guide-modal-dialog,
    .country-picker-dialog {
        width: 95% !important;
        max-width: 95% !important;
        padding: 12px 10px !important;
        border-radius: 12px !important;
    }

    .modal-header h3,
    .loc-modal-title,
    #lbl-air-title,
    .guide-modal-title {
        font-size: 0.98rem !important;
    }

    .modal-header p,
    .loc-modal-subtitle,
    #lbl-air-subtitle {
        font-size: 0.66rem !important;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 13px !important;
    }

    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .hero-title {
        font-size: 1.45rem !important;
    }

    .section-title,
    .section-header h2,
    .tracker-info h2,
    .guidelines-section h2 {
        font-size: 1.20rem !important;
    }
}

/* ==========================================================================
   OUR LOCATION SECTION & NAVIGATION LINK - ACTIVE
   ========================================================================== */
#our-location,
.location-section {
    display: block;
}














/* ==========================================================================
   ENHANCED MOBILE UX & UI OPTIMIZATIONS (MARCH 2026 UPDATE)
   1. Side Margins (16px Container Padding)
   2. Top Emergency Bar (Two-Tier Layout with comfortable tap targets)
   3. Hero CTA Overlay (Compact Glassmorphic Buttons, 55-60% Video Visibility)
   4. Floating Action Buttons (52px Touch Targets, Vertical Stack to avoid overlap)
   5. Clean Full-Width Button Padding
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Side Margins (Zero Gap Fix) */
    .container,
    .nav-container,
    .hero-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* 2. Top Emergency Bar (Two-Tier Layout) */
    .emergency-bar {
        display: flex !important;
        flex-direction: column !important;
        padding: 8px 16px !important;
        gap: 8px !important;
        align-items: stretch !important;
        background: linear-gradient(90deg, #991b1b 0%, #dc2626 50%, #b91c1c 100%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .emergency-bar-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .emergency-bar-content .ticker-text {
        font-size: 0.78rem !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        text-align: center !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    .emergency-contacts {
        display: flex !important;
        width: 100% !important;
        gap: 10px !important;
        justify-content: center !important;
    }

    .quick-call-link {
        flex: 1 1 0 !important;
        min-height: 40px !important;
        padding: 6px 14px !important;
        font-size: 0.82rem !important;
        border-radius: 9999px !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .quick-call-link.call-top-btn {
        background: rgba(255, 255, 255, 0.22) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
        color: #ffffff !important;
    }

    .quick-call-link.wa-top-link {
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
        color: #ffffff !important;
    }

    /* 3. Hero CTA Overlay & Background Video Visibility */
    .hero {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Keep 50% to 60% of the background video clearly visible */
    .hero-video-bg video,
    .hero-video-element {
        opacity: 0.65 !important;
        filter: brightness(1.02) contrast(1.05) !important;
    }

    .hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(11, 15, 25, 0.35) 0%,
            rgba(11, 15, 25, 0.55) 50%,
            rgba(11, 15, 25, 0.85) 100%
        ) !important;
    }

    [data-theme="light"] .hero-video-bg video,
    [data-theme="light"] .hero-video-element {
        opacity: 0.55 !important;
    }

    [data-theme="light"] .hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0.60) 50%,
            rgba(255, 255, 255, 0.90) 100%
        ) !important;
    }

    /* Compact Hero CTA buttons */
    .hero-cta-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 7px !important;
        margin-bottom: 14px !important;
    }

    .btn-hero-cta,
    .btn-emergency-xl,
    .btn-air-hero,
    .btn-call-hero {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 42px !important;
        padding: 7px 14px !important;
        border-radius: 10px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .btn-emergency-xl {
        background: rgba(220, 38, 38, 0.78) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3) !important;
    }

    .btn-air-hero {
        background: rgba(2, 132, 199, 0.75) !important;
        border: 1px solid rgba(56, 189, 248, 0.35) !important;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
    }

    .btn-call-hero {
        background: rgba(15, 23, 42, 0.78) !important;
        border: 1px solid rgba(6, 182, 212, 0.4) !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    }

    .hero-btn-icon-box {
        width: 28px !important;
        height: 28px !important;
        font-size: 1.05rem !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }

    .hero-btn-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        text-align: left !important;
    }

    .hero-btn-content strong {
        font-size: 0.80rem !important;
        letter-spacing: 0.02em !important;
    }

    .hero-btn-content small {
        font-size: 0.65rem !important;
        opacity: 0.90 !important;
    }

    /* 4. Floating Action Buttons (Touch Target Standard 52px, Vertical Stack) */
    .floating-emergency-bar {
        position: fixed !important;
        bottom: 24px !important;
        right: 14px !important;
        z-index: 998 !important;
        display: flex !important;
        flex-direction: column !important; /* Stack vertically to only take 52px width in the right margin */
        gap: 12px !important;
    }

    .float-btn {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
        align-items: center !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
        border: 2px solid rgba(255, 255, 255, 0.35) !important;
        backdrop-filter: blur(8px) !important;
    }

    .float-btn i {
        font-size: 1.50rem !important;
    }

    .float-label {
        display: none !important;
    }

    /* 5. Clean, Compact Full-Width Button Padding */
    .btn-block,
    .btn-emergency,
    .btn-loc-action,
    .hero-callback-actions .btn-loc-action {
        padding: 10px 16px !important;
        border-radius: 10px !important;
        font-size: 0.86rem !important;
        box-sizing: border-box !important;
    }

    /* Safe bottom scrolling padding so floating buttons don't block controls */
    body {
        padding-bottom: 20px !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ==========================================================================
   EXECUTIVE LEGAL COMPLIANCE HUB & CARD VIEW MODALS (CUSTOM QUICKCARE UI)
   ========================================================================== */
.legal-section {
    padding: 90px 0;
    position: relative;
    background: radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.07), transparent 60%),
                radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.05), transparent 50%),
                #070a12;
    overflow: hidden;
}

.legal-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.3), rgba(6, 182, 212, 0.3), transparent);
}

/* Trust Badges Strip */
.legal-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
    margin-bottom: 36px;
}

.trust-strip-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}

.trust-strip-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.trust-strip-item i {
    font-size: 1.05rem;
}

/* 2-Card Asymmetric Modern Grid */
.legal-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1040px;
    margin: 0 auto;
}

.legal-card-unified {
    position: relative;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 15, 29, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* Card Accent Glowing Top Bars */
.legal-card-unified::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: opacity 0.3s ease, height 0.3s ease;
}

.card-theme-terms::before {
    background: linear-gradient(90deg, #ef4444, #f43f5e, #fb7185);
}

.card-theme-cancellation::before {
    background: linear-gradient(90deg, #0284c7, #06b6d4, #14b8a6);
}

.legal-card-unified:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(239, 68, 68, 0.12);
}

.card-theme-cancellation:hover {
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(6, 182, 212, 0.15);
}

/* Card Top Row */
.legal-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.legal-badge-tag {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.badge-tag-terms {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.28);
}

.badge-tag-cancellation {
    background: rgba(6, 182, 212, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(6, 182, 212, 0.28);
}

.legal-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transition: transform 0.3s ease;
}

.legal-card-unified:hover .legal-icon-box {
    transform: scale(1.08) rotate(-4deg);
}

.icon-box-terms {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(244, 63, 94, 0.08) 100%);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #ef4444;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2);
}

.icon-box-cancellation {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(14, 165, 233, 0.08) 100%);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: #06b6d4;
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.2);
}

/* Card Main Content */
.legal-card-heading {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.legal-card-summary {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 22px;
}

/* Feature Highlights Checklist */
.legal-card-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.legal-highlight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.legal-card-unified:hover .legal-highlight-item {
    background: rgba(255, 255, 255, 0.05);
}

.legal-highlight-item i {
    font-size: 1.05rem;
    flex-shrink: 0;
}

.card-theme-terms .legal-highlight-item i {
    color: #f87171;
}

.card-theme-cancellation .legal-highlight-item i {
    color: #38bdf8;
}

/* Card Bottom Footer */
.legal-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.clause-count-chip {
    font-size: 0.82rem;
    font-weight: 700;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Custom Elevated CTA Buttons */
.btn-legal-glow {
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.btn-glow-terms {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

.btn-glow-terms:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 10px 26px rgba(239, 68, 68, 0.55);
    transform: translateY(-2px);
}

.btn-glow-cancellation {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35);
}

.btn-glow-cancellation:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 10px 26px rgba(2, 132, 199, 0.55);
    transform: translateY(-2px);
}

.btn-legal-glow i {
    transition: transform 0.25s ease;
}

.btn-legal-glow:hover i {
    transform: translateX(4px);
}

/* ==========================================================================
   STATE-OF-THE-ART UNIFIED LEGAL MODAL (WITH TABS & SEARCH)
   ========================================================================== */
.legal-portal-dialog {
    max-width: 820px !important;
    width: 95% !important;
    background: #0b1120 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 24px !important;
    padding: 28px 32px !important;
    color: #e2e8f0 !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75) !important;
}

/* Modal Top Bar */
.legal-portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.portal-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portal-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.portal-title-area h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.portal-title-area p {
    font-size: 0.82rem;
    color: #94a3b8;
    margin: 2px 0 0 0;
}

/* Segmented Tabs Switcher Inside Modal */
.legal-tabs-switcher {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px;
    border-radius: 14px;
    margin-bottom: 20px;
}

.legal-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.legal-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.legal-tab-btn.active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.legal-tab-btn.tab-cancellation.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

/* Clauses Search Box Inside Modal */
.legal-search-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.legal-search-wrapper i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 1.1rem;
}

.legal-search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px 10px 42px;
    font-size: 0.88rem;
    color: #ffffff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.legal-search-input:focus {
    border-color: var(--color-cyan);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
}

/* Modern Clause Cards */
.legal-portal-clauses-box {
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.portal-clause-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 20px;
    transition: all 0.2s ease;
}

.portal-clause-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateX(4px);
}

.clause-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.clause-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-size: 0.82rem;
    font-weight: 800;
}

.clause-tag-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(6, 182, 212, 0.24);
}

.clause-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.clause-card-body {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #cbd5e1;
}

.clause-card-body strong {
    color: #ffffff;
}

/* Modal Bottom Action Strip */
.legal-portal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-footer-support {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: #94a3b8;
}

.legal-footer-support a {
    color: #38bdf8;
    font-weight: 700;
    text-decoration: underline;
}

.btn-portal-close {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-portal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   DAY MODE (LIGHT MODE) OVERRIDES FOR LEGAL SECTION & PORTAL
   ========================================================================== */
[data-theme="light"] .legal-section {
    background: #f1f5f9 !important;
}

[data-theme="light"] .trust-strip-item {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .legal-card-unified {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .legal-card-unified:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .legal-card-heading {
    color: #0f172a !important;
}

[data-theme="light"] .legal-card-summary {
    color: #475569 !important;
}

[data-theme="light"] .legal-highlight-item {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

[data-theme="light"] .legal-card-unified:hover .legal-highlight-item {
    background: #f1f5f9 !important;
}

[data-theme="light"] .legal-card-footer {
    border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .clause-count-chip {
    color: #64748b !important;
}

/* Light Mode Modal */
[data-theme="light"] .legal-portal-dialog {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .legal-portal-header {
    border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .portal-title-area h3 {
    color: #0f172a !important;
}

[data-theme="light"] .portal-title-area p {
    color: #64748b !important;
}

[data-theme="light"] .legal-tabs-switcher {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .legal-tab-btn {
    color: #475569 !important;
}

[data-theme="light"] .legal-tab-btn:hover {
    color: #0f172a !important;
    background: #e2e8f0 !important;
}

[data-theme="light"] .legal-tab-btn.active {
    color: #ffffff !important;
}

[data-theme="light"] .legal-search-input {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .portal-clause-card {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .portal-clause-card:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .clause-card-title {
    color: #0f172a !important;
}

[data-theme="light"] .clause-card-body {
    color: #334155 !important;
}

[data-theme="light"] .clause-card-body strong {
    color: #0f172a !important;
}

[data-theme="light"] .legal-portal-footer {
    border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .legal-footer-support {
    color: #64748b !important;
}

[data-theme="light"] .btn-portal-close {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

@media (max-width: 820px) {
    .legal-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .legal-section {
        padding: 45px 0 !important;
    }
    .legal-card-unified {
        padding: 24px 20px;
    }
    .legal-portal-dialog {
        padding: 20px 16px !important;
    }
    .legal-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .btn-legal-glow {
        justify-content: center;
    }
}

/* ==========================================================================
   SUBPAGE "BACK TO HOME" NAVIGATION BUTTONS & BREADCRUMBS
   ========================================================================== */
.page-nav-breadcrumb {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.btn-back-home {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: rgba(15, 23, 42, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #e2e8f0;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.btn-back-home:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ffffff;
    transform: translateX(-4px);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.25);
}

.btn-back-home i {
    font-size: 1.15rem;
    color: #ef4444;
    transition: transform 0.25s ease;
}

.btn-back-home:hover i {
    transform: translateX(-3px);
}

/* Navbar Back to Home Quick Action Pill */
.nav-back-home-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    background: rgba(239, 68, 68, 0.14);
    border: 1.5px solid rgba(239, 68, 68, 0.4);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.nav-back-home-pill:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4);
}

.nav-back-home-pill i {
    font-size: 1.05rem;
    color: #ef4444;
    transition: color 0.2s ease;
}

.nav-back-home-pill:hover i {
    color: #ffffff;
}

.nav-link-home-priority {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
    font-weight: 800 !important;
}

.nav-link-home-priority:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* Light Mode Overrides */
[data-theme="light"] .btn-back-home {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .btn-back-home:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #dc2626 !important;
}

[data-theme="light"] .nav-back-home-pill {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}

[data-theme="light"] .nav-back-home-pill:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .nav-back-home-pill span {
        display: none;
    }
    .nav-back-home-pill {
        padding: 8px 12px;
    }
}


/* ==========================================================================
   SERVICES & PRICING NEW UI TOOLBAR, SORT CONTROLS & ENHANCED CARDS
   ========================================================================== */

/* Services Toolbar & Sort By */
.services-filter-sort-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: -10px auto 35px auto;
    padding: 16px 24px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
}

[data-theme="light"] .services-filter-sort-bar {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
}

.services-count-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

[data-theme="light"] .services-count-indicator {
    color: #475569 !important;
}

.services-count-indicator strong {
    color: var(--color-text-white);
}

[data-theme="light"] .services-count-indicator strong {
    color: #0f172a !important;
}

.live-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    display: inline-block;
    animation: livePulseAnim 2s infinite ease-in-out;
}

@keyframes livePulseAnim {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.25); }
}

.sort-by-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sort-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

[data-theme="light"] .sort-label {
    color: #475569 !important;
}

.custom-select-box {
    position: relative;
    display: inline-block;
}

.sort-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-sm);
    padding: 9px 36px 9px 14px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    outline: none;
}

[data-theme="light"] .sort-dropdown {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.sort-dropdown:hover, .sort-dropdown:focus {
    border-color: var(--color-cyan) !important;
    box-shadow: 0 0 0 3px var(--color-cyan-glow) !important;
}

.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-cyan);
    font-size: 1.15rem;
}

/* Service Specs Box & Typography inside Service Cards */
.service-desc-text {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

[data-theme="light"] .service-desc-text {
    color: #475569 !important;
}

.service-specs-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[data-theme="light"] .service-specs-box {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

.spec-line {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--color-text-white);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

[data-theme="light"] .spec-line {
    color: #1e293b !important;
}

.spec-line i {
    font-size: 1rem;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Pricing Controls Bar */
.pricing-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-glass);
}

[data-theme="light"] .pricing-controls-bar {
    border-bottom-color: #e2e8f0 !important;
}

.pricing-controls-bar .pricing-tabs-wrapper {
    margin-bottom: 0 !important;
}

.p-card-routes, .p-card-vehicles {
    font-size: 0.82rem;
    color: var(--color-badge-text);
    background: var(--color-badge-bg);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 8px 0 12px 0;
    line-height: 1.4;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

[data-theme="light"] .p-card-routes, [data-theme="light"] .p-card-vehicles {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border-color: #bae6fd !important;
}

/* Micro-animation when sorting cards */
@keyframes cardSortReflow {
    0% {
        opacity: 0.3;
        transform: scale(0.98) translateY(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.card-sort-animate {
    animation: cardSortReflow 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (max-width: 900px) {
    .services-filter-sort-bar, .pricing-controls-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .sort-by-wrapper {
        justify-content: space-between;
        width: 100%;
    }
    .custom-select-box, .sort-dropdown {
        width: 100%;
    }
}



/* ==========================================================================
   VIBRANT NON-DULL SERVICE CARDS SPEC CONTAINERS & COLOR ACCENTS
   ========================================================================== */

/* Enhanced Base Service Card */
.service-card {
    border-radius: 18px !important;
    overflow: hidden !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}

[data-theme="light"] .service-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .service-card:hover {
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.06) !important;
    border-color: #cbd5e1 !important;
}

/* Image Box and Badges */
.service-img-box {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.service-price-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.service-price-badge.blue-badge-bg {
    background: rgba(2, 132, 199, 0.9);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.service-price-badge.cyan-badge-bg {
    background: rgba(6, 182, 212, 0.9);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.service-price-badge.red-badge-bg {
    background: rgba(239, 68, 68, 0.92);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.service-price-badge.purple-badge-bg, .service-price-badge.gray-badge-bg {
    background: rgba(71, 85, 105, 0.92);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.service-price-badge.emerald-badge-bg {
    background: rgba(16, 185, 129, 0.92);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Service Card Body */
.service-card-body {
    padding: 20px 20px 22px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.service-title-row h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0;
    color: var(--color-text-heading);
}

[data-theme="light"] .service-title-row h3 {
    color: #0f172a !important;
}

/* Vibrant Tags */
.service-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.service-tag.blue-tag {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.service-tag.cyan-tag {
    background: #cffafe;
    color: #0891b2;
    border: 1px solid #a5f3fc;
}

.service-tag.red-tag {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.service-tag.purple-tag, .service-tag.gray-tag {
    background: #f3e8ff;
    color: #7e22ce;
    border: 1px solid #d8b4fe;
}

.service-tag.emerald-tag {
    background: #d1fae5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

[data-theme="dark"] .service-tag.blue-tag {
    background: rgba(2, 132, 199, 0.2);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.3);
}
[data-theme="dark"] .service-tag.cyan-tag {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.3);
}
[data-theme="dark"] .service-tag.red-tag {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}
[data-theme="dark"] .service-tag.purple-tag {
    background: rgba(139, 92, 246, 0.2);
    color: #c084fc;
    border-color: rgba(192, 132, 252, 0.3);
}
[data-theme="dark"] .service-tag.emerald-tag {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.3);
}

.service-desc-text {
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 14px;
    color: var(--color-text-muted);
}

[data-theme="light"] .service-desc-text {
    color: #334155 !important;
}

/* Vibrant Spec Containers */
.service-specs-container {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    transition: all 0.25s ease;
}

/* Light Mode Themes for Specs */
[data-theme="light"] .service-specs-container.patient-theme {
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.85) 0%, #f8fafc 100%) !important;
    border: 1px solid #bae6fd !important;
    border-left: 4px solid #0284c7 !important;
}

[data-theme="light"] .service-specs-container.bls-theme {
    background: linear-gradient(135deg, rgba(236, 254, 255, 0.85) 0%, #f8fafc 100%) !important;
    border: 1px solid #a5f3fc !important;
    border-left: 4px solid #06b6d4 !important;
}

[data-theme="light"] .service-specs-container.als-theme {
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.85) 0%, #f8fafc 100%) !important;
    border: 1px solid #fecaca !important;
    border-left: 4px solid #ef4444 !important;
}

[data-theme="light"] .service-specs-container.mortuary-theme {
    background: linear-gradient(135deg, rgba(245, 243, 255, 0.85) 0%, #f8fafc 100%) !important;
    border: 1px solid #ddd6fe !important;
    border-left: 4px solid #8b5cf6 !important;
}

[data-theme="light"] .service-specs-container.homecare-theme {
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.85) 0%, #f8fafc 100%) !important;
    border: 1px solid #a7f3d0 !important;
    border-left: 4px solid #10b981 !important;
}

/* Dark Mode Themes for Specs */
[data-theme="dark"] .service-specs-container.patient-theme {
    background: rgba(2, 132, 199, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-left: 4px solid #0284c7 !important;
}

[data-theme="dark"] .service-specs-container.bls-theme {
    background: rgba(6, 182, 212, 0.08) !important;
    border: 1px solid rgba(34, 211, 238, 0.2) !important;
    border-left: 4px solid #06b6d4 !important;
}

[data-theme="dark"] .service-specs-container.als-theme {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(248, 113, 113, 0.2) !important;
    border-left: 4px solid #ef4444 !important;
}

[data-theme="dark"] .service-specs-container.mortuary-theme {
    background: rgba(139, 92, 246, 0.08) !important;
    border: 1px solid rgba(167, 139, 250, 0.2) !important;
    border-left: 4px solid #8b5cf6 !important;
}

[data-theme="dark"] .service-specs-container.homecare-theme {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(52, 211, 153, 0.2) !important;
    border-left: 4px solid #10b981 !important;
}

/* Spec Rows & Icon Badges */
.spec-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.spec-icon-pill {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.blue-icon-bg {
    background: rgba(2, 132, 199, 0.15);
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.25);
}

.cyan-icon-bg {
    background: rgba(6, 182, 212, 0.15);
    color: #0891b2;
    border: 1px solid rgba(6, 182, 212, 0.25);
}

.red-icon-bg {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.purple-icon-bg {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.25);
}

.gray-icon-bg {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.25);
}

.emerald-icon-bg {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.spec-detail {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.spec-lbl {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--color-text-dim);
}

[data-theme="light"] .spec-lbl {
    color: #64748b !important;
}

.spec-val {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text-white);
    line-height: 1.35;
}

[data-theme="light"] .spec-val {
    color: #0f172a !important;
}

/* Service Card Footer */
.service-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    margin-top: auto;
    border-top: 1px solid var(--color-border-glass);
}

[data-theme="light"] .service-card-footer {
    border-top-color: #e2e8f0 !important;
}

.price-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.price-lbl {
    font-size: 0.70rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-val {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
}

.price-val.text-red { color: #ef4444; }
.price-val.text-cyan { color: #06b6d4; }
.price-val.text-blue { color: #3b82f6; }
.price-val.text-purple { color: #a855f7; }
.price-val.text-emerald { color: #10b981; }
.price-val.text-slate { color: #94a3b8; }

[data-theme="light"] .price-val.text-red { color: #dc2626 !important; }
[data-theme="light"] .price-val.text-cyan { color: #0284c7 !important; }
[data-theme="light"] .price-val.text-blue { color: #2563eb !important; }
[data-theme="light"] .price-val.text-purple { color: #7c3aed !important; }
[data-theme="light"] .price-val.text-emerald { color: #059669 !important; }
[data-theme="light"] .price-val.text-slate { color: #334155 !important; }

.btn-book-service {
    padding: 10px 18px;
    font-size: 0.86rem;
    font-weight: 800;
    border-radius: 10px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-book-service:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* Floating Action Button Safe Spacing on Mobile */
@media (max-width: 768px) {
    .services-section, .pricing-matrix-section {
        padding-bottom: 55px !important;
    }

    .service-card-footer {
        padding-right: 4px !important;
    }

    .floating-emergency-bar {
        bottom: 16px !important;
        right: 12px !important;
        gap: 8px !important;
    }
    
    .floating-emergency-bar a {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.25rem !important;
    }
}



/* ==========================================================================
   DAY MODE (LIGHT THEME) TEXT CONTRAST & VISIBILITY GUARANTEES
   ========================================================================== */
[data-theme="light"] .highlight-text,
[data-theme="light"] .section-title .highlight-text,
[data-theme="light"] .hero-title .highlight-text {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #0284c7 !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block;
}

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

[data-theme="light"] .section-title strong {
    color: #0f172a !important;
}

[data-theme="light"] .legal-section .section-title {
    color: #0f172a !important;
}

[data-theme="light"] .legal-section .section-title .highlight-text {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #0284c7 !important;
    font-weight: 900 !important;
}


/* ==========================================================================
   WHY CHOOSE US DEDICATED PAGE STYLING
   ========================================================================== */
.why-page-hero {
    padding-top: 130px;
    padding-bottom: 20px;
    position: relative;
}

@media (max-width: 768px) {
    .why-page-hero {
        padding-top: 110px;
        padding-bottom: 10px;
    }
}

/* Ensure why-choose-section on dedicated page renders smoothly */
.why-page-hero + .why-choose-section,
.why-choose-section.in-view {
    padding-top: 20px;
}

/* Make sure the visual stage and cards are active on standalone page */
.why-choose-section .why-visual-stage {
    opacity: 1;
    transform: none;
    filter: none;
}

.why-choose-section .why-point-card {
    opacity: 1;
    transform: none;
}

.why-choose-section .crew-foreground-card {
    opacity: 1;
    transform: none;
}

/* Excellence Pillars Deep-Dive Grid */
.pillars-deepdive-section {
    padding: 70px 0;
    background: radial-gradient(circle at 50% 10%, rgba(239, 68, 68, 0.05) 0%, transparent 60%);
}

.excellence-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 40px;
}

@media (max-width: 1100px) {
    .excellence-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .excellence-pillars-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.excellence-card {
    padding: 28px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.excellence-card:hover {
    transform: translateY(-5px);
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.excellence-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.pillar-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.air-icon-box {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: #06b6d4;
}

.metro-icon-box {
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.4);
    color: #eab308;
}

.icu-icon-box {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.fare-icon-box {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981;
}

.trust-icon-box {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #a855f7;
}

.call-icon-box {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #ffffff;
}

.pillar-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.pillar-header-meta h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

.pillar-desc {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.pillar-specs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pillar-specs-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: #cbd5e1;
    line-height: 1.45;
}

.pillar-specs-list li i {
    font-size: 1.05rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.pillar-action-wrap {
    margin-top: auto;
}

.excellence-summary-card {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.12) 0%, rgba(15, 23, 42, 0.85) 100%);
    border-color: rgba(239, 68, 68, 0.35);
}

.summary-contact-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

/* Trust metrics numbers banner */
.trust-metrics-section {
    padding: 40px 0 60px 0;
}

.trust-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .trust-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .trust-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.metric-box {
    padding: 24px 20px;
    border-radius: 18px;
    text-align: center;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.25s ease;
}

.metric-box:hover {
    transform: translateY(-4px);
    border-color: rgba(239, 68, 68, 0.3);
}

.metric-num {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.metric-label {
    font-size: 0.9rem;
    color: #94a3b8;
    font-weight: 600;
}

/* Light Mode Overrides for Why Choose Us Page */
[data-theme="light"] .why-page-hero .section-title,
[data-theme="light"] .pillars-deepdive-section .section-title {
    color: #0f172a !important;
}

[data-theme="light"] .excellence-card {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .excellence-card:hover {
    border-color: #ef4444 !important;
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.12) !important;
}

[data-theme="light"] .pillar-header-meta h3 {
    color: #0f172a !important;
}

[data-theme="light"] .pillar-desc {
    color: #475569 !important;
}

[data-theme="light"] .pillar-specs-list li {
    color: #334155 !important;
}

[data-theme="light"] .metric-box {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .metric-num {
    color: #0f172a !important;
}

[data-theme="light"] .metric-label {
    color: #64748b !important;
}

[data-theme="light"] .excellence-summary-card {
    background: linear-gradient(145deg, #fef2f2 0%, #ffffff 100%) !important;
    border-color: #fca5a5 !important;
}


/* ==========================================================================
   HIGH-PERFORMANCE GPU ACCELERATION & 60FPS SMOOTH MOBILE/TABLET SCROLLING
   ========================================================================== */

/* Throttled dynamic navbar classes */
.navbar.navbar-scrolled {
    padding: 10px 0 !important;
    background: rgba(11, 15, 25, 0.96) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="light"] .navbar.navbar-scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
}

/* Offscreen section rendering optimization (improves initial paint & scroll FPS) */
@media (max-width: 1024px) {
    .section:not(.hero) {
        content-visibility: auto;
        contain-intrinsic-size: 1px 650px;
    }

    /* ELIMINATE HEAVY BACKDROP-FILTER (BLUR) ON MOBILE & TABLETS
       Prevents GPU fill-rate exhaustion and frame drops during touch scrolling */
    *, *::before, *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* High-performance solid/semi-opaque card surfaces in Dark Mode */
    .glass-panel,
    .service-card,
    .service-specs-container,
    .review-card,
    .coverage-card,
    .blog-card,
    .faq-item,
    .stat-card,
    .excellence-card,
    .metric-box,
    .pricing-card,
    .legal-portal-dialog,
    .guide-modal-dialog,
    .loc-booking-dialog,
    .air-modal-dialog {
        background-color: #0f172a !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    }

    /* High-performance solid/semi-opaque card surfaces in Day Mode */
    [data-theme="light"] .glass-panel,
    [data-theme="light"] .service-card,
    [data-theme="light"] .service-specs-container,
    [data-theme="light"] .review-card,
    [data-theme="light"] .coverage-card,
    [data-theme="light"] .blog-card,
    [data-theme="light"] .faq-item,
    [data-theme="light"] .stat-card,
    [data-theme="light"] .excellence-card,
    [data-theme="light"] .metric-box,
    [data-theme="light"] .pricing-card,
    [data-theme="light"] .legal-portal-dialog,
    [data-theme="light"] .guide-modal-dialog,
    [data-theme="light"] .loc-booking-dialog,
    [data-theme="light"] .air-modal-dialog {
        background-color: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    }

    /* Navbar solid background on mobile/tablet */
    .navbar {
        background-color: #0b0f19 !important;
    }

    [data-theme="light"] .navbar {
        background-color: #ffffff !important;
    }

    /* Nav menu drawer on mobile */
    .nav-menu {
        background-color: #0b0f19 !important;
    }

    [data-theme="light"] .nav-menu {
        background-color: #ffffff !important;
    }

    /* Prevent mobile GPU memory spikes during touch scroll */
    html, body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Lightweight shadows for action buttons on mobile */
    .btn-emergency,
    .btn-book-service,
    .pulse-button,
    .float-btn {
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    }

    /* Reduce keyframe animation loop frequency for low-power chipsets */
    .pulse-indicator,
    .pulse-dot,
    .status-dot,
    .pulse-red-dot {
        animation-duration: 2.2s !important;
    }
}