/* -------------------------------------------------------------
 * "বারো মাসে তেরো পার্বণ" Custom Stylesheet
 * Premium, Light-Theme, Fully Responsive, Festive Aesthetic
 * ------------------------------------------------------------- */

/* Variables & Design Tokens */
:root {
    /* Theme Colors */
    --color-primary: #FFB300;
    /* Premium Golden Yellow */
    --color-secondary: #FF8F00;
    /* Amber / Saffron orange */
    --color-accent-gold: #FFE082;
    /* Lighter marigold / Gold accent */
    --color-accent-navy: #1A365D;
    /* Soft forest green for social work */
    --color-accent-navy-light: #E0F2FE;

    /* Backgrounds & Neutrals */
    --color-bg-main: #FFFFFF;
    /* Pure white background */
    --color-bg-light: #FFFDE7;
    /* Soft pale yellow-white section background */
    --color-bg-card: #FFFFFF;
    /* Pure white for crisp cards */
    --color-text-dark: #2D2522;
    /* Warm charcoal */
    --color-text-muted: #6D5E5A;
    /* Muted secondary text */
    --color-border: #EFEAE4;
    /* Soft warm gray border */
    --color-glass: rgba(255, 255, 255, 0.85);
    /* Frosted white glass */

    /* Fonts */
    --font-headings: 'Noto Sans Bengali', 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif;

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(45, 37, 34, 0.03);
    --shadow-md: 0 10px 30px rgba(45, 37, 34, 0.05);
    --shadow-lg: 0 20px 40px rgba(255, 143, 0, 0.08);
    --shadow-navy: 0 15px 35px rgba(26, 54, 93, 0.08);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Borders */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 50px;
}

/* CSS Resets & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-main);
    color: var(--color-text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    /* Subtle Alpana background pattern in golden yellow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none'%3E%3Cpath d='M60 0 C45 25 25 45 0 60 C25 75 45 95 60 120 C75 95 95 75 120 60 C95 45 75 25 60 0 Z' stroke='%23FFB300' stroke-width='0.5' stroke-opacity='0.02'/%3E%3Ccircle cx='60' cy='60' r='15' stroke='%23FFE082' stroke-width='0.5' stroke-opacity='0.03'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headings);
    color: var(--color-text-dark);
    font-weight: 700;
    line-height: 1.3;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 10px;
}

.section-padding {
    padding: 100px 0;
}

/* Inner page header (join.html, donate.html) */
.page-header {
    padding: 180px 0 60px 0;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

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

.bg-light {
    background-color: var(--color-bg-light);
}

/* Scroll reveal animations class variables */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal.active,
.reveal-left.active,
.reveal-right.active {
    opacity: 1;
    transform: translate(0, 0);
}

/* Dynamic Section Headers */
.section-header {
    margin-bottom: 60px;
}

.section-tagline {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    display: block;
}

.section-tagline-green {
    color: var(--color-accent-navy);
}

.section-title {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.section-underline {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
    margin: 0 auto;
    border-radius: var(--radius-pill);
}

.section-underline.bg-green {
    background: var(--color-accent-navy);
}

/* Sticky Navbar Styles */
.navbar-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--transition-normal), border var(--transition-normal), box-shadow var(--transition-normal);
    padding: 0;
}

/* Announcement Ticker Bar */
.ticker-bar {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    color: var(--color-text-dark);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1002;
    overflow: hidden;
}

.ticker-content {
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 15px;
}

.ticker-badge {
    background-color: rgba(45, 37, 34, 0.08);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.78rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(45, 37, 34, 0.15);
    z-index: 5;
    color: var(--color-text-dark);
}

.ticker-track {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.ticker-text {
    display: inline-block;
    flex-shrink: 0;
    will-change: transform;
    animation: tickerScroll 35s linear infinite;
}

.ticker-text:hover {
    animation-play-state: paused;
    cursor: pointer;
}

@keyframes tickerScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}


.navbar-header.scrolled .ticker-bar {
    max-height: 0;
    padding: 0;
    border-bottom: 0px solid transparent;
    opacity: 0;
}

.navbar-header.scrolled {
    background-color: var(--color-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 10px;
    transition: padding var(--transition-normal);
}

.navbar-header.scrolled .nav-container {
    padding: 12px 10px;
}

.logo-link {
    display: flex;
    align-items: center;
}

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

.logo-icon,
.logo-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(255, 179, 0, 0.15));
}

.logo-text {
    font-family: var(--font-headings);
    font-size: 1.4rem;
    font-weight: 800;
    background: linear-gradient(to right, #e21e26, #f7931e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.3px;
}

.desktop-nav {
    display: block;
}

.nav-list {
    display: flex;
    gap: 18px;
}

.nav-link {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--color-text-dark);
    position: relative;
    padding: 6px 4px;
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-normal);
}

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

.nav-link.active::after,
.nav-link:hover::after {
    width: calc(100% - 8px);
}

.nav-cta-wrapper {
    display: flex;
    gap: 16px;
}

.nav-cta-wrapper .btn {
    padding: 8px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.nav-cta-wrapper .btn-primary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    color: var(--color-text-dark);
    box-shadow: 0 4px 15px rgba(255, 143, 0, 0.15);
}

.nav-cta-wrapper .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(255, 143, 0, 0.25);
    transform: translateY(-2px);
}

.nav-cta-wrapper .btn-navy {
    background-color: var(--color-accent-navy);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(26, 54, 93, 0.15);
}

.nav-cta-wrapper .btn-navy:hover {
    background-color: #0F223D;
    box-shadow: 0 6px 20px rgba(26, 54, 93, 0.25);
    transform: translateY(-2px);
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    padding: 12px 28px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    border: none;
    font-size: 1rem;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    color: var(--color-text-dark);
    box-shadow: 0 4px 15px rgba(255, 143, 0, 0.2);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(255, 143, 0, 0.35);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--color-accent-gold);
    color: var(--color-text-dark);
    box-shadow: 0 4px 15px rgba(255, 143, 0, 0.15);
}

.btn-secondary:hover {
    box-shadow: 0 6px 20px rgba(255, 143, 0, 0.25);
    transform: translateY(-2px);
    background-color: #FFD54F;
}

.btn-red {
    background-color: #e21e26;
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(226, 30, 38, 0.2);
}

.btn-red:hover {
    box-shadow: 0 6px 20px rgba(226, 30, 38, 0.35);
    transform: translateY(-2px);
    background-color: #cc1b22;
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-dark);
    transform: translateY(-2px);
}

.btn-navy {
    background-color: var(--color-accent-navy);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(26, 54, 93, 0.2);
}

.btn-navy:hover {
    background-color: #0F223D;
    box-shadow: 0 6px 20px rgba(26, 54, 93, 0.35);
    transform: translateY(-2px);
}

.btn-sm {
    padding: 8px 20px;
    font-size: 0.95rem;
}

.btn-lg {
    padding: 14px 36px;
    font-size: 1.1rem;
}

.btn-full {
    width: 100%;
    padding: 14px;
}

/* Hamburger & Mobile Menu Drawer */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
}

.hamburger-bar {
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: var(--radius-pill);
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background-color: var(--color-bg-main);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    padding: 30px 24px;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    overflow-y: auto;
}

.mobile-drawer.open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
}

.close-drawer-btn {
    font-size: 2rem;
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    line-height: 1;
}

.drawer-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 50px;
    /* Ensure last item is not cut off by screen edge */
}

.drawer-link {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-dark);
    display: block;
    padding: 8px 0;
}

.drawer-link:hover {
    color: var(--color-primary);
    padding-left: 8px;
}

.btn-drawer-cta {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    color: #FFFFFF;
    text-align: center;
    border-radius: var(--radius-pill);
    padding: 12px !important;
    margin-top: 20px;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
}

.btn-drawer-cta:hover {
    color: #FFFFFF !important;
    padding-left: 0 !important;
    transform: translateY(-2px);
}

.btn-drawer-cta-navy {
    background: var(--color-accent-navy) !important;
    margin-top: 10px !important;
}

.btn-drawer-cta-navy:hover {
    background: #0F223D !important;
}

.btn-drawer-cta-outline {
    background: transparent !important;
    border: 2px solid var(--color-border) !important;
    color: var(--color-text-dark) !important;
    margin-top: 10px !important;
}

.btn-drawer-cta-outline:hover {
    background: var(--color-border) !important;
    color: var(--color-primary) !important;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(45, 37, 34, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* 1. Hero Section Styles */
.hero-section {
    position: relative;
    padding: 160px 0 100px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Background Slider Styles */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    filter: blur(10px) brightness(0.8);
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1),
        filter 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.hero-slide.active {
    opacity: 1;
    filter: blur(0) brightness(1);
    z-index: 1;
    animation: zoomEffect 8s ease-out forwards;
}

@keyframes zoomEffect {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Elegant light gradient overlay to maintain high text readability on custom background images (Reduced opacity for more visible images) */
    background: radial-gradient(circle at 50% 50%, rgba(255, 249, 246, 0.4) 0%, rgba(255, 249, 246, 0.55) 60%, rgba(255, 249, 246, 0.7) 100%);
    pointer-events: none;
    z-index: 2;
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content {
    opacity: 0;
}

.hero-content.animate-now {
    animation: heroCoolPopup 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes heroCoolPopup {
    0% {
        opacity: 0;
        transform: scale(1.3) translateY(-20px);
        filter: blur(10px);
    }

    60% {
        opacity: 1;
        transform: scale(0.98) translateY(5px);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.85);
    color: #D32F2F;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 800;
    margin-top: -15px;
    margin-bottom: 35px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.hero-logo {
    max-width: 280px;
    height: auto;
    margin: 5px auto 25px auto;
    display: block;
    opacity: 0.85;
    /* Slightly increased for better visibility */
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
    animation: floating 4s ease-in-out infinite;
}

.hero-title {
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 800;
    background: linear-gradient(-45deg,
            #FFCC00 25%,
            #FFF9C4 40%,
            #FFB300 50%,
            #FFF9C4 60%,
            #FFCC00 75%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
    filter: drop-shadow(3px 4px 7px rgba(0, 0, 0, 0.95)) drop-shadow(0px 0px 18px rgba(255, 204, 0, 0.5));
}

.hero-subtitle {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: #FFFFFF;
    text-shadow:
        1px 1px 0 var(--color-text-dark),
        -1px -1px 0 var(--color-text-dark),
        1px -1px 0 var(--color-text-dark),
        -1px 1px 0 var(--color-text-dark),
        0 4px 10px rgba(0, 0, 0, 0.4);
    margin-bottom: 24px;
}

.hero-desc {
    font-size: 1.3rem;
    color: var(--color-text-dark);
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 35px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.hero-scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.scroll-arrow {
    font-size: 1.5rem;
    color: var(--color-primary);
    animation: arrowBounce 2s infinite;
    cursor: pointer;
}

/* Animations Keyframes */
@keyframes floating {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes arrowBounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

@keyframes diyaFlame {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.95;
    }

    30% {
        transform: scale(1.08) rotate(-1deg);
        opacity: 1;
    }

    50% {
        transform: scale(0.95) rotate(1.5deg);
        opacity: 0.9;
    }

    80% {
        transform: scale(1.04) rotate(-0.5deg);
        opacity: 1;
    }
}

.flame-anim {
    transform-origin: 50% 30px;
    animation: diyaFlame 1.8s ease-in-out infinite;
}

/* 2. About Section Styles */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.lead-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 20px;
    line-height: 1.5;
}

.about-text-content p {
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.about-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    border-top: 1px solid var(--color-border);
    padding-top: 30px;
}

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

.stat-num {
    font-family: var(--font-headings);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-secondary);
}

.stat-lbl {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.about-cards-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.value-card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 20px;
    border-left: 4px solid var(--color-secondary);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.value-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 143, 0, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--color-secondary);
    flex-shrink: 0;
}

.value-info h4 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.value-info p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* 3. What We Do Section Styles */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.feature-card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: 40px 30px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    border: 1px solid var(--color-border);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 179, 0, 0.15);
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(255, 143, 0, 0.08) 0%, rgba(255, 179, 0, 0.08) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--color-primary);
    margin: 0 auto 24px auto;
    transition: transform var(--transition-normal);
}

.feature-card:hover .feature-icon {
    transform: rotateY(180deg);
}

.feature-card h3 {
    font-size: 1.4rem;
    margin-bottom: 14px;
}

.feature-card p {
    color: var(--color-text-muted);
    font-size: 0.98rem;
}

/* 4. Events Section Styles */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.event-card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.event-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.event-image-container {
    position: relative;
    height: 200px;
    overflow: hidden;
    background-color: #EFEAE4;
}

.event-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.event-card:hover .event-image {
    transform: scale(1.08);
}

/* Elegant gradient placeholders for cards lacking static images */
.event-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 3rem;
}

.gradient-orange {
    background: linear-gradient(135deg, #FF9800, #F57C00);
}

.gradient-yellow {
    background: linear-gradient(135deg, #FFEB3B, #FBC02D);
    color: #2D2522 !important;
}

.gradient-gold {
    background: linear-gradient(135deg, #FFD54F, #FFB300);
    color: #2D2522 !important;
}

.gradient-red {
    background: linear-gradient(135deg, #FF5722, #D84315);
}

.gradient-blue {
    background: linear-gradient(135deg, #2196F3, #1565C0);
}

.gradient-green {
    background: linear-gradient(135deg, #4CAF50, #1A365D);
}

.event-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.event-details {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.event-details h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
    color: var(--color-text-dark);
}

.event-details p {
    color: var(--color-text-muted);
    font-size: 0.94rem;
    margin-bottom: 20px;
    flex-grow: 1;
}

.btn-text {
    font-weight: 700;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
}

.btn-text:hover {
    color: var(--color-secondary);
}

.btn-text i {
    transition: transform var(--transition-fast);
}

.btn-text:hover i {
    transform: translateX(4px);
}

/* 5. Social Work Section Styles */
.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.social-card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: 35px 25px;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--color-accent-navy);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.social-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-navy);
}

.social-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 20px;
}

.icon-green {
    background-color: var(--color-accent-navy-light);
    color: var(--color-accent-navy);
}

.social-card h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
    color: var(--color-text-dark);
}

.social-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.social-banner {
    background: linear-gradient(135deg, #1B5E20 0%, var(--color-accent-navy) 100%);
    border-radius: var(--radius-md);
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFFFFF;
    box-shadow: var(--shadow-md);
    gap: 30px;
}

.registration-banner {
    background: linear-gradient(135deg, #e21e26 0%, #f7931e 100%);
    border-radius: var(--radius-md);
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFFFFF;
    box-shadow: var(--shadow-lg);
    gap: 30px;
}

.banner-content h3 {
    font-size: 1.8rem;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.banner-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05rem;
}

.banner-btn {
    flex-shrink: 0;
}

/* 6. Gallery Section Styles */
.gallery-tabs-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.gallery-tab {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.98rem;
    padding: 10px 24px;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-dark);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition-fast);
}

.gallery-tab:hover,
.gallery-tab.active {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255, 179, 0, 0.15);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.gallery-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    aspect-ratio: 4 / 3;
    display: block;
    /* Required for JS display filter toggle */
    transition: transform var(--transition-normal);
}

.gallery-item:hover {
    transform: translateY(-4px);
}

.gallery-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.gallery-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.gallery-placeholder-img {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    gap: 12px;
    font-size: 2.5rem;
}

.gallery-placeholder-img span {
    font-size: 1rem;
    font-weight: 600;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(45, 37, 34, 0.95) 0%, rgba(45, 37, 34, 0.4) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    opacity: 1;
    /* Always visible */
    transition: opacity var(--transition-normal);
}

.gallery-image-wrapper:hover img {
    transform: scale(1.1);
}

.gallery-image-wrapper:hover .gallery-overlay {
    opacity: 1;
}

.gallery-cat {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin-bottom: 6px;
}

.gallery-caption {
    font-size: 1.15rem;
    color: #FFFFFF;
    font-weight: 600;
    margin-bottom: 0;
}

.gallery-zoom-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.1rem;
    transform: scale(0.8);
    transition: transform var(--transition-normal);
}

.gallery-image-wrapper:hover .gallery-zoom-icon {
    transform: scale(1);
}

/* Custom Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(29, 24, 22, 0.95);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #FFFFFF;
    font-size: 3rem;
    cursor: pointer;
    transition: color var(--transition-fast);
}

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

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #FFFFFF;
    font-size: 2.5rem;
    cursor: pointer;
    transition: color var(--transition-fast);
    z-index: 1001;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
}

.lightbox-nav:hover {
    color: var(--color-primary);
    background: rgba(0, 0, 0, 0.6);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-content-wrapper {
    max-width: 90%;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

.lightbox-caption {
    color: #FFFFFF;
    font-family: var(--font-headings);
    font-size: 1.3rem;
    margin-top: 20px;
    text-align: center;
}

/* 7. Committee Section Styles */
.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.member-card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: 30px 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.member-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 179, 0, 0.1);
}

.member-avatar {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px auto;
}

.member-avatar img {
    border-radius: 50%;
    border: 2px solid var(--color-border);
    transition: border-color var(--transition-normal);
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.member-card:hover .member-avatar img {
    border-color: var(--color-primary);
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 143, 0, 0.05) 0%, rgba(255, 179, 0, 0.05) 100%);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--color-text-muted);
}

.member-card:hover .avatar-placeholder {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.member-info h3 {
    font-size: 1.25rem;
    margin-bottom: 6px;
    color: var(--color-text-dark);
}

.member-info .role {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 16px;
}

.member-social {
    display: none;
    justify-content: center;
    gap: 12px;
}

.member-social a {
    width: 32px;
    height: 32px;
    background-color: var(--color-bg-light);
    color: var(--color-text-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.member-social a:hover {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

/* 8. Upcoming Event Section Styles */
.upcoming-card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.upcoming-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
}

.upcoming-img-side {
    position: relative;
    height: 100%;
    min-height: 350px;
    background-color: #EFEAE4;
}

.upcoming-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.countdown-container {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: flex;
    justify-content: space-around;
    box-shadow: var(--shadow-md);
}

.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-num {
    font-family: var(--font-headings);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
}

.time-lbl {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.upcoming-details-side {
    padding: 50px 40px;
}

.upcoming-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-secondary);
    background-color: rgba(255, 143, 0, 0.08);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 20px;
}

.upcoming-details-side h3 {
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 24px;
    background: linear-gradient(135deg, var(--color-text-dark) 40%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.event-meta-info {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 20px;
}

.event-meta-info p {
    font-size: 1.02rem;
    color: var(--color-text-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.event-meta-info p i {
    color: var(--color-primary);
    width: 20px;
    font-size: 1.1rem;
}

.upcoming-desc {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    margin-bottom: 30px;
}

/* 9. Join Section Styles */
.join-form-wrapper {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 50px 40px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    max-width: 900px;
    margin: 0 auto;
}

.form-instructions {
    text-align: center;
    margin-bottom: 40px;
}

.form-instructions p {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.styled-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 36px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-dark);
}

.req {
    color: var(--color-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-main);
    color: var(--color-text-dark);
    outline: none;
    transition: var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.08);
}

.form-group select {
    cursor: pointer;
}

/* Custom File Upload Styles */
.file-upload-wrapper {
    position: relative;
    width: 100%;
    height: 52px;
}

.file-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-upload-custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-main);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    font-weight: 500;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
    z-index: 1;
}

.file-upload-wrapper:hover .file-upload-custom {
    border-color: var(--color-primary);
    background-color: rgba(255, 179, 0, 0.02);
}

.file-upload-custom i {
    font-size: 1.2rem;
    color: var(--color-primary);
}

.file-upload-input:focus~.file-upload-custom {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.08);
}

/* 10. Contact Section Styles */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: start;
}

.contact-info-col h3 {
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.contact-intro {
    color: var(--color-text-muted);
    font-size: 1.02rem;
    margin-bottom: 40px;
}

.info-link-card {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.info-icon {
    width: 48px;
    height: 48px;
    background-color: rgba(255, 179, 0, 0.06);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.info-text h4 {
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.info-text p {
    color: var(--color-text-muted);
    font-size: 0.98rem;
}

.social-links-wrapper {
    margin-top: 40px;
    border-top: 1px solid var(--color-border);
    padding-top: 30px;
}

.social-links-wrapper h4 {
    font-size: 1.15rem;
    margin-bottom: 16px;
}

.social-icons {
    display: flex;
    gap: 14px;
}

.social-icons a {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #FFFFFF;
    transition: transform var(--transition-fast);
}

.social-icons a:hover {
    transform: translateY(-3px);
}

.social-icons a.fb {
    background-color: #1877F2;
}

.social-icons a.wa {
    background-color: #25D366;
}

.social-icons a.ig {
    background: linear-gradient(45deg, #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%);
}

.contact-box {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: 36px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    margin-bottom: 30px;
}

.contact-box h3 {
    font-size: 1.5rem;
    margin-bottom: 24px;
}

.styled-form-compact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group-compact input,
.form-group-compact textarea {
    font-family: var(--font-body);
    font-size: 0.98rem;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-main);
    color: var(--color-text-dark);
    outline: none;
    width: 100%;
    transition: var(--transition-fast);
}

.form-group-compact input:focus,
.form-group-compact textarea:focus {
    border-color: var(--color-primary);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.08);
}

/* Map Placeholder Styling */
.map-placeholder {
    height: 250px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #EAE5DF 0%, #D8D2CA 100%);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(45, 37, 34, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    padding: 20px;
    text-align: center;
    transition: background-color var(--transition-normal);
}

.map-placeholder:hover .map-overlay {
    background-color: rgba(45, 37, 34, 0.55);
}

.map-overlay i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    color: var(--color-accent-gold);
    animation: floating 3s ease-in-out infinite;
}

.map-overlay p {
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.map-overlay span {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Toast Notifications styling */
.toast {
    position: fixed;
    bottom: 30px;
    right: -400px;
    width: 360px;
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: 0 15px 35px rgba(45, 37, 34, 0.15);
    border-left: 5px solid var(--color-accent-navy);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 3000;
    transition: right 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
    right: 30px;
}

.toast-content {
    display: flex;
    gap: 16px;
}

.toast-icon {
    font-size: 1.6rem;
    color: var(--color-accent-navy);
    margin-top: 2px;
}

.toast-message {
    display: flex;
    flex-direction: column;
}

.toast-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.toast-desc {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.toast-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
}

.toast-close:hover {
    color: var(--color-text-dark);
}

/* 11. Footer Styles */
.main-footer {
    background-color: #261E1B;
    color: #E2DBD8;
    padding-top: 80px;
    border-top: 3px solid var(--color-primary);
}

.footer-top {
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr;
    gap: 40px;
}

.footer-about .logo-text {
    font-size: 1.35rem;
    background: linear-gradient(45deg, #FFEB3B, var(--color-accent-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-icon-footer,
.logo-img-footer {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: none;
}

.footer-desc {
    font-size: 0.95rem;
    color: #B1A6A2;
    margin: 20px 0;
    max-width: 320px;
    line-height: 1.5;
}

.footer-quote {
    font-family: var(--font-headings);
    font-style: italic;
    font-weight: 600;
    color: var(--color-accent-gold);
    font-size: 1.05rem;
}

.footer-links h3,
.footer-contact h3 {
    color: #FFFFFF;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 8px;
}

.footer-links h3::after,
.footer-contact h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: var(--color-secondary);
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links ul a {
    color: #B1A6A2;
    font-size: 0.95rem;
}

.footer-links ul a:hover {
    color: #FFFFFF;
    padding-left: 4px;
}

.footer-contact p {
    font-size: 0.95rem;
    color: #B1A6A2;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-contact p i {
    color: var(--color-secondary);
    width: 16px;
}

.footer-social-icons {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.footer-social-icons a {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #B1A6A2;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.footer-social-icons a:hover {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

.footer-bottom {
    padding: 30px 0;
    background-color: #1E1715;
    font-size: 0.9rem;
    color: #8C7E7A;
}

.credits {
    font-size: 0.8rem;
    margin-top: 6px;
    color: #5C504D;
}

/* Donation Section Styles */
.donate-wrapper {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 50px 40px;
    box-shadow: var(--shadow-navy);
    border: 1px solid var(--color-border);
    max-width: 1000px;
    margin: 0 auto;
}

.donate-grid-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: start;
}

.donate-info-side h3 {
    font-size: 1.6rem;
    color: var(--color-text-dark);
    margin-bottom: 12px;
}

.donate-intro-text {
    color: var(--color-text-muted);
    font-size: 1.02rem;
    margin-bottom: 30px;
}

.cause-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 30px;
}

.cause-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background-color: var(--color-bg-main);
    transition: var(--transition-fast);
}

.cause-opt i {
    font-size: 1.25rem;
    color: var(--color-text-muted);
}

.cause-opt span {
    font-weight: 600;
    font-size: 0.96rem;
}

.cause-opt:hover,
.cause-opt.active {
    border-color: var(--color-accent-navy);
    background-color: var(--color-accent-navy-light);
    color: var(--color-accent-navy);
}

.cause-opt:hover i,
.cause-opt.active i {
    color: var(--color-accent-navy);
}

.cause-opt[data-cause="other"] {
    grid-column: span 2;
    justify-content: center;
}

.amount-selector-wrapper h4 {
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.amount-presets {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.preset-btn {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    padding: 10px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: #FFFFFF;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: var(--transition-fast);
}

.preset-btn:hover,
.preset-btn.active {
    border-color: var(--color-accent-navy);
    background-color: var(--color-accent-navy);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.2);
}

/* -------------------------------------------------------------
 * Responsive Design System — Full Mobile Overrides
 * ------------------------------------------------------------- */

/* Universal readability adjustments & touch targets */
body {
    line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.4;
}

/* Accessible touch targets globally */
.btn {
    min-height: 44px;
}

.preset-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.close-drawer-btn,
.modal-close-btn,
.lightbox-close {
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Hamburger animation & touch size */
.hamburger-btn {
    width: 44px;
    height: 44px;
    padding: 12px;
    margin-right: -12px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
}

.hamburger-bar {
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: var(--radius-pill);
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* Animate hamburger to X when drawer is active */
.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(2) {
    opacity: 0;
}

.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ── Breakpoint: Tablet Landscape ≤ 1024px ─────────────────── */
@media (max-width: 1024px) {

    .desktop-nav,
    .nav-cta-wrapper {
        display: none;
    }

    .hamburger-btn {
        display: flex;
    }

    .section-padding {
        padding: 80px 0;
    }
}

/* ── Breakpoint: Tablet Portrait ≤ 992px ──────────────────── */
@media (max-width: 992px) {
    .section-padding {
        padding: 70px 0;
    }

    /* Two-column layouts → single column */
    .about-grid,
    .donate-grid-layout,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Footer → 2 cols on tablet */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* Stack order fix */
    .about-text-content {
        order: 1;
    }

    .about-cards-content {
        order: 2;
    }

    /* Upcoming event */
    .upcoming-grid {
        grid-template-columns: 1fr;
    }

    .upcoming-img-side {
        min-height: 280px;
    }

    /* Gallery columns: 2 columns on tablets */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* ── Breakpoint: Mobile Large ≤ 768px ─────────────────────── */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .section-padding {
        padding: 55px 0;
    }

    .section-title {
        font-size: clamp(1.65rem, 5.5vw, 2.1rem);
    }

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

    /* ── Inner page header ── */
    .page-header {
        padding: 140px 0 40px 0;
    }

    /* ── Hero ── */
    .hero-section {
        padding: 140px 0 80px 0;
    }

    .hero-title {
        font-size: clamp(2rem, 7vw, 2.8rem);
    }

    .hero-subtitle {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
    }

    .hero-desc {
        font-size: 1rem;
        margin-bottom: 28px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 320px;
    }

    /* ── About ── */
    .about-stats {
        gap: 20px;
    }

    .stat-num {
        font-size: 1.8rem;
    }

    /* ── What We Do ── */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature-card {
        padding: 30px 24px;
    }

    /* ── Events ── */
    .events-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* ── Social Work ── */
    .social-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .social-banner,
    .registration-banner {
        flex-direction: column;
        text-align: center;
        padding: 30px 24px;
        gap: 20px;
    }

    .banner-content h3 {
        font-size: 1.4rem;
    }

    .banner-btn {
        width: 100%;
    }

    .banner-btn .btn {
        width: 100%;
    }

    /* ── Gallery ── */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .gallery-tabs-container {
        gap: 8px;
    }

    .gallery-tab {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    /* ── Committee ── */
    .member-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .member-card {
        padding: 24px 16px;
    }

    /* ── Upcoming Event Detail ── */
    .upcoming-details-side {
        padding: 30px 24px;
    }

    .upcoming-details-side h3 {
        font-size: 1.6rem;
    }

    .countdown-container {
        padding: 12px 10px;
        bottom: 16px;
        left: 16px;
        right: 16px;
    }

    .time-num {
        font-size: 1.4rem;
    }

    /* ── Forms ── */
    .styled-form .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-group.full-width {
        grid-column: span 1;
    }

    .join-form-wrapper {
        padding: 30px 20px;
    }

    .contact-box {
        padding: 24px 20px;
    }

    /* ── Footer ── */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .main-footer {
        padding-top: 50px;
    }

    .footer-top {
        padding-bottom: 30px;
    }

    /* ── Donate ── */
    .donate-wrapper {
        padding: 30px 20px;
    }

    .cause-options-grid {
        grid-template-columns: 1fr;
    }

    .cause-opt[data-cause="other"] {
        grid-column: span 1;
    }

    /* ── Toast notification ── */
    .toast {
        width: calc(100vw - 32px);
        right: -110vw;
        bottom: 20px;
    }

    .toast.show {
        right: 16px;
    }

    /* ── Modal ── */
    .modal-card {
        padding: 30px 20px;
        width: 95%;
    }

    .payment-options-grid {
        gap: 10px;
    }

    /* ── Lightbox ── */
    .lightbox-close {
        top: 16px;
        right: 16px;
        font-size: 2.2rem;
    }
}

/* ── Breakpoint: Mobile Medium-Large ≤ 480px ──────────────── */
@media (max-width: 480px) {
    .container {
        padding: 0 14px;
    }

    .section-padding {
        padding: 45px 0;
    }

    .section-title {
        font-size: clamp(1.4rem, 6vw, 1.7rem);
    }

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

    /* ── Navbar ── */
    .nav-container {
        padding: 12px 14px;
    }

    .logo-wrapper {
        gap: 8px;
    }

    .logo-img,
    .logo-icon {
        width: 36px;
        height: 36px;
    }

    .logo-text {
        font-size: clamp(0.95rem, 4.5vw, 1.1rem);
        max-width: calc(100vw - 110px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ticker-badge {
        display: none;
    }

    .ticker-bar {
        font-size: 0.8rem;
    }

    /* ── Hero & Inner Page Header ── */
    .hero-section {
        padding: 120px 0 70px 0;
    }

    .page-header {
        padding: 120px 0 30px 0;
    }

    .hero-badge {
        font-size: 0.8rem;
        padding: 5px 12px;
    }

    .hero-title {
        font-size: clamp(1.7rem, 8vw, 2.4rem);
    }

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

    .hero-desc {
        font-size: 0.93rem;
    }

    /* ── About ── */
    .about-stats {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .stat-num {
        font-size: 1.6rem;
    }

    .value-card {
        padding: 18px;
        gap: 14px;
    }

    .value-icon {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    .value-info h4 {
        font-size: 1.05rem;
    }

    /* ── What We Do ── */
    .feature-icon {
        width: 58px;
        height: 58px;
        font-size: 1.5rem;
    }

    .feature-card h3 {
        font-size: 1.2rem;
    }

    /* ── Events ── */
    .event-image-container {
        height: 170px;
    }

    .event-details {
        padding: 18px;
    }

    .event-details h3 {
        font-size: 1.2rem;
    }

    /* ── Social Work ── */
    .social-card {
        padding: 24px 18px;
    }

    .social-banner,
    .registration-banner {
        padding: 24px 16px;
    }

    .banner-content h3 {
        font-size: 1.25rem;
    }

    /* ── Gallery: Maintain 2 columns on medium phones for neatness ── */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* ── Committee: Single column under 480px to prevent text squeezing ── */
    .member-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .member-card {
        padding: 24px 20px;
        max-width: 320px;
        margin: 0 auto;
        width: 100%;
    }

    /* ── Upcoming ── */
    .time-num {
        font-size: 1.2rem;
    }

    .time-lbl {
        font-size: 0.72rem;
    }

    /* ── Contact ── */
    .info-link-card {
        gap: 14px;
    }

    .info-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    /* ── Donate ── */
    .amount-presets {
        gap: 8px;
    }

    .preset-btn {
        padding: 8px 14px;
        font-size: 0.92rem;
    }

    /* ── Payment Modal ── */
    .modal-card {
        padding: 25px 16px;
    }

    .payment-opt-card {
        padding: 16px 10px;
    }

    .payment-opt-card .opt-icon {
        font-size: 1.8rem;
    }

    .payment-opt-card .opt-label {
        font-size: 0.85rem;
    }

    /* ── Toast ── */
    .toast {
        padding: 14px;
    }

    /* ── Drawer ── */
    .mobile-drawer {
        width: min(300px, 90vw);
    }
}

/* ── Breakpoint: Mobile Small-Medium ≤ 375px ──────────────── */
@media (max-width: 375px) {

    /* Gallery columns: Switch to 1 column on small phones to keep thumbnails large enough */
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ── Breakpoint: Extra Small ≤ 360px ──────────────────────── */
@media (max-width: 360px) {
    .section-title {
        font-size: clamp(1.2rem, 7vw, 1.5rem);
    }

    .logo-text {
        max-width: calc(100vw - 100px);
    }

    .hero-title {
        font-size: clamp(1.4rem, 8vw, 1.8rem);
    }

    .about-stats {
        flex-direction: column;
    }

    .payment-options-grid {
        grid-template-columns: 1fr;
    }
}

/* Payment Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn var(--transition-normal);
}

.modal-card {
    background-color: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 450px;
    padding: 40px;
    position: relative;
    text-align: center;
    transform: scale(0.9);
    animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes zoomIn {
    to {
        transform: scale(1);
    }
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
    z-index: 10;
}

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

.modal-step {
    display: none;
}

.modal-step.active {
    display: block;
}

.modal-title {
    font-family: var(--font-headings);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: 10px;
}

.modal-subtitle {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Payment options selector */
.payment-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.payment-opt-card {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.payment-opt-card:hover {
    border-color: var(--color-primary);
    background-color: rgba(255, 179, 0, 0.02);
}

.payment-opt-card.active {
    border-color: var(--color-accent-navy);
    background-color: var(--color-accent-navy-light);
    color: var(--color-accent-navy);
}

.payment-opt-card .opt-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
}

.payment-opt-card .opt-label {
    font-weight: 700;
    font-size: 0.98rem;
}

/* QR Code styling */
.qr-code-container {
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: inline-block;
    flex-shrink: 0;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.payment-qr-image {
    display: block;
    width: 180px;
    height: 180px;
    object-fit: contain;
}

.qr-timer {
    font-size: 0.9rem;
    color: var(--color-primary);
    font-weight: 700;
}

/* UPI Copy text box */
.upi-id-copy-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
}

.upi-id-text {
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-text-dark);
}

.btn-copy {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-copy:hover {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

/* ── Custom Modal ── */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.custom-modal {
    background-color: var(--color-bg-main);
    border-radius: var(--radius-lg);
    padding: 30px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    text-align: center;
    animation: modalPopIn 0.3s ease-out forwards;
}

.custom-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

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

@keyframes modalPopIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   PREMIUM EVENTS SECTION OVERRIDES (Redesign)
   ========================================================================== */

.events-section {
    background: linear-gradient(135deg, var(--color-bg-light) 0%, #fffbf0 100%);
    position: relative;
    overflow: hidden;
}

/* Glassmorphism Countdown Timer */
.glass-countdown {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border-radius: 20px !important;
}

.time-num.glowing-text {
    text-shadow: 0 0 10px rgba(255, 179, 0, 0.4);
    animation: pulse-glow 2s infinite alternate;
}

@keyframes pulse-glow {
    from {
        text-shadow: 0 0 10px rgba(255, 179, 0, 0.3);
    }

    to {
        text-shadow: 0 0 20px rgba(255, 179, 0, 0.6);
    }
}

/* Upcoming Event Card Premium Look */
.upcoming-card {
    border: none !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
    border-radius: 24px !important;
    transform: translateY(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.upcoming-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12) !important;
}

.upcoming-badge {
    background: linear-gradient(135deg, #FF8F00, #ff5722) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(255, 143, 0, 0.3) !important;
    transition: transform 0.3s ease;
}

.upcoming-badge:hover {
    transform: translateY(-2px);
}

.upcoming-details-side h3 {
    background: linear-gradient(135deg, #2d3436 0%, #D4A017 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: gradientShift 5s ease infinite;
    background-size: 200% 200% !important;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Past Events Interactive Grid */
.event-card {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.event-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

.event-image-container {
    position: relative;
    overflow: hidden;
}

.event-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.event-card:hover .event-image-container::after {
    opacity: 1;
}

.event-image,
.event-image-placeholder {
    transition: transform 0.6s ease !important;
}

.event-card:hover .event-image {
    transform: scale(1.1) !important;
}

.event-card:hover .event-image-placeholder {
    transform: scale(1.1) !important;
}

.btn-text i {
    transition: transform 0.3s ease;
}

.event-card:hover .btn-text i {
    transform: translateX(5px);
}

/* =========================================================================
   COMPREHENSIVE RESPONSIVE OVERHAUL (240px to 8K)
   - Mobile First, Fluid Typography, Safe Area Insets, Touch Targets
   ========================================================================= */

/* 1. Fluid Typography & Spacing Root Variables */
:root {
    /* Fluid typography scales from 320px to 1920px screen widths */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --fs-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --fs-md: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --fs-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --fs-3xl: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
    --fs-4xl: clamp(2rem, 1.7rem + 2vw, 3.2rem);
    --fs-5xl: clamp(2.5rem, 2rem + 3vw, 4.5rem);

    /* Fluid spacing */
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
    --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --space-xl: clamp(2rem, 1.5rem + 2vw, 4rem);
    --space-2xl: clamp(3rem, 2rem + 3vw, 6rem);
}

/* 2. Global Resets & Safe Areas (Dynamic Island, Notches) */
html {
    font-size: clamp(14px, 1vw + 10px, 18px);
    /* Base font fluid scaling */
}

body {
    /* Support for rounded corners and notches on iOS/Android */
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    -webkit-text-size-adjust: 100%;
}

* {
    /* Prevent double-tap zoom delay on mobile for better responsiveness */
    touch-action: manipulation;
}

/* 3. Global Fluid Elements */
.container {
    width: 100%;
    max-width: 1280px;
    /* Stretches up to 1920px max, then centers */
    margin: 0 auto;
    padding: 0 clamp(15px, 3vw, 40px);
}

img,
video,
iframe {
    max-width: 100% !important;
    height: auto;
    object-fit: cover;
    /* Prevent stretching */
}

.section-padding {
    padding: var(--space-2xl) 0;
}

/* 4. Touch Targets (Minimum 44px for Apple Standards) */
button,
.btn,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea,
.nav-link,
.drawer-link {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

input,
textarea,
select {
    display: block;
    /* inputs don't use flex well */
}

.btn {
    display: inline-flex;
    padding: clamp(10px, 1vw + 5px, 16px) clamp(20px, 2vw + 10px, 40px);
    font-size: var(--fs-md);
    white-space: normal;
    text-align: center;
}

/* 5. Typography Fluid Overrides */
.section-title {
    font-size: var(--fs-4xl) !important;
}

h1 {
    font-size: var(--fs-5xl) !important;
}

h2 {
    font-size: var(--fs-4xl) !important;
}

h3 {
    font-size: var(--fs-3xl) !important;
}

h4 {
    font-size: var(--fs-2xl) !important;
}

h5 {
    font-size: var(--fs-xl) !important;
}

h6 {
    font-size: var(--fs-lg) !important;
}

p,
a,
span,
li {
    font-size: var(--fs-md);
}

/* 6. Layout & Grid Fixes (Auto-scaling) */
/* Override specific grids to be truly fluid */
.gallery-grid,
.member-grid,
.events-grid,
.footer-grid,
.features-grid,
.payment-options-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 30vw, 350px), 1fr)) !important;
    gap: var(--space-lg) !important;
}

/* Fix Hero content overlay stretching */
.hero-content {
    width: clamp(300px, 90vw, 800px);
    padding: var(--space-xl);
}

/* Modals */
.modal-card {
    width: 90vw;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-xl) !important;
}

/* Forms */
.form-group,
.form-group-compact {
    margin-bottom: var(--space-md);
    width: 100%;
}

form input,
form select,
form textarea {
    width: 100% !important;
    padding: var(--space-sm) !important;
    font-size: var(--fs-md) !important;
}

/* 7. Extreme Edge Cases (Media Queries) */

/* Ultra-Small Phones (Galaxy Fold inner, smartwatches, tiny feature phones: 240px - 360px) */
@media screen and (max-width: 360px) {
    :root {
        --fs-xs: 0.65rem;
        --fs-sm: 0.75rem;
        --fs-md: 0.85rem;
    }

    .container {
        padding: 0 10px;
    }

    .btn {
        width: 100%;
        /* Full width buttons on tiny screens */
    }

    .gallery-grid,
    .member-grid,
    .events-grid,
    .footer-grid,
    .features-grid,
    .payment-options-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-content h1 {
        font-size: 1.8rem !important;
    }
}

/* Small Tablets (600px - 768px) */
@media screen and (min-width: 600px) and (max-width: 768px) {

    .gallery-grid,
    .member-grid,
    .events-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Large Displays & 4K+ (2560px and up) */
@media screen and (min-width: 2560px) {
    .container {
        max-width: 1440px;
        /* Expand slightly on 4K/8K but keep reading width manageable */
    }

    .gallery-grid,
    .member-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)) !important;
        /* Larger cards on huge screens */
    }

    /* Increase shadow intensity slightly to scale with screen size */
    .member-card,
    .event-card,
    .feature-card {
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    }
}

/* 8. Footer Fixes */
@media screen and (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-social-icons {
        justify-content: flex-start;
    }
}


/* Refine Button Sizes */
.btn-sm {
    padding: clamp(8px, 0.8vw + 4px, 12px) clamp(16px, 1.5vw + 8px, 24px) !important;
    font-size: var(--fs-sm) !important;
}

.btn-lg {
    padding: clamp(14px, 1.5vw + 6px, 20px) clamp(30px, 3vw + 15px, 50px) !important;
    font-size: var(--fs-lg) !important;
}

/* Ensure Nav-links keep their specific sizing but are responsive */
.nav-link {
    font-size: var(--fs-sm);
    padding: clamp(8px, 1vw, 15px) clamp(10px, 1.5vw, 20px) !important;
}

.ticker-text {
    font-size: var(--fs-sm);
}

/* Fix SVG and Icons to scale properly */
i,
.fa-solid,
.fa-brands {
    font-size: inherit;
    /* Scales with parent */
}

.opt-icon i {
    font-size: var(--fs-4xl) !important;
}

/* Ensure Logo Scales Properly */
.logo-img {
    height: clamp(35px, 4vw, 55px) !important;
    width: auto !important;
}

.logo-text {
    font-size: clamp(1.2rem, 1.5vw + 0.5rem, 1.8rem) !important;
}

/* Ensure form groups display perfectly on mobile */
@media screen and (max-width: 480px) {
    .styled-form-compact {
        padding: var(--space-sm) !important;
    }
}

/* =========================================================================
   EXTREME MOBILE RESPONSIVE FIXES (240px - 360px Edge Cases)
   ========================================================================= */

/* Universal Overflow Prevention */
* {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

html,
body {
    overflow-x: clip !important;
    /* Strict enforcement of no horizontal scroll */
    width: 100%;
}

/* Fix Hardcoded Widths globally */
.hero-content,
.modal-card,
.mobile-drawer,
.member-card,
.event-card,
.payment-opt-card {
    max-width: 100% !important;
    /* Prevents overflow on sub-300px screens */
    box-sizing: border-box !important;
}

/* Mobile Drawer (Hamburger Menu) Extreme Mobile Fix */
@media screen and (max-width: 320px) {
    .mobile-drawer {
        width: 100vw !important;
        /* Take full width on tiny screens */
        padding: 20px 15px !important;
    }
}

/* Modal and Form Constraints */
.modal-card {
    width: clamp(240px, 95vw, 600px) !important;
    padding: clamp(15px, 4vw, 40px) !important;
    /* Scale padding down on tiny screens */
    margin: auto !important;
}

/* Ultra-Tiny Screens (240px - 280px) */
@media screen and (max-width: 280px) {

    /* Shrink the logo text so it doesn't push the hamburger button off screen */
    .logo-text {
        font-size: 1rem !important;
        white-space: normal !important;
        /* Allow logo text to wrap if necessary */
    }

    .nav-container {
        padding: 10px 5px !important;
        /* Minimize nav padding */
    }

    .hero-content h1 {
        font-size: 1.5rem !important;
    }

    .btn {
        padding: 12px 15px !important;
        /* Thinner buttons to fit text */
        font-size: 0.85rem !important;
    }

    .section-padding {
        padding: 20px 0 !important;
        /* Minimize vertical space */
    }
}

/* Specific component fixes that had fixed widths */
.member-card {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

img.qr-code-img {
    max-width: 100% !important;
    height: auto !important;
}


/* =========================================================================
   ENTERPRISE ACCESSIBILITY (WCAG AA) & PERFORMANCE UPGRADES
   ========================================================================= */

/* 1. Keyboard Navigation & Accessibility Focus States */
:focus {
    outline: none;
    /* Remove default browser outline */
}

/* High contrast outline only when navigating with keyboard */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.2);
}

/* Specific focus visible adjustments for buttons and rounded elements */
.btn:focus-visible,
.navbar-dp:focus-visible,
.close-drawer-btn:focus-visible {
    border-radius: var(--radius-pill);
    outline-offset: 4px;
}

/* 2. Image Performance & CLS Prevention */
/* Ensure all images and videos have generic CLS prevention if height is auto */
img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    /* Prevents stretching */
}

/* Ensure images maintain aspect ratio without explicitly breaking layouts */
.gallery-card img,
.event-image img,
.hero-image img {
    aspect-ratio: auto;
    /* Fallback */
    will-change: transform;
    /* Prepare for hover animations */
}

/* 3. Animation Performance Optimization */
/* Offload complex animations to the GPU */
.reveal,
.reveal.active,
.hero-content,
.drawer-list,
.gallery-card,
.btn {
    will-change: transform, opacity;
    backface-visibility: hidden;
    /* Reduces flicker on Safari */
    transform-style: preserve-3d;
}

/* Disable animations for users preferring reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================================
   DESKTOP RESPONSIVE AUDIT — COMPLETE FIX SUITE (v2.0)
   Covers all desktop/laptop widths: 1024px → 7680px
   Zero breaking changes: design, branding, colors, animations untouched.
   =========================================================================

   FIX INDEX:
   § 1  HTML base font-size stabilization (stops rem-unit layout shift)
   § 2  Container max-width scaling per breakpoint (1024px → 8K)
   § 3  Desktop nav: fix touch-target override, prevent overflow at 1025–1280px
   § 4  Footer: restore designed 4-column grid
   § 5  Protect two-column layouts (about, contact, donate, upcoming)
   § 6  Grid column counts per breakpoint (features, events, gallery, member, social)
   § 7  Section padding normalization (consistent at all desktop widths)
   § 8  Button: resolve !important conflicts, fix white-space wrapping
   § 9  Form inputs: restore correct desktop padding (undo mobile clamp override)
   § 10 word-wrap: scope to overflow-prone elements only, not global *
   § 11 Hero description: cap line length at 75ch for readability
   § 12 Member cards: undo mobile max-width:320px constraint on desktop
   § 13 Modal: restore designed sizing on desktop
   § 14 Toast: correct position on desktop
   § 15 Equal card heights via flexbox
   § 16 Ultra-wide enhancements: 2560px, 3840px, 5120px, 7680px
   § 17 Horizontal overflow prevention
   § 18 Typography clamp corrections
   ========================================================================= */

/* ── § 1 · HTML Base Font Stabilization ─────────────────────────────────
   The fluid clamp(14px, 1vw + 10px, 18px) causes ALL rem-based measurements
   to shift unpredictably across desktop widths. Lock to 16px for desktop
   so padding, gaps, and font-sizes are fully predictable. ──────────────── */
@media screen and (min-width: 1025px) {
    html {
        font-size: 16px !important;
    }
}

/* ── § 2 · Container Max-Width Scaling ──────────────────────────────────
   Expand the 1280px container cap progressively for every larger display.
   Also aligns .nav-container and .ticker-content to the same width. ──── */
@media screen and (min-width: 1025px) {
    .container {
        max-width: 1280px;
        padding: 0 24px;
    }

    /* Ticker bar matches main container */
    .ticker-content {
        max-width: 1280px;
    }

    /* Nav container matches main container */
    .nav-container {
        max-width: 1280px;
    }
}

@media screen and (min-width: 1440px) {
    .container {
        max-width: 1380px;
        padding: 0 32px;
    }

    .ticker-content {
        max-width: 1380px;
    }

    .nav-container {
        max-width: 1380px;
    }
}

@media screen and (min-width: 1600px) {
    .container {
        max-width: 1520px;
        padding: 0 40px;
    }

    .ticker-content {
        max-width: 1520px;
    }

    .nav-container {
        max-width: 1520px;
    }
}

@media screen and (min-width: 1920px) {
    .container {
        max-width: 1760px;
        padding: 0 48px;
    }

    .ticker-content {
        max-width: 1760px;
    }

    .nav-container {
        max-width: 1760px;
    }
}

@media screen and (min-width: 2560px) {
    .container {
        max-width: 2200px;
        padding: 0 64px;
    }

    .ticker-content {
        max-width: 2200px;
    }

    .nav-container {
        max-width: 2200px;
    }
}

@media screen and (min-width: 3440px) {
    .container {
        max-width: 2800px;
        padding: 0 80px;
    }

    .ticker-content {
        max-width: 2800px;
    }

    .nav-container {
        max-width: 2800px;
    }
}

@media screen and (min-width: 3840px) {
    .container {
        max-width: 3200px;
        padding: 0 96px;
    }

    .ticker-content {
        max-width: 3200px;
    }

    .nav-container {
        max-width: 3200px;
    }
}

@media screen and (min-width: 5120px) {
    .container {
        max-width: 4200px;
        padding: 0 120px;
    }

    .ticker-content {
        max-width: 4200px;
    }

    .nav-container {
        max-width: 4200px;
    }
}

@media screen and (min-width: 7680px) {
    .container {
        max-width: 5600px;
        padding: 0 160px;
    }

    .ticker-content {
        max-width: 5600px;
    }

    .nav-container {
        max-width: 5600px;
    }
}

/* ── § 3 · Desktop Nav: Fix Touch-Target Override & Overflow ─────────────
   Problem A: The global touch-target block (lines 2900–2916) applied
   min-height:44px + display:flex to .nav-link, distorting the navbar.
   Problem B: 8 nav items + 3 CTA buttons overflow at 1025px–1280px. ──── */
@media screen and (min-width: 1025px) {

    /* Restore nav-link to its designed inline appearance */
    .nav-link {
        min-height: unset !important;
        min-width: unset !important;
        display: inline !important;
        padding: 6px 4px !important;
        white-space: nowrap !important;
        /* Prevent "What We Do" / "Our Events" from wrapping */
    }

    /* Ensure desktop nav and CTAs are always visible */
    .desktop-nav {
        display: block !important;
    }

    .nav-cta-wrapper {
        display: flex !important;
        align-items: center;
    }

    .hamburger-btn {
        display: none !important;
    }

    /* Profile dropdown z-index safety */
    .profile-dropdown {
        z-index: 1100 !important;
    }
}

/* Tighten gaps at narrow desktop (1025px–1280px) to prevent overflow */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .nav-list {
        gap: 6px !important;
    }

    .nav-cta-wrapper {
        gap: 8px !important;
    }

    .nav-cta-wrapper .btn {
        padding: 7px 12px !important;
        font-size: 0.86rem !important;
    }

    .logo-text {
        font-size: 1.1rem !important;
    }
}

/* Logo text controlled scaling — prevent oversizing on very large screens */
@media screen and (min-width: 1025px) {
    .logo-text {
        font-size: clamp(1.2rem, 1.2vw, 1.5rem) !important;
    }
}

/* ── § 4 · Footer: Restore 4-Column Grid ────────────────────────────────
   The auto-fit grid override (lines 2940–2949) destroys the designed
   1.3fr / 0.8fr / 0.8fr / 1.1fr footer layout. Restore it here. ──────── */
@media screen and (min-width: 1025px) {
    .footer-grid {
        display: grid !important;
        grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr !important;
        gap: 40px !important;
    }
}

@media screen and (min-width: 1920px) {
    .footer-grid {
        gap: 60px !important;
    }
}

@media screen and (min-width: 2560px) {
    .footer-grid {
        gap: 80px !important;
    }
}

/* ── § 5 · Protect Two-Column Layouts on Desktop ────────────────────────
   The 992px media query collapses about/contact/donate/upcoming to 1 column.
   Restore their desktop 2-column grids explicitly above 1025px. ────────── */
@media screen and (min-width: 1025px) {
    .about-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 60px !important;
        align-items: center !important;
    }

    .about-text-content {
        order: unset !important;
    }

    .about-cards-content {
        order: unset !important;
    }

    .contact-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.2fr !important;
        gap: 50px !important;
        align-items: start !important;
    }

    .donate-grid-layout {
        display: grid !important;
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 40px !important;
        align-items: start !important;
    }

    .upcoming-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.2fr !important;
    }

    .upcoming-img-side {
        min-height: 350px;
    }
}

/* Extra breathing room on ultra-wide for two-column layouts */
@media screen and (min-width: 1600px) {
    .about-grid {
        gap: 80px !important;
    }

    .contact-grid {
        gap: 60px !important;
    }
}

@media screen and (min-width: 1920px) {
    .about-grid {
        gap: 100px !important;
    }

    .contact-grid {
        gap: 80px !important;
    }

    .upcoming-img-side {
        min-height: 450px;
    }
}

@media screen and (min-width: 2560px) {
    .upcoming-img-side {
        min-height: 550px;
    }

    .upcoming-details-side {
        padding: 70px 60px;
    }

    .upcoming-details-side h3 {
        font-size: 2.6rem;
    }
}

/* ── § 6 · Grid Column Counts Per Breakpoint ────────────────────────────
   Replace the broken auto-fit minmax(clamp(250px,30vw,350px),1fr) override
   with intentional, design-aware column counts at each desktop width. ──── */

/* 1025px – 1440px: Standard desktop — 3 columns */
@media screen and (min-width: 1025px) {
    .features-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
        align-items: stretch !important;
    }

    .events-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
        align-items: stretch !important;
    }

    .gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }

    .member-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
    }

    .social-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
        align-items: stretch !important;
        margin-bottom: 50px;
    }

    .payment-options-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* 1440px – 1920px: Large desktop — 4 columns for gallery + members */
@media screen and (min-width: 1440px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .member-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* 1920px – 2560px: FHD / 2K — more columns */
@media screen and (min-width: 1920px) {
    .gallery-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 28px !important;
    }

    .events-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .member-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .social-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Keep 3 — readability */
}

/* 2560px+: 4K and beyond — maximum density */
@media screen and (min-width: 2560px) {
    .gallery-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 32px !important;
    }

    .events-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .member-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .features-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .social-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* 3840px+ (4K): Even larger cards */
@media screen and (min-width: 3840px) {
    .gallery-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 40px !important;
    }

    .events-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .member-grid {
        grid-template-columns: repeat(7, 1fr) !important;
    }
}

/* ── § 7 · Section Padding Normalization ────────────────────────────────
   Replace the var(--space-2xl) clamp override with stable pixel values.
   Ensures consistent vertical rhythm across all desktop breakpoints. ──── */
@media screen and (min-width: 1025px) {
    .section-padding {
        padding: 100px 0 !important;
    }

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

@media screen and (min-width: 1920px) {
    .section-padding {
        padding: 120px 0 !important;
    }

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

@media screen and (min-width: 2560px) {
    .section-padding {
        padding: 150px 0 !important;
    }

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

@media screen and (min-width: 3840px) {
    .section-padding {
        padding: 200px 0 !important;
    }

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

@media screen and (min-width: 7680px) {
    .section-padding {
        padding: 260px 0 !important;
    }
}

/* Social banner & registration banner extra padding on wide screens */
@media screen and (min-width: 1600px) {

    .social-banner,
    .registration-banner {
        padding: 50px 60px;
    }
}

@media screen and (min-width: 1920px) {

    .social-banner,
    .registration-banner {
        padding: 60px 80px;
    }
}

/* ── § 8 · Button: Resolve !important Conflicts & Fix Text Wrapping ──────
   Multiple competing !important rules create unpredictable button sizing.
   Establish single authoritative values for desktop. ─────────────────────  */
@media screen and (min-width: 1025px) {
    .btn {
        padding: 12px 28px !important;
        font-size: 1rem !important;
        white-space: nowrap !important;
        /* Prevent text wrapping inside buttons */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .btn-sm {
        padding: 8px 20px !important;
        font-size: 0.95rem !important;
    }

    .btn-lg {
        padding: 14px 36px !important;
        font-size: 1.1rem !important;
    }

    /* Scale buttons upward slightly at very large screens */
}

@media screen and (min-width: 2560px) {
    .btn {
        padding: 14px 36px !important;
        font-size: 1.1rem !important;
    }

    .btn-sm {
        padding: 10px 26px !important;
        font-size: 1rem !important;
    }

    .btn-lg {
        padding: 18px 48px !important;
        font-size: 1.25rem !important;
    }
}

/* ── § 9 · Form Input Padding: Restore Desktop Values ───────────────────
   Lines 2971–2975 apply clamp-based padding to all form inputs globally.
   This was mobile-intent. Restore correct desktop padding. ───────────────  */
@media screen and (min-width: 1025px) {

    form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    form select,
    form textarea {
        padding: 12px 16px !important;
        font-size: 1rem !important;
        display: block !important;
        width: 100% !important;
        min-height: unset !important;
        /* Remove 44px touch-target from inputs on desktop */
        min-width: unset !important;
    }

    /* Preserve icon-padded left spacing in registration/join forms */
    .input-wrapper input,
    .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .form-group textarea {
        padding-left: 45px !important;
    }

    /* Compact form inputs (contact section) */
    .form-group-compact input,
    .form-group-compact textarea {
        padding: 12px 16px !important;
        padding-left: 16px !important;
    }

    /* Ensure select dropdowns look right */
    form select {
        padding: 12px 16px !important;
        cursor: pointer !important;
    }
}

/* ── § 10 · word-wrap: Scope to Overflow-Prone Elements Only ─────────────
   Lines 3082–3085 apply word-wrap:break-word !important to every element.
   On desktop, this incorrectly forces line breaks in Bengali flowing text.
   Restore normal on desktop; keep break-word only where genuinely needed. ─ */
@media screen and (min-width: 1025px) {

    /* Restore normal text flow on desktop */
    * {
        word-wrap: normal !important;
        overflow-wrap: normal !important;
    }

    /* Keep break-word only for elements that can genuinely overflow */
    .upi-id-text,
    .info-text p,
    .footer-desc,
    .ticker-text,
    .event-details p,
    .feature-card p,
    .social-card p,
    .value-info p,
    .hero-desc,
    td,
    th,
    pre,
    code {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ── § 11 · Hero Description: Line Length Cap ────────────────────────────
   Current max-width:1100px allows 90–100+ char lines on large desktops.
   Optimal reading line length is ~65–80 characters. ─────────────────────── */
@media screen and (min-width: 1025px) {
    .hero-desc {
        max-width: 75ch !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media screen and (min-width: 1920px) {
    .hero-desc {
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 2560px) {
    .hero-desc {
        font-size: 1.6rem;
    }
}

/* ── § 12 · Member Cards: Undo Mobile Max-Width Constraint on Desktop ─────
   The @media(max-width:480px) block sets max-width:320px; margin:0 auto.
   Some cascade scenarios can bleed this up to desktop. Explicitly clear it. */
@media screen and (min-width: 1025px) {
    .member-card {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ── § 13 · Modal: Restore Designed Sizing on Desktop ───────────────────
   The fluid override clamp(240px, 95vw, 600px) + fluid padding is
   mobile-intended. Restore designed 450px max-width on desktop. ────────── */
@media screen and (min-width: 1025px) {
    .modal-card {
        width: 90% !important;
        max-width: 450px !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: 40px !important;
    }

    .custom-modal {
        width: 90% !important;
        max-width: 500px !important;
        padding: 30px !important;
    }
}

@media screen and (min-width: 2560px) {
    .modal-card {
        max-width: 560px !important;
        padding: 50px !important;
    }

    .custom-modal {
        max-width: 620px !important;
    }
}

/* ── § 14 · Toast: Correct Desktop Position ─────────────────────────────
   The mobile override changes toast width and position. Restore on desktop. */
@media screen and (min-width: 1025px) {
    .toast {
        width: 360px !important;
        right: -400px !important;
        bottom: 30px !important;
    }

    .toast.show {
        right: 30px !important;
    }
}

/* ── § 15 · Equal Card Heights via Flexbox ───────────────────────────────
   Ensure cards in the same grid row share equal heights for visual balance. */
@media screen and (min-width: 1025px) {

    /* Feature cards stretch equally */
    .features-grid {
        align-items: stretch !important;
    }

    .feature-card {
        display: flex !important;
        flex-direction: column !important;
        height: 100%;
    }

    .feature-card p {
        flex-grow: 1;
    }

    /* Event cards stretch equally */
    .events-grid {
        align-items: stretch !important;
    }

    .event-card {
        height: 100%;
    }

    /* Social cards stretch equally */
    .social-grid {
        align-items: stretch !important;
    }

    .social-card {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ── § 16 · Ultra-Wide Screen Enhancements (2560px → 7680px) ─────────────
   Additional polish for 4K, 5K, and 8K displays. ─────────────────────── */
@media screen and (min-width: 2560px) {

    /* Taller image containers to fill the larger visual area */
    .event-image-container {
        height: 260px;
    }

    .gallery-item {
        aspect-ratio: 16 / 10;
    }

    /* Lightbox fitted for ultra-wide */
    .lightbox-img {
        max-height: 80vh;
    }

    .lightbox-content-wrapper {
        max-width: 65%;
    }

    /* Larger hero logo */
    .hero-logo {
        max-width: 360px;
    }

    /* Scroll arrow sizing */
    .scroll-arrow {
        font-size: 2rem;
    }
}

@media screen and (min-width: 3840px) {
    .event-image-container {
        height: 340px;
    }

    .gallery-item {
        aspect-ratio: 16 / 9;
    }

    .member-avatar {
        width: 130px;
        height: 130px;
    }

    .member-avatar img {
        width: 100%;
        height: 100%;
    }

    .hero-logo {
        max-width: 440px;
    }
}

@media screen and (min-width: 5120px) {
    .event-image-container {
        height: 420px;
    }

    .member-avatar {
        width: 160px;
        height: 160px;
    }

    .hero-logo {
        max-width: 540px;
    }
}

/* Form containers: prevent extreme width on very large screens */
@media screen and (min-width: 1920px) {
    .join-form-wrapper {
        max-width: 1000px;
    }

    .donate-wrapper {
        max-width: 1100px;
    }
}

/* ── § 17 · Horizontal Overflow Prevention ───────────────────────────────
   Zero horizontal scroll guaranteed at all desktop widths. ──────────────── */
@media screen and (min-width: 1025px) {
    .navbar-header {
        max-width: 100%;
        overflow-x: hidden;
    }

    .ticker-bar {
        overflow: hidden;
        max-width: 100%;
    }

    .hero-section {
        overflow: hidden;
    }

    .main-footer {
        overflow-x: hidden;
    }
}

/* ── § 18 · Typography Clamp Corrections ────────────────────────────────
   Fix section-title and hero-title to scale cleanly across all desktop sizes.
   The existing h1–h6 !important overrides (lines 2929–2935) use fluid vars
   that become oversized at 2K+. Override with controlled desktop values. ── */
@media screen and (min-width: 1025px) {
    .section-title {
        font-size: clamp(2rem, 2.2vw, 2.8rem) !important;
    }

    .hero-title {
        font-size: clamp(2.8rem, 4.5vw, 4.2rem) !important;
    }

    .hero-subtitle {
        font-size: clamp(1.4rem, 2vw, 1.9rem) !important;
    }
}

@media screen and (min-width: 1920px) {
    .section-title {
        font-size: 2.8rem !important;
    }

    .hero-title {
        font-size: 4.5rem !important;
    }

    .hero-subtitle {
        font-size: 2rem !important;
    }
}

@media screen and (min-width: 2560px) {
    .section-title {
        font-size: 3.4rem !important;
    }

    .hero-title {
        font-size: 5.5rem !important;
    }

    .hero-subtitle {
        font-size: 2.5rem !important;
    }

    .hero-badge {
        font-size: 1.1rem;
        padding: 8px 20px;
    }
}

@media screen and (min-width: 3840px) {
    .section-title {
        font-size: 4.2rem !important;
    }

    .hero-title {
        font-size: 7rem !important;
    }

    .hero-subtitle {
        font-size: 3rem !important;
    }

    .section-tagline {
        font-size: 1.1rem;
        letter-spacing: 3px;
    }

    .stat-num {
        font-size: 3rem;
    }
}

/* ── § 19 · Gallery & Lightbox Stability ────────────────────────────────
   Prevent CLS on gallery items. Ensure aspect ratios are maintained. ───── */
@media screen and (min-width: 1025px) {
    .gallery-item {
        aspect-ratio: 4 / 3;
        min-height: unset;
    }

    .gallery-image-wrapper {
        width: 100%;
        height: 100%;
    }
}

/* ── § 20 · Dropdown & Z-Index Stability ────────────────────────────────*/
@media screen and (min-width: 1025px) {
    .profile-dropdown-wrapper {
        position: relative;
    }

    .profile-dropdown {
        z-index: 1100 !important;
    }
}

/* ── § 21 · Lightbox Nav Arrows — Visible on Desktop ────────────────────*/
@media screen and (min-width: 1025px) {
    .lightbox-nav {
        display: flex;
    }

    .lightbox-prev {
        left: 30px;
    }

    .lightbox-next {
        right: 30px;
    }
}

/* ── § 22 · Cause Options Grid — Desktop Restore ────────────────────────
   The mobile override collapses cause-options to 1 column.
   Restore 2-column on desktop. ───────────────────────────────────────────── */
@media screen and (min-width: 1025px) {
    .cause-options-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .cause-opt[data-cause="other"] {
        grid-column: span 2 !important;
    }
}

/* ── § 23 · Upcoming Event Card on Ultra-Wide ────────────────────────────*/
@media screen and (min-width: 1920px) {
    .upcoming-card {
        border-radius: 28px !important;
    }

    .countdown-container {
        padding: 20px 28px;
    }

    .time-num {
        font-size: 2.2rem;
    }
}

/* ── § 24 · Styled Form Max-Width on Large Desktop ───────────────────────
   Prevent join form wrapper from stretching excessively wide. ────────────── */
@media screen and (min-width: 1440px) {
    .join-form-wrapper {
        max-width: 920px;
    }
}

@media screen and (min-width: 1920px) {
    .join-form-wrapper {
        max-width: 1000px;
    }

    .donate-wrapper {
        max-width: 1100px;
    }
}

/* ── END · Desktop Responsive Audit Fix Suite v2.0 ──────────────────────*/

/* =========================================================================
   EVENTS GRID — AUTO-FIT FLUID COLUMNS
   Screenshot reference: 5 event cards visible at ~1084px viewport.
   auto-fit minmax(175px,1fr) + 16px gap → 5 columns at 1068px CSS viewport.
   Cards stretch to fill the row, so fewer items look equally good.
   ========================================================================= */
@media screen and (min-width: 1025px) {
    .events-grid {
        grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)) !important;
        gap: 16px !important;
        align-items: stretch !important;
    }
}

/* At very large screens keep the density sensible */
@media screen and (min-width: 2560px) {
    .events-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 24px !important;
    }
}

@media screen and (min-width: 3840px) {
    .events-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        gap: 32px !important;
    }
}

/* =========================================================================
   NAV LOGO — PREVENT MULTI-LINE WRAPPING ON NARROW DESKTOPS
   At 1025–1280px the logo Bengali text wraps to 4 lines. Fix with nowrap
   and a slightly smaller font so it stays on one line.
   ========================================================================= */
@media screen and (min-width: 1025px) {
    .logo-text {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .logo-wrapper {
        min-width: 0 !important;
        /* allow flex shrink */
        flex-shrink: 1 !important;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .logo-text {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }

    /* Give the nav more room by reducing logo wrapper max-width */
    .logo-wrapper {
        max-width: 200px !important;
    }
}

/* =========================================================================
   HEADING SIZE CORRECTIONS — ALL SECTIONS & PAGES
   Previous values were too large (h1 up to 72px, h2 up to 51px at 1920px).
   Reducing to comfortable, professional sizes across all desktop widths.
   These rules come last so they win over all previous !important overrides.
   ========================================================================= */
@media screen and (min-width: 1025px) {

    /* ── General headings (h1–h6) ─────────────────────────────────── */
    h1 {
        font-size: clamp(1.8rem, 2.8vw, 3rem) !important;
        /* 28.8px → 48px */
    }

    h2 {
        font-size: clamp(1.4rem, 2vw, 2.2rem) !important;
        /* 22.4px → 35.2px */
    }

    h3 {
        font-size: clamp(1.1rem, 1.5vw, 1.6rem) !important;
        /* 17.6px → 25.6px */
    }

    h4 {
        font-size: clamp(1rem, 1.2vw, 1.3rem) !important;
        /* 16px → 20.8px */
    }

    h5 {
        font-size: clamp(0.9rem, 1vw, 1.1rem) !important;
        /* 14.4px → 17.6px */
    }

    h6 {
        font-size: 0.9rem !important;
    }

    /* ── Hero section specific ────────────────────────────────────── */
    .hero-title {
        font-size: clamp(2rem, 3vw, 3rem) !important;
        /* 32px → 48px */
    }

    .hero-subtitle {
        font-size: clamp(1rem, 1.3vw, 1.4rem) !important;
        /* 16px → 22.4px */
    }

    /* ── Section / page headings ──────────────────────────────────── */
    .section-title {
        font-size: clamp(1.5rem, 1.8vw, 2rem) !important;
        /* 24px → 32px */
    }

    .section-tagline {
        font-size: 0.82rem !important;
        letter-spacing: 2.5px !important;
    }

    /* ── Upcoming event card heading ──────────────────────────────── */
    .upcoming-details-side h3 {
        font-size: clamp(1.4rem, 1.8vw, 2rem) !important;
    }

    /* ── Event hero banner (registration page) ───────────────────── */
    .event-hero-text h2 {
        font-size: clamp(1.4rem, 2.2vw, 2rem) !important;
    }

    /* ── Join / donate / login page headings ─────────────────────── */
    .page-hero-title,
    .auth-title,
    .donate-title,
    .join-title {
        font-size: clamp(1.6rem, 2vw, 2.2rem) !important;
    }

    /* ── Footer headings ─────────────────────────────────────────── */
    .footer-heading {
        font-size: 1rem !important;
    }
}

/* ── Large screens: keep proportional, not over-large ────────────────── */
@media screen and (min-width: 1920px) {
    h1 {
        font-size: 3rem !important;
    }

    h2 {
        font-size: 2.2rem !important;
    }

    h3 {
        font-size: 1.6rem !important;
    }

    h4 {
        font-size: 1.3rem !important;
    }

    .hero-title {
        font-size: 3.2rem !important;
    }

    .hero-subtitle {
        font-size: 1.4rem !important;
    }

    .section-title {
        font-size: 2rem !important;
    }
}

@media screen and (min-width: 2560px) {
    h1 {
        font-size: 3.5rem !important;
    }

    h2 {
        font-size: 2.6rem !important;
    }

    h3 {
        font-size: 1.9rem !important;
    }

    .hero-title {
        font-size: 4rem !important;
    }

    .hero-subtitle {
        font-size: 1.7rem !important;
    }

    .section-title {
        font-size: 2.4rem !important;
    }
}

@media screen and (min-width: 3840px) {
    h1 {
        font-size: 4.5rem !important;
    }

    h2 {
        font-size: 3.2rem !important;
    }

    h3 {
        font-size: 2.4rem !important;
    }

    .hero-title {
        font-size: 5rem !important;
    }

    .section-title {
        font-size: 3rem !important;
    }
}

/* =========================================================================
   HERO SECTION VISUAL BALANCING (Based on Monitor Photo)
   The logo was too large, covering the background image subjects.
   The description was too wide.
   ========================================================================= */
@media screen and (min-width: 1025px) {
    .hero-logo {
        max-width: 180px !important;
        /* Reduced from 280px */
        margin-bottom: 15px !important;
    }

    .hero-badge {
        margin-bottom: 25px !important;
    }

    .hero-desc {
        max-width: 800px !important;
        /* Reduced from 1100px for better text wrap */
        font-size: 1.15rem !important;
        margin-top: 20px !important;
        margin-bottom: 25px !important;
    }

    .hero-section {
        padding-top: 140px !important;
    }

    /* Force 4 CTA buttons to stay on a single line */
    .hero-actions {
        flex-wrap: nowrap !important;
        gap: 12px !important;
        width: 100%;
        justify-content: center;
    }

    .hero-actions .btn {
        padding: 12px 24px !important;
        white-space: nowrap !important;
        flex-shrink: 1;
        /* Allow slight shrinking if necessary */
    }
}

@media screen and (min-width: 1920px) {
    .hero-logo {
        max-width: 220px !important;
    }

    .hero-desc {
        max-width: 900px !important;
        font-size: 1.3rem !important;
    }

    .hero-actions {
        gap: 16px !important;
    }

    .hero-actions .btn {
        padding: 14px 32px !important;
    }
}

/* Fix for checkboxes getting weird auto margins and pushing text far right */
input[type="checkbox"] {
    margin-left: 0 !important;
    margin-right: 10px !important;
}

/* ── END · Heading Size Corrections ────────────────────────────────────── */

/* ======== PROFILE DROPDOWN FIX ======== */
.profile-dropdown-wrapper {
    position: relative !important;

}

.profile-dropdown {
    position: absolute !important;
    top: calc(100% + 15px) !important;
    right: 0 !important;
    background: #fff !important;
    min-width: 220px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(15px) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 9999 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 10px 0 !important;
    pointer-events: none !important;
}

.profile-dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Triangle pointer */
.profile-dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: -8px !important;
    right: 15px !important;
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    transform: rotate(45deg) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    z-index: -1 !important;
}

.profile-dropdown .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.profile-dropdown .dropdown-item:hover {
    background: #f8f9fa !important;
    color: #ff6b00 !important;
}

.profile-dropdown .dropdown-item i {
    width: 20px !important;
    text-align: center !important;
    color: #888 !important;
    font-size: 1.1rem !important;
}

.profile-dropdown .dropdown-item:hover i {
    color: #ff6b00 !important;
}

/* ======== OVERFLOW FIX FOR DROPDOWN ======== */
header,
.navbar,
.header-container,
.nav-cta-wrapper,
.navbar-header {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}
/* =========================================================================
   GLOBAL MOBILE RESPONSIVE OPTIMIZATION SUITE (v4.0)
   Ensures 100% responsiveness, zero overflow, safe-areas, and accessibility.
   ========================================================================= */

/* 1. Viewport & Container Hardening */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
    -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjustment */
}

*, *::before, *::after {
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 2. Image & Media Constraints */
img, picture, video, canvas, svg {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain; /* Prevents stretching */
}

/* 3. Mobile Safe Area Adjustments (Dynamic Island & Notch) */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
    .main-nav {
        padding-top: max(15px, env(safe-area-inset-top)) !important;
    }
    .footer {
        padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
    }
    .mobile-sticky-submit-bar {
        padding-bottom: max(15px, env(safe-area-inset-bottom)) !important;
    }
}

/* 4. Global Mobile Resets (= 768px) */
@media (max-width: 768px) {
    /* Fluid Typography Limits */
    h1 {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }
    h2 {
        font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
        line-height: 1.3 !important;
    }

    /* iOS Auto-Zoom Prevention on Inputs */
    input, textarea, select, 
    input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"] {
        font-size: 16px !important;
        max-width: 100% !important;
    }

    /* Minimum Touch Target Heights (48px for Accessibility) */
    button, .btn, a.btn, 
    input[type="submit"], input[type="button"], 
    select, .form-group input, .form-group textarea {
        min-height: 48px !important;
    }
    
    /* Global Section & Card Padding Normalization */
    section, header, footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100vw !important;
    }
    
    .card, .form-card, .sidebar-card, .event-selector-card, .success-modal-card, .payment-modal-card {
        padding: 20px 16px !important;
        border-radius: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Convert ANY multi-column flex/grid to single column vertically stacked */
    .row, .flex-row, .grid, .form-row, .button-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* Modals & Popups Constraint */
    .modal-content, .popup-content, .success-modal-card {
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        margin: 20px auto !important;
    }
}

/* 5. Extreme Mobile Edge Cases (= 360px) */
@media (max-width: 360px) {
    section, header, footer {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .card, .form-card, .sidebar-card, .event-selector-card {
        padding: 16px 12px !important;
    }
}