/* =========================================================
   VARIABLES & GLOBALS
   ========================================================= */
:root {
    --primary-red: #D32F2F;      
    --primary-red-dark: #B71C1C; 
    --primary-blue: #0B2B5C;     
    --bg-light: #F8FAFC;         
    --text-dark: #1E293B;        
    --text-muted: #64748B;
    --white: #FFFFFF;
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* { margin: 0; padding: 0; box-sizing: border-box; }


html {
    background-color: #ffffff; 
}

html, body {
    /* 🔴 MASTER FONT FIX: Back to Original Ubuntu */
    font-family: 'Ubuntu', sans-serif !important; 
    color: var(--text-dark); 
    background-color: transparent; 
    line-height: 1.6; 
    max-width: 100vw !important;
    overflow-x: hidden !important; 
    position: relative; 
    z-index: 0;
}
/* 🔴 1. THE DIAGONAL MOTION LINES (-45 Degree Angle) */
body::before {
    content: '';
    position: fixed;
    /* Dabba bada banaya taaki tirchhi lines poori screen cover karein */
    top: -50%; left: -50%; width: 200vw; height: 200vh; 
    
    /* Elegant 45-degree slanted lines */
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(11, 43, 92, 0.035) 0,        /* Line color & faint opacity */
        rgba(11, 43, 92, 0.035) 1px,      /* Line thickness (1px) */
        transparent 1px,
        transparent 45px                  /* Spacing between lines (45px) */
    );
    
    /* 🔴 THE MAGIC MASK: Lines center me dikhengi aur kinaro pe fade ho jayengi */
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
    
    z-index: -2; 
    pointer-events: none; 
}

/* 🔴 2. THE PREMIUM AMBIENT GLOWS */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    
    /* Screen ke dono corners se aati hui bohot halki light */
    background: 
        radial-gradient(circle at 15% 30%, rgba(211, 47, 47, 0.04) 0%, transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(11, 43, 92, 0.04) 0%, transparent 45%);
        
    z-index: -3; /* Lines ke theek peeche light jalegi */
    pointer-events: none; 
}

p, span, a, input, select, td, th { 
    font-family: 'Ubuntu', sans-serif; 
    color: inherit;
}
/* =========================================================
   UTILITIES
   ========================================================= */
a { text-decoration: none; color: inherit; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.mt-20 { margin-top: 20px; }
.section-padding { padding: 45px 0; }
.text-red { color: var(--primary-red); }
.text-blue { color: var(--primary-blue); }

/* =========================================================
   HEADER & NAVBAR
   ========================================================= */
.top-header { background-color: var(--primary-blue); color: var(--white); font-size: 0.85rem; padding: 8px 0; position: relative; z-index: 1000; }
.top-header-inner { display: flex; justify-content: space-between; align-items: center; }
.top-right a { margin-left: 15px; opacity: 0.8; transition: ease 0.3s; }
.top-right a:hover { opacity: 1; }

.main-navbar { position: absolute; top: 35px; left: 0; width: 100%; z-index: 100; padding: 15px 0; transition: all 0.3s ease-in-out; }
.main-navbar.sticky { position: fixed; top: 0; left: 0; background: var(--white); box-shadow: 0 5px 20px rgba(0,0,0,0.1); padding: 10px 0; z-index: 9999; }

.em-number {
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.nav-inner { display: flex; justify-content: space-between; align-items: center; }
.logo h2 { font-size: 1.4rem; font-weight: 800; color: var(--primary-blue); line-height: 1.1; }
.logo p { font-size: 0.75rem; color: var(--primary-red); font-weight: 700; text-transform: uppercase; }
.nav-links { list-style: none; display: flex; gap: 25px; }

.nav-links a { 
    color: var(--primary-blue); 
    font-size: 0.95rem; 
    transition: ease 0.3s; 
    text-shadow: 0px 1px 2px rgba(255,255,255,0.8); 
}
.main-navbar.sticky .nav-links a { text-shadow: none; }
.nav-links a:hover { color: var(--primary-red); }

/* Compact Navbar Button */
.nav-inner .btn-nav { 
    padding: 10px 24px !important; 
    font-size: 0.9rem !important; 
    box-shadow: 0 4px 10px rgba(139, 0, 0, 0.3); 
    border-radius: 50px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; cursor: pointer; transition: var(--transition); }

.btn-premium-red {
    /* Top: Dark Red, Middle: Bright Red, Bottom: Deep Red */
    background: linear-gradient(180deg, #B20A0A 0%, #E61515 45%, #B20A0A 100%);
    color: var(--white);
    border: none;
    border-radius: 50px;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    
    /* 🔴 THE MAGIC: Bahar ka shadow + Andar ka Golden/Orange Glow */
    box-shadow: 
        0 8px 15px rgba(139, 0, 0, 0.4), /* Bahar ka dark shadow */
        inset 0px -5px 12px rgba(255, 170, 0, 0.6), /* Neeche ka orange glow */
        inset 0px 2px 5px rgba(255, 255, 255, 0.4); /* Upar ki white shine */
        
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Text ko pop karne ke liye */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Icon aur text ke beech ka gap */
}

.btn-premium-red:hover {
    transform: translateY(-4px) scale(1.02);
    /* Hover par golden glow aur badh jayega */
    box-shadow: 
        0 12px 20px rgba(139, 0, 0, 0.5), 
        inset 0px -5px 15px rgba(255, 200, 0, 0.9), 
        inset 0px 2px 5px rgba(255, 255, 255, 0.5);
}
.btn-premium-red:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 25px rgba(139, 0, 0, 0.5); color: var(--white); }
.btn-premium-red:hover::after { left: 150%; }

.btn-premium-white {
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); color: var(--primary-red); 
    border: 2px solid var(--white); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); padding: 15px 40px; font-size: 1.1rem;
}
.btn-premium-white:hover { background: var(--white); color: var(--primary-red-dark); transform: translateY(-4px) scale(1.02); border-color: var(--primary-red); }

/* =========================================================
   HERO SLIDER
   ========================================================= */
.hero-slider { position: relative; width: 100%; height: 85vh; overflow: hidden; background-color: #FAF9F6; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 1s ease-in-out, visibility 1s; z-index: 1; }
.slide.active { opacity: 1; visibility: visible; z-index: 2; }

.slide-bg { width: 100%; height: 100%; background-size: cover; background-position: center 10%; background-repeat: no-repeat; transform: scale(1); transition: transform 6s linear; }
.slide.active .slide-bg { transform: scale(1.03); }

.text-overlay {
    position: absolute; top: 75%; left: 50%; transform: translate(-50%, -30%); text-align: center;
    width: 100%; max-width: 900px; z-index: 10; opacity: 0; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.slide.active .text-overlay { opacity: 1; transform: translate(-50%, -50%); transition-delay: 0.2s; }

.text-overlay::before {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 140%; height: 180%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0) 70%);
    filter: blur(25px); z-index: -1; pointer-events: none;
}

/* =========================================================
   HERO SLIDER TEXT FIX (Consistent Global Ubuntu Font)
   ========================================================= */

body .hero-slider .slide .text-overlay h1 { 
    font-family: 'Ubuntu'; 
    
    font-weight: 800; /* Ubuntu ka Extra Bold */
    font-size: 4.8rem; 
    line-height: 1.1; 
    margin-bottom: 12px; 
    /* Glow aur shadow effect exactly like the reference image */
    text-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 10px rgba(255,255,255,1), 2px 2px 0px rgba(255,255,255,0.8); 
    letter-spacing: -1px; 
}

/* Mobile Screens ke liye size adjust */
@media (max-width: 768px) {
    body .hero-slider .slide .text-overlay h1 {
        font-size: 2.5rem; 
    }
}
.text-overlay .subtitle { font-size: 1.25rem; color: #3B3B3B; margin-bottom: 20px; text-shadow: -1px -1px 0 rgba(255,255,255,0.9), 1px -1px 0 rgba(255,255,255,0.9), -1px 1px 0 rgba(255,255,255,0.9), 1px 1px 0 rgba(255,255,255,0.9); }
.hero-buttons-wrapper { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

.text-overlay h1, .text-overlay p, .hero-buttons-wrapper { opacity: 0; transform: translateY(20px); transition: all 0.5s ease; }
.slide.active .text-overlay h1 { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.slide.active .text-overlay p { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.slide.active .hero-buttons-wrapper { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }

/* =========================================================
   EMERGENCY BAR (No-SVG Optimized)
   ========================================================= */
.emergency-wrapper { position: relative; z-index: 20; margin-top: -35px; }
.flex-center { display: flex; justify-content: center; }

.emergency-bar {
    background: var(--white); 
    border-radius: 100px; 
    padding: 10px 25px; /* Thoda tight aur sleek kiya */
    display: inline-flex; justify-content: space-between; align-items: center; 
    width: 100%; max-width: 900px;
    box-shadow: 0 10px 30px rgba(11, 43, 92, 0.08); /* Deep premium shadow */
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.emergency-left, .emergency-right { display: flex; align-items: center; gap: 12px; }
.em-divider { width: 1px; height: 25px; background-color: #E2E8F0; margin: 0 15px; }

.icon-circle { 
    display: flex; justify-content: center; align-items: center; 
    width: 36px; height: 36px; border-radius: 50%; 
}
.bg-red-soft { background-color: rgba(211, 47, 47, 0.1); }
.bg-yellow-soft { background-color: rgba(221, 107, 32, 0.1); }
.emoji-icon { font-size: 1.1rem; line-height: 1; } /* Emojis ko center karne ke liye */

.em-text { color: var(--text-muted); font-weight: 600; font-size: 1.05rem; }
.em-number { 
    color: var(--primary-red-dark); font-weight: 800; font-size: 1.25rem; 
    letter-spacing: 0.5px; text-decoration: none; transition: color 0.3s ease;
    animation: blink 1.5s infinite; 
}
.hover-red-text:hover { color: var(--primary-red); animation: none; } /* Hover pe blink ruk jayega */

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.help-section { display: flex; align-items: center; gap: 8px; margin-right: 15px; transition: opacity 0.3s; }
.help-section:hover { opacity: 0.7; }
.help-text { color: var(--text-dark); font-weight: 700; font-size: 1.05rem; }

/* 🔴 TEXT BADGES STYLING (Replaced SVGs) */
.social-text-links { display: flex; gap: 8px; }
.social-badge {
    font-size: 0.75rem; font-weight: 800; font-family: 'Ubuntu', sans-serif;
    padding: 6px 12px; border-radius: 50px; 
    background: #F1F5F9; color: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    text-decoration: none; display: flex; align-items: center; justify-content: center;
}

.hover-blue-bg:hover { background: #3182CE; color: #fff; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(49, 130, 206, 0.3); }
.hover-red-bg:hover { background: #E53E3E; color: #fff; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(229, 62, 62, 0.3); }

/* Mobile View Adjustments */
@media (max-width: 768px) {
    .emergency-wrapper { margin-top: -50px; padding: 0 15px; }
    .emergency-bar { flex-direction: column; border-radius: 20px; padding: 20px; gap: 15px; text-align: center; }
    .em-divider { display: none; }
    .help-section { margin-right: 0; margin-bottom: 10px; justify-content: center;}
    .emergency-right { flex-direction: column; }
}
/* =========================================================
   EMERGENCY ALARM PULSE GLOW
   ========================================================= */
.emergency-glow-icon {
    border-radius: 50%;
    /* 🔴 Ye animation continuous chalti rahegi */
    animation: alarmPulseGlow 1.5s infinite;
}

/* Perfect Radar Glow Wave */
@keyframes alarmPulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(211, 47, 47, 0); }
    100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); }
}

/* 🔴 ICONS KO PERFECTLY CENTER KARNE KE LIYE FIX */
.social-text-links { display: flex; gap: 8px; }

.social-badge {
    width: 34px; 
    height: 34px; 
    padding: 0; /* Padding zero karke width/height di taaki exact gol bane */
    border-radius: 50%; 
    background: #F1F5F9; 
    color: var(--text-muted);
    font-size: 1.05rem; /* Icon ka size */
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    text-decoration: none;
}

.hover-blue-bg:hover { background: #3182CE; color: #fff; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(49, 130, 206, 0.3); }
.hover-red-bg:hover { background: #E53E3E; color: #fff; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(229, 62, 62, 0.3); }

/* =========================================================
   ATTRACTIVE ACTION CARDS (Premium Fit Layout)
   ========================================================= */
.section-heading-center {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
}
.section-heading-center h2 {
    font-size: 2.5rem;
    color: var(--text-dark);
}
.section-heading-center p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* =========================================================
   EDGE-TO-EDGE COVER CARDS (For Non-Transparent Images)
   ========================================================= */
/* =========================================================
   ATTRACTIVE ACTION CARDS (Premium Grid & Lag-Free Fix)
   ========================================================= */

/* 1. Main Grid Layout */
.action-grid-cover {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

/* 2. Premium Card Styling */
.action-card-cover {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    border: 1px solid #E2E8F0;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    height: 100%; /* Sabhi cards ki height barabar rakhne ke liye */
    
    /* Lag-free animations ke liye GPU acceleration */
    transform: translateZ(0);
    will-change: transform, box-shadow;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s ease, border-color 0.4s ease;
}

.action-card-cover:hover {
    transform: translateY(-8px) translateZ(0);
    box-shadow: 0 20px 40px rgba(11, 43, 92, 0.08);
    border-color: #CBD5E1;
}

/* 3. Image Section */
.card-cover-image {
    width: 100%;
    height: 220px; /* Premium height */
    position: relative;
    border-bottom: 2px solid #F1F5F9;
    overflow: hidden; /* Hover par image bahar na nikle */
}

.card-cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    transform: scale(1.01); /* Default slight scale */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.action-card-cover:hover .card-cover-image img {
    transform: scale(1.1); /* Hover zoom effect */
}

/* 4. Text & Button Area */
.card-body {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pura space fill karega taaki button bottom me jaye */
    align-items: center;
    text-align: center;
}

.card-body h3 {
    color: var(--primary-blue);
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    font-family: 'Ubuntu', sans-serif;
}

.card-body p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* 5. Smart Button Placement (No Inline Styles Needed) */
.card-body .btn-solid-red, 
.card-body .btn-route {
    margin-top: auto; /* YEH MAGIC HAI: Button ko hamesha bottom me chipka dega */
    width: 100%; /* Button card ki puri width lega */
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* =========================================================
   MOBILE RESPONSIVENESS FOR CARDS
   ========================================================= */
@media (max-width: 992px) {
    .action-grid-cover { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 25px; 
    }
}

@media (max-width: 768px) {
    .action-grid-cover { 
        grid-template-columns: 1fr; /* Mobile par ek line me ek card */
        gap: 20px; 
        padding: 0 5px; /* Side se thoda buffer taaki touch na ho */
    }
    
    .action-card-cover {
        max-width: 420px; /* Card ko limit me rakho taaki lamba stretch na ho */
        margin: 0 auto; /* Card ko center mein rakho */
    }

    .card-cover-image { 
        height: 190px; /* Mobile par image ki height thodi kam ki */
    }

    .card-body {
        padding: 25px 20px; /* Mobile par internal gap tight kiya */
    }
}/* Standardized Inputs/Buttons */
.btn-solid-red {
    background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%);
    color: #ffffff;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 1.05rem;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
    transition: all 0.3s;
    margin-top: auto; /* Locks button to bottom */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    box-shadow: 0 6px 15px rgba(211, 47, 47, 0.25);
    cursor: pointer;
}

.btn-solid-red:hover {
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.4);
    transform: translateY(-2px);
    color: #ffffff;
}

.form-select-cover {
    width: 100%;
    padding: 14px 15px;
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: var(--primary-blue);
    background-color: #F8FAFC;
    cursor: pointer;
    margin-top: auto; /* Locks dropdown to bottom */
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%230B2B5C" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    transition: all 0.3s ease;
}

.form-select-cover:focus, .form-select-cover:hover {
    border-color: var(--primary-blue);
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(11, 43, 92, 0.08);
    outline: none;
}


/* ================= SECTION ================= */
.about-impact {
    background: linear-gradient(180deg, #ffffff, #f1f5f9);
    padding: 100px 0;
    position: relative;
    z-index: 2;
}

/* subtle glow */
.about-impact::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(211,47,47,0.08), transparent 70%);
    top: 10%;
    right: 10%;
    z-index: 0;
}

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

/* ================= GRID ================= */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ================= TEXT ================= */
.about-text {
    color: #475569;
    font-size: 1.05rem;
    margin: 15px 0 25px;
    line-height: 1.7;
}

.impact-text {
    color: #64748B;
    margin-bottom: 30px;
}

.section-title span {
    color: #D32F2F;
}

/* ================= SUB HEADING ================= */
.sub-heading {
    font-weight: 800;
    color: #0B2B5C;
    margin-bottom: 15px;
}

/* ================= LIST ================= */
.custom-list-final li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-weight: 600;
    color: #1E293B;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.blue-dot {
    background: #0B2B5C;
    box-shadow: 0 0 10px rgba(11,43,92,0.4);
}

.red-dot {
    background: #D32F2F;
    box-shadow: 0 0 10px rgba(211,47,47,0.4);
}

/* ================= STATS ================= */
.stats-container-final {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* GLASS CARD */
.stat-card-final {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    padding: 35px 20px;
    border-radius: 20px;
    text-align: center;

    border: 1px solid rgba(255,255,255,0.4);

    box-shadow: 
        0 10px 30px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);

    transition: all 0.4s ease;
}

.stat-card-final:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}

/* COLORS */
.stat-card-final.red {
    border-top: 4px solid #D32F2F;
}

.stat-card-final.blue {
    border-top: 4px solid #0B2B5C;
}

/* TEXT */
.stat-card-final h3 {
    font-size: 2.6rem;
    font-weight: 900;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.stat-card-final.red h3 {
    color: #D32F2F;
}

.stat-card-final.blue h3 {
    color: #0B2B5C;
}

.stat-card-final p {
    font-size: 0.8rem;
    color: #64748B;
    font-weight: 800;
    letter-spacing: 1.5px;
}

/* BIG CARD */
.full-card {
    grid-column: span 2;
}

/* HERO RED CARD */
.highlight {
    background: linear-gradient(135deg, #D32F2F, #B71C1C);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.highlight h3,
.highlight p {
    color: #fff;
}

/* shine effect */
.highlight::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);
    transform: rotate(25deg);
}

/* =========================================================
   SPINNING ASHOK CHAKRA WATERMARK (Bulletproof Fix)
   ========================================================= */
.chakra-spin-watermark {
        position: absolute;
    bottom: -10%;
    left: -23%;
    width: auto;
    height: auto;
    max-height: 720px;
    mix-blend-mode: multiply;
    opacity: 0.12;
    z-index: 1;
    pointer-events: none;
    animation: spinChakra 40s linear infinite;
}

@keyframes spinChakra {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* =========================================================
   ABOUT MISSION & TIMELINE (Mobile Responsiveness Fix)
   ========================================================= */

@media (max-width: 768px) {
    
    /* 1. Section Padding & Spacing Fix */
    .about-impact {
        padding: 50px 0 !important; /* 100px se ghata kar 50px kiya */
        overflow: hidden !important;
    }

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* 2. Text Content Alignment */
    .about-content {
        text-align: center; /* Mobile pe center acha lagta hai */
    }
    
    .custom-list-final li {
        justify-content: center; /* List items bhi center align honge */
        font-size: 0.95rem;
    }

    /* 3. Timeline Container Lock */
    .impact-section-wrapper {
        padding: 0 !important;
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        box-sizing: border-box;
    }

    .stats-timeline-fluid {
        gap: 20px !important; /* Cards ke beech ki jagah thodi kam ki */
        padding-top: 10px;
    }

    /* 4. The Vertical Line (Shifted to Left Edge) */
    .stats-timeline-fluid::before {
        left: 20px !important; /* Line ko ekdum left margin pe set kiya */
        transform: none !important;
    }

    /* 5. Timeline Nodes (Circles) Placement */
    .step-node {
        left: 20px !important; /* Exact line ke center me aayenge */
        width: 18px !important;
        height: 18px !important;
        border-width: 3px !important;
        transform: translate(-50%, -50%) !important;
    }

    /* 6. Timeline Cards (Layout & Width Fix) */
    .timeline-step {
        justify-content: flex-start !important;
        padding-left: 55px !important; /* Line se content box ki safe doori */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .step-content {
        width: 100% !important;
        flex-direction: row !important; /* Icon aur text aamne-saamne */
        text-align: left !important;
        padding: 15px !important;
        gap: 15px !important;
        border: 1px solid rgba(11,43,92,0.08) !important;
        border-left-width: 4px !important; /* Premium left side indicator */
        border-left-style: solid !important;
    }
    
    /* Left/Right color logic force */
    .timeline-step.left .step-content { border-left-color: var(--primary-red) !important; }
    .timeline-step.right .step-content { border-left-color: var(--primary-blue) !important; }

    /* Hide horizontal lines joining node to card (mobile pe zaroorat nahi) */
    .step-content::after {
        display: none !important; 
    }

    /* 7. Typography & Icon Scaling (So they don't stretch the box) */
    .step-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .step-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .step-text h3 {
        font-size: 1.6rem !important; /* Bada text shrink kiya */
    }
    
    .step-text p {
        font-size: 0.85rem !important;
    }

    .chakra-spin-watermark{
            position: absolute;
        bottom: 21%;
        left: -80%;
        width: auto;
        height: auto;
        max-height: 638px;
        mix-blend-mode: multiply;
        opacity: 0.12;
        z-index: 1;
        pointer-events: none;
        animation: spinChakra 40s linear infinite;
    }
}
/* =========================================================
   UPCOMING CAMPS - DESKTOP PERFECT & MOBILE STABLE
   ========================================================= */

/* 1. Desktop Grid Layout (Locked to 3 columns) */
.camps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Desktop pe strictly 3 column */
    gap: 30px;
    margin-top: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* 2. Card Design - Height lock fix */
.camp-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    height: 100%; /* Important: Saare cards ki height barabar rakhega */
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.camp-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(11, 43, 92, 0.08);
}

/* 3. Image Fix - Desktop par stretch nahi hogi */
.camp-img {
    width: 100%;
    height: 220px; /* Fixed height for consistency */
    object-fit: cover; /* Image ko bina stretch kiye fit karega */
    display: block;
}

/* 4. Details Area - Spacing Fix */
.camp-details {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ye bachi hui space gher lega taaki footer bottom me rahe */
}

.camp-title {
    color: var(--primary-blue);
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.3;
    font-family: 'Ubuntu', sans-serif;
}

.camp-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.meta-item svg {
    width: 18px;
    height: 18px;
    fill: var(--primary-red);
}

/* 5. Footer Fix - Aligning Status and Button */
.camp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Button ko bottom edge pe chipka dega */
    padding-top: 15px;
    border-top: 1px solid #F1F5F9;
}

/* =========================================================
   PREMIUM PHOTO GALLERY UPGRADE (Masonry Grid & Smooth Hover)
   ========================================================= */

.gallery-premium-grid {
    display: grid;
    /* BASE GRID: 4 column grid based on standard desktop width */
    grid-template-columns: repeat(4, 1fr);
    /* Set base row height, span logic works from here */
    grid-auto-rows: 240px; 
    gap: 20px;
    margin-top: 40px;
}

.gallery-premium-item {
    position: relative;
    border-radius: 25px; /* Smoother, larger radius */
    overflow: hidden;
    /* Smooth shadow that gets deeper on hover */
    box-shadow: 0 10px 30px rgba(11, 43, 92, 0.08); 
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #FAFBFF; /* Base image background for loading */
    transform: translateZ(0); /* Hardware acceleration */
}

/* PSEUDO-MASONRY LOGIC: Creating varied shapes strictly using CSS Grid */
.gallery-premium-item.tall { grid-row: span 2; } /* Lambi Photo */
.gallery-premium-item.wide { grid-column: span 2; } /* Chauri Photo */
.gallery-premium-item.big { grid-column: span 2; grid-row: span 2; } /* Badi Rectangular Photo */


.gallery-premium-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Hover Interaction: Scale + Slight Move + Heavy Shadow */
.gallery-premium-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(11, 43, 92, 0.15);
    z-index: 10; /* Item comes forward */
}

.gallery-premium-item:hover img {
    transform: scale(1.1) rotate(1deg); /* Slight rotation gives a dynamic feel */
}

/* --- THE OVERLAY UPDATE (Lighter, Premium Fade-in) --- */
.gallery-premium-overlay {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 100%;
    /* Softer linear gradient from bottom */
    background: linear-gradient(to top, rgba(11, 43, 92, 0.9) 0%, transparent 70%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    color: #ffffff;
    
    /* State: Initially Hidden (Fade and Slide Up) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); 
    transition: all 0.5s ease-in-out;
}

.gallery-premium-item:hover .gallery-premium-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Slides up smoothly */
}

.gallery-premium-overlay .g-location {
    font-size: 1.15rem;
    font-weight: 800;
    font-family: 'Ubuntu', sans-serif;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gallery-premium-overlay .g-location i { color: var(--primary-red); }

.gallery-premium-overlay .g-date {
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* =========================================================
   BULLETPROOF MOBILE RESPONSIVENESS (VERTICAL)
   ========================================================= */

/* Tablet View (Small Laptops) */
@media (max-width: 992px) {
    .gallery-premium-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 column layout */
        grid-auto-rows: 200px; /* Reduced row height */
        gap: 15px;
    }
}

/* Mobile View (Strictly 2 columns with varied sizes) */
@media (max-width: 768px) {
    .gallery-premium-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Forces 2 columns */
        grid-auto-rows: 160px; /* Short base rows */
        gap: 12px;
    }

    /* Resetting spans to fit 2-column layout perfectly */
    .gallery-premium-item.tall { grid-row: span 2; }
    .gallery-premium-item.wide { grid-column: span 1; } /* Reset wide to single column width */
    .gallery-premium-item.big { grid-column: span 2; grid-row: span 2; } /* Keep big items big, 2x2 */
    
    /* Make overlay text smaller to fit */
    .gallery-premium-overlay { padding: 15px; }
    .gallery-premium-overlay .g-location { font-size: 0.95rem; }
    .gallery-premium-overlay .g-date { font-size: 0.75rem; }
}

/* Small Phone (Vertical Stacking) */
@media (max-width: 480px) {
    .gallery-premium-grid {
        grid-template-columns: 1fr !important; /* Force single column stacking */
        grid-auto-rows: 250px; /* Larger base row height for single photo */
        gap: 15px;
    }
    
    /* Reset all spans to 1x1 on small phones */
    .gallery-premium-item.tall { grid-row: span 1; }
    .gallery-premium-item.wide { grid-column: span 1; }
    .gallery-premium-item.big { grid-column: span 1; grid-row: span 1; }
}
/* =========================================================
   LOAD MORE BUTTON (Premium Outline & Responsive)
   ========================================================= */

.btn-outline-red {
    background: #ffffff;
    color: var(--primary-red);
    border: 2px solid var(--primary-red);
    padding: 14px 45px;
    font-size: 1.05rem;
    font-weight: 800;
    font-family: 'Ubuntu', sans-serif;
    border-radius: 10px; 
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.08); /* Halka shadow depth ke liye */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover par ye outline se Solid Red ban jayega */
.btn-outline-red:hover {
    background: var(--primary-red);
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(211, 47, 47, 0.3);
    transform: translateY(-3px);
}

/* Icon animation on hover */
.btn-outline-red:hover i {
    transform: rotate(180deg);
    transition: transform 0.4s ease;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .btn-outline-red {
        width: 100%; /* Mobile pe poori chaurai lega taaki tap karna aasan ho */
        padding: 14px 20px;
        font-size: 1rem;
    }
}
/* =========================================================
   MOBILE RESPONSIVENESS FOR CAMPS
   ========================================================= */
@media (max-width: 992px) {
    .camps-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
}

@media (max-width: 768px) {
    .camps-grid { 
        grid-template-columns: 1fr; 
        gap: 20px; 
        padding: 0; /* Padding zero kardi taaki extra chaurai na le */
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }
    
    .camp-card {
        width: 100%; /* Card ab exactly phone ki width lega */
        max-width: 100%; /* 420px limit hata di, screen faadna band */
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    .camp-img {
        height: 190px;
    }
    
    .camp-details {
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .camp-footer {
        display: flex;
        flex-direction: row; 
        flex-wrap: wrap; /* 🔴 THE MAGIC FIX: Agar jagah kam hui toh button screen todne ke bajaye automatically neeche wali line mein shift ho jayega */
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
}
/* Specific Camp Buttons */
.btn-camp {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--white);
    transition: all 0.3s ease;
}

/* =========================================================
   ROUTING BUTTONS (For Navigation Links without Modal)
   ========================================================= */
.btn-route {
    background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%);
    color: #ffffff !important;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    box-shadow: 0 6px 15px rgba(211, 47, 47, 0.25);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}

.btn-route:hover {
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.4);
    transform: translateY(-2px);
    color: #ffffff;
}

.btn-camp-red { background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%); }
.btn-camp-red:hover { box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3); transform: scale(1.05); }

.btn-camp-orange { background: linear-gradient(135deg, #DD6B20 0%, #C05621 100%); }
.btn-camp-orange:hover { box-shadow: 0 4px 12px rgba(221, 107, 32, 0.3); transform: scale(1.05); }

/* Responsive adjustments for Mobile */



/* =========================================================
   NEW BUTTON STYLE (Dark Blue)
   ========================================================= */
.btn-premium-blue {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #1E3A8A 100%);
    color: var(--white);
    border: none;
    box-shadow: 0 8px 15px rgba(11, 43, 92, 0.3), 0px 5px 20px rgba(49, 130, 206, 0.2);
    padding: 12px 35px;
    font-size: 1.05rem;
}
.btn-premium-blue:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 25px rgba(11, 43, 92, 0.4); color: var(--white); }

/* =========================================================
   OUR DEDICATED TEAM SECTION (Premium Card Layout)
   ========================================================= */
.team-section { overflow: hidden; } /* Prevents absolute images from breaking page */

.section-heading-left { text-align: left; margin-bottom: 20px; }
.section-heading-left .subtitle { color: var(--text-muted); font-size: 1.15rem; font-weight: 600; }

.team-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr; /* Left grid bada, right card chhota */
    gap: 40px;
    align-items: stretch; /* Dono side barabar height ki hongi */
}

/* Left: Cards Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.team-card {
    background: var(--white);
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    text-align: center;
    border: 1px solid #F1F5F9;
    transition: var(--transition);
}
.team-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: #E2E8F0; }

.team-img-wrapper {
    width: 100%;
    aspect-ratio: 4/5; /* Passport photo jaisa ratio */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}
.team-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }

.team-card h4 { font-size: 0.95rem; color: var(--primary-blue); font-weight: 800; margin-bottom: 2px; }
.team-card p { font-size: 0.8rem; color: var(--text-muted); font-weight: 700; }

/* 🔴 Right: The Premium White Card Fix */
.team-right {
    position: relative;
    background: #ffffff; /* Safed background jo photo ke dabbe ko chhupa lega */
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(11, 43, 92, 0.06);
    border: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden; /* Photo card ke bahar na gire */
}

/* Content ko image ke upar rakhne ke liye z-index */
.contact-list { position: relative; z-index: 10; margin-bottom: 20px; }
.contact-item { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.c-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.c-icon svg { width: 20px; height: 20px; }

.c-info h4 { font-size: 1.1rem; color: var(--text-dark); margin-bottom: 2px; }
.c-info p { font-size: 0.85rem; color: var(--text-muted); }

.team-emergency { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    position: relative; 
    z-index: 10; 
    margin-top: auto; /* Ise bottom ki taraf push karega */
    padding-top: 20px; 
}
.team-emergency h3 { font-size: 1.4rem; color: var(--primary-blue); font-weight: 900; }

.social-icons {
    position: relative;
    z-index: 10;
}

/* 🔴 The Overlapping Portrait Fixed */
.team-leader-portrait {
    position: absolute;
    bottom: 0;
    right: -15px; /* Edge ke paas set kiya */
    width: 320px; /* Size perfectly scale kiya */
    height: auto;
    z-index: 1; /* Text aur icons ke peeche rahegi */
    pointer-events: none;
    /* mix-blend-mode hata diya kyunki ab box pure white hai */
}

/* =========================================================
   OUR DEDICATED TEAM (Mobile Responsiveness Fix)
   ========================================================= */

@media (max-width: 992px) {
    /* Tablet & Small Desktop Fix */
    .team-layout { grid-template-columns: 1fr; gap: 40px; }
    .team-right { padding: 35px 30px; }
}

@media (max-width: 768px) {
    
    /* 1. Prevent Horizontal Scroll & Fix Spacing */
    .team-section {
        overflow: hidden !important;
        padding: 40px 0;
    }

    /* 2. Team Cards Grid - 2x2 Layout lock */
    .team-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important; /* Force 2 columns */
        gap: 12px !important; /* Gap kam kiya taaki 360px me theek se fit ho */
        width: 100%;
    }

    /* 3. Team Card internal padding fix */
    .team-card {
        padding: 10px; /* Thoda space bachaya */
    }
    
    .team-card h4 {
        font-size: 0.9rem !important; /* Mobile pe font thoda theek kiya */
    }
    .team-card p {
        font-size: 0.75rem !important;
    }

    /* 4. Center the "View All Members" button */
    .team-left .mt-20 {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 25px !important;
    }
    .btn-view-all {
        font-size: 0.85rem !important;
        padding: 12px 25px !important;
    }

    /* 5. The White Contact Card (Premium Stack) */
   .team-right {
        width: 100%;
        max-width: 100vw;
        padding: 30px 25px !important; /* Thoda khula space */
        box-sizing: border-box;
        border-radius: 20px;
        margin-top: 15px;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(11, 43, 92, 0.05); /* Premium soft shadow */
        border: 1px solid #F1F5F9;
    }

    /* 2. Contact Items - Perfect vertical alignment */
    .contact-item {
        margin-bottom: 20px;
        gap: 15px; /* Icon aur text ke beech thoda zyada gap */
        align-items: center; /* Exact center align */
    }
    
    .c-icon {
        width: 45px; /* Mobile tap size ke hisaab se better */
        height: 45px;
        flex-shrink: 0;
    }

    .c-info h4 { font-size: 1.05rem !important; margin-bottom: 3px; }
    .c-info p { font-size: 0.85rem !important; color: #64748B; }

    /* 3. The Separator & Emergency Number */
    .team-emergency {
        padding-top: 25px;
        margin-top: 10px;
        border-top: 1px dashed rgba(11, 43, 92, 0.15); /* Softer, premium dashed line */
        justify-content: center; /* Center lock */
        gap: 12px;
    }
    
    /* Phone Icon ko thoda balance kiya */
    .team-emergency .icon-circle {
        width: 36px !important;
        height: 36px !important;
        border-width: 1px !important; /* Border patli ki clean look ke liye */
    }

    .team-emergency h3 {
        font-size: 1.25rem !important;
        letter-spacing: 0.5px;
        color: var(--primary-blue);
    }

    /* 4. Social Icons - Make them look like proper buttons */
    .team-right .social-icons {
        display: flex;
        justify-content: center;
        margin-top: 25px !important;
        gap: 12px;
        position: relative;
        z-index: 10;
    }

    /* Nange icons ko ek soft circle box mein daala */
    .team-right .social-icons .icon-circle {
        width: 36px !important;
        height: 36px !important;
        background: #F8FAFC !important; /* Halka grey/blue background */
        border: 1px solid #E2E8F0 !important;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .team-right .social-icons .icon-circle svg {
        width: 16px;
        height: 16px;
    }

    /* 5. Watermark fade */
    .team-leader-portrait {
                width: 360px !important;
        opacity: 0.06 !important;
        right: -56px !important;
        bottom: -22px !important;
    }
}
/* Base setting for all reveals */
.reveal { 
    opacity: 0; 
    /* 🔴 GPU ACCELERATION: Browser ko pehle hi bata do ki kya animate hoga */
    will-change: opacity, transform; 
    
    /* 🔴 THE LAG KILLER: 'all' hata kar strictly wahi properties likhi hain jo chahiye */
    transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
                
    /* 🔴 JANK REMOVER: Transforms ko smooth karne ki ninja technique */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* The Directional Initial States */
.reveal-up { transform: translateY(40px); } /* Thoda distance kam kiya taaki rendering fast ho */
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.95); }

/* The Active State */
.reveal.active { 
    opacity: 1; 
    transform: translate(0, 0) scale(1); 
}

/* Staggered Delays for Grid elements */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */
@media (max-width: 992px) {
    .text-overlay { padding: 30px 20px; width: 95%; }
    .text-overlay h1 { font-size: 3rem; }
    .grid-2-col, .action-grid { grid-template-columns: 1fr; gap: 30px; }
    .nav-links { display: none; } 
    .action-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .emergency-wrapper { margin-top: -50px; padding: 0 15px; }
    .emergency-bar { flex-direction: column; border-radius: 20px; padding: 20px; gap: 15px; text-align: center; }
    .em-divider { display: none; }
    .help-section { margin-right: 0; margin-bottom: 10px; }
    .emergency-right { flex-direction: column; }
    .action-grid { grid-template-columns: 1fr; }
    .text-overlay h1 { font-size: 2.2rem; }
}

/* =========================================================
   ULTRA-PREMIUM FOOTER DESIGN (NGO Masterpiece)
   ========================================================= */

   /* 🔴 1. MAIN FOOTER WRAPPER (Padding Fix) */
.site-footer {
    background: #040914; /* Deep Midnight Blue (Untouched) */
    color: #ffffff;
    position: relative;
    /* PEHLE: 100px 0 40px THA | AB: Top 60px, Bottom 20px */
    padding: 60px 0 20px; 
    overflow: hidden;
    z-index: 1;
}

/* 🔴 2. FOOTER GRID (Gap & Bottom Spacing Fix) */
.footer-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    /* PEHLE GAP 80px THA, Padding 60px THI. Ab isko compact kiya hai */
    gap: 40px; 
    padding-bottom: 30px; 
}

/* 🔴 3. FOOTER BOTTOM COPYRIGHT (Padding Fix) */
.footer-bottom-premium {
    
    /* PEHLE 40px THA, Ab isko 20px kiya hai */
    padding-top: 20px; 
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
}

/* 🟢 FIX: Ambient Lighting Effect */
.footer-ambient-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: 
        radial-gradient(circle at 10% 10%, rgba(211, 47, 47, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(11, 43, 92, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

/* 🟢 FIX: Heartbeat Particle Background */
.footer-heartbeat-particles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 50 L30 50 L35 40 L45 60 L50 50 L90 50' stroke='rgba(255,255,255,0.02)' fill='none'/%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: -1;
}

/* 🔴 TOP CTA: Glassmorphism Box */
.footer-top-cta {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.cta-text h3 { font-size: 2rem; font-weight: 800; color: var(--primary-red); }
.cta-text p { color: rgba(255,255,255,0.6); font-size: 1rem; }

.cta-form { display: flex; gap: 15px; flex-grow: 1; max-width: 500px; margin-left: 40px; }
.cta-form input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 15px 20px;
    color: white;
    flex-grow: 1;
}



.footer-logo-premium h2 { font-size: 2rem; font-weight: 900; margin-bottom: 5px; letter-spacing: -1px; }
.footer-logo-premium p { color: rgba(255,255,255,0.4); font-size: 0.8rem; letter-spacing: 2px; font-weight: 800; }

.footer-about { margin-top: 25px; color: rgba(255,255,255,0.5); line-height: 1.8; font-size: 0.95rem; }

.footer-h { font-size: 1.25rem; font-weight: 800; margin-bottom: 30px; position: relative; color: white; }
.footer-h::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 40px; height: 3px; background: var(--primary-red); }

.f-links { list-style: none; }
.f-links li { margin-bottom: 18px; }
.f-links li a { color: rgba(255,255,255,0.6); transition: all 0.3s ease; }
.f-links li a:hover { color: var(--primary-red); padding-left: 10px; }

/* 🔴 CONTACT CARD */
.f-contact-card {
    background: rgba(255,255,255,0.02);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,0.05);
}

.f-c-item { display: flex; gap: 15px; margin-bottom: 20px; align-items: flex-start; }
.f-c-icon { font-size: 1.2rem; filter: grayscale(100%); opacity: 0.6; }
.f-c-item p { color: rgba(255,255,255,0.6); font-size: 0.95rem; }

.highlight-phone p { color: #ffffff; font-weight: 800; font-size: 1.1rem; }
.highlight-phone .f-c-icon { filter: none; opacity: 1; }



.footer-social-premium { display: flex; gap: 20px; margin-top: 30px; }
.social-icon-link {
    width: 45px; height: 45px; border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: flex; justify-content: center; align-items: center;
    color: white; transition: all 0.4s ease;
}
.social-icon-link:hover { background: var(--primary-red); transform: translateY(-5px) rotate(10deg); }

/* =========================================================
   FOOTER BACKGROUND IMAGES (With CSS Masking)
   ========================================================= */

.footer-bg-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%; /* Sirf left ka 60% hissa cover karega */
    height: 100%;
    object-fit: cover;
    
    /* 🔴 READABILITY FIX: Opacity sirf 4-5% rakhna */
    opacity: 0.05; 
    
    z-index: 0;
    pointer-events: none; /* Mouse click ko block na kare */
    
    /* 🔴 THE MAGIC FADE: Left me solid black (visible) aur right me jate hue transparent (gayab) */
    -webkit-mask-image: linear-gradient(to right, black 0%, black 40%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black 40%, transparent 100%);
}

.footer-bg-right {
        position: absolute;
    bottom: -15%;
    right: 0%;
    max-height: 110%;
    width: auto;
    opacity: 0.08;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
    mask-image: linear-gradient(to left, black 70%, transparent 100%);
}

/* Ensure container text is above these background images */
.site-footer .container {
    position: relative;
    z-index: 2;
}

/* =========================================================
   FOOTER SECTION - MOBILE (Centered & Icon Alignment Fix)
   ========================================================= */
@media (max-width: 768px) {
    
    .site-footer {
        padding: 50px 0 20px;
    }

    /* 1. Grid Wapas Center Mein */
    .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center; 
    }

    .footer-logo-premium h2 { font-size: 1.8rem; }
    
    .footer-about {
        font-size: 0.9rem;
        margin-top: 15px;
        line-height: 1.6;
        text-align: center;
    }

    /* Social icons center */
    .footer-social-premium {
        justify-content: center; 
        margin-top: 20px;
    }

    /* Headings aur Underline wapas center */
    .footer-h { font-size: 1.2rem; margin-bottom: 25px; text-align: center; }
    .footer-h::after {
        left: 50%; 
        transform: translateX(-50%); 
    }

    /* Quick Links */
    .f-links li { margin-bottom: 12px; text-align: center; }
    .f-links li a { font-size: 0.95rem; }

    /* 2. THE ICON & TEXT FIX (Center lock) */
    .f-contact-card {
        padding: 25px 20px; 
        background: rgba(255, 255, 255, 0.04); 
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center; /* Poora card center align */
    }

    .f-c-item {
        display: flex;
        flex-direction: row; /* Icon aur text aamne samne */
        align-items: center; /* 🔴 ICON FIX: Ab icon upar nahi tAirega, text ke center me lock rahega */
        justify-content: center;
        gap: 12px;
        margin-bottom: 18px;
        width: 100%;
    }

    /* Text padding/margin reset */
    .f-c-item p {
        font-size: 0.9rem;
        text-align: center; /* Lamba text center se wrap hoga */
        margin: 0;
        line-height: 1.5;
    }

    .highlight-phone p { font-size: 1.05rem; }

    /* Icon line-height fix */
    .f-c-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        margin-top: 0; /* Faltu margin hataya */
    }

    /* Background Images fade */
    .footer-bg-left, 
    .footer-bg-right {
        opacity: 0.03; 
        max-height: 75%; 
        bottom: -4%;
        right: -25%;
    }

    /* Copyright */
    .footer-bottom-premium {
        padding-top: 20px;
        font-size: 0.8rem;
        line-height: 1.5;
        text-align: center;
    }
}

.flag-watermark {
   width: 100%;
  height: 250px;
  background: url('./images/flag1.png') no-repeat center;
  background-size: cover;
}

.flag-right{
    right: auto; left: -1%; bottom: 41.4%; max-height: 23rem;
}
/* =========================================================
   SLEEK FAQ SECTION
   ========================================================= */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #E2E8F0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-align: left;
    transition: color 0.3s ease;
    font-family: 'Ubuntu', sans-serif;
    outline: none;
}

.faq-question:hover {
    color: var(--primary-red);
}

.faq-icon {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #94A3B8;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.faq-icon svg {
    width: 100%;
    height: 100%;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); /* Lag-free height animation */
}

.faq-answer p {
    padding-bottom: 24px;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    padding-right: 40px; /* Text icon ke neeche na ghuse */
}

/* Active State Styles */
.faq-item.active .faq-question {
    color: var(--primary-red);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    color: var(--primary-red);
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Safe upper limit for transition */
    transition: max-height 0.5s ease-in-out;
}

/* =========================================================
   FAQ SECTION - MOBILE RESPONSIVENESS
   ========================================================= */
@media (max-width: 768px) {
    
    .faq-section {
        padding: 40px 0;
        overflow: hidden; /* Floating images screen na faadein */
    }

    /* Question bar ko mobile ke hisaab se tight kiya */
    .faq-question {
        padding: 16px 0;
        font-size: 1rem; /* Font chota kiya */
        line-height: 1.4;
        gap: 15px; /* Text aur icon ke beech fix gap */
    }
    
    .faq-question span {
        text-align: left;
        flex-grow: 1; /* Text ko space lene dega, par icon ko nahi dabayega */
    }

    /* 🔴 THE ICON FIX: Icon ab kabhi nahi pichkega */
    .faq-icon {
        flex-shrink: 0; /* Browser ko order: Isko chota mat karna */
        width: 20px;
        height: 20px;
    }

    /* Answer ka text size aur padding adjust kiya */
    .faq-answer p {
        font-size: 0.9rem;
        padding-bottom: 18px;
        padding-right: 15px; /* Mobile par zyada right margin ki zaroorat nahi */
        line-height: 1.6;
    }
}
/* =========================================================
   PREMIUM FLOATING LEADER ANIMATIONS (Automatic Float + Blend Fix)
   ========================================================= */
/* 🔴 NEW: Minimal Floating Animation keyframes (Slight & Slow) */
@keyframes implicitFloat {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(-0.5deg); } /* Mamuli saa upar-niche and slow rotate */
    100% { transform: translateY(0px) rotate(0deg); }
}

.quick-actions, .camps-section, .faq-section { 
    position: relative; 
    overflow: visible; /* Hidden hata diya taaki upar-niche animation cut na ho */
}

/* Base styling */
.leader-floating {
    position: absolute;
    height: auto;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply; /* 🔴 Transparency Fix for JPEGs on white bg */
    opacity: 0.15; /* Subtly faint, not totally dead */
    z-index: 1;
    pointer-events: none;
    will-change: transform, opacity;
    
    /* 🔴 Premium implicit float animation */
    animation: implicitFloat 6s ease-in-out infinite;
    
    /* Hover/Scroll reveal transition */
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                opacity 0.6s ease;
}

/* 🔴 TERI LAPTOP POSITIONINGS (Kept as is based on your requirement) */
.leader-left{
       left: -7%;
    right: auto;
    bottom: 43%;
    transform: translateX(-5%);
    max-height: 28rem;
}

.leader-right {
       right: -9%;
    left: auto;
    bottom: 50%;
    transform: translateX(3%);
    max-height: 29rem;
}

.leader-right1{
        right: -16%;
    left: auto;
    bottom: 70%;
    transform: translateX(3%);
    max-height: 22rem;
}

.leader-left1{
        left: -25%;
    right: auto;
    bottom: 52%;
    transform: translateX(-5%);
    max-height: 29rem;
    transform: rotate(306deg) !important;
}

/* =========================================================
   VIEW ALL BUTTON (Premium Outline to Solid Transition)
   ========================================================= */
.view-all-wrapper {
    text-align: center;
    margin-top: 50px;
    width: 100%;
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    border-radius: 50px;
    background: transparent;
    color: var(--primary-red);
    font-family: 'Ubuntu', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    border: 2px solid var(--primary-red);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

.btn-view-all svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

/* Hover par solid red ho jayega aur arrow aage jayega */
.btn-view-all:hover {
    background: var(--primary-red);
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(211, 47, 47, 0.3);
    transform: translateY(-3px);
}

.btn-view-all:hover svg {
    transform: translateX(6px);
}
/* =========================================================
   FAQ SECTION LEADER (Dr. Ambedkar Placement Fixed)
   ========================================================= */
.leader-ambed {
        left: -4%;
    right: auto;
    bottom: 0;
    transform: translateX(0);
    max-height: 35rem;
    opacity: 0.15;
}

/* Hover par slightly aage move karenge */
.faq-section:hover .leader-ambed {
    transform: translateX(20px) scale(1.02);
    opacity: 0.22;
}

/* Hover Animations - Enhanced slightly to contrast implicit float */
.quick-actions:hover .leader-floating,
.camps-section:hover .leader-floating,
.faq-section:hover .leader-floating {
    opacity: 0.25; 
    animation-play-state: paused; /* Hover par automatic animation rok dega */
}

.quick-actions:hover .leader-left,


.camps-section:hover .leader-right {
    transform: translateX(-20px) scale(1.02);
}

/* Mobile Screens ke liye optimizations (100% stable) */
@media (max-width: 768px) {
    .leader-floating { 
        max-height: 200px !important; /* Scale down on mobile */
        opacity: 0.08; 
        bottom: 20px !important; /* Mobile placement reset */
        left: 0 !important; right: 0 !important; margin: 0 auto; /* Center on mobile */
        transform: translateX(0) scale(1) !important;
        animation: none !important; /* Disable animation on mobile to save battery */
    }
}

/* =========================================================
   TEAM SECTION HEADER (Premium Texture Fill Fix)
   ========================================================= */
.team-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Heading aur texture ko aamne-saamne lock karega */
    margin-bottom: 35px;
}

.section-heading-left {
    margin-bottom: 0 !important; /* Default margin hataya taaki flex properly kaam kare */
    flex-shrink: 0; /* Text ko dabne se rokega */
}

/* 🔴 THE DOT-MATRIX TEXTURE */
.team-texture-fill {
    flex-grow: 1; /* Heading ke baad bachi hui saari jagah gher lega */
    height: 40px; 
    margin-left: 50px; /* Heading aur texture ke beech ki saaf jagah */
    
    /* Medical/Tech Blue Dots */
    background-image: radial-gradient(var(--primary-blue) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.15; /* Faint premium look */
    
    /* Fade-in effect: Left me transparent, Right me solid */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
}

/* Mobile Screens ke liye reset taaki design na fate */
@media (max-width: 768px) {
    .team-header-flex {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 25px;
    }
    .team-texture-fill {
        display: none; /* Mobile par wese bhi jagah nahi hoti, isliye hide kiya */
    }
}
/* =========================================================
   TRUE INFINITE REVIEW SLIDER & PREMIUM CARDS
   ========================================================= */
.reviews {
    background-color: var(--white); 
    padding: 80px 0;
}

/* Main Wrapper */
.review-slider-wrapper {
    position: relative;
    width: 100%;
    margin-top: 50px;
}

/* Viewport that hides extra cards */
.review-viewport {
    overflow: hidden; 
    padding: 20px 0; /* Box shadow na kate isliye padding */
    margin: 0 50px; /* Buttons ke liye jagah chhodi */
}

/* The Slider Track */
.review-track {
    display: flex;
    will-change: transform; /* GPU Optimization */
}

/* 🔴 THE MATH: Exactly 3 cards fit honge (33.333%) */
.review-slide {
    flex: 0 0 calc(33.333% - 20px); 
    margin: 0 10px; 
    box-sizing: border-box;
    display: flex; 
}

/* ================= Buttons (Controls) ================= */
.slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(11,43,92,0.1);
    color: var(--primary-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.slider-control:hover { 
    background: var(--primary-blue); 
    color: white; 
    box-shadow: 0 5px 15px rgba(11,43,92,0.2); 
}
.slider-control svg { width: 20px; height: 20px; }

.slider-control.prev { left: 0; } 
.slider-control.next { right: 0; }

/* =========================================================
   MODERN REVIEW CARDS (Ultra-Premium Animations)
   ========================================================= */
.review-card-modern {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 16px;
    border: 1px solid #F1F5F9;
    border-top: 4px solid var(--primary-red);
    box-shadow: 0 10px 30px rgba(11, 43, 92, 0.04);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    width: 100%;
    height: 100%; 
    overflow: hidden; /* Shine effect ko card ke andar lock karne ke liye */
    
    /* Smooth GPU transition */
    transform: translateZ(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s ease, border-color 0.4s ease;
}

/* 🔴 1. THE LIGHT SWEEP (Apple-style Glass Shine) */
.review-card-modern::before {
    content: '';
    position: absolute;
    top: 0; 
    left: -150%; /* Card ke bahar chhupa hai */
    width: 50%; 
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); /* Tirchhi light */
    transition: all 0.7s ease;
    z-index: 2;
    pointer-events: none;
}

.review-card-modern:hover {
    transform: translateY(-8px) translateZ(0);
    box-shadow: 0 20px 40px rgba(11, 43, 92, 0.1);
    border-color: #CBD5E1;
}

/* Hover par light card ke upar se guzregi */
.review-card-modern:hover::before {
    left: 150%; 
    transition: left 0.7s ease-in-out;
}

/* 🔴 2. QUOTE PARALLAX (Float & Tilt Effect) */
.quote-icon-modern {
    font-size: 6rem;
    font-family: 'Lora', serif; 
    color: var(--primary-red);
    opacity: 0.05; 
    position: absolute;
    top: -10px;
    right: 20px; 
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    
    /* Bouncy transition */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

.review-card-modern:hover .quote-icon-modern {
    transform: scale(1.2) rotate(10deg) translateY(-10px); /* Bada hoga, ghumega aur upar aayega */
    opacity: 0.12; /* Thoda zyada visible hoga */
}

/* Text aur Meta styling */
.review-text { 
    font-size: 1rem; 
    color: var(--text-dark); 
    line-height: 1.7; 
    font-style: italic; 
    margin-bottom: 30px; 
    position: relative; 
    z-index: 1; 
}

.reviewer-meta-modern { display: flex; align-items: center; gap: 15px; margin-top: auto; position: relative; z-index: 3; }

/* 🔴 3. AVATAR HEARTBEAT PULSE */
.reviewer-avatar-placeholder { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background-color: var(--primary-red); 
    color: white; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-weight: 800; 
    font-size: 1.2rem; 
    position: relative;
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.3); 
}

/* Pulse Animation Ring */
.reviewer-avatar-placeholder::after {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 50%;
    border: 2px solid var(--primary-red);
    opacity: 0;
    animation: none; /* Default off */
}

.review-card-modern:hover .reviewer-avatar-placeholder::after {
    animation: avatarPulse 1.5s infinite; /* Hover par dil dhadkega */
}

@keyframes avatarPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Blue Card Logic */
.blue-avatar { background-color: var(--primary-blue); box-shadow: 0 5px 15px rgba(11, 43, 92, 0.3); }
.blue-avatar::after { border-color: var(--primary-blue); }

.review-card-modern:has(.blue-avatar) { border-top: 4px solid var(--primary-blue); }
.review-card-modern:has(.blue-avatar) .quote-icon-modern { color: var(--primary-blue); }

.reviewer-meta-modern h4 { margin: 0; font-size: 1.1rem; color: var(--text-dark); font-weight: 800; }
.reviewer-meta-modern p { margin: 0; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
/* =========================================================
   REVIEW SLIDER (Mobile Responsiveness & Lag-Free Fix)
   ========================================================= */

@media (max-width: 768px) {
    
    /* 1. Main Wrapper & Viewport Lock */
    .review-slider-wrapper {
        margin-top: 30px !important;
        width: 100%;
        max-width: 100vw;
        /* YEH ZAROORI HAI: Controls ko bahar nikalne se rokega */
        overflow-x: hidden !important; 
        position: relative;
    }

    .review-viewport {
        margin: 0 !important; 
        padding: 15px 0 !important; /* Box-shadow ke liye jagah */
    }

    /* 2. Slide Width (Strictly synced with script.js math) */
    .review-slide {
        flex: 0 0 calc(100% - 20px) !important; /* Ek bar mein 1 card dikhega */
        margin: 0 10px !important; /* Isko mat badalna, JS ispe depend hai */
        box-sizing: border-box;
    }

    /* 3. Mobile Card Internal Styling */
    .review-card-modern {
        padding: 25px 20px !important; /* Padding kam ki taaki text saans le sake */
        border-radius: 12px !important;
    }

    .review-text { 
        font-size: 0.95rem !important; 
        margin-bottom: 25px !important; 
        padding-right: 0 !important; /* Extra padding hatayi */
    }
    
    /* Floating Quote Icon adjust kiya */
    .quote-icon-modern { 
        font-size: 4rem !important; 
        top: 0 !important; 
        right: 15px !important; 
    }

    /* 4. Avatar & Meta Shrink */
    .reviewer-avatar-placeholder { 
        width: 42px !important; 
        height: 42px !important; 
        font-size: 1.1rem !important; 
    }
    .reviewer-meta-modern h4 { font-size: 1rem !important; margin-bottom: 2px !important; }
    .reviewer-meta-modern p { font-size: 0.8rem !important; }

    /* 5. THE BUTTONS FIX (Screen Scroll Killer) */
    .slider-control {
        width: 38px !important;
        height: 38px !important;
        /* Transparent Glassmorphism taaki text na chhupe agar overlap ho */
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(5px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
        z-index: 20 !important;
    }

    /* Buttons ko card ke andar kinaro par chipka diya */
    .slider-control.prev { left: 5px !important; }
    .slider-control.next { right: 5px !important; }

  /* 6. Bottom "Share Your Experience" Button (Smaller & Compact) */
    .reviews .view-all-wrapper .btn-premium-red {
        width: auto !important; /* Full width limit hatayi */
        padding: 10px 20px !important; /* Button ko andar se chota kiya */
        font-size: 0.85rem !important; /* Text thoda aur shrink kiya */
        border-radius: 50px !important; /* Perfect pill shape */
        display: inline-flex;
        justify-content: center;
    }
}/* =========================================================
   BLOG / UPDATES SECTION
   ========================================================= */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.blog-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    
    /* Lag killer properties */
    transform: translateZ(0); 
    will-change: transform, box-shadow;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-8px) translateZ(0);
    box-shadow: 0 15px 30px rgba(11,43,92,0.08);
}

.blog-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.blog-card:hover .blog-img-wrapper img {
    transform: scale(1.08);
}

.blog-date-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 800;
    color: var(--primary-red);
    font-size: 0.85rem;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.blog-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-category {
    color: var(--primary-blue);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.blog-title {
    margin-bottom: 12px;
}

.blog-title a {
    font-size: 1.25rem;
    color: var(--text-dark);
    font-weight: 800;
    line-height: 1.4;
    transition: color 0.3s;
}

.blog-title a:hover {
    color: var(--primary-red);
}

.blog-excerpt {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.btn-read-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-red);
    font-weight: 800;
    font-size: 0.95rem;
    transition: gap 0.3s ease;
}

.btn-read-more svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s;
}

.btn-read-more:hover {
    gap: 10px; /* Hover par arrow aage shift hoga */
}

/* =========================================================
   RESPONSIVE GRID ADJUSTMENTS
   ========================================================= */
/* =========================================================
   LATEST BLOGS (Mobile Responsiveness Fix)
   ========================================================= */

@media (max-width: 768px) {
    
    /* 1. Grid Lock & Spacing */
    .blog-section {
        overflow: hidden !important;
    }
    
    .blog-grid {
        grid-template-columns: 1fr !important; /* Ek ke niche ek */
        gap: 25px !important; /* Cards ke beech ki jagah */
        width: 100%;
        padding: 0 5px; /* Screen se bilkul chipakne se rokega */
        box-sizing: border-box;
    }

    /* 2. Card Restraint */
    .blog-card {
        width: 100%;
        max-width: 420px; /* Over-stretch nahi hoga */
        margin: 0 auto; 
        box-sizing: border-box;
    }

    /* 3. Image & Badge Adjustment */
    .blog-img-wrapper {
        height: 200px !important; /* Perfect height for mobile */
    }

    .blog-date-badge {
        top: 10px !important;
        left: 10px !important;
        padding: 6px 10px !important;
        font-size: 0.75rem !important; /* Badge thoda shrink kiya */
    }

    /* 4. Text & Padding Typography Fix */
    .blog-body {
        padding: 20px !important; /* Andar ka gap tight kiya */
    }

    .blog-category {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
    }

    .blog-title {
        margin-bottom: 10px !important;
    }

    .blog-title a {
        font-size: 1.15rem !important; /* Headline readable ki */
        line-height: 1.3 !important;
    }

    .blog-excerpt {
        font-size: 0.85rem !important; /* Summary choti ki */
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }

    /* Read More button mobile align */
    .btn-read-more {
        font-size: 0.9rem !important;
    }
}

/* =========================================================
   DYNAMIC FLUID TIMELINE FOR NGO IMPACT
   ========================================================= */

/* 1. New Main Wrapper */
.impact-section-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0; /* Reduced padding for smaller footprint */
}

/* 2. Abstract background to eliminate white space without clutter */
.impact-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(211,47,47,0.05) 0%, rgba(11,43,92,0.03) 100%);
    border-radius: 50%;
    z-index: 0;
    filter: blur(25px);
    animation: pulseShape 8s infinite alternate ease-in-out;
}

@keyframes pulseShape {
    0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* 3. The Timeline Container */
.stats-timeline-fluid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 40px; /* Reduced vertical gap to make it smaller overall */
}

/* 4. The Main Vertical Line (Using ::before on the container) */
.stats-timeline-fluid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, var(--primary-red) 0%, var(--primary-blue) 100%);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(11,43,92,0.1);
}

/* 5. The Timeline Steps */
.timeline-step {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
}

/* 6. Base Content Box Styling (Reduced Size) */
.step-content {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 15px 20px; /* Smaller padding */
    border: 1px solid rgba(11,43,92,0.08);
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    gap: 15px;
    width: calc(50% - 35px); /* Take up just under half width */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.timeline-step:hover .step-content {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

/* 7. Step Placement (Alternating Left/Right) */
.timeline-step.left {
    justify-content: flex-start;
}
.timeline-step.left .step-content {
    border-right: 3px solid var(--primary-red);
}

.timeline-step.right {
    justify-content: flex-end;
}
.timeline-step.right .step-content {
    border-left: 3px solid var(--primary-blue);
    flex-direction: row-reverse; /* Flip text/icon order for right side */
    text-align: right;
}

/* 8. The Timeline Node (The dot) */
.step-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    border: 4px solid var(--primary-red);
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, background 0.3s ease;
}

.timeline-step:hover .step-node {
    transform: translate(-50%, -50%) scale(1.2);
    background: white;
}

.step-node.red { border-color: var(--primary-red); color: var(--primary-red); }
.step-node.blue { border-color: var(--primary-blue); color: var(--primary-blue); }

/* Glowing effect for the node */
.step-node::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    opacity: 0.2;
    filter: blur(8px);
    transition: opacity 0.3s ease;
}
.timeline-step:hover .step-node::after { opacity: 0.5; }


/* 9. Typography and Icons (Refined and Smaller) */
.step-icon {
    width: 45px; /* Smaller icon size */
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.timeline-step.left .step-icon { background: rgba(211,47,47,0.1); color: var(--primary-red); }
.timeline-step.right .step-icon { background: rgba(11,43,92,0.1); color: var(--primary-blue); }

.step-icon svg { width: 22px; height: 22px; }

.step-text h3 { font-size: 2.2rem; font-weight: 800; line-height: 1; margin: 0; font-family: 'Ubuntu', sans-serif; letter-spacing: -1px; }
.timeline-step.left h3 { color: var(--primary-red); }
.timeline-step.right h3 { color: var(--primary-blue); }

.step-text p { font-size: 0.95rem; font-weight: 600; color: var(--text-dark); margin: 0; text-transform: none; letter-spacing: 0; opacity: 0.8; }

/* 10. Horizontal Connectors (Using ::after on content box) */
.step-content::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15px; /* Horizontal line width */
    height: 2px;
    background: rgba(11,43,92,0.1);
}
.timeline-step.left .step-content::after {
    right: -15px; /* Positions connector on the right of content */
    background: var(--primary-red);
}
.timeline-step.right .step-content::after {
    left: -15px; /* Positions connector on the left of content */
    background: var(--primary-blue);
}

/* =========================================================
   MOBILE RESPONSIVENESS (Crucial for timelines)
   ========================================================= */
@media (max-width: 768px) {
    /* 1. Reset timeline line to left side */
    .stats-timeline-fluid::before {
        left: 30px;
        transform: none;
    }
    
    /* 2. Push all steps to the right */
    .timeline-step {
        justify-content: flex-start !important;
        padding-left: 60px;
        width: 100%;
    }
    
    .step-content {
        width: 100%;
        flex-direction: row !important;
        text-align: left !important;
        border: none !important;
        border-left: 3px solid rgba(11,43,92,0.1) !important; /* Standard side border */
    }
    .timeline-step.left .step-content { border-left-color: var(--primary-red) !important; }
    .timeline-step.right .step-content { border-left-color: var(--primary-blue) !important; }

    /* 3. Reset nodes to align with left-side line */
    .step-node {
        left: 30px;
        transform: translate(-50%, -50%);
    }
    
    .timeline-step.right .step-text {
        text-align: left !important;
    }
}
/* =========================================================
   BLOG SECTION LEADER (Size & Hover Fixed)
   ========================================================= */
.leader-blog {
       right: -6%;
    left: auto;
    top: auto;
    bottom: 32%;
    transform: translateX(0);
    max-height: 25rem;
    opacity: 0.15;
}

.leader-doodle2{
        right: -8%;
    left: auto;
    bottom: 59%;
    transform: rotate(323deg) !important;
    max-height: 23rem;
}

.faq-section{
    z-index: -1;
}
.container{
    z-index: 2;
}

/* Hover par slightly aage aur clear hogi (Ab ye perfectly kaam karega) */
.blog-section:hover .leader-blog {
    transform: translateX(-15px) scale(1.02);
    opacity: 0.22;
}


/* 🔴 THE FIX: Mobile par dono floating images ko chhupa do taaki wo screen se bahar na jayen */
@media (max-width: 768px) {
    .leader-floating {
        display: none !important; /* Forces the image to disappear on mobile */
    }
}

/* =========================================================
   ULTRA-PREMIUM DR. AMBEDKAR MODAL (FINAL CSS - Fixed & Flipped)
   ========================================================= */

/* 1. Modal Overlay (Fixed Size, Blurred background) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(5, 10, 21, 0.6); 
    backdrop-filter: blur(12px); 
    z-index: 9999; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    
    /* 🔴 THE OVERFLOW FIX: Internal scrolling prevents modal from breaking viewport */
    overflow-y: auto; 
    
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    will-change: opacity, transform;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

body.modal-open { overflow: hidden; } /* Prevents background scrolling */
body.modal-open .modal-overlay { opacity: 1; pointer-events: auto; visibility: visible; }

/* 2. Modal Wrapper (Grid Fixed) */
.modal-wrapper {
    background: rgba(255, 255, 255, 0.95); 
    max-width: 900px; 
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(5, 10, 21, 0.2);
    overflow: hidden; 
    display: grid;
    
    /* 🔴 THE GRID FIX: Wapas 50/50 kiya taaki form ko poori jagah mile aur wo saans le sake */
    grid-template-columns: 1fr 1fr; 
    
    transform: scale(0.8) translateZ(0);
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

body.modal-open .modal-wrapper { transform: scale(1) translateZ(0); }

/* 3. Modal Image Block */
.modal-image-block {
    position: relative; /* Container ko relative rakha taaki image iske baahar na bhage */
    background-color: #FAFBFF; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.modal-leader-img {
    /* 🔴 THE ULTIMATE FIX: Image ko 'absolute' kiya. Ab tu 5000px ki image bhi daalega toh form ka size 1 pixel bhi nahi hilega */
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Box ko perfectly fill karegi bina stretch hue */
    
    opacity: 0.18; 
    transform: scaleX(-1) scale(1.1); /* 'Muh right mein' aur slight zoom */
    transition: transform 1s ease;
}

.modal-wrapper:hover .modal-leader-img {
    transform: scaleX(-1) scale(1) translateZ(0);
}

.modal-leader-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    opacity: 0.18; 
    transform: scaleX(-1) scale(1.1); 
    transition: transform 1s ease;
    
    /* 🔴 THE SELECTION FIX: Image ko patthar ki tarah non-interactive bana dega */
    user-select: none;            /* Text ki tarah select hona band */
    -webkit-user-select: none;    /* Chrome/Safari ke liye */
    -webkit-user-drag: none;      /* Drag karke bahar kheenchne se rokega */
    pointer-events: none;         /* Mouse clicks ko completely ignore karega */
}
/* =========================================================
   🔴 THE ULTIMATE BACKGROUND SCROLL LOCK (HTML + BODY)
   ========================================================= */

/* Nayi CSS property 'has()' ka use karke hum HTML aur Body dono ko lock karenge */
html:has(body.modal-open),
body.modal-open {
    overflow: hidden !important; /* Scroll bar gayab aur lock */
    height: 100vh !important; /* Screen ko current view tak limit kar dega */
}

/* Modal open hone par overlay ko zinda karna */
body.modal-open .modal-overlay { 
    opacity: 1; 
    pointer-events: auto; 
    visibility: visible; 
}
.modal-image-overlay {
    position: absolute;
    bottom: 30px; left: 30px; right: 30px;
    text-align: center;
    pointer-events: none;
    color: var(--primary-blue);
    z-index: 2;
}
.modal-image-overlay h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 5px; font-family: 'Ubuntu', sans-serif; }
.modal-image-overlay p { font-size: 0.85rem; font-style: italic; opacity: 0.8; font-weight: 500; line-height: 1.5; font-family: 'Ubuntu', sans-serif; }

/* 4. Modal Content (The Form Area - Locked height with scrolling) */
.modal-content {
    background: #ffffff;
    padding: 50px 40px;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    
    /* 🔴 THE OVERFLOW FIX: Internal scrolling restricts form from growing too tall */
    max-height: 85vh; /* Fits strictly within viewport */
    overflow-y: auto; 
}

/* Close button and Headers wahi hain... */
.modal-close-btn {
    position: absolute;
    top: 20px; right: 25px;
    background: none; border: none;
    font-size: 2.2rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6;
    line-height: 1;
    display: flex; justify-content: center; align-items: center;
}
.modal-close-btn:hover { color: var(--primary-red); opacity: 1; transform: rotate(90deg); }

.form-header { margin-bottom: 35px; }
.form-header h2 { font-size: 2.2rem; margin-bottom: 5px; color: var(--text-dark); font-family: 'Ubuntu', sans-serif; font-weight: 700; }
.form-header p { font-size: 1rem; color: var(--text-muted); font-family: 'Ubuntu', sans-serif; }

.modal-form { display: flex; flex-direction: column; gap: 20px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* 🔴 5. Premium Input Styling (CORPORATE CLEANUP) */
.input-group { display: flex; flex-direction: column; gap: 8px; }

.input-group label { 
    font-family: 'Ubuntu', sans-serif;
    font-size: 0.85rem; 
    font-weight: 700; /* Strict Bold */
    
    /* 🔴 THE ATTRACTIVENESS FIX: Blue Labels organized the space and look premium */
    color: var(--primary-blue); 
    
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    margin-bottom: 3px; /* subtle margin from input */
}

.input-group input, .form-select-modal {
    background: rgba(241, 245, 249, 0.4); /* Faint Glassy Blue tint for depth */
    border: 1px solid #E2E8F0; /* Lighter crisp border */
    padding: 14px 18px; /* Breathing room added vertically */
    border-radius: 8px; /* Slightly smoother curve */
    color: var(--text-dark);
    font-family: 'Ubuntu', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    outline: none;
    box-shadow: none;
}

.input-group input::placeholder { color: #94A3B8; font-family: 'Ubuntu', sans-serif; }

/* Focus par crisp blue border aura */
.input-group input:focus, .form-select-modal:focus {
    background: #fff;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(11, 43, 92, 0.08); /* geometric blue aura on focus */
}

/* Checkbox group styling wahi hai */
.checkbox-group { flex-direction: row; align-items: flex-start; gap: 12px; margin-top: 5px; }
.checkbox-group input { width: 18px; height: 18px; cursor: pointer; border-radius: 4px; border-color: #CBD5E1; color: var(--primary-red); accent-color: var(--primary-red); margin-top: 3px;}
.checkbox-group label { text-transform: none; color: var(--text-muted); font-weight: 600; letter-spacing: normal; font-size: 0.85rem; line-height: 1.5; cursor: pointer; }

/* 🔴 6. THE MASTER BUTTON FIX: Strict Ubuntu Bold + All Caps */
.modal-submit-btn, .btn-premium-red, .btn-solid-red {
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 700 !important; /* Extremely bold, geometric weight */
    text-transform: uppercase !important; /* All Caps as in DONATE NOW image */
    letter-spacing: normal !important; /* Premium is not wide, it is compact */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-submit-btn {
    background: #C62828 !important; /* Solid corporate red like image_3afd67.png */
    color: #ffffff !important;
    margin-top: 15px;
    padding: 16px;
    font-size: 1.1rem;
    width: 100%;
    border-radius: 8px !important;
    border: none;
    box-shadow: 0 4px 10px rgba(198, 40, 40, 0.3) !important;
    cursor: pointer;
}

.modal-submit-btn:hover {
    background: #B71C1C !important;
    transform: translateY(-2px);
}

/* Responsive adjustments for Mobile Modal Lock */
@media (max-width: 900px) {
    .modal-wrapper { grid-template-columns: 1fr; border-radius: 12px;}
    .modal-image-block { display: none; } /* Mobile par leader image hide taaki text space na le */
    .modal-content { padding: 40px 25px; max-height: 80vh; }
}



/* CAMPS PAGE CSS */


/* =========================================================
   CAMPS PAGE SPECIFIC STYLES (Tech-NGO Layout)
   ========================================================= */

/* Compact Hero */
.camps-hero {
    position: relative;
    height: 30vh; /* Chota hero taaki search console focus mein rahe */
    min-height: 250px;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: #FAFBFF;
    overflow: hidden;
}
.camps-hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('./images/bg2.png'); 
    background-size: cover; background-position: center;
    opacity: 0.1;
}
.camps-hero-text { position: relative; z-index: 2; width: 100%; }
.camps-hero-text h1 { font-size: 2.8rem; color: var(--primary-blue); margin-bottom: 10px; font-weight: 800; font-family: 'Ubuntu', sans-serif;}
.camps-hero-text p { color: var(--text-muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; font-family: 'Ubuntu', sans-serif;}

/* The Search Console (Glassmorphism) */
.search-console-section {
    position: relative;
    z-index: 10;
    margin-top: -50px; /* Hero section par overlap */
}
.search-console-wrapper {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 25px 30px;
    box-shadow: 0 15px 40px rgba(11, 43, 92, 0.08);
    border: 1px solid #E2E8F0;
}
.search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 20px;
    align-items: flex-end;
}

.search-input-group { display: flex; flex-direction: column; gap: 8px; }
.search-input-group label { font-size: 0.85rem; font-weight: 700; color: var(--primary-blue); text-transform: uppercase; font-family: 'Ubuntu', sans-serif;}

.search-select, .search-input {
    width: 100%; padding: 14px 18px; border-radius: 8px;
    border: 1px solid #CBD5E1; background: rgba(241, 245, 249, 0.4); 
    font-family: 'Ubuntu', sans-serif;
    font-size: 1rem; color: var(--text-dark); outline: none; transition: all 0.3s;
}
.search-select:focus, .search-input:focus { border-color: var(--primary-blue); background: #fff; box-shadow: 0 0 0 4px rgba(11, 43, 92, 0.08); }
.search-select:disabled { background: #E2E8F0; cursor: not-allowed; opacity: 0.6; }

.search-btn-main {
    padding: 14px 30px; border-radius: 8px; height: 50px;
    display: flex; gap: 8px; align-items: center; justify-content: center; min-width: 160px;
}

/* Empty State / Default State */
.empty-state {
    text-align: center; padding: 60px 20px; color: var(--text-muted);
    font-size: 1.1rem; border: 2px dashed #E2E8F0; border-radius: 12px;
    background: #ffffff;
}

/* The Results List (Modern Horizontal Cards) */
.results-header { margin-bottom: 30px; border-bottom: 2px solid #E2E8F0; padding-bottom: 10px; }
.results-header h3 { font-size: 1.4rem; color: var(--text-dark); font-family: 'Ubuntu', sans-serif; }
.results-list-container { display: flex; flex-direction: column; gap: 20px; }

.camp-list-card {
    background: #fff; border-radius: 12px; border: 1px solid #E2E8F0;
    display: flex; box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: all 0.3s ease; overflow: hidden;
}
.camp-list-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.06); border-color: var(--primary-blue); }

.camp-date-box {
    background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%);
    color: #fff; padding: 20px; min-width: 150px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.c-month { font-size: 1rem; font-weight: 700; text-transform: uppercase; line-height: 1; font-family: 'Ubuntu', sans-serif;}
.c-day { font-size: 3rem; font-weight: 800; line-height: 1; margin: 8px 0; font-family: 'Ubuntu', sans-serif;}
.c-time { font-size: 0.8rem; font-weight: 500; background: rgba(0,0,0,0.2); padding: 4px 10px; border-radius: 4px; }

.camp-info-box { padding: 25px 30px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center;}
.c-title { font-size: 1.4rem; color: var(--primary-blue); font-weight: 800; margin-bottom: 15px; font-family: 'Ubuntu', sans-serif;}

.c-meta-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.c-meta-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; font-family: 'Ubuntu', sans-serif;}
.c-meta-label { font-weight: 700; color: var(--text-dark); min-width: 110px; }
.c-meta-value { color: var(--text-muted); line-height: 1.4; }

.camp-action-box {
    padding: 20px;
    border-left: 1px dashed #E2E8F0;
    background: #FAFBFF;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center;
    min-width: 220px;
}

.slot-status {
    grid-column: 1 / 2;
}

.get-directions-link {
    grid-column: 2 / 3;
    justify-self: end;
}

.book-slot-btn {
    grid-column: 1 / 3;
    width: 100%;
}
.get-directions-link { 
    color: #1E40AF;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    transition: all 0.25s ease;
}

.get-directions-link:hover { 
    color: #fff;
    background: #1E40AF;
    border-color: #1E40AF;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(30, 64, 175, 0.25);
}

.map-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .search-grid { grid-template-columns: 1fr 1fr; }
    .search-btn-wrapper { grid-column: span 2; }
}

@media (max-width: 768px) {
    .camp-action-box {
        padding: 15px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .book-slot-btn {
        grid-column: 1 / 3;
    }
}


/* =========================================================
   CAMPS PAGE HERO & SEARCH BOX - CLEAN MOBILE FIX
   ========================================================= */
@media (max-width: 768px) {
    
    /* 1. Hero Section Height & Padding */
    .camps-hero {
        height: 260px;
        min-height: auto;
        padding: 40px 15px;
        display: flex;
        align-items: center;
    }

    /* 2. Background Image Set */
    .camps-hero-bg {
        background-position: center center;
        background-size: cover;
    }

    /* 3. Text Shrink for Mobile */
    .camps-hero-text h1 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .camps-hero-text p {
        font-size: 0.95rem;
        line-height: 1.5;
        padding: 0 10px;
        max-width: 100%;
    }

    /* 4. Search Console Overlap Fix */
    .search-console-section {
        margin-top: -45px; /* Hero section ke upar thoda overlap karega */
        padding: 0 15px;
    }
}

/* =========================================================
   🔴 FINAL MOBILE SEARCH BOX FIX (Edge-to-Edge & 3-Line Grid)
   ========================================================= */
@media (max-width: 768px) {
    
    /* 1. EDGE TO EDGE (Puri Screen) */
    .search-console-section {
        padding: 0; /* Side ki saari khali jagah gayab */
        margin-top: -35px; /* Hero banner par halka overlap */
    }
    
    .search-console-wrapper {
        padding: 25px 20px;
        /* Upar se curve, neeche se flat aur screen se chipka hua */
        border-radius: 24px 24px 0 0; 
        border-left: none;
        border-right: none;
        /* Shadow sirf upar ki taraf taaki pop ho */
        box-shadow: 0 -8px 25px rgba(11, 43, 92, 0.06); 
    }

    /* 2. TEENO LINE KA GRID (3-Line Layout) */
    .search-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Screen ko 2 barabar hisson mein baata */
        gap: 15px;
    }

    /* Line 1: State aur District (Ye apne aap 1st aur 2nd jagah le lenge) */

    /* Line 2: Date ko dono hisse (puri width) gherne bol diya */
    .search-grid .search-input-group:nth-child(3) {
        grid-column: span 2;
    }

    /* Line 3: Button ko dono hisse (puri width) gherne bol diya */
    .search-grid .search-btn-wrapper {
        grid-column: span 2;
        margin-top: 5px;
    }

    /* 3. ANDAR KA SETTING (Inputs & Labels Fix) */
    .search-input-group label {
        font-size: 0.75rem; /* Thoda chota kiya taaki side-by-side mein fate nahi */
        letter-spacing: 0;
        white-space: nowrap; /* Label ko do line mein tootne se rokega */
    }

    .search-select, 
    .search-input {
        height: 48px;
        padding: 0 10px; /* Padding kam ki taaki text poora dikhe */
        font-size: 0.9rem;
        /* Dropdown arrow ko thoda andar khiskaya taaki text se na takraye */
        background-position: right 10px center; 
    }

    .search-btn-main {
        height: 50px;
        font-size: 1rem;
        width: 100%;
    }
}

/* Smart Card Upgrades */
.camp-list-card {
    display: flex;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

/* Compact Date Box */
.camp-date-box {
    background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%);
    color: #fff;
    padding: 20px 15px;
    min-width: 120px; /* Thoda chota kiya */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Status & Tags */
.c-tags-wrapper {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tag {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    font-family: 'Ubuntu', sans-serif;
}

.tag-urgent { background: rgba(211, 47, 47, 0.1); color: #D32F2F; border: 1px solid #D32F2F; }
.tag-group { background: #E2E8F0; color: #1E293B; }
.slot-status { font-size: 0.85rem; color: #DD6B20; font-weight: 700; margin-bottom: 15px; display: flex; align-items: center; gap: 5px; }

/* =========================================================
   🔴 CLEAN FIX: MOBILE CAMPS RESULT CARDS (Flex Bug Fixed)
   ========================================================= */

@media (max-width: 768px) {
    
    /* 1. 🔴 THE FATAL FIX: Card ko lamba hone se roka aur upar-neeche stack kiya */
    .camp-list-card {
        flex-direction: column; /* 🔴 Yahi line miss ki thi maine */
        width: 100%;
        border-radius: 16px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        margin-bottom: 15px;
    }

    /* 2. Date Header Bar (Ab ye proper upar red patti ban kar aayega) */
    .camp-date-box {
        padding: 15px 20px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-radius: 16px 16px 0 0;
        min-width: 100%; /* Ensure width */
    }
    .camp-date-box .c-day {
        font-size: 2.2rem;
        margin: 0;
    }
    .camp-date-box .c-time {
        font-size: 0.75rem;
        padding: 6px 12px;
    }

    /* 3. Info Box (Title aur Details) */
    .camp-info-box {
        padding: 20px 15px;
    }
    .c-title {
        font-size: 1.3rem;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    /* 4. THE META FIX: Label upar, Value neeche */
    .c-meta-item {
        flex-direction: column; 
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 15px;
    }
    .c-meta-label {
        font-size: 0.8rem;
        color: var(--primary-blue); 
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .c-meta-value {
        font-size: 0.95rem;
        color: var(--text-dark);
        font-weight: 600;
        line-height: 1.4;
    }

    /* 5. THE FOOTER FIX: 2-Line Grid System */
    .camp-action-box {
        padding: 15px;
        border-top: 1px dashed #CBD5E1;
        border-left: none; 
        background: #F8FAFC;
        
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 15px;
    }
    
    .slot-status {
        grid-column: 1 / 2;
        margin: 0;
        justify-content: flex-start;
        font-size: 0.85rem;
        white-space: nowrap; 
    }
    
   .get-directions-link {
        font-size: 0.8rem;
        padding: 8px 10px;
        border-radius: 6px;
    }
    
    .book-slot-btn {
        grid-column: 1 / 3; 
        width: 100%;
        margin: 0;
        padding: 14px;
        font-size: 1rem;
    }
}


/* =========================================================
   BUTTON RESIZING FIX (Sleek & Professional Look)
   ========================================================= */

/* Hero Section / Main Call to Actions */
.btn-premium-red {
    padding: 12px 30px !important; /* Pehle 15px 40px tha */
    font-size: 0.95rem !important; /* Pehle 1.1rem tha */
}

/* Form Submit & Action Cards Buttons */
.btn-solid-red, .btn-route {
    padding: 12px !important;      /* Pehle 14px/16px tha */
    font-size: 0.95rem !important; /* Pehle 1.05rem tha */
}

/* Secondary Actions */
.btn-premium-blue {
    padding: 10px 25px !important; /* Pehle 12px 35px tha */
    font-size: 0.95rem !important; /* Pehle 1.05rem tha */
}

/* View All Links */
.btn-view-all {
    padding: 12px 32px !important; /* Pehle 16px 40px tha */
    font-size: 0.95rem !important; /* Pehle 1.1rem tha */
}

/* Icons scaling to match new sleeker buttons */
.btn svg, .btn i, 
.btn-solid-red svg, .btn-solid-red i, 
.btn-route svg, .btn-route i, 
.btn-view-all svg, .btn-view-all i {
    width: 16px !important;
    height: 16px !important;
    font-size: 1rem !important;
}

/* Modal Submit Button (usko thoda prominent rakhna zaroori hai par pehle se chota) */
.modal-submit-btn {
    padding: 14px !important;
    font-size: 1rem !important;
}


/* mobile responsive */
/* =========================================================
   MASTER MOBILE RESPONSIVENESS FIX - PART 1 
   (Base, Top Bar, Hero, Doodles & Emergency Bar)
   ========================================================= */

@media (max-width: 768px) {
    
   

    /* 🔴 2. TOP HEADER FIX (Government Helpline Area) */
    .top-header-inner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 5px 0;
    }
    .top-right { margin-top: 5px; }
    .top-right a { margin: 0 8px; }

    /* 🔴 3. HERO SLIDER FIX */
    .camps-hero { height: auto; padding: 60px 0 80px 0; }
    .camps-hero h1 { font-size: 2.2rem !important; }
    
    .text-overlay {
        top: 55%; /* Mobile par thoda upar shift kiya taaki form hide na ho */
        width: 90%;
        padding: 0;
    }
    .text-overlay h1 { 
        font-size: 2.4rem; 
        line-height: 1.2;
    }
    .text-overlay .subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    /* Mobile buttons should be 100% width for easy 'Fat-Thumb' tapping */
    .hero-buttons-wrapper { 
        flex-direction: column; 
        width: 100%; 
        gap: 12px;
    }
    .hero-buttons-wrapper .btn {
        width: 100%;
        padding: 14px !important;
    }

    /* 🔴 4. EMERGENCY BAR TWEAKS */
    .emergency-wrapper { 
        margin-top: -30px; 
        padding: 0 15px; 
    }
    .emergency-bar { 
        flex-direction: column; 
        border-radius: 16px; 
        padding: 20px; 
        gap: 15px; 
        text-align: center; 
    }
    .em-divider { display: none; }
    .emergency-right { 
        flex-direction: column; 
        width: 100%; 
        gap: 15px; 
        padding-top: 15px;
        border-top: 1px dashed #E2E8F0; /* Divider ki jagah horizontal line */
    }
    .help-section { margin-right: 0; justify-content: center;}
    .social-text-links { justify-content: center; }
}

/* =========================================================
   MOBILE HAMBURGER MENU & SLIDE-IN NAVIGATION
   ========================================================= */

/* Desktop Layout for the new wrapper */
.nav-menu-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Hamburger button hidden on PC */
.hamburger-menu {
    display: none;
    cursor: pointer;
    border: none;
    background: transparent;
    flex-direction: column;
    gap: 6px;
    z-index: 10001; /* Menu ke upar rahega */
    padding: 5px;
}

.hamburger-menu .bar {
    width: 28px;
    height: 3px;
    background-color: var(--primary-blue);
    border-radius: 5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 🔴 MOBILE LAYOUT (992px and below) */
@media (max-width: 992px) {
    /* Show Hamburger */
    .hamburger-menu { display: flex; }

    /* The Side Menu Overlay */
    .nav-menu-wrapper {
        position: fixed;
        top: 0;
        right: -100%; /* By default screen ke bahar chhupa hai */
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background: #ffffff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        box-shadow: -15px 0 40px rgba(11, 43, 92, 0.15);
        transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 10000;
    }

    /* Jab Menu Open Hoga */
    .nav-menu-wrapper.active {
        right: 0;
    }

    /* Mobile Menu Links Setup */
    .nav-links {
        display: flex !important; /* Overrides old display:none */
        flex-direction: column;
        text-align: center;
        gap: 25px;
        width: 100%;
    }

    .nav-links a {
        font-size: 1.3rem;
        font-weight: 800;
        display: block;
        width: 100%;
    }

    /* Donate button inside mobile menu */
    .nav-menu-wrapper .nav-cta {
        width: 80%;
    }
    .nav-menu-wrapper .btn-nav {
        width: 100%;
        padding: 16px !important;
        font-size: 1.1rem !important;
    }

    /* 🔴 THE HAMBURGER 'X' ANIMATION */
    .hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background-color: var(--primary-red);
    }
    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }
    .hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background-color: var(--primary-red);
    }
}

/* =========================================================
   BRUTAL DESKTOP-TO-MOBILE SCALING (Forces Full Image & Layout)
   ========================================================= */
@media (max-width: 768px) {
    
    /* 1. Slider Height Fix: Height kam ki taaki aspect ratio desktop jaisa wide lage aur image kate nahi */
    .hero-slider { 
        height: 260px !important; /* 340px se 260px kar diya */
        min-height: auto !important;
    }

    /* 2. Image Fit Fix */
    .slide-bg {
        background-size: cover !important; 
        background-position: center top !important; /* Center-Top rakha taaki main image highlight ho */
    }

    /* 3. Text Overlay Centering & Resizing */
    .text-overlay {
        top: 68% !important; /* Wapas center laya */
        width: 100%;
        padding: 0 15px !important;
        transform: translate(-50%, -50%) !important;
    }

    /* 🔴 TEXT KO CHHOTA KIYA */
    .text-overlay h1 { 
        font-size: 1.35rem !important; /* 1.5rem se shrink kiya */
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
        letter-spacing: 0 !important;
    }
    
    .text-overlay .subtitle {
        font-size: 0.75rem !important; /* Subtitle aur chhota kiya */
        margin-bottom: 15px !important;
        font-weight: 600 !important;
    }

    /* 🔴 BUTTONS KO ULTRA-COMPACT KIYA */
    .hero-buttons-wrapper { 
        display: flex !important;
        flex-direction: row !important; /* Strictly ek line mein */
        justify-content: center !important;
        gap: 8px !important; /* Buttons ke beech ka gap kam kiya */
        width: 100% !important;
        margin-top: 0 !important;
    }

    .hero-buttons-wrapper .btn {
        width: auto !important; 
        min-width: 0 !important; /* Faltu ki width limit hatayi */
        padding: 8px 16px !important; /* Padding ekdum tight ki */
        font-size: 0.75rem !important; /* Font size chhota kiya */
        border-radius: 50px !important; 
        white-space: nowrap !important;
        height: auto !important;
    }
}

/* =========================================================
   TOP HEADER & MOBILE LOGIN LOGIC
   ========================================================= */

/* 1. Desktop par naye login link ko hide rakho */
.mobile-login-btn {
    display: none;
}

/* Mobile Screens (992px se neeche, jahan hamburger open hota hai) */
@media (max-width: 992px) {
    
    /* 2. Mobile par top-header ko puri tarah hide karo */
    .top-header {
        display: none !important;
    }

    /* 3. Top-header hatne ke baad Navbar ke upar ka gap fix karo */
    .main-navbar {
        top: 0 !important; 
    }

    /* 4. Hamburger menu ke andar wale login link ko show karo */
    .mobile-login-btn {
        display: block;
        margin-top: 10px; /* Thoda gap taaki baki links se alag dikhe */
        border-top: 1px solid rgba(11, 43, 92, 0.1);
        padding-top: 15px;
    }
    
    /* Login button ko thoda highlight karne ke liye */
    .mobile-login-btn a {
        color: var(--primary-red) !important;
    }
}



@media (max-width: 768px) {
    
    /* 1. WRAPPER & CENTERING */
    .emergency-wrapper {
        position: relative;
        z-index: 20;
        width: 100%;
        margin-top: -25px; /* Slider ke upar overlap */
        display: flex;
        justify-content: center;
    }

    /* 2. BAR - Strict Space-Between */
    .emergency-bar {
        display: flex;
        flex-direction: row;
        justify-content: space-between; /* Left ko left me, Right ko right me phekega */
        align-items: center;
        width: calc(100% - 5px); /* Screen width minus 15px gap on both sides */
        max-width: 450px;
        background: #ffffff;
        border-radius: 50px;
        padding: 8px 15px; /* Left aur Right dono taraf barabar 15px ki internal space */
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
        box-sizing: border-box;
    }

    /* 3. CONTAINERS */
    .emergency-left, 
    .emergency-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 0 !important;
        margin: 0 !important; /* Koi extra invisible space nahi */
        border: none;
        flex-shrink: 0;
    }

    /* 🔴 THE CULPRIT FIX: Help Section ka purana margin kill kiya */
    .help-section { 
        display: flex; 
        align-items: center; 
        gap: 6px; 
        margin: 0 !important; /* Yahi wo 15px tha jo right me gap bana raha tha */
        padding: 0 !important;
    }

    /* 4. TEXT & NUMBER */
    .em-text { display: none; }
    
    .em-number {
        font-size: 0.9rem;
        font-weight: 800;
        color: #B71C1C;
        white-space: nowrap;
    }

    .help-text {
        font-size: 0.85rem;
        font-weight: 700;
        color: #1E293B;
        white-space: nowrap;
    }

    /* 5. ICONS */
    .icon-circle {
        width: 30px;
        height: 30px;
        min-width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .icon-circle i { font-size: 0.85rem; }

    /* 6. HIDE USELESS DESKTOP STUFF */
    .em-divider, 
    .social-text-links {
        display: none !important;
    }
}

/* =========================================================
   VOLUNTEER SECTION - NO WHITE BOX (Mobile)
   ========================================================= */
@media (max-width: 768px) {
    
    .volunteer-section {
        padding-top: 40px;
        padding-bottom: 240px; /* Image cover hone ke liye space */
        background: url('./images/blood1.png') center bottom / 100% auto no-repeat, 
                    radial-gradient(circle at top, #f8fafc 0%, #e2e8f0 100%);
    }

    /* 🔴 White box ka saara kachra (background, shadow, blur) hata diya */
    .volunteer-content {
        padding: 0 15px;
        margin: 0;
        background: transparent; 
        box-shadow: none;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .volunteer-content h2 {
        font-size: 2.1rem;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .volunteer-content p {
        font-size: 0.95rem;
        margin-bottom: 25px;
        line-height: 1.6;
        color: #475569;
    }

    .volunteer-content .btn-premium-red {
        width: 100%;
        font-size: 1rem;
        padding: 14px 20px;
        border-radius: 10px;
        justify-content: center;
    }
}


/* =========================================================
   UNIVERSAL MOBILE NAVBAR FIX (Strictly Fixed, No Sticky)
   ========================================================= */
@media (max-width: 992px) {
    
    /* 1. Top Header mobile par wese bhi chhupa hota hai */
    .top-header {
        display: none;
    }

    /* 2. Navbar ko permanently Fixed kiya. Ab ye scroll nahi hoga */
    .main-navbar, 
    .main-navbar.sticky {
        position: fixed; 
        top: 0;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        padding: 12px 0;
        z-index: 9999;
        transition: none; /* Scroll karne par jo halka lag aata hai, wo khatam */
    }

    /* 3. Navbar hawa me tair raha hai, isliye pehle element (Hero Banner) ko utna hi neeche khiskana padega warna wo navbar ke peeche chhup jayega */
    .hero-slider, 
    .camps-hero {
        margin-top: 70px; 
    }
}




/* about page csss  */

/* =========================================================
   ABOUT US PAGE - SPECIFIC STYLES (DESKTOP ONLY)
   ========================================================= */

/* 1. Hero Section Adjustments */
.about-page-hero {
    height: 50vh !important;
    min-height: 400px !important;
}

.about-page-hero .text-overlay {
    top: 50% !important;
}

/* 2. Mission & Vision Section */
.mv-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.mv-text {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Highlights inside Mission */
.highlight-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-box:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(11, 43, 92, 0.05);
    border-color: #CBD5E1;
}

.h-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.highlight-box h4 {
    font-size: 1.1rem;
    color: var(--primary-blue);
    font-weight: 800;
    margin-bottom: 5px;
}

.highlight-box p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

/* Mission Image styling */
.mv-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(11, 43, 92, 0.1);
}

.mv-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Floating Badge on Image */
.mv-experience-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #1E3A8A 100%);
    color: white;
    padding: 25px;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(11, 43, 92, 0.3);
    border: 5px solid #ffffff;
}

.mv-experience-badge h3 {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    margin: 0;
}

.mv-experience-badge p {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    margin-top: 5px;
}

/* 3. Core Values Section */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.value-card {
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* Red line on top of card */
.value-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--primary-red);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}

.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(11, 43, 92, 0.08);
}

.value-card:hover::before {
    transform: scaleX(1);
}

.v-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: inline-block;
}

.value-card h3 {
    font-size: 1.3rem;
    color: var(--primary-blue);
    font-weight: 800;
    margin-bottom: 12px;
}

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

/* =========================================================
   FOUNDER MESSAGE SECTION (DESKTOP ONLY)
   ========================================================= */
.founder-message-section {
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

.founder-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* Image choti, Text box bada */
    gap: 60px;
    align-items: center;
}

/* Image Side Formatting */
.founder-image-wrapper {
    position: relative;
    padding: 20px; 
}

/* Peeche ka background block */
.founder-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 80%; height: 100%;
    background: linear-gradient(135deg, var(--bg-light) 0%, #E2E8F0 100%);
    border-radius: 24px;
    z-index: 0;
}

.founder-image-inner {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(11, 43, 92, 0.15);
    aspect-ratio: 3/4; /* Professional Portrait Ratio */
}

.founder-image-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.founder-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--primary-red);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 20px rgba(211, 47, 47, 0.4);
    border: 4px solid #ffffff;
}

/* Text Side Formatting */
.founder-text-wrapper {
    position: relative;
    padding-right: 40px;
}

/* Bada Quote Mark Watermark */
.quote-watermark {
    position: absolute;
    top: -50px;
    left: -30px;
    font-size: 10rem;
    font-family: 'Lora', serif;
    color: var(--primary-blue);
    opacity: 0.05;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.founder-text-wrapper .section-title {
    position: relative;
    z-index: 1;
    margin-bottom: 15px;
}

.founder-subtitle {
    font-size: 1.35rem;
    color: var(--primary-blue);
    font-weight: 700;
    font-family: 'Lora', serif;
    font-style: italic;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.founder-message-text {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

/* Signature & Designation Area */
.founder-signature {
    border-left: 4px solid var(--primary-red);
    padding-left: 20px;
    position: relative;
    z-index: 1;
}

.founder-name {
    font-size: 1.3rem;
    color: var(--text-dark);
    font-weight: 800;
    margin-bottom: 5px;
}

.founder-designation {
    font-size: 0.9rem;
    color: var(--primary-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================================
   ABOUT US PAGE - MOBILE RESPONSIVENESS (Tablet & Phone)
   ========================================================= */

/* --- TABLET VIEW (iPad) --- */
@media (max-width: 992px) {
    .mv-grid, .founder-grid {
        grid-template-columns: 1fr; /* 1 Column layout */
        gap: 40px;
    }
    .values-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 Grid on Tablet */
        gap: 25px;
    }
    .founder-text-wrapper {
        padding-right: 0; /* Extra right padding hatayi */
    }
    .founder-image-wrapper {
        max-width: 500px;
        margin: 0 auto; /* Image ko center kiya */
    }
}

/* --- MOBILE VIEW (Phones) --- */
@media (max-width: 768px) {
    
    /* 1. Hero Banner Mobile Fix */
    .about-page-hero {
        height: 280px !important;
        min-height: auto !important;
    }
    .about-page-hero .text-overlay {
        top: 60% !important;
        padding: 0 15px !important;
    }
    .about-page-hero h1 {
        font-size: 2rem !important;
        margin-bottom: 5px !important;
    }
    .about-page-hero .subtitle {
        font-size: 0.9rem !important;
    }

    /* 2. Mission & Vision Fix */
    .mv-grid {
        gap: 35px;
    }
    .mv-content {
        text-align: center; /* Mobile par center readbility better hoti hai */
    }
    .mv-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    /* Highlight boxes stack vertically */
    .highlight-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px 15px;
        gap: 12px;
    }
    
    /* 10+ Years Badge Scale Down */
    .mv-experience-badge {
        width: 100px;
        height: 100px;
        padding: 15px;
        bottom: -10px;
        left: -5px;
        border-width: 3px;
    }
    .mv-experience-badge h3 { font-size: 1.8rem; }
    .mv-experience-badge p { font-size: 0.65rem; }

    /* 3. Core Values Fix */
    .values-grid {
        grid-template-columns: 1fr; /* Strictly 1 line mein */
        gap: 15px;
    }
    .value-card {
        padding: 25px 20px;
    }
    .value-card h3 { font-size: 1.2rem; }
    .value-card p { font-size: 0.9rem; }

    /* 4. Founder Message Fix */
    .founder-grid {
        gap: 30px;
    }
    
    .founder-image-wrapper {
        max-width: 320px;
        padding: 12px;
    }
    
    /* Background block offset kam kiya */
    .founder-image-wrapper::before {
        width: 90%; 
    }

    .founder-badge {
        width: 45px;
        height: 45px;
        bottom: 15px;
        right: 15px;
        border-width: 3px;
    }
    .founder-badge svg { width: 18px; height: 18px; }

    .founder-text-wrapper {
        padding-top: 15px;
        text-align: center; /* Center align for mobile */
    }

    /* Giant Quote Mark Resize & Recenter */
    .quote-watermark {
        font-size: 6rem;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
    }

    .founder-subtitle {
        font-size: 1.15rem;
        margin-bottom: 15px;
    }

    .founder-message-text {
        font-size: 0.95rem;
        text-align: left; /* Message padhne ke liye left hi theek hai */
    }

    /* Signature styling shift to top-border instead of left-border for center layout */
    .founder-signature {
        border-left: none;
        padding-left: 0;
        border-top: 3px solid var(--primary-red);
        padding-top: 15px;
        margin-top: 30px;
        display: inline-block;
        text-align: center;
    }
    .founder-name { font-size: 1.15rem; }
    .founder-designation { font-size: 0.8rem; }
}




/* member page css */
/* =========================================================
   NGO MEMBERS PAGE - SPECIFIC STYLES (DESKTOP ONLY)
   ========================================================= */

/* Main Grid Layout */
.members-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Column Premium Layout */
    gap: 25px;
    margin-top: 40px;
}

/* Premium Member Card */
.member-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 5px 20px rgba(11, 43, 92, 0.04);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}

.member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(11, 43, 92, 0.1);
    border-color: #CBD5E1;
}

/* Photo Wrapper & Position Tag */
.member-photo-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: #F8FAFC;
}

.member-photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.member-card:hover .member-photo-wrapper img {
    transform: scale(1.08);
}

.member-position {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    color: white;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

/* Position Colors */
.bg-red { background: rgba(211, 47, 47, 0.9); backdrop-filter: blur(5px); }
.bg-blue { background: rgba(11, 43, 92, 0.9); backdrop-filter: blur(5px); }
.bg-yellow { background: rgba(221, 107, 32, 0.9); backdrop-filter: blur(5px); }
.bg-green { background: rgba(56, 161, 105, 0.9); backdrop-filter: blur(5px); }

/* Card Details Area */
.member-details-box {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Smart ID Tag */
.member-id-tag {
    display: inline-block;
    background: #F1F5F9;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    border: 1px dashed #CBD5E1;
    align-self: flex-start;
}

.member-name {
    font-size: 1.25rem;
    color: var(--primary-blue);
    font-weight: 800;
    margin-bottom: 15px;
    font-family: 'Ubuntu', sans-serif;
}

/* Info List (Email & Address) */
.member-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid #F1F5F9;
    padding-top: 15px;
    margin-top: auto; /* Pushes to bottom */
}

.info-row {
    display: flex;
    align-items: flex-start; /* Keeps icon at top if text wraps */
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 600;
}

.info-row i {
    color: var(--primary-red);
    font-size: 0.9rem;
    margin-top: 2px;
}

/* =========================================================
   MEMBER CARD IMPROVEMENTS: SOCIAL BAR & BANNER
   ========================================================= */

/* 1. Social Action Bar */
/* =========================================================
   MEMBER CARD: CONNECT BUTTON FIX (Desktop & Mobile)
   ========================================================= */

.member-action-bar {
    display: flex;
    justify-content: center; /* Button ko center karne ke liye */
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #E2E8F0;
}

.btn-m-connect {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--primary-red);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #F8FAFC; /* Premium light grey background */
    padding: 12px 0;
    width: 100%; /* Button ko poori chaurai dega */
    text-align: center;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/* Hover Effect: Lal rang ka solid button ban jayega */
.btn-m-connect:hover {
    background: var(--primary-red);
    color: #ffffff;
    border-color: var(--primary-red);
    box-shadow: 0 6px 15px rgba(211, 47, 47, 0.25);
    transform: translateY(-2px);
}

.m-social-links {
    display: flex;
    gap: 12px;
}

.m-social-links a {
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.m-social-links a:hover {
    color: var(--primary-blue);
    transform: translateY(-2px);
}



/* 2. Join Member Banner */
.join-member-banner {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #1E3A8A 100%);
    border-radius: 16px;
    padding: 35px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    box-shadow: 0 15px 30px rgba(11, 43, 92, 0.2);
}

.jmb-text h3 {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 5px;
    font-family: 'Ubuntu', sans-serif;
}

.jmb-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0;
}

.join-member-banner .btn-solid-red {
    width: auto;
    padding: 14px 35px;
    margin-top: 0;
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.4);
}

/* =========================================================
   NGO MEMBERS PAGE - MOBILE RESPONSIVENESS (2 CARDS/ROW)
   ========================================================= */

/* Tablet View */
@media (max-width: 992px) {
    .members-grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* Mobile View (Strictly 2 Cards Per Row) */
@media (max-width: 768px) {
    
    /* 1. The Grid - Force 2 Columns */
    .members-grid-container {
        grid-template-columns: repeat(2, 1fr) !important; /* 🔴 2 Cards in one line */
        gap: 12px !important; /* Gap thoda kam kiya taaki fit ho jaye */
        padding: 0 10px;
    }

    /* 2. Photo Wrapper (Height Adjusted for 2-column) */
    .member-photo-wrapper {
        height: 150px; /* Choti height taaki lamba na lage */
    }

    .member-position {
        font-size: 0.65rem;
        padding: 5px 0;
        letter-spacing: 0.5px;
    }

    /* 3. Details Box internal padding */
    .member-details-box {
        padding: 15px 12px; /* Padding kam ki */
    }

    .member-id-tag {
        font-size: 0.65rem;
        padding: 3px 6px;
        margin-bottom: 8px;
    }

    .member-name {
        font-size: 0.95rem; /* Font shrink kiya taaki fit aaye */
        margin-bottom: 10px;
    }

    /* 4. Info List (Address & Email) */
    .member-info-list {
        gap: 8px;
        padding-top: 10px;
    }

    .info-row {
        font-size: 0.7rem;
        gap: 6px;
        align-items: center; /* Text center karne ke liye */
    }
    
    /* Lamba email address line break karne ke liye */
    .info-row span {
        word-break: break-all; 
        line-height: 1.3;
    }

    .info-row i {
        font-size: 0.75rem;
    }

    /* 5. Social Bar & Connect Button */
    .member-action-bar {
        flex-direction: column; /* Mobile pe social upar, button niche */
        gap: 10px;
        padding-top: 12px;
        margin-top: 12px;
    }

    .m-social-links {
        gap: 15px;
    }

    .btn-m-connect {
        font-size: 0.75rem;
        width: 100%;
        text-align: center;
        background: #F8FAFC; /* Mobile pe button jaisa dikhega */
        padding: 8px 0;
        border-radius: 6px;
        border: 1px solid #E2E8F0;
    }

    /* 6. Join Banner Mobile Fix */
    .join-member-banner {
        padding: 25px 20px;
        margin-top: 30px;
        flex-direction: column; /* Text aur button upar niche */
        text-align: center;
        gap: 20px;
        border-radius: 12px;
    }

    .jmb-text h3 {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .jmb-text p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .join-member-banner .btn-solid-red {
        width: 100%;
        font-size: 0.95rem;
        padding: 12px;
    }
}


/* =========================================================
   🔴 ANTI-LAG & SCROLL PERFORMANCE FIX (GPU ACCELERATION)
   ========================================================= */

/* 1. Heavy Fixed Backgrounds ko GPU par bheja */
body::before, 
body::after {
    transform: translateZ(0); 
    will-change: transform;
    pointer-events: none;
    backface-visibility: hidden;
}

/* 2. Floating Leaders aur Watermarks jo scroll pe jhatka dete hain */
.leader-floating,
.chakra-spin-watermark {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 3. Sticky Navbar rendering fix */
.main-navbar, 
.main-navbar.sticky {
    will-change: transform, background-color, box-shadow;
    transform: translateZ(0);
}

/* 4. Glassmorphism Lag Killer */
.search-console-wrapper,
.stat-card-final,
.modal-overlay,
.step-content {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* 5. Smooth Scroll behavior */
html {
    scroll-behavior: smooth;
}




/* request and find css */
/* =========================================================
   PREMIUM SLIDING MODAL (FIND & REQUEST BLOOD) - FIXED
   ========================================================= */

.sliding-modal-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 90vh; /* 🔴 Badi height, taaki naye inputs fit ho sakein */
    max-height: 700px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(5, 10, 21, 0.2);
    overflow: hidden;
    transform: scale(0.8) translateZ(0); 
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

body.modal-open .sliding-modal-wrapper { transform: scale(1) translateZ(0); }

/* --- FORM BOXES (Scrollable for extra inputs) --- */
.s-form-box {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    padding: 35px 40px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.6s ease-in-out;
    overflow-y: auto; /* 🔴 Form scrollable rahega agar screen choti hui */
}

/* 🔴 Premium Scrollbar for Forms */
.s-form-box::-webkit-scrollbar { width: 6px; }
.s-form-box::-webkit-scrollbar-track { background: transparent; }
.s-form-box::-webkit-scrollbar-thumb { background-color: #CBD5E1; border-radius: 10px; }

.modal-form {
    display: flex; 
    flex-direction: column; 
    gap: 15px; /* Compact gap */
    height: 100%;
}

/* 🔴 File Upload Premium Styling */
.form-file-upload {
    width: 100%; padding: 10px 15px;
    border: 1.5px dashed #CBD5E1; border-radius: 8px;
    background: #F8FAFC; color: var(--text-muted);
    font-family: 'Ubuntu', sans-serif; font-size: 0.9rem;
    cursor: pointer; transition: all 0.3s ease;
}
.form-file-upload:hover { border-color: var(--primary-blue); background: #ffffff; }
.form-file-upload::file-selector-button {
    background: #E2E8F0; border: none; padding: 8px 16px; border-radius: 6px;
    color: var(--primary-blue); font-weight: 700; font-family: 'Ubuntu', sans-serif;
    margin-right: 15px; cursor: pointer; transition: background 0.3s;
}
.form-file-upload::file-selector-button:hover { background: #CBD5E1; }

.s-find-box { left: 0; opacity: 1; z-index: 2; }
.s-request-box { right: 0; opacity: 0; z-index: 1; pointer-events: none; }

.sliding-modal-wrapper.active .s-find-box { opacity: 0; z-index: 1; pointer-events: none; }
.sliding-modal-wrapper.active .s-request-box { opacity: 1; z-index: 2; pointer-events: auto; }

/* --- THE MAGIC SLIDING OVERLAY --- */
.s-toggle-box {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    background-color: #FAFBFF;
    overflow: hidden;
    z-index: 10;
    transition: left 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    box-shadow: -15px 0 30px rgba(11, 43, 92, 0.08);
}

.sliding-modal-wrapper.active .s-toggle-box { left: 0; box-shadow: 15px 0 30px rgba(11, 43, 92, 0.08); }

/* --- THE IMAGE FLIP LOGIC (As requested) --- */
.s-toggle-bg-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center; pointer-events: none;
}

.s-toggle-img {
    height: 120%; width: auto; opacity: 0.15; object-fit: contain;
    transform: scaleX(1); 
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.sliding-modal-wrapper.active .s-toggle-img {
    transform: scaleX(-1); /* Flips properly */
}

/* --- TOGGLE TEXT PANELS --- */
.s-toggle-panel {
    position: absolute; top: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    padding: 40px; transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.s-toggle-right { opacity: 1; transform: translateX(0); z-index: 2; pointer-events: auto; }
.sliding-modal-wrapper.active .s-toggle-right { opacity: 0; transform: translateX(100%); pointer-events: none; }

.s-toggle-left { opacity: 0; transform: translateX(-100%); z-index: 1; pointer-events: none; }
.sliding-modal-wrapper.active .s-toggle-left { opacity: 1; transform: translateX(0); pointer-events: auto; z-index: 2; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .sliding-modal-wrapper { height: auto; min-height: 85vh; display: flex; flex-direction: column; }
    .s-toggle-box { position: relative; left: 0 !important; width: 100%; height: 220px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); order: 1; }
    .s-form-box { position: relative; width: 100%; height: auto; order: 2; padding: 25px 20px; overflow: visible; }
    .s-find-box { display: block; }
    .s-request-box { display: none; } 
    .sliding-modal-wrapper.active .s-find-box { display: none; opacity: 0; }
    .sliding-modal-wrapper.active .s-request-box { display: block; opacity: 1; pointer-events: auto; }
    .s-toggle-panel { padding: 20px; }
    .s-toggle-img { height: 140%; }
}


/* certificate page css */
/* =========================================================
   ULTRA-PREMIUM CERTIFICATE PAGE (3D Flip & Gold Seal)
   ========================================================= */

.certificate-section { position: relative; background: #FAFBFF; overflow: hidden; min-height: 85vh;}
.relative-z { position: relative; z-index: 10; }

/* Ambient Glows */
.cert-bg-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; z-index: 0; pointer-events: none; }
.glow-left { top: 10%; left: -10%; width: 400px; height: 400px; background: rgba(211, 47, 47, 0.15); }
.glow-right { bottom: 10%; right: -10%; width: 500px; height: 500px; background: rgba(11, 43, 92, 0.12); }

.cert-workspace-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 50px;
    align-items: center;
}

/* --- LEFT PANEL: PREMIUM AUTH BOX --- */
.cert-step {
    display: none !important; 
    animation: fadeInStep 0.4s ease-in-out;
}
.cert-step.active { display: block !important; }

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

.cert-auth-box {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 45px 35px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(11, 43, 92, 0.08), inset 0 1px 0 rgba(255,255,255,1);
    border: 1px solid rgba(226, 232, 240, 0.8);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-icon-top {
    width: 60px; height: 60px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(11, 43, 92, 0.1), rgba(11, 43, 92, 0.02));
    color: var(--primary-blue); font-size: 1.5rem;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 20px; border: 1px solid rgba(11, 43, 92, 0.1);
}

.cert-step h3 { font-size: 1.6rem; color: var(--text-dark); font-weight: 800; margin-bottom: 8px; font-family: 'Ubuntu', sans-serif;}
.auth-sub { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.font-bold { font-weight: 800; } .underline { text-decoration: underline; font-weight: 700; }

.premium-input {
    width: 100%; padding: 15px 20px; border-radius: 10px;
    border: 2px solid #E2E8F0; background: #F8FAFC;
    font-size: 1.05rem; font-family: 'Ubuntu', sans-serif; font-weight: 600;
    color: var(--text-dark); transition: all 0.3s; outline: none;
}
.premium-input:focus { border-color: var(--primary-blue); background: #fff; box-shadow: 0 0 0 4px rgba(11, 43, 92, 0.08); }

.otp-input { letter-spacing: 12px; font-size: 1.5rem; text-align: center; font-weight: 800; }
.success-checkmark i { font-size: 5rem; color: #059669; margin-bottom: 20px; filter: drop-shadow(0 10px 15px rgba(5, 150, 105, 0.3)); }

/* 🔴 THE FIX 1: Verify Button rounded aur properly gap ke saath */
.cert-step .btn-solid-red,
.cert-step .btn-premium-blue {
    margin-top: 25px !important; 
    border-radius: 10px !important; /* Round corners force kar diya */
    padding: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* --- RIGHT PANEL: 3D STAGE & FLIPPER --- */
.cert-preview-stage {
    perspective: 1500px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cert-flipper {
    width: 100%;
    max-width: 850px;
    aspect-ratio: 1.414 / 1; 
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cert-flipper.verified { transform: rotateY(180deg); }

.cert-face {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; border-radius: 8px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.cert-front {
    background: #ffffff; display: flex; justify-content: center; align-items: center;
    border: 1px solid #E2E8F0; overflow: hidden;
}

.fake-cert-blur {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('./images/bg2.png'); background-size: cover; filter: blur(15px); opacity: 0.3; z-index: 1;
}

.locked-overlay-content {
    position: relative; z-index: 2; text-align: center;
    background: rgba(255,255,255,0.85); backdrop-filter: blur(10px);
    padding: 40px 60px; border-radius: 20px; border: 1px solid rgba(255,255,255,1);
    box-shadow: 0 10px 30px rgba(11, 43, 92, 0.1);
}
.lock-icon-wrapper { width: 80px; height: 80px; border-radius: 50%; background: #F1F5F9; display: flex; justify-content: center; align-items: center; margin: 0 auto 20px; }
.lock-icon-wrapper i { font-size: 2rem; color: #94A3B8; }
.locked-overlay-content h3 { font-size: 1.8rem; color: var(--primary-blue); font-weight: 800; margin-bottom: 5px; }

.cert-back { transform: rotateY(180deg); background: #FAF9F6; }

/* --- OFFICIAL CERTIFICATE DESIGN --- */
.official-certificate {
    width: 100%; height: 100%; padding: 25px; background: #FAF9F6;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    box-sizing: border-box; /* Padding height badha na de */
}

.cert-border-outer { border: 2px solid #0B2B5C; padding: 8px; height: 100%; position: relative; box-sizing: border-box; }
.cert-border-inner { 
    border: 1px solid #0B2B5C; padding: 20px 30px; height: 100%; /* Gap thoda compact rakha */
    position: relative; display: flex; flex-direction: column; justify-content: space-between; 
    box-sizing: border-box;
}

.corner { position: absolute; width: 20px; height: 20px; border: 3px solid var(--primary-red); }
.corner-tl { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.corner-tr { top: -4px; right: -4px; border-left: none; border-bottom: none; }
.corner-bl { bottom: -4px; left: -4px; border-right: none; border-top: none; }
.corner-br { bottom: -4px; right: -4px; border-left: none; border-top: none; }

.cert-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.04; width: 50%; pointer-events: none; z-index: 0; }
.cert-watermark img { width: 100%; filter: grayscale(100%); }

.cert-header-area { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 10px; position: relative; z-index: 1; }
.cert-logo-fake { width: 45px; height: 45px; background: var(--primary-red); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; }
.cert-top-text h4 { font-family: 'Ubuntu', sans-serif; color: var(--primary-blue); font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;}
.cert-top-text p { font-size: 0.75rem; color: #64748B; font-weight: 600;}

.cert-title-area { text-align: center; position: relative; z-index: 1; }
.cert-title-area h1 { font-family: 'Lora', serif; font-size: 3.2rem; color: var(--primary-red); line-height: 1; letter-spacing: 3px; margin-bottom: 0;}
.cert-title-area h3 { font-size: 1rem; color: var(--primary-blue); letter-spacing: 6px; font-weight: 700; text-transform: uppercase;}

.cert-body-text { text-align: center; margin: 10px 0; position: relative; z-index: 1; padding: 0 40px;}
.cert-body-text p { font-family: 'Lora', serif; font-size: 1.05rem; color: #334155; font-style: italic; line-height: 1.5; }
.donor-name-cert { font-family: 'Lora', serif; font-size: 2.5rem; color: var(--primary-blue); border-bottom: 2px solid var(--primary-red); display: inline-block; padding: 0 30px; margin: 5px 0; font-weight: 700;}

.cert-footer-area { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; padding: 0 20px; margin-top: 15px;}
.cert-signature { text-align: center; width: 180px; }
.signature-font { font-family: 'Brush Script MT', cursive, 'Lora', serif; font-size: 1.6rem; color: #1E293B; border-bottom: 1px solid #94A3B8; padding-bottom: 5px; margin-bottom: 5px; line-height: 1; }
.cert-signature p { font-size: 0.75rem; color: var(--primary-blue); font-weight: 800; text-transform: uppercase; letter-spacing: 1px;}

.cert-stamp-seal { position: relative; width: 90px; height: 90px; display: flex; justify-content: center; align-items: center; margin: 0 20px; }
.seal-inner { width: 75px; height: 75px; background: linear-gradient(135deg, #D32F2F, #991B1B); border-radius: 50%; border: 2px dashed #FCD34D; box-shadow: 0 0 0 6px #D32F2F, 0 10px 20px rgba(0,0,0,0.2); display: flex; justify-content: center; align-items: center; text-align: center; color: #FCD34D; font-size: 0.7rem; font-weight: 900; letter-spacing: 1px; line-height: 1.2; z-index: 2; }
.seal-ribbon { position: absolute; bottom: -15px; width: 20px; height: 35px; background: #B71C1C; z-index: 1; }
.seal-ribbon.left { left: 15px; transform: rotate(15deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.seal-ribbon.right { right: 15px; transform: rotate(-15deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }

.cert-id-badge { position: absolute; bottom: 5px; right: 15px; font-size: 0.75rem; color: #94A3B8; font-family: monospace; font-weight: 600; }

/* 🔴 THE FIX 2: MOBILE RESPONSIVENESS FOR CERTIFICATE FLIPPER */
@media (max-width: 1024px) {
    .cert-workspace-grid { grid-template-columns: 1fr; gap: 40px; }
    .cert-auth-box { min-height: auto; padding: 35px 25px; }
    
    /* Yaha aspect ratio ko hata kar, height ko content ke hisaab se grow hone diya gaya hai */
    .cert-flipper { 
        aspect-ratio: auto !important; 
        min-height: 550px; 
        height: auto; /* Height fix nahi hogi, text fit hoga */
    }
    
    .cert-title-area h1 { font-size: 2.2rem !important; }
    .donor-name-cert { font-size: 1.8rem !important; padding: 0 15px !important;}
    .cert-body-text { padding: 0 5px !important; }
    .cert-body-text p { font-size: 0.95rem !important; }
    .cert-footer-area { flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 25px !important; }
    .cert-stamp-seal { order: -1; width: 100%; margin-bottom: 10px; } 
    
    .official-certificate { padding: 15px !important; }
    .cert-border-inner { padding: 15px !important; }
}



/* contact page css */


/* =========================================================
   CONTACT US PAGE STYLES (Premium Upgrades)
   ========================================================= */

/* 🔴 FONT AWESOME GLOBAL FIX (To stop Ubuntu override) */
.fa-solid, .fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.contact-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: stretch;
}

.contact-panel-title {
    font-size: 2.2rem; font-weight: 800; color: var(--text-dark);
    font-family: 'Ubuntu', sans-serif; margin-bottom: 5px;
}

.contact-panel-desc {
    color: var(--text-muted); font-size: 1rem; margin-bottom: 35px; line-height: 1.6;
}

/* --- LEFT PANEL: Info & Map --- */
.contact-info-panel, .contact-form-panel {
    background: #ffffff; padding: 45px 40px; border-radius: 20px;
    box-shadow: 0 15px 40px rgba(11, 43, 92, 0.05); border: 1px solid #E2E8F0;
}

.contact-info-panel { display: flex; flex-direction: column; }

.contact-details-list { display: flex; flex-direction: column; gap: 25px; margin-bottom: 35px; }

.c-detail-item { display: flex; gap: 15px; align-items: flex-start; }

.c-detail-icon {
    width: 45px; height: 45px; min-width: 45px; background: #FAFBFF;
    color: var(--primary-red); border: 1px dashed #CBD5E1; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.1rem; transition: all 0.3s ease;
}

.c-detail-item:hover .c-detail-icon {
    background: var(--primary-red); color: #ffffff;
    border-color: var(--primary-red); transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.3);
}

.c-detail-text h4 { font-size: 1.05rem; color: var(--primary-blue); font-weight: 800; margin-bottom: 5px; }
.c-detail-text p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.c-detail-text .highlight-text { color: var(--primary-red); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.5px;}

/* 🔴 PREMIUM MAP UPGRADE */
.contact-map-wrapper {
    width: 100%; height: 250px; border-radius: 12px; overflow: hidden;
    border: 2px solid #E2E8F0; flex-grow: 1; position: relative;
}

.contact-map-wrapper iframe {
    /* Map default pe black&white rahega (premium look) */
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.5s ease-in-out;
}

.contact-map-wrapper:hover iframe {
    /* Hover karne par asali color wapas aayega */
    filter: grayscale(0%) contrast(1);
}

/* --- RIGHT PANEL: Form --- */
.c-form { display: flex; flex-direction: column; gap: 20px; }

/* Text area specific fix */
.contact-textarea {
    resize: vertical; /* User height badha sakta hai par width nahi */
    min-height: 120px;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
    .contact-grid-wrapper { grid-template-columns: 1fr; gap: 30px; }
    .contact-info-panel, .contact-form-panel { padding: 35px 25px; }
    .contact-map-wrapper { height: 300px; }
}

@media (max-width: 768px) {
    .contact-panel-title { font-size: 1.8rem; }
    .contact-info-panel, .contact-form-panel { padding: 25px 20px; }
    .form-grid-2 { grid-template-columns: 1fr; gap: 20px; }
    .contact-map-wrapper { height: 220px; }
    
    /* Mobile par button compact */
    .c-form .btn-solid-red { padding: 14px !important; font-size: 1rem !important; }
}




/* volunteer page css */

/* =========================================================
   PREMIUM VOLUNTEER PAGE STYLES (Energetic & Welcoming)
   ========================================================= */

/* --- LEFT PANEL: High Energy Motivation --- */
.vol-info-panel {
    /* 🔴 THE FIX: Removed boring blue. Added energetic Red-Orange gradient */
    background: linear-gradient(135deg, #D32F2F 0%, #E53E3E 100%);
    position: relative;
    overflow: hidden;
    justify-content: center;
    border: none; /* Border hataya taaki gradient solid lage */
}

/* Background Pattern (Subtle dots) */
.vol-info-panel::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255,255,255,0.2) 1.5px, transparent 1.5px);
    background-size: 20px 20px; opacity: 0.3; z-index: 1; pointer-events: none;
}

.vol-info-content {
    position: relative;
    z-index: 2;
}

/* Updated Text Colors for Red Background */
.vol-info-content h2.contact-panel-title { color: #ffffff !important; }
.vol-info-content h2 span { color: #FCD34D !important; /* Yellow text for contrast */ }
.vol-info-content p { color: rgba(255,255,255,0.9) !important; }

.vol-perks-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.vol-perk-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 18px 20px;
    border-radius: 12px;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.vol-perk-item:hover {
    transform: translateX(8px);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.vol-perk-item i {
    font-size: 1.4rem;
    color: #FCD34D; /* Yellow icons pop beautifully on red */
    background: rgba(255,255,255,0.15);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
}

.vol-bg-icon {
    position: absolute; bottom: -20px; right: -20px;
    font-size: 18rem; color: #ffffff; opacity: 0.05;
    z-index: 1; transform: rotate(-15deg); pointer-events: none;
}

/* --- RIGHT FORM: Premium Skill Selection --- */
.vol-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.skill-checkbox-label {
    cursor: pointer;
    display: block;
    position: relative; /* Animation ke liye */
}

.skill-checkbox-label input[type="checkbox"] {
    display: none; 
}

.skill-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Text aur icon ke beech jagah */
    width: 100%;
    padding: 14px 15px;
    background: #F8FAFC;
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover state */
.skill-checkbox-label:hover .skill-btn {
    border-color: #CBD5E1;
    background: #ffffff;
    transform: translateY(-2px);
}

/* 🔴 ACTIVE STATE: Jab checkbox checked ho */
.skill-checkbox-label input[type="checkbox"]:checked + .skill-btn {
    background: rgba(211, 47, 47, 0.05); /* Halka laal tint */
    color: var(--primary-red);
    border-color: var(--primary-red);
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.15);
}

/* 🔴 ACTIVE STATE: Checkmark add karne ka magic */
.skill-checkbox-label input[type="checkbox"]:checked + .skill-btn::before {
    content: '\f00c'; /* FontAwesome check icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--primary-red);
    font-size: 1rem;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Mobile Responsiveness for Skills Grid */
@media (max-width: 768px) {
    .vol-skills-grid {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
    }
    .vol-info-panel {
        padding: 40px 25px;
    }
    .vol-perk-item {
        font-size: 0.9rem; padding: 15px;
    }
    .vol-perk-item i {
        width: 35px; height: 35px; font-size: 1.1rem;
    }
}




/* blogs page css */

/* =========================================================
   PREMIUM BLOG / NEWS PAGE STYLES (Magazine Editorial Look)
   ========================================================= */

.blog-page-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; 
    gap: 50px;
    align-items: start;
}

/* --- MAIN FEED CARDS --- */
.blog-main-feed { display: flex; flex-direction: column; gap: 45px; }

.blog-card-large {
    background: #ffffff;
    border-radius: 20px; /* Thoda aur smooth kiya */
    border: none; /* Boring border hataya */
    box-shadow: 0 15px 40px rgba(11, 43, 92, 0.06); /* Soft & Deep Premium Shadow */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.blog-card-large:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(11, 43, 92, 0.12); /* Lift effect */
}

/* Image Wrapper Upgrade */
.blog-img-wrapper-large {
    position: relative;
    width: 100%;
    height: 320px !important; /* Perfect visual height */
    overflow: hidden;
    border-bottom: 4px solid var(--primary-red); /* Sharp separation */
}

/* Image par slight gradient overlay taaki text pop ho (agar future me upar text aaye) */
.blog-img-wrapper-large::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(11,43,92,0.1) 100%);
    pointer-events: none;
}

.blog-img-wrapper-large img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blog-card-large:hover .blog-img-wrapper-large img {
    transform: scale(1.08) rotate(1deg); /* Slight dynamic tilt */
}

/* Vibrant Date Badge */
.blog-date-badge {
    position: absolute;
    top: 20px; left: 20px;
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 50px; /* Pill shape */
    font-weight: 800;
    font-size: 0.85rem;
    z-index: 2;
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.3);
    border: 2px solid rgba(255,255,255,0.2); /* Glassy border */
    letter-spacing: 0.5px;
}

.blog-body-large { padding: 40px; }

.blog-category {
    color: var(--primary-red);
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    display: inline-block;
    background: rgba(211, 47, 47, 0.08);
    padding: 6px 12px;
    border-radius: 6px;
}

.blog-title-large {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 15px;
    font-family: 'Ubuntu', sans-serif;
    letter-spacing: -0.5px;
}

.blog-title-large a { color: var(--primary-blue); transition: color 0.3s ease; }
.blog-title-large a:hover { color: var(--primary-red); }

.blog-excerpt-large {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 30px;
}

.blog-meta-data {
    display: flex; gap: 25px; padding-top: 25px;
    border-top: 1px dashed #CBD5E1;
    color: var(--text-muted); font-size: 0.95rem; font-weight: 600;
}
.blog-meta-data i { color: var(--primary-red); margin-right: 8px; }

/* Dynamic Button */
.btn-outline-red {
    display: inline-flex; justify-content: center; align-items: center;
    border: 2px solid var(--primary-red); color: var(--primary-red);
    background: transparent; border-radius: 50px; /* Pill shape looks more premium */
    font-family: 'Ubuntu', sans-serif; font-weight: 800; text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 12px 30px !important;
}
.btn-outline-red:hover {
    background: var(--primary-red); color: #ffffff;
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.3); transform: translateY(-3px);
}

/* Pagination */
.pagination-wrapper { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
.page-btn {
    width: 48px; height: 48px; display: flex; justify-content: center; align-items: center;
    background: #ffffff; border: none; border-radius: 12px; color: var(--primary-blue);
    font-weight: 800; cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); font-size: 1.1rem;
}
.page-btn:hover, .page-btn.active {
    background: var(--primary-red); color: #ffffff; transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.3);
}
.page-btn.next-btn { width: auto; padding: 0 25px; border-radius: 50px; }

/* --- SIDEBAR UPGRADES --- */
.blog-sidebar { display: flex; flex-direction: column; gap: 35px; }

.sidebar-widget {
    background: #ffffff; padding: 35px 30px; border-radius: 20px;
    border: none; border-top: 4px solid var(--primary-blue); /* Solid colored top line */
    box-shadow: 0 15px 35px rgba(11, 43, 92, 0.06);
}

.widget-title {
    font-size: 1.3rem; color: var(--primary-blue); font-weight: 800;
    margin-bottom: 25px; padding-bottom: 12px;
    border-bottom: 2px dashed #E2E8F0; position: relative;
}
.widget-title::after {
    content: ''; position: absolute; bottom: -2px; left: 0;
    width: 50px; height: 3px; background: var(--primary-red); border-radius: 3px;
}

.sidebar-search { display: flex; border: 2px solid #E2E8F0; border-radius: 50px; overflow: hidden; transition: border 0.3s; }
.sidebar-search:focus-within { border-color: var(--primary-blue); }
.sidebar-search input { flex-grow: 1; padding: 14px 20px; border: none; outline: none; background: transparent; font-size: 0.95rem;}
.sidebar-search button { background: var(--primary-blue); color: #ffffff; border: none; padding: 0 20px; cursor: pointer; transition: 0.3s; }
.sidebar-search button:hover { background: var(--primary-red); }

.widget-list { list-style: none; padding: 0; margin: 0; }
.widget-list li { margin-bottom: 15px; }
.widget-list li a {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--text-dark); font-weight: 600; font-size: 1.05rem; transition: color 0.3s ease;
}
.widget-list li a:hover { color: var(--primary-red); padding-left: 5px; }
.widget-list li a span {
    background: rgba(211, 47, 47, 0.08); padding: 4px 12px;
    border-radius: 50px; font-size: 0.85rem; color: var(--primary-red); font-weight: 800;
}

.recent-post-item { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #E2E8F0; }
.recent-post-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.recent-post-item img { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.recent-post-item h4 { font-size: 1rem; margin-bottom: 5px; line-height: 1.4; }
.recent-post-item h4 a { color: var(--text-dark); font-weight: 700; transition: color 0.3s; }
.recent-post-item h4 a:hover { color: var(--primary-blue); }
.recent-post-item span { font-size: 0.8rem; color: var(--primary-red); font-weight: 700; }

/* =========================================================
   SINGLE ARTICLE PAGE (Ultra-Premium Magazine Experience)
   ========================================================= */

.article-header { 
    margin-bottom: 40px; 
    text-align: center; /* Magazine style center alignment */
    max-width: 850px;
    margin-left: auto; margin-right: auto;
}
.article-main-title { 
    font-size: 3.2rem; /* Much larger and bolder */
    color: var(--primary-blue); 
    font-weight: 900; 
    line-height: 1.2; 
    margin-bottom: 25px; 
    font-family: 'Ubuntu', sans-serif;
    letter-spacing: -1px;
}

/* Sexy Pill-Shaped Meta Banner */
.article-meta-banner { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px; 
    padding: 12px 35px; 
    background: #F8FAFC; 
    border-radius: 50px; /* Perfect Pill */
    border: 1px solid #E2E8F0;
    color: var(--text-muted); 
    font-size: 0.95rem; 
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(11,43,92,0.03);
}
.article-meta-banner i { color: var(--primary-red); margin-right: 8px; font-size: 1.1rem;}

.article-featured-img { 
    width: 100%; 
    height: 500px; /* Taller hero image */
    border-radius: 24px; /* Smoother corners */
    overflow: hidden; 
    margin-bottom: 50px; 
    box-shadow: 0 20px 50px rgba(11, 43, 92, 0.1); /* Floating effect */
    position: relative;
}
.article-featured-img img { width: 100%; height: 100%; object-fit: cover; }

/* The Reading Text Typography */
.article-content {
    max-width: 850px;
    margin: 0 auto; /* Center the reading text for better focus */
}
.article-content p { 
    font-family: 'Lora', serif; 
    font-size: 1.2rem; /* Slightly larger for easy reading */
    line-height: 1.9; 
    color: #334155; 
    margin-bottom: 30px; 
}
.article-content h3 { 
    font-size: 2rem; 
    color: var(--primary-blue); 
    margin: 50px 0 20px; 
    font-family: 'Ubuntu', sans-serif; 
    font-weight: 800;
}

/* Premium Magazine Drop Cap */
.drop-cap::first-letter {
    font-size: 4.5rem; 
    color: var(--primary-red); 
    float: left;
    line-height: 0.8; 
    padding-right: 15px; 
    font-family: 'Lora', serif; 
    font-weight: 700;
    text-shadow: 2px 2px 0px rgba(211,47,47,0.1);
}

/* High-End Blockquote */
.article-quote {
    border: none;
    background: linear-gradient(135deg, rgba(11,43,92,0.05) 0%, transparent 100%);
    padding: 40px 50px; 
    margin: 40px 0; 
    border-radius: 20px;
    font-family: 'Lora', serif; 
    font-size: 1.4rem; 
    font-style: italic; 
    color: var(--primary-blue);
    position: relative;
    border-left: 6px solid var(--primary-red);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.article-quote::before { 
    content: '\f10d'; 
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900; 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    font-size: 4rem; 
    color: rgba(211, 47, 47, 0.05); 
}

/* Share Buttons Box */
.article-share { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    padding: 30px; 
    background: #FAFBFF;
    border-radius: 16px;
    border: 1px dashed #CBD5E1; 
    margin-top: 60px; 
}
.share-btn { 
    width: 45px; height: 45px; 
    border-radius: 50%; display: flex; justify-content: center; align-items: center; 
    color: #fff; font-size: 1.1rem; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.share-btn:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }


/* --- MOBILE RESPONSIVENESS FIXES --- */
@media (max-width: 992px) {
    .blog-page-layout { grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 768px) {
    .blog-img-wrapper-large { height: 240px !important; }
    .blog-body-large { padding: 25px 20px; }
    .blog-title-large { font-size: 1.5rem; }
    .blog-excerpt-large { font-size: 0.95rem; }
    .blog-date-badge { padding: 6px 14px; font-size: 0.75rem; }
    
    .article-header { text-align: left; }
    .article-main-title { font-size: 2.2rem; }
    .article-meta-banner { flex-direction: column; align-items: flex-start; gap: 10px; border-radius: 16px; padding: 20px; width: 100%;}
    .article-featured-img { height: 280px; border-radius: 16px; margin-bottom: 30px;}
    .article-content p { font-size: 1.05rem; }
    .article-quote { padding: 25px; font-size: 1.15rem; }
    .article-share { flex-direction: column; align-items: flex-start; }
}


/* =========================================================
   SINGLE ARTICLE PAGE - CLEAN & RESPONSIVE UPGRADE
   ========================================================= */

/* 1. Breadcrumb Navigation */
.breadcrumb-nav {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 25px;
    font-weight: 600;
    font-family: 'Ubuntu', sans-serif;
}
.breadcrumb-nav a { color: var(--primary-blue); transition: color 0.3s; }
.breadcrumb-nav a:hover { color: var(--primary-red); }
.breadcrumb-nav span { margin: 0 6px; }

/* 2. Main Article Card (Replaces Inline Styles) */
.article-main-card {
    background: #ffffff;
    padding: 50px 60px; /* Thoda premium open spacing */
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 15px 40px rgba(11, 43, 92, 0.04);
}

/* 3. Article Image (Added Red Border matching your theme) */
.article-featured-img {
    width: 100%;
    height: 450px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 15px 35px rgba(11, 43, 92, 0.08);
    border-bottom: 4px solid var(--primary-red); /* Premium touch */
}

/* 🔴 4. THE MASTER MOBILE RESPONSIVENESS FIX */
@media (max-width: 992px) {
    .blog-page-layout { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
    
    /* Breadcrumb Shrink */
    .breadcrumb-nav { font-size: 0.8rem; margin-bottom: 15px; }

    /* Card Padding Shrink taaki mobile pe saans le sake */
    .article-main-card {
        padding: 30px 20px; 
        border-radius: 16px;
        box-shadow: 0 5px 20px rgba(11, 43, 92, 0.05);
    }

    /* Header & Typography Shrink */
    .article-header { margin-bottom: 25px; text-align: left; }
    .article-main-title {
        font-size: 1.8rem; 
        line-height: 1.3;
        margin-bottom: 15px;
        letter-spacing: 0;
    }

    /* Meta Banner Vertical Stack */
    .article-meta-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 15px 20px;
        border-radius: 12px;
        width: 100%;
    }

    /* Banner Image Shrink */
    .article-featured-img {
        height: 220px; /* Mobile pe choti height */
        border-radius: 12px;
        margin-bottom: 30px;
        border-bottom-width: 3px;
    }

    /* Content Typography Settings */
    .article-content p {
        font-size: 1.05rem;
        line-height: 1.7;
        margin-bottom: 20px;
    }

    .article-content h3 {
        font-size: 1.5rem;
        margin: 35px 0 15px;
    }

    /* Drop Cap (1st letter) Adjustment for small screens */
    .drop-cap::first-letter {
        font-size: 3.5rem;
        padding-right: 12px;
        margin-top: 5px;
    }

    /* Quote Box Shrink */
    .article-quote {
        padding: 25px 20px 25px 25px; 
        font-size: 1.15rem;
        margin: 30px 0;
        border-radius: 12px;
    }

    .article-quote::before {
        font-size: 2.5rem;
        top: 15px;
        left: 15px;
    }

    /* Share Buttons Center Align */
    .article-share {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        padding: 25px 15px;
        margin-top: 40px;
        text-align: center;
        border-radius: 12px;
    }
    
    .article-share strong {
        width: 100%;
        margin-bottom: 5px;
    }
}




/* donate page css */
/* =========================================================
   DONATION PAGE STYLES
   ========================================================= */

.donate-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 40px;
    align-items: start;
}

.donate-form-wrapper {
    background: #ffffff;
    padding: 40px 45px;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 15px 40px rgba(11, 43, 92, 0.04);
}

.form-section-label {
    font-size: 1.15rem !important;
    color: var(--text-dark) !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
    display: block;
    border-bottom: 2px dashed #F1F5F9;
    padding-bottom: 10px;
}

/* --- Amount Selectors (Pills) --- */
.amount-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.amount-radio { cursor: pointer; flex-grow: 1; }
.amount-radio input[type="radio"] { display: none; }

.pill-btn {
    display: flex; justify-content: center; align-items: center;
    padding: 14px 20px;
    background: #F8FAFC;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.amount-radio input[type="radio"]:checked + .pill-btn {
    background: rgba(211, 47, 47, 0.08);
    border-color: var(--primary-red);
    color: var(--primary-red);
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.15);
}

/* Custom Input with Prefix (₹) */
.prefix-input {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid var(--primary-blue);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 0 4px rgba(11, 43, 92, 0.08);
}
.prefix-input .prefix {
    padding: 14px 20px;
    background: var(--primary-blue);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
}
.prefix-input input {
    border: none; padding: 14px; font-size: 1.1rem; font-weight: 700; width: 100%; outline: none; background: transparent;
}

/* --- LEADERBOARD WIDGET --- */
.donate-sidebar { display: flex; flex-direction: column; gap: 30px; }

.leaderboard-list { display: flex; flex-direction: column; gap: 15px; }

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #FAFBFF;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    transition: transform 0.3s;
}
.leaderboard-item:hover { transform: translateX(5px); border-color: var(--primary-blue); }

.rank-badge {
    width: 35px; height: 35px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-weight: 900; color: white; font-size: 1rem; flex-shrink: 0;
}
.rank-badge.gold { background: linear-gradient(135deg, #F6E27A 0%, #D6A300 100%); box-shadow: 0 4px 10px rgba(214, 163, 0, 0.3); }
.rank-badge.silver { background: linear-gradient(135deg, #E2E8F0 0%, #94A3B8 100%); box-shadow: 0 4px 10px rgba(148, 163, 184, 0.3); }
.rank-badge.bronze { background: linear-gradient(135deg, #F6AD55 0%, #C05621 100%); box-shadow: 0 4px 10px rgba(192, 86, 33, 0.3); }

.donor-l-info { flex-grow: 1; }
.donor-l-info h4 { font-size: 0.95rem; color: var(--text-dark); margin-bottom: 2px; }
.donor-l-info p { font-size: 0.75rem; color: var(--text-muted); }
.donor-l-amount { font-weight: 800; color: var(--primary-red); font-size: 1.05rem; }


/* Mobile Responsive */
@media (max-width: 992px) {
    .donate-grid { grid-template-columns: 1fr; }
    .donate-form-wrapper { padding: 30px 25px; }
    .amount-radio { flex-basis: 40%; } /* Force 2 per row roughly */
}



/* =========================================================
   REGISTER MODAL - ULTRA-PREMIUM INTEGRATED MOBILE LAYOUT
   ========================================================= */

@media (max-width: 900px) {
    
    /* 1. Modal Wrapper: Deep Integration, Overall Card Look */
    .modal-wrapper {
        grid-template-columns: 1fr;
        display: flex !important;
        flex-direction: column;
        max-height: 90vh; /* Viewport height for app-feel */
        overflow: hidden; /* Lock the main wrapper */
        border-radius: 24px; /* Smoother, larger corners */
        box-shadow: 0 20px 50px rgba(0,0,0,0.15); /* Floating effect */
    }

    /* 2. 🔴 IMAGE BLOCK FIX: Integrated Integrated Panel, Smooth Blending */
    .modal-image-block {
        display: flex !important; /* Force show the hidden block */
        width: 100%;
        height: 220px; /* Taller area to show face and quote */
        position: relative;
        flex-shrink: 0;
        
        /* Meet the form head-on with sharp bottom corners */
        border-radius: 20px 20px 0 0; 

        /* 🔴 THE UNIFYING BLEND: This makes the top block part of the whole card */
        background-color: var(--primary-blue); /* Same base color as the desktop overlay */
        
        /* 🔴 THE MAGIC MASK: A pseudo-element that creates the seamless gradient blend into the white form below */
        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(255,255,255,0) 80%, #ffffff 100%);
            pointer-events: none;
            z-index: 2; /* Form content ke niche, image ke upar */
        }
    }

    /* Picture itself: Faded out at the bottom using masking */
    .modal-leader-img {
        object-fit: cover !important; /* 🔴 Use cover to show the face perfectly */
        object-position: center top; /* Center the head of the leader */
        opacity: 0.15; /* Subtle watermark feel */
        transform: scaleX(-1) scale(1);
        
        /* 🔴 THE IMAGE MASK: Fades the actual picture before it meets the form */
        -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    }

    /* 3. Text Over Image (Magazine Style Centering) */
    .modal-image-overlay {
        top: 50%;
        left: 50%;
        bottom: auto;
        right: auto;
        transform: translate(-50%, -50%);
        width: 100%;
        padding: 0 20px;
        text-align: center;
        z-index: 5;
    }
    
    .modal-image-overlay h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 5px; color: #ffffff; }
    .modal-image-overlay p { font-size: 0.9rem; line-height: 1.4; color: rgba(255,255,255,0.85); font-style: italic;}

    /* 4. Form Content (A Seamless Continuation of the Card) */
    .modal-content {
        background-color: transparent; /* Seamless blend from the mask */
        padding: 30px 20px;
        max-height: calc(90vh - 220px); /* Taller form, uses bachi height */
        overflow-y: auto !important; /* Smooth scrolling */
        
        /* Top sharp, bottom meeting the main card's curve */
        border-radius: 0 0 20px 20px; 
    }

    /* Inputs Stacking remains from previous fix */
    .modal-wrapper .form-grid-2 {
        grid-template-columns: 1fr; 
        gap: 15px;
    }

    .form-header { margin-bottom: 25px; text-align: left;}
    .form-header h2 { font-size: 2rem; font-weight: 800; }
    .form-header p { font-size: 0.9rem; }

    /* Close Button (Premium Circle, App Style) */
    .modal-close-btn {
        top: 15px;
        right: 15px;
        background: #ffffff;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        color: var(--primary-red);
        opacity: 1;
        z-index: 50;
    }
}



/* =========================================================
   ULTRA-PREMIUM NAVBAR DROPDOWN (Smooth & Bug-Free)
   ========================================================= */

.nav-dropdown {
    position: relative;
    /* Pointers event fix for touch devices */
    touch-action: manipulation; 
}

/* --- DESKTOP DROPDOWN --- */
.dropdown-menu {
    position: absolute;
    top: 100%; /* Exactly parent ke niche */
    left: 0;
    background: #ffffff;
    min-width: 230px;
    box-shadow: 0 10px 40px rgba(11, 43, 92, 0.08); /* Softer, premium shadow */
    border-radius: 12px;
    padding: 12px 0;
    margin-top: 15px; /* Button se doori */
    
    /* Animation initial state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.98); /* Halka sa shrink effect */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1000;
    list-style: none;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

/* 🔴 THE MAGIC BRIDGE: Mouse niche laate waqt menu gayab nahi hoga */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -20px; /* Bridge gap */
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

/* Hover Reveal */
.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Links Design */
.dropdown-menu li { margin: 0; }

.dropdown-menu li a {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent; /* Indicator ke liye jagah */
}

/* Hover over link */
.dropdown-menu li a:hover {
    background: #FAFBFF;
    color: var(--primary-red);
    border-left: 3px solid var(--primary-red); /* Premium left bar */
    padding-left: 30px; /* Slight push right */
}

/* Dropdown Arrow Icon */
.nav-dropdown > a i {
    font-size: 0.75rem;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.nav-dropdown:hover > a i {
    transform: rotate(180deg); /* Menu khulne pe arrow ghumega */
}


/* --- MOBILE RESPONSIVENESS FOR DROPDOWN --- */
@media (max-width: 992px) {
    .nav-dropdown { width: 100%; }
    
    .dropdown-menu {
        position: relative;
        top: 0;
        margin-top: 5px;
        transform: none;
        box-shadow: none;
        border: none;
        background: rgba(11, 43, 92, 0.03); /* Halka blue bg mobile pe alag dikhane ke liye */
        border-radius: 8px;
        padding: 5px 0;
        
        /* Mobile tap fix */
        display: none; 
        opacity: 1;
        visibility: visible;
    }
    
    /* Reveal dropdown on mobile when hovering/tapping */
    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown:focus-within .dropdown-menu {
        display: block;
        animation: slideDownMobile 0.3s ease;
    }

    @keyframes slideDownMobile {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}