/* ========================================
   India Tribal Care Trust – Styles
   Modern, Responsive, Professional
   ======================================== */

/* --- Variables & Reset --- */
:root {
    --primary: #E85D26;
    --primary-dark: #C94A1A;
    --primary-light: #FF7A45;
    --primary-glow: rgba(232, 93, 38, 0.35);
    --secondary: #1B3A4B;
    --secondary-dark: #0F2030;
    --accent-gold: #F5A623;
    --text-dark: #1a1a2e;
    --text-body: #444;
    --text-light: #666;
    --text-muted: #999;
    --bg-white: #ffffff;
    --bg-light: #f7f8fa;
    --bg-warm: #FFF8F0;
    --bg-dark: #141c28;
    --bg-footer: #111a26;
    --border: #e8e8e8;
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.06);
    --shadow-md: 0 6px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.16);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --font: 'Inter', system-ui, sans-serif;
    --font-head: 'Playfair Display', Georgia, serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
    font-family: var(--font);
    color: var(--text-dark);
    line-height: 1.7;
    overflow-x: hidden;
    background: var(--bg-white);
    -webkit-font-smoothing: antialiased;
    padding-top: 128px; /* top-bar (50px) + navbar (78px) */
}
a { text-decoration: none; color: inherit; transition: color 0.3s var(--ease); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
address { font-style: normal; }
button { font-family: inherit; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* --- Theme Toggle Button --- */
.theme-toggle {
    position: relative; width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid var(--border); background: var(--bg-light);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: width 0.35s var(--ease), height 0.35s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
    overflow: hidden; flex-shrink: 0;
}
.theme-toggle i {
    position: absolute; font-size: 1.1rem;
    transition: all 0.4s var(--ease);
}
.theme-toggle .fa-moon {
    color: var(--secondary); opacity: 1; transform: rotate(0deg) scale(1);
}
.theme-toggle .fa-sun {
    color: var(--accent-gold); opacity: 0; transform: rotate(-180deg) scale(0);
}
.theme-toggle:hover {
    border-color: var(--primary); background: var(--bg-warm);
    transform: rotate(15deg);
}

/* Scrolled state - smaller theme toggle */
.navbar.scrolled .theme-toggle {
    width: 36px; height: 36px;
}
.navbar.scrolled .theme-toggle i {
    font-size: 0.95rem;
}

/* Dark mode icon swap */
[data-theme="dark"] .theme-toggle { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); }
[data-theme="dark"] .theme-toggle:hover { border-color: var(--accent-gold); background: rgba(255,255,255,0.12); }
[data-theme="dark"] .theme-toggle .fa-moon { opacity: 0; transform: rotate(180deg) scale(0); }
[data-theme="dark"] .theme-toggle .fa-sun { opacity: 1; transform: rotate(0deg) scale(1); }

/* ========================================
   DARK MODE VARIABLES
   ======================================== */
[data-theme="dark"] {
    --text-dark: #e8e8f0;
    --text-body: #b8b8c8;
    --text-light: #9a9ab0;
    --text-muted: #707088;
    --bg-white: #13161d;
    --bg-light: #181b24;
    --bg-warm: #1a1d26;
    --bg-dark: #0d0f14;
    --bg-footer: #0a0c10;
    --border: #2a2d3a;
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.25);
    --shadow-md: 0 6px 24px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.35);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.4);
}

/* Dark mode specific overrides */
[data-theme="dark"] .navbar {
    background: rgba(19, 22, 29, 0.95);
}
[data-theme="dark"] .navbar.scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
[data-theme="dark"] .hamburger span {
    background: #ccc;
}
[data-theme="dark"] .nav-menu > li > a {
    color: var(--text-body);
}
[data-theme="dark"] .nav-menu > li > a:hover,
[data-theme="dark"] .nav-menu > li > a.active {
    color: var(--primary-light);
}
[data-theme="dark"] .dropdown-menu {
    background: #1e2130; border-color: var(--border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
[data-theme="dark"] .dropdown-menu::before {
    background: #1e2130; border-color: var(--border);
}
[data-theme="dark"] .dropdown-menu .dropdown-col a {
    color: var(--text-body);
}
[data-theme="dark"] .dropdown-menu .dropdown-col a:hover {
    background: rgba(232,93,38,0.1); color: var(--primary-light);
}

[data-theme="dark"] .partners {
    background: var(--bg-light); border-color: var(--border);
}
[data-theme="dark"] .partner-logo {
    background: var(--bg-white); box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .partner-logo img {
    filter: grayscale(30%) brightness(0.9);
}
[data-theme="dark"] .service-card {
    background: var(--bg-white); border-color: var(--border);
}
[data-theme="dark"] .about-card {
    background: var(--bg-white);
}
[data-theme="dark"] .about-icon {
    background: rgba(232, 93, 38, 0.1);
}
[data-theme="dark"] .section-tag {
    background: rgba(232, 93, 38, 0.12);
}
[data-theme="dark"] .news-card {
    background: var(--bg-white); border-color: var(--border);
}
[data-theme="dark"] .news-card:hover {
    border-color: rgba(232, 93, 38, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .news-meta {
    color: var(--text-muted);
}
[data-theme="dark"] .news-card h3 {
    color: var(--text-dark);
}
[data-theme="dark"] .news-card p {
    color: var(--text-body);
}
[data-theme="dark"] .cta-box {
    background: linear-gradient(135deg, rgba(232,93,38,0.1), rgba(232,93,38,0.05));
    border: 2px solid rgba(232,93,38,0.25);
    box-shadow: 0 4px 24px rgba(232, 93, 38, 0.12);
}
[data-theme="dark"] .cta-box:hover {
    border-color: rgba(232, 93, 38, 0.4);
    box-shadow: 0 8px 40px rgba(232, 93, 38, 0.2);
}
[data-theme="dark"] .cta-box h2,
[data-theme="dark"] .cta-left h2 {
    color: var(--text-dark);
}
[data-theme="dark"] .cta-box p,
[data-theme="dark"] .cta-left p {
    color: var(--text-body);
}
[data-theme="dark"] .cta-box h2 .accent {
    color: var(--primary-light);
}
[data-theme="dark"] .btn-outline-dark {
    border-color: var(--primary-light); color: var(--primary-light);
}
[data-theme="dark"] .btn-outline-dark:hover {
    background: var(--primary-light); color: #fff;
}
[data-theme="dark"] .footer {
    background: var(--bg-footer);
}
[data-theme="dark"] .logo img {
    filter: brightness(1.1);
}
[data-theme="dark"] .footer-logo-img {
    filter: brightness(0.95);
}
/* General dark mode text fixes */
[data-theme="dark"] .section-title {
    color: var(--text-dark);
}
[data-theme="dark"] .section-desc {
    color: var(--text-body);
}
[data-theme="dark"] .service-body h3 {
    color: var(--text-dark);
}
[data-theme="dark"] .service-body p {
    color: var(--text-body);
}
[data-theme="dark"] .link-arrow {
    color: var(--primary-light);
}
[data-theme="dark"] .about-title {
    color: var(--text-dark);
}
[data-theme="dark"] .about-text {
    color: var(--text-body);
}
/* Stat cards in dark mode */
[data-theme="dark"] .stat-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .stat-card:hover {
    background: rgba(232, 93, 38, 0.08);
    border-color: rgba(232, 93, 38, 0.25);
}
[data-theme="dark"] .stat-value {
    color: #fff;
}
[data-theme="dark"] .stat-label {
    color: rgba(255, 255, 255, 0.75);
}
/* Smooth transition for theme switch */
[data-theme="dark"],
[data-theme="dark"] *:not(.hero-slide):not(.hero-overlay):not(.donate-bg):not(.donate-overlay):not(.milestones-bg):not(.top-bar) {
    transition: background-color 0.4s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* Mobile nav in dark mode */
@media (max-width: 992px) {
    [data-theme="dark"] .nav-menu {
        background: rgba(19, 22, 29, 0.98);
        border-left-color: var(--border);
    }
    [data-theme="dark"] .nav-menu > li > a {
        border-bottom-color: var(--border);
    }
    [data-theme="dark"] .nav-menu > li > a:hover {
        background: rgba(232,93,38,0.08);
    }
    [data-theme="dark"] .nav-menu > li > a.active {
        background: rgba(232,93,38,0.1);
    }
    [data-theme="dark"] .dropdown-menu {
        background: transparent; border: none; box-shadow: none;
    }
    [data-theme="dark"] .dropdown-menu .dropdown-col a {
        border-bottom-color: rgba(255,255,255,0.04);
    }
    [data-theme="dark"] .dropdown-menu .dropdown-col a:hover {
        background: rgba(232,93,38,0.08);
    }
}



/* Mobile theme toggle — hidden on desktop, shown inside mobile menu */
.mobile-theme-toggle-item { display: none; }

.mobile-theme-btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 15px 16px;
    background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; font-size: 1rem; color: var(--text-dark);
    font-family: inherit; font-weight: 500;
    transition: all 0.3s var(--ease);
    margin-top: 8px;
}
.mobile-theme-btn:hover {
    background: var(--bg-warm); border-color: var(--primary);
}
.mobile-theme-btn i {
    font-size: 1.1rem;
    transition: all 0.4s var(--ease);
}
.mobile-theme-btn .fa-moon {
    color: var(--secondary); display: inline-block;
}
.mobile-theme-btn .fa-sun {
    color: var(--accent-gold); display: none;
}
[data-theme="dark"] .mobile-theme-btn .fa-moon { display: none; }
[data-theme="dark"] .mobile-theme-btn .fa-sun { display: inline-block; }
[data-theme="dark"] .mobile-theme-btn {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .mobile-theme-btn:hover {
    background: rgba(232,93,38,0.1); border-color: var(--primary);
}

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 34px; border-radius: 50px; font-weight: 600;
    font-size: 0.95rem; cursor: pointer; transition: all 0.35s var(--ease);
    border: 2px solid transparent; letter-spacing: 0.2px; white-space: nowrap;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff; box-shadow: 0 4px 20px var(--primary-glow);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    transform: translateY(-2px); box-shadow: 0 8px 30px rgba(232,93,38,0.45);
}
.btn-glass {
    background: rgba(255,255,255,0.12); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,0.3); color: #fff;
}
.btn-glass:hover {
    background: rgba(255,255,255,0.25); border-color: #fff;
    transform: translateY(-2px);
}
.btn-outline-dark {
    border-color: var(--primary); color: var(--primary); background: transparent;
}
.btn-outline-dark:hover {
    background: var(--primary); color: #fff; transform: translateY(-2px);
}
.btn-lg { padding: 17px 40px; font-size: 1rem; }

/* Animated Donate Button */
.btn-donate-animated {
    position: relative;
    animation: donateBtnPulse 2.5s ease-in-out infinite;
}
.btn-donate-animated::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    opacity: 0;
    z-index: -1;
    animation: donateBtnGlow 2.5s ease-in-out infinite;
}
.btn-donate-animated i {
    animation: heartBeat 1.5s ease-in-out infinite;
}

.link-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--primary); font-weight: 600; font-size: 0.9rem;
    transition: all 0.3s var(--ease);
}
.link-arrow:hover { gap: 14px; color: var(--primary-dark); }
.link-arrow i { font-size: 0.8rem; transition: transform 0.3s var(--ease); }
.link-arrow:hover i { transform: translateX(3px); }

/* --- Section Shared --- */
.section-head { text-align: center; margin-bottom: 52px; }
.section-tag {
    display: inline-block; background: var(--bg-warm); color: var(--primary);
    padding: 6px 22px; border-radius: 50px; font-size: 0.82rem;
    font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    margin-bottom: 18px; position: relative; overflow: hidden;
}
.section-tag::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}
.section-tag.light { background: rgba(255,255,255,0.12); color: #fff; }
.section-title {
    font-family: var(--font-head); font-size: 2.8rem; font-weight: 700;
    color: var(--text-dark); margin-bottom: 14px; line-height: 1.2;
}
.section-title.light { color: #fff; }
.section-desc {
    font-size: 1.08rem; color: var(--text-light); max-width: 640px;
    margin: 0 auto; line-height: 1.8;
}

/* ========================================
   TOP BAR
   ======================================== */
.top-bar {
    background: var(--secondary-dark); color: rgba(255,255,255,0.8);
    font-size: 0.8rem; padding: 0; position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
    overflow: hidden; height: 50px; display: flex; align-items: center;
    line-height: 1.4;
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.top-bar.hidden {
    transform: translateY(-100%); opacity: 0;
    pointer-events: none;
}
/* Dark mode top bar - ensure same transition */
[data-theme="dark"] .top-bar {
    background: var(--secondary-dark);
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
[data-theme="dark"] .top-bar.hidden {
    transform: translateY(-100%); opacity: 0;
    pointer-events: none;
}
.top-bar-flex {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: nowrap; gap: 8px;
    width: 100%;
}
.top-bar-left { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.top-bar-left a { color: rgba(255,255,255,0.8); transition: color 0.3s, font-size 0.3s var(--ease); white-space: nowrap; }
.top-bar-left a:hover { color: var(--primary-light); }
.top-bar-left i { color: var(--primary-light); margin-right: 5px; transition: margin 0.3s var(--ease); }
.top-bar .sep { color: rgba(255,255,255,0.3); margin: 0 6px; transition: margin 0.3s var(--ease); }
.top-bar-center {
    display: flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,0.65); font-size: 0.78rem;
    min-width: 0; overflow: hidden; flex: 1;
    justify-content: center;
    transition: opacity 0.3s var(--ease);
}
.top-bar-center span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-bar-center i { color: var(--primary-light); flex-shrink: 0; }
.top-bar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; transition: gap 0.3s var(--ease), opacity 0.3s var(--ease); }
.top-bar-right a {
    color: rgba(255,255,255,0.6); font-size: 0.95rem;
    transition: all 0.3s var(--ease);
}
.top-bar-right a:hover { color: var(--primary-light); transform: translateY(-1px); }

/* ========================================
   NAVBAR
   ======================================== */
.navbar {
    position: fixed; top: 50px; left: 0; right: 0; z-index: 1000;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--shadow-xs);
    transition: all 0.35s var(--ease), box-shadow 0.35s var(--ease), top 0.35s var(--ease);
}
.navbar.scrolled {
    top: 0;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    padding-top: 0; padding-bottom: 0;
}
.nav-flex {
    display: flex; align-items: center; justify-content: space-between;
    height: 78px; transition: height 0.35s var(--ease);
}
.navbar.scrolled .nav-flex { height: 58px; }
.logo img {
    height: 58px; width: auto; transition: all 0.35s var(--ease);
}
.navbar.scrolled .logo img { height: 42px; }
.nav-menu {
    display: flex; align-items: center; gap: 2px;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
    padding: 8px 16px; font-size: 0.9rem; font-weight: 500;
    color: var(--text-body); border-radius: var(--radius-sm);
    transition: all 0.3s var(--ease); position: relative;
    display: inline-flex; align-items: center; gap: 5px;
}
.nav-menu > li > a::after {
    content: ''; position: absolute; bottom: 2px; left: 50%;
    transform: translateX(-50%); width: 0; height: 2px;
    background: var(--primary); border-radius: 2px;
    transition: width 0.3s var(--ease);
}
.nav-menu > li > a:hover, .nav-menu > li > a.active { color: var(--primary); }
.nav-menu > li > a:hover::after, .nav-menu > li > a.active::after { width: 55%; }

/* Dropdown Arrow */
.dropdown-arrow {
    font-size: 0.65rem; transition: transform 0.3s var(--ease);
    margin-left: 2px;
}
.has-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}
@media (min-width: 993px) {
    .has-dropdown:hover .dropdown-arrow {
        transform: rotate(180deg);
    }
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute; top: 100%; left: 50%;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    padding: 16px 8px; min-width: 200px;
    opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px);
    transition: all 0.3s var(--ease); z-index: 1001;
    pointer-events: none;
}
.dropdown-menu::before {
    content: ''; position: absolute; top: -8px; left: 50%;
    width: 14px; height: 14px; background: var(--bg-white);
    border-top: 1px solid var(--border); border-left: 1px solid var(--border);
    transform: translateX(-50%) rotate(45deg); border-radius: 3px 0 0 0;
}
@media (min-width: 993px) {
    .has-dropdown:hover > .dropdown-menu {
        opacity: 1; visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
}

/* Mega Dropdown (Our Activities) */
.mega-dropdown {
    display: flex; gap: 8px; min-width: 420px; padding: 18px 12px;
}
.dropdown-col {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.dropdown-menu .dropdown-col a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; font-size: 0.88rem; font-weight: 500;
    color: var(--text-body); border-radius: var(--radius-sm);
    transition: all 0.25s var(--ease); white-space: nowrap;
}
.dropdown-menu .dropdown-col a i {
    font-size: 0.85rem; color: var(--primary); width: 20px; text-align: center;
    transition: transform 0.25s var(--ease);
}
.dropdown-menu .dropdown-col a:hover {
    background: var(--bg-warm); color: var(--primary);
    padding-left: 18px;
}
.dropdown-menu .dropdown-col a:hover i {
    transform: scale(1.15);
}
.dropdown-menu .dropdown-col a::after { display: none; }

.nav-donate-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff; padding: 11px 26px; border-radius: 50px;
    font-weight: 600; font-size: 0.9rem;
    box-shadow: 0 4px 16px var(--primary-glow);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), padding 0.35s var(--ease), font-size 0.35s var(--ease);
    animation: donateBtnPulse 2.5s ease-in-out infinite;
    position: relative; flex-shrink: 0;
}
.nav-donate-btn::before {
    content: ''; position: absolute; inset: -3px; border-radius: 50px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    opacity: 0; z-index: -1; filter: blur(8px);
    animation: donateBtnGlow 2.5s ease-in-out infinite;
}
.nav-donate-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 24px rgba(232,93,38,0.45);
    animation: none;
}
.nav-donate-btn:hover::before { animation: none; opacity: 0; }

/* Scrolled state - smaller donate button */
.navbar.scrolled .nav-donate-btn {
    padding: 8px 20px; font-size: 0.82rem;
}

/* ========================================
   PRIORITY NAV LINKS (Tablet)
   Visible alongside hamburger at medium widths
   ======================================== */
.nav-priority-links {
    display: none; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.nav-priority-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; font-size: 0.82rem; font-weight: 500;
    color: var(--text-body); border-radius: 50px;
    border: 1px solid var(--border);
    background: var(--bg-light);
    transition: all 0.3s var(--ease);
    white-space: nowrap;
}
.nav-priority-link i {
    font-size: 0.78rem; color: var(--primary);
}
.nav-priority-link:hover {
    background: var(--bg-warm); border-color: var(--primary);
    color: var(--primary);
}
.nav-priority-link.nav-priority-donate {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff; border-color: transparent;
    box-shadow: 0 3px 12px var(--primary-glow);
}
.nav-priority-link.nav-priority-donate i { color: #fff; }
.nav-priority-link.nav-priority-donate:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(232,93,38,0.45);
}
[data-theme="dark"] .nav-priority-link {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12);
    color: var(--text-body);
}
[data-theme="dark"] .nav-priority-link:hover {
    background: rgba(232,93,38,0.1); border-color: var(--primary);
    color: var(--primary-light);
}

@keyframes donateBtnPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
@keyframes donateBtnGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

/* Hamburger */
.hamburger {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px; z-index: 1002;
}
.hamburger span {
    width: 26px; height: 2.5px; background: var(--text-dark);
    border-radius: 3px; transition: all 0.35s var(--ease);
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile nav overlay */
.nav-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 999; opacity: 0; visibility: hidden;
    transition: all 0.35s var(--ease);
}
.nav-overlay.active { opacity: 1; visibility: visible; }

/* ========================================
   HERO SECTION
   ======================================== */
.hero {
    position: relative; height: 100vh; min-height: 640px; max-height: 1000px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute; inset: 0; background-size: cover;
    background-position: center; opacity: 0;
    transition: opacity 1.8s ease-in-out, transform 8s ease-out;
    will-change: opacity; transform: scale(1);
}
.hero-slide.active { opacity: 1; transform: scale(1.10); }

.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(
        140deg,
        rgba(17, 26, 38, 0.85) 0%,
        rgba(17, 26, 38, 0.6) 40%,
        rgba(232, 93, 38, 0.25) 100%
    );
}
.hero-content {
    position: relative; z-index: 2; text-align: center;
    color: #fff; max-width: 860px; padding: 0 24px;
}
.hero-tag {
    display: inline-block; font-size: 0.85rem; letter-spacing: 3px;
    text-transform: uppercase; color: var(--primary-light);
    font-weight: 600; margin-bottom: 22px;
    opacity: 0; animation: fadeUp 0.8s 0.3s var(--ease) forwards;
}
.hero h1 {
    font-family: var(--font-head); font-size: 4.2rem; font-weight: 800;
    line-height: 1.12; margin-bottom: 22px;
    opacity: 0; animation: fadeUp 0.8s 0.5s var(--ease) forwards;
}
.hero h1 .accent {
    color: var(--primary-light);
    text-shadow: 0 0 40px rgba(255,122,69,0.3);
}
.hero-desc {
    font-size: 1.12rem; line-height: 1.8; color: rgba(255,255,255,0.82);
    max-width: 640px; margin: 0 auto 36px;
    opacity: 0; animation: fadeUp 0.8s 0.7s var(--ease) forwards;
}
.hero-btns {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    opacity: 0; animation: fadeUp 0.8s 0.9s var(--ease) forwards;
    margin-bottom: 30px;
}
.hero-btns .btn-primary {
    animation: heroDonatePulse 2.5s 2s ease-in-out infinite;
}
.hero-btns .btn-primary i {
    animation: heartBeat 1.2s ease-in-out infinite;
}
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.2); }
    56% { transform: scale(1); }
}
@keyframes heroDonatePulse {
    0%, 100% { box-shadow: 0 4px 20px var(--primary-glow); }
    50% { box-shadow: 0 4px 40px rgba(232,93,38,0.55), 0 0 60px rgba(232,93,38,0.2); }
}

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

.hero-dots {
    position: absolute; bottom: 50px; left: 50%;
    transform: translateX(-50%); display: flex; gap: 12px; z-index: 3;
}
.hero-dot {
    width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5);
    background: transparent; cursor: pointer; transition: all 0.35s var(--ease);
    padding: 0;
}
.hero-dot.active { background: var(--primary-light); border-color: var(--primary-light); transform: scale(1.2); }

.hero-scroll-hint {
    display: none !important;
}
.hero-scroll-hint span {
    display: none;
}
.scroll-line {
    width: 1px; height: 32px; background: rgba(255,255,255,0.2);
    position: relative; overflow: hidden;
}
.scroll-line::after {
    content: ''; position: absolute; top: -100%; left: 0;
    width: 100%; height: 100%; background: var(--primary-light);
    animation: scrollLine 2s infinite;
}
@keyframes scrollLine {
    0% { top: -100%; } 50% { top: 100%; } 100% { top: 100%; }
}

/* ========================================
   PARTNERS
   ======================================== */
.partners {
    padding: 48px 0; background: var(--bg-light);
    text-align: center; border-bottom: 1px solid var(--border);
}
.partners-label {
    font-size: 0.82rem; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 28px;
}
.partners-row {
    display: flex; align-items: center; justify-content: center;
    gap: 52px; flex-wrap: wrap;
}
.partner-logo {
    background: var(--bg-white); padding: 18px 28px;
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
    transition: all 0.35s var(--ease);
    display: flex; align-items: center; justify-content: center;
    animation: floatSoft 4s ease-in-out infinite;
}
.partner-logo:nth-child(2) { animation-delay: -1.3s; }
.partner-logo:nth-child(3) { animation-delay: -2.6s; }
@keyframes floatSoft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.partner-logo:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); animation-play-state: paused; }
.partner-logo img {
    max-height: 60px; width: auto;
    filter: grayscale(30%); transition: filter 0.35s var(--ease);
}
.partner-logo:hover img { filter: grayscale(0%); }

/* ========================================
   SERVICES
   ======================================== */
.services { padding: 100px 0; background: var(--bg-white); }

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

.service-card {
    background: var(--bg-white); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-sm);
    transition: all 0.4s var(--ease); border: 1px solid var(--border);
    position: relative;
}
.service-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-gold));
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.5s var(--ease);
}
.service-card:hover::after { transform: scaleX(1); }
.service-card:hover {
    transform: translateY(-10px); box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.service-img {
    position: relative; height: 230px; overflow: hidden;
}
.service-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.service-card:hover .service-img img { transform: scale(1.1); }

.service-badge {
    position: absolute; bottom: -22px; right: 22px;
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem;
    box-shadow: 0 4px 16px var(--primary-glow); z-index: 2;
    transition: transform 0.35s var(--ease);
}
.service-card:hover .service-badge { transform: scale(1.15) rotate(5deg); }

.service-body { padding: 32px 26px 26px; }
.service-body h3 {
    font-family: var(--font-head); font-size: 1.4rem;
    margin-bottom: 10px; color: var(--text-dark);
}
.service-body p {
    color: var(--text-light); font-size: 0.93rem;
    line-height: 1.7; margin-bottom: 18px;
}

/* ========================================
   DONATE / IMPACT SECTION
   ======================================== */
.donate-section {
    position: relative; padding: 100px 0; overflow: hidden;
}
.donate-bg {
    position: absolute; inset: 0; background-size: cover;
    background-position: center; background-attachment: fixed;
}
@media (hover: none), (max-width: 992px) {
    .donate-bg { background-attachment: scroll; }
}
.donate-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(17,26,38,0.92), rgba(232,93,38,0.65));
}
.donate-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.1fr 0.9fr;
    gap: 56px; align-items: center;
}
.donate-text { color: #fff; }
.donate-text h2 {
    font-family: var(--font-head); font-size: 2.8rem;
    line-height: 1.2; margin-bottom: 18px;
}
.donate-text > p {
    font-size: 1.05rem; line-height: 1.85;
    color: rgba(255,255,255,0.85); margin-bottom: 30px;
}
.donate-facts { display: flex; flex-direction: column; gap: 14px; margin-bottom: 34px; }
.donate-fact {
    display: flex; align-items: center; gap: 14px;
    color: rgba(255,255,255,0.9); font-size: 0.95rem;
    opacity: 0; transform: translateX(-20px);
    transition: all 0.5s var(--ease);
}
.donate-fact.animated {
    opacity: 1; transform: translateX(0);
}
.fact-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    background: rgba(255,255,255,0.12); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-light); font-size: 0.9rem;
    transition: all 0.4s var(--ease);
}
.donate-fact:hover .fact-icon {
    background: rgba(255,255,255,0.22);
    transform: rotate(10deg) scale(1.1);
}

.donate-visual { position: relative; }
.donate-visual img {
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
    width: 100%; object-fit: cover;
}
.donate-img-frame {
    position: absolute; top: -14px; right: -14px;
    width: 100%; height: 100%; border: 3px solid rgba(255,122,69,0.45);
    border-radius: var(--radius-lg); z-index: -1;
    animation: frameFloat 6s ease-in-out infinite;
}
@keyframes frameFloat {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(4px, -6px); }
    66% { transform: translate(-3px, 4px); }
}

/* ========================================
   ABOUT / VISION & MISSION
   ======================================== */
.about { padding: 100px 0; background: var(--bg-warm); }

.about-cards {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 36px;
}
.about-card {
    background: var(--bg-white); padding: 48px 38px;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    transition: all 0.4s var(--ease); position: relative;
    overflow: hidden;
}
.about-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.about-stripe {
    position: absolute; top: 0; left: 0; width: 5px; height: 0;
    background: linear-gradient(180deg, var(--primary), var(--primary-light));
    transition: height 0.8s var(--ease);
}
.about-card:hover .about-stripe, .about-card.animated .about-stripe { height: 100%; }
.about-icon {
    width: 66px; height: 66px; background: var(--bg-warm);
    border-radius: var(--radius-md); display: flex;
    align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--primary); margin-bottom: 22px;
    transition: all 0.4s var(--ease);
}
.about-card:hover .about-icon {
    transform: scale(1.12) rotate(-5deg);
    background: var(--primary);
    color: #fff;
}
.about-card h3 {
    font-family: var(--font-head); font-size: 1.7rem;
    margin-bottom: 14px; color: var(--text-dark);
}
.about-card p {
    color: var(--text-light); font-size: 0.98rem; line-height: 1.9;
}

/* ========================================
   MILESTONES / STATS
   ======================================== */
.milestones {
    position: relative; padding: 100px 0; text-align: center;
    overflow: hidden;
}
.milestones-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--secondary-dark) 0%, #1a3550 100%);
}
.milestones-inner { position: relative; z-index: 1; }

.stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 28px; margin-top: 10px;
}
.stat-card {
    background: rgba(255,255,255,0.07); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg); padding: 40px 20px;
    transition: all 0.4s var(--ease); color: #fff;
    position: relative; overflow: hidden;
}
.stat-card::before {
    content: ''; position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(232,93,38,0.12) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.5s var(--ease);
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover {
    background: rgba(255,255,255,0.13);
    transform: translateY(-8px);
    border-color: rgba(232,93,38,0.35);
    box-shadow: 0 8px 32px rgba(232,93,38,0.15);
}
.stat-icon { font-size: 1.8rem; color: var(--primary-light); margin-bottom: 14px; }
.stat-value {
    font-family: var(--font-head); font-size: 2.8rem;
    font-weight: 700; line-height: 1;
}
.stat-suffix { color: var(--primary-light); font-size: 1.6rem; }
.stat-label {
    font-size: 0.85rem; color: rgba(255,255,255,0.6);
    text-transform: uppercase; letter-spacing: 1.2px;
    margin-top: 10px; font-weight: 500;
}

/* ========================================
   NEWS
   ======================================== */
.news { padding: 100px 0; background: var(--bg-light); }

.news-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.news-card {
    background: var(--bg-white); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-sm);
    transition: all 0.4s var(--ease); border: 1px solid var(--border);
}
.news-card:hover {
    transform: translateY(-8px); box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.news-thumb {
    position: relative; height: 220px; overflow: hidden;
}
.news-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.news-card:hover .news-thumb img { transform: scale(1.08); }

.news-pin {
    position: absolute; top: 14px; left: 14px;
    background: var(--primary); color: #fff;
    padding: 4px 14px; border-radius: 50px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.5px;
    animation: pinBounce 2s ease-in-out infinite;
}
@keyframes pinBounce {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}
.news-pin i { margin-right: 4px; font-size: 0.65rem; }

.news-body { padding: 24px; }
.news-meta {
    display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px;
}
.news-meta span {
    font-size: 0.78rem; color: var(--text-muted);
    display: flex; align-items: center; gap: 5px;
}
.news-meta i { color: var(--primary); font-size: 0.72rem; }

.news-body h3 {
    font-size: 1.02rem; font-weight: 600; line-height: 1.5;
    color: var(--text-dark); margin-bottom: 16px;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}
.news-body h3 a { transition: color 0.3s; }
.news-body h3 a:hover { color: var(--primary); }

/* ========================================
   FINAL CTA
   ======================================== */
.cta-band { padding: 80px 0; background: var(--bg-white); }
.cta-box {
    background: linear-gradient(135deg, var(--bg-warm), #fff3e6);
    border-radius: var(--radius-xl); padding: 56px 52px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; border: 1px solid rgba(232,93,38,0.12);
    position: relative; overflow: hidden;
}
.cta-box::before {
    content: ''; position: absolute; top: -2px; left: -2px;
    right: -2px; bottom: -2px; border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--primary), transparent 40%, transparent 60%, var(--primary-light));
    opacity: 0; transition: opacity 0.5s var(--ease); z-index: -1;
}
.cta-box:hover::before { opacity: 0.3; }
.cta-left h2 {
    font-family: var(--font-head); font-size: 2.2rem;
    line-height: 1.3; color: var(--text-dark); margin-bottom: 10px;
}
.cta-left p { color: var(--text-light); font-size: 1.02rem; max-width: 480px; }
.cta-actions { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }

/* ========================================
   FOOTER
   ======================================== */
.footer {
    background: var(--bg-footer); color: rgba(255,255,255,0.72);
    padding: 80px 0 0;
}
.footer-grid {
    display: grid; grid-template-columns: 1.5fr 0.8fr 1fr 1fr;
    gap: 44px; padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-logo-img {
    width: 110px; border-radius: var(--radius-sm); margin-bottom: 18px;
}
.footer-tagline { font-size: 0.9rem; line-height: 1.7; margin-bottom: 22px; }
/* Social Media Brand Colors */
.footer-social-links { display: flex; gap: 10px; }
.footer-social-links a {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; transition: all 0.35s var(--ease);
    position: relative; overflow: hidden;
}
/* Instagram */
.footer-social-links a[aria-label="Instagram"] {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}
/* Facebook */
.footer-social-links a[aria-label="Facebook"] {
    background: #1877F2; color: #fff;
}
/* YouTube */
.footer-social-links a[aria-label="YouTube"] {
    background: #FF0000; color: #fff;
}
/* X / Twitter */
.footer-social-links a[aria-label*="Twitter"] {
    background: #000; color: #fff;
}
.footer-social-links a:hover {
    transform: translateY(-4px) scale(1.12);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Top Bar Social Colors */
.top-bar-right a[aria-label="Instagram"] { color: #E1306C; }
.top-bar-right a[aria-label="Facebook"] { color: #1877F2; }
.top-bar-right a[aria-label="YouTube"] { color: #FF0000; }
.top-bar-right a[aria-label*="Twitter"] { color: rgba(255,255,255,0.6); }
.top-bar-right a[aria-label="Instagram"]:hover { color: #f77737; }
.top-bar-right a[aria-label="Facebook"]:hover { color: #4293f5; }
.top-bar-right a[aria-label="YouTube"]:hover { color: #ff4444; }
.top-bar-right a[aria-label*="Twitter"]:hover { color: #fff; }

.footer-col h4 {
    color: #fff; font-size: 1.05rem; margin-bottom: 20px;
    font-weight: 600;
}
.footer-col h4 i { color: var(--primary-light); margin-right: 6px; }

.footer-links li { margin-bottom: 9px; }
.footer-links li a {
    font-size: 0.9rem; color: rgba(255,255,255,0.6);
    transition: all 0.3s var(--ease); display: flex; align-items: center; gap: 6px;
}
.footer-links li a::before {
    content: '›'; font-size: 1.1rem; color: var(--primary-light);
    transition: transform 0.3s;
}
.footer-links li a:hover { color: #fff; padding-left: 4px; }

.footer-address p, .footer-contact-info p {
    font-size: 0.9rem; margin-bottom: 5px; line-height: 1.7;
}
.footer-contact-info a { color: rgba(255,255,255,0.6); }
.footer-contact-info a:hover { color: var(--primary-light); }
.footer-cta-btn { margin-top: 22px; }

.footer-bottom {
    text-align: center; padding: 22px 0;
    font-size: 0.82rem; color: rgba(255,255,255,0.35);
}

/* ========================================
   FLOATING DONATE BUTTON
   ======================================== */
.floating-donate {
    display: none;
    position: fixed; bottom: 32px; right: 32px;
    z-index: 996; background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff; width: 56px; height: 56px; border-radius: 50%;
    font-weight: 700; font-size: 1.1rem;
    box-shadow: 0 6px 28px rgba(232,93,38,0.45);
    transition: all 0.4s var(--ease); align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.8);
}
.floating-donate span { display: none; }
.floating-donate.visible {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
    animation: floatDonateHeartbeat 2s ease-in-out infinite;
}
.floating-donate:hover {
    box-shadow: 0 10px 36px rgba(232,93,38,0.7);
    transform: translateY(-3px) scale(1.1);
    animation: none;
}
@keyframes floatDonateHeartbeat {
    0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 6px 28px rgba(232,93,38,0.45); }
    15% { transform: translateY(0) scale(1.15); box-shadow: 0 8px 34px rgba(232,93,38,0.6); }
    30% { transform: translateY(0) scale(1); }
    45% { transform: translateY(0) scale(1.1); box-shadow: 0 8px 34px rgba(232,93,38,0.55); }
    60% { transform: translateY(0) scale(1); }
}

/* ========================================
   BACK TO TOP
   ======================================== */
.back-to-top {
    position: fixed; bottom: 100px; right: 32px;
    width: 48px; height: 48px;
    background: var(--secondary); 
    color: #fff; border: none; border-radius: 50%;
    font-size: 1rem; cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(16px);
    transition: all 0.35s var(--ease);
    box-shadow: var(--shadow-md); z-index: 997;
}
.back-to-top.visible {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.back-to-top:hover {
    transform: translateY(-3px);
    background: var(--secondary-dark);
    box-shadow: var(--shadow-lg);
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */
[data-animate] {
    opacity: 0; transform: translateY(36px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-animate="fade-left"] { transform: translateX(-50px); }
[data-animate="fade-right"] { transform: translateX(50px); }
[data-animate="zoom-in"] { transform: scale(0.85); }
[data-animate="flip-up"] { transform: perspective(800px) rotateX(15deg) translateY(30px); }
[data-animate].animated { opacity: 1; transform: translateY(0) translateX(0) scale(1) perspective(800px) rotateX(0deg); }

/* ========================================
   RESPONSIVE
   ======================================== */

/* ---- 1200px ---- */
@media (max-width: 1200px) {
    .hero h1 { font-size: 3.5rem; }
    .section-title { font-size: 2.4rem; }
    .donate-text h2 { font-size: 2.4rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }

    /* Tablet nav adjustments */
    .nav-menu { gap: 0; }
    .nav-menu > li > a {
        padding: 8px 12px; font-size: 0.85rem;
    }
    .nav-donate-btn {
        padding: 9px 18px; font-size: 0.82rem; gap: 6px;
    }
    .navbar.scrolled .nav-donate-btn {
        padding: 7px 14px; font-size: 0.78rem;
    }
    .theme-toggle {
        width: 40px; height: 40px;
    }
    .theme-toggle i {
        font-size: 1rem;
    }
    .navbar.scrolled .theme-toggle {
        width: 34px; height: 34px;
    }
    .navbar.scrolled .theme-toggle i {
        font-size: 0.9rem;
    }
}

/* ---- 992px ---- */
@media (max-width: 992px) {
    /* Show priority nav links */
    .nav-priority-links { display: flex; }

    /* Mobile nav */
    .nav-menu {
        position: fixed; top: 0; right: 0; height: 100vh; width: 320px;
        background: rgba(255,255,255,0.98); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
        flex-direction: column;
        padding: 90px 24px 30px; box-shadow: -8px 0 40px rgba(0,0,0,0.12);
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); z-index: 1000;
        gap: 0; align-items: stretch;
        transform: translateX(100%);
        border-left: 1px solid var(--border);
        overflow-y: auto;
    }
    .nav-menu.active { transform: translateX(0); }
    .nav-menu > li {
        opacity: 0; transform: translateX(30px);
        transition: all 0.35s var(--ease);
    }
    .nav-menu.active > li {
        opacity: 1; transform: translateX(0);
    }
    .nav-menu.active > li:nth-child(1) { transition-delay: 0.08s; }
    .nav-menu.active > li:nth-child(2) { transition-delay: 0.13s; }
    .nav-menu.active > li:nth-child(3) { transition-delay: 0.18s; }
    .nav-menu.active > li:nth-child(4) { transition-delay: 0.23s; }
    .nav-menu.active > li:nth-child(5) { transition-delay: 0.28s; }
    .nav-menu.active > li:nth-child(6) { transition-delay: 0.33s; }
    .nav-menu.active > li:nth-child(7) { transition-delay: 0.38s; }
    .nav-menu > li > a {
        width: 100%; padding: 15px 16px; font-size: 1rem;
        border-bottom: 1px solid var(--border); border-radius: var(--radius-sm);
        display: flex; align-items: center; gap: 10px;
        transition: all 0.3s var(--ease);
    }
    .nav-menu > li > a:hover {
        background: var(--bg-warm); padding-left: 24px;
    }
    .nav-menu > li > a.active {
        color: var(--primary); background: rgba(232,93,38,0.06);
        border-left: 3px solid var(--primary);
    }
    .nav-menu > li > a::after { display: none; }

    /* Mobile dropdown */
    .dropdown-menu {
        position: static; transform: none; opacity: 1; visibility: visible;
        box-shadow: none; border: none; border-radius: 0;
        padding: 0; min-width: 0; pointer-events: auto;
        max-height: 0; overflow: hidden;
        transition: max-height 0.35s var(--ease);
        background: transparent;
    }
    .dropdown-menu::before { display: none; }
    .has-dropdown.open > .dropdown-menu {
        max-height: 400px;
    }
    .mega-dropdown { flex-direction: column; gap: 0; min-width: 0; padding: 0; }
    .dropdown-menu .dropdown-col { min-width: 0; }
    .dropdown-menu .dropdown-col a {
        padding: 11px 16px 11px 36px; font-size: 0.9rem;
        border-bottom: 1px solid rgba(0,0,0,0.04);
        white-space: normal; word-wrap: break-word;
        overflow: visible;
    }
    .dropdown-menu .dropdown-col a:hover {
        padding-left: 42px; background: var(--bg-warm);
    }
    .dropdown-arrow {
        margin-left: auto; font-size: 0.7rem;
    }

    .nav-donate-btn { display: none; }
    .theme-toggle { display: none; }
    .hamburger { display: flex; }
    .mobile-theme-toggle-item { display: list-item; }
    .nav-menu.active > li:nth-child(8) { transition-delay: 0.43s; }

    .hero h1 { font-size: 3rem; }

    .donate-inner { grid-template-columns: 1fr; text-align: center; }
    .donate-text { order: 1; }
    .donate-visual { order: 2; max-width: 500px; margin: 0 auto; }
    .donate-img-frame { display: none; }
    .donate-facts { align-items: center; }

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

    .cta-box {
        flex-direction: column; text-align: center; padding: 40px 28px;
    }
    .cta-left p { margin: 0 auto; }
    .cta-actions { justify-content: center; }

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

    .floating-donate { display: flex; }
    .back-to-top { bottom: 100px; }
}

/* ---- 1050px — Start reducing top-bar-center ---- */
@media (max-width: 1050px) {
    .top-bar-center { font-size: 0.72rem; }
    .top-bar-center span { max-width: 280px; }
}

/* ---- 900px — Hide address, keep phones left and social right ---- */
@media (max-width: 900px) {
    .top-bar-center { display: none; }
    /* space-between already set in base, phones go left, social goes right */
}

/* ---- 768px — Compact phones, keep social ---- */
@media (max-width: 768px) {
    .top-bar-left a { font-size: 0.75rem; }
    .top-bar-left i { margin-right: 3px; }
    .top-bar .sep { margin: 0 4px; }
    .top-bar-right { gap: 10px; }
    .top-bar-right a { font-size: 0.88rem; }
}

/* ---- 600px — Even more compact ---- */
@media (max-width: 600px) {
    .top-bar-left a { font-size: 0.72rem; }
    .top-bar-left i { margin-right: 2px; font-size: 0.7rem; }
    .top-bar .sep { margin: 0 3px; font-size: 0.65rem; }
    .top-bar-right { gap: 8px; }
    .top-bar-right a { font-size: 0.82rem; }
}

/* ---- 450px — Very small screens: compact but both phones + social ---- */
@media (max-width: 450px) {
    .top-bar-left a { font-size: 0.68rem; }
    .top-bar-left i { margin-right: 2px; font-size: 0.62rem; }
    .top-bar .sep { margin: 0 2px; font-size: 0.55rem; }
    .top-bar-right { gap: 6px; }
    .top-bar-right a { font-size: 0.78rem; }
}

/* ---- 350px — Extremely small: hide social only, keep both phones centered ---- */
@media (max-width: 350px) {
    .top-bar-right { display: none; }
    .top-bar-flex { justify-content: center; } /* Only 1 element (phones), center it */
    .top-bar-left { justify-content: center; }
    .top-bar-left a { font-size: 0.68rem; }
    .top-bar-left i { margin-right: 2px; font-size: 0.6rem; }
    .top-bar .sep { margin: 0 3px; }
}

/* ---- 768px ---- */
@media (max-width: 768px) {
    body { padding-top: 118px; } /* top-bar (50px) + navbar (68px) */

    .nav-flex { height: 68px; }
    .navbar.scrolled .nav-flex { height: 52px; }

    /* Hide 'Our Activities' text, keep icon only for compact display */
    .nav-priority-link span { display: none; }
    .nav-priority-link { padding: 7px 10px; }
    .nav-priority-link.nav-priority-donate span { display: inline; }

    /* At 768px, only show Donate priority link */
    .nav-priority-link:not(.nav-priority-donate) { display: none; }
    .hero { min-height: 540px; }
    .hero h1 { font-size: 2.3rem; }
    .hero-desc { font-size: 0.98rem; }
    .hero-dots { bottom: 40px; }
    .section-title { font-size: 2rem; }

    .services-grid { grid-template-columns: 1fr; }
    .partners-row { gap: 24px; }

    .donate-text h2 { font-size: 2rem; }
    .donate-section { padding: 70px 0; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .stat-card { padding: 28px 16px; }
    .stat-value { font-size: 2.2rem; }

    .news-grid { grid-template-columns: 1fr; }
    .cta-left h2 { font-size: 1.7rem; }

    .footer-grid { grid-template-columns: 1fr; gap: 30px; }

}

/* ---- 480px ---- */
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    /* Hide all priority links at very small screens */
    .nav-priority-links { display: none; }

    .hero h1 { font-size: 1.9rem; }
    .hero-btns { flex-direction: column; align-items: center; }
    .btn { padding: 12px 28px; font-size: 0.88rem; }
    .btn-lg { padding: 14px 32px; }
    .section-title { font-size: 1.7rem; }
    .services { padding: 70px 0; }
    .about { padding: 70px 0; }
    .about-card { padding: 32px 22px; }
    .milestones { padding: 70px 0; }
    .news { padding: 70px 0; }
    .cta-box { padding: 28px 18px; }
    .footer { padding: 50px 0 0; }
    .back-to-top { bottom: 96px; right: 18px; width: 44px; height: 44px; }
    .floating-donate { right: 18px; bottom: 32px; width: 52px; height: 52px; font-size: 1rem; }
}

/* ========================================
   DONATE PAGE
   ======================================== */

/* Hide floating donate on donate page */
.donate-page .floating-donate { display: none !important; }

/* ========================================
   DONATE PAGE — KEYFRAMES
   ======================================== */
@keyframes donateHeroZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
}
@keyframes donateParticleFloat {
    0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    50% { transform: translateY(-60px) translateX(20px) scale(1.3); }
}
@keyframes donateGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes donateFormGlow {
    0%, 100% { box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 0 rgba(232, 93, 38, 0); }
    50% { box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 40px 4px rgba(232, 93, 38, 0.08); }
}
@keyframes donateSubmitPulse {
    0%, 100% { box-shadow: 0 6px 24px var(--primary-glow), 0 0 0 0 rgba(232, 93, 38, 0.4); }
    50% { box-shadow: 0 6px 24px var(--primary-glow), 0 0 0 12px rgba(232, 93, 38, 0); }
}
@keyframes impactCardSlideIn {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes impactIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
@keyframes methodCardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes bankRowSlide {
    from { opacity: 0; transform: translateX(-15px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes donateBgParallax {
    0% { transform: translateY(0) scale(1.05); }
    100% { transform: translateY(-20px) scale(1.05); }
}
@keyframes shareIconPop {
    from { opacity: 0; transform: scale(0) rotate(-180deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes heroHeartFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-8px) scale(1.15); }
    50% { transform: translateY(-4px) scale(1.05); }
    75% { transform: translateY(-10px) scale(1.1); }
}
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* Donate Hero */
.donate-hero {
    position: relative;
    height: 50vh;
    min-height: 360px;
    max-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.donate-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    animation: donateHeroZoom 20s ease-in-out infinite alternate;
    will-change: transform;
}
@media (hover: none), (max-width: 992px) {
    .donate-hero-bg { background-attachment: scroll; }
}
.donate-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        140deg,
        rgba(17, 26, 38, 0.88) 0%,
        rgba(17, 26, 38, 0.65) 40%,
        rgba(232, 93, 38, 0.3) 100%
    );
}

/* Floating Particles in Hero */
.donate-hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.donate-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: donateParticleFloat linear infinite;
}
.donate-particle:nth-child(1) { left: 10%; bottom: 0; animation-duration: 8s; animation-delay: 0s; width: 4px; height: 4px; }
.donate-particle:nth-child(2) { left: 25%; bottom: 0; animation-duration: 10s; animation-delay: 1s; width: 6px; height: 6px; }
.donate-particle:nth-child(3) { left: 40%; bottom: 0; animation-duration: 7s; animation-delay: 2s; width: 3px; height: 3px; }
.donate-particle:nth-child(4) { left: 55%; bottom: 0; animation-duration: 9s; animation-delay: 0.5s; width: 5px; height: 5px; }
.donate-particle:nth-child(5) { left: 70%; bottom: 0; animation-duration: 11s; animation-delay: 3s; width: 4px; height: 4px; }
.donate-particle:nth-child(6) { left: 85%; bottom: 0; animation-duration: 8.5s; animation-delay: 1.5s; width: 7px; height: 7px; }
.donate-particle:nth-child(7) { left: 15%; bottom: 0; animation-duration: 12s; animation-delay: 4s; width: 3px; height: 3px; }
.donate-particle:nth-child(8) { left: 60%; bottom: 0; animation-duration: 9.5s; animation-delay: 2.5s; width: 5px; height: 5px; }

.donate-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 720px;
    padding: 0 24px;
}
.donate-hero-content .section-tag {
    opacity: 0;
    animation: fadeUp 0.8s 0.2s var(--ease) forwards;
}
.donate-hero-content .section-tag i {
    animation: heroHeartFloat 2s ease-in-out infinite;
    display: inline-block;
}
.donate-hero-content h1 {
    font-family: var(--font-head);
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    opacity: 0;
    animation: fadeUp 0.8s 0.4s var(--ease) forwards;
}
.donate-hero-content > p {
    font-size: 1.08rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    max-width: 560px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeUp 0.8s 0.6s var(--ease) forwards;
}

/* Hero scroll hint */
.donate-scroll-hint {
    display: none !important;
}
.donate-scroll-hint span {
    display: none;
}
.donate-scroll-hint .scroll-line {
    display: none;
}
.donate-scroll-hint .scroll-line::after {
    display: none;
}

/* Donate Main Section */
.donate-main {
    padding: 80px 0 100px;
    background: var(--bg-light);
    position: relative;
    overflow: hidden;
}

/* Decorative background shapes */
.donate-main::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 93, 38, 0.04) 0%, transparent 70%);
    pointer-events: none;
}
.donate-main::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(27, 58, 75, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.donate-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* Image Column */
.donate-image-col {
    position: sticky;
    top: 100px;
}
.donate-img-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: relative;
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.donate-img-wrapper:hover {
    transform: scale(1.02) rotate(-0.5deg);
    box-shadow: 0 30px 80px rgba(0,0,0,0.2);
}
.donate-img-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease);
}
.donate-img-wrapper:hover img {
    transform: scale(1.05);
}
.donate-img-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30%;
    background: linear-gradient(transparent, rgba(0,0,0,0.25));
    pointer-events: none;
}
/* Corner sparkle decorations on image */
.donate-img-wrapper::before {
    content: '';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    z-index: 2;
    animation: sparkle 3s ease-in-out infinite;
}

/* Impact Mini Cards */
.donate-impact-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}
.impact-mini-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: all 0.35s var(--ease);
    opacity: 0;
    transform: translateX(-30px);
}
.impact-mini-card.animated {
    animation: impactCardSlideIn 0.6s var(--ease) forwards;
}
.impact-mini-card:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}
.impact-mini-card.animated:hover {
    transform: translateX(6px);
}
.impact-mini-card i {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s var(--ease);
}
.impact-mini-card:hover i {
    animation: impactIconPulse 0.6s var(--ease);
}
.impact-mini-card div {
    display: flex;
    flex-direction: column;
}
.impact-mini-card strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
}
.impact-mini-card span {
    font-size: 0.82rem;
    color: var(--text-light);
}

/* Form Card */
.donate-form-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: 44px 40px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    animation: donateFormGlow 4s ease-in-out infinite;
}
/* Animated gradient top border */
.donate-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-gold), var(--primary-light), var(--primary));
    background-size: 300% 100%;
    animation: donateGradientShift 4s ease-in-out infinite;
}
.donate-form-card h2 {
    font-family: var(--font-head);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 18px;
}
.donate-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(232, 93, 38, 0.06);
    border: 1px solid rgba(232, 93, 38, 0.15);
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size: 0.85rem;
    color: var(--primary-dark);
    line-height: 1.5;
}
.donate-disclaimer i {
    color: var(--primary);
    margin-top: 2px;
    flex-shrink: 0;
}
.donate-impact-text {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

/* Form Groups */
.form-group {
    margin-bottom: 24px;
}
.form-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

/* Frequency Pills */
.freq-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.freq-pill {
    padding: 10px 22px;
    border: 2px solid var(--border);
    border-radius: 50px;
    background: var(--bg-white);
    color: var(--text-body);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    font-family: var(--font);
}
.freq-pill:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}
.freq-pill.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 16px var(--primary-glow);
    transform: scale(1.05);
}
.freq-pill:active {
    transform: scale(0.95);
}

/* Amount Grid */
.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.amount-btn {
    padding: 14px 8px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    color: var(--text-dark);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    font-family: var(--font);
    text-align: center;
}
.amount-btn:hover {
    border-color: var(--primary-light);
    color: var(--primary);
    background: rgba(232, 93, 38, 0.04);
}
.amount-btn.active {
    border-color: var(--primary);
    background: rgba(232, 93, 38, 0.08);
    color: var(--primary);
    box-shadow: 0 2px 12px rgba(232, 93, 38, 0.15);
    transform: scale(1.04);
}
.amount-btn:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}
/* Ripple effect on amount buttons */
.amount-btn {
    position: relative;
    overflow: hidden;
}
.amount-btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(232, 93, 38, 0.2);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
}
@keyframes rippleEffect {
    to { transform: scale(4); opacity: 0; }
}

/* Custom Amount */
.custom-amount-wrapper {
    align-items: center;
    gap: 0;
    margin-top: 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.3s var(--ease);
}
.custom-amount-wrapper:focus-within {
    border-color: var(--primary);
}
.currency-symbol {
    padding: 12px 14px;
    background: var(--bg-light);
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1rem;
    border-right: 1px solid var(--border);
}
.custom-amount-input {
    flex: 1;
    padding: 12px 14px;
    border: none;
    outline: none;
    font-size: 1rem;
    font-family: var(--font);
    color: var(--text-dark);
    background: var(--bg-white);
    width: 100%;
}
.custom-amount-input::placeholder {
    color: var(--text-muted);
}
/* Hide number input spinners */
.custom-amount-input::-webkit-outer-spin-button,
.custom-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.custom-amount-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Comment */
.comment-wrapper {
    position: relative;
}
.comment-wrapper textarea {
    width: 100%;
    min-height: 80px;
    padding: 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.92rem;
    color: var(--text-dark);
    background: var(--bg-white);
    resize: vertical;
    outline: none;
    transition: border-color 0.3s var(--ease);
    line-height: 1.6;
}
.comment-wrapper textarea:focus {
    border-color: var(--primary);
}
.comment-wrapper textarea::placeholder {
    color: var(--text-muted);
}
.char-count {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Donate Submit Button */
.donate-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s var(--ease);
    box-shadow: 0 6px 24px var(--primary-glow);
    margin-bottom: 20px;
    font-family: var(--font);
    text-align: center;
    animation: donateSubmitPulse 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.donate-submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}
.donate-submit-btn:hover::after {
    left: 100%;
}
.donate-submit-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 44px rgba(232, 93, 38, 0.5);
    color: #fff;
    animation: none;
}
.donate-submit-btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}
.donate-submit-btn i {
    animation: heartBeat 1.2s ease-in-out infinite;
}

/* Share */
.donate-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.donate-share a,
.donate-share button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.35s var(--ease);
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-body);
    cursor: pointer;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
}
.donate-share.animated a,
.donate-share.animated button {
    animation: shareIconPop 0.5s var(--ease) forwards;
}
.donate-share.animated a:nth-child(1) { animation-delay: 0s; }
.donate-share.animated a:nth-child(2) { animation-delay: 0.08s; }
.donate-share.animated a:nth-child(3) { animation-delay: 0.16s; }
.donate-share.animated button:nth-child(4) { animation-delay: 0.24s; }
.donate-share a:hover,
.donate-share button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.donate-share a[aria-label*="Facebook"]:hover {
    background: #1877F2;
    color: #fff;
    border-color: #1877F2;
}
.donate-share a[aria-label*="X"]:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}
.donate-share a[aria-label*="WhatsApp"]:hover {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}
.donate-share button:hover {
    background: var(--secondary);
    color: #fff;
    border-color: var(--secondary);
}

/* Payment Methods Section */
.payment-methods {
    padding: 100px 0;
    background: var(--bg-white);
    position: relative;
}
.methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.method-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: all 0.4s var(--ease);
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Hover gradient border effect */
.method-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-gold));
    transform: scaleX(0);
    transition: transform 0.4s var(--ease);
    transform-origin: left;
}
.method-card:hover::after {
    transform: scaleX(1);
}
.method-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    border-color: transparent;
}
.method-icon {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    margin: 0 auto 20px;
    transition: all 0.4s var(--ease);
    position: relative;
}
/* Icon glow on hover */
.method-card:hover .method-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 8px 30px var(--primary-glow);
}
.method-card h3 {
    font-family: var(--font-head);
    font-size: 1.35rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}
.method-card > p {
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Bank Details */
.bank-details {
    text-align: left;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    padding: 16px;
}
.bank-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    opacity: 0;
    transform: translateX(-15px);
}
.bank-row.animated {
    animation: bankRowSlide 0.4s var(--ease) forwards;
}
.bank-row:last-child {
    border-bottom: none;
}
.bank-row span {
    color: var(--text-muted);
}
.bank-row strong {
    color: var(--text-dark);
    text-align: right;
}

/* UPI QR Code Container */
.upi-qr-container {
    margin-top: 8px;
}
.upi-qr-wrapper {
    position: relative;
    display: inline-block;
    padding: 16px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(232, 93, 38, 0.1);
    margin-bottom: 16px;
    transition: all 0.4s var(--ease);
}
.upi-qr-wrapper:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 36px rgba(232, 93, 38, 0.15), 0 0 0 2px rgba(232, 93, 38, 0.2);
}
#upiQrCode {
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}
#upiQrCode canvas,
#upiQrCode svg {
    border-radius: 12px;
    display: block;
}
.upi-qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    padding: 4px;
}
.upi-qr-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* UPI ID Display */
.upi-id-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(232, 93, 38, 0.06);
    border: 1px solid rgba(232, 93, 38, 0.15);
    border-radius: 50px;
    font-size: 0.78rem;
    color: var(--text-body);
    margin-bottom: 12px;
    transition: all 0.3s var(--ease);
}
.upi-id-display:hover {
    background: rgba(232, 93, 38, 0.1);
    border-color: rgba(232, 93, 38, 0.3);
}
.upi-id-display i {
    color: #27ae60;
    font-size: 0.85rem;
}
.upi-id-display strong {
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.2px;
}

/* Scan text */
.upi-scan-text {
    font-size: 0.82rem;
    color: var(--text-light);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.upi-scan-text i {
    color: var(--primary);
    font-size: 0.95rem;
}

/* UPI App Badges */
.upi-apps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.upi-apps > span {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.upi-app-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.upi-app-badge {
    padding: 4px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-body);
    transition: all 0.3s var(--ease);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.upi-app-badge i { font-size: 0.85rem; }
.upi-app-badge:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-2px);
}
.upi-app-badge.upi-desktop-hint {
    background: var(--secondary);
    color: #fff;
    border-color: var(--secondary);
}

/* Dark mode UPI */
[data-theme="dark"] .upi-qr-wrapper {
    background: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(232, 93, 38, 0.15);
}
[data-theme="dark"] .upi-id-display {
    background: rgba(232, 93, 38, 0.1);
    border-color: rgba(232, 93, 38, 0.25);
}
[data-theme="dark"] .upi-app-badge {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text-body);
}

/* Confirm Note */
.donate-confirm-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 44px;
    padding: 24px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
    transition: all 0.4s var(--ease);
}
.donate-confirm-note:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--primary-light);
}
.donate-confirm-note > i {
    color: var(--primary);
    font-size: 1.3rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.donate-confirm-note p {
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.8;
}
.donate-confirm-note a {
    color: var(--primary);
    font-weight: 600;
}
.donate-confirm-note a:hover {
    text-decoration: underline;
}

/* Foreign CTA */
.foreign-cta {
    padding: 80px 0;
    background: var(--bg-light);
    position: relative;
    overflow: hidden;
}
.foreign-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 93, 38, 0.06) 0%, transparent 70%);
    transform: translateY(-50%);
    pointer-events: none;
}

/* ========================================
   DONATE PAGE — DARK MODE
   ======================================== */
[data-theme="dark"] .donate-form-card {
    background: var(--bg-white);
    border-color: var(--border);
}
[data-theme="dark"] .donate-disclaimer {
    background: rgba(232, 93, 38, 0.08);
    border-color: rgba(232, 93, 38, 0.2);
}
[data-theme="dark"] .freq-pill {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text-body);
}
[data-theme="dark"] .freq-pill:hover {
    border-color: var(--primary-light);
}
[data-theme="dark"] .amount-btn {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text-dark);
}
[data-theme="dark"] .amount-btn:hover {
    background: rgba(232, 93, 38, 0.08);
}
[data-theme="dark"] .amount-btn.active {
    background: rgba(232, 93, 38, 0.12);
}
[data-theme="dark"] .custom-amount-wrapper {
    border-color: var(--border);
}
[data-theme="dark"] .custom-amount-input {
    background: var(--bg-light);
    color: var(--text-dark);
}
[data-theme="dark"] .currency-symbol {
    background: var(--bg-white);
    color: var(--text-dark);
    border-right-color: var(--border);
}
[data-theme="dark"] .comment-wrapper textarea {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text-dark);
}
[data-theme="dark"] .impact-mini-card {
    background: var(--bg-white);
    border-color: var(--border);
}
[data-theme="dark"] .method-card {
    background: var(--bg-white);
    border-color: var(--border);
}
[data-theme="dark"] .bank-details {
    background: var(--bg-light);
}
[data-theme="dark"] .donate-confirm-note {
    background: var(--bg-white);
}
[data-theme="dark"] .donate-share a,
[data-theme="dark"] .donate-share button {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text-body);
}

/* Donate page hero dark mode - enhanced overlay */
[data-theme="dark"] .donate-hero-overlay {
    background: linear-gradient(
        140deg,
        rgba(10, 14, 20, 0.92) 0%,
        rgba(10, 14, 20, 0.75) 40%,
        rgba(232, 93, 38, 0.35) 100%
    );
}

[data-theme="dark"] .donate-particle {
    background: rgba(232, 93, 38, 0.4);
}

[data-theme="dark"] .donate-main {
    background: var(--bg-white);
}

[data-theme="dark"] .donate-impact-text {
    color: var(--text-body);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .impact-mini-card:hover {
    border-color: rgba(232, 93, 38, 0.4);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 20px rgba(232, 93, 38, 0.1);
}

[data-theme="dark"] .impact-mini-card strong {
    color: var(--text-dark);
}

[data-theme="dark"] .impact-mini-card span {
    color: var(--text-light);
}

[data-theme="dark"] .donate-form-card::before {
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-gold), var(--primary-light), var(--primary));
    opacity: 0.8;
}

[data-theme="dark"] .payment-methods {
    background: var(--bg-light);
}

[data-theme="dark"] .method-card:hover {
    border-color: rgba(232, 93, 38, 0.35);
    box-shadow: 0 6px 28px rgba(0,0,0,0.3);
}

[data-theme="dark"] .bank-details .detail-row span:first-child {
    color: var(--text-light);
}

[data-theme="dark"] .bank-details .detail-row span:last-child {
    color: var(--text-dark);
}

[data-theme="dark"] .copy-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .copy-btn:hover {
    color: var(--primary-light);
}

[data-theme="dark"] .donate-img-wrapper::after {
    background: linear-gradient(transparent, rgba(0,0,0,0.4));
}

[data-theme="dark"] .foreign-cta {
    background: var(--bg-warm);
}

[data-theme="dark"] .foreign-cta::before {
    background: radial-gradient(circle, rgba(232, 93, 38, 0.1) 0%, transparent 70%);
}

/* ========================================
   DONATE PAGE — RESPONSIVE
   ======================================== */
@media (max-width: 992px) {
    .donate-hero-content h1 { font-size: 2.6rem; }
    .donate-grid {
        grid-template-columns: 1fr;
    }
    .donate-image-col {
        position: static;
        max-width: 500px;
        margin: 0 auto;
    }
    .methods-grid {
        grid-template-columns: 1fr;
    }
    .foreign-cta .cta-box {
        flex-direction: column;
        text-align: center;
    }
    .foreign-cta .cta-left p { margin: 0 auto; }
    .foreign-cta .cta-actions { justify-content: center; }
}

@media (max-width: 768px) {
    .donate-hero {
        min-height: 300px;
    }
    .donate-hero-content h1 {
        font-size: 2rem;
    }
    .donate-main {
        padding: 50px 0 70px;
    }
    .donate-form-card {
        padding: 32px 24px;
    }
    .donate-form-card h2 {
        font-size: 1.8rem;
    }
    .payment-methods {
        padding: 70px 0;
    }
    .foreign-cta {
        padding: 50px 0;
    }
}

@media (max-width: 480px) {
    .donate-hero-content h1 {
        font-size: 1.7rem;
    }
    .donate-form-card {
        padding: 24px 18px;
    }
    .amount-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .freq-pills {
        gap: 6px;
    }
    .freq-pill {
        padding: 8px 16px;
        font-size: 0.82rem;
    }
    .donate-confirm-note {
        flex-direction: column;
        gap: 10px;
    }
}

/* ========================================
   COMING SOON TOAST
   ======================================== */
.toast-container {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 16px 22px 16px 18px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
    min-width: 320px;
    max-width: 440px;
    position: relative;
    overflow: hidden;
    transform: translateY(40px);
    opacity: 0;
    animation: toastSlideIn 0.5s var(--ease) forwards;
}

.toast.toast-exit {
    animation: toastSlideOut 0.4s var(--ease) forwards;
}

.toast-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 1.1rem;
    animation: toastIconPop 0.5s var(--ease) 0.2s both;
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 2px;
    line-height: 1.3;
}

.toast-message {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.4;
}

.toast-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s var(--ease), transform 0.2s var(--ease);
    border-radius: 50%;
}

.toast-close:hover {
    color: var(--primary);
    transform: scale(1.2);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 0 0 0 var(--radius-md);
    animation: toastProgress 4s linear forwards;
}

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

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

@keyframes toastIconPop {
    0% { transform: scale(0) rotate(-45deg); }
    60% { transform: scale(1.15) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* Dark mode toast */
[data-theme="dark"] .toast {
    background: #1e2130;
    border-color: #2a2d3a;
    border-left-color: var(--primary);
    box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
}

/* Responsive toast */
@media (max-width: 480px) {
    .toast-container {
        bottom: 90px;
        left: 12px;
        right: 12px;
        transform: none;
    }
    .toast {
        min-width: unset;
        max-width: 100%;
        padding: 14px 18px 14px 14px;
        gap: 12px;
    }
    .toast-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }
    .toast-title {
        font-size: 0.92rem;
    }
    .toast-message {
        font-size: 0.8rem;
    }
}

/* Coming soon link style */
a[data-coming-soon] {
    cursor: pointer;
}

/* ========================================
   GALLERY PAGE
   ======================================== */

/* --- Gallery Hero Slideshow --- */
.gallery-hero {
    position: relative;
    height: 60vh;
    min-height: 420px;
    max-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.gallery-hero-slides { position: absolute; inset: 0; z-index: 0; }
.gallery-hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transform: scale(1);
    transition: opacity 1.8s var(--ease), transform 8s ease-out;
    will-change: opacity, transform;
}
.gallery-hero-slide.active {
    opacity: 1; transform: scale(1.10);
}
.gallery-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        140deg,
        rgba(17, 26, 38, 0.85) 0%,
        rgba(17, 26, 38, 0.55) 40%,
        rgba(232, 93, 38, 0.25) 100%
    );
    z-index: 1;
}

/* Gallery Hero Particles */
.gallery-hero-particles {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none; overflow: hidden;
}
.gallery-particle {
    position: absolute; width: 6px; height: 6px;
    background: rgba(255, 255, 255, 0.3); border-radius: 50%;
    animation: donateParticleFloat linear infinite;
}
.gallery-particle:nth-child(1) { left: 12%; bottom: 0; animation-duration: 9s; animation-delay: 0s; width: 4px; height: 4px; }
.gallery-particle:nth-child(2) { left: 30%; bottom: 0; animation-duration: 11s; animation-delay: 1.2s; width: 6px; height: 6px; }
.gallery-particle:nth-child(3) { left: 45%; bottom: 0; animation-duration: 7.5s; animation-delay: 2.5s; width: 3px; height: 3px; }
.gallery-particle:nth-child(4) { left: 60%; bottom: 0; animation-duration: 10s; animation-delay: 0.8s; width: 5px; height: 5px; }
.gallery-particle:nth-child(5) { left: 75%; bottom: 0; animation-duration: 12s; animation-delay: 3.5s; width: 4px; height: 4px; }
.gallery-particle:nth-child(6) { left: 88%; bottom: 0; animation-duration: 8.5s; animation-delay: 1.8s; width: 7px; height: 7px; }

/* Gallery Hero Content */
.gallery-hero-content {
    position: relative; z-index: 2;
    text-align: center; color: #fff;
    max-width: 720px; padding: 0 24px;
}
.gallery-hero-content .section-tag {
    opacity: 0; animation: fadeUp 0.8s 0.2s var(--ease) forwards;
}
.gallery-hero-content .section-tag i {
    animation: heroHeartFloat 2s ease-in-out infinite;
    display: inline-block;
}
.gallery-hero-content h1 {
    font-family: var(--font-head);
    font-size: 3.4rem; font-weight: 800;
    line-height: 1.15; margin-bottom: 16px;
    opacity: 0; animation: fadeUp 0.8s 0.4s var(--ease) forwards;
}
.gallery-hero-content h1 .accent { color: var(--primary-light); }
.gallery-hero-content > p {
    font-size: 1.08rem; line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    max-width: 560px; margin: 0 auto 50px;
    opacity: 0; animation: fadeUp 0.8s 0.6s var(--ease) forwards;
}

/* Gallery Hero Dots */
.gallery-hero-dots {
    position: absolute; bottom: 30px; left: 50%;
    transform: translateX(-50%); z-index: 3;
    display: flex; gap: 10px;
}
.gallery-hero-dot {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    background: transparent; cursor: pointer;
    transition: all 0.35s var(--ease);
}
.gallery-hero-dot.active {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(232,93,38,0.5);
}
.gallery-hero-dot:hover { border-color: #fff; }

/* Gallery Scroll Hint */
.gallery-scroll-hint {
    display: none !important;
}
.gallery-scroll-hint .scroll-line {
    display: none;
}
.gallery-scroll-hint .scroll-line::after {
    display: none;
}

/* --- Gallery Section --- */
.gallery-section {
    padding: 100px 0;
    background: var(--bg-light);
}

/* --- Gallery Filter Buttons --- */
.gallery-filters {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 12px;
    margin-bottom: 48px;
}
.gallery-filter-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px; border-radius: 50px;
    border: 2px solid var(--border);
    background: var(--bg-white);
    color: var(--text-body); font-weight: 600;
    font-size: 0.88rem; cursor: pointer;
    font-family: var(--font);
    transition: all 0.35s var(--ease);
    letter-spacing: 0.3px;
}
.gallery-filter-btn i {
    font-size: 0.85rem;
    transition: transform 0.35s var(--ease);
}
.gallery-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.gallery-filter-btn:hover i { transform: scale(1.15); }
.gallery-filter-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 20px var(--primary-glow);
}
.gallery-filter-btn.active:hover { transform: translateY(-2px); }

/* --- Gallery Grid --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    grid-auto-rows: 260px;
}
.gallery-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.gallery-item.hidden {
    display: none;
}
.gallery-item-wide {
    grid-column: span 2;
}
.gallery-item-tall {
    grid-row: span 2;
}
.gallery-item-inner {
    position: relative;
    width: 100%; height: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.gallery-item-inner img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.gallery-item:hover .gallery-item-inner img {
    transform: scale(1.08);
    filter: brightness(0.75);
}

/* Gallery Item Overlay */
.gallery-item-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        180deg,
        transparent 40%,
        rgba(0,0,0,0.7) 100%
    );
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-info {
    color: #fff;
    transform: translateY(10px);
    transition: transform 0.4s var(--ease);
}
.gallery-item:hover .gallery-item-info { transform: translateY(0); }
.gallery-item-info h4 {
    font-family: var(--font-head);
    font-size: 1.1rem; font-weight: 700;
    margin-bottom: 4px; line-height: 1.3;
}
.gallery-item-info p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
}
.gallery-zoom-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff; font-size: 0.95rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.35s var(--ease);
    transform: scale(0) rotate(-90deg);
    flex-shrink: 0;
    align-self: flex-end;
}
.gallery-item:hover .gallery-zoom-btn {
    transform: scale(1) rotate(0deg);
}
.gallery-zoom-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.1) rotate(0deg);
}

/* --- Gallery Photo Count --- */
.gallery-count {
    text-align: center;
    margin-top: 48px;
    color: var(--text-light);
    font-size: 0.92rem;
}
.gallery-count i {
    color: var(--primary);
    margin-right: 6px;
}
.gallery-count strong {
    color: var(--text-dark);
    font-weight: 700;
}

/* --- Gallery CTA --- */
.gallery-cta {
    padding: 80px 0;
    background: var(--bg-white);
}

/* --- Lightbox --- */
.gallery-lightbox {
    display: none;
    position: fixed; inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.gallery-lightbox.active {
    display: flex;
}
.lightbox-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
    animation: lightboxFadeIn 0.3s var(--ease);
}
.lightbox-content {
    position: relative; z-index: 2;
    max-width: 90vw; max-height: 85vh;
    display: flex; flex-direction: column;
    align-items: center;
    animation: lightboxZoomIn 0.4s var(--ease);
}
.lightbox-content img {
    max-width: 100%; max-height: 78vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 80px rgba(0,0,0,0.5);
}
.lightbox-caption {
    text-align: center; color: #fff;
    margin-top: 16px; padding-bottom: 36px;
    opacity: 0; animation: fadeUp 0.5s 0.3s var(--ease) forwards;
}
.lightbox-caption h4 {
    font-family: var(--font-head);
    font-size: 1.2rem; font-weight: 700;
    margin-bottom: 4px;
}
.lightbox-caption p {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
}
.lightbox-close {
    position: absolute; top: 24px; right: 24px;
    z-index: 3; width: 48px; height: 48px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: #fff; font-size: 1.2rem;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: all 0.3s var(--ease);
}
.lightbox-close:hover {
    background: rgba(232,93,38,0.9);
    border-color: var(--primary);
    transform: rotate(90deg);
}
.lightbox-prev, .lightbox-next {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    z-index: 3; width: 52px; height: 52px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: #fff; font-size: 1.1rem;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: all 0.3s var(--ease);
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-prev:hover, .lightbox-next:hover {
    background: rgba(232,93,38,0.9);
    border-color: var(--primary);
    transform: translateY(-50%) scale(1.1);
}
.lightbox-counter {
    position: absolute; bottom: 24px; left: 50%;
    transform: translateX(-50%); z-index: 3;
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem; font-weight: 500;
    background: rgba(0,0,0,0.5);
    padding: 5px 16px; border-radius: 50px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes lightboxZoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes galleryItemReveal {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Gallery Dark Mode --- */
[data-theme="dark"] .gallery-section {
    background: var(--bg-light);
}
[data-theme="dark"] .gallery-filter-btn {
    background: var(--bg-white);
    border-color: var(--border);
    color: var(--text-body);
}
[data-theme="dark"] .gallery-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary-light);
}
[data-theme="dark"] .gallery-filter-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff; border-color: transparent;
}
[data-theme="dark"] .gallery-item-inner {
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .gallery-cta {
    background: var(--bg-white);
}

/* --- Gallery Responsive --- */
@media (max-width: 1200px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 240px;
    }
    .gallery-hero-content h1 { font-size: 2.8rem; }
}

@media (max-width: 992px) {
    .gallery-hero {
        height: 50vh; min-height: 360px;
    }
    .gallery-hero-content h1 { font-size: 2.4rem; }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
        gap: 14px;
    }
    .gallery-item-wide { grid-column: span 2; }
    .gallery-section { padding: 70px 0; }
    .gallery-filters { gap: 8px; }
    .gallery-filter-btn {
        padding: 8px 18px; font-size: 0.82rem;
    }
    .lightbox-prev { left: 12px; }
    .lightbox-next { right: 12px; }
    .lightbox-prev, .lightbox-next {
        width: 44px; height: 44px; font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .gallery-hero { height: 45vh; min-height: 320px; }
    .gallery-hero-content h1 { font-size: 2rem; }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
        gap: 10px;
    }
    .gallery-item-wide { grid-column: span 1; }
    .gallery-item-tall { grid-row: span 2; }
    .gallery-hero-dots { bottom: 24px; gap: 8px; }
    .gallery-hero-dot { width: 10px; height: 10px; }
    .gallery-item-info h4 { font-size: 0.95rem; }
    .gallery-item-info p { font-size: 0.75rem; }
    .gallery-zoom-btn { width: 36px; height: 36px; font-size: 0.85rem; }
    .gallery-item-overlay { padding: 14px; }
    .gallery-cta { padding: 60px 0; }
}

@media (max-width: 480px) {
    .gallery-hero { height: 40vh; min-height: 280px; }
    .gallery-hero-content h1 { font-size: 1.7rem; }
    .gallery-hero-content > p { font-size: 0.92rem; }
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 150px;
        gap: 8px;
    }
    .gallery-item-tall { grid-row: span 2; }
    .gallery-filters {
        gap: 6px; margin-bottom: 32px;
    }
    .gallery-filter-btn {
        padding: 7px 14px; font-size: 0.78rem;
    }
    .gallery-filter-btn i { display: none; }
    .lightbox-close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 1rem; }
    .lightbox-prev, .lightbox-next { width: 38px; height: 38px; font-size: 0.9rem; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-content img { border-radius: var(--radius-sm); }
}


/* =============================================
   TRUSTEES PAGE
   ============================================= */

/* Intro Section */
.trustees-intro {
    padding: 80px 0 50px;
    background: var(--bg-warm);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.trustees-intro::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 93, 38, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.trustees-intro::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.trustees-intro-content {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.trustees-intro-content .section-tag {
    margin-bottom: 18px;
}

/* Disable shimmer completely for trustees page */
.trustees-page .section-tag::after {
    display: none !important;
    animation: none !important;
}

.trustees-page .section-tag {
    animation: none;
    box-shadow: 0 2px 12px rgba(232, 93, 38, 0.2);
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.trustees-page .section-tag:hover {
    box-shadow: 0 4px 18px rgba(232, 93, 38, 0.35);
    transform: translateY(-2px);
}

/* Icon gentle bounce animation */
.trustees-page .section-tag i {
    display: inline-block;
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.trustees-intro-content h1 {
    font-family: var(--font-head);
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 18px;
    line-height: 1.15;
}

.trustees-intro-content h1 .accent {
    color: var(--primary);
}

.trustees-intro-content > p {
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 600px;
    margin: 0 auto;
}

/* Trustees Section */
.trustees-section {
    padding: 80px 0 100px;
    background: var(--bg-light);
}

/* Grid */
.trustees-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* Card */
.trustee-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    position: relative;
}

.trustee-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}

.trustee-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.trustee-card:hover::after {
    transform: scaleX(1);
}

/* Card Image */
.trustee-card-img {
    position: relative;
    width: 100%;
    height: 440px;
    overflow: hidden;
}

.trustee-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 2.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s var(--ease);
    will-change: transform;
}

.trustee-card:hover .trustee-card-img img {
    transform: scale(1.03);
}

.trustee-card-img::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.7), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Badge */
.trustee-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(232, 93, 38, 0.3);
}

.trustee-badge i {
    margin-right: 4px;
    font-size: 0.65rem;
}

.trustee-badge-highlight {
    background: linear-gradient(135deg, var(--primary), var(--accent-gold));
    box-shadow: 0 2px 12px rgba(245, 166, 35, 0.35);
}

/* Card Body */
.trustee-card-body {
    padding: 22px 26px 28px;
}

.trustee-card-body h3 {
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
    line-height: 1.25;
}

.trustee-role {
    display: inline-block;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.trustee-card-body p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.72;
}

/* CTA */
.trustees-cta {
    padding: 80px 0;
    background: var(--bg-warm);
}

/* Dark Mode */
[data-theme="dark"] .trustee-card {
    background: var(--bg-white);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .trustee-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .trustee-card-img::before {
    background: linear-gradient(to top, rgba(19, 22, 29, 0.7), transparent);
}

[data-theme="dark"] .trustee-badge {
    box-shadow: 0 2px 10px rgba(232, 93, 38, 0.2);
}

[data-theme="dark"] .trustee-badge-highlight {
    box-shadow: 0 2px 12px rgba(245, 166, 35, 0.2);
}

/* Dark mode for trustees section tag - same as light mode */
[data-theme="dark"] .trustees-page .section-tag {
    background: linear-gradient(135deg, rgba(232, 93, 38, 0.15), rgba(245, 166, 35, 0.1)) !important;
    color: var(--primary-light);
    animation: none;
    box-shadow: 0 2px 12px rgba(232, 93, 38, 0.25);
}

[data-theme="dark"] .trustees-page .section-tag:hover {
    box-shadow: 0 4px 18px rgba(232, 93, 38, 0.45);
}

/* Responsive: Trustees */
@media (max-width: 992px) {
    .trustees-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .trustee-card-img {
        height: 380px;
    }
    .trustees-intro-content h1 {
        font-size: 2.4rem;
    }
    .trustees-intro {
        padding: 70px 0 44px;
    }
    .trustees-section {
        padding: 70px 0 80px;
    }
}

@media (max-width: 768px) {
    .trustees-intro {
        padding: 60px 0 38px;
    }
    .trustees-section {
        padding: 60px 0 70px;
    }
    .trustees-intro-content h1 {
        font-size: 2rem;
    }
    .trustees-intro-content > p {
        font-size: 1rem;
    }
    .trustee-card-img {
        height: 340px;
    }
    .trustee-card-img img {
        object-position: center top;
    }
    .trustees-cta {
        padding: 60px 0;
    }
    .trustees-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .trustee-card-body {
        padding: 18px 20px 22px;
    }
    .trustee-card-body h3 {
        font-size: 1.15rem;
    }
    .trustee-card-body p {
        font-size: 0.85rem;
        line-height: 1.65;
    }
}

@media (max-width: 576px) {
    .trustees-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .trustee-card-img {
        height: 400px;
    }
    .trustee-card-img img {
        object-position: center top;
    }
    .trustee-card-body {
        padding: 22px 24px 26px;
    }
    .trustee-card-body h3 {
        font-size: 1.3rem;
    }
    .trustee-card-body p {
        font-size: 0.9rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .trustees-intro-content h1 {
        font-size: 1.7rem;
    }
    .trustees-intro-content > p {
        font-size: 0.95rem;
    }
    .trustee-card-img {
        height: 380px;
    }
}

/* ========================================
   CONTACT PAGE STYLES
   ======================================== */

/* Contact Hero */
.contact-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -128px;
    padding-top: 128px;
}

.contact-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

@media (hover: none), (max-width: 992px) {
    .contact-hero-bg { background-attachment: scroll; }
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(27, 58, 75, 0.92), rgba(232, 93, 38, 0.85));
}

.contact-hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.contact-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: donateParticleFloat 8s infinite ease-in-out;
}

.contact-particle:nth-child(1) { left: 10%; bottom: 0; animation-duration: 8s; animation-delay: 0s; }
.contact-particle:nth-child(2) { left: 25%; bottom: 0; animation-duration: 10s; animation-delay: 1s; }
.contact-particle:nth-child(3) { left: 40%; bottom: 0; animation-duration: 7s; animation-delay: 2s; }
.contact-particle:nth-child(4) { left: 55%; bottom: 0; animation-duration: 9s; animation-delay: 0.5s; }
.contact-particle:nth-child(5) { left: 70%; bottom: 0; animation-duration: 11s; animation-delay: 3s; }
.contact-particle:nth-child(6) { left: 85%; bottom: 0; animation-duration: 8.5s; animation-delay: 1.5s; }

.contact-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    padding: 80px 0;
}

.contact-hero-content h1 {
    font-family: var(--font-head);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 20px 0;
}

.contact-hero-content h1 .accent {
    color: var(--primary-light);
}

.contact-hero-content > p {
    font-size: 1.15rem;
    opacity: 0.92;
    max-width: 600px;
    margin: 0 auto;
}

/* Contact Offices */
.contact-offices {
    padding: 100px 0;
    background: var(--bg-light);
}

.contact-offices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.contact-office-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 40px 30px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    border: 1px solid var(--border);
}

.contact-office-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.contact-office-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.8rem;
    color: #fff;
}

.contact-office-card h3 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.contact-office-details {
    color: var(--text-body);
    margin-bottom: 24px;
}

.contact-office-details p {
    margin: 4px 0;
    font-size: 0.95rem;
}

.contact-office-org {
    font-weight: 600;
    color: var(--text-dark);
}

.contact-office-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-office-links a {
    color: var(--primary);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.contact-office-links a:hover {
    color: var(--primary-dark);
}

.contact-office-links a i {
    margin-right: 8px;
}

/* Contact Form Section */
.contact-form-section {
    padding: 100px 0;
    background: var(--bg-white);
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact-form-card {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: 50px 40px;
    border: 1px solid var(--border);
}

.contact-form-card h2 {
    font-family: var(--font-head);
    font-size: 2rem;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.contact-form-desc {
    color: var(--text-light);
    margin-bottom: 30px;
}

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

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

.contact-form .form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.contact-form .form-label .required {
    color: var(--primary);
}

.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.input-icon-wrapper.textarea-wrapper i {
    top: 20px;
    transform: none;
}

.input-icon-wrapper input,
.input-icon-wrapper textarea {
    width: 100%;
    padding: 14px 16px 14px 46px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
    background: var(--bg-white);
}

.input-icon-wrapper input:focus,
.input-icon-wrapper textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-submit-btn {
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.contact-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-glow);
}

.contact-submit-btn i {
    margin-left: 8px;
}

/* Form Error States */
.input-icon-wrapper input.error,
.input-icon-wrapper textarea.error {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.05);
}

.input-icon-wrapper input.error:focus,
.input-icon-wrapper textarea.error:focus {
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.15);
}

/* Submit Button States */
.contact-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.contact-submit-btn.shake {
    animation: formShake 0.5s ease;
}

@keyframes formShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Toast Error Variant */
.toast.toast-error .toast-icon {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.toast.toast-error .toast-progress {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

/* Toast Success Variant */
.toast.toast-success .toast-icon {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.toast.toast-success .toast-progress {
    background: linear-gradient(90deg, #27ae60, #2ecc71);
}

/* Contact Info Column */
.contact-info-col {
    padding: 20px 0;
}

.contact-info-card {
    margin-bottom: 30px;
    padding: 30px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
}

.contact-info-card h3 {
    font-family: var(--font-head);
    font-size: 1.3rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dark);
}

.contact-info-card h3 i {
    color: var(--primary);
}

.contact-info-card p,
.contact-info-card a {
    color: var(--text-body);
    font-size: 0.98rem;
    display: block;
    margin: 6px 0;
}

.contact-info-card a:hover {
    color: var(--primary);
}

.contact-social-links {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.contact-social-links a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-white);
    border: 2px solid var(--border);
    border-radius: 50%;
    color: var(--text-body);
    transition: all 0.3s;
}

.contact-social-links a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Contact Social Card */
.contact-social-card {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: 30px;
    text-align: center;
    border: 1px solid var(--border);
    margin-bottom: 24px;
}

.contact-social-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
}

.contact-social-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.contact-social-card h3 {
    font-family: var(--font-head);
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.contact-social-card .contact-social-links {
    justify-content: center;
    margin-top: 0;
}

/* Contact Quick Info */
.contact-quick-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.contact-quick-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.contact-quick-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.contact-quick-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
}

.contact-quick-item h4 {
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.contact-quick-item p {
    margin: 0;
    color: var(--text-body);
    font-size: 0.92rem;
    line-height: 1.6;
}

.contact-quick-item a {
    color: var(--text-body);
    transition: color 0.3s;
}

.contact-quick-item a:hover {
    color: var(--primary);
}

/* Contact Map Card */
.contact-map-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}

.contact-map-card iframe {
    display: block;
}

/* Contact Success Message */
.contact-success-msg {
    display: none;
    text-align: center;
    padding: 40px 20px;
}

.contact-success-msg.show {
    display: block;
}

.contact-success-msg i {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 20px;
    animation: successPop 0.5s ease;
}

@keyframes successPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.contact-success-msg h3 {
    font-family: var(--font-head);
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.contact-success-msg p {
    color: var(--text-body);
    font-size: 1rem;
}

/* Contact CTA Section */
.contact-cta {
    padding: 100px 0;
    background: var(--bg-light);
}

/* Contact Map */
.contact-map-section {
    padding: 0 0 100px;
}

.contact-map-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    height: 450px;
}

.contact-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Contact Page Dark Mode */
[data-theme="dark"] .contact-office-card,
[data-theme="dark"] .contact-form-card,
[data-theme="dark"] .contact-social-card,
[data-theme="dark"] .contact-quick-item,
[data-theme="dark"] .contact-map-card {
    background: var(--bg-light);
}

[data-theme="dark"] .input-icon-wrapper input,
[data-theme="dark"] .input-icon-wrapper textarea {
    background: var(--bg-light);
    color: var(--text-dark);
}

[data-theme="dark"] .input-icon-wrapper input::placeholder,
[data-theme="dark"] .input-icon-wrapper textarea::placeholder {
    color: var(--text-muted);
}

@media (max-width: 992px) {
    .contact-hero-content h1 { font-size: 2.5rem; }
    .contact-offices-grid { grid-template-columns: 1fr; }
    .contact-form-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
    .contact-hero { min-height: 50vh; }
    .contact-hero-content h1 { font-size: 2rem; }
    .contact-hero-content > p { font-size: 1rem; }
    .contact-form-card { padding: 30px 24px; }
    .contact-form .form-row { grid-template-columns: 1fr; }
    .contact-quick-item { padding: 16px; }
    .contact-quick-icon { width: 44px; height: 44px; min-width: 44px; font-size: 1rem; }
}

/* ========================================
   SHOP PAGE STYLES
   ======================================== */

/* Shop Hero */
.shop-hero {
    position: relative;
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -128px;
    padding-top: 128px;
}

.shop-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.shop-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(27, 58, 75, 0.9), rgba(232, 93, 38, 0.8));
}

.shop-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    padding: 60px 0;
}

.shop-hero-content h1 {
    font-family: var(--font-head);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 16px 0;
}

.shop-hero-content h1 .accent {
    color: var(--primary-light);
}

.shop-hero-content > p {
    font-size: 1.1rem;
    opacity: 0.92;
    max-width: 550px;
    margin: 0 auto;
}

/* Shop Toolbar */
.shop-toolbar {
    padding: 24px 0;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 78px;
    z-index: 90;
}

.shop-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.shop-search-box {
    display: flex;
    align-items: center;
    background: var(--bg-light);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    flex: 1;
    max-width: 400px;
    transition: border-color 0.3s;
}

.shop-search-box:focus-within {
    border-color: var(--primary);
}

.shop-search-box i {
    color: var(--text-muted);
    margin-right: 12px;
}

.shop-search-box input {
    border: none;
    background: transparent;
    flex: 1;
    font-size: 0.95rem;
    outline: none;
}

.shop-search-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
}

.shop-toolbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.shop-result-count {
    color: var(--text-light);
    font-size: 0.9rem;
}

.shop-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-sort label {
    color: var(--text-muted);
}

.shop-sort select {
    padding: 8px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--bg-white);
    cursor: pointer;
}

/* Shop Main Layout */
.shop-main {
    padding: 40px 0 100px;
    background: var(--bg-light);
}

.shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
}

/* Shop Sidebar */
.shop-sidebar {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 160px;
    border: 1px solid var(--border);
}

.shop-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.shop-sidebar-header h3 {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-clear-filters {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.shop-filter-group {
    margin-bottom: 24px;
}

.shop-filter-title {
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.shop-filter-title i {
    transition: transform 0.3s var(--ease);
}

.shop-filter-body {
    display: none;
}

.shop-filter-body.open {
    display: block;
}

.shop-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 0.9rem;
}

.shop-checkbox input {
    display: none;
}

.shop-check-mark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.shop-checkbox input:checked + .shop-check-mark {
    background: var(--primary);
    border-color: var(--primary);
}

.shop-checkbox input:checked + .shop-check-mark::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
}

/* Shop Products Grid */
.shop-products-area {
    flex: 1;
}

.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.shop-product-card {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--border);
}

.shop-product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.shop-product-img {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.shop-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.shop-product-card:hover .shop-product-img img {
    transform: scale(1.08);
}

.shop-product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--primary);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.shop-product-body {
    padding: 24px;
}

.shop-product-body h3 {
    font-family: var(--font-head);
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.shop-product-body p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.shop-product-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}

.shop-product-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.shop-product-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-glow);
}

@media (max-width: 992px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar { position: static; }
    .shop-toolbar { position: static; }
}

@media (max-width: 768px) {
    .shop-hero-content h1 { font-size: 2rem; }
    .shop-toolbar-inner { flex-direction: column; align-items: stretch; }
    .shop-search-box { max-width: none; }
}

/* Shop Grid (actual product grid) */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    flex: 1;
}

/* Product Card Link */
.shop-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Product Image Wrapper */
.shop-product-img-wrap {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: var(--bg-light);
}

.shop-product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.shop-product-card:hover .shop-product-img-wrap img {
    transform: scale(1.08);
}

/* Product Actions (Quick View, Wishlist) */
.shop-product-actions {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    gap: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s var(--ease);
}

.shop-product-card:hover .shop-product-actions {
    opacity: 1;
    transform: translateY(0);
}

.shop-quick-view,
.shop-wishlist {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--bg-white);
    color: var(--text-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s var(--ease);
}

.shop-quick-view:hover,
.shop-wishlist:hover {
    background: var(--primary);
    color: #fff;
    transform: scale(1.1);
}

.shop-wishlist.active {
    background: #e74c3c;
    color: #fff;
}

.shop-wishlist.active i {
    font-weight: 900;
}

/* Product Badge - Extended */
.shop-product-badge.new {
    background: #28a745;
}

.shop-product-badge.sale {
    background: #e74c3c;
}

/* Product Info */
.shop-product-info {
    padding: 20px;
}

.shop-product-info .shop-product-category {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.shop-product-info h3 {
    font-family: var(--font-head);
    font-size: 1.15rem;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.shop-product-desc {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.55;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shop-product-info .shop-product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.shop-product-stock {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.shop-product-stock.in-stock {
    color: #28a745;
}

.shop-product-stock.out-of-stock {
    color: #e74c3c;
}

/* Add to Cart Button */
.shop-add-to-cart {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 20px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s var(--ease);
}

.shop-add-to-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-glow);
}

.shop-add-to-cart i {
    margin-right: 8px;
}

/* Price Range Slider */
.shop-price-range {
    padding: 8px 0;
}

.shop-price-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.shop-price-field {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-light);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

.shop-price-field span {
    color: var(--text-muted);
    margin-right: 4px;
}

.shop-price-field input {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 0.9rem;
    outline: none;
}

.shop-price-sep {
    color: var(--text-muted);
}

.shop-range-slider {
    position: relative;
    height: 6px;
    margin-top: 20px;
}

.shop-range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    height: 6px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.shop-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.shop-range-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
}

.shop-range-track {
    position: absolute;
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    top: 0;
}

.shop-range-fill {
    position: absolute;
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
}

/* Mobile Filter Button */
.shop-mobile-filter-btn {
    display: none;
    width: 100%;
    padding: 14px 20px;
    background: var(--bg-white);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.3s var(--ease);
}

.shop-mobile-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.shop-mobile-filter-btn i {
    margin-right: 8px;
}

/* No Results */
.shop-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.shop-no-results i {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.shop-no-results h3 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.shop-no-results p {
    color: var(--text-light);
    margin-bottom: 24px;
}

/* Shop CTA */
.shop-cta {
    padding: 100px 0;
    background: var(--bg-white);
}

.shop-cta-box {
    background: linear-gradient(135deg, var(--secondary), #0d1f2b);
    border-radius: var(--radius-xl);
    padding: 60px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.shop-cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(232,93,38,0.15) 0%, transparent 70%);
}

.shop-cta-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.8rem;
}

.shop-cta-box h2 {
    font-family: var(--font-head);
    font-size: 2rem;
    margin-bottom: 16px;
}

.shop-cta-box p {
    font-size: 1.05rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.7;
}

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

/* Quick View Modal */
.shop-quickview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease);
}

.shop-quickview-modal.active {
    opacity: 1;
    visibility: visible;
}

.shop-quickview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.shop-quickview-content {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s var(--ease);
}

.shop-quickview-modal.active .shop-quickview-content {
    transform: scale(1) translateY(0);
}

.shop-quickview-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--text-dark);
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
}

.shop-quickview-close:hover {
    background: var(--primary);
    color: #fff;
}

.shop-quickview-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.shop-quickview-img {
    height: 450px;
    background: var(--bg-light);
}

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

.shop-quickview-details {
    padding: 40px;
    overflow-y: auto;
    max-height: 450px;
}

.shop-quickview-details .shop-product-category {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 12px;
}

.shop-quickview-details h2 {
    font-family: var(--font-head);
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.shop-quickview-details .shop-product-price {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
}

.shop-quickview-details p {
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: 30px;
}

.shop-quickview-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.shop-qv-cart {
    flex: 1;
}

/* Shop Dark Mode */
[data-theme="dark"] .shop-toolbar {
    background: var(--bg-white);
}

[data-theme="dark"] .shop-sidebar,
[data-theme="dark"] .shop-product-card,
[data-theme="dark"] .shop-no-results {
    background: var(--bg-light);
}

[data-theme="dark"] .shop-search-box,
[data-theme="dark"] .shop-sort select,
[data-theme="dark"] .shop-price-field {
    background: var(--bg-light);
    color: var(--text-dark);
}

[data-theme="dark"] .shop-quick-view,
[data-theme="dark"] .shop-wishlist {
    background: var(--bg-white);
    color: var(--text-dark);
}

[data-theme="dark"] .shop-quickview-content {
    background: var(--bg-light);
}

[data-theme="dark"] .shop-mobile-filter-btn {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* Shop Page Responsive */
@media (max-width: 992px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar { 
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        height: 100vh;
        z-index: 1000;
        border-radius: 0;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s var(--ease);
    }
    .shop-sidebar.active {
        display: block;
        transform: translateX(0);
    }
    .shop-mobile-filter-btn { display: flex; align-items: center; justify-content: center; }
    .shop-toolbar { position: static; }
    .shop-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

@media (max-width: 768px) {
    .shop-quickview-body { grid-template-columns: 1fr; }
    .shop-quickview-img { height: 280px; }
    .shop-quickview-details { max-height: none; padding: 24px; }
    .shop-cta-box { padding: 40px 24px; }
    .shop-cta-box h2 { font-size: 1.6rem; }
}

@media (max-width: 480px) {
    .shop-grid { grid-template-columns: 1fr; }
    .shop-product-img-wrap { height: 240px; }
}

/* ========================================
   PROJECT PAGE STYLES
   ======================================== */

/* Project Hero */
.project-hero {
    position: relative;
    min-height: 55vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: -128px;
    padding-top: 128px;
}

.project-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.project-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(27, 58, 75, 0.88), rgba(232, 93, 38, 0.75));
}

.project-hero-content {
    position: relative;
    z-index: 1;
    color: #fff;
    padding: 80px 0;
    max-width: 800px;
}

.project-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    opacity: 0.9;
}

.project-breadcrumb a {
    color: #fff;
    transition: opacity 0.3s;
}

.project-breadcrumb a:hover {
    opacity: 0.7;
}

.project-breadcrumb .separator {
    font-size: 0.7rem;
    opacity: 0.6;
}

.project-breadcrumb .current {
    color: var(--primary-light);
}

.project-hero-content h1 {
    font-family: var(--font-head);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.project-hero-content > p {
    font-size: 1.15rem;
    opacity: 0.92;
    line-height: 1.7;
}

/* Project Content */
.project-content {
    padding: 80px 0;
    background: var(--bg-white);
}

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

.project-text {
    margin-bottom: 50px;
}

.project-text h2 {
    font-family: var(--font-head);
    font-size: 2rem;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.project-text p {
    color: var(--text-body);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 16px;
}

.project-text strong {
    color: var(--primary);
}

.project-featured-img {
    margin: 50px 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.project-featured-img img {
    width: 100%;
    height: auto;
}

/* Project Highlights */
.project-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 60px 0;
}

.project-highlight-card {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 30px 24px;
    text-align: center;
    border: 1px solid var(--border);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

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

.project-highlight-card i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 16px;
}

.project-highlight-card h4 {
    font-family: var(--font-head);
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.project-highlight-card p {
    color: var(--text-light);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Project Gallery */
.project-gallery {
    margin: 60px 0;
}

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

.project-gallery-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 220px;
}

.project-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.project-gallery-item:hover img {
    transform: scale(1.1);
}

/* Project Navigation */
.project-nav {
    padding: 60px 0;
    background: var(--bg-light);
    border-top: 1px solid var(--border);
}

.project-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.project-nav-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--border);
    min-width: 200px;
}

.project-nav-link:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.project-nav-link.prev {
    flex-direction: row;
}

.project-nav-link.next {
    flex-direction: row-reverse;
    text-align: right;
}

.project-nav-link i {
    font-size: 1.2rem;
    color: var(--primary);
}

.project-nav-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.project-nav-title {
    font-weight: 600;
    color: var(--text-dark);
}

.project-nav-back {
    padding: 14px 24px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background 0.3s;
}

.project-nav-back:hover {
    background: var(--primary-dark);
}

.project-nav-back i {
    margin-right: 8px;
}

@media (max-width: 992px) {
    .project-highlights { grid-template-columns: 1fr; }
    .project-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .project-nav-inner { flex-direction: column; }
    .project-nav-link { width: 100%; justify-content: center; }
}

@media (max-width: 768px) {
    .project-hero { min-height: 45vh; }
    .project-hero-content h1 { font-size: 2.2rem; }
    .project-hero-content > p { font-size: 1rem; }
    .project-text h2 { font-size: 1.6rem; }
    .project-gallery-grid { grid-template-columns: 1fr; }
}

/* Project CTA Section */
.project-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--secondary), #0d1f2b);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.project-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 60%;
    height: 150%;
    background: radial-gradient(circle, rgba(232,93,38,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.project-cta h2 {
    font-family: var(--font-head);
    font-size: 2.2rem;
    margin-bottom: 16px;
    position: relative;
}

.project-cta p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.7;
    position: relative;
}

.project-cta .btn {
    position: relative;
}

/* Project Page Dark Mode */
[data-theme="dark"] .project-content {
    background: var(--bg-white);
}

[data-theme="dark"] .project-highlight-card {
    background: var(--bg-light);
}

[data-theme="dark"] .project-nav {
    background: var(--bg-light);
}

[data-theme="dark"] .project-nav-link {
    background: var(--bg-white);
}

@media (max-width: 768px) {
    .project-cta { padding: 70px 0; }
    .project-cta h2 { font-size: 1.8rem; }
    .project-cta p { font-size: 1rem; }
}

/* ========================================
   SCHOOL LIST PAGE STYLES
   ======================================== */

/* School List Intro */
.school-list-intro {
    padding: 50px 0 60px;
    background: linear-gradient(135deg, var(--bg-warm), var(--bg-light));
}

.school-list-intro-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.school-list-intro-content h1 {
    font-family: var(--font-head);
    font-size: 2.8rem;
    color: var(--text-dark);
    margin: 16px 0;
}

.school-list-intro-content h1 .accent {
    color: var(--primary);
}

.school-list-intro-content > p {
    color: var(--text-body);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* School Stats Strip */
.school-stats-strip {
    padding: 50px 0;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
}

.school-stats-row {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.school-stat-item {
    text-align: center;
    color: #fff;
}

.school-stat-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.5rem;
    color: var(--primary-light);
}

.school-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    font-family: var(--font-head);
}

.school-stat-label {
    font-size: 0.9rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* School List Section */
.school-list-section {
    padding: 80px 0;
    background: var(--bg-white);
}

.school-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}

.school-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.school-table th,
.school-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.school-table th {
    background: var(--bg-light);
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.school-table tbody tr {
    transition: background 0.2s;
}

.school-table tbody tr:hover {
    background: var(--bg-light);
}

.school-table td {
    font-size: 0.95rem;
    color: var(--text-body);
}

.school-name {
    font-weight: 600;
    color: var(--text-dark);
}

.school-level-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.school-level-badge.primary {
    background: rgba(52, 168, 83, 0.15);
    color: #34a853;
}

.school-level-badge.secondary {
    background: rgba(66, 133, 244, 0.15);
    color: #4285f4;
}

.school-level-badge.higher-secondary {
    background: rgba(156, 39, 176, 0.15);
    color: #9c27b0;
}

.school-state-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-light);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-light);
}

@media (max-width: 768px) {
    .school-list-intro-content h1 { font-size: 2rem; }
    .school-stats-row { gap: 30px; }
    .school-stat-number { font-size: 2rem; }
}

/* Dark Mode for new pages */
[data-theme="dark"] .contact-office-card,
[data-theme="dark"] .shop-product-card,
[data-theme="dark"] .project-highlight-card,
[data-theme="dark"] .shop-sidebar,
[data-theme="dark"] .contact-form-card {
    background: var(--bg-white);
    border-color: var(--border);
}

[data-theme="dark"] .school-table th {
    background: var(--bg-light);
}

[data-theme="dark"] .school-table tbody tr:hover {
    background: rgba(232, 93, 38, 0.05);
}

[data-theme="dark"] .contact-info-card {
    background: var(--bg-light);
}

[data-theme="dark"] .input-icon-wrapper input,
[data-theme="dark"] .input-icon-wrapper textarea {
    background: var(--bg-white);
    border-color: var(--border);
    color: var(--text-body);
}

/* ========================================
   PROJECT MINI TABLE (Educational Care)
   ======================================== */
.project-mini-table-wrap {
    margin: 40px 0;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}

.project-mini-table {
    width: 100%;
    border-collapse: collapse;
}

.project-mini-table th,
.project-mini-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.project-mini-table th {
    background: var(--bg-light);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dark);
}

.project-mini-table tbody tr {
    transition: background 0.2s ease;
}

.project-mini-table tbody tr:hover {
    background: rgba(232, 93, 38, 0.04);
}

.project-mini-table tbody tr:last-child td {
    border-bottom: none;
}

.project-mini-table td {
    font-size: 0.95rem;
    color: var(--text-body);
}

.project-mini-table tfoot {
    background: var(--bg-warm);
}

.project-mini-table tfoot td {
    font-weight: 600;
    color: var(--primary);
    border-bottom: none;
}

.project-table-link {
    padding: 16px 18px;
    background: var(--bg-light);
    display: flex;
    justify-content: flex-end;
}

.project-table-link .link-arrow {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .project-mini-table-wrap {
        overflow-x: auto;
    }
    .project-mini-table {
        min-width: 500px;
    }
    .project-mini-table th,
    .project-mini-table td {
        padding: 12px 14px;
        font-size: 0.85rem;
    }
}

/* ========================================
   SCHOOL INFO CARDS (School List Page)
   ======================================== */
.school-info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.school-info-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.3s var(--ease);
}

.school-info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.school-info-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.school-info-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.school-info-card h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.school-info-card p {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.6;
}

.school-info-card strong {
    color: var(--primary);
}

@media (max-width: 992px) {
    .school-info-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .school-info-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .school-info-card {
        padding: 24px;
    }
}

/* Upper Primary Badge */
.school-level-badge.upper-primary {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

/* Dark Mode - Project Mini Table */
[data-theme="dark"] .project-mini-table-wrap {
    background: var(--bg-white);
    border-color: var(--border);
}

[data-theme="dark"] .project-mini-table th {
    background: var(--bg-light);
}

[data-theme="dark"] .project-mini-table tbody tr:hover {
    background: rgba(232, 93, 38, 0.08);
}

[data-theme="dark"] .project-mini-table tfoot {
    background: rgba(232, 93, 38, 0.1);
}

[data-theme="dark"] .project-table-link {
    background: var(--bg-light);
}

/* Dark Mode - School Info Cards */
[data-theme="dark"] .school-info-card {
    background: var(--bg-white);
    border-color: var(--border);
}

/* ========================================
   FOREIGN PASSPORT PAGE STYLES
   ======================================== */

/* Foreign Hero */
.foreign-hero {
    position: relative;
    height: 50vh;
    min-height: 360px;
    max-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.foreign-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
@media (hover: none), (max-width: 992px) {
    .foreign-hero-bg { background-attachment: scroll; }
}
.foreign-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(17, 26, 38, 0.88) 0%, rgba(17, 26, 38, 0.65) 40%, rgba(232, 93, 38, 0.3) 100%);
}
.foreign-hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.foreign-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: donateParticleFloat linear infinite;
}
.foreign-particle:nth-child(1) { left: 10%; bottom: 0; animation-duration: 8s; animation-delay: 0s; width: 4px; height: 4px; }
.foreign-particle:nth-child(2) { left: 25%; bottom: 0; animation-duration: 10s; animation-delay: 1s; width: 6px; height: 6px; }
.foreign-particle:nth-child(3) { left: 40%; bottom: 0; animation-duration: 7s; animation-delay: 2s; width: 3px; height: 3px; }
.foreign-particle:nth-child(4) { left: 55%; bottom: 0; animation-duration: 9s; animation-delay: 0.5s; width: 5px; height: 5px; }
.foreign-particle:nth-child(5) { left: 70%; bottom: 0; animation-duration: 11s; animation-delay: 3s; width: 4px; height: 4px; }
.foreign-particle:nth-child(6) { left: 85%; bottom: 0; animation-duration: 8.5s; animation-delay: 1.5s; width: 7px; height: 7px; }
.foreign-particle:nth-child(7) { left: 15%; bottom: 0; animation-duration: 12s; animation-delay: 4s; width: 3px; height: 3px; }
.foreign-particle:nth-child(8) { left: 60%; bottom: 0; animation-duration: 9.5s; animation-delay: 2.5s; width: 5px; height: 5px; }
.foreign-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 720px;
    padding: 0 24px;
}
.foreign-hero-content .section-tag {
    opacity: 0;
    animation: fadeUp 0.8s 0.2s var(--ease) forwards;
}
.foreign-hero-content h1 {
    font-family: var(--font-head);
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    opacity: 0;
    animation: fadeUp 0.8s 0.4s var(--ease) forwards;
}
.foreign-hero-content h1 .accent {
    color: var(--primary-light);
}
.foreign-hero-content > p {
    font-size: 1.08rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    max-width: 560px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeUp 0.8s 0.6s var(--ease) forwards;
}
.foreign-hero-scroll {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    animation: fadeUp 0.8s 1s var(--ease) forwards;
}
.foreign-hero-scroll .scroll-line {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}
.foreign-hero-scroll .scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    animation: scrollLine 2s var(--ease) infinite;
}

/* Foreign Notice Banner */
.foreign-notice {
    padding: 0;
    margin-top: -40px;
    position: relative;
    z-index: 2;
}
.foreign-notice-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 32px;
    background: linear-gradient(135deg, #fff3e0, #fff8f0);
    border: 2px solid #ffb74d;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 800px;
    margin: 0 auto;
}
.foreign-notice-icon {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.foreign-notice-text h3 {
    font-family: var(--font-head);
    font-size: 1.15rem;
    color: #e65100;
    margin-bottom: 4px;
}
.foreign-notice-text p {
    font-size: 0.95rem;
    color: #bf360c;
    line-height: 1.5;
}
.foreign-notice-text a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Foreign Main Section */
.foreign-main {
    padding: 80px 0 100px;
    background: var(--bg-light);
}
.foreign-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: start;
}

/* Foreign Image Column */
.foreign-image-col {
    position: sticky;
    top: 100px;
}
.foreign-img-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: relative;
}
.foreign-img-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease);
}
.foreign-img-wrapper:hover img {
    transform: scale(1.05);
}
.foreign-img-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 16px var(--primary-glow);
}
.foreign-trust-points {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.foreign-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.92rem;
    color: var(--text-body);
    line-height: 1.5;
}
.foreign-trust-item i {
    color: #43a047;
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Foreign Bank Card */
.foreign-bank-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.foreign-bank-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--primary));
}
.foreign-bank-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.foreign-bank-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.foreign-bank-header h2 {
    font-family: var(--font-head);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}
.foreign-bank-header p {
    font-size: 0.88rem;
    color: var(--text-light);
    margin: 4px 0 0;
}
.foreign-bank-details {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.foreign-bank-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}
.foreign-bank-row:last-child,
.foreign-bank-row-last {
    border-bottom: none;
}
.foreign-bank-label {
    font-size: 0.88rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.foreign-bank-label i {
    color: var(--primary);
    width: 16px;
    text-align: center;
}
.foreign-bank-row strong {
    font-size: 0.95rem;
    color: var(--text-dark);
    text-align: right;
}
.foreign-swift {
    color: var(--primary) !important;
    font-size: 1.05rem !important;
    letter-spacing: 1px;
}
.foreign-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--secondary), #234d5e);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    font-family: var(--font);
}
.foreign-copy-btn:hover {
    background: linear-gradient(135deg, #234d5e, var(--secondary));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 58, 75, 0.25);
}
.foreign-copy-btn.copied {
    background: linear-gradient(135deg, #43a047, #2e7d32);
}

/* Foreign Amount Suggestion */
.foreign-amount-suggest {
    margin-top: 28px;
}
.foreign-amount-suggest h3 {
    font-family: var(--font-head);
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 16px;
}
.foreign-amount-suggest h3 i {
    color: var(--primary);
    margin-right: 8px;
}
.foreign-amount-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.foreign-amount-card {
    background: var(--bg-white);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
    transition: all 0.3s var(--ease);
    cursor: default;
}
.foreign-amount-card:hover {
    border-color: var(--primary-light);
    background: rgba(232, 93, 38, 0.04);
    transform: translateY(-2px);
}
.foreign-amount-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}
.foreign-amount-desc {
    font-size: 0.82rem;
    color: var(--text-light);
}

/* Foreign Confirm Section */
.foreign-confirm-section {
    padding: 100px 0;
    background: var(--bg-white);
}
.foreign-form-wrapper {
    max-width: 800px;
    margin: 40px auto 0;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}
.foreign-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.foreign-form-full {
    grid-column: 1 / -1;
}
.foreign-form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.foreign-form-group label .required {
    color: #e53935;
}
.foreign-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.foreign-input-wrapper i {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-size: 0.92rem;
    pointer-events: none;
}
.foreign-input-wrapper input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: var(--font);
    color: var(--text-dark);
    background: var(--bg-light);
    transition: all 0.3s var(--ease);
}
.foreign-input-wrapper input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
    background: var(--bg-white);
}
.foreign-textarea-wrapper {
    position: relative;
}
.foreign-textarea-wrapper i {
    position: absolute;
    left: 14px;
    top: 14px;
    color: var(--text-muted);
    font-size: 0.92rem;
    pointer-events: none;
}
.foreign-textarea-wrapper textarea {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: var(--font);
    color: var(--text-dark);
    background: var(--bg-light);
    resize: vertical;
    transition: all 0.3s var(--ease);
}
.foreign-textarea-wrapper textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
    background: var(--bg-white);
}

/* Foreign Upload Areas */
.foreign-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 20px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    text-align: center;
    position: relative;
}
.foreign-upload-area:hover {
    border-color: var(--primary);
    background: rgba(232, 93, 38, 0.04);
}
.foreign-upload-area i {
    font-size: 1.8rem;
    color: var(--primary);
}
.foreign-upload-area span {
    font-size: 0.88rem;
    color: var(--text-light);
    font-weight: 500;
}
.foreign-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.foreign-file-name {
    display: block;
    font-size: 0.82rem;
    color: var(--primary);
    margin-top: 6px;
    font-weight: 500;
}
.foreign-upload-area.has-file {
    border-color: #43a047;
    background: rgba(67, 160, 71, 0.06);
}

/* Foreign Submit Button */
.foreign-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 28px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s var(--ease);
    box-shadow: 0 6px 24px var(--primary-glow);
    font-family: var(--font);
    position: relative;
    overflow: hidden;
}
.foreign-submit-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    transform: translateY(-3px);
    box-shadow: 0 14px 44px rgba(232, 93, 38, 0.4);
}
.foreign-submit-btn:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}
.foreign-btn-ripple {
    display: none;
}

/* Foreign Note Section */
.foreign-note-section {
    padding: 40px 0;
    background: var(--bg-light);
}

/* Foreign CTA Band */
.foreign-cta-band {
    padding: 80px 0;
    background: var(--bg-white);
    position: relative;
    overflow: hidden;
}
.foreign-cta-band .cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.foreign-cta-band .cta-left h2 {
    font-family: var(--font-head);
    font-size: 2rem;
    margin-bottom: 8px;
}
.foreign-cta-band .cta-left p {
    color: var(--text-light);
    max-width: 500px;
}
.foreign-cta-band .cta-actions {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

/* ========================================
   FOREIGN PAGE — DARK MODE
   ======================================== */
[data-theme="dark"] .foreign-notice-card {
    background: rgba(255, 152, 0, 0.08);
    border-color: rgba(255, 152, 0, 0.2);
}
[data-theme="dark"] .foreign-notice-text h3 {
    color: #ffb74d;
}
[data-theme="dark"] .foreign-notice-text p {
    color: #ffcc80;
}
[data-theme="dark"] .foreign-bank-card {
    background: var(--bg-white);
    border-color: var(--border);
}
[data-theme="dark"] .foreign-bank-details {
    background: var(--bg-light);
}
[data-theme="dark"] .foreign-bank-row {
    border-bottom-color: var(--border);
}
[data-theme="dark"] .foreign-amount-card {
    background: var(--bg-white);
    border-color: var(--border);
}
[data-theme="dark"] .foreign-form-wrapper {
    background: var(--bg-white);
    border-color: var(--border);
}
[data-theme="dark"] .foreign-input-wrapper input,
[data-theme="dark"] .foreign-textarea-wrapper textarea {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text-dark);
}
[data-theme="dark"] .foreign-upload-area {
    background: var(--bg-light);
    border-color: var(--border);
}
[data-theme="dark"] .foreign-trust-item {
    color: var(--text-body);
}

/* ========================================
   FOREIGN PAGE — RESPONSIVE
   ======================================== */
@media (max-width: 992px) {
    .foreign-hero-content h1 { font-size: 2.6rem; }
    .foreign-grid {
        grid-template-columns: 1fr;
    }
    .foreign-image-col {
        position: static;
        max-width: 500px;
        margin: 0 auto;
    }
    .foreign-cta-band .cta-box {
        flex-direction: column;
        text-align: center;
    }
    .foreign-cta-band .cta-left p { margin: 0 auto; }
    .foreign-cta-band .cta-actions { justify-content: center; }
}

@media (max-width: 768px) {
    .foreign-hero {
        min-height: 300px;
    }
    .foreign-hero-content h1 {
        font-size: 2rem;
    }
    .foreign-main {
        padding: 50px 0 70px;
    }
    .foreign-notice-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .foreign-bank-card {
        padding: 28px 22px;
    }
    .foreign-form-wrapper {
        padding: 28px 22px;
    }
    .foreign-form-grid {
        grid-template-columns: 1fr;
    }
    .foreign-confirm-section {
        padding: 70px 0;
    }
    .foreign-cta-band {
        padding: 50px 0;
    }
    .foreign-cta-band .cta-actions {
        flex-direction: column;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .foreign-hero-content h1 {
        font-size: 1.7rem;
    }
    .foreign-amount-grid {
        grid-template-columns: 1fr;
    }
    .foreign-bank-row {
        flex-direction: column;
        gap: 4px;
    }
    .foreign-bank-row strong {
        text-align: left;
    }
}

/* ========================================
   PRODUCT DETAIL PAGE STYLES
   ======================================== */

/* Product Breadcrumb */
.product-breadcrumb {
    padding: 20px 0;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
}
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-light);
}
.breadcrumb-nav a {
    color: var(--text-body);
    transition: color 0.3s var(--ease);
}
.breadcrumb-nav a:hover {
    color: var(--primary);
}
.breadcrumb-nav .fa-chevron-right {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.breadcrumb-nav span {
    color: var(--primary);
    font-weight: 600;
}

/* Product Detail */
.product-detail {
    padding: 60px 0 80px;
    background: var(--bg-white);
}
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Product Image Section */
.product-image-section {
    position: sticky;
    top: 100px;
}
.product-image-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
    background: var(--bg-light);
    aspect-ratio: 1;
}
.product-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease);
}
.product-image-main:hover img {
    transform: scale(1.05);
}
.product-zoom-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    z-index: 2;
    box-shadow: var(--shadow-sm);
}
.product-zoom-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: scale(1.1);
}
.product-image-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
}
.product-image-badge:empty {
    display: none;
}
.product-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.product-thumbnails img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.3s var(--ease);
}
.product-thumbnails img:hover,
.product-thumbnails img.active {
    border-color: var(--primary);
    box-shadow: 0 2px 10px var(--primary-glow);
}

/* Product Info Section */
.product-info-section .shop-product-category {
    display: inline-block;
    margin-bottom: 8px;
}
.product-info-section h1 {
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.2;
}
.product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.product-stars i {
    color: #ffc107;
    font-size: 0.95rem;
}
.product-review-count {
    font-size: 0.88rem;
    color: var(--text-light);
}
.product-price-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.product-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
}
.product-stock {
    font-size: 0.88rem;
    color: #43a047;
    font-weight: 500;
}
.product-stock i {
    margin-right: 4px;
}
.product-divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}
.product-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: 20px;
}
.product-meta {
    margin-bottom: 20px;
}
.product-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.9rem;
}
.product-meta-label {
    color: var(--text-light);
    font-weight: 500;
}
.product-meta-label i {
    color: var(--primary);
    width: 18px;
    text-align: center;
    margin-right: 4px;
}
.product-meta-row span:last-child {
    color: var(--text-dark);
    font-weight: 500;
}

/* Product Cart Section */
.product-cart-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.product-quantity {
    display: flex;
    align-items: center;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.product-qty-btn {
    width: 40px;
    height: 42px;
    background: var(--bg-light);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-dark);
    transition: all 0.3s var(--ease);
}
.product-qty-btn:hover {
    background: var(--primary);
    color: #fff;
}
.product-quantity input {
    width: 44px;
    height: 42px;
    border: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--bg-white);
    font-family: var(--font);
}
.product-add-cart {
    flex: 1;
    padding: 12px 24px;
    font-size: 0.95rem;
}
.product-buy-now {
    width: 100%;
    padding: 14px 32px;
    background: var(--secondary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    font-family: var(--font);
    margin-bottom: 24px;
}
.product-buy-now:hover {
    background: #234d5e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 58, 75, 0.25);
}

/* Product Features */
.product-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.product-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    transition: all 0.3s var(--ease);
}
.product-feature:hover {
    background: rgba(232, 93, 38, 0.04);
}
.product-feature i {
    color: var(--primary);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.product-feature strong {
    display: block;
    font-size: 0.82rem;
    color: var(--text-dark);
    margin-bottom: 2px;
}
.product-feature span {
    font-size: 0.78rem;
    color: var(--text-light);
}

/* Product Share */
.product-share {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.product-share > span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-body);
}
.product-share-links {
    display: flex;
    gap: 10px;
}
.product-share-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    text-decoration: none;
}
.product-share-btn:hover {
    transform: scale(1.1);
}
.product-share-btn.facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.product-share-btn.twitter:hover { background: #000; color: #fff; border-color: #000; }
.product-share-btn.whatsapp:hover { background: #25d366; color: #fff; border-color: #25d366; }
.product-share-btn.copy:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Product Tabs */
.product-tabs-section {
    padding: 60px 0 80px;
    background: var(--bg-light);
}
.product-tabs {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    overflow: hidden;
}
.product-tab-nav {
    display: flex;
    border-bottom: 2px solid var(--border);
}
.product-tab-btn {
    flex: 1;
    padding: 16px 20px;
    background: none;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    position: relative;
    transition: all 0.3s var(--ease);
    font-family: var(--font);
}
.product-tab-btn:hover {
    color: var(--primary);
    background: rgba(232, 93, 38, 0.04);
}
.product-tab-btn.active {
    color: var(--primary);
}
.product-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
}
.product-tab-content {
    padding: 32px;
}
.product-tab-pane {
    display: none;
}
.product-tab-pane.active {
    display: block;
}
.product-tab-pane p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-body);
}

/* Shipping Info */
.product-shipping-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.shipping-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.shipping-item i {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 93, 38, 0.08);
    color: var(--primary);
    border-radius: 50%;
    font-size: 1rem;
    flex-shrink: 0;
}
.shipping-item h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.shipping-item p {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Product Cause Info */
.product-cause-info {
    text-align: center;
    padding: 20px 0;
}
.cause-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.5rem;
    color: #fff;
}
.product-cause-info h3 {
    font-family: var(--font-head);
    font-size: 1.4rem;
    color: var(--text-dark);
    margin-bottom: 12px;
}
.product-cause-info p {
    max-width: 600px;
    margin: 0 auto 20px;
}

/* Related Products */
.shop-related {
    padding: 80px 0;
    background: var(--bg-white);
}
.shop-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}

/* Product Zoom Modal */
.product-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.product-zoom-modal.active {
    display: flex;
}
.product-zoom-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}
.product-zoom-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}
.product-zoom-container img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-md);
    object-fit: contain;
}
.product-zoom-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.product-zoom-close:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

/* ========================================
   PRODUCT PAGE — DARK MODE
   ======================================== */
[data-theme="dark"] .product-breadcrumb {
    background: var(--bg-light);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .product-image-main {
    background: var(--bg-light);
}
[data-theme="dark"] .product-zoom-btn {
    background: rgba(30, 30, 40, 0.8);
    color: var(--text-dark);
}
[data-theme="dark"] .product-quantity {
    border-color: var(--border);
}
[data-theme="dark"] .product-qty-btn {
    background: var(--bg-light);
    color: var(--text-dark);
}
[data-theme="dark"] .product-quantity input {
    background: var(--bg-white);
    color: var(--text-dark);
}
[data-theme="dark"] .product-feature {
    background: var(--bg-light);
}
[data-theme="dark"] .product-share-btn {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text-body);
}
[data-theme="dark"] .product-tabs {
    background: var(--bg-white);
    border-color: var(--border);
}
[data-theme="dark"] .product-tab-nav {
    border-bottom-color: var(--border);
}
[data-theme="dark"] .product-tab-btn {
    color: var(--text-body);
}
[data-theme="dark"] .shipping-item i {
    background: rgba(232, 93, 38, 0.12);
}
[data-theme="dark"] .product-thumbnails img {
    border-color: var(--border);
}

/* ========================================
   PRODUCT PAGE — RESPONSIVE
   ======================================== */
@media (max-width: 992px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
    }
    .product-image-section {
        position: static;
    }
    .shop-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-detail {
        padding: 40px 0 60px;
    }
    .product-info-section h1 {
        font-size: 1.6rem;
    }
    .product-tab-nav {
        flex-direction: column;
    }
    .product-tab-btn {
        text-align: left;
        padding: 14px 20px;
        border-bottom: 1px solid var(--border);
    }
    .product-tab-btn.active::after {
        display: none;
    }
    .product-tab-btn.active {
        background: rgba(232, 93, 38, 0.06);
        border-left: 3px solid var(--primary);
    }
    .product-tab-content {
        padding: 24px 20px;
    }
    .product-tabs-section {
        padding: 40px 0 60px;
    }
    .shop-related {
        padding: 50px 0;
    }
}

@media (max-width: 480px) {
    .product-cart-section {
        flex-direction: column;
    }
    .product-add-cart {
        width: 100%;
    }
    .shop-related-grid {
        grid-template-columns: 1fr;
    }
    .product-thumbnails img {
        width: 56px;
        height: 56px;
    }
}

/* ========================================
   DONOR MODAL - Razorpay Integration
   ======================================== */
.donor-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s var(--ease);
}
.donor-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.donor-modal {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
    transform: scale(0.9) translateY(30px);
    transition: transform 0.4s var(--ease);
}
.donor-modal-overlay.active .donor-modal {
    transform: scale(1) translateY(0);
}
.donor-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--bg-light);
    color: var(--text-body);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--ease);
    z-index: 10;
}
.donor-modal-close:hover {
    background: var(--primary);
    color: #fff;
    transform: rotate(90deg);
}
.donor-modal-header {
    text-align: center;
    padding: 36px 36px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(232, 93, 38, 0.04) 0%, transparent 100%);
}
.donor-modal-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 8px 30px var(--primary-glow);
    animation: donorIconPulse 2s ease-in-out infinite;
}
@keyframes donorIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.donor-modal-header h2 {
    font-family: var(--font-head);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.donor-modal-header p {
    font-size: 0.95rem;
    color: var(--text-light);
}
.donor-modal-header p strong {
    color: var(--primary);
    font-weight: 700;
}
.donor-modal-form {
    padding: 28px 36px 36px;
}
.donor-form-group {
    margin-bottom: 20px;
}
.donor-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.donor-form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.donor-form-group label i {
    color: var(--primary);
    font-size: 0.9rem;
}
.donor-form-group label .required {
    color: #e74c3c;
    font-weight: 700;
}
.donor-form-group label .optional {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.donor-form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.95rem;
    color: var(--text-dark);
    background: var(--bg-white);
    transition: all 0.3s var(--ease);
}
.donor-form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(232, 93, 38, 0.1);
}
.donor-form-group input::placeholder {
    color: var(--text-muted);
}
.donor-form-group input.error {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.03);
}
.donor-field-error {
    display: block;
    font-size: 0.78rem;
    color: #e74c3c;
    margin-top: 6px;
    min-height: 18px;
}
.donor-field-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.donor-modal-summary {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
}
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.92rem;
}
.summary-row + .summary-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.summary-row span {
    color: var(--text-light);
}
.summary-row strong {
    color: var(--text-dark);
    font-weight: 700;
}
.summary-row strong:first-child {
    color: var(--primary);
    font-size: 1.1rem;
}
.donor-modal-submit {
    width: 100%;
    padding: 18px 32px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    font-family: var(--font);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.35s var(--ease);
    box-shadow: 0 6px 24px var(--primary-glow);
    position: relative;
    overflow: hidden;
}
.donor-modal-submit:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(232, 93, 38, 0.4);
}
.donor-modal-submit:active {
    transform: translateY(0);
}
.donor-modal-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
.donor-modal-submit i {
    font-size: 0.95rem;
}
.donor-modal-footer {
    margin-top: 24px;
    text-align: center;
}
.secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.secure-badge i {
    color: #27ae60;
}
.payment-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 1.5rem;
    color: var(--text-muted);
    opacity: 0.6;
}
.payment-icons span {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    background: var(--bg-light);
    border-radius: 4px;
    color: var(--text-body);
}

/* Donor Modal Dark Mode */
[data-theme="dark"] .donor-modal-overlay {
    background: rgba(0, 0, 0, 0.75);
}
[data-theme="dark"] .donor-modal {
    background: var(--bg-white);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .donor-modal-close {
    background: var(--bg-light);
    color: var(--text-body);
}
[data-theme="dark"] .donor-modal-header {
    background: linear-gradient(180deg, rgba(232, 93, 38, 0.08) 0%, transparent 100%);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .donor-form-group input {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text-dark);
}
[data-theme="dark"] .donor-form-group input:focus {
    border-color: var(--primary);
    background: var(--bg-white);
}
[data-theme="dark"] .donor-modal-summary {
    background: var(--bg-light);
    border-color: var(--border);
}

/* Donor Modal Method Button */
.method-donate-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-family: var(--font);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.35s var(--ease);
    box-shadow: 0 4px 16px var(--primary-glow);
}
.method-donate-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(232, 93, 38, 0.4);
}

/* Donor Modal Responsive */
@media (max-width: 600px) {
    .donor-modal {
        max-width: 100%;
        max-height: 95vh;
        border-radius: var(--radius-lg);
    }
    .donor-modal-header {
        padding: 28px 24px 20px;
    }
    .donor-modal-header h2 {
        font-size: 1.45rem;
    }
    .donor-modal-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    .donor-modal-form {
        padding: 24px;
    }
    .donor-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .donor-form-group input {
        padding: 12px 14px;
        font-size: 0.9rem;
    }
    .donor-modal-submit {
        padding: 16px 24px;
        font-size: 1rem;
    }
    .payment-icons {
        font-size: 1.3rem;
        gap: 10px;
    }
}
@media (max-width: 400px) {
    .donor-modal-overlay {
        padding: 12px;
    }
    .donor-modal-header {
        padding: 24px 20px 18px;
    }
    .donor-modal-form {
        padding: 20px;
    }
    .donor-modal-header h2 {
        font-size: 1.3rem;
    }
}

/* ========================================
   LOADING SKELETON FOR HEADER & FOOTER
   ======================================== */
.include-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 0;
    min-height: 50px;
}
#header-placeholder .include-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: var(--bg-white);
    min-height: 128px;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
#footer-placeholder .include-loader {
    background: var(--bg-footer);
    min-height: 200px;
}
.loader-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}
.loader-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    animation: loaderBounce 1.4s ease-in-out infinite both;
}
.loader-dot:nth-child(2) { animation-delay: 0.16s; }
.loader-dot:nth-child(3) { animation-delay: 0.32s; }
@keyframes loaderBounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}
.loader-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--primary-light), transparent);
    background-size: 200% 100%;
    animation: loaderBarSlide 1.5s linear infinite;
}
@keyframes loaderBarSlide {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Skeleton shimmer for nav area */
.skeleton-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    height: 78px;
}
.skeleton-block {
    background: linear-gradient(90deg, var(--bg-light) 25%, var(--border) 50%, var(--bg-light) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton-logo {
    width: 58px;
    height: 52px;
}
.skeleton-links {
    display: flex;
    gap: 16px;
}
.skeleton-link {
    width: 70px;
    height: 14px;
}
.skeleton-btn {
    width: 130px;
    height: 42px;
    border-radius: 50px;
}
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Footer skeleton */
.skeleton-footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 24px;
    width: 100%;
}
.skeleton-footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.skeleton-footer-title {
    width: 100px;
    height: 16px;
    margin-bottom: 8px;
}
.skeleton-footer-line {
    height: 12px;
}
.skeleton-footer-line:nth-child(2) { width: 85%; }
.skeleton-footer-line:nth-child(3) { width: 70%; }
.skeleton-footer-line:nth-child(4) { width: 90%; }
.skeleton-footer-line:nth-child(5) { width: 60%; }

[data-theme="dark"] .skeleton-block {
    background: linear-gradient(90deg, #1e2130 25%, #2a2d3a 50%, #1e2130 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}
[data-theme="dark"] #header-placeholder .include-loader {
    background: rgba(19, 22, 29, 0.95);
    border-bottom-color: var(--border);
}

@media (max-width: 992px) {
    .skeleton-links { display: none; }
    .skeleton-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    #header-placeholder .include-loader { min-height: 118px; }
    .skeleton-footer { grid-template-columns: 1fr; }
}

/* ========================================
   PAGE ENTRANCE ANIMATION
   ======================================== */
body {
    animation: pageEntrance 0.6s var(--ease-out-expo) forwards;
}
@keyframes pageEntrance {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   ENHANCED SCROLL ANIMATIONS
   ======================================== */
[data-animate="fade-scale"] {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
}
[data-animate="fade-scale"].animated {
    opacity: 1;
    transform: scale(1) translateY(0);
}
[data-animate="slide-rotate"] {
    opacity: 0;
    transform: translateY(40px) rotate(3deg);
}
[data-animate="slide-rotate"].animated {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}
[data-animate="clip-up"] {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
}
[data-animate="clip-up"].animated {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transition: clip-path 0.8s var(--ease-out-expo), opacity 0.6s var(--ease);
}
[data-animate="blur-in"] {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
}
[data-animate="blur-in"].animated {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition: opacity 0.7s var(--ease), filter 0.7s var(--ease), transform 0.7s var(--ease);
}

/* ========================================
   TEXT REVEAL / SPLIT ANIMATION
   ======================================== */
.text-reveal {
    overflow: hidden;
    display: inline-block;
}
.text-reveal-inner {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.8s var(--ease-out-expo);
}
.text-reveal.animated .text-reveal-inner {
    transform: translateY(0);
}

/* Word stagger animation */
.word-reveal .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    margin-right: 0.25em;
}
.word-reveal .word-inner {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition: transform 0.6s var(--ease-out-expo), opacity 0.4s var(--ease);
}
.word-reveal.animated .word-inner {
    transform: translateY(0);
    opacity: 1;
}

/* ========================================
   GRADIENT TEXT EFFECT (Headings)
   ======================================== */
.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--primary-light), var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   MAGNETIC BUTTON EFFECT
   ======================================== */
.btn-magnetic {
    transition: transform 0.3s var(--ease-spring);
}

/* ========================================
   TILT CARD HOVER EFFECT
   ======================================== */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 800px;
    transition: transform 0.4s var(--ease-spring);
}
.tilt-card-inner {
    transform: translateZ(0);
    transition: transform 0.4s var(--ease-spring);
}
.tilt-card:hover .tilt-card-inner {
    transform: translateZ(20px);
}

/* ========================================
   GLOW CURSOR EFFECT ON CARDS
   ======================================== */
.glow-card {
    position: relative;
    overflow: hidden;
}
.glow-card::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 93, 38, 0.08) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s var(--ease);
    z-index: 0;
}
.glow-card:hover::before {
    opacity: 1;
}
.glow-card > * {
    position: relative;
    z-index: 1;
}

/* ========================================
   ENHANCED SERVICE CARDS
   ======================================== */
.service-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.service-card:hover .service-badge {
    transform: scale(1.15) rotate(5deg) translateZ(20px);
}
.service-body h3 {
    transition: color 0.3s var(--ease);
}
.service-card:hover .service-body h3 {
    color: var(--primary);
}

/* ========================================
   ENHANCED ABOUT CARDS
   ======================================== */
.about-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.about-card p {
    transition: color 0.3s var(--ease);
}
.about-card:hover p {
    color: var(--text-body);
}

/* ========================================
   STAT CARD COUNTER GLOW
   ======================================== */
.stat-card .stat-value {
    transition: text-shadow 0.4s var(--ease);
}
.stat-card:hover .stat-value {
    text-shadow: 0 0 20px rgba(255, 122, 69, 0.4);
}
.stat-card .stat-icon {
    transition: transform 0.4s var(--ease-spring), color 0.3s var(--ease);
}
.stat-card:hover .stat-icon {
    transform: scale(1.2) rotate(-10deg);
}

/* ========================================
   ENHANCED NEWS CARDS
   ======================================== */
.news-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.news-body h3 a {
    background: linear-gradient(var(--primary), var(--primary)) no-repeat 0 100%;
    background-size: 0% 2px;
    transition: background-size 0.4s var(--ease), color 0.3s;
}
.news-body h3 a:hover {
    background-size: 100% 2px;
}

/* ========================================
   SECTION DIVIDER WAVE
   ======================================== */
.section-divider {
    position: relative;
    overflow: hidden;
    line-height: 0;
    margin-top: -1px;
}
.section-divider svg {
    display: block;
    width: 100%;
    height: 60px;
}
.section-divider-bottom {
    margin-bottom: -1px;
    margin-top: 0;
}

/* ========================================
   FLOATING ELEMENTS DECORATION
   ======================================== */
.float-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.float-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(232, 93, 38, 0.08);
    animation: floatDecoration 8s ease-in-out infinite;
}
.float-circle-2 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(27, 58, 75, 0.06);
    animation: floatDecoration 10s ease-in-out infinite reverse;
}
.float-dots {
    width: 60px;
    height: 60px;
    background-image: radial-gradient(circle, rgba(232, 93, 38, 0.15) 1px, transparent 1px);
    background-size: 8px 8px;
    animation: floatDecoration 12s ease-in-out infinite;
}
@keyframes floatDecoration {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-15px) rotate(5deg); }
    66% { transform: translateY(10px) rotate(-3deg); }
}

/* ========================================
   LINK HOVER UNDERLINE ANIMATION
   ======================================== */
.footer-links li a {
    position: relative;
}
.footer-links li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary-light);
    transition: width 0.3s var(--ease);
}
.footer-links li a:hover::after {
    width: 100%;
}

/* ========================================
   ENHANCED CTA BOX
   ======================================== */
.cta-box {
    transition: all 0.5s var(--ease), transform 0.5s var(--ease-spring);
}
.cta-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ========================================
   BACK TO TOP ENHANCED
   ======================================== */
.back-to-top {
    transition: all 0.35s var(--ease-spring);
}
.back-to-top:hover i {
    animation: backToTopBounce 0.4s var(--ease-spring);
}
@keyframes backToTopBounce {
    0% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-light);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-light), var(--primary));
}
html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--bg-light);
}

/* ========================================
   SMOOTH NUMBER COUNTER FLASH
   ======================================== */
.counter-active {
    animation: counterFlash 0.3s var(--ease);
}
@keyframes counterFlash {
    0% { color: var(--primary-light); text-shadow: 0 0 15px rgba(255, 122, 69, 0.5); }
    100% { color: inherit; text-shadow: none; }
}

/* ========================================\n   HERO SCROLL CTA BOUNCE\n   ======================================== */\n/* Removed - scroll hints are hidden */

/* ========================================
   PARTNERS ENHANCED
   ======================================== */
.partners-label {
    position: relative;
    display: inline-block;
}
.partners-label::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

/* ========================================
   SECTION TAG ICON SPIN ON HOVER
   ======================================== */
.section-tag i {
    transition: transform 0.4s var(--ease-spring);
    display: inline-block;
}
.section-tag:hover i {
    transform: rotate(360deg);
}

/* ========================================
   CARD STAGGER ANIMATION ON SCROLL
   ======================================== */
.services-grid .service-card,
.news-grid .news-card,
.stats-grid .stat-card,
.about-cards .about-card,
.trustees-grid .trustee-card,
.methods-grid .method-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.services-grid .service-card.card-visible,
.news-grid .news-card.card-visible,
.stats-grid .stat-card.card-visible,
.about-cards .about-card.card-visible,
.trustees-grid .trustee-card.card-visible,
.methods-grid .method-card.card-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   PARALLAX SECTION BACKGROUNDS
   ======================================== */
.parallax-bg {
    transition: transform 0.1s linear;
    will-change: transform;
}

/* ========================================
   HOVER RIPPLE ON INTERACTIVE CARDS
   ======================================== */
.hover-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(232, 93, 38, 0.06);
    transform: scale(0);
    animation: hoverRipple 0.6s var(--ease) forwards;
    pointer-events: none;
    z-index: 0;
}
@keyframes hoverRipple {
    to { transform: scale(4); opacity: 0; }
}

/* ========================================
   IMAGE LAZY LOAD FADE IN
   ======================================== */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}
img[loading="lazy"].loaded {
    opacity: 1;
}

/* Ensure trustee card images keep transform transition */
.trustee-card-img img[loading="lazy"] {
    transition: transform 2.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s var(--ease);
}

/* ========================================
   SMOOTH SECTIONS SEPARATOR LINE
   ======================================== */
.section-separator {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 3px;
    margin: 0 auto 24px;
    position: relative;
    overflow: hidden;
}
.section-separator::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    animation: separatorSlide 2s ease-in-out infinite;
}
@keyframes separatorSlide {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* ========================================
   FOCUS STATES FOR ACCESSIBILITY
   ======================================== */
.btn:focus-visible,
.nav-donate-btn:focus-visible,
button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ========================================
   SMOOTH SELECTION COLOR
   ======================================== */
::selection {
    background: rgba(232, 93, 38, 0.2);
    color: var(--text-dark);
}

/* ========================================
   SCROLL PROGRESS BAR
   ======================================== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-gold), var(--primary));
    background-size: 300% 100%;
    animation: gradientFlow 3s linear infinite;
    z-index: 10000;
    transition: width 0.05s linear;
    box-shadow: 0 0 8px var(--primary-glow);
}
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ========================================
   ANIMATED GRADIENT BORDER CARDS
   ======================================== */
.gradient-border-card {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    z-index: 0;
}
.gradient-border-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-lg) + 2px);
    background: linear-gradient(135deg, var(--primary), var(--primary-light), var(--accent-gold), var(--primary-dark), var(--primary));
    background-size: 400% 400%;
    animation: gradientBorderRotate 6s ease infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}
.gradient-border-card:hover::before {
    opacity: 1;
}
.gradient-border-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: var(--bg-white);
    z-index: -1;
}
@keyframes gradientBorderRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Apply gradient border to service cards via box-shadow */
.service-card:hover {
    box-shadow: 0 16px 48px rgba(232,93,38,0.15), 0 0 0 2px rgba(232,93,38,0.2);
}

/* ========================================
   ANIMATED GRADIENT TEXT
   ======================================== */
.gradient-text-animated {
    background: linear-gradient(270deg, var(--primary), var(--primary-light), var(--accent-gold), var(--primary-dark), var(--primary));
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientTextShift 8s ease infinite;
}
@keyframes gradientTextShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hero accent text gets animated gradient */
.hero-content .accent {
    background: linear-gradient(270deg, var(--primary-light), var(--accent-gold), #FF6B35, var(--primary), var(--primary-light));
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientTextShift 6s ease infinite;
}

/* ========================================
   GRADIENT OVERLAY ON SERVICE CARD IMAGES
   ======================================== */
.service-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(transparent, rgba(0,0,0,0.35));
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
    z-index: 1;
}
.service-card:hover .service-img::after {
    opacity: 1;
}

/* ========================================
   GRADIENT BUTTON SWEEP EFFECT
   ======================================== */
.btn-primary {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s var(--ease);
    z-index: -1;
}
.btn-primary:hover::after {
    left: 100%;
}

/* ========================================
   GRADIENT MESH BACKGROUND FOR SECTIONS
   ======================================== */
.services::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse at top right, rgba(232,93,38,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.services::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 400px;
    height: 400px;
    background: radial-gradient(ellipse at bottom left, rgba(245,166,35,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.services {
    position: relative;
    overflow: hidden;
}

/* About section gradient mesh */
.about::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(232,93,38,0.03) 0%, transparent 50%);
    pointer-events: none;
    animation: meshFloat 20s ease-in-out infinite;
}
.about {
    position: relative;
    overflow: hidden;
}
@keyframes meshFloat {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(40px, -30px); }
    66% { transform: translate(-20px, 20px); }
}

/* ========================================
   MORPHING GRADIENT BLOB
   ======================================== */
.gradient-blob {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(232,93,38,0.08), rgba(245,166,35,0.06), rgba(255,122,69,0.05));
    filter: blur(60px);
    animation: blobMorph 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes blobMorph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(0, 0) scale(1); }
    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: translate(20px, -30px) scale(1.05); }
    50% { border-radius: 50% 60% 30% 60% / 30% 50% 70% 50%; transform: translate(-10px, 20px) scale(0.95); }
    75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; transform: translate(15px, 10px) scale(1.02); }
}

/* ========================================
   ANIMATED GRADIENT STAT CARDS
   ======================================== */
.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-gold), var(--primary));
    background-size: 300% 100%;
    animation: gradientFlow 3s linear infinite;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
.stat-card:hover::after {
    opacity: 1;
}

/* ========================================
   NEWS CARD GRADIENT HOVER OVERLAY
   ======================================== */
.news-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(232,93,38,0.3), rgba(245,166,35,0.2));
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    z-index: 1;
}
.news-card:hover .news-thumb::after {
    opacity: 1;
}

/* ========================================
   CTA GRADIENT ANIMATED BORDER
   ======================================== */
.cta-box {
    position: relative;
    z-index: 0;
}
.cta-box::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: calc(var(--radius-xl) + 3px);
    background: linear-gradient(135deg, var(--primary), var(--primary-light), var(--accent-gold), transparent, var(--primary));
    background-size: 400% 400%;
    animation: gradientBorderRotate 8s ease infinite;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.6s var(--ease);
}
.cta-box:hover::after {
    opacity: 0.6;
}

/* ========================================
   GRADIENT HOVER ON ABOUT CARDS
   ======================================== */
.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-gold));
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    animation: gradientFlow 3s linear infinite;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.about-card:hover::before {
    opacity: 1;
}

/* ========================================
   ANIMATED GRADIENT ON FOOTER
   ======================================== */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-gold), var(--primary));
    background-size: 400% 100%;
    animation: gradientFlow 4s linear infinite;
}
.footer {
    position: relative;
}

/* ========================================
   GRADIENT SHINE ON PARTNER LOGOS
   ======================================== */
.partner-logo::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(232,93,38,0.08), transparent);
    transition: left 0.8s var(--ease);
}
.partner-logo {
    position: relative;
    overflow: hidden;
}
.partner-logo:hover::after {
    left: 150%;
}

/* ========================================
   SECTION HEAD GRADIENT UNDERLINE
   ======================================== */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent-gold));
    margin: 12px auto 0;
    border-radius: 3px;
    transition: width 0.5s var(--ease);
}
.section-title:hover::after,
.section-head:hover .section-title::after {
    width: 120px;
}
.section-title.light::after {
    background: linear-gradient(90deg, var(--primary-light), var(--accent-gold));
}

/* ========================================
   HERO GRADIENT OVERLAY ENHANCEMENT
   ======================================== */
.hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(17,26,38,0.75) 0%,
        rgba(17,26,38,0.45) 40%,
        rgba(232,93,38,0.15) 100%
    );
}

/* ========================================
   GRADIENT ICON BACKGROUND ON SERVICE BADGE
   ======================================== */
.service-badge {
    background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
    box-shadow: 0 4px 20px var(--primary-glow);
    transition: all 0.5s var(--ease-spring) !important;
}
.service-card:hover .service-badge {
    box-shadow: 0 8px 30px rgba(232,93,38,0.5);
    background: linear-gradient(135deg, var(--primary-light), var(--accent-gold)) !important;
}

/* ========================================
   ABOUT ICON GRADIENT ON HOVER
   ======================================== */
.about-card:hover .about-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
}

/* ========================================
   GRADIENT MILESTONES BACKGROUND
   ======================================== */
.milestones-bg {
    background: linear-gradient(135deg, var(--secondary-dark) 0%, #1a3550 30%, #0f2030 60%, var(--secondary-dark) 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientBgShift 12s ease infinite;
}
@keyframes gradientBgShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ========================================
   GRADIENT HOVER ON DONATE SECTION FACTS
   ======================================== */
.donate-fact .fact-icon {
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(232,93,38,0.2)) !important;
}
.donate-fact:hover .fact-icon {
    background: linear-gradient(135deg, rgba(255,122,69,0.3), rgba(245,166,35,0.3)) !important;
}

/* ========================================
   GRADIENT LINK ARROW HOVER
   ======================================== */
.link-arrow:hover {
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   SMOOTH GRADIENT ON NAV HOVER
   ======================================== */
.nav-menu > li > a:hover::after,
.nav-menu > li > a.active::after {
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

/* ========================================
   ANIMATED GRADIENT DONATE HERO OVERLAY
   ======================================== */
.donate-hero-overlay {
    background: linear-gradient(
        140deg,
        rgba(17,26,38,0.88) 0%,
        rgba(17,26,38,0.65) 40%,
        rgba(232,93,38,0.25) 70%,
        rgba(245,166,35,0.15) 100%
    ) !important;
    background-size: 200% 200%;
    animation: gradientBgShift 10s ease infinite;
}

/* ========================================
   TEXT SHIMMER ON HERO TAG
   ======================================== */
.hero-tag {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 6px 16px;
}
.hero-tag::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: shimmer 4s ease-in-out infinite;
    border-radius: inherit;
}

/* ========================================
   SMOOTH GRADIENT SCROLLBAR
   ======================================== */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--primary-light), var(--accent-gold)) !important;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent-gold), var(--primary-light), var(--primary)) !important;
}

/* ========================================
   GRADIENT ON FLOATING DONATE
   ======================================== */
.floating-donate {
    background: linear-gradient(135deg, var(--primary), var(--primary-light), var(--accent-gold)) !important;
    background-size: 200% 200%;
    animation: floatDonateHeartbeat 2s ease-in-out infinite, gradientBorderRotate 4s ease infinite;
}
.floating-donate.visible {
    animation: floatDonateHeartbeat 2s ease-in-out infinite, gradientBorderRotate 4s ease infinite;
}

/* ========================================
   BACK-TO-TOP GRADIENT
   ======================================== */
.back-to-top:hover {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)) !important;
}

/* ========================================
   CURSOR SPOTLIGHT EFFECT
   ======================================== */
.cursor-spotlight {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,93,38,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
    opacity: 0;
    will-change: left, top;
}
.cursor-spotlight.active {
    opacity: 1;
}

/* ========================================
   MAGNETIC BUTTON ENHANCED
   ======================================== */
.btn-magnetic {
    transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease);
}

/* ========================================
   SMOOTH COUNT-UP NUMBER STYLES
   ======================================== */
.counter {
    display: inline-block;
    transition: transform 0.3s var(--ease-spring);
}
.counter.counting {
    transform: scale(1.05);
}

/* ========================================
   GRADIENT PARTNER SECTION
   ======================================== */
.partners {
    position: relative;
    overflow: hidden;
}
.partners::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ========================================
   ANIMATED GRADIENT ON PROJECT HEROS
   ======================================== */
.project-hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(17,26,38,0.85) 0%,
        rgba(17,26,38,0.55) 40%,
        rgba(232,93,38,0.2) 100%
    ) !important;
}

/* Project CTA gradient */
.project-cta {
    position: relative;
    overflow: hidden;
}
.project-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(232,93,38,0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* ========================================
   CONTACT PAGE GRADIENT ENHANCEMENTS
   ======================================== */
.contact-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(transparent, var(--bg-white));
    pointer-events: none;
    z-index: 2;
}

/* ========================================
   SHOP PAGE GRADIENT ENHANCEMENTS
   ======================================== */
.shop-hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(17,26,38,0.82) 0%,
        rgba(17,26,38,0.5) 50%,
        rgba(232,93,38,0.15) 100%
    ) !important;
}

/* ========================================
   GALLERY HERO GRADIENT
   ======================================== */
.gallery-hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(17,26,38,0.85) 0%,
        rgba(17,26,38,0.6) 40%,
        rgba(232,93,38,0.2) 80%,
        rgba(245,166,35,0.1) 100%
    ) !important;
}

/* ========================================
   TRUSTEES PAGE GRADIENT ENHANCEMENTS
   ======================================== */
.trustee-card {
    position: relative;
    z-index: 0;
}
.trustee-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-lg) + 2px);
    background: linear-gradient(135deg, var(--primary), var(--primary-light), var(--accent-gold), var(--primary));
    background-size: 400% 400%;
    animation: gradientBorderRotate 6s ease infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}
.trustee-card:hover::before {
    opacity: 0.7;
}

/* ========================================
   ANIMATED GRADIENT TEXT FOR SECTION TAGS
   ======================================== */
.section-tag {
    background: linear-gradient(135deg, var(--bg-warm), #FFE8D6) !important;
    transition: all 0.4s var(--ease);
}
.section-tag:hover {
    background: linear-gradient(135deg, #FFE8D6, var(--bg-warm)) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(232,93,38,0.15);
}
.section-tag.light {
    background: rgba(255,255,255,0.12) !important;
}
.section-tag.light:hover {
    background: rgba(255,255,255,0.18) !important;
}

/* ========================================
   ENHANCED DONATE IMAGE FRAME GRADIENT
   ======================================== */
.donate-img-frame {
    border: 3px solid transparent !important;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-gold), var(--primary)) border-box;
    background-size: 300% 300%;
    animation: frameFloat 6s ease-in-out infinite, gradientBorderRotate 6s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* ========================================
   SMOOTH CARD SHADOW ON SCROLL
   ======================================== */
.service-card.card-visible,
.news-card.card-visible,
.about-card.card-visible {
    box-shadow: var(--shadow-md);
}
.service-card.card-visible:hover,
.news-card.card-visible:hover,
.about-card.card-visible:hover {
    box-shadow: 0 16px 48px rgba(232,93,38,0.12);
}

/* ========================================
   GRADIENT ON NEWSLETTER / FORM INPUTS
   ======================================== */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(232,93,38,0.1), 0 0 20px rgba(232,93,38,0.05) !important;
}

/* ========================================
   DARK MODE GRADIENT ADJUSTMENTS
   ======================================== */
[data-theme="dark"] .gradient-border-card::after {
    background: var(--bg-dark);
}
[data-theme="dark"] .section-tag {
    background: rgba(232,93,38,0.12) !important;
}
[data-theme="dark"] .section-tag:hover {
    background: rgba(232,93,38,0.18) !important;
}
[data-theme="dark"] .cursor-spotlight {
    background: radial-gradient(circle, rgba(232,93,38,0.06) 0%, transparent 60%);
}
[data-theme="dark"] .scroll-progress {
    box-shadow: 0 0 12px rgba(232,93,38,0.4);
}
[data-theme="dark"] .about-card::before {
    opacity: 0;
}
[data-theme="dark"] .about-card:hover::before {
    opacity: 0.8;
}
[data-theme="dark"] .section-title::after {
    background: linear-gradient(90deg, var(--primary-light), var(--accent-gold));
}
[data-theme="dark"] .contact-hero::after {
    background: linear-gradient(transparent, #13161d);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    box-shadow: 0 0 0 3px rgba(232,93,38,0.15), 0 0 20px rgba(232,93,38,0.08) !important;
}

/* ========================================
   BLOG PAGE STYLES
   ======================================== */

/* Blog Hero */
.blog-hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--secondary) 0%, #0F2030 100%);
}
.blog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(27,58,75,0.7) 0%, rgba(15,32,48,0.92) 100%);
    z-index: 1;
}
.blog-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 60px 24px 50px;
    color: #fff;
}
.blog-hero-content h1 {
    font-family: var(--font-head);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
    animation: fadeUp 0.8s var(--ease) both;
}
.blog-hero-content p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.78);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
    animation: fadeUp 0.8s var(--ease) 0.2s both;
}

/* Blog Breadcrumb */
.blog-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    margin-bottom: 18px;
    flex-wrap: wrap;
    justify-content: center;
    animation: fadeUp 0.8s var(--ease) both;
}
.blog-breadcrumb a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.3s var(--ease);
}
.blog-breadcrumb a:hover { color: var(--primary-light); }
.blog-breadcrumb .separator {
    color: rgba(255,255,255,0.35);
    font-size: 0.7rem;
}
.blog-breadcrumb .current {
    color: var(--primary-light);
    font-weight: 600;
}

/* Blog Layout */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    padding: 60px 0 80px;
}

/* Blog Cards Grid */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

/* Blog Card — Unified Horizontal Style */
.blog-card {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease);
}
.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

/* All cards on listing page use horizontal layout */
.blog-card .blog-card-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
.blog-card-thumb {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}
.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}
.blog-card:hover .blog-card-thumb img {
    transform: scale(1.06);
}
.blog-card-category {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(232,93,38,0.3);
}
.blog-card-body {
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.blog-card-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.blog-card-meta i {
    font-size: 0.72rem;
    color: var(--primary);
}
.blog-card-body h2 {
    font-family: var(--font-head);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.32;
    margin: 0;
}
.blog-card-body h2 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--ease);
}
.blog-card-body h2 a:hover {
    color: var(--primary);
}
.blog-card-excerpt {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}
.blog-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.blog-card-author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(232,93,38,0.25);
}
.blog-card-author-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-dark);
}
.blog-card .link-arrow {
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.blog-card .link-arrow:hover {
    gap: 12px;
    color: var(--primary-dark);
}

/* Blog Sidebar */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.blog-sidebar-widget {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: box-shadow 0.3s var(--ease);
}
.blog-sidebar-widget:hover {
    box-shadow: var(--shadow-md);
}
.blog-sidebar-widget h3 {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
    position: relative;
}
.blog-sidebar-widget h3::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--primary);
    transition: width 0.4s var(--ease);
}
.blog-sidebar-widget:hover h3::after {
    width: 60px;
}

/* Sidebar: Search */
.blog-search-form {
    display: flex;
    gap: 0;
}
.blog-search-form input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-dark);
    background: var(--bg-light);
    outline: none;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.blog-search-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(232,93,38,0.1);
}
.blog-search-form button {
    padding: 12px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
    transition: background 0.3s var(--ease), transform 0.2s var(--ease);
}
.blog-search-form button:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

/* Sidebar: Categories */
.blog-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.blog-category-list li {
    border-bottom: 1px solid var(--border);
}
.blog-category-list li:last-child { border-bottom: none; }
.blog-category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    color: var(--text-body);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.blog-category-list a:hover {
    color: var(--primary);
    padding-left: 8px;
}
.blog-category-count {
    background: var(--bg-light);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
    min-width: 28px;
    text-align: center;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.blog-category-list a:hover .blog-category-count {
    background: var(--primary);
    color: #fff;
}

/* Sidebar: Tags */
.blog-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.blog-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--bg-light);
    color: var(--text-body);
    font-size: 0.78rem;
    border-radius: 50px;
    text-decoration: none;
    border: 1px solid var(--border);
    transition: all 0.3s var(--ease), transform 0.2s var(--ease);
}
.blog-tag:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(232,93,38,0.25);
}

/* Sidebar: Social Links */
.blog-social-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.blog-social-link {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    color: var(--text-body);
    text-decoration: none;
    border: 1px solid var(--border);
    font-size: 1rem;
    transition: all 0.35s var(--ease);
    position: relative;
    overflow: hidden;
}
.blog-social-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.35s var(--ease);
    z-index: 0;
}
.blog-social-link i {
    position: relative;
    z-index: 1;
    transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}
.blog-social-link:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.blog-social-link:hover::before {
    transform: scale(1);
}
.blog-social-link:hover i {
    transform: scale(1.15);
}
.blog-social-link.social-instagram::before {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.blog-social-link.social-facebook::before { background: #1877F2; }
.blog-social-link.social-youtube::before { background: #FF0000; }
.blog-social-link.social-x::before { background: #000; }

/* Sidebar: Donation CTA */
.blog-donate-widget {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.blog-donate-widget::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    animation: floatSoft 6s ease-in-out infinite;
}
.blog-donate-widget h3 {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.2);
    position: relative;
}
.blog-donate-widget h3::after {
    background: #fff;
}
.blog-donate-widget p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin-bottom: 18px;
    position: relative;
}
.blog-donate-widget .btn {
    background: #fff;
    color: var(--primary);
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s var(--ease);
    position: relative;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.blog-donate-widget .btn:hover {
    background: var(--bg-warm);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.blog-donate-widget .donate-icon-lg {
    font-size: 2.5rem;
    margin-bottom: 8px;
    display: block;
    position: relative;
    animation: heartBeat 2s infinite;
}

/* Inline donation banner (inside blog posts) */
.blog-inline-cta {
    background: var(--bg-warm);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 28px 32px;
    margin: 36px 0;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.blog-inline-cta:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}
.blog-inline-cta-icon {
    font-size: 2rem;
    color: var(--primary);
    flex-shrink: 0;
}
.blog-inline-cta-text {
    flex: 1;
}
.blog-inline-cta-text p {
    font-size: 0.95rem;
    color: var(--text-body);
    margin: 0 0 12px;
    line-height: 1.6;
}
.blog-inline-cta-text .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Full-width donation banner between posts */
.blog-donation-banner {
    background: linear-gradient(135deg, var(--secondary) 0%, #0F2030 100%);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    text-align: center;
    color: #fff;
    margin: 8px 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.blog-donation-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.blog-donation-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.blog-donation-banner h3 {
    font-family: var(--font-head);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 12px;
    position: relative;
}
.blog-donation-banner p {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.7;
    position: relative;
}
.blog-donation-banner .btn-primary {
    position: relative;
}

/* Blog Post Single Page */
.blog-post-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.blog-post-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease-out;
}
.blog-post-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.35) 100%);
    z-index: 1;
}
.blog-post-hero-content {
    position: relative;
    z-index: 2;
    padding: 50px 0 45px;
    color: #fff;
    width: 100%;
}
.blog-post-category {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 16px;
    animation: fadeUp 0.8s var(--ease) 0.1s both;
    box-shadow: 0 2px 8px rgba(232,93,38,0.3);
}
.blog-post-hero-content h1 {
    font-family: var(--font-head);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    max-width: 800px;
    animation: fadeUp 0.8s var(--ease) 0.2s both;
}
.blog-post-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.8);
    flex-wrap: wrap;
    animation: fadeUp 0.8s var(--ease) 0.35s both;
}
.blog-post-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.blog-post-meta i {
    color: var(--primary-light);
}

/* Blog Post Content */
.blog-post-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    padding: 50px 0 80px;
}
.blog-post-content {
    max-width: 100%;
}
.blog-post-content h2 {
    font-family: var(--font-head);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 36px 0 16px;
    line-height: 1.3;
}
.blog-post-content h3 {
    font-family: var(--font-head);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 28px 0 12px;
}
.blog-post-content p {
    font-size: 1.05rem;
    color: var(--text-body);
    line-height: 1.85;
    margin-bottom: 20px;
}
.blog-post-content ul,
.blog-post-content ol {
    padding-left: 24px;
    margin-bottom: 20px;
}
.blog-post-content li {
    font-size: 1.02rem;
    color: var(--text-body);
    line-height: 1.8;
    margin-bottom: 8px;
}
.blog-post-content blockquote {
    border-left: 4px solid var(--primary);
    margin: 30px 0;
    padding: 20px 28px;
    background: var(--bg-warm);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    color: var(--text-dark);
    font-size: 1.1rem;
    line-height: 1.7;
    position: relative;
}
.blog-post-content blockquote::before {
    content: '\201C';
    font-family: var(--font-head);
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.2;
    position: absolute;
    top: -10px;
    left: 12px;
    line-height: 1;
}
.blog-post-content img {
    width: 100%;
    border-radius: var(--radius-md);
    margin: 24px 0;
    box-shadow: var(--shadow-sm);
}
.blog-post-content .image-caption {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: -16px;
    margin-bottom: 24px;
    font-style: italic;
}

/* Blog Post Author Box */
.blog-author-box {
    display: flex;
    gap: 20px;
    align-items: center;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 28px;
    margin: 40px 0;
    border: 1px solid var(--border);
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.blog-author-box:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.blog-author-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(232,93,38,0.3);
}
.blog-author-info h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.blog-author-info p {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

/* Blog Share Bar */
.blog-share {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 30px 0;
}
.blog-share-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-right: 4px;
}
.blog-share a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    color: var(--text-body);
    text-decoration: none;
    border: 1px solid var(--border);
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
    transition: all 0.35s var(--ease);
}
.blog-share a::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.35s var(--ease);
    z-index: 0;
}
.blog-share a i {
    position: relative;
    z-index: 1;
    transition: color 0.35s var(--ease), transform 0.3s var(--ease);
}
.blog-share a:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.blog-share a:hover::before {
    transform: scale(1);
}
.blog-share a:hover i {
    transform: scale(1.15);
}
.blog-share a.share-fb::before { background: #1877F2; }
.blog-share a.share-tw::before { background: #000; }
.blog-share a.share-wa::before { background: #25D366; }
.blog-share a.share-li::before { background: #0A66C2; }

/* Blog Tags */
.blog-post-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 24px 0;
}
.blog-post-tags .tag-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* Blog Related Posts */
.blog-related {
    padding: 60px 0;
    background: var(--bg-light);
}
.blog-related .section-head {
    margin-bottom: 32px;
}
.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.blog-related .blog-card .blog-card-inner {
    grid-template-columns: 1fr;
}
.blog-related .blog-card-thumb {
    min-height: auto;
    aspect-ratio: 16/9;
}
.blog-related .blog-card-body {
    padding: 24px;
}
.blog-related .blog-card-body h2 {
    font-size: 1.15rem;
}

/* Blog Pagination */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}
.blog-pagination a,
.blog-pagination span {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
    color: var(--text-body);
    background: var(--bg-white);
    transition: all 0.3s var(--ease);
}
.blog-pagination a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-2px);
}
.blog-pagination .active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.blog-pagination .dots {
    border: none;
    background: none;
    color: var(--text-muted);
}

/* Blog "View All" link */
.blog-view-all {
    text-align: center;
    margin-top: 36px;
}
.blog-view-all a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.blog-view-all a:hover {
    gap: 14px;
    color: var(--primary-dark);
}

/* ========================================
   BLOG DARK MODE OVERRIDES
   ======================================== */
[data-theme="dark"] .blog-hero {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}
[data-theme="dark"] .blog-hero-overlay {
    background: linear-gradient(180deg, rgba(13,17,23,0.7) 0%, rgba(13,17,23,0.92) 100%);
}
[data-theme="dark"] .blog-card {
    background: var(--bg-white);
    border-color: var(--border);
}
[data-theme="dark"] .blog-sidebar-widget {
    background: var(--bg-white);
    border-color: var(--border);
}
[data-theme="dark"] .blog-search-form input {
    background: #1a1d26;
    border-color: var(--border);
    color: var(--text-dark);
}
[data-theme="dark"] .blog-tag {
    background: #1a1d26;
    border-color: var(--border);
    color: var(--text-body);
}
[data-theme="dark"] .blog-tag:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
[data-theme="dark"] .blog-category-count {
    background: #1a1d26;
}
[data-theme="dark"] .blog-post-content blockquote {
    background: #1a1d26;
    border-left-color: var(--primary);
}
[data-theme="dark"] .blog-author-box {
    background: #1a1d26;
    border-color: var(--border);
}
[data-theme="dark"] .blog-share a {
    background: #1a1d26;
    border-color: var(--border);
}
[data-theme="dark"] .blog-social-link {
    background: #1a1d26;
    border-color: var(--border);
    color: var(--text-body);
}
[data-theme="dark"] .blog-inline-cta {
    background: #1a1d26;
}
[data-theme="dark"] .blog-donation-banner {
    background: linear-gradient(135deg, #0d1117 0%, #1a1d26 100%);
}
[data-theme="dark"] .blog-related {
    background: var(--bg-light);
}
[data-theme="dark"] .blog-pagination a,
[data-theme="dark"] .blog-pagination span {
    background: var(--bg-white);
    border-color: var(--border);
    color: var(--text-body);
}
[data-theme="dark"] .blog-pagination a:hover,
[data-theme="dark"] .blog-pagination .active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
[data-theme="dark"] .blog-post-hero-overlay {
    background: linear-gradient(0deg, rgba(13,17,23,0.85) 0%, rgba(13,17,23,0.3) 60%, rgba(13,17,23,0.45) 100%);
}

/* ========================================
   BLOG RESPONSIVE
   ======================================== */
@media (max-width: 1200px) {
    .blog-layout,
    .blog-post-layout {
        grid-template-columns: 1fr 300px;
        gap: 30px;
    }
}
@media (max-width: 992px) {
    .blog-layout,
    .blog-post-layout {
        grid-template-columns: 1fr;
    }
    .blog-sidebar {
        order: 2;
    }
    .blog-card .blog-card-inner {
        grid-template-columns: 1fr;
    }
    .blog-card-thumb {
        min-height: auto;
        aspect-ratio: 16/9;
    }
    .blog-hero-content h1 {
        font-size: 2.4rem;
    }
    .blog-post-hero-content h1 {
        font-size: 2.2rem;
    }
    .blog-donation-banner {
        padding: 36px 28px;
    }
}
@media (max-width: 768px) {
    .blog-hero-content h1 {
        font-size: 2rem;
    }
    .blog-hero-content {
        padding: 50px 20px 40px;
    }
    .blog-post-hero {
        min-height: 340px;
    }
    .blog-post-hero-content h1 {
        font-size: 1.8rem;
    }
    .blog-related-grid {
        grid-template-columns: 1fr;
    }
    .blog-author-box {
        flex-direction: column;
        text-align: center;
    }
    .blog-inline-cta {
        flex-direction: column;
        text-align: center;
    }
    .blog-card-body {
        padding: 24px;
    }
    .blog-card-body h2 {
        font-size: 1.35rem;
    }
}
@media (max-width: 480px) {
    .blog-hero-content h1 {
        font-size: 1.65rem;
    }
    .blog-card-body {
        padding: 20px;
    }
    .blog-card-body h2 {
        font-size: 1.2rem;
    }
    .blog-sidebar-widget {
        padding: 22px;
    }
    .blog-post-content h2 {
        font-size: 1.4rem;
    }
    .blog-post-content p {
        font-size: 0.98rem;
    }
    .blog-share {
        flex-wrap: wrap;
    }
    .blog-post-hero-content h1 {
        font-size: 1.5rem;
    }
    .blog-donation-banner h3 {
        font-size: 1.3rem;
    }
}

/* ========================================
   SMOOTH HOVER TRANSITIONS (GLOBAL)
   ======================================== */
.btn,
.link-arrow,
.nav-donate-btn,
.service-card,
.news-card,
.about-card,
.stat-card,
.cta-box {
    transition-timing-function: var(--ease-spring);
}

/* ========================================
   REDUCE MOTION FOR ACCESSIBILITY
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-animate] { opacity: 1; transform: none; }
    .hero-slide { transition-duration: 0.01ms !important; }
    .scroll-progress { display: none; }
    .cursor-spotlight { display: none; }
    .gradient-blob { display: none; }
}