/* =========================================
   1. IMPORTS & GLOBAL VARIABLES
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Mukta:wght@400;700;800&family=Laila:wght@400;600&display=swap');

:root {
    --primary: #D35400; /* Burnt Orange */
    --secondary: #F1C40F; /* Yellow */
    --bg-light: #FEFCF5; /* Off-white/Cream */
    --bg-beige: #F9F9F9; /* Light Grey for sections */
    --text-dark: #2d3436; /* Soft Black for Headings */
    --text-body: #777777; /* Grey for paragraphs */
    --white: #FFFFFF;
    --shadow: 0 10px 30px rgba(0,0,0,0.05);
    --shadow-hover: 0 15px 35px rgba(0,0,0,0.1);
}

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

/* =========================================
   2. GLOBAL TYPOGRAPHY
   ========================================= */
body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-body);
    line-height: 1.8;
    font-size: 15px;
    font-weight: 400;
    overflow-x: hidden;
    padding-top: 90px; 
}

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-transform: uppercase;
}

h1 { font-size: 3rem; letter-spacing: 2px; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.1rem; font-weight: 600; }

p { margin-bottom: 20px; font-weight: 400; }
a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; }

/* Section Titles */
.section-title { text-align: center; margin-bottom: 60px; position: relative; }
.section-title h2 { margin-bottom: 15px; font-weight: 800; }
.section-title span {
    display: block; width: 60px; height: 3px;
    background-color: var(--secondary); margin: 0 auto 20px;
}
.section-title p {
    max-width: 700px; margin: 0 auto; font-size: 1.1rem; color: #999;
    font-family: 'Playfair Display', serif; font-style: italic; text-transform: none;
}

/* Buttons */
.btn-main {
    padding: 12px 30px;
    background: var(--primary);
    color: var(--white) !important;
    border-radius: 0px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    border: 1px solid var(--primary);
    display: inline-block; cursor: pointer;
}
.btn-main:hover { background: transparent; color: var(--primary) !important; }

/* External/Outline Button */
.btn-external {
    background-color: var(--primary); border: 1px solid var(--primary); color: #FFF !important;
    padding: 15px 30px; font-size: 0.9rem; margin-top: 20px;
    width: 100%; display: block; text-align: center;
    box-shadow: 0 5px 15px rgba(211, 84, 0, 0.2);
}
.btn-external:hover {
    background-color: transparent !important; color: var(--primary) !important;
    border: 1px solid var(--primary); transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(211, 84, 0, 0.1);
}

/* =========================================
   3. HEADER & NAVIGATION
   ========================================= */
header {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    padding: 0 40px; height: 90px;
    display: flex; justify-content: space-between; align-items: center;
    background: #FFFFFF; box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: height 0.3s ease;
}
header.scrolled { height: 80px; }

header .logo { display: flex; align-items: center; }
header .logo img { height: 70px; width: auto; transition: height 0.3s ease; }
header.scrolled .logo img { height: 60px; }

nav > ul { display: flex; gap: 25px; align-items: center; }
nav > ul > li { position: relative; padding: 30px 0; }
nav > ul > li > a {
    font-family: 'Montserrat', sans-serif; font-size: 0.8rem;
    font-weight: 600; text-transform: uppercase;
    color: var(--text-dark); letter-spacing: 1px;
}
nav > ul > li > a:hover { color: var(--primary); }

/* Dropdowns */
nav ul li ul {
    display: none; position: absolute; top: 100%; left: 0;
    background: #FFF; box-shadow: var(--shadow); min-width: 260px;
    border-top: 3px solid var(--primary); padding: 0;
}
nav ul li:hover > ul { display: block; }
nav ul li ul li { border-bottom: 1px solid #f5f5f5; position: relative; }
nav ul li ul li:last-child { border-bottom: none; }
nav ul li ul li a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; color: #555 !important; font-size: 0.85rem;
    font-weight: 500; text-transform: capitalize; letter-spacing: 0;
    font-family: 'Open Sans', sans-serif;
}
nav ul li ul li a:hover { background-color: #f4f4f4; color: var(--primary) !important; padding-left: 25px; }

/* Nested Menu */
.has-submenu > ul {
    display: none; position: absolute; left: 100%; top: 0;
    background: #FFF; box-shadow: var(--shadow); min-width: 240px;
    border-top: 3px solid var(--secondary);
}
.has-submenu:hover > ul { display: block; }

/* =========================================
   4. HERO & PAGE BANNER (FIXED TEXT)
   ========================================= */
.hero-carousel {
    position: relative; height: 85vh; width: 100%; overflow: hidden; background: #333;
}
.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.5s ease-in-out;
    display: flex; align-items: center; justify-content: center;
}
.slide.active { opacity: 1; }
.slide::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.3); }
.hero-content {
    position: relative; z-index: 2; text-align: center; color: #FFF;
    max-width: 900px; padding: 20px;
}
.hero-content h1 { font-size: 3.8rem; font-weight: 800; margin-bottom: 20px; color: #FFF; }
.hero-content p { font-size: 1.2rem; font-weight: 400; margin-bottom: 35px; color: #f1f1f1; }

.page-banner {
    height: 350px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?q=80&w=1920');
    background-size: cover; background-position: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #FFF; text-align: center; margin-top: 90px;
}
/* FORCE WHITE TEXT FOR BANNER */
.page-banner h1 { 
    font-size: 3rem; margin-bottom: 10px; 
    color: #FFFFFF !important; /* Fixed */
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.page-banner p { color: #f0f0f0 !important; font-size: 1.2rem; font-weight: 400; }

section { padding: 90px 10%; }
.bg-beige { background-color: var(--bg-beige); }

/* --- GRID HELPERS --- */
.box-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; position: relative; z-index: 10;
}
.overlap-grid { margin-top: -80px; }

.info-card {
    background: var(--white); padding: 40px 30px; text-align: center;
    box-shadow: var(--shadow); transition: transform 0.3s ease;
    border-bottom: 3px solid var(--primary);
}
.info-card:hover { transform: translateY(-10px); }
.info-card h3 { font-size: 1.2rem; text-transform: uppercase; margin-top: 15px; }




/* ========================
   INFO STRIP (3 BOXES LAYOUT)
   ======================== */

.info-strip-section {
    position: relative;
    z-index: 20; /* Sit above other content */
    margin-top: -60px; /* Pull it up to overlap the banner slightly */
    padding: 0 10%;    /* Align with page content */
    margin-bottom: 60px;
}

.info-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Force 3 Columns */
    gap: 30px;
    background: transparent;
}

/* On Tablets (2 columns or auto-flow) */
@media (max-width: 1024px) {
    .info-strip {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* On Mobile (Stack Vertically) */
@media (max-width: 768px) {
    .info-strip-section {
        margin-top: 0; /* Remove overlap on mobile */
        padding: 40px 20px;
        background: #f9f9f9; /* Add background since it's not overlapping */
    }
    
    .info-strip {
        grid-template-columns: 1fr; /* 1 Column */
        gap: 20px;
    }
}



/* =========================================
   5. BOARD OF DIRECTORS & MENTORS (Restored Hover)
   ========================================= */
.board-grid, .mentor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 40px; }

/* Base Card Style */
.board-card, .mentor-card {
    background: #FFF; border-radius: 24px 4px 24px 4px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s ease; border: 1px solid #f0f0f0;
}
.mentor-card { border-radius: 15px; border-bottom: 4px solid #F1C40F; } /* Specific for Mentors */

/* Images */
.board-img, .mentor-card .img-box { height: 300px; width: 100%; overflow: hidden; }
.board-img img, .mentor-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

/* Info Text Area */
.board-info, .mentor-info {
    padding: 20px 10px; text-align: center; background-color: #fffcf5; 
    border-top: 3px solid var(--primary); transition: all 0.3s ease;
}
.mentor-info { border-top: none; background: #fff; } /* Clearer background for mentors */

.board-info h4, .mentor-info h4 { font-size: 1.05rem; margin-bottom: 5px; color: var(--text-dark); transition: color 0.3s ease; }
.board-info .designation, .mentor-info p { 
    font-size: 0.8rem; color: var(--primary); font-weight: 600; 
    text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.3s ease; 
}

/* HOVER EFFECTS (Restored) */
.board-card:hover, .mentor-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(255, 159, 67, 0.25);
}
.board-card:hover .board-img img, .mentor-card:hover img { transform: scale(1.1); }

.board-card:hover .board-info {
    background-color: #ff9f43; /* Soft Orange */
    border-top-color: #ff9f43;
}
.board-card:hover .board-info h4, .board-card:hover .board-info .designation { color: #FFFFFF; }

/* Patrons Styling */
.patron-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1000px; margin: 40px auto 0; }
.patron-card { background: #FFF; padding: 15px; border: 1px solid #e0e0e0; text-align: center; transition: 0.3s; position: relative; }
.patron-card::before { content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 1px solid transparent; transition: 0.3s; }
.patron-card:hover::before { border-color: var(--primary); }
.patron-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.08); transform: translateY(-5px); }
.patron-img { height: 250px; width: 100%; margin-bottom: 20px; overflow: hidden; }
.patron-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); transition: 0.4s; }
.patron-card:hover img { filter: grayscale(0%); transform: scale(1.03); }

.section-divider { margin: 30px auto; position: relative; height: 1px; background: #ddd; width: 80%; text-align: center; }
.section-divider span { background: var(--bg-light); padding: 0 15px; position: relative; top: -13px; color: #ccc; font-size: 1rem; }

/* ========================
   ABOUT UDAAN PAGE STYLING (REFINED)
   ======================== */

.udaan-intro { text-align: center; max-width: 900px; margin: 0 auto 50px; }
.udaan-intro h2 { font-size: 2.2rem; color: var(--primary); margin-bottom: 15px; }
.highlight-year {
    font-size: 3.5rem; font-weight: 800; color: rgba(211, 84, 0, 0.08);
    position: absolute; top: -25px; left: 50%; transform: translateX(-50%); z-index: -1;
}

/* --- 1. COMPACT CAUSE GRID --- */
.cause-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Smaller min-width */
    gap: 20px; /* Reduced gap */
    margin-bottom: 60px;
}

.cause-box {
    background: #FFF;
    padding: 20px 15px; /* Significantly reduced padding */
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}
.cause-box:hover { transform: translateY(-5px); }

/* Color Classes (Same as before) */
.cause-box.orange { border-color: #D35400; } .cause-box.orange i { color: #D35400; background: rgba(211, 84, 0, 0.1); }
.cause-box.teal { border-color: #00a896; } .cause-box.teal i { color: #00a896; background: rgba(0, 168, 150, 0.1); }
.cause-box.purple { border-color: #8e44ad; } .cause-box.purple i { color: #8e44ad; background: rgba(142, 68, 173, 0.1); }
.cause-box.blue { border-color: #2980b9; } .cause-box.blue i { color: #2980b9; background: rgba(41, 128, 185, 0.1); }

.cause-box i {
    width: 50px; height: 50px; line-height: 50px; /* Smaller Icons */
    border-radius: 50%; font-size: 1.4rem; margin-bottom: 10px;
    transition: 0.3s;
}
.cause-box:hover i { color: #FFF; }
.cause-box.orange:hover i { background: #D35400; }
.cause-box.teal:hover i { background: #00a896; }
.cause-box.purple:hover i { background: #8e44ad; }
.cause-box.blue:hover i { background: #2980b9; }

.cause-box h4 { font-size: 1rem; font-weight: 700; margin-bottom: 5px; }
.cause-box p { font-size: 0.85rem; color: #777; line-height: 1.4; margin-bottom: 0; }



/* ========================
   ABOUT UDAAN UPDATES
   ======================== */


/* ========================
   2. LEADERSHIP TIMELINE (UPDATED)
   ======================== */
.history-section {
    padding: 60px 0;
    /* NEW BACKGROUND: Soft Blue-Grey */
    background: #F0F4F8; 
    overflow: hidden;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    position: relative;
}

/* Scroll Indicators (Fading Edges to match new bg) */
.history-section::before, .history-section::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 5; pointer-events: none;
}
.history-section::before { left: 0; background: linear-gradient(to right, #F0F4F8, transparent); }
.history-section::after { right: 0; background: linear-gradient(to left, #F0F4F8, transparent); }

.scroll-hint {
    text-align: center; color: #888; font-size: 0.75rem; 
    margin-top: -15px; margin-bottom: 20px; letter-spacing: 1px;
    text-transform: uppercase;
}

.history-container {
    width: 100%;
    overflow-x: hidden; /* Hide scrollbar completely */
    white-space: nowrap;
    padding: 30px 0;
    cursor: grab;
}

.history-track {
    display: inline-flex;
    align-items: flex-start;
    /* No padding here, handled by JS looping */
    position: relative;
}

/* Horizontal Line */
.history-track::before {
    content: ''; position: absolute; top: 18px; left: 0; width: 100%; height: 2px;
    background: #bbb; z-index: 0;
}

/* Node */
.history-node {
    position: relative;
    margin-right: 60px; /* Consistent gap */
    text-align: center;
    width: 150px; 
    vertical-align: top;
    z-index: 1;
    display: inline-block; /* Ensure they sit in a line */
}

.history-dot {
    width: 12px; height: 12px;
    background: #FFF; border: 3px solid var(--primary);
    border-radius: 50%; margin: 13px auto 15px;
    position: relative; z-index: 2;
}

.history-year {
    font-family: 'Montserrat', sans-serif; /* Clean Font */
    font-size: 0.9rem; font-weight: 700; color: #555;
    position: absolute; top: -25px; width: 100%; text-align: center;
}

/* Card */
.history-card {
    background: #FFF;
    padding: 15px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    white-space: normal;
    text-align: center;
    transition: 0.3s;
    font-family: 'Open Sans', sans-serif; /* Clean Font */
}
.history-node:hover .history-card {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.h-role {
    font-size: 0.6rem; color: #999; text-transform: uppercase;
    font-weight: 700; display: block; margin-top: 5px; margin-bottom: 2px;
}
.h-name {
    font-size: 0.8rem; color: var(--text-dark); font-weight: 700; line-height: 1.2; display: block;
}


/* --- 3. GALLERY (B&W to COLOR + SKETCH EDGE) --- */
.gallery-grid {
    column-count: 3;
    column-gap: 20px;
    width: 100%;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 20px;
    position: relative;
    transition: all 0.4s ease;
}

.gallery-item img {
    width: 100%; 
    height: auto;
    /* Sketchy / Paint Brush Edge Effect */
    /* This creates a rough, irregular border */
    clip-path: polygon(
        2% 0%, 98% 2%, 100% 98%, 0% 100%, 
        3% 2%, 96% 3%, 98% 96%, 2% 98%
    ); 
    /* B&W Filter */
    filter: grayscale(100%) contrast(1.1);
    transition: all 0.5s ease;
    cursor: pointer;
}

/* Hover: Color + Scale + Straighten */
.gallery-item:hover img { 
    filter: grayscale(0%) contrast(1); /* Full Color */
    transform: scale(1.03); 
    /* Remove clip-path on hover for clean look? Or keep it? Let's keep it for style */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    z-index: 2;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .gallery-grid { column-count: 2; }
}
@media (max-width: 600px) {
    .gallery-grid { column-count: 1; }
}




/* --- 3. GALLERY (MASONRY COLLAGE FIX) --- */
/* We switch from Grid to CSS Columns for true Masonry */
.gallery-grid {
    column-count: 3; /* 3 Columns */
    column-gap: 15px;
    width: 100%;
}

.gallery-item {
    break-inside: avoid; /* Prevents cutting images */
    margin-bottom: 15px;
}

.gallery-item img {
    width: 100%; 
    height: auto; /* Maintains aspect ratio */
    border-radius: 8px;
    transition: transform 0.3s;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.gallery-item:hover img { 
    transform: scale(1.02); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .gallery-grid { column-count: 2; }
}
@media (max-width: 600px) {
    .gallery-grid { column-count: 1; }
}


/* --- 3. FELLOWSHIP (POLAROID TRIO - NO TIMELINE) --- */
.polaroid-section {
    padding: 60px 10%;
    background-color: #fff;
}

.polaroid-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
}

.polaroid-card {
    background: #FFF;
    padding: 10px 10px 25px 10px; /* Bottom padding for caption */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transform: rotate(-3deg);
    transition: 0.3s;
    width: 280px;
    text-align: center;
}
/* Rotate items differently for "messy" look */
.polaroid-card:nth-child(2) { transform: rotate(2deg); margin-top: -20px; }
.polaroid-card:nth-child(3) { transform: rotate(-1deg); }

.polaroid-card:hover {
    transform: rotate(0deg) scale(1.05);
    z-index: 5;
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}

.polaroid-img {
    width: 100%; height: 200px;
    object-fit: cover;
    filter: sepia(20%);
    margin-bottom: 15px;
}

.polaroid-caption h3 {
    font-family: 'Kalam', cursive; /* Handwritten Style */
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 5px;
}
.polaroid-caption p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
    margin: 0;
}


/* =========================================
   7. EVENTS PAGE (HORIZONTAL CARD + EXPAND)
   ========================================= */
.events-layout { display: flex; gap: 40px; align-items: flex-start; margin-bottom: 80px; }
.events-list-area { flex: 3; }
.events-sidebar { 
    flex: 1; position: sticky; top: 120px;
    background: #FFF; padding: 30px; border: 1px solid #eee;
    border-radius: 8px; box-shadow: var(--shadow);
}

.event-card-horiz {
    display: flex; background: #FFF; border-radius: 8px; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); margin-bottom: 30px;
    border-left: 5px solid transparent; transition: all 0.3s ease;
    align-items: flex-start;
}
.event-card-horiz:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-left-color: var(--primary); }

.ev-left { width: 280px; height: 260px; position: relative; flex-shrink: 0; background-color: #f0f0f0; }
.ev-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; }
.ev-date-box {
    position: absolute; top: 15px; left: 15px; background: rgba(255,255,255,0.95);
    padding: 8px 15px; text-align: center; border-radius: 4px; box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.ev-day { display: block; font-size: 1.5rem; font-weight: 800; color: var(--primary); line-height: 1; }
.ev-month { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: #333; }

.ev-content { padding: 25px 30px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.ev-meta { font-size: 0.8rem; color: #999; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.ev-meta i { color: var(--secondary); margin-right: 5px; }
.ev-title { font-size: 1.4rem; margin-bottom: 10px; color: #2c3e50; }
.ev-title:hover { color: var(--primary); }
.ev-desc { font-size: 0.95rem; color: #666; margin-bottom: 15px; line-height: 1.6; }

.ev-btn {
    align-self: flex-start; font-size: 0.8rem; font-weight: 700; color: var(--primary);
    border-bottom: 2px solid var(--secondary); padding-bottom: 2px; text-transform: uppercase;
}
.ev-btn:hover { color: #333; border-color: #333; }

/* Expand Area */
.ev-expand-area {
    display: none; padding-top: 25px; margin-top: 20px; border-top: 1px dashed #eee;
    animation: coolExpand 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; transform-origin: top;
}
@keyframes coolExpand {
    from { opacity: 0; transform: translateY(-20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}


/* --- EXPANDABLE TEXT FIX --- */
.ev-long-desc {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 20px;
    /* CHANGED: "normal" ensures it respects your HTML tags exactly */
    white-space: normal; 
    line-height: 1.5; 
}

/* Target the divs/paragraphs coming from JSON to force tight spacing */
.ev-long-desc div, 
.ev-long-desc p {
    margin-bottom: 8px !important; /* Tighter paragraph gap */
}

/* Style the headings inside the text */
.ev-long-desc strong {
    color: var(--primary); /* Orange highlight for titles */
    display: block; /* Forces it to own line */
    margin-bottom: 2px;
    margin-top: 10px; /* Space before new section */
}

/* Remove top margin for the very first heading */
.ev-long-desc div:first-child strong {
    margin-top: 0;
}



/* Gallery Grid (Vertical Masonry) */
.ev-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; width: 100%; }
.ev-gallery img { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; cursor: pointer; transition: 0.2s; border: 2px solid transparent; }
.ev-gallery img:hover { transform: scale(1.05); border-color: var(--primary); z-index: 2; }

/* Lightbox */
.lightbox-modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); align-items: center; justify-content: center; }
.lightbox-content { max-width: 85%; max-height: 85%; border: 4px solid #fff; border-radius: 4px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 2002; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 3rem; cursor: pointer; padding: 20px; user-select: none; z-index: 2002; transition: 0.2s; }
.lightbox-nav:hover { color: var(--secondary); transform: translateY(-50%) scale(1.2); }
.lb-prev { left: 20px; } .lb-next { right: 20px; }

/* Sidebar Widgets */
.widget-title { font-size: 1rem; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 20px; }
.search-box input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-family: 'Open Sans', sans-serif; }
.search-box input:focus { border-color: var(--primary); outline: none; }
.cat-list li { padding: 10px 0; border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: 0.2s; font-size: 0.9rem; }
.cat-list li:hover { color: var(--primary); padding-left: 5px; }
.cat-list li span { float: right; color: #ccc; font-size: 0.8rem; }

/* =========================================
   8. ABOUT MAHAVIR & PRAYER STYLING
   ========================================= */
/* About Mahavir */
.about-layout { display: flex; gap: 50px; align-items: flex-start; margin-bottom: 60px; }
.about-left { flex: 7; } .about-right { flex: 3; position: sticky; top: 120px; }
.text-content p { margin-bottom: 20px; color: #555; font-size: 1.05rem; text-align: justify; line-height: 1.8; }

.golden-sidebar { background: #fffcf5; border: 1px solid #d4af37; padding: 8px; text-align: center; box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15); transition: all 0.4s ease; }
.golden-sidebar:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(212, 175, 55, 0.35); border-color: #F1C40F; }
.golden-inner { border: 2px solid #d4af37; padding: 30px 20px; background: #FFF; display: flex; flex-direction: column; align-items: center; transition: border-color 0.4s ease; }
.golden-sidebar:hover .golden-inner { border-color: #F1C40F; }
.golden-logo-img { width: 80%; max-width: 150px; height: auto; margin-bottom: 20px; }
.golden-title { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: #b48b18; margin-bottom: 15px; text-transform: uppercase; border-bottom: 1px solid #ebd598; padding-bottom: 10px; width: 100%; }
.golden-text { font-size: 0.95rem; color: #444; line-height: 1.6; font-style: italic; }

.cert-container { background: #fafafa; padding: 40px 30px; margin-top: 40px; border-radius: 8px; text-align: center; border-top: 4px solid var(--primary); }
.cert-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 50px; margin-top: 20px; }
.cert-logo { height: 110px; width: auto; filter: grayscale(100%); opacity: 0.6; transition: all 0.4s ease; cursor: pointer; }
.cert-logo:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.1); }

/* Prayer Page */
.prayer-layout { display: flex; gap: 60px; align-items: flex-start; margin-bottom: 80px; }
.prayer-main { flex: 3; }
.prayer-sidebar { flex: 1; position: sticky; top: 120px; padding-left: 30px; border-left: 3px solid #f9f9f9; }

.prayer-hero-card {
    background: linear-gradient(135deg, #fffbf0 0%, #fff 100%); border: 1px solid #f3e5ab;
    padding: 60px 40px; text-align: center; border-radius: 12px; position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.03); overflow: hidden;
}
.prayer-hero-card::before {
    content: 'ॐ'; font-family: 'Mukta', sans-serif; font-size: 25rem; color: #F1C40F;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    opacity: 0.07; z-index: 0; pointer-events: none;
}
.prayer-content-layer { position: relative; z-index: 2; }

.hindi-hero { font-family: 'Mukta', sans-serif; font-size: 1.8rem; line-height: 1.3; font-weight: 700; color: #333; margin: 30px 0; }
.verse-block { margin-bottom: 2px; position: relative; }
.verse-block::after { content: '•'; display: block; color: #e0c097; font-size: 1rem; margin-top: 15px; opacity: 0.5; }
.verse-block:last-child::after { display: none; }
.highlight-red { color: #c0392b; } .highlight-orange { color: #d35400; } .highlight-pink { color: #e91e63; }

.om-divider { text-align: center; margin: 50px 0 60px; position: relative; display: flex; align-items: center; justify-content: center; }
.om-divider::before, .om-divider::after { content: ''; flex: 1; height: 1px; background: #ddd; margin: 0 20px; max-width: 200px; }
.om-icon { font-family: 'Mukta', sans-serif; font-size: 3rem; color: #D35400; font-weight: 700; background: #fff; padding: 0 10px; line-height: 1; }

.trans-container { max-width: 900px; margin: 0 auto; }
.trans-row { display: flex; align-items: center; margin-bottom: 25px; background: #fff; padding: 20px; border-radius: 8px; border-left: 4px solid #eee; transition: 0.3s; }
.trans-row:hover { border-left-color: var(--secondary); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.trans-num { font-size: 1.5rem; font-weight: 900; color: #eee; margin-right: 20px; min-width: 40px; }
.trans-row:hover .trans-num { color: var(--primary); }
.trans-text { font-size: 1.05rem; color: #555; font-family: 'Open Sans', sans-serif; font-style: italic; }

.sidebar-title { font-family: 'Montserrat', sans-serif; color: #D35400; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; font-weight: 700; }
.sidebar-text { font-family: 'Laila', sans-serif; font-size: 1.05rem; color: #555; line-height: 1.8; }

/* =========================================
   9. RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
    nav { display: none; }
    .board-grid, .mentor-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-container { flex-direction: column; }
    .about-layout { flex-direction: column; }
    .about-right { width: 100%; position: static; }
    .cert-logo { height: 80px; }
}
@media (max-width: 900px) {
    .events-layout { flex-direction: column-reverse; }
    .events-sidebar { width: 100%; position: static; margin-bottom: 40px; }
    .event-card-horiz { flex-direction: column; }
    .ev-left { width: 100%; height: 200px; position: relative; }
    .ev-img { position: static; height: 200px; }
    .prayer-layout { flex-direction: column; }
    .prayer-sidebar { width: 100%; position: static; padding: 30px 0 0 0; border-left: none; border-top: 1px solid #eee; }
    .om-divider::before, .om-divider::after { width: 25%; }
    .timeline-section::before { left: 20px; }
    .timeline-item, .timeline-item:nth-child(even) { padding: 0 0 0 60px; justify-content: flex-start; }
    .timeline-dot { left: 20px; }
    .timeline-content { width: 100%; margin: 0; }
}
@media (max-width: 600px) {
    .board-grid, .mentor-grid { grid-template-columns: 1fr; }
    .patron-grid { grid-template-columns: 1fr; }
    .hero-content h1 { font-size: 2rem; }
}



/* ========================
   HOME PAGE SPOTLIGHT SECTIONS
   ======================== */

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

.spotlight-bg-beige {
    background-color: #fffaf0; /* Warm beige for Mohe Rang De */
}

/* Flex Container */
.spotlight-row {
    display: flex;
    gap: 60px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px; /* Standard width */
    margin: 0 auto;
    padding: 0 20px; /* Safety padding */
}

/* Reverse Modifier (For Mohe Rang De) */
.spotlight-row.reverse {
    flex-direction: row-reverse;
}

/* The Columns */
.spotlight-col {
    flex: 1;
    min-width: 300px; /* Ensures columns wrap if too narrow */
}

/* Image Styling */
.spotlight-img-box {
    position: relative;
    padding: 20px;
}

.spotlight-border-back {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 10px solid #f9f9f9;
    z-index: -1;
    border-radius: 4px;
}
/* Yellow tint for Mohe Rang De */
.spotlight-bg-beige .spotlight-border-back {
    border-color: #fcf3cf; 
}

.spotlight-img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: block;
}

/* Text Styling */
.spotlight-label {
    color: #D35400; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
}
.spotlight-label.yellow { color: #F1C40F; }

.spotlight-title {
    font-size: 2.5rem; 
    color: #2c3e50; 
    margin: 0 0 20px 0; 
    line-height: 1.2;
}

.spotlight-desc {
    color: #666; 
    line-height: 1.8; 
    margin-bottom: 25px;
    font-size: 1rem;
}

/* Stats inside Spotlight */
.spotlight-stats {
    display: flex; 
    gap: 30px; 
    margin-bottom: 30px;
}
.stat-big { color: #D35400; font-size: 2rem; margin: 0; font-weight: 700; }
.stat-label { font-size: 0.85rem; color: #888; }

/* MOBILE RESPONSIVE FIX */
@media (max-width: 900px) {
    .spotlight-row, 
    .spotlight-row.reverse {
        flex-direction: column; /* Force vertical stack */
    }
    
    .spotlight-col {
        width: 100%; /* Full width on mobile */
        min-width: auto;
    }
    
    /* Ensure image is distinct from text on mobile */
    .spotlight-img-box {
        margin-bottom: 20px;
    }
}









/* =========================================
   FOOTER STYLING (FIXED)
   ========================================= */
footer {
    background-color: #1a1a1a; /* Dark Background */
    color: #cccccc; 
    padding: 80px 10% 30px;
    font-size: 0.9rem;
    position: relative;
    z-index: 100;
    margin-top: auto; /* Pushes footer to bottom if page is short */
}

/* Grid Layout */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-col {
    flex: 1;
    min-width: 220px; /* Ensures columns don't get too squished */
}

/* Logo Styling */
/* Logo Styling (The Leaf Badge) */

.footer-logo {
    max-width: 220px; /* Adjusted width for horizontal logo */
    height: auto;
    margin-bottom: 5px;
    display: block;
    
    /* STYLING TO FIX WHITE BACKGROUND */
    background-color: #ffffff;
    padding: 5px 5px; /* Breathing room for the logo */
    
    /* Leaf Shape (Matches Board Cards) */
    border-radius: 20px 4px 20px 4px; 
    
    /* Shadow to make it pop off the dark footer */
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    
    /* Ensure no filters are hiding colors */
    filter: none; 
    
    /* Optional: Subtle hover effect */
    transition: transform 0.3s ease;
}

.footer-logo:hover {
    transform: translateY(-3px);
}

/* Headings */
.footer-head {
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 25px;
    letter-spacing: 1px;
    position: relative;
    font-weight: 700;
}

/* Little Orange Underline */
.footer-head::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--primary);
    margin-top: 10px;
}

/* Links List */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 12px;
}

.footer-links a {
    color: #bbb;
    text-decoration: none;
    display: block;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--primary);
    padding-left: 8px;
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    font-size: 1.1rem;
}

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

/* Bottom Copyright Area */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
    text-align: center;
    opacity: 0.6;
    font-size: 0.85rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        gap: 50px;
    }
    footer {
        padding: 60px 20px 30px;
    }
}



/* ========================
   SCROLL OFFSET FIX
   ======================== */
/* Ensures anchor links land below the fixed header */
#upcoming, #recent {
    scroll-margin-top: 120px; /* Header Height (90px) + 30px breathing room */
}


/* ========================
   CONTACT PAGE STYLING
   ======================== */

/* --- LAYOUT (75/25) --- */
.contact-layout {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 60px;
}

/* Left: Form (Prominent) */
.contact-form-area {
    flex: 3; /* 75% Width */
}

/* Right: Info Cards (Side Note) */
.contact-info-area {
    flex: 1; /* 25% Width */
    position: sticky;
    top: 120px;
}

/* --- CONTACT FORM --- */
.form-box {
    background: #FFF;
    padding: 40px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--primary);
}

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

.form-label {
    display: block; font-weight: 600; margin-bottom: 8px; color: #444; font-size: 0.9rem;
}

.form-control {
    width: 100%; padding: 12px 15px; border: 1px solid #ddd;
    border-radius: 4px; font-family: 'Open Sans', sans-serif; font-size: 1rem;
    transition: 0.3s; background: #fafafa;
}

.form-control:focus {
    border-color: var(--primary); outline: none; background: #fff;
    box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.1);
}

textarea.form-control { resize: vertical; min-height: 150px; }

/* --- CONTACT INFO CARDS (Compact) --- */
.contact-card {
    background: #FFF; padding: 20px; border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border-left: 3px solid var(--secondary); /* Yellow Accent */
    margin-bottom: 20px; transition: 0.3s;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.contact-role {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
    color: #999; margin-bottom: 5px; font-weight: 700;
}

.contact-name {
    font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700;
    color: var(--text-dark); margin-bottom: 10px;
}

.contact-detail {
    display: flex; align-items: center; margin-bottom: 8px;
    color: #666; font-size: 0.85rem; word-break: break-all; /* Prevents email overflow */
}
.contact-detail i { color: var(--primary); width: 20px; font-size: 0.9rem; flex-shrink: 0; }

/* --- MAP SECTION (Restricted Width) --- */
.map-section {
    max-width: 1200px; /* Matches site width */
    margin: 0 auto 60px; /* Centered with bottom margin */
    padding: 0 20px; /* Safety padding on mobile */
}

.map-container {
    width: 100%; height: 400px; background: #eee;
    border-radius: 8px; overflow: hidden;
    box-shadow: var(--shadow); border: 1px solid #ddd;
}
.map-container iframe {
    width: 100%; height: 100%; border: 0; filter: grayscale(10%);
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .contact-layout { flex-direction: column-reverse; } /* Info below form on mobile */
    .contact-info-area { width: 100%; position: static; margin-top: 40px; }
    .contact-form-area { width: 100%; }
    .map-container { height: 300px; }
}




/* ========================
   SPONSORS PAGE STYLING (FIXED)
   ======================== */

/* --- INTRO TEXT --- */
.sponsors-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}
.sponsors-intro p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
}

/* --- COMMON SPONSOR CARD (Container Logic) --- */
.sponsor-card {
    background: #FFF;
    border: 1px solid #eee;
    border-radius: 8px;
    /* FLEXBOX CENTERING */
    display: flex;
    align-items: center;     /* Vertical Center */
    justify-content: center; /* Horizontal Center */
    padding: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    overflow: hidden; /* Ensures nothing spills out */
}

.sponsor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* IMAGE SIZING FIX: Never overflow */
.sponsor-card img {
    max-width: 90%;  /* Never wider than box */
    max-height: 90%; /* Never taller than box */
    width: auto;     /* Maintain aspect ratio */
    height: auto;    /* Maintain aspect ratio */
    object-fit: contain;
}

/* --- TIER 1: SUPPORTED BY (The Grand One) --- */
.tier-title {
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}
.tier-title::after {
    content: ''; display: block; width: 50%; height: 3px;
    background: var(--primary); margin: 10px auto 0;
}

.tier-section { margin-bottom: 80px; text-align: center; }

/* The Big Box */
.supported-by-box {
    max-width: 500px; 
    height: 300px; /* Fixed Height */
    margin: 0 auto;
    border: 2px solid #D35400;
    background: #fffbf0;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(211, 84, 0, 0.15);
}

/* --- TIER 2: PLATINUM (Large) --- */
.platinum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}
.platinum-card {
    height: 200px; /* Fixed Height */
    border-bottom: 4px solid #e5e4e2;
}

/* --- TIER 3: GOLD (Medium) --- */
.gold-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}
.gold-card {
    height: 160px; /* Fixed Height */
    border-bottom: 4px solid #FFD700;
}

/* --- TIER 4: SILVER (Compact) --- */
.silver-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}
.silver-card {
    height: 130px; /* Fixed Height */
    border-bottom: 4px solid #C0C0C0;
    /* REMOVED GRAYSCALE FILTER - NOW IN COLOR */
    opacity: 1; 
}
.silver-card:hover { 
    border-color: var(--primary); /* Orange highlight on hover */
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .supported-by-box { height: 200px; width: 100%; }
    .platinum-grid { grid-template-columns: 1fr; }
    .gold-grid { grid-template-columns: repeat(2, 1fr); }
    .silver-grid { grid-template-columns: repeat(2, 1fr); }
}




/* ========================
   JOIN / MEMBERSHIP FORM STYLING
   ======================== */

.join-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}
.join-intro p { font-size: 1.1rem; color: #555; }

/* --- FORM STRUCTURE --- */
.membership-form {
    background: #FFF;
    padding: 40px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    border-top: 5px solid var(--primary);
}

.form-section-title {
    background: #fffbf0;
    padding: 10px 15px;
    border-left: 4px solid var(--primary);
    color: var(--primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 30px 0 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* Remove top margin for the first title */
.form-section-title:first-of-type { margin-top: 0; }

/* --- DUAL GRID (Husband/Wife Side-by-Side) --- */
.dual-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 40px;
    margin-bottom: 30px;
}

.form-col h4 {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 20px;
    color: #888;
    text-decoration: underline;
    text-decoration-color: var(--secondary);
}

/* --- FULL WIDTH GRID (For Address/Questions) --- */
.full-width-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Checkbox Styling */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #eee;
    margin-top: 20px;
}
.checkbox-group input {
    margin-top: 5px;
    width: 20px; height: 20px;
    accent-color: var(--primary);
}
.checkbox-group label {
    font-size: 0.9rem; color: #333; font-weight: 600;
    line-height: 1.6;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .dual-form-grid { grid-template-columns: 1fr; gap: 0; } /* Stack them */
    .full-width-grid { grid-template-columns: 1fr; }
    .form-col { margin-bottom: 40px; border-bottom: 1px dashed #ddd; padding-bottom: 20px; }
    .form-col:last-child { border-bottom: none; }
    .membership-form { padding: 20px; }
}

.span-full { grid-column: span 2; }
@media (max-width: 900px) { .span-full { grid-column: span 1; } }






/* ========================
   MOHE RANG DE (SPECIAL EVENT PAGE)
   ======================== */

/* 1. HOLI COLOR PALETTE */
:root {
    --holi-pink: #e84393;
    --holi-purple: #6c5ce7;
    --holi-blue: #00cec9;
    --holi-yellow: #fdcb6e;
}

/* 2. GRADIENT TEXT EFFECT */
.holi-gradient-text {
    background: linear-gradient(45deg, var(--primary), var(--holi-pink), var(--holi-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: -1px;
}

/* 3. HERO SECTION (Custom for Holi) */
.holi-banner {
    height: 80vh; /* Tall and immersive */
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?q=80&w=1920');
    background-size: cover; background-position: center;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; color: #FFF;
    position: relative;
    margin-top: 90px;
}

.holi-title {
    font-size: 5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
    line-height: 1;
    margin-bottom: 20px;
}

/* 4. VIDEO SECTION (Cinema Style) */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: -80px auto 0; /* Overlaps the banner slightly */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    border: 8px solid #555;
    background: #000;
    z-index: 10;
}
.video-wrapper video {
    width: 100%; display: block;
}

/* 5. COLOURS FOR A CAUSE (Impact Box) */
.cause-impact-box {
    background: #FFF;
    padding: 50px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 2px solid var(--holi-pink);
    box-shadow: 0 10px 40px rgba(232, 67, 147, 0.15);
    margin-top: 60px;
}
/* Decorative Blob background */
.cause-impact-box::before {
    content: ''; position: absolute; top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: var(--holi-yellow);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; /* Organic Shape */
    opacity: 0.2; z-index: 0;
}

/* 6. EVENT HIGHLIGHTS (Colorful Cards) */
.holi-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}
.holi-card {
    background: #AAA;
    padding: 30px 20px;
    border-radius: 15px;
    text-align: center;
    transition: 0.3s;
    border-bottom: 5px solid #ddd;
}
.holi-card:hover { transform: translateY(-10px); }

/* Individual Colors */
.hc-pink { border-color: var(--holi-pink); }
.hc-pink i { color: var(--holi-pink); background: rgba(232, 67, 147, 0.1); }

.hc-blue { border-color: var(--holi-blue); }
.hc-blue i { color: var(--holi-blue); background: rgba(0, 206, 201, 0.1); }

.hc-purple { border-color: var(--holi-purple); }
.hc-purple i { color: var(--holi-purple); background: rgba(108, 92, 231, 0.1); }

.holi-card i {
    width: 80px; height: 80px; line-height: 80px;
    border-radius: 50%; font-size: 2rem; margin-bottom: 20px;
}

/* 7. MASONRY GALLERY (Specific to Holi) */
.holi-gallery {
    columns: 3 250px;
    gap: 15px;
}
.holi-gallery img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.3s;
}
.holi-gallery img:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Responsive Text */
@media (max-width: 768px) {
    .holi-title { font-size: 3rem; }
    .video-wrapper { margin-top: 0; border-width: 0; border-radius: 0; }
    .holi-gallery { columns: 2 150px; }
}



/* ========================
   MOHE RANG DE: SPECIAL "ADVENTURE" STYLES
   ======================== */

/* Import a Fun Brush Font for this page only */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

:root {
    --holi-pink: #ff007f;
    --holi-yellow: #ffcc00;
    --holi-blue: #00e5ff;
    --holi-purple: #9b59b6;
}

/* 1. HERO SECTION (Explosive) */
.holi-hero {
    height: 85vh;
    background: url('https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?q=80&w=1920') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 90px;
    overflow: hidden;
}
.holi-hero::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(45deg, rgba(255,0,127,0.4), rgba(255,204,0,0.4));
}
.holi-hero-content {
    position: relative; z-index: 2; text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 40px 60px;
    border-radius: 30px 4px 30px 4px; /* Irregular shape */
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transform: rotate(-2deg); /* Playful Tilt */
    border: 4px solid #fff;
}
.holi-title {
    font-family: 'Permanent Marker', cursive;
    font-size: 5rem;
    line-height: 1;
    background: linear-gradient(to right, #ff007f, #ffcc00, #00e5ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}
.holi-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.2rem;
    color: #333;
}

/* 2. THE COLLAGE GRID (The Non-Vertical Part) */
.collage-section {
    padding: 80px 5%;
    background: #fffbf0;
    overflow: hidden;
}

/* Zig-Zag Rows */
.collage-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;
    position: relative;
}
.collage-row.reverse { flex-direction: row-reverse; }

/* The Image Block (Tilted Polaroid) */
.collage-img-box {
    flex: 1;
    max-width: 500px;
    position: relative;
    z-index: 2;
}
.collage-img {
    width: 100%;
    border: 10px solid #FFF;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    transform: rotate(3deg); /* Tilt Right */
    transition: 0.4s;
}
.collage-row.reverse .collage-img { transform: rotate(-3deg); /* Tilt Left */ }

.collage-img:hover { transform: scale(1.05) rotate(0deg); z-index: 5; }

/* The Text Blob */
.collage-text-box {
    flex: 1;
    max-width: 450px;
    background: #FFF;
    padding: 40px;
    position: relative;
    z-index: 3;
    margin-left: -50px; /* Overlap Effect */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 20px;
}
.collage-row.reverse .collage-text-box { margin-left: 0; margin-right: -50px; }

/* Blob Backgrounds behind text */
.collage-text-box::before {
    content: ''; position: absolute; z-index: -1;
    width: 120%; height: 120%;
    top: -10%; left: -10%;
    background-color: var(--blob-color, #ff007f);
    opacity: 0.1;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; /* Organic Blob */
}

.collage-head {
    font-family: 'Permanent Marker', cursive;
    font-size: 2rem;
    color: var(--blob-color, #333);
    margin-bottom: 15px;
}

/* 3. CAUSE SECTION (Parallax) */
.cause-parallax {
    background: fixed linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1538448174498-9953c1e2565b?q=80&w=1920');
    background-size: cover;
    padding: 100px 10%;
    text-align: center;
    color: #fff;
}
.impact-number {
    font-size: 4rem; font-weight: 900; color: var(--holi-yellow);
    text-shadow: 0 0 20px rgba(255,204,0,0.5);
}

/* 4. SPLASH CARDS (Small Details) */
.splash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: -50px; /* Pull up into previous section */
    padding: 0 10%;
    position: relative; z-index: 5;
}
.splash-card {
    background: #FFF;
    padding: 30px 20px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-top: 5px solid var(--card-color);
    transition: 0.3s;
}
.splash-card:hover { transform: translateY(-10px); }
.splash-card i { font-size: 2.5rem; color: var(--card-color); margin-bottom: 15px; }

/* Responsive */
@media (max-width: 900px) {
    .collage-row, .collage-row.reverse { flex-direction: column; margin-bottom: 60px; }
    .collage-text-box, .collage-row.reverse .collage-text-box { margin: -30px 0 0 0; width: 90%; }
    .holi-title { font-size: 3rem; }
}



/* ========================
   MOHE RANG DE (CLEAN PROFESSIONAL LAYOUT)
   ======================== */

/* 1. HERO BANNER */
.clean-banner {
    height: 400px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("../images/banners/mohe-rang-de.jpg");
    background-size: cover; background-position: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #FFF; text-align: center; margin-top: 90px;
}
.clean-banner h1 { font-size: 3.5rem; font-weight: 800; letter-spacing: 2px; color: #FFF; margin-bottom: 10px; }
.clean-banner p { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 4px; color: #f1c40f; font-weight: 600; }

/* 2. VIDEO & INTRO SPLIT SECTION */
.split-section {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 80px 10%;
    background: #FFF;
}
.split-text { flex: 1; }
.split-video { flex: 1; position: relative; }

.subtitle-badge {
    display: inline-block;
    background: var(--secondary); /* Yellow */
    color: #333;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    padding: 5px 15px; border-radius: 20px;
    margin-bottom: 20px;
}

.clean-video-frame {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border: 10px solid #FFA53F;
}
.clean-video-frame video {
    width: 100%;
    height: 100%;       /* Ensures it fills vertically */
    object-fit: cover;  /* CROPS the image/video to fill the box without stretching */
    display: block;
    aspect-ratio: 16/9; /* Enforces a standard video shape to prevent collapse */
}


/* ========================
   3. SCROLLING WALL (Overlapping, Square, Tilted)
   ======================== */
.scrolling-wall-section {
    background: #FFBF00;
    padding: 60px 0;
    overflow: hidden;
    position: relative;
    /* Soft fade on edges */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.marquee-container {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Vertical gap between the two rows */
}

/* Common Track Styles */
.marquee-track {
    display: flex;
    gap: 0; /* No gap, we use negative margin */
    width: max-content;
    padding-left: 50px; /* Buffer for the first negative margin */
}

/* Row 1: Scroll Left */
.track-left {
    animation: scrollLeft 100s linear infinite;
}

/* Row 2: Scroll Right */
.track-right {
    animation: scrollRight 100s linear infinite;
}

/* --- THE IMAGE STYLE (Overlapping) --- */
.marquee-track img {
    height: 240px; 
    width: auto;
    object-fit: cover;
    
    /* SHARP EDGES */
    border-radius: 0; 
    
    /* THE OVERLAP MAGIC */
    margin-left: -40px; 
    position: relative; /* Needed for z-index */
    
    /* VISUAL SEPARATION */
    border: 4px solid #ffffff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2); /* Shadow on left to show depth */
    
    transition: transform 0.3s ease, z-index 0s;
    opacity: 1;
}

/* MINIMAL TILT PATTERN */
.marquee-track img:nth-child(odd) {
    transform: rotate(3deg);
    z-index: 1;
}
.marquee-track img:nth-child(even) {
    transform: rotate(-1deg);
    z-index: 2; /* Alternate stacking */
}

/* Hover Effect: Pop to Front */
.marquee-track img:hover {
    transform: scale(1.1) rotate(0deg);
    z-index: 100; /* Bring to very front */
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    border-color: #fff;
    cursor: pointer;
}

/* ANIMATIONS */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Mobile: Smaller images */
@media (max-width: 768px) {
    .marquee-track img { height: 160px; margin-left: -20px; }
}






/* ========================
   NEW: HOLI SPLASH CARDS (Ultra-Compact & BLOBBY)
   ======================== */
/* Highlights Section (Tighter & New Color) */
.splash-features-section {
    padding: 40px 5% 20px; /* Reduced bottom padding */
    background-color: #FFDBE9; /* Alice Blue - Fresh look */
}

/* Reduced margin for the title inside this specific section */
.splash-features-section .section-title {
    margin-bottom: 30px; /* Was 60px */
}

.splash-grid-fun {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px; 
    max-width: 1100px;
    margin: 0 auto;
}

.splash-blob-card {
    position: relative;
    padding: 30px 20px;
    text-align: center;
    color: #FFF;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
    z-index: 1;
    
    /* AGGRESSIVE BLOB SHAPE */
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: none; /* Ensure no square border exists */
}

/* Hover: Shape Morphs */
.splash-blob-card:hover {
    transform: translateY(-10px) scale(1.05);
    border-radius: 58% 42% 30% 70% / 55% 55% 45% 45%; /* Morphs shape */
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* VARIANT 1: MUSIC (Electric Purple/Pink) */
.blob-music { background: linear-gradient(135deg, #c0392b, #8e44ad); }

/* VARIANT 2: RAIN (Ocean Blue/Cyan) */
.blob-rain { background: linear-gradient(135deg, #009FFD, #2A2A72); }

/* VARIANT 3: ORGANIC (Vibrant Green/Teal) */
.blob-organic { background: linear-gradient(135deg, #11998e, #38ef7d); }

/* VARIANT 4: FOOD (Hot Orange/Yellow) */
.blob-food { background: linear-gradient(135deg, #FF416C, #FF4B2B); }

/* Content Styling */
.splash-blob-card i {
    font-size: 2.2rem;
    margin-bottom: 15px;
    text-shadow: 0 3px 10px rgba(0,0,0,0.2);
    display: block;
}

.splash-blob-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: #FFF;
}

.splash-blob-card p {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    line-height: 1.4;
    opacity: 0.95;
    margin: 0;
    color: #FFF;
}


.feature-clean-card {
    background: #FFF;
    padding: 40px 30px;
    text-align: center;
    border: 1px solid #eee;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}
/* Bottom Colored Line */
.feature-clean-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
    background: var(--primary); transform: scaleX(0); transition: 0.3s;
}
.feature-clean-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.feature-clean-card:hover::after { transform: scaleX(1); }

.feature-clean-card i {
    font-size: 3rem;
    color: #ddd; /* Grey initially */
    margin-bottom: 20px;
    transition: 0.3s;
}
.feature-clean-card:hover i { color: var(--primary); }

.feature-clean-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 15px; }
.feature-clean-card p { font-size: 0.9rem; color: #777; line-height: 1.6; }

/* 5. CAUSE IMPACT STRIP */
.impact-strip {
    background-color: var(--bg-beige);
    padding: 60px 10%;
    text-align: center;
    border-top: 1px solid #eee;
}
.impact-number {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

/* Responsive */
@media (max-width: 900px) {
    .split-section { flex-direction: column; }
    .marquee-track img { height: 200px; }
    .clean-banner h1 { font-size: 2.5rem; }
}



/* ========================
   MOHE RANG DE UPDATES (Tabs & Impact)
   ======================== */

/* --- 1. IMPACT CARD (Based on Event Card but Special) --- */
.impact-card-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border-left: 6px solid #27ae60; /* Green for Impact/Health */
    overflow: hidden;
    display: flex;
}

.impact-left {
    width: 350px;
    background-color: #f4f4f4;
    position: relative;
    flex-shrink: 0;
}
.impact-img {
    width: 100%; height: 100%;
    object-fit: cover;
    position: absolute; top:0; left:0;
}

.impact-content {
    padding: 40px;
    flex-grow: 1;
}

/* Impact Gallery (Mini Grid) */
.impact-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 25px;
}
.impact-gallery img {
    width: 100%; height: 100px;
    object-fit: cover; border-radius: 6px;
    cursor: pointer; transition: 0.3s;
    border: 1px solid #ddd;
}
.impact-gallery img:hover { transform: scale(1.05); border-color: #27ae60; }

/* --- 2. SPONSOR TABS --- */
.tabs-container {
    max-width: 1000px;
    margin: 0 auto;
}

.tabs-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 12px 30px;
    border: 1px solid #eee;
    background: #fff;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    color: #555;
}

.tab-btn:hover {
    background: #fafafa;
    border-color: #ddd;
    transform: translateY(-2px);
}

/* Active State */
.tab-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 5px 15px rgba(211, 84, 0, 0.2);
}

/* Tab Panes */
.tab-pane {
    display: none;
    animation: fadeIn 0.5s ease;
}
.tab-pane.active {
    display: block;
}

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

/* Grid inside Tabs */
.sponsor-tab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    align-items: center;
    justify-items: center;
}

/* Responsive */
@media (max-width: 900px) {
    .impact-card-wrapper { flex-direction: column; }
    .impact-left { width: 100%; height: 250px; }
    .impact-content { padding: 30px 20px; }
}









/* ========================
   LEADERSHIP TIMELINE (Ink-Script Style)
   ======================== */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

.history-section {
    padding: 60px 0;
    background: #EDE8D0; /* Paper texture color */
    overflow: hidden;
    border-bottom: 1px dashed #d35400;
}

/* The Scrolling Container */
.history-container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding: 40px 0;
    cursor: grab;
    /* Hide Scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE */
}
.history-container::-webkit-scrollbar { display: none; }

/* The Track Line */
.history-track {
    display: inline-flex;
    align-items: flex-start;
    padding-left: 50px;
    padding-right: 50px;
    position: relative;
}

/* The Horizontal Line */
.history-track::before {
    content: '';
    position: absolute;
    top: 25px; /* Aligns with the dots */
    left: 0;
    width: 100%;
    height: 3px;
    background: #555;
    border-radius: 5px;
    z-index: 0;
}

/* Individual Node */
.history-node {
    position: relative;
    margin-right: 120px; /* Space between years */
    text-align: center;
    width: 220px;
    vertical-align: top;
    z-index: 1;
}

/* The Dot */
.history-dot {
    width: 20px; height: 20px;
    background: var(--primary);
    border: 4px solid #fff;
    border-radius: 50%;
    margin: 15px auto 20px; /* Centers it on the line */
    box-shadow: 0 0 0 2px #555;
    position: relative;
    z-index: 2;
    transition: 0.3s;
}
.history-node:hover .history-dot { transform: scale(1.3); background: var(--secondary); }

/* The Year */
.history-year {
    font-family: 'Oswald', cursive;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    position: absolute;
    top: -40px; /* Sits above the line */
    width: 100%;
    text-align: center;
}

/* The Card (Hanging Note) */
.history-card {
    background: #FFF;
    padding: 15px;
    border-radius: 2px 2px 15px 2px; /* Slight folded corner */
    border: 1px solid #ccc;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
    white-space: normal; /* Allows text wrap inside card */
    text-align: left;
    transition: 0.3s;
    transform: rotate(-2deg); /* Hand placed look */
    font-family: 'Oswald', cursive; /* Handwritten Font */
}

.history-node:nth-child(even) .history-card { transform: rotate(1deg); } /* Variation */

.history-node:hover .history-card {
    transform: rotate(0deg) scale(1.05) translateY(-5px);
    box-shadow: 5px 10px 20px rgba(0,0,0,0.15);
    border-color: var(--primary);
    background: #fffce6; /* Highlight color */
}

.h-role {
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif; /* Clean font for designation */
    font-weight: 700;
    display: block;
    margin-top: 5px;
}
.h-name {
    font-size: 1.1rem;
    color: #2c3e50;
    font-weight: 700;
    line-height: 1.2;
    display: block;
}



/* ========================
   CAUSES PAGE STYLING (REFINED)
   ======================== */

/* --- 1. DOUBLE IMAGE INTRO SECTION (Matches your Upload) --- */
.cause-intro-section {
    display: flex;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}

/* Left: The Two Images */
.double-img-holder {
    flex: 1;
    position: relative;
    min-height: 500px;
}

.img-back {
    width: 70%;
    height: 400px;
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0; /* Aligned to right of the container */
    border-radius: 4px;
}

.img-front {
    width: 65%;
    height: 300px;
    object-fit: cover;
    position: absolute;
    bottom: 20px;
    left: 0; /* Aligned to left, overlapping */
    border: 10px solid #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-radius: 4px;
}

/* Right: The Content */
.cause-intro-text {
    flex: 1;
}

.small-label {
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
}

.cause-intro-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #2c3e50;
    line-height: 1.2;
}

.cause-desc-p {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* Checkmark List */
.check-list {
    list-style: none;
    margin-bottom: 40px;
}
.check-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    color: #555;
    font-size: 0.95rem;
}
.check-list li::before {
    content: '\f00c'; /* FontAwesome Check */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--primary);
    position: absolute;
    left: 0; top: 3px;
}

/* Stats Row (Icons + Numbers) */
.stat-row {
    display: flex;
    gap: 40px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}
.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.stat-icon {
    font-size: 2.5rem;
    color: var(--secondary); /* Yellow */
}
.stat-info h4 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    color: #333;
    line-height: 1;
}
.stat-info span {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
}

/* --- 2. CAUSE PROJECT CARDS (Clean - No Progress Bars) --- */
.cause-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.cause-card {
    background: #FFF;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}
.cause-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }

.cause-img-box {
    height: 200px; position: relative;
    overflow: hidden;
}
.cause-img-box img {
    width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
}
.cause-card:hover .cause-img-box img { transform: scale(1.1); }

/* The Badge */
.cause-badge {
    position: absolute; top: 15px; left: 15px;
    background: var(--primary); color: #fff;
    padding: 5px 12px; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    border-radius: 2px;
}

.cause-content { padding: 25px; }

.cause-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: #2c3e50; }
.cause-desc { font-size: 0.9rem; color: #666; line-height: 1.6; margin-bottom: 20px; }

.cause-footer {
    border-top: 1px solid #f5f5f5; padding-top: 15px; margin-top: 15px;
}
.cause-btn {
    font-size: 0.8rem; font-weight: 700; color: var(--primary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.cause-btn:hover { color: #333; }

/* --- 3. SIDEBAR NAVIGATION --- */
.cause-sidebar-box {
    background: #FFF; padding: 30px; border-radius: 4px;
    box-shadow: var(--shadow); margin-bottom: 30px;
    border-left: 3px solid var(--secondary);
}
.cause-nav li {
    padding: 12px 0; border-bottom: 1px dashed #ddd;
    font-size: 0.95rem; color: #555; cursor: pointer;
    transition: 0.2s; display: flex; justify-content: space-between;
}
.cause-nav li:last-child { border-bottom: none; }
.cause-nav li:hover, .cause-nav li.active { color: var(--primary); padding-left: 8px; font-weight: 600; }

/* Responsive */
@media (max-width: 900px) {
    .cause-intro-section { flex-direction: column-reverse; gap: 40px; }
    .double-img-holder { width: 100%; min-height: 350px; }
    .img-back { width: 80%; height: 250px; }
    .img-front { width: 80%; height: 200px; bottom: 0; }
}




/* --- SEASON TOGGLE SWITCH --- */
.season-toggle-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    background: #fff;
    padding: 10px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: inline-flex;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.season-btn {
    padding: 12px 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: #aaa;
    border-radius: 40px;
    transition: 0.3s;
}

.season-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 5px 15px rgba(211, 84, 0, 0.3);
}

.season-content {
    display: none;
    animation: fadeIn 0.5s ease;
	
}
.season-content.active {
    display: block;
}

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

/* --- LIGHTBOX (Standalone for this page) --- */
#simple-lightbox {
    backdrop-filter: blur(5px);
}
#simple-lightbox-img {
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    max-height: 85vh;
}




/* ========================
   CAUSE SUB-PAGE UPDATES
   ======================== */

/* --- 1. INITIATIVE CARDS (Bullet Points) --- */
.cause-project-grid {
    display: grid;
    /* Force 3 columns on desktop */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-top: 40px;
}

.cause-card {
    background: #FFF;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column; /* Ensures footer sticks to bottom */
}
.cause-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }

.cause-img-box {
    height: 180px; /* Slightly shorter to save space */
    position: relative;
    overflow: hidden;
}
.cause-img-box img {
    width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
}
.cause-card:hover .cause-img-box img { transform: scale(1.1); }

.cause-content { 
    padding: 25px; 
    flex-grow: 1; /* Pushes footer down */
}

.cause-title { 
    font-size: 1.1rem; font-weight: 700; margin-bottom: 15px; 
    color: #2c3e50; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px;
}

/* Bullet List Styling */
.initiative-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.initiative-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}
.initiative-list li::before {
    content: '•';
    color: var(--primary);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

/* --- 2. SIDEBAR GALLERY TEASER --- */
.gallery-teaser {
    position: relative;
    height: 150px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 30px;
    cursor: pointer;
    box-shadow: var(--shadow);
}
.gallery-teaser img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.5s;
}
.gallery-teaser:hover img { transform: scale(1.1); filter: brightness(0.7); }

.gallery-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #fff;
    transition: 0.3s;
}
.gallery-teaser:hover .gallery-overlay { background: rgba(211, 84, 0, 0.7); } /* Orange on hover */

.gallery-icon {
    font-size: 2rem; margin-bottom: 10px;
}
.gallery-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .cause-project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cause-project-grid { grid-template-columns: 1fr; }
}


/* ========================
   DENSE INFO GRID (Clean Catalog Style)
   ======================== */

.impact-9-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns */
    gap: 30px;
    margin-top: 50px;
}

.impact-card {
    background: #FFF;
    border: 1px solid #e0e0e0; /* Subtle grey border */
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    /* No cursor pointer since individual cards aren't clickable yet */
}

/* Hover Effect: Lift up slightly */
.impact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    border-color: var(--primary); /* Orange border on hover */
}

/* Image Section */
.impact-card-img {
    height: 180px;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-bottom: 3px solid var(--secondary); /* Yellow accent line */
}
.impact-card-img img {
    width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
}
.impact-card:hover .impact-card-img img { transform: scale(1.1); }

/* Content Section */
.impact-card-body {
    padding: 25px;
    flex-grow: 1;
}

.impact-card h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.impact-card p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: justify; /* Cleaner edges for dense text */
}

/* Bullet list inside card */
.impact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.impact-list li {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px; /* Slightly more space between points */
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}
.impact-list li::before {
    content: '›';
    font-size: 1.4rem;
    color: var(--primary);
    font-weight: bold;
    position: absolute;
    left: 0; top: -5px;
}

/* Bold/Highlight Helper */
.highlight-text {
    color: var(--primary);
    font-weight: 700;
}
.highlight-green {
    color: #27ae60;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 1024px) {
    .impact-9-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .impact-9-grid { grid-template-columns: 1fr; }
}



/* --- SIDEBAR REVAMP --- */

/* 1. PROMINENT GALLERY WIDGET */
.gallery-hero-widget {
    position: relative;
    height: 300px; /* Tall and noticeable */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
    cursor: pointer;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border: 4px solid #FFF;
}
.gallery-hero-widget img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.5s;
}
.gallery-hero-widget:hover img { transform: scale(1.1); filter: grayscale(100%); }

.gh-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 20px;
    text-align: center;
}
.gh-btn {
    background: var(--primary);
    color: #fff;
    padding: 10px 20px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: inline-block;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(211, 84, 0, 0.4);
}

/* 2. SUBTLE "OTHER CAUSES" LIST */
.subtle-cause-list {
    list-style: none;
    padding: 0;
}
.subtle-cause-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    font-size: 0.9rem;
    color: #777;
}
.subtle-cause-list li a:hover {
    color: var(--primary);
    text-decoration: underline;
}
.subtle-title {
    font-size: 0.9rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 1024px) {
    .cause-project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cause-project-grid { grid-template-columns: 1fr; }
    .gallery-hero-widget { height: 200px; }
}


/* ========================
   1. CLICKABLE GALLERY HEADER (Album Cover Style)
   ======================== */
.double-img-holder {
    flex: 1;
    position: relative;
    min-height: 450px;
    cursor: pointer;
}

/* Back Image (Decorative) */
.img-back {
    width: 70%;
    height: 400px;
    object-fit: cover;
    position: absolute;
    top: 0; right: 0;
    border-radius: 4px;
    opacity: 0.8;
}

/* Front Image Container (The Click Target) */
.img-front-box {
    position: absolute;
    bottom: 20px; left: 0;
    width: 65%; height: 300px;
    border: 10px solid #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-radius: 4px;
    overflow: hidden; /* Keeps overlay inside */
    transition: transform 0.3s ease;
}

.img-front-box img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.5s;
}

/* The Overlay Text/Button */
.gallery-overlay-badge {
    position: absolute;
    inset: 0; /* Full coverage of the front image */
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.gallery-title {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 15px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transform: translateY(10px);
    transition: 0.3s;
}

.gallery-btn-look {
    background: var(--primary);
    color: #fff;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: translateY(10px);
    transition: 0.3s;
}

/* HOVER EFFECTS */
.double-img-holder:hover .img-front-box {
    transform: scale(1.03); /* Lifts up */
    border-color: #f9f9f9;
}
.double-img-holder:hover .gallery-overlay-badge {
    background: rgba(44, 62, 80, 0.6); /* Darker tint on hover */
    backdrop-filter: blur(2px); /* Slight blur for focus */
}
.double-img-holder:hover .gallery-title,
.double-img-holder:hover .gallery-btn-look {
    transform: translateY(0); /* Text slides up into place */
}




/* ========================
   ADVANCED GALLERY LIGHTBOX (Refined & Stable)
   ======================== */
.story-lightbox {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

/* The Main Container (70/30 Split) */
.story-content {
    display: flex;
    width: 90%;
    max-width: 1400px;
    height: 85vh; /* Fixed height ensures stability */
    background: #1a1a1a; /* Dark Grey Background */
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    border: 1px solid #333;
    border-radius: 8px; /* Rounded container */
    overflow: hidden;
}

/* --- LEFT SIDE: IMAGE + CONTROLS --- */
.story-left {
    flex: 7; /* 70% Width */
    display: flex;
    flex-direction: column;
    position: relative;
    border-right: 1px solid #333;
}

/* The Image Area (Flexible Space) */
.story-img-container {
    flex-grow: 1; /* Takes all remaining space */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a; /* Matches container */
    overflow: hidden;
    position: relative;
    padding: 40px; /* Padding around image */
}

/* The Image Itself */
.story-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    
    /* Requested Styling: Rounded & Shadow */
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    
    opacity: 0; /* Fade in animation */
    transition: opacity 0.4s ease;
}
.story-main-img.loaded { opacity: 1; }

/* Bottom Control Bar (Thick White Strip) */
.story-controls {
    height: 100px; /* Double Thickness */
    background: #FFF; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px; /* Space between buttons */
    border-top: 1px solid #eee;
    flex-shrink: 0; /* Prevents shrinking */
}

/* Control Buttons */
.sc-btn {
    background: transparent;
    border: 2px solid #eee;
    width: 50px; height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    color: #555;
    transition: all 0.3s ease;
    display: flex;
    align-items: center; justify-content: center;
}
.sc-btn:hover { 
    color: #fff; 
    background: var(--primary); 
    border-color: var(--primary);
    transform: scale(1.1); 
}

/* Play/Pause Special Style */
.play-btn-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.play-status {
    font-size: 0.65rem;
    color: #999;
    margin-top: 5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- RIGHT SIDE: INFO + RELATED --- */
.story-right {
    flex: 3; /* 30% Width */
    background: #FFF;
    display: flex;
    flex-direction: column;
    padding: 40px 30px;
    overflow-y: auto;
}

.story-desc-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 20px;
    line-height: 1.3;
    border-bottom: 3px solid var(--secondary); /* Yellow accent */
    padding-bottom: 15px;
}

.story-desc-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 40px;
    flex-grow: 1; 
}

/* Related Grid */
.related-section h5 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 15px;
    letter-spacing: 1px;
    font-weight: 700;
}


/* --- RELATED IMAGES (Auto-Fit) --- */
.related-section {
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill remaining height */
    overflow: hidden;
}

.related-section h5 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-weight: 700;
    flex-shrink: 0;
}

.related-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-y: auto; /* Scroll if too many */
    padding-right: 5px; /* Space for scrollbar */
    align-content: flex-start;
}

.related-thumb {
    /* Smart Sizing: roughly 3 per row, but grow to fill */
    flex: 1 1 calc(33.33% - 8px); 
    max-width: 50%; /* Don't get too big */
    min-width: 80px; /* Don't get too small */
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s;
    border: 2px solid transparent;
}

.related-thumb:hover, .related-thumb.active {
    opacity: 1;
    border-color: var(--primary);
    transform: scale(1.05);
    z-index: 2;
}



.story-close {
    position: absolute;
    top: 20px; right: 20px;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 3005;
    transition: 0.3s;
}
.story-close:hover { transform: rotate(90deg); color: var(--secondary); }

/* Mobile Responsive */
@media (max-width: 900px) {
    .story-content { flex-direction: column; height: 95vh; width: 95%; }
    .story-left { height: 50%; width: 100%; border-right: none; border-bottom: 1px solid #333; }
    .story-right { height: 50%; width: 100%; padding: 20px; }
    .story-controls { height: 70px; gap: 20px; }
    .story-img-container { padding: 20px; }
}


/* ========================
   AUDIO MANTRA BOX (Sidebar Compact Version)
   ======================== */
.mantra-audio-wrapper {
    width: 100%;
    margin-top: 30px; /* Distance from Significance Box */
    display: block;
    clear: both;
}

.mantra-box {
    /* Royal Parchment Texture */
    background: linear-gradient(to bottom, #fffdf5, #fef9e7); 
    
    /* THE ARTISTIC DOUBLE FRAME */
    border: 1px solid #D4AF37; /* Inner Gold Line */
    box-shadow: 
        0 0 0 4px #fff,       /* White Gap */
        0 0 0 5px #D4AF37,    /* Outer Gold Line */
        0 10px 20px rgba(212, 175, 55, 0.15); /* Soft Glow */
    
    border-radius: 12px;
    padding: 15px 20px; /* Compact padding */
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    position: relative;
    transition: transform 0.3s ease;
}

.mantra-box:hover { transform: translateY(-2px); }

/* Play Button */
.mantra-play-btn {
    width: 40px; height: 40px;
    background: #D35400; 
    background-image: radial-gradient(circle, #e67e22 20%, #D35400 80%);
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    display: flex;
    align-items: center; justify-content: center;
    color: #fff;
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(211, 84, 0, 0.3);
    flex-shrink: 0;
}

.mantra-play-btn:hover { transform: scale(1.1); }

/* Spinning Ring */
.mantra-ring {
    position: absolute;
    top: -5px; left: -5px;
    width: 50px; height: 50px;
    border: 1px dashed #D4AF37;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}
.mantra-box.playing .mantra-ring {
    opacity: 1;
    animation: spinSlow 6s linear infinite;
}

/* Text Styling */
.mantra-text {
    flex-grow: 1;
    overflow: hidden; /* Prevents overflow */
}

.mantra-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    display: block;
    margin-bottom: 2px;
}

.mantra-singer {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem; /* Compact Size */
    color: #444;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap; /* Keeps name on one line if possible */
}
.mantra-singer span { color: #D35400; font-weight: 700; }

/* Sound Wave (Hidden on very small screens automatically) */
.sound-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 15px;
}
.bar {
    width: 3px;
    background: #D4AF37;
    border-radius: 2px;
    height: 3px; 
    transition: 0.2s;
}
.mantra-box.playing .bar {
    animation: soundWave 1.2s ease-in-out infinite;
    background: #D35400;
}
.mantra-box.playing .bar:nth-child(1) { animation-duration: 0.6s; }
.mantra-box.playing .bar:nth-child(2) { animation-duration: 0.9s; }
.mantra-box.playing .bar:nth-child(3) { animation-duration: 1.1s; }

@keyframes spinSlow { 100% { transform: rotate(360deg); } }
@keyframes soundWave { 0%, 100% { height: 3px; } 50% { height: 15px; } }

/* Responsive: Stack if Sidebar gets too narrow */
@media (max-width: 1100px) {
    .mantra-box { padding: 15px; }
    .sound-wave { display: none; } /* Hide bars to save space */
}







/* ========================
   HOME PAGE UPDATES
   ======================== */

/* --- 1. INFO STRIP WITH IMAGES --- */
.info-strip-section {
    position: relative;
    z-index: 20;
    margin-top: -80px; /* Stronger overlap */
    padding: 0 5%;
    margin-bottom: 60px;
}

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

.info-card-img {
    background: #FFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    border-bottom: 4px solid var(--primary);
    display: flex;
    flex-direction: column;
}

.info-card-img:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.ic-thumb {
    height: 180px;
    width: 100%;
    overflow: hidden;
}
.ic-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.info-card-img:hover .ic-thumb img { transform: scale(1.1); }

.ic-content {
    padding: 25px;
    text-align: center;
    background: #fff;
    flex-grow: 1;
}
.ic-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #2c3e50;
}
.ic-content p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0;
    line-height: 1.5;
}

/* --- 2. DUAL CAUSE FOCUS --- */
.dual-focus-section {
    padding: 60px 10%;
    background-color: #fff;
}

.dual-focus-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    margin-top: 40px;
}

.focus-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}
.focus-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }

.focus-img-box {
    height: 250px;
    position: relative;
    overflow: hidden;
}
.focus-img-box img {
    width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
}
.focus-card:hover .focus-img-box img { transform: scale(1.05); }

/* Overlay Label */
.focus-label {
    position: absolute;
    top: 20px; left: 20px;
    background: var(--secondary); /* Yellow */
    color: #333;
    padding: 5px 15px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.focus-content { padding: 30px; }
.focus-content h3 { font-size: 1.5rem; margin-bottom: 15px; color: #2c3e50; }
.focus-content p { color: #666; font-size: 0.95rem; line-height: 1.7; margin-bottom: 20px; }

/* --- 3. CAUSES THUMBNAIL GRID (The "Table") --- */
.causes-grid-section {
    padding: 80px 10%;
    background-color: #F9F9F9; /* Slight contrast */
}

.causes-thumbs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Auto fit columns */
    gap: 30px;
    margin-top: 40px;
}

.cause-thumb-card {
    background: #FFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    text-align: center;
    border-bottom: 3px solid transparent;
}
.cause-thumb-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-bottom-color: var(--primary);
}

.ct-img {
    height: 140px;
    width: 100%;
    overflow: hidden;
}
.ct-img img {
    width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
    filter: grayscale(20%);
}
.cause-thumb-card:hover .ct-img img { transform: scale(1.1); filter: grayscale(0%); }

.ct-title {
    padding: 15px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cause-thumb-card:hover .ct-title { color: var(--primary); }

/* Responsive */
@media (max-width: 900px) {
    .info-strip { grid-template-columns: 1fr; gap: 20px; }
    .info-strip-section { margin-top: 0; padding: 40px 20px; background: #eee; }
    .dual-focus-grid { grid-template-columns: 1fr; }
    .causes-thumbs-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}
@media (max-width: 600px) {
    .causes-thumbs-grid { grid-template-columns: 1fr; }
}






/* --- IMAGE FIT CONTROLS --- */

/* Option A: Default (Good for scenery/people) - Already applied globally */
.ic-thumb img {
    object-fit: cover; 
    object-position: top center; /* Focuses on the top part of the image */
}

/* Option B: Use this if it's a POSTER with text (Prevents cropping) */
/* Add class="contain-img" to your <img> tag if you use this */
.contain-img {
    object-fit: contain !important;
    background-color: #f0f0f0; /* Fills empty space with grey */
}




/* ========================
   HOME: ABOUT UDAAN SECTION
   ======================== */
.about-home-section {
    padding: 80px 10%;
    background-color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Background Watermark (Optional: Om or Leaf) */
.about-home-section::before {
    content: 'ॐ'; /* Or use a background image */
    font-family: 'Mukta', sans-serif;
    font-size: 20rem;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--secondary); /* Yellow */
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.about-container {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.about-motto {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

.about-heading {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 30px;
    line-height: 1.3;
}

.about-text {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-signature {
    margin-top: 40px;
    font-family: 'Laila', sans-serif; /* Handwritten style */
    font-size: 1.2rem;
    color: #888;
}






/* ========================
   SUPPORT PAGE STYLES
   ======================== */

/* Accreditation Bar */
.accreditation-bar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 15px 0;
    text-align: center;
    font-size: 0.9rem;
    color: #555;
    letter-spacing: 0.5px;
}
.accreditation-bar strong { color: var(--primary); }

/* Causes Grid (Side-by-Side) */
.causes-focus-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.cause-detail-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.cdc-img {
    height: 250px;
    overflow: hidden;
}
.cdc-img img {
    width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
}
.cause-detail-card:hover .cdc-img img { transform: scale(1.05); }

.cdc-content {
    padding: 30px;
    flex-grow: 1;
}
.cdc-content h3 {
    color: #2c3e50; font-size: 1.5rem; margin-bottom: 15px;
}
.cdc-content p {
    color: #666; line-height: 1.7; margin-bottom: 20px;
}
.impact-badges {
    display: flex; gap: 15px; margin-top: auto;
}
.i-badge {
    background: #fffaf0; color: #D35400; 
    padding: 5px 12px; border-radius: 20px; 
    font-size: 0.8rem; font-weight: 600;
    border: 1px solid #ffeeba;
}

/* Central Pledge Section (Bank + Form) */
.pledge-wrapper {
    display: flex;
    gap: 0; /* Seamless join */
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    margin: 40px 0;
    flex-wrap: wrap;
}

/* Left Side: Bank Details */
.bank-details-box {
    flex: 1;
    min-width: 300px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bank-title { font-size: 1.5rem; margin-bottom: 25px; border-bottom: 2px solid var(--secondary); display: inline-block; padding-bottom: 10px; }
.bank-row { margin-bottom: 15px; font-size: 1.05rem; }
.bank-row span { color: #bbb; display: block; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 3px; }
.bank-row strong { font-size: 1.1rem; letter-spacing: 0.5px; }

/* Right Side: Form */
.pledge-form-box {
    flex: 1.2;
    min-width: 300px;
    padding: 40px;
    background: #fff;
}
.pledge-form-box h3 { color: var(--primary); margin-bottom: 20px; }

/* Form Fields */
.form-group { margin-bottom: 20px; }
.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    transition: 0.3s;
}
.form-control:focus { border-color: var(--primary); outline: none; }
.btn-submit {
    width: 100%;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
}
.btn-submit:hover { background: #e67e22; }

/* Non-Monetary Support */
.involvement-section {
    background: #fdfdfd;
    border-top: 1px solid #eee;
    padding: 60px 10%;
    text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
    .causes-focus-grid { grid-template-columns: 1fr; }
    .pledge-wrapper { flex-direction: column; }
}