/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== COMMON PAGE HEADER STYLES ===== */
.page-header {
    text-align: center;
    margin-bottom: 40px;
}

.page-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Enable hardware acceleration for better performance */
* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* Optimize animations for reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


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

/* === UTILITY COLOR CLASSES === */
/* Quick access color classes for common use cases */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-white { color: var(--white) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }

.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-transparent { background-color: transparent !important; }

.border-primary { border-color: var(--border-primary) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }
.border-light { border-color: var(--border-light) !important; }
.border-medium { border-color: var(--border-medium) !important; }


/* === IMPORTANT COLOR OVERRIDES === */
/* Prevent color inheritance conflicts */
.force-white-text { color: var(--white) !important; }
.force-primary-text { color: var(--text-primary) !important; }
.force-secondary-text { color: var(--text-secondary) !important; }



/* === HEADER-SPECIFIC CSS EXTRACTED FROM INDEX.HTML === */













/* === LOADING OVERLAY (moved from index.css) === */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--loading-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    padding: 2.5rem;
    border-radius: 20px;
    background: var(--loading-container-bg);
    box-shadow: var(--loading-shadow);
}

/* Small-screen loading tweaks */
@media (max-width: 480px) {
    .loading-container { padding: 1.2rem; border-radius: 14px; }
}

/* Small-screen header spacing tweaks */
@media (max-width: 768px) {
    .header-section { padding: clamp(0.3rem, 1vh, 0.6rem) clamp(0.4rem, 2vw, 1rem); }
}








/* Accessible skip link: hide visually but reveal on focus for keyboard users */
.skip-link {
    position: absolute;
    left: -9999px;
    top: -9999px;
    background: var(--skip-link-bg);
    color: var(--skip-link-color);
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
}
.skip-link:focus,
.skip-link:focus-visible {
    left: 10px;
    top: 10px;
    outline: var(--skip-link-outline);
    box-shadow: var(--skip-link-shadow);
}




/* FINAL RULE TO PREVENT RESIZING ISSUES */
@media (max-width: 1024px) {
    html, body {
        overflow: auto;
    }
}

/* Smooth transitions for menu positioning */

/* Accessible skip link: hide visually but reveal on focus for keyboard users */
.skip-link {
    position: absolute;
    left: -9999px;
    top: -9999px;
    background: var(--skip-link-bg);
    color: var(--skip-link-color);
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
}
.skip-link:focus,
.skip-link:focus-visible {
    left: 10px;
    top: 10px;
    outline: var(--skip-link-outline);
    box-shadow: var(--skip-link-shadow);
}






/* ===== DESKTOP CONTAINER ===== */
/* Desktop .container styles moved to global .container rule to avoid duplication */

/* ===== MODERN MOBILE REDESIGN ===== */
@media (max-width: 768px) {
    /* Modern Mobile Reset */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
        width: 100%;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background:
            radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
            rgba(230, 250, 230, 0.6) !important; /* Match desktop background */
    }

   
    /* Mobile Header Section - Modern Design */
    .header-section {
        padding: 2rem 1.5rem 1rem 1.5rem;
        text-align: center;
        background:
            radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
            rgba(230, 250, 230, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        margin-bottom: 0;
    }

    /* Mobile Choice Cards - Modern Card Design */
    .choices-section {
        flex: 1;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
            rgba(230, 250, 230, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .choice {
        width: 100%;
        max-width: 320px;
        background:
            radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
            rgba(230, 250, 230, 0.6);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border-radius: 25px;
        padding: 2rem 1.5rem;
        text-align: center;
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.1),
            0 8px 20px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.3);
        position: relative;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(0);
    }

    .choice:active {
        transform: translateY(2px) scale(0.98);
        box-shadow:
            0 10px 20px rgba(0, 0, 0, 0.15),
            0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* Emergency Card - Red Theme */
    .emergency-choice {
        background: linear-gradient(135deg,
            rgba(139, 75, 92, 0.04) 0%,
            rgba(166, 123, 123, 0.02) 100%);
        border: none !important;
        border-left: 6px solid var(--primary-color) !important;
    }

    /* Hero Card - Teal Theme */
    .hero-choice,
    .donor-choice {
        background:
            radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
            rgba(230, 250, 230, 0.6);
        border: none !important;
        border-left: 6px solid var(--green-success) !important;
    }

    /* Mobile Choice Icons */
    .choice-icon-wrap {
        width: 80px;
        height: 80px;
        margin: 0 auto 1.5rem auto;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        overflow: hidden;
        position: relative;
    }

    .emergency-choice .choice-icon-wrap {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        box-shadow: 0 8px 20px rgba(139, 75, 92, 0.4);
    }

    .hero-choice .choice-icon-wrap,
    .donor-choice .choice-icon-wrap {
        background: linear-gradient(135deg, var(--green-success), var(--green-success-light));
        box-shadow: 0 8px 20px rgba(46, 213, 115, 0.4);
    }

    /* MOBILE CHOICE BACKGROUND FIX - ULTRA HIGH PRIORITY */
    .choice,
    .emergency-choice,
    .hero-choice,
    .donor-choice,
    section.choice,
    .choices-section .choice,
    .choice-container .choice {
        background:
            radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
            rgba(230, 250, 230, 0.6) !important;
        background-color: rgba(230, 250, 230, 0.6) !important;
    }

    /* Mobile Typography */
    .choice h2 {
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: 1rem;
        line-height: 1.3;
        letter-spacing: -0.01em;
    }

    .emergency-choice h2 {
        color: var(--primary-color);
    }

    .hero-choice h2,
    .donor-choice h2 {
        color: var(--green-success);
    }

    .choice p {
        font-size: 0.95rem;
        line-height: 1.6;
        color: var(--gray-666);
        margin-bottom: 1.5rem;
        font-weight: 400;
    }

    /* Mobile Buttons - Modern Design */
    .choice-btn {
        width: 100%;
        padding: 1rem 2rem;
        border-radius: 50px;
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .emergency-btn {
        background: linear-gradient(135deg, var(--brown-primary), var(--brown-medium));
        color: white;
        box-shadow: 0 8px 20px rgba(139, 115, 85, 0.2);
    }

    .emergency-btn:active {
        transform: translateY(1px);
        box-shadow: 0 4px 10px rgba(139, 115, 85, 0.3);
    }

    .hero-btn {
        background: linear-gradient(135deg, var(--brown-accent), var(--brown-light));
        color: white;
        box-shadow: 0 8px 20px rgba(122, 132, 113, 0.2);
    }

    .hero-btn:active {
        transform: translateY(1px);
        box-shadow: 0 4px 10px rgba(122, 132, 113, 0.3);
    }

}


/* Duplicate mobile section removed - consolidated above */

/* ===== CONSOLIDATED MEDIA QUERIES ===== */
@media (max-width: 480px) {
    body {
        padding-top: 0 !important;
    }
}

@media (min-width: 1025px) {
}

@media (max-height: 650px) {
}

/* === DARK MODE STYLES - DESKTOP ONLY === */
/* Dark mode container styles moved to global dark mode rules to avoid duplication */

/* === UTILITY CLASSES === */
.circle {
    border-radius: 50%;
}

.text-center {
    text-align: center;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

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

.justify-center {
    justify-content: center;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

/* Universal box-sizing and reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Low resolution screen scaling */
@media (max-height: 700px) {
    html {
        font-size: 14px !important;
    }
    
    .container {
        transform: translate(-50%, -50%) scale(0.9) !important;
    }
}

@media (max-height: 600px) {
    html {
        font-size: 12px !important;
    }
    
    .container {
        transform: translate(-50%, -50%) scale(0.8) !important;
    }
}

@media (max-height: 500px) {
    html {
        font-size: 10px !important;
    }
    
    .container {
        transform: translate(-50%, -50%) scale(0.7) !important;
    }
}
@media (min-width: 769px) {
    html, body {
        overflow-y: auto !important; /* Allow vertical scrolling */
        overflow-x: hidden !important; /* Prevent horizontal scrolling */
        max-width: 100vw !important;
        scroll-behavior: smooth;
    }

    /* Force viewport lock on desktop */
    html {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

/* Global html styles */
html {
    margin: 0 !important;
    padding: 0 !important;
}

/* Desktop html styles */
@media (min-width: 769px) {
    html {
        height: 100vh !important;
    }
}

/* Global body styles - will be overridden by media queries */
body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', sans-serif;
    background:
        radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
        rgba(230, 250, 230, 0.6);
    color: var(--text-primary);
    position: relative;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
}

/* Desktop body styles */
@media (min-width: 769px) {
    body {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

/* Desktop Choice Layout - Vertical centering */
.choice {
        justify-content: center !important; /* Vertical centering layout */
        gap: clamp(1rem, 2vh, 1.5rem) !important; /* Standard gap between elements */
    }

    .choice .choice-content {
        flex: none !important; /* Don't expand, use natural size */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* Center content */
        align-items: center !important;
        text-align: center !important;
    }

    /* Ensure all desktop content within choice is perfectly centered */
    .choice .choice-content * {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .choice .choice-icon-wrap {
        margin: 0 auto 1.5rem auto !important; /* Center horizontally */
        width: clamp(70px, 10vmin, 85px) !important; /* Restore original size */
        height: clamp(70px, 10vmin, 85px) !important; /* Restore original size */
    }

    .choice h2 {
        margin: 0 auto 1rem auto !important; /* Center horizontally */
    }

    .choice p {
        margin: 0 auto 0 auto !important; /* Center horizontally */
    }
}





/* Desktop Menu Positioning */
/* Medium screens (700px-1000px) - Fix icon centering */
@media (min-width: 700px) and (max-width: 1000px) {
    .choice .choice-icon-wrap {
        margin: 0 auto 1.5rem auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .choice .choice-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .choice h2, .choice p {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}



/* ===== SHARED CSS VARIABLES ===== */
:root {
    /* === TYPOGRAPHY === */
    --font-heading: 'Playfair Display', 'Georgia', serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --font-accent: 'Inter', 'Segoe UI', sans-serif;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;

    /* === SPACING === */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* === SHADOWS === */
    --shadow-soft: var(--shadow-soft-complex);
    --shadow-medium: var(--shadow-medium-complex);
    --shadow-strong: var(--shadow-strong-complex);

    /* === TRANSITIONS === */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* === BORDER RADIUS === */
    --radius-sm: 8px;
    --radius-md: 15px;
    --radius-lg: 20px;
    --radius-xl: 25px;
    --radius-full: 50%;

    /* === COMPONENT DIMENSIONS === */
    --toggle-button-size: 60px;
    --toggle-menu-gap: 6px;
    --toggle-button-size-mobile: 44px;
    --toggle-menu-gap-mobile: 6px;
    --left-menu-primary: var(--secondary-color);
    --left-menu-buttons: var(--secondary-dark);
    --right-menu-primary: var(--primary-color);
    --right-menu-buttons: var(--primary-dark);

    --glass-light: var(--glass-light);
    --glass-dark: var(--glass-dark);
}

/* Mobile Variables */
@media (max-width: 768px) {
    :root {
        --toggle-button-size: var(--toggle-button-size-mobile);
        --toggle-menu-gap: var(--toggle-menu-gap-mobile);
        --fluid-text-sm: clamp(0.875rem, 2.5vw, 1rem);
        --fluid-text-base: clamp(1rem, 2.8vw, 1.125rem);
        --fluid-text-lg: clamp(1.125rem, 3.2vw, 1.375rem);
        --fluid-text-xl: clamp(1.375rem, 4vw, 1.875rem);
    }
}


/* === ACCESSIBILITY: REDUCED MOTION SUPPORT === */
@media (prefers-reduced-motion: reduce) {
}

/* Desktop-specific container adjustments - moved to consolidated media queries section */


/* Moved to consolidated media queries section */

/* === AMBIENT BACKGROUND === */
.ambient-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cream) 0%, var(--bg-neutral-light) 100%);
}

.loading-dots {
    display: flex;
    gap: 0.5rem;
}

.loading-dots .dot {
    width: 6px;
    height: 6px;
    background: var(--slate-600);
    border-radius: 50%;
    animation: calmDotBounce 2s infinite ease-in-out;
}

.dot-1 { animation-delay: 0s; }
.dot-2 { animation-delay: 0.2s; }
.dot-3 { animation-delay: 0.4s; }

/* === RESPONSIVE UTILITIES === */
/* MODIFIED: Removed tablet and small desktop overrides that forced scrolling. 
   The new fluid layout handles these cases automatically. */


@media (min-width: 1201px) {
    /* No major changes needed as the base styles are for desktop */
}

/* main-container code start */
/* CONSOLIDATED: Mobile Responsive Behavior - moved to first mobile breakpoint */
@media (max-width: 768px) {
    /* Enable full page scrolling on mobile */
    html, body {
        overflow-x: hidden !important; /* Prevent horizontal scrolling */
        overflow-y: auto !important; /* Allow vertical scrolling for entire page */
        height: auto !important; /* Allow natural height */
        min-height: 100vh !important; /* Minimum viewport height */
        position: relative !important; /* Remove fixed positioning */
        padding-top: 0 !important;
        max-width: 100vw !important; /* Constrain to viewport width */
        scroll-behavior: smooth !important; /* Smooth scrolling */
        background:
            radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
            rgba(230, 250, 230, 0.6) !important; /* Match desktop background */
    }

    main {
        overflow: visible !important; /* Allow badges to extend beyond main */
        height: auto !important; /* Natural height */
        min-height: 100vh !important; /* Minimum viewport height */
        max-height: none !important; /* Remove height constraints */
        position: relative !important; /* Natural positioning */
        width: 100vw !important; /* Full viewport width */
        max-width: 100vw !important; /* Full viewport width */
        box-sizing: border-box !important; /* Include padding in width */
        border: none !important; /* No border for clean mobile design */
        border-radius: 0 !important; /* No rounded corners */
        margin: 0 !important; /* No margin */
        padding: 0 !important; /* No padding */
        background: transparent !important; /* No background */
        -webkit-backdrop-filter: none !important; /* No blur effect */
        backdrop-filter: none !important; /* No blur effect */
        box-shadow: none !important; /* No shadow */
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important; /* Allow content to flow naturally */
    }

    /* .container padding rule removed - duplicate of line 1178 */

    .decorative-element,
    .geometric-elements,
    .shape-3,
    .shape-4 {
        display: none;
    }

    .particles {
        opacity: 0.6;
    }

    /* Mobile container styling removed - duplicate of line 2225 */

    .choice-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        height: 100%;
        position: relative;
        justify-content: flex-start;
        overflow: visible; /* MODIFIED: Was 'hidden', changed to 'visible' to allow badges to show */
    }

    .header-section {
        margin-bottom: 0 !important; /* No gap below header for seamless background */
        padding: clamp(0.2rem, 0.8vh, 0.4rem) clamp(0.2rem, 1vw, 0.5rem) !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important; /* Prevent width overflow */
        display: block !important; /* Ensure header displays */
        overflow-x: hidden !important; /* Prevent horizontal overflow */
        overflow-y: hidden !important; /* Prevent header scrolling */
        position: sticky !important; /* Keep header fixed at top */
        top: 0 !important; /* Stick to top of viewport */
        z-index: 100 !important; /* Ensure header stays above content */
        box-sizing: border-box !important; /* Include padding in width */
        word-wrap: break-word !important; /* Break long words */
        overflow-wrap: break-word !important; /* Break long words */
    }

    .heart-icon {
        font-size: clamp(1.1rem, 4vh, 1.6rem) !important;
    }

    /* Mobile badge positioning fixes - half overlapping design */
    .emergency-badge, .hero-badge {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: clamp(-0.8rem, -1.5vh, -1.2rem) !important; /* Perfect half outside, half inside choice card */
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1000 !important;
        min-width: clamp(100px, 25vw, 150px) !important;
        max-width: clamp(150px, 40vw, 200px) !important;
        padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.8rem, 2vw, 1.2rem) !important;
        font-size: clamp(0.7rem, 1.5vw, 0.9rem) !important;
        border-radius: clamp(12px, 2vw, 20px) !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        opacity: 1 !important;
        margin: 0 !important;
    }

    /* Emergency choice mobile overflow fix */
    .emergency-choice, .hero-choice {
        overflow: visible !important; /* Allow badges to extend beyond choice card */
    }

        /* Modern Mobile Choice Cards - Complete Redesign */
    .choices-section {
        gap: 3rem !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 2rem 1.5rem 3rem 1.5rem !important; /* Increased top padding for badges */
        min-height: auto !important;
        flex: 1 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow: visible !important; /* Allow content to extend naturally */
    }

    /* Modern Choice Card Design - Properly Centered Content */
    .choice {
        background:
            radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
            rgba(230, 250, 230, 0.6) !important;
        border: none !important;
        border-radius: 24px !important;
        padding: 3.5rem 1.5rem 2.5rem 1.5rem !important; /* Increased top padding for badge space */
        min-height: 420px !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1),
                    0 8px 16px rgba(0, 0, 0, 0.05) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        transform: translateY(0) !important;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        position: relative !important;
        overflow: visible !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 400px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; /* Changed from center to space-between */
        align-items: center !important;
        align-self: center !important;
        text-align: center !important;
    }

    /* Mobile Choice Content Wrapper - Center logos and text */
    .choice .choice-icon-wrap {
        flex: 0 0 auto !important; /* Don't grow or shrink */
        margin: 0 auto 1.5rem auto !important; /* Center horizontally */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 80px !important;
        height: 80px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }

    .choice h2 {
        flex: 0 0 auto !important; /* Don't grow or shrink */
        margin: 0 auto 1rem auto !important; /* Center horizontally */
    }

    .choice p {
        flex: 0 0 auto !important; /* Don't grow or shrink */
        margin: 0 auto 0 auto !important; /* Center horizontally */
    }

    /* Create a centered content area */
    .choice .choice-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Ensure all content within choice is perfectly centered */
    .choice .choice-content * {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .choice .emergency-badge,
    .choice .hero-badge {
        flex: 0 0 auto !important; /* Don't grow or shrink */
        position: absolute !important;
        top: -20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important;
    }

    /* Mobile Choice Button Positioning */
    .choice .choice-btn {
        margin-top: clamp(1.5rem, 4vh, 2.5rem) !important;
        margin-bottom: clamp(1rem, 3vh, 1.5rem) !important;
        align-self: center !important;
        width: 100% !important;
        max-width: 280px !important;
    }

    /* Mobile Emergency Button - Bottom Position */
    .emergency-choice .emergency-btn {
        margin-top: clamp(1.5rem, 4vh, 2.5rem) !important;
        margin-bottom: clamp(1rem, 3vh, 1.5rem) !important;
        order: 999 !important; /* Ensure it's last */
    }

    /* Mobile Hero Button - Bottom Position */
    .hero-choice .hero-btn {
        margin-top: clamp(1.5rem, 4vh, 2.5rem) !important;
        margin-bottom: clamp(1rem, 3vh, 1.5rem) !important;
        order: 999 !important; /* Ensure it's last */
    }

    /* Mobile Button Border Styling - Only for Save a Life button */
    .choice .hero-btn {
        border: 2px solid var(--green-teal-darker) !important; /* Deep green border for visibility */
        border-radius: 16px !important; /* Ensure border radius is maintained */
    }

    /* More specific mobile hero button border override */
    .hero-choice .hero-btn {
        border: 2px solid var(--green-teal-darker) !important; /* Deep green border for visibility */
    }

    /* Emergency Choice - Red Theme */
    .emergency-choice {
        border: none !important;
        border-left: 6px solid var(--primary-color) !important;
        background: linear-gradient(135deg,
            rgba(139, 75, 92, 0.04) 0%,
            rgba(166, 123, 123, 0.02) 100%) !important;
    }

    /* Hero Choice - Teal Theme */
    .hero-choice {
        border: none !important;
        border-left: 6px solid var(--accent-color) !important;
        background: linear-gradient(135deg,
            rgba(107, 139, 123, 0.04) 0%,
            rgba(139, 171, 155, 0.02) 100%) !important;
    }

    /* Modern Mobile Touch Interactions */
    .choice:active {
        transform: translateY(4px) scale(0.98) !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08),
                    0 4px 8px rgba(0, 0, 0, 0.04) !important;
    }

    /* Modern Icon Styling - Centered */
    .choice-icon-wrap {
        width: 80px !important;
        height: 80px !important;
        border-radius: 50% !important;
        margin: 0 auto 1.5rem auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 2.2rem !important;
        overflow: hidden !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        flex-shrink: 0 !important;
    }

    .emergency-choice .choice-icon-wrap {
        background: rgba(139, 75, 92, 0.1) !important;
        border: 2px solid rgba(139, 75, 92, 0.2) !important;
    }

    .hero-choice .choice-icon-wrap {
        background: rgba(13, 148, 136, 0.1) !important;
        border: 2px solid rgba(13, 148, 136, 0.2) !important;
    }

    /* Modern Typography - Centered Content */
    .choice h2 {
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        margin: 0 0 1rem 0 !important;
        text-align: center !important;
        letter-spacing: -0.5px !important;
        flex-shrink: 0 !important;
    }

    .emergency-choice h2 {
        color: var(--primary-color) !important;
        text-shadow: none !important;
    }

    .hero-choice h2 {
        color: var(--green-primary) !important;
        text-shadow: none !important;
    }

    .choice p {
        font-size: 1.15rem !important;
        line-height: 1.6 !important;
        color: var(--gray-600) !important;
        text-align: center !important;
        margin: 0 0 1.5rem 0 !important;
        font-weight: 400 !important;
        padding: 0 0.5rem !important;
        flex-shrink: 0 !important;
    }

    /* Modern Button Styling - Centered */
    .choice-btn {
        width: 100% !important;
        padding: 1.2rem 1.5rem !important;
        border-radius: 16px !important;
        font-weight: 700 !important;
        font-size: 1.1rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border: none !important;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        cursor: pointer !important;
        text-decoration: none !important;
        display: block !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .emergency-btn {
        background: var(--primary-dark) !important;
        color: white !important;
        box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3) !important;
    }

    .hero-btn {
        background: var(--green-primary) !important;
        color: white !important;
        box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3) !important;
    }

    .choice-btn:active {
        transform: translateY(2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    /* Modern Mobile Animations */
    @keyframes mobileCardFloat {
        0%, 100% {
            transform: translateY(0) scale(1);
        }
        50% {
            transform: translateY(-2px) scale(1.01);
        }
    }

    @keyframes mobileIconPulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }
        50% {
            transform: scale(1.05);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
        }
    }

    @keyframes mobileButtonGlow {
        0%, 100% {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        50% {
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
        }
    }

    /* Apply subtle animations on non-reduced motion devices */
    @media (prefers-reduced-motion: no-preference) {
        .choice {
            animation: mobileCardFloat 6s infinite ease-in-out;
        }

        .choice:nth-child(1) {
            animation-delay: 0s;
        }

        .choice:nth-child(2) {
            animation-delay: 3s;
        }

        .choice-icon-wrap {
            animation: mobileIconPulse 4s infinite ease-in-out;
        }

        .emergency-btn {
            animation: mobileButtonGlow 3s infinite ease-in-out;
        }

        .hero-btn {
            animation: mobileButtonGlow 3.5s infinite ease-in-out;
        }
    }

    /* Enhanced touch feedback for mobile */
    .choice:hover {
        transform: translateY(-4px) scale(1.02) !important;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12),
                    0 12px 24px rgba(0, 0, 0, 0.08) !important;
    }

    .choice-icon-wrap:hover {
        transform: scale(1.1) !important;
    }

    .emergency-choice:hover .choice-icon-wrap {
        box-shadow: 0 12px 32px rgba(139, 75, 92, 0.2) !important;
        border-color: rgba(139, 75, 92, 0.4) !important;
    }

    .hero-choice:hover .choice-icon-wrap {
        box-shadow: 0 12px 32px rgba(13, 148, 136, 0.2) !important;
        border-color: rgba(13, 148, 136, 0.4) !important;
    }

    /* Hide divider on mobile for clean design */
    .divider {
        display: none !important;
    }


    /* Emergency badge mobile optimization */
    .emergency-badge {
        position: absolute !important;
        top: -16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
        border-radius: 20px !important;
        background: var(--primary-dark) !important;
        color: white !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
        z-index: 10 !important;
        white-space: nowrap !important;
    }

    /* Hero badge mobile optimization */
    .hero-badge {
        position: absolute !important;
        top: -16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
        border-radius: 20px !important;
        background: var(--green-primary) !important;
        color: white !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3) !important;
        z-index: 10 !important;
        white-space: nowrap !important;
    }

    .choice-container {
        padding-top: clamp(1rem, 2vh, 1.5rem) !important; /* Reduced top padding for badge space */
        margin-top: 0 !important; /* No gap from header for seamless background */
        display: flex !important; /* Ensure it displays without container */
        flex: 1 !important; /* Take remaining space */
        overflow: visible !important; /* Allow badges to extend beyond section */
        box-sizing: border-box !important; /* Include padding in width */
    }

    .choice {
        padding: clamp(0.5rem, 1.5vh, 0.8rem) clamp(0.4rem, 1.5vw, 0.8rem) !important;
        padding-top: clamp(3rem, 5vh, 4rem) !important; /* Large top padding for internal badges */
        margin-bottom: clamp(0.2rem, 0.5vh, 0.4rem);
        min-height: auto;
        border-radius: 16px !important;
        width: 100% !important;
        max-width: 100% !important; /* Prevent width overflow */
        overflow: visible !important; /* MODIFIED: Was 'hidden', changed to 'visible' to allow badges to show */
        box-sizing: border-box !important; /* Include padding in width */
        word-wrap: break-word !important; /* Break long words */
        overflow-wrap: break-word !important; /* Break long words */
        position: relative !important; /* Ensure badges position correctly */
    }

    .choice-icon-wrap {
        width: clamp(70px, 12vmin, 85px) !important;
        height: clamp(70px, 12vmin, 85px) !important;
        margin-bottom: clamp(0.4rem, 1vh, 0.6rem) !important;
    }

    .choice h2 {
        font-size: clamp(1.4rem, 4vmin, 1.8rem) !important;
        margin-bottom: clamp(0.5rem, 1.2vh, 0.8rem) !important;
        line-height: 1.3;
    }

    .choice p {
        font-size: clamp(1rem, 3vmin, 1.2rem) !important;
        line-height: 1.4;
        margin-bottom: clamp(0.4rem, 1vh, 0.6rem) !important;
    }

    .choice-btn {
        padding: clamp(0.5rem, 1.5vmin, 0.7rem) clamp(1rem, 4vw, 1.8rem) !important;
        font-size: clamp(0.75rem, 2vmin, 0.9rem) !important;
        min-height: clamp(38px, 5vmin, 44px) !important;
        border-radius: 25px !important;
        border-width: 2px !important;
    }

    /* Reduce animations on mobile for performance */
    .choice:hover {
        flex: 1 !important;
        transform: translateY(-2px) !important;
    }

    .choice:hover .choice-icon-wrap {
        transform: translateY(-5px) scale(1.02) !important;
    }

    .choice:hover .choice-btn {
        transform: translateY(-3px) scale(1.02) !important;
    }

    /* Hide divider on mobile */
    .divider {
        display: none !important;
    }

    /* Fix white rectangular backgrounds in emergency section - MOVED TO END OF FILE */

    .emergency-choice .choice-icon-wrap {
        background: transparent !important;
        border: 2px solid rgba(220, 38, 38, 0.6) !important;
        box-shadow: 0 8px 20px rgba(220, 38, 38, 0.2) !important;
    }
}

/* Extra small mobile optimization */
@media (max-width: 480px) {
    /* Remove body padding to ensure proper container height */
    body {
        padding-top: 0 !important;
    }

    .choice-container {
        gap: clamp(0.8rem, 1.5vh, 1.2rem) !important;
        padding: clamp(0.1rem, 0.8vw, 0.3rem);
    }

    .header-section {
        padding: clamp(0.2rem, 1vh, 0.6rem) clamp(0.2rem, 1.2vw, 0.6rem) !important;
        margin-bottom: 0 !important; /* No gap below header for seamless background */
        position: sticky !important; /* Keep header fixed at top */
        top: 0 !important; /* Stick to top of viewport */
        z-index: 100 !important; /* Ensure header stays above content */
        overflow-y: hidden !important; /* Prevent header scrolling */
    }

    .choice {
        padding: clamp(0.6rem, 2.5vh, 1.2rem) clamp(0.5rem, 1.8vw, 1rem) !important;
        margin-bottom: clamp(0.2rem, 0.6vh, 0.4rem);
        border-radius: 14px !important;
    }

    .choice-icon-wrap {
        width: clamp(70px, 14vmin, 90px) !important;
        height: clamp(70px, 14vmin, 90px) !important;
        margin-bottom: clamp(0.7rem, 1.8vh, 1rem) !important;
    }

    .choice h2 {
        font-size: clamp(1.3rem, 3.5vmin, 1.6rem) !important;
        margin-bottom: clamp(0.8rem, 2vh, 1.2rem) !important;
    }

    .choice p {
        font-size: clamp(0.95rem, 2.5vmin, 1.1rem) !important;
        margin-bottom: clamp(0.6rem, 1.8vh, 1rem) !important;
    }

    .choice-btn {
        padding: clamp(0.4rem, 1.2vmin, 0.6rem) clamp(0.8rem, 3.5vw, 1.5rem) !important;
        font-size: clamp(0.7rem, 1.8vmin, 0.85rem) !important;
        min-height: clamp(36px, 4.5vmin, 42px) !important;
        border-radius: 22px !important;
    }

    /* Disable some animations on very small screens */
    .choice:hover {
        transform: none !important;
    }

    .choice:hover .choice-icon-wrap {
        transform: scale(1.01) !important;
    }

    .choice:hover .choice-btn {
        transform: scale(1.01) !important;
    }

    /* Fix white rectangular backgrounds in emergency section - MOVED TO END OF FILE */

    .emergency-choice .choice-icon-wrap {
        background: transparent !important;
        border: 2px solid rgba(220, 38, 38, 0.6) !important;
        box-shadow: 0 8px 20px rgba(220, 38, 38, 0.2) !important;
    }
    
    /* Remove problematic top margins on mobile - let flex layout handle spacing */
    .hero-choice,
    .emergency-choice:nth-child(2) {
        margin-top: 0 !important;
    }
}


/* === UTILITY CLASSES === */
.circle {
    border-radius: 50%;
}

.text-center {
    text-align: center;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

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

.justify-center {
    justify-content: center;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

/* ===== NEW: RESPONSIVE SIZING & LAYOUT SYSTEM ===== */
/* This section contains the new clamp() based scaling for all elements */

/* Header styles moved to css/header.css to centralize menu and header rules */

/* Choices Section Fluid Sizing */
.choices-section {
    flex: 1; /* Take remaining space after header */
    width: 100%;
    display: flex;
    flex-direction: row; /* Side by side layout */
    align-items: stretch;
    gap: clamp(1rem, 2vw, 2rem);
    min-height: 0;
    max-height: none; /* Allow natural height on mobile for scrolling */
    padding: 0;
    margin: 0;
    overflow: visible; /* Allow content to extend for scrolling */
}

/* Desktop-only side-by-side layout (mobile and tablet stack vertically) */
@media (min-width: 1025px) {
    .choices-section {
        flex-direction: row !important; /* Side by side on desktop only */
        gap: clamp(1rem, 2vw, 2rem) !important;
    }
    
    .choice {
        margin-bottom: 0 !important; /* Remove bottom margin when side by side */
    }

    /* Desktop Button Positioning - Normal flow after content */
    .choice .choice-btn,
    .emergency-choice .emergency-btn,
    .hero-choice .hero-btn {
        margin-top: clamp(1rem, 2vh, 1.5rem) !important; /* Standard gap after text */
        margin-bottom: 0 !important; /* No bottom margin needed on desktop */
        order: initial !important; /* Normal document flow */
    }
}

/* Desktop-specific choices section adjustments */
@media (min-width: 1025px) {
    /* Header section - compact at top */
    .header-section {
        flex-shrink: 0;
        margin-bottom: 0; /* No gap below header for seamless background */
        padding: clamp(0.3rem, 0.8vh, 0.6rem) 0;
    }
    
    /* Choice container - takes remaining space */
    .choice-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
    }
    
    /* Choices section - side by side layout */
    .choices-section {
        flex: 1;
        display: flex;
        flex-direction: row; /* Side by side */
        gap: 2rem; /* Space between choices */
        align-items: stretch;
        margin: 0;
        padding: 0;
    }
    
    /* Individual choice cards */
    .choice {
        flex: 1; /* Equal width */
        padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(0.6rem, 1.2vw, 1rem) !important;
        margin: 0 !important;
        height: 100%; /* Use full available height */
        max-height: 100% !important; /* Constrain to container */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* Vertical centering */
        align-items: center !important; /* Horizontal centering */
        overflow: hidden; /* Prevent choice card overflow */
        box-sizing: border-box; /* Include padding in height calculation */
    }
    
    /* Desktop Choice Borders - Override mobile border: none */
    .emergency-choice {
        border: none !important;
        border-left: 6px solid var(--primary-color) !important;
    }
    
    .hero-choice {
        border: none !important;
        border-left: 6px solid var(--accent-color) !important;
    }
    
    /* Restore proper text hierarchy on desktop */
    .choice h2 {
        font-size: clamp(1.5rem, 4vmin, 2.2rem) !important;
        margin-bottom: clamp(0.8rem, 1.5vmin, 1.2rem) !important;
        font-weight: 800 !important; /* Boldest for titles */
    }
    
    .choice p {
        font-size: clamp(1.1rem, 2.2vmin, 1.4rem) !important; /* Larger description text */
        margin-bottom: clamp(1rem, 2vmin, 1.5rem) !important;
        line-height: 1.6 !important;
        font-weight: 400 !important; /* Normal weight */
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; /* Standard readable font */
    }
    
    .choice-btn {
        padding: clamp(0.8rem, 1.5vmin, 1rem) clamp(1.5rem, 4vw, 2.5rem) !important;
        font-size: clamp(1rem, 2vmin, 1.3rem) !important; /* Larger button text */
        min-height: clamp(45px, 6vmin, 55px) !important;
        font-weight: 600 !important; /* Reduced font weight */
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
        letter-spacing: 0.8px !important; /* Increased letter spacing */
        text-transform: uppercase !important; /* Make text uppercase for more prominence */
    }
    
    /* Even more specific selectors */
    .choice .choice-btn {
        font-weight: 600 !important;
        font-family: 'Inter', sans-serif !important;
    }
    
    .emergency-choice .choice-btn,
    .donor-choice .choice-btn {
        font-weight: 600 !important;
        font-family: 'Inter', sans-serif !important;
    }
    
    /* Show divider on desktop between choice cards */
    .divider {
        display: flex !important;
        min-height: 80px !important; /* Compact height for desktop */
    }
}

/* Divider Fluid Sizing */
.divider {
    flex-shrink: 0;
}

/* Choice Box Fluid Sizing */
.choice {
    padding: clamp(0.3rem, 1vh, 0.6rem) clamp(0.5rem, 2vw, 1.5rem); /* Much shorter vertical padding */
}
    .choice-icon-wrap {
        width: clamp(90px, 12vmin, 110px); /* Larger icons for better visibility */
        height: clamp(90px, 12vmin, 110px);
    margin-bottom: clamp(0.3rem, 1vh, 0.5rem); /* Minimal margin */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-stack .icon-primary {
    font-size: clamp(1.8rem, 4vmin, 2.5rem);
}
.icon-stack .icon-accent {
    font-size: clamp(0.8rem, 1.5vmin, 1.1rem);
}
.choice h2 {
    font-size: clamp(1.2rem, 3vmin, 1.8rem); /* Smaller titles to fit better */
    margin-bottom: clamp(0.2rem, 0.8vmin, 0.4rem); /* Minimal margin */
}
.choice p {
    font-size: clamp(0.75rem, 1.2vmin, 0.9rem); /* Smaller text */
    line-height: 1.4; /* Tighter line height */
    margin-bottom: clamp(0.3rem, 1vmin, 0.6rem); /* Minimal margin */
    max-width: 90%;
}
.choice-btn {
    padding: clamp(0.4rem, 1vmin, 0.6rem) clamp(1rem, 3vw, 2rem); /* Smaller button padding */
    font-size: clamp(0.75rem, 1.3vmin, 0.9rem); /* Smaller button text */
    min-height: clamp(35px, 4vmin, 40px); /* Smaller button height */
}
.emergency-badge, .hero-badge {
    padding: clamp(0.3rem, 0.8vmin, 0.5rem) clamp(0.8rem, 1.5vw, 1.2rem);
    font-size: clamp(0.6rem, 1.2vmin, 0.8rem);
    top: clamp(-10px, -1.5vmin, -12px);
}
/* ===== END: RESPONSIVE SIZING & LAYOUT SYSTEM ===== */


/* Logo/header styles moved into `css/header.css` to centralize header-specific rules and avoid duplication. */




/* === HOME PAGE STYLES === */
/* main-container code start */
/* MODIFIED: .choice-container is now the flex parent for the main content */
.choice-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: flex-start;
    overflow: hidden; /* Prevent internal overflow */
}

/* Desktop-specific choice container adjustments */
@media (min-width: 1025px) {
    .choice-container {
        flex: 1;
        justify-content: center;
    }
}
/* main-container code end */

/* Toggle menu colors moved to header.css */
/* Existing styles... */
/* ===== MISSION CLARITY SECTION ===== */
.mission-clarity {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 3rem 2rem;
    margin: 2rem 0;
    border: 2px solid rgba(229, 57, 53, 0.2);
    box-shadow: 0 15px 35px rgba(229, 57, 53, 0.1);
    position: relative;
    overflow: hidden;
}

.mission-clarity::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
}

.mission-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.mission-clarity h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.mission-lead {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    color: var(--text-primary);
    margin-bottom: 2rem;
    line-height: 1.6;
    font-weight: 500;
}

.mission-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.mission-point {
    display: flex;
    align-items: flex-start;
    text-align: left;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(229, 57, 53, 0.1);
}

.mission-point:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(229, 57, 53, 0.15);
    background: rgba(255, 255, 255, 0.9);
}

.point-icon {
    font-size: 2rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.point-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.point-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.urgency-message {
    background: linear-gradient(135deg, rgba(229, 57, 53, 0.1), rgba(198, 40, 40, 0.05));
    border-radius: 15px;
    padding: 2rem;
    margin-top: 2rem;
    border: 1px solid rgba(229, 57, 53, 0.2);
}

.urgency-message h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

.urgency-message p {
    color: var(--text-primary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.mission-quote {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--primary-color);
    text-align: center;
    font-weight: 500;
}

/* ===== FOUNDER STORY SECTION ===== */
.founder-story {
    background: linear-gradient(135deg, rgba(107, 138, 170, 0.1), rgba(122, 132, 113, 0.05));
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    margin: 2rem 0;
    border: 2px solid rgba(107, 138, 170, 0.2);
    box-shadow: 0 12px 30px rgba(107, 138, 170, 0.1);
}

.founder-container {
    max-width: 800px;
    margin: 0 auto;
}

.founder-story h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 2rem;
}

.founder-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.founder-quote {
    background: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    border-radius: 15px;
    border-left: 4px solid var(--secondary-color);
    position: relative;
}

.founder-quote::before {
    content: '"';
    font-size: 4rem;
    color: var(--secondary-color);
    opacity: 0.3;
    position: absolute;
    top: -10px;
    left: 15px;
    font-family: 'Playfair Display', serif;
}

.founder-quote p {
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1rem;
    font-style: italic;
}

.founder-attribution {
    color: var(--secondary-color);
    font-weight: 600;
    text-align: right;
    font-style: normal !important;
}

.founder-mission {
    text-align: center;
}

.founder-mission p {
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.learn-more-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    color: white;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(107, 138, 170, 0.3);
}

.learn-more-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(107, 138, 170, 0.4);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

/* ===== RESPONSIVE DESIGN FOR NEW SECTIONS ===== */
@media (max-width: 768px) {
    .mission-clarity {
        padding: 2rem 1.5rem;
        margin: 1rem 0;
    }

    .mission-points {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .mission-point {
        padding: 1rem;
    }

    .urgency-message {
        padding: 1.5rem;
    }

    .founder-story {
        padding: 2rem 1.5rem;
        margin: 1rem 0;
    }

    .founder-quote {
        padding: 1.5rem;
    }

    .founder-content {
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .mission-clarity, .founder-story {
        padding: 1.5rem 1rem;
    }

    .point-icon {
        font-size: 1.5rem;
        margin-right: 0.8rem;
    }

    .point-content h3 {
        font-size: 1.1rem;
    }

    .founder-quote::before {
        font-size: 3rem;
        top: -5px;
        left: 10px;
    }
}

/* ===== DARK MODE SUPPORT FOR NEW SECTIONS ===== */
    background: rgba(20, 25, 35, 0.95);
    border-color: rgba(229, 57, 53, 0.3);
}

    background: rgba(30, 35, 45, 0.8);
    border-color: rgba(229, 57, 53, 0.2);
}

    background: rgba(35, 40, 50, 0.9);
}

    background: linear-gradient(135deg, rgba(229, 57, 53, 0.2), rgba(198, 40, 40, 0.1));
}

    background: linear-gradient(135deg, rgba(107, 138, 170, 0.15), rgba(122, 132, 113, 0.1));
    border-color: rgba(107, 138, 170, 0.3);
}

    background: rgba(30, 35, 45, 0.8);
}

/* ===== ABOUT PAGE STYLES ===== */
.mission-statement {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 3rem 2rem;
    margin: 2rem 0;
    border: 2px solid rgba(229, 57, 53, 0.2);
    box-shadow: 0 15px 35px rgba(229, 57, 53, 0.1);
}

.mission-statement h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 2rem;
}

.vision-content {
    max-width: 900px;
    margin: 0 auto;
}

.vision-lead {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 2rem;
    text-align: center;
}

.core-principles {
    margin: 3rem 0;
}

.core-principles h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 2rem;
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.principle {
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(229, 57, 53, 0.1);
}

.principle:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(229, 57, 53, 0.15);
    background: rgba(255, 255, 255, 0.9);
}

.principle-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.principle h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

.principle p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.mission-quote {
    background: linear-gradient(135deg, rgba(229, 57, 53, 0.1), rgba(198, 40, 40, 0.05));
    border-radius: 15px;
    padding: 2rem;
    margin: 3rem 0;
    border-left: 4px solid var(--primary-color);
    text-align: center;
}

.mission-quote p {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--primary-color);
    font-weight: 500;
    margin: 0;
}

.why-choose {
    background: linear-gradient(135deg, rgba(107, 138, 170, 0.1), rgba(122, 132, 113, 0.05));
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 3rem 2rem;
    margin: 3rem 0;
    border: 2px solid rgba(107, 138, 170, 0.2);
}

.why-choose h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.why-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.why-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(107, 138, 170, 0.2);
}

.why-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(107, 138, 170, 0.15);
}

.why-item h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

.why-item p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.founders-section {
    margin: 4rem 0;
}

.founders-section > h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 700;
}

.founder-profile {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 3rem 2rem;
    margin: 3rem 0;
    border: 2px solid rgba(139, 90, 92, 0.2);
    box-shadow: 0 15px 35px rgba(139, 90, 92, 0.1);
    position: relative;
}

.founder-profile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color));
}

.founder-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 2rem;
}

.founder-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(139, 90, 92, 0.3);
    flex-shrink: 0;
}

.avatar-icon {
    font-size: 2.5rem;
}

.founder-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.founder-title {
    color: var(--secondary-color);
    font-size: 1.1rem;
    font-weight: 500;
}

.founder-story {
    line-height: 1.7;
    color: var(--text-primary);
}

.story-section {
    margin-bottom: 2.5rem;
}

.story-section h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

.story-section p {
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.origin-story {
    background: linear-gradient(135deg, rgba(229, 57, 53, 0.1), rgba(198, 40, 40, 0.05));
    padding: 2rem;
    border-radius: 15px;
    border-left: 4px solid var(--primary-color);
}

.origin-story blockquote {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    font-style: italic;
    color: var(--primary-color);
    position: relative;
}

.origin-story blockquote::before {
    content: '"';
    font-size: 3rem;
    color: var(--primary-color);
    opacity: 0.5;
    position: absolute;
    top: -10px;
    left: 10px;
    font-family: 'Playfair Display', serif;
}

.cta-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 20px;
    padding: 4rem 2rem;
    margin: 4rem 0;
    text-align: center;
    box-shadow: 0 20px 40px rgba(229, 57, 53, 0.3);
}

.cta-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.cta-content p {
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin: 3rem 0;
    flex-wrap: wrap;
}

.cta-btn {
    display: inline-block;
    padding: 1.2rem 2.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.cta-btn.primary {
    background: white;
    color: var(--primary-color);
}

.cta-btn.secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.cta-btn.primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

.cta-btn.secondary:hover {
    background: white;
    color: var(--primary-color);
}

.cta-quote {
    font-style: italic;
    font-size: 1.1rem;
    opacity: 0.9;
}

.back-home {
    text-align: center;
    margin: 2rem 0;
}

.back-btn {
    display: inline-block;
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    padding: 1rem 2rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: rgba(107, 138, 170, 0.1);
}

.back-btn:hover {
    background: rgba(107, 138, 170, 0.2);
    transform: translateX(-5px);
}

/* ===== RESPONSIVE DESIGN FOR ABOUT PAGE ===== */
@media (max-width: 768px) {
    .mission-statement, .why-choose, .founder-profile {
        padding: 2rem 1.5rem;
        margin: 2rem 0;
    }

    .principles-grid, .why-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .founder-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .founder-avatar {
        width: 60px;
        height: 60px;
    }

    .avatar-icon {
        font-size: 2rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .cta-btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .mission-statement, .why-choose, .founder-profile, .cta-section {
        padding: 1.5rem 1rem;
    }

    .principle, .why-item {
        padding: 1.5rem 1rem;
    }

    .origin-story {
        padding: 1.5rem;
    }

    .origin-story blockquote::before {
        font-size: 2.5rem;
        top: -5px;
        left: 5px;
    }
}

/* ===== DARK MODE SUPPORT FOR ABOUT PAGE ===== */
    background: rgba(20, 25, 35, 0.95);
    border-color: rgba(229, 57, 53, 0.3);
}

    background: rgba(30, 35, 45, 0.8);
    border-color: rgba(107, 138, 170, 0.3);
}

    background: rgba(35, 40, 50, 0.9);
}

    background: linear-gradient(135deg, rgba(107, 138, 170, 0.15), rgba(122, 132, 113, 0.1));
    border-color: rgba(107, 138, 170, 0.3);
}

    background: rgba(20, 25, 35, 0.95);
    border-color: rgba(139, 90, 92, 0.3);
}

    background: linear-gradient(135deg, rgba(229, 57, 53, 0.2), rgba(198, 40, 40, 0.1));
}

    background: rgba(30, 35, 45, 0.8);
}

/* ===== REQUEST PAGE REAL-TIME NETWORK STYLES ===== */
.realtime-network-header {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.95), rgba(185, 28, 28, 0.9));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 2.5rem;
    margin: 2rem 0;
    color: white;
    text-align: center;
    box-shadow: 0 12px 40px rgba(220, 38, 38, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.network-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.network-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    margin-bottom: 2rem;
    opacity: 0.95;
    line-height: 1.6;
}

.network-process {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.process-step {
    background: rgba(255, 255, 255, 0.15);
    padding: 1rem 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    min-width: 140px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.process-step:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.step-icon {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.process-arrow {
    font-size: 1.5rem;
    font-weight: bold;
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.95);
}

.urgency-indicators {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.urgency-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.urgency-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Responsive Design for Network Header */
@media (max-width: 768px) {
    .realtime-network-header {
        padding: 1.5rem;
        margin: 1rem;
    }

    .network-title {
        font-size: 1.5rem;
    }

    .network-subtitle {
        font-size: 1rem;
    }

    .process-step {
        min-width: 120px;
        padding: 0.8rem 1rem;
    }

    .process-arrow {
        display: none;
    }

    .network-process {
        flex-direction: column;
        gap: 0.5rem;
    }

    .urgency-indicators {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .urgency-item {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .realtime-network-header {
        padding: 1rem;
        margin: 0.5rem;
    }

    .process-step {
        min-width: 100px;
        padding: 0.6rem 0.8rem;
    }

    .step-icon {
        font-size: 1.5rem;
    }
}

/* Dark Mode Support for Request Page */
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.8), rgba(185, 28, 28, 0.7));
    border-color: rgba(220, 38, 38, 0.4);
}

    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

    background: rgba(255, 255, 255, 0.2);
}

    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

    background: rgba(255, 255, 255, 0.15);
}

/* ===== REGISTRATION QUESTION JUSTIFICATION STYLES ===== */
.question-justification-section {
    margin: 2rem 0;
    padding: 0 1rem;
}

.justification-card {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid rgba(220, 38, 38, 0.2);
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.1);
    margin-bottom: 2rem;
}

.justification-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 1rem;
}

.justification-intro {
    font-size: 1.1rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.justification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.justification-item {
    background: rgba(255, 255, 255, 0.7);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(220, 38, 38, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.justification-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.15);
    background: rgba(255, 255, 255, 0.9);
}

.justify-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.justification-item h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.justification-item p {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.95rem;
}

.recipient-insight {
    background: linear-gradient(135deg, rgba(107, 138, 170, 0.1), rgba(122, 132, 113, 0.05));
    padding: 2rem;
    border-radius: 15px;
    margin: 2rem 0;
    border: 1px solid rgba(107, 138, 170, 0.2);
}

.recipient-insight h4 {
    font-family: 'Playfair Display', serif;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.recipient-insight blockquote {
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0;
    position: relative;
    padding-left: 2rem;
}

.recipient-insight blockquote::before {
    content: '"';
    font-size: 3rem;
    position: absolute;
    left: 0;
    top: -10px;
    color: var(--secondary-color);
    font-family: 'Playfair Display', serif;
}

.recipient-insight cite {
    display: block;
    text-align: right;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: normal;
}

.toggle-details-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem auto;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.toggle-details-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.question-details {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(220, 38, 38, 0.1);
}

.question-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.category {
    background: rgba(255, 255, 255, 0.5);
    padding: 1.2rem;
    border-radius: 10px;
    border: 1px solid rgba(220, 38, 38, 0.1);
}

.category h5 {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.category p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* Responsive Design for Justification Section */
@media (max-width: 768px) {
    .justification-card {
        padding: 1.5rem;
        margin: 1rem;
    }

    .justification-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .justification-item {
        padding: 1.2rem;
    }

    .recipient-insight {
        padding: 1.5rem;
    }

    .recipient-insight blockquote {
        padding-left: 1.5rem;
        font-size: 1rem;
    }

    .question-categories {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .justification-card {
        padding: 1rem;
    }

    .toggle-details-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }

    .justify-icon {
        font-size: 2rem;
    }
}

/* Dark Mode Support for Justification Section */
    background: rgba(20, 25, 35, 0.95);
    border-color: rgba(220, 38, 38, 0.3);
}

    background: rgba(30, 35, 45, 0.8);
    border-color: rgba(220, 38, 38, 0.2);
}

    background: rgba(35, 40, 50, 0.9);
}

    background: linear-gradient(135deg, rgba(107, 138, 170, 0.2), rgba(122, 132, 113, 0.1));
    border-color: rgba(107, 138, 170, 0.3);
}

    background: rgba(30, 35, 45, 0.6);
    border-color: rgba(220, 38, 38, 0.2);
}

/* Dark mode styles moved to colors.css for consistency */

/* Dark mode emergency button styles */
    background: transparent !important; 
    border: 3px solid var(--red-medium) !important; 
    color: var(--red-light) !important; 
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.3) !important; 
}
    background: linear-gradient(135deg, var(--red-medium), var(--red-bright)) !important; 
}
    color: var(--white) !important; 
    border-color: var(--red-medium-light) !important; 
    box-shadow: 0 15px 40px rgba(255, 107, 107, 0.6) !important; 
}

/* Dark mode hero button styles */
    background: transparent !important; 
    border: 3px solid var(--accent-light) !important; 
    color: var(--accent-light) !important; 
    box-shadow: 0 0 20px rgba(38, 166, 154, 0.3) !important; 
}
    background: linear-gradient(135deg, var(--accent-light), var(--accent-color)) !important; 
}
    color: var(--white) !important; 
    border-color: var(--accent-color) !important; 
    box-shadow: 0 15px 40px rgba(38, 166, 154, 0.6) !important; 
}

/* ===== ENHANCED DARK MODE MENU STYLES ===== */

/* Dark mode menu enhancements moved to header.css */

/* Existing styles... */
/* Modern Creative Multicolor Divider */
.divider {
    position: relative;
    width: 4px;
    margin: 0 1.5rem;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}

.divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(198, 40, 40, 0.3) 8%,     /* Emergency red */
        rgba(239, 68, 68, 0.5) 20%,    /* Bright red */
        rgba(251, 191, 36, 0.6) 35%,   /* Warm gold */
        rgba(255, 255, 255, 0.9) 50%,  /* Pure white center */
        rgba(52, 211, 153, 0.6) 65%,   /* Teal green */
        rgba(25, 118, 210, 0.5) 80%,   /* Professional blue */
        rgba(67, 56, 202, 0.3) 92%,    /* Deep purple */
        transparent 100%
    );
    border-radius: 2px;
    z-index: 1;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    animation: gentleGlow 4s ease-in-out infinite;
}

.divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 25%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.4) 75%,
        transparent 100%
    );
    border-radius: 1px;
    z-index: 2;
}

@keyframes gentleGlow {
    0%, 100% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.02);
    }
}
/* Enhanced heart icon for multicolor divider */
.divider-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(251, 191, 36, 0.8) 50%,
        rgba(239, 68, 68, 0.6) 100%
    );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 1),
        0 0 0 3px rgba(198, 40, 40, 0.3),
        0 0 20px rgba(239, 68, 68, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 5;
    animation: modernHeartbeat 4s infinite ease-in-out;
    backdrop-filter: blur(8px);
}

@keyframes modernHeartbeat {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 1),
            0 0 0 3px rgba(198, 40, 40, 0.3),
            0 0 20px rgba(239, 68, 68, 0.2),
            0 4px 12px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 1),
            0 0 0 4px rgba(198, 40, 40, 0.4),
            0 0 25px rgba(239, 68, 68, 0.3),
            0 6px 16px rgba(0, 0, 0, 0.15);
    }
}
@keyframes heartbeat { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(198, 40, 40, 0.2), 0 2px 8px rgba(0, 0, 0, 0.06); } 50% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(198, 40, 40, 0.3), 0 3px 12px rgba(0, 0, 0, 0.1); } }
.divider-heart-icon {
    font-size: 0.4rem;
    color: rgba(198, 40, 40, 0.9);
    animation: subtle-pulse 3s infinite ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
    text-align: center;
    font-family: 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.divider-label { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-primary); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); background: rgba(255, 255, 255, 0.95); padding: 6px 14px; border-radius: 12px; opacity: 0; transition: opacity 0.3s ease; z-index: 6; border: 1px solid rgba(0, 0, 0, 0.1); }
.divider-label.top { top: 10%; }
.divider-label.bottom { bottom: 10%; }
.divider:hover .divider-label { opacity: 1; }
.divider-label { text-align: center !important; }
.choice { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; text-align: center; border-radius: 20px; overflow: hidden; background:
    radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
    rgba(230, 250, 230, 0.6) !important; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4); padding: clamp(0.3rem, 1vh, 0.6rem) clamp(0.5rem, 2vw, 1.5rem) !important; }
.choice:hover { flex: 1.1; transform: translateY(-5px); background:
    radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.04) 0%, transparent 70%),
    rgba(230, 250, 230, 0.8) !important; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.choice::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:
    radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.01) 0%, transparent 70%),
    rgba(230, 250, 230, 0.3); opacity: 0; transition: all 0.4s ease; z-index: -1; border-radius: 20px; }
.choice:hover::before { opacity: 0.1; }
.choice::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03; z-index: -2; background-image: radial-gradient(circle at 2px 2px, var(--text-muted) 1px, transparent 0); background-size: 20px 20px; }
.icon-stack { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.donor-choice .icon-stack .icon-accent { color: #374151; animation: pulse 2s infinite ease-in-out; }
.finder-choice .icon-stack .icon-accent { color: #374151; animation: pulse 1.5s infinite ease-in-out; }
@keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } }
.emergency-choice {
    background: linear-gradient(135deg, rgba(198, 40, 40, 0.08), rgba(229, 115, 115, 0.04)) !important;
    border: none !important;
    border-left: 6px solid rgba(198, 40, 40, 0.8) !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
    box-shadow: 0 15px 40px rgba(198, 40, 40, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    animation: emergencySectionPulse 3s infinite ease-in-out !important;
}

@keyframes emergencySectionPulse {
    0%, 100% {
        box-shadow: 0 15px 40px rgba(198, 40, 40, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border-color: rgba(198, 40, 40, 0.2);
        transform: none;
    }
    50% {
        box-shadow: 0 20px 50px rgba(198, 40, 40, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        border-color: rgba(198, 40, 40, 0.3);
        transform: none;
    }
}
.emergency-choice::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--primary-color), var(--primary-light), var(--primary-dark), var(--primary-color)); background-size: 400% 400%; border-radius: inherit; z-index: -1; animation: borderGlow 4s ease infinite; opacity: 0.2; }
.emergency-badge { 
    position: absolute !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important; 
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important; 
    color: var(--white) !important; 
    border-radius: 25px !important; 
    font-weight: 900 !important; 
    animation: emergencyBadgePulse 1s infinite ease-in-out !important; 
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important; 
    z-index: 15 !important; 
    border: 3px solid var(--primary-ultra-dark) !important; 
    white-space: nowrap !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important;
    font-size: 0.9rem !important;
    padding: 8px 16px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    transform: translateX(-50%) scale(1.1) !important;
}

@keyframes emergencyBadgePulse {
    0%, 100% { 
        transform: translateX(-50%) scale(1.1);
        box-shadow: 0 8px 25px rgba(220, 38, 38, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    50% { 
        transform: translateX(-50%) scale(1.2);
        box-shadow: 0 12px 35px rgba(220, 38, 38, 0.8), 0 6px 18px rgba(0, 0, 0, 0.4);
    }
}
/* Emergency Button - ULTRA URGENT, LIFE-SAVING ACTION - MAXIMUM PRIORITY */
.emergency-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    border: 4px solid var(--primary-ultra-dark) !important;
    color: var(--white) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    position: relative !important;
    overflow: hidden !important;
    animation: emergencyButtonPulse 1.2s infinite ease-in-out !important;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    transform: none !important;
}

@keyframes emergencyButtonPulse {
    0%, 100% { 
        box-shadow: 0 8px 25px rgba(220, 38, 38, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }
    50% { 
        box-shadow: 0 12px 35px rgba(220, 38, 38, 0.7), 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transform: scale(1.08);
    }
}
.emergency-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); transition: left 0.5s ease; z-index: -1; }
.emergency-btn:hover { color: white; transform: translateY(-4px); box-shadow: 0 18px 45px rgba(198, 40, 40, 0.5); animation: buttonPulse 1s infinite ease-in-out; }
.emergency-btn:hover::before { left: 0; }
.emergency-choice:hover { background: linear-gradient(135deg, rgba(198, 40, 40, 0.12), rgba(229, 115, 115, 0.06)) !important; border-left-color: rgba(198, 40, 40, 1) !important; transform: translateY(-6px); }
.emergency-choice:hover::before { opacity: 0.5; animation: borderGlow 1.5s ease infinite; }
.emergency-choice:hover .emergency-badge { animation: badgePulse 0.8s infinite ease-in-out; box-shadow: 0 6px 20px rgba(198, 40, 40, 0.6); }
.emergency-choice .choice-icon-wrap { 
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important; 
    box-shadow: 0 18px 45px rgba(198, 40, 40, 0.4), 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid var(--primary-dark) !important; 
    animation: emergencyIconPulse 2s infinite ease-in-out !important;
    transform: none !important;
}

@keyframes emergencyIconPulse {
    0%, 100% { 
        box-shadow: 0 20px 50px rgba(220, 38, 38, 0.5), 0 8px 25px rgba(0, 0, 0, 0.2);
        transform: none;
    }
    50% { 
        box-shadow: 0 25px 60px rgba(220, 38, 38, 0.7), 0 12px 35px rgba(0, 0, 0, 0.3);
        transform: none;
    }
}
.emergency-choice:hover .choice-icon-wrap { box-shadow: 0 25px 60px rgba(198, 40, 40, 0.5), 0 12px 35px rgba(198, 40, 40, 0.6); border-color: var(--primary-light); animation: float 1.5s infinite ease-in-out; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes badgePulse { 0%, 100% { transform: translateX(-50%); box-shadow: 0 4px 15px rgba(198, 40, 40, 0.4); } 50% { transform: translateX(-50%); box-shadow: 0 6px 25px rgba(198, 40, 40, 0.6); } }
/* Enhanced Button Animations for Blood Donation Theme */
@keyframes emergencyPulse {
    0%, 100% {
        box-shadow:
            0 4px 12px rgba(220, 38, 38, 0.2),
            0 0 0 rgba(220, 38, 38, 0.4);
        border-color: var(--primary-dark);
        transform: none;
    }
    50% {
        box-shadow:
            0 6px 20px rgba(220, 38, 38, 0.4),
            0 0 20px rgba(220, 38, 38, 0.6);
        border-color: var(--primary-light);
        transform: none;
    }
}

@keyframes buttonPulse { 0%, 100% { box-shadow: 0 0 0 rgba(198, 40, 40, 0.4); border-color: var(--primary-color); } 50% { box-shadow: 0 0 20px rgba(198, 40, 40, 0.6); border-color: var(--primary-light); } }
.hero-choice { background: linear-gradient(135deg, rgba(107, 139, 123, 0.04), rgba(139, 171, 155, 0.02)) !important; border: none; border-left: 6px solid var(--accent-color); position: relative; overflow: visible; box-shadow: 0 8px 25px rgba(107, 139, 123, 0.15); z-index: 1 !important; }
.hero-choice::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--accent-color), var(--accent-light), var(--accent-dark), var(--accent-color)); background-size: 400% 400%; border-radius: inherit; z-index: -1; animation: borderGlow 3.5s ease infinite; opacity: 0.25; }
.hero-badge { position: absolute; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--maroon-primary), var(--maroon-dark)) !important; color: var(--white) !important; border-radius: 20px; font-weight: 700; animation: heroFloat 2.5s infinite ease-in-out; box-shadow: 0 4px 15px rgba(139, 21, 56, 0.4) !important; z-index: 10; border: 2px solid rgba(139, 21, 56, 0.3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hero Button - Inspiring, Life-Giving Action */
.hero-btn {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
    border: 3px solid var(--accent-color);
    color: var(--white);
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(107, 139, 123, 0.25);
    letter-spacing: 1.2px;
    position: relative;
    overflow: hidden;
    animation: heroGlow 3s infinite ease-in-out;
    box-shadow:
        0 4px 12px rgba(13, 148, 136, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    min-height: 48px;
}
.hero-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent-color), var(--accent-dark)); transition: left 0.4s ease; z-index: -1; }
.hero-btn:hover { color: white; transform: translateY(-4px) scale(1.04); box-shadow: 0 18px 45px rgba(107, 139, 123, 0.4); animation: heroGlow 1.2s infinite ease-in-out; }
.hero-btn:hover::before { left: 0; }
.hero-choice:hover { background: linear-gradient(135deg, rgba(107, 139, 123, 0.06), rgba(139, 171, 155, 0.03)) !important; border-color: rgba(107, 139, 123, 0.12); transform: translateY(-6px) scale(1.02); }
.hero-choice:hover::before { opacity: 0.5; animation: borderGlow 2s ease infinite; }
.hero-choice:hover .hero-badge { animation: heroFloat 1.2s infinite ease-in-out; box-shadow: 0 8px 25px rgba(107, 139, 123, 0.5); }
.hero-choice .choice-icon-wrap { background: linear-gradient(135deg, rgba(107, 139, 123, 0.12), rgba(139, 171, 155, 0.08)); box-shadow: 0 18px 45px rgba(107, 139, 123, 0.35); border: 2px solid rgba(107, 139, 123, 0.25); animation: float 3s infinite ease-in-out; }
.hero-choice:hover .choice-icon-wrap { box-shadow: 0 28px 65px rgba(107, 139, 123, 0.45), 0 14px 40px rgba(107, 139, 123, 0.55); border-color: var(--accent-color); animation: float 2s infinite ease-in-out; }
@keyframes heroFloat { 0%, 100% { transform: translateX(-50%) translateY(0) scale(1); box-shadow: 0 4px 15px rgba(107, 139, 123, 0.4); } 50% { transform: translateX(-50%) translateY(-3px) scale(1.05); box-shadow: 0 6px 25px rgba(107, 139, 123, 0.55); } }
@keyframes heroGlow { 0%, 100% { box-shadow: 0 0 0 rgba(107, 139, 123, 0.4); border-color: var(--accent-light); } 50% { box-shadow: 0 0 18px rgba(107, 139, 123, 0.55); border-color: var(--accent-color); } }

/* Custom Hero Icon Styling */
.hero-custom-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-shield {
    font-size: 2.5rem;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    animation: heroShieldPulse 3s ease-in-out infinite;
}

.hero-heart {
    position: absolute;
    font-size: 1.2rem;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: heroHeartBeat 2s ease-in-out infinite;
}

.hero-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.sparkle {
    position: absolute;
    font-size: 0.8rem;
    animation: heroSparkle 2s ease-in-out infinite;
    opacity: 0.7;
}

.sparkle-1 {
    top: 15%;
    right: 20%;
    animation-delay: 0s;
}

.sparkle-2 {
    bottom: 20%;
    left: 15%;
    animation-delay: 0.7s;
}

.sparkle-3 {
    top: 20%;
    left: 20%;
    animation-delay: 1.4s;
}

@keyframes heroShieldPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes heroHeartBeat {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    25% { transform: translate(-50%, -50%) scale(1.1); }
    50% { transform: translate(-50%, -50%) scale(1); }
    75% { transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes heroSparkle {
    0%, 100% { 
        opacity: 0.7; 
        transform: scale(1) rotate(0deg); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2) rotate(180deg); 
    }
}

/* Custom Emergency Icon Styling */
.emergency-custom-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Emergency Helmet with High Contrast Fix */
.emergency-helmet {
    font-size: 2.8rem;
    position: relative;
    z-index: 4;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
    animation: emergencyHelmetPulse 2s ease-in-out infinite;
    color: var(--white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* White Background Circle for Maximum Contrast */
.contrast-background {
    position: absolute;
    width: 70px;
    height: 70px;
    background: var(--white) !important;
    border-radius: 50% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    display: block !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
}

/* Emergency Drops */
.emergency-drops {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.urgent-drop {
    position: absolute;
    font-size: 0.9rem;
    animation: emergencyDropFloat 1.8s ease-in-out infinite;
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
    color: var(--white) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.urgent-drop.drop-1 {
    top: 20%;
    right: 25%;
    animation-delay: 0s;
}

.urgent-drop.drop-2 {
    bottom: 25%;
    left: 20%;
    animation-delay: 0.6s;
}

.urgent-drop.drop-3 {
    top: 30%;
    left: 25%;
    animation-delay: 1.2s;
}

/* Emergency Flash */
.emergency-flash {
    position: absolute;
    top: 15%;
    right: 15%;
    font-size: 1rem;
    z-index: 5;
    animation: emergencyFlash 1s ease-in-out infinite;
    color: var(--white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
}

/* === EMERGENCY HELMET ANIMATIONS === */
@keyframes emergencyHelmetPulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
    }
    50% { 
        transform: scale(1.05);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    }
}

/* Removed contrastBackgroundPulse animation - no longer needed */

@keyframes emergencyCrossPulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.8));
    }
    50% { 
        transform: scale(1.1);
        filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 1));
    }
}


@keyframes emergencyDropFloat {
    0%, 100% { 
        transform: translateY(0) scale(1); 
        opacity: 0.8; 
    }
    50% { 
        transform: translateY(-8px) scale(1.1); 
        opacity: 1; 
    }
}

@keyframes emergencyFlash {
    0%, 100% { 
        opacity: 0.6; 
        transform: scale(1) rotate(0deg);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.3) rotate(180deg);
    }
}
.choice-icon-wrap::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; border: 2px solid currentColor; opacity: 0.3; transition: all 0.4s ease; }
.choice-icon-wrap::after { content: ''; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.15; transition: all 0.4s ease; }
.donor-choice .choice-icon-wrap { color: var(--white); background: linear-gradient(135deg, var(--blue-primary), var(--secondary-dark)); box-shadow: 0 15px 40px rgba(25, 118, 210, 0.4); border: 2px solid rgba(33, 150, 243, 0.3); animation: float 3s infinite ease-in-out; }
.finder-choice .choice-icon-wrap { color: var(--white); background: linear-gradient(135deg, var(--primary-dark), var(--primary-ultra-dark)); box-shadow: 0 15px 40px rgba(220, 38, 38, 0.4); border: 2px solid rgba(239, 68, 68, 0.3); animation: float 3s infinite ease-in-out; }
.choice:hover .choice-icon-wrap { transform: translateY(-15px); }
.donor-choice:hover .choice-icon-wrap { box-shadow: 0 20px 40px rgba(25, 118, 210, 0.35), 0 8px 25px rgba(25, 118, 210, 0.5); border-color: rgba(33, 150, 243, 0.6); }
.finder-choice:hover .choice-icon-wrap { box-shadow: 0 25px 60px rgba(220, 38, 38, 0.5), 0 12px 35px rgba(220, 38, 38, 0.6); border-color: rgba(239, 68, 68, 0.8); animation: float 2s infinite ease-in-out; }
.choice:hover .choice-icon-wrap::before { opacity: 0.5; transform: none; }
.choice:hover .choice-icon-wrap::after { opacity: 0.25; transform: none; }
/* Enhanced Choice Headings - Professional Blood Donation Theme */
.choice h2 {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 4vmin, 2.2rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Emergency Section - ULTRA BOLD, URGENT, LIFE-SAVING - HIGHEST PRIORITY */
.emergency-choice h2,
.finder-choice h2 {
    color: var(--primary-dark) !important;
    text-shadow: 0 4px 12px rgba(220, 38, 38, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-ultra-dark), var(--primary-ultra-contrast)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 900 !important;
    margin-bottom: 15px !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.3)) !important;
    animation: emergencyTitlePulse 2s infinite ease-in-out !important;
}

@keyframes emergencyTitlePulse {
    0%, 100% { 
        transform: scale(1);
        text-shadow: 0 4px 12px rgba(220, 38, 38, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    50% { 
        transform: scale(1.02);
        text-shadow: 0 6px 16px rgba(220, 38, 38, 0.6), 0 3px 8px rgba(0, 0, 0, 0.4);
    }
}

/* Hero Section - Inspiring, Compassionate, Hope */
.donor-choice h2,
.hero-choice h2 {
    color: var(--green-accent);
    text-shadow: 0 2px 8px rgba(15, 118, 110, 0.15);
    background: linear-gradient(135deg, var(--green-primary), var(--green-teal-darker));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.donor-choice:hover h2 { background: linear-gradient(135deg, var(--secondary-dark), var(--blue-ultra-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transform: translateY(-8px); text-shadow: 0 2px 4px rgba(21, 101, 192, 0.3); }
.finder-choice:hover h2 { background: linear-gradient(135deg, var(--primary-ultra-dark), var(--primary-ultra-contrast)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transform: translateY(-8px); text-shadow: 0 2px 4px rgba(185, 28, 28, 0.3); }
/* Enhanced Choice Paragraphs - Professional & Accessible */
.choice p {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: clamp(0.95rem, 2.5vmin, 1.15rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.01em;
    margin-bottom: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Emergency Section Text - Urgent but Professional */
.emergency-choice p,
.finder-choice p {
    color: var(--gray-neutral-dark);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.emergency-choice p strong {
    color: var(--primary-color);
    font-weight: 700;
}

/* Hero Section Text - Inspiring and Warm */
.donor-choice p,
.hero-choice p {
    color: var(--gray-neutral-dark);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.donor-choice p strong,
.hero-choice p strong {
    color: var(--green-primary);
    font-weight: 700;
}

/* Accessibility & High Contrast Enhancements */
@media (prefers-contrast: high) {
    .choice h2 {
        text-shadow: none;
        font-weight: 900;
    }

    .emergency-choice h2,
    .finder-choice h2 {
        color: var(--primary-ultra-contrast);
        background: none;
        -webkit-text-fill-color: var(--primary-ultra-contrast);
    }

    .donor-choice h2,
    .hero-choice h2 {
        color: var(--green-teal-darker);
        background: none;
        -webkit-text-fill-color: var(--green-teal-darker);
    }

    .choice p {
        color: var(--text-default);
        text-shadow: none;
    }

    .choice-btn {
        border-width: 4px;
        box-shadow: none;
    }
}

/* Focus States for Accessibility */
.choice-btn:focus {
    outline: 3px solid var(--blue-400);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.3);
}

.emergency-btn:focus {
    outline-color: var(--primary-dark);
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.3);
}

.hero-btn:focus {
    outline-color: var(--green-primary);
    box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.3);
}
.choice:hover p { color: var(--text-primary); transform: translateY(-3px); }
/* Enhanced Choice Buttons - Professional Blood Donation Theme */
.choice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: clamp(0.9rem, 2.2vmin, 1.1rem);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: 3px solid;
    border-radius: 50px;
    padding: clamp(0.8rem, 2.5vmin, 1.2rem) clamp(1.5rem, 4vmin, 2.5rem);
    background: transparent;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.choice-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); transition: left 0.6s ease; z-index: -1; }
.choice-btn::after { content: ''; position: absolute; top: 0; left: -10%; width: 0%; height: 100%; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: skewX(-15deg); z-index: -2; }
.choice:hover .choice-btn { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 0 20px rgba(255, 255, 255, 0.1); color: var(--white); border-width: 2px; letter-spacing: 0.8px; filter: brightness(1.1); }
.choice:hover .choice-btn::before { left: 100%; }
.choice:hover .choice-btn::after { width: 120%; }
.donor-choice .choice-btn { border-color: var(--blue-primary); color: var(--blue-primary); }
.donor-choice .choice-btn::after { background: linear-gradient(135deg, var(--blue-primary), var(--secondary-dark)); }
.finder-choice .choice-btn { border-color: var(--primary-dark); color: var(--primary-dark); }
.finder-choice .choice-btn::after {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-ultra-dark));
}

/* FIXED BLUR LOGIC: Only blur opposite section on hover */
.choices-section {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* Only blur opposite section when hovering individual sections */
.emergency-choice:hover ~ .divider ~ .hero-choice {
    filter: blur(2px);
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* When hero section is hovered, blur emergency section */
.hero-choice:hover ~ .emergency-choice,
.choices-section:has(.hero-choice:hover) .emergency-choice {
    filter: blur(2px);
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* CRITICAL: NO blur effects at all when divider is hovered */
.choices-section:hover .divider:hover ~ .emergency-choice,
.choices-section:hover .divider:hover ~ .hero-choice,
.choices-section .divider:hover ~ .emergency-choice,
.choices-section .divider:hover ~ .hero-choice {
    filter: none !important;
    opacity: 1 !important;
    transition: all 0.3s ease;
}

/* Prevent any parent hover effects when divider is hovered */
.choices-section:has(.divider:hover) .emergency-choice,
.choices-section:has(.divider:hover) .hero-choice {
    filter: none !important;
    opacity: 1 !important;
    transition: all 0.3s ease;
}

/* CRITICAL: Prevent divider itself from being blurred on hover */
.divider:hover {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

@keyframes emergencyPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); 
        transform: none; 
    }
    50% { 
        box-shadow: 0 0 0 15px rgba(220, 38, 38, 0); 
        transform: none; 
    }
}

    color: var(--slate-100);
}

    background: var(--blue-400);
}

/* Universal box-sizing and reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Desktop-only viewport lock and overflow prevention */
@media (min-width: 769px) {
    /* Prevent any element from causing horizontal page overflow */
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-width: 100vw !important;
        scroll-behavior: auto;
    }

    /* Force viewport lock */
    html {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* Desktop-specific larger choice icons */
    .choice-icon-wrap {
        width: clamp(100px, 12vmin, 130px) !important;
        height: clamp(100px, 12vmin, 130px) !important;
        font-size: clamp(3rem, 5vmin, 4rem) !important;
    }

    /* Desktop-specific html and body styling */
    html {
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
        font-family: 'Inter', sans-serif;
        background-color: var(--body-bg-light);
        color: var(--body-color-light);
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Desktop-specific main element styling */
    main {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative; /* Ensure proper positioning context */
    }
}

/* Desktop-specific main element adjustments */
@media (min-width: 1025px) {
    main {
        flex: 1;
    }
}

/* Mobile menu styles moved to header.css for better organization */

    /* Smooth transitions for menu positioning */

/* SEO Content Hiding - Ensure SEO content is completely hidden from view */
html body .seo-content,
body .seo-content,
.seo-content {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
    display: none !important;
}


/* CRITICAL: Mobile Emergency Badge Fix - Must be at END to override main styles */
@media (max-width: 768px) {
    /* Maximum specificity for emergency badge */
    section.choice.finder-choice.emergency-choice .emergency-badge,
    .emergency-choice .emergency-badge,
    .emergency-badge {
        /* Proper emergency styling with good contrast */
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
        background-color: var(--primary-dark) !important;
        border: 2px solid var(--primary-ultra-dark) !important;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
        /* White text for proper contrast on red background */
        color: var(--white) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        font-weight: 700 !important;
        border-radius: 20px !important;
        padding: clamp(0.3rem, 0.8vmin, 0.5rem) clamp(0.8rem, 1.5vw, 1.2rem) !important;
        font-size: clamp(0.6rem, 1.2vmin, 0.8rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        animation: emergencyBadgePulse 1.5s infinite ease-in-out !important;
    }

    /* Keep white contrast background for emergency icon visibility */
    .emergency-choice .contrast-background,
    .contrast-background {
        background: var(--white) !important;
        display: block !important;
    }

    /* Remove problematic top margins - let flex layout handle spacing */
    .emergency-choice,
    section.choice.finder-choice.emergency-choice,
    .hero-choice,
    .emergency-choice:nth-child(2) {
        margin-top: 0 !important;
    }
}

/* === CONSOLIDATED MEDIA QUERIES === */
/* Desktop (1025px+) */
@media (min-width: 1025px) {
    .choice-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }
    
    .choice {
        min-height: 500px;
    }
    
    /* Desktop Choice Borders - Override mobile border: none */
    .emergency-choice {
        border: none !important;
        border-left: 6px solid var(--primary-color) !important;
    }
    
    .hero-choice {
        border: none !important;
        border-left: 6px solid var(--accent-color) !important;
    }
    
    .choice h2 {
        font-size: 2.2rem;
    }
    
    .choice p {
        font-size: 1.2rem;
    }
    
    .choice-card {
        min-height: 400px;
    }
    
    .choice-card h2 {
        font-size: 2rem;
    }
    
    .choice-card p {
        font-size: 1.1rem;
    }
}

/* Large Desktop (1201px+) */
/* Moved to consolidated media queries section */

/* Short Viewport (max-height: 650px) */
@media (max-height: 650px) {
    .choice-container {
        padding: 1rem;
    }
    
    .choice {
        min-height: 380px;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .choice-container {
        padding: 0.5rem;
        gap: 0.75rem;
    }
    
    .choice {
        min-height: 280px;
        padding: 1.5rem;
    }
    
    .choice h2 {
        font-size: 1.5rem;
    }
    
    .choice p {
        font-size: 1rem;
    }
}

/* Reduced Motion */
/* Moved to consolidated media queries section */

/* =================================================== */
/* CRITICAL: CHOICE CONTENT CENTERING - HIGHEST PRIORITY */
/* =================================================== */
/* This rule must be at the end to override all other styles */
.choice,
.emergency-choice,
.hero-choice,
.donor-choice,
.finder-choice {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Vertical centering of all content */
    align-items: center !important; /* Horizontal centering */
    text-align: center !important;
}

.choice .choice-content,
.emergency-choice .choice-content,
.hero-choice .choice-content,
.donor-choice .choice-content,
.finder-choice .choice-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: none !important; /* Don't grow, stay compact */
}

.choice .choice-content .choice-icon-wrap,
.emergency-choice .choice-content .choice-icon-wrap,
.hero-choice .choice-content .choice-icon-wrap,
.donor-choice .choice-content .choice-icon-wrap,
.finder-choice .choice-content .choice-icon-wrap {
    margin: 0 auto 1.5rem auto !important;
}

.choice .choice-content h2,
.emergency-choice .choice-content h2,
.hero-choice .choice-content h2,
.donor-choice .choice-content h2,
.finder-choice .choice-content h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.choice .choice-content p,
.emergency-choice .choice-content p,
.hero-choice .choice-content p,
.donor-choice .choice-content p,
.finder-choice .choice-content p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.choice .choice-btn,
.emergency-choice .emergency-btn,
.hero-choice .hero-btn,
.donor-choice .choice-btn,
.finder-choice .choice-btn {
    margin-top: clamp(1.5rem, 3vh, 2rem) !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important; /* Don't shrink the button */
}

/* =================================================== */
/* CRITICAL: MOBILE BACKGROUND CONSISTENCY - HIGHEST PRIORITY */
/* =================================================== */
@media (max-width: 768px) {
    main.container,
    .container,
    body main.container,
    main {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
        transform: none !important;
    }

    /* NUCLEAR OPTION: FORCE CHOICES-SECTION BACKGROUND */
    div.choices-section,
    .choices-section,
    section.choices-section,
    main .choices-section,
    .choice-container .choices-section,
    main div.choices-section {
        background:
            radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
            rgba(230, 250, 230, 0.6) !important;
        background-color: rgba(230, 250, 230, 0.6) !important;
    }

    /* ALSO FIX INDIVIDUAL CHOICE ELEMENTS */
    .choice,
    section.choice,
    .emergency-choice,
    .hero-choice,
    .donor-choice,
    .finder-choice,
    .choices-section .choice,
    .choice-container .choice,
    main .choice,
    main .choices-section .choice {
        background:
            radial-gradient(circle at 20% 80%, rgba(139, 90, 92, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(107, 138, 170, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(122, 132, 113, 0.02) 0%, transparent 70%),
            rgba(230, 250, 230, 0.6) !important;
        background-color: rgba(230, 250, 230, 0.6) !important;
    }
}
/* main-container code end */
/* FORCE SCROLLING - Override all other rules */
html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    max-height: none !important;
}

main {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    max-height: none !important;
}

.container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    max-height: none !important;
}