/**
Theme Name: Niwezeshe Theme
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: niwezeshe-theme
Template: astra
*/

/* :root defines variables we can use everywhere */
:root {
    /* BRAND COLORS */
    --color-primary: #2E8B38;   /* Green */
    --color-action: #CC2A1F;    /* Red */
    --color-accent: #FDB813;    /* Gold */
    --color-text: #4A2C2A;      /* Brown */
    
    /* GLASS EFFECT SETTINGS */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-blur: blur(20px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* A Universal "Glass Card" Class we can reuse */
.niwezeshe-glass {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 20px;
}











/* --- MAGNIFICENT MENU & HERO FIXES (FINAL - SMALLER BUTTON) --- */

/* 1. HEADER: FORCE FULL WIDTH & GLASS */
.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important; /* Forces edge-to-edge */
    z-index: 99999;
}

.main-header-bar, .ast-builder-grid-row {
    max-width: 100% !important; /* Overrides content width limits */
    width: 100% !important;
    background: rgba(46, 139, 56, 0.15) !important; /* Subtle Green Tint */
    backdrop-filter: blur(15px); /* Strong Frost */
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* 2. MENU TEXT: ELEGANT & READABLE */
.main-header-menu .menu-link {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important; /* Slightly thinner for elegance */
    font-size: 14px !important; /* More refined size */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

.main-header-menu .menu-item:hover .menu-link {
    color: #FDB813 !important; /* Gold Hover */
}

/* 3. THE BUTTON: SLEEK & PREMIUM (REDUCED SIZE) */
.main-header-menu .menu-item.nav-button a {
    background: linear-gradient(135deg, #CC2A1F 0%, #B01E14 100%) !important; /* Deep Premium Red */
    color: #ffffff !important;
    /* --- CHANGES START HERE --- */
    padding: 8px 18px !important; /* Reduced padding (was 10px 24px) */
    font-size: 12px !important;   /* Reduced font size (was 13px) */
    line-height: 1.2 !important;  /* Ensures text sits tight */
    /* --- CHANGES END HERE --- */
    border-radius: 50px !important;
    border: 1px solid rgba(255,255,255,0.3) !important; /* Glass border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Softer shadow */
    margin-top: -2px; /* Align perfectly with text */
}

.main-header-menu .menu-item.nav-button a:hover {
    background: #ffffff !important; /* White on hover */
    color: #CC2A1F !important; /* Red Text */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255,255,255,0.3); /* White Glow */
}

/* 4. HERO SECTION: SPACING & LAYOUT */
.hero-magnificent {
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center; /* Centers vertically */
    justify-content: center;
    position: relative;
    /* This creates the breathing room */
    padding-top: 120px !important; 
    margin-top: -90px !important; /* Pulls behind menu */
    box-sizing: border-box;
}

/* 5. HERO TEXT POSITIONING */
.hero-magnificent .wp-block-cover__inner-container {
    margin-top: 40px; /* Fine-tune the text drop */
}

.hero-magnificent h1 {
    margin-bottom: 30px !important; /* Space between title and description */
}







/* --- MAGNIFICENT HERO SECTION (FIXED LAYOUT & VIVID BUTTONS) --- */

/* 1. THE STAGE */
.magnificent-hero-section {
    background-image: url('https://images.unsplash.com/photo-1523495338267-31cbca7759e2?q=80&w=2340&auto=format&fit=crop'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
    /* FIX: Use min-height instead of fixed height to prevent overlap */
    min-height: 90vh; 
    width: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* FIX: Positioning & Spacing */
    /* Padding Top clears the header */
    padding-top: 100px; 
    /* Padding Bottom ensures glass doesn't hit the next section */
    padding-bottom: 50px; 
    padding-left: 20px;
    padding-right: 20px;
    
    position: relative;
}

/* Dark Gradient Overlay */
.magnificent-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 46, 14, 0.5) 0%, rgba(10, 46, 14, 0.7) 60%, #0a2e0e 100%);
    z-index: 1;
}

/* 2. THE VIVID GLASS CONSOLE */
.hero-glass-console {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    text-align: center;
    
    /* Vivid Glass Background */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    
    /* Vivid Edges */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    
    padding: 70px 40px;
    border-radius: 50px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
    
    animation: slideUpFade 1.2s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes slideUpFade {
    to { opacity: 1; transform: translateY(0); }
}

/* 3. TYPOGRAPHY */
.hero-tagline {
    display: inline-block;
    color: #0a2e0e; 
    background: #FDB813; 
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 25px;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(253, 184, 19, 0.4);
}

.hero-title {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3.8rem;
    line-height: 1.1;
    margin-bottom: 25px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.highlight-gold {
    color: #FDB813;
    font-style: italic; 
    text-shadow: 0 0 30px rgba(253, 184, 19, 0.4);
}

.hero-subtitle {
    color: #f0f0f0;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.25rem;
    line-height: 1.7;
    max-width: 750px;
    margin: 0 auto 45px auto;
    font-weight: 400;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* 4. BUTTONS (CRITICAL FIX FOR VISIBILITY) */
.hero-btn-group {
    display: flex;
    justify-content: center;
    gap: 25px;
}

/* Target Buttons specifically inside the Hero Section to force colors */
.magnificent-hero-section .hero-btn {
    padding: 20px 50px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    
    /* FORCE WHITE TEXT */
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Primary Button Fix */
.magnificent-hero-section .primary-glow {
    background: linear-gradient(135deg, #CC2A1F 0%, #a02018 100%) !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(204, 42, 31, 0.5);
}

.magnificent-hero-section .primary-glow:hover {
    background: #ffffff !important;
    color: #CC2A1F !important; /* Red text only on hover */
    transform: translateY(-5px);
}

/* Glass Button Fix */
.magnificent-hero-section .secondary-glass {
    background: rgba(255,255,255,0.1) !important;
    border: 2px solid #ffffff !important; /* White Border */
}

.magnificent-hero-section .secondary-glass:hover {
    background: #ffffff !important;
    color: #0a2e0e !important; /* Green text only on hover */
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(255,255,255,0.4);
}

/* 5. SCROLL MOUSE */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    z-index: 2;
    opacity: 0.8;
    animation: bounce 2s infinite;
}

.scroll-mouse {
    width: 26px;
    height: 42px;
    border: 2px solid #fff;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.scroll-wheel {
    width: 4px;
    height: 8px;
    background: #fff;
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: wheelDrop 1.5s infinite;
}

@keyframes wheelDrop {
    0% { top: 8px; opacity: 1; }
    100% { top: 20px; opacity: 0; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* MOBILE ADJUSTMENTS */
@media (max-width: 768px) {
    .magnificent-hero-section { 
        padding-top: 150px; 
        padding-bottom: 80px;
        min-height: auto;
    }
    .hero-title { font-size: 2.5rem; }
    .hero-btn-group { flex-direction: column; gap: 15px; }
    .scroll-indicator { display: none; }
}












/* --- SECTION 2: ANIMATED GLASS VISION/MISSION CARDS (FINAL) --- */

/* 1. THE CONTAINER (With CSS-Only Animated Background) */
.glass-section-container {
    padding: 100px 20px;
    background: linear-gradient(135deg, #f0f7f1 0%, #e0ebe2 100%);
    position: relative;
    overflow: hidden;
    z-index: 1; 
}

/* ORB 1 (Top Left - Green/Gold) */
.glass-section-container::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: linear-gradient(45deg, #2E8B38, #FDB813);
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.4;
    z-index: -1;
    animation: orbFloat1 15s infinite alternate ease-in-out;
}

/* ORB 2 (Bottom Right - Red/Green) */
.glass-section-container::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 450px;
    height: 450px;
    background: linear-gradient(45deg, #CC2A1F, #0a2e0e);
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.4;
    z-index: -1;
    animation: orbFloat2 18s infinite alternate ease-in-out;
}

/* ANIMATIONS */
@keyframes orbFloat1 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(200px, 150px); }
}
@keyframes orbFloat2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-150px, -150px); }
}


/* 2. GLASS CARD BASE STYLES */
.glass-card-grid .wp-block-column {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    padding: 60px 30px 50px 30px;
    text-align: center;
    
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.1), 
        inset 0 0 20px rgba(255,255,255,0.3);
        
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

/* HOVER EFFECT */
.glass-card-grid .wp-block-column:hover {
    transform: translateY(-15px);
    background: rgba(255, 255, 255, 0.5); /* Slightly brighter on hover */
    border-color: #ffffff;
    box-shadow: 
        0 0 40px rgba(255,255,255,0.6), 
        0 20px 40px rgba(0,0,0,0.15), 
        inset 0 0 40px rgba(255,255,255,0.6);
}


/* 3. CARD SPECIFIC STYLES (Colors & Contrast Fixes) */

/* --- Card 1: Vision (Green) --- */
.glass-card-grid .wp-block-column:nth-child(1) {
    border-bottom: 4px solid #2E8B38;
}
.glass-card-grid .wp-block-column:nth-child(1) h3 { color: #2E8B38; } 
.glass-card-grid .wp-block-column:nth-child(1):hover {
    box-shadow: 0 20px 50px rgba(46, 139, 56, 0.3), inset 0 0 40px rgba(255,255,255,0.6);
    border-bottom-color: #2E8B38;
}

/* --- Card 2: Mission (Red) --- */
.glass-card-grid .wp-block-column:nth-child(2) {
    border-bottom: 4px solid #CC2A1F;
}
.glass-card-grid .wp-block-column:nth-child(2) h3 { color: #CC2A1F; } 
.glass-card-grid .wp-block-column:nth-child(2):hover {
    box-shadow: 0 20px 50px rgba(204, 42, 31, 0.3), inset 0 0 40px rgba(255,255,255,0.6);
    border-bottom-color: #CC2A1F;
}

/* --- Card 3: Values (Gold) - CONTRAST FIXED --- */
.glass-card-grid .wp-block-column:nth-child(3) {
    border-bottom: 4px solid #FDB813;
    background: rgba(255, 255, 255, 0.85); /* More opaque for readability */
}
/* Title is now DARK GREEN for readability, not Yellow */
.glass-card-grid .wp-block-column:nth-child(3) h3 { color: #0a2e0e; } 

.glass-card-grid .wp-block-column:nth-child(3):hover {
    box-shadow: 0 20px 50px rgba(253, 184, 19, 0.3), inset 0 0 40px rgba(255,255,255,0.6);
    border-bottom-color: #FDB813;
}


/* 4. ICONS (Floating above the glass) */
.glass-card-grid h3::before {
    content: '';
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto 25px auto;
    background-color: currentColor; /* Inherits text color by default */
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1)); 
    transition: transform 0.4s ease;
}

/* Fix: Force Card 3 Icon to stay GOLD even though text is Green */
.glass-card-grid .wp-block-column:nth-child(3) h3::before {
    background-color: #FDB813 !important;
}

/* Icon Hover Animation */
.glass-card-grid .wp-block-column:hover h3::before {
    transform: scale(1.1) rotate(5deg);
}

/* Define Icon Shapes */
.glass-card-grid .wp-block-column:nth-child(1) h3::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}
.glass-card-grid .wp-block-column:nth-child(2) h3::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}
.glass-card-grid .wp-block-column:nth-child(3) h3::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 12l-2.5-4.5L5 8l5 .75L12 4l2 4.75L19 8l-4.5 2.5L12 15z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 12l-2.5-4.5L5 8l5 .75L12 4l2 4.75L19 8l-4.5 2.5L12 15z'/%3E%3C/svg%3E");
}


/* 5. TYPOGRAPHY & LISTS */
.glass-card-grid h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 20px;
}

.glass-card-grid p {
    font-family: 'Open Sans', sans-serif;
    color: #444; 
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Values List (Pills) - UPDATED FOR READABILITY */
.glass-card-grid .wp-block-column:nth-child(3) ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.glass-card-grid .wp-block-column:nth-child(3) li {
    /* Solid White for Readability */
    background: #ffffff;
    border: 2px solid #FDB813;
    /* Dark Text */
    color: #0a2e0e; 
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 50px;
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.glass-card-grid .wp-block-column:nth-child(3) li:hover {
    background: #FDB813;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(253, 184, 19, 0.4);
}







/* --- SECTION 3: STORY & WHY (OVERLAPPING GLASS) --- */

/* 1. SECTION BACKGROUND (Clean & Premium) */
.story-section-wrapper {
    padding: 100px 20px;
    background-color: #f9fbf9; /* Very faint Green tint */
    background-image: radial-gradient(#2E8B38 0.5px, transparent 0.5px); /* Tiny dot pattern */
    background-size: 20px 20px;
    opacity: 1;
    overflow: hidden;
}

/* 2. ROW LAYOUT (Flexbox) */
.story-row {
    max-width: 1100px;
    margin: 0 auto 80px auto;
    display: flex;
    align-items: center; /* Center vertically */
    position: relative;
}

/* 3. IMAGE STYLING (The Base) */
.story-row .wp-block-image img {
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15); /* Deep Shadow */
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
    border-bottom: 5px solid #FDB813; /* Gold Accent Line */
}

/* Hover Effect on Image */
.story-row:hover .wp-block-image img {
    transform: scale(1.02); /* Slight Zoom */
}

/* 4. THE FLOATING GLASS CARD (The Magic) */
.glass-floating-card {
    background: rgba(255, 255, 255, 0.75); /* Milky White Glass */
    backdrop-filter: blur(25px); /* Heavy Frost */
    -webkit-backdrop-filter: blur(25px);
    padding: 50px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    
    /* THE OVERLAP CALCULATION */
    margin-left: -80px; /* Pulls text LEFT over the image */
    position: relative;
    z-index: 10;
    max-width: 600px;
}

/* 5. REVERSE LAYOUT (For "Our Why") */
/* Switches overlap direction for the second row */
.story-row.reverse-layout {
    flex-direction: row-reverse; /* Puts image on right */
}

.story-row.reverse-layout .glass-floating-card {
    margin-left: 0;
    margin-right: -80px; /* Pulls text RIGHT over the image */
}

/* 6. TYPOGRAPHY (Strict Consistency) */
.glass-floating-card h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.2rem;
    margin-bottom: 25px;
    line-height: 1.1;
}

/* Color Coding the Headers */
/* Story = Green (Growth) */
.story-row:not(.reverse-layout) .glass-floating-card h2 {
    color: #2E8B38;
}

/* Why = Red (Urgency) */
.story-row.reverse-layout .glass-floating-card h2 {
    color: #CC2A1F;
}

.glass-floating-card p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    color: #4A2C2A; /* Brand Brown */
    line-height: 1.8;
    margin-bottom: 20px;
}

/* 7. DECORATIVE ELEMENTS */
/* Adds a vertical colored line next to the text */
.glass-floating-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50px;
    bottom: 50px;
    width: 4px;
    border-radius: 0 4px 4px 0;
}

.story-row:not(.reverse-layout) .glass-floating-card::before {
    background: #2E8B38; /* Green Line */
}

.story-row.reverse-layout .glass-floating-card::before {
    background: #CC2A1F; /* Red Line */
    left: auto;
    right: 0; /* Line on right side for reverse layout */
    border-radius: 4px 0 0 4px;
}

/* 8. MOBILE RESPONSIVENESS */
@media (max-width: 900px) {
    .story-row, .story-row.reverse-layout {
        display: block; /* Stack vertically */
        margin-bottom: 60px;
    }
    
    .glass-floating-card, 
    .story-row.reverse-layout .glass-floating-card {
        margin: -40px 20px 0 20px; /* Overlap upwards instead of sideways */
        padding: 30px;
    }
    
    .story-row .wp-block-image img {
        width: 100%;
    }
}









/* --- SECTION 4 FIXED: NO GHOST CARDS --- */

.theory-section {
    padding: 100px 20px;
    background: linear-gradient(to bottom, #ffffff, #f9fbf9);
    position: relative;
    overflow: hidden;
}

/* Central Heading */
.theory-section h2 {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-primary); 
    font-weight: 800;
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 15px;
}

.theory-section p.has-text-align-center {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-text); 
    max-width: 700px;
    margin: 0 auto 60px auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* THE PROCESS GRID */
.theory-process-grid {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    /* Reset the number counter here */
    counter-reset: step-counter; 
}

/* The Connector Line */
.theory-process-grid::before {
    content: '';
    position: absolute;
    top: 50px; 
    left: 10%;
    right: 10%;
    height: 4px;
    background: repeating-linear-gradient(
        to right,
        #e0e0e0 0,
        #e0e0e0 10px,
        transparent 10px,
        transparent 20px
    );
    z-index: 0;
}

/* --- THE FIX: STRICT CHILD SELECTORS (>) --- */
/* This ensures we ONLY target the main 4 columns, not inner blocks */

.theory-process-grid > .wp-block-column {
    background: var(--glass-bg); 
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    z-index: 1; 
    transition: all 0.4s ease;
    margin-top: 0;
    margin-bottom: 0; /* Clean margins */
}

/* Staggered Steps (Up/Down) */
.theory-process-grid > .wp-block-column:nth-child(even) {
    margin-top: 50px; 
}

/* Hover Effects */
.theory-process-grid > .wp-block-column:hover {
    transform: translateY(-10px);
    background: #fff;
}

/* Color Coding on Hover */
.theory-process-grid > .wp-block-column:nth-child(1):hover { border-top: 4px solid var(--color-primary); }
.theory-process-grid > .wp-block-column:nth-child(2):hover { border-top: 4px solid var(--color-action); }
.theory-process-grid > .wp-block-column:nth-child(3):hover { border-top: 4px solid var(--color-accent); }
.theory-process-grid > .wp-block-column:nth-child(4):hover { border-top: 4px solid var(--color-text); }

/* NUMBER BUBBLES (Strictly applied) */
.theory-process-grid > .wp-block-column::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 20px auto;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    line-height: 36px;
    font-weight: 800;
    color: var(--color-text);
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s;
}

/* Number Colors on Hover */
.theory-process-grid > .wp-block-column:nth-child(1):hover::before { border-color: var(--color-primary); color: var(--color-primary); }
.theory-process-grid > .wp-block-column:nth-child(2):hover::before { border-color: var(--color-action); color: var(--color-action); }
.theory-process-grid > .wp-block-column:nth-child(3):hover::before { border-color: var(--color-accent); color: var(--color-accent); }

/* Typography */
.theory-process-grid h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--color-text);
}

.theory-process-grid p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
}

/* Mobile Fix */
@media (max-width: 768px) {
    .theory-process-grid > .wp-block-column:nth-child(even) {
        margin-top: 0; 
    }
    .theory-process-grid::before {
        display: none; 
    }
    .theory-process-grid > .wp-block-column {
        margin-bottom: 20px;
    }
}







/* --- SECTION 5 FINAL POLISH: HIGH CONTRAST & MILKY GLASS --- */

/* 1. SECTION BACKGROUND */
.holo-pyramid-section {
    padding: 100px 20px;
    /* Darker, richer background to make the white glass pop */
    background: radial-gradient(circle at 50% 0%, #1e5c25 0%, #051b07 100%) !important;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.holo-pyramid-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.8rem; /* Slightly larger */
    margin-bottom: 15px;
    color: #fff;
    text-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

.holo-pyramid-section p.has-text-align-center {
    color: rgba(255,255,255,0.95); /* Almost pure white */
    max-width: 700px;
    margin: 0 auto 60px auto;
    font-size: 1.15rem;
    font-weight: 500;
}

/* 2. STAGE & STACK */
.pyramid-3d-stage {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding: 30px 0;
}

.pyramid-3d-stack {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px; 
}

/* 3. THE MILKY CRYSTAL BLOCKS (Contrast Fix) */
.holo-level {
    position: relative;
    transform: none; 
    
    /* LIGHTER GRADIENT: Looks like light hitting the top */
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* CRISP EDGES for Definition */
    border-top: 2px solid rgba(255,255,255,0.9); /* Bright white top edge */
    border-left: 1px solid rgba(255,255,255,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(0,0,0,0.5); /* Dark bottom for depth */
    
    border-radius: 12px;
    padding: 22px 15px;
    /* Deep shadow to separate from background */
    box-shadow: 0 15px 35px rgba(0,0,0,0.4); 
    
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* TEXT STYLING (Maximum Readability) */
.holo-level p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; 
    font-size: 1.05rem;
    text-align: center;
    margin: 0;
    line-height: 1.3;
    /* Heavy shadow makes text readable on ANY background */
    text-shadow: 0 2px 4px rgba(0,0,0,0.9); 
}

/* 4. WIDTHS */
.level-5 { width: 35%; z-index: 5; }
.level-4 { width: 50%; z-index: 4; }
.level-3 { width: 65%; z-index: 3; }

/* 5. THE HIGHLIGHT (Niwezeshe - Red/Gold) */
.level-2.highlight { 
    width: 80%; 
    z-index: 10;
    
    /* Vibrant Gradient: Red to Orange/Gold */
    background: linear-gradient(90deg, #CC2A1F 0%, #D95525 100%);
    
    /* Glowing Gold Border */
    border: 2px solid #FDB813; 
    box-shadow: 0 0 40px rgba(204, 42, 31, 0.5), 0 20px 40px rgba(0,0,0,0.5);
    
    transform: scale(1.05); 
}

.level-2.highlight p {
    font-size: 1.3rem;
    font-weight: 800; /* Extra Bold */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 3px 8px rgba(0,0,0,0.6);
}

/* 6. BOTTOM LEVEL (Self Care) */
.level-1 { 
    width: 95%; 
    z-index: 1; 
    background: rgba(255,255,255,0.15); /* Slightly darker for base */
    font-weight: 800;
}

/* 7. HOVER EFFECT (Glow Up) */
.holo-level:hover {
    transform: translateY(-5px);
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.1) 100%);
    border-top-color: #fff;
    box-shadow: 0 0 20px rgba(255,255,255,0.2); /* White Glow */
}

/* 8. SIDE LABELS (Brighter) */
.pyramid-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Open Sans', sans-serif;
    /* Brighter White for Labels */
    color: rgba(255,255,255,0.9); 
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Shadow for readability */
}

.label-left { left: 10px; }
.label-right { right: 10px; }

.arrow {
    font-size: 2.2rem;
    color: #FDB813; /* Gold */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* MOBILE FIXES */
@media (max-width: 768px) {
    .pyramid-label { display: none; } 
    .holo-level { 
        width: 100% !important; 
        padding: 20px 10px;
    }
    .level-2.highlight { transform: none; }
}












/* --- SECTION 6 COMPLETE: PARALLAX PORTAL & RED BUTTONS --- */

.cta-section {
    /* GAP FIX: Pulls section up to cover white space */
    /* Adjust -50px to -80px if you still see a tiny line */
    margin-top: -50px !important; 
    
    padding: 150px 20px;
    position: relative;
    text-align: center;
    z-index: 10; /* Ensures it covers the gap */
    
    /* PARALLAX BACKGROUND */
    background-image: url('https://images.unsplash.com/photo-1593113598332-cd288d649433?q=80&w=1920&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Frozen effect */
    background-repeat: no-repeat;
    
    /* Dark Overlay */
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5); 
}

/* THE GLOWING GLASS CARD */
.cta-glass-card {
    max-width: 800px;
    margin: 0 auto;
    
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    
    border-radius: 30px;
    padding: 60px 40px;
    transition: transform 0.4s ease;
}

.cta-glass-card:hover {
    transform: translateY(-5px);
    border-color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

/* TYPOGRAPHY */
.cta-glass-card h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.cta-glass-card p {
    font-family: 'Open Sans', sans-serif;
    color: #f0f0f0;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 40px;
    font-weight: 500;
}

/* --- BUTTONS (RED PRIMARY) --- */

/* Primary Button (Partner With Us) */
.cta-btn-primary .wp-block-button__link {
    /* Red Gradient */
    background: linear-gradient(135deg, #CC2A1F 0%, #b3241b 100%) !important;
    color: #ffffff !important; /* White Text */
    border-radius: 50px !important;
    padding: 15px 40px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    box-shadow: 0 5px 15px rgba(204, 42, 31, 0.4); /* Red Shadow */
    transition: all 0.3s ease;
}

.cta-btn-primary .wp-block-button__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(204, 42, 31, 0.6);
    background: #fff !important; /* White on Hover */
    color: #CC2A1F !important;   /* Red Text on Hover */
}

/* Secondary Button (Donate) */
.cta-btn-secondary .wp-block-button__link {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    border-radius: 50px !important;
    padding: 13px 38px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.cta-btn-secondary .wp-block-button__link:hover {
    background: #fff !important;
    color: #2E8B38 !important; /* Green Text on Hover */
    transform: translateY(-3px);
}

/* --- MOBILE FIXES --- */
@media (max-width: 768px) {
    /* 1. Turn off parallax on mobile (improves performance) */
    .cta-section { 
        background-attachment: scroll; 
    }
    
    .cta-glass-card h2 { 
        font-size: 2rem; 
    }

    /* 2. BUTTON SPACING FIX */
    .cta-glass-card .wp-block-buttons {
        display: flex;
        flex-direction: column; /* Stack them */
        align-items: center;
        gap: 20px !important; /* FORCE GAP between buttons */
    }

    /* 3. Make buttons full width for easier tapping */
    .cta-btn-primary, .cta-btn-secondary {
        width: 100% !important;
        margin: 0 !important; /* Remove old margins */
    }
    
    .cta-btn-primary .wp-block-button__link,
    .cta-btn-secondary .wp-block-button__link {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }
}







/* --- MAGNIFICENT CUSTOM FOOTER (FINAL ENHANCED) --- */

/* 1. ASTRA RESET (Force Full Width) */
.site-footer {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 2. THE STAGE (Deep Green + Animated Gradient) */
.custom-footer-wrapper {
    /* Deep Jungle Gradient */
    background: radial-gradient(circle at 50% 100%, #1a4d23 0%, #031405 100%);
    padding: 100px 20px 0 20px;
    position: relative;
    overflow: hidden;
    color: #fff;
    border-top: 5px solid #FDB813; /* Gold Top Border */
}

/* 3. ALIVE BACKGROUNDS (Breathing Glows) */
.footer-glow-spot {
    position: absolute;
    top: -150px; right: -150px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(46, 139, 56, 0.4) 0%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
    animation: breatheGlow 10s infinite alternate;
}

.footer-glow-spot-2 {
    position: absolute;
    bottom: -100px; left: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(253, 184, 19, 0.2) 0%, transparent 70%);
    opacity: 0.4;
    pointer-events: none;
    animation: breatheGlow 15s infinite alternate-reverse;
}

@keyframes breatheGlow {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.2); opacity: 0.7; }
}

/* 4. LAYOUT GRID */
.footer-inner-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; /* Vertically Centered */
    gap: 60px;
    padding-bottom: 80px;
    position: relative;
    z-index: 2;
}

/* 5. LEFT COLUMN: BRANDING */
.footer-brand-section { flex: 1; min-width: 300px; }

.huge-brand-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 4rem; /* Massive */
    color: #fff;
    margin: 0 0 25px 0;
    line-height: 1;
    letter-spacing: -2px;
    background: linear-gradient(to right, #fff, #aabfab);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Gradient Text */
}

.brand-mission {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
    max-width: 450px;
    margin-bottom: 40px;
}

/* Social Pills (Interactive) */
.custom-social-row { display: flex; gap: 15px; }

.social-pill {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 10px 25px;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */
}

.social-pill:hover {
    background: #ffffff;
    color: #0a2e0e;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(255,255,255,0.2);
    border-color: #fff;
}

/* 6. RIGHT COLUMN: HOLOGRAPHIC CONSOLE */
.footer-glass-console {
    flex: 1.3;
    min-width: 300px;
    
    /* ULTRA GLASS EFFECT */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Top Shine */
    border-left: 1px solid rgba(255, 255, 255, 0.3); /* Left Shine */
    
    border-radius: 30px;
    padding: 50px;
    
    display: flex;
    gap: 50px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4); /* Deep Shadow */
    transition: transform 0.3s ease;
}

.footer-glass-console:hover {
    transform: translateY(-5px); /* Entire console floats on hover */
    border-color: rgba(255,255,255,0.3);
}

.console-col { flex: 1; }

.console-header {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #FDB813;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    font-size: 0.9rem;
    text-shadow: 0 0 10px rgba(253, 184, 19, 0.3); /* Gold Glow */
}

/* Animated Links */
.console-links { list-style: none; padding: 0; margin: 0; }
.console-links li { margin-bottom: 15px; }

.console-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
    padding-left: 0;
}

/* Hover Slide + Arrow Appear */
.console-links a:hover {
    color: #fff;
    transform: translateX(10px);
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.console-links a::before {
    content: '→';
    position: absolute;
    left: -20px;
    opacity: 0;
    color: #FDB813;
    transition: all 0.3s;
}

.console-links a:hover::before {
    opacity: 1;
    left: -15px;
}

/* Contact Info */
.console-contact { list-style: none; padding: 0; margin: 0; }
.console-contact li { margin-bottom: 20px; font-size: 1rem; color: rgba(255,255,255,0.8); display: flex; align-items: flex-start; gap: 10px; }
.console-contact strong { color: #fff; display: block; font-size: 0.9rem; margin-bottom: 2px; text-transform: uppercase; opacity: 0.7; }

/* 7. COPYRIGHT BAR */
.footer-bottom-bar {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 30px 0;
    text-align: center;
    position: relative;
    z-index: 2;
}
.footer-bottom-bar p { font-size: 0.85rem; color: rgba(255,255,255,0.3); margin: 0; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .footer-inner-grid { flex-direction: column; gap: 50px; }
    .footer-glass-console { flex-direction: column; width: 100%; padding: 30px; }
    .huge-brand-text { font-size: 3rem; }
}









/* --- FIX: FORCE MOBILE MENU VISIBILITY --- */

/* 1. Turn the Menu Background DARK GREEN (Overrides White/Transparent) */
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-header-content,
#ast-mobile-header-wrapper {
    background-color: #0a2e0e !important; /* Deep Green */
    background-image: none !important;
}

/* 2. Turn the Links WHITE and BOLD */
.ast-builder-menu-mobile .main-navigation .menu-item .menu-link {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    text-shadow: none !important;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Divider Line */
}

/* 3. Turn the Hamburger Icon GOLD */
.ast-mobile-menu-trigger-fill {
    fill: #FDB813 !important;
}

/* 4. Make the Close "X" Button Visible */
.ast-mobile-popup-close-icon {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50%;
    color: #fff !important;
}











/* --- FIX: CHANGE HAMBURGER ICON COLOR --- */

/* 1. Force the Icon to be GOLD */
.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger-fill path {
    fill: #FDB813 !important; /* Brand Gold */
    stroke: #FDB813 !important; /* Ensures lines are colored */
}

/* 2. Optional: Add a subtle glow so it pops even more */
.ast-mobile-menu-buttons {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}












/* --- THEORY OF CHANGE: ANIMATED GLASS CARDS WITH GLOWING OUTLINES --- */

/* 1. MAIN SECTION CONTAINER (Animated Background) */
.theory-glass-section {
    position: relative;
    background: linear-gradient(135deg, #f0f7f1 0%, #e0ebe2 100%);
    padding: 80px 20px;
    overflow: hidden;
}

/* Animated Glowing Orbs */
.glass-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    z-index: 0;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, #2E8B38, #FDB813);
    top: -100px;
    left: -100px;
    animation: orbMove1 15s infinite alternate ease-in-out;
}

.orb-2 {
    width: 350px;
    height: 350px;
    background: linear-gradient(45deg, #0a2e0e, #2E8B38);
    bottom: -80px;
    right: -80px;
    animation: orbMove2 18s infinite alternate ease-in-out;
}

@keyframes orbMove1 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(200px, 150px); }
}
@keyframes orbMove2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-180px, -120px); }
}


/* 2. SECTION HEADER */
.theory-glass-header {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.theory-glass-header h2 {
    color: #0a2e0e;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(46, 139, 56, 0.2);
}

.theory-glass-header p {
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
}


/* 3. THE GRID */
.glass-cards-grid {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: stretch;
}


/* 4. THE GLASS CARD DESIGN (With Glow) */
.glass-process-card {
    /* Glass Base */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* THE GLOWING OUTLINE */
    /* We make the border slightly thicker (2px) for more presence */
    border: 2px solid rgba(255, 255, 255, 0.7); 
    
    /* Shape & Spacing */
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    
    /* Shadow & Glow Combination */
    /* 1st shadow: The white outer glow */
    /* 2nd shadow: The drop shadow for depth */
    /* 3rd shadow: The inner frosted glow */
    box-shadow: 
        0 0 25px rgba(255, 255, 255, 0.3), /* Subtle White Glow */
        0 15px 35px rgba(0, 0, 0, 0.1),    /* Drop Shadow */
        inset 0 0 20px rgba(255,255,255,0.2); /* Inner Frost */
    
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hover State: INTENSIFY GLOW */
.glass-process-card:hover {
    transform: translateY(-10px);
    /* Brighter background */
    background: rgba(255, 255, 255, 0.35);
    /* Pure white, crisp border */
    border-color: #ffffff;
    
    /* Intense Glow on Hover */
    box-shadow: 
        0 0 50px rgba(255, 255, 255, 0.8), /* Intense White Glow radiating outwards */
        0 20px 40px rgba(46, 139, 56, 0.2),    /* Deeper drop shadow */
        inset 0 0 40px rgba(255,255,255,0.5); /* Brighter inner glow */
}


/* 5. CARD CONTENT */
.glass-step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #2E8B38, #5cb85c);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    /* Add a little glow to the numbers too */
    box-shadow: 0 0 20px rgba(46, 139, 56, 0.5);
}

.glass-process-card h3 {
    color: #0a2e0e;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.glass-process-card p {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.6;
    margin: 0;
}


/* RESPONSIVE */
@media (max-width: 1024px) {
    .glass-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    .theory-glass-header h2 { font-size: 2rem; }
}

@media (max-width: 600px) {
    .glass-cards-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .theory-glass-section { padding: 60px 20px; }
    .glass-process-card { padding: 30px 20px; }
}

















/* --- UNIVERSAL PAGE HEADER (For Inner Pages) --- */

.universal-page-header {
    /* Same background image as home to maintain consistency */
    background-image: url('https://images.unsplash.com/photo-1542601906990-b4d3fb7d5b43?q=80&w=1920&auto=format&fit=crop'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
    /* Shorter Height for inner pages */
    height: 50vh; 
    min-height: 400px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 60px; /* Space before content starts */
}

/* The Dark Overlay */
.universal-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 46, 14, 0.5) 0%, #0a2e0e 100%);
    z-index: 1;
}

/* The Small Glass Box for the Title */
.page-title-glass {
    position: relative;
    z-index: 2;
    
    /* Smoked Glass Effect (Matches Home) */
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    padding: 40px 60px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    
    /* Animation */
    animation: fadeDown 1s ease-out forwards;
}

.page-title-glass h1 {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Breadcrumb style (Optional text below title) */
.page-title-glass p {
    color: #FDB813; /* Gold */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 2px;
}

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

/* Mobile Adjustment */
@media (max-width: 768px) {
    .universal-page-header { height: 40vh; min-height: 300px; }
    .page-title-glass h1 { font-size: 2rem; }
    .page-title-glass { padding: 30px 20px; width: 90%; }
}
















/* --- TEAM SECTION: VIVID GLASS & ANIMATION --- */

/* 1. CONTAINER WITH ANIMATION */
.team-glass-section {
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
    /* Light Mint Base */
    background: linear-gradient(135deg, #f0f7f1 0%, #e8f5e9 100%);
    z-index: 1;
}

/* ANIMATED ORBS (Reusing the logic) */
.team-glass-section::before,
.team-glass-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5; /* Increased opacity for vibrancy */
    z-index: -1;
}

/* Green Orb Top Left */
.team-glass-section::before {
    width: 400px;
    height: 400px;
    background: #2E8B38;
    top: -100px;
    left: -100px;
    animation: orbFloat1 12s infinite alternate ease-in-out;
}

/* Gold Orb Bottom Right */
.team-glass-section::after {
    width: 350px;
    height: 350px;
    background: #FDB813;
    bottom: -50px;
    right: -50px;
    animation: orbFloat2 15s infinite alternate ease-in-out;
}

/* 2. THE GRID */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

/* 3. VIVID GLASS CARD */
.glass-profile-card {
    /* More Reflective Glass */
    background: rgba(255, 255, 255, 0.6); /* More opaque white */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    
    border-radius: 24px;
    padding: 40px 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Cleaner shadow */
    transition: all 0.4s ease;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* HOVER: VIVID POP */
.glass-profile-card:hover {
    transform: translateY(-15px);
    background: #ffffff;
    /* Green Glow Spread */
    box-shadow: 0 20px 50px rgba(46, 139, 56, 0.2); 
    border-color: #FDB813;
}

/* 4. IMAGES & TEXT */
.section-title-center {
    text-align: center;
    color: #0a2e0e;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.2rem;
    margin: 0 0 50px 0;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.profile-img-container {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.profile-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.glass-profile-card:hover .profile-img-container img {
    transform: scale(1.1);
}

.glass-profile-card h3 {
    color: #0a2e0e;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.role-badge {
    background: rgba(46, 139, 56, 0.15); /* Darker pill background */
    color: #2E8B38;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 15px;
    display: inline-block;
}

.glass-profile-card p {
    color: #444;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.card-footer-line {
    width: 40px;
    height: 4px;
    background: #FDB813;
    border-radius: 2px;
    margin-top: auto;
}

/* RESPONSIVE */
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }











/* --- FIX: VIBRANT PAGE HEADER --- */
.universal-page-header::before {
    /* Lighter Gradient: Starts clear, fades to dark green at bottom */
    background: linear-gradient(180deg, rgba(10, 46, 14, 0.1) 0%, rgba(10, 46, 14, 0.4) 50%, #0a2e0e 100%) !important;
    
    /* Top Gold Glow (Sunlight effect) */
    box-shadow: inset 0 150px 150px -50px rgba(253, 184, 19, 0.3);
}

.page-title-glass {
    /* Make the glass box slightly more reflective */
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}















/* --- 1. NEW STORY GLASS SECTION --- */

.story-glass-wrapper {
    position: relative;
    padding: 100px 20px;
    background: linear-gradient(135deg, #f0f7f1 0%, #ffffff 100%); /* Clean light base */
    overflow: hidden;
}

/* Background Blobs (To make the glass visible) */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.6;
}
.blob-1 {
    width: 400px;
    height: 400px;
    background: #2E8B38; /* Green */
    top: -100px;
    left: -100px;
}
.blob-2 {
    width: 300px;
    height: 300px;
    background: #FDB813; /* Gold */
    bottom: -50px;
    right: -50px;
}

/* The Glass Card Container */
.story-glass-card {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    
    /* VIVID GLASS EFFECT */
    background: rgba(255, 255, 255, 0.65); /* High opacity white */
    backdrop-filter: blur(20px); /* Heavy frost */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #ffffff;
    
    border-radius: 30px;
    padding: 60px;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.05), /* Soft Shadow */
        inset 0 0 30px rgba(255,255,255,0.8); /* Inner Glow */
}

/* Story Grid Layout */
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Typography */
.story-badge {
    background: rgba(46, 139, 56, 0.1);
    color: #2E8B38;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.story-text h2 {
    color: #0a2e0e;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    margin-bottom: 25px;
    line-height: 1.2;
}

.highlight-intro {
    font-size: 1.15rem;
    color: #222;
    line-height: 1.6;
    margin-bottom: 20px;
}

.story-text p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
    font-family: 'Open Sans', sans-serif;
}

/* Quote */
.story-quote {
    display: flex;
    align-items: center;
    margin-top: 30px;
}
.quote-line {
    width: 4px;
    height: 50px;
    background: #FDB813; /* Gold Line */
    margin-right: 20px;
    border-radius: 2px;
}
.story-quote p {
    font-style: italic;
    color: #2E8B38;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

/* Image Styling */
.story-image-container {
    position: relative;
    border-radius: 20px;
    overflow: visible; /* Allow badge to hang out */
}

.story-image-container img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transform: rotate(2deg); /* Stylish tilt */
    transition: transform 0.5s ease;
    border: 5px solid #fff;
}

.story-glass-card:hover .story-image-container img {
    transform: rotate(0deg) scale(1.02);
}

/* Floating Impact Badge */
.impact-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: #ffffff;
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(46, 139, 56, 0.15);
    text-align: center;
    border-left: 5px solid #CC2A1F; /* Red Accent */
}
.impact-number {
    display: block;
    font-weight: 800;
    font-size: 1.8rem;
    color: #0a2e0e;
    font-family: 'Montserrat', sans-serif;
}
.impact-label {
    font-size: 0.85rem;
    color: #666;
    text-transform: uppercase;
}


/* --- 2. TEAM SECTION: VIVID GLASS UPGRADE --- */

/* The Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

/* The Card (VIVID UPGRADE) */
.glass-profile-card {
    /* Create a glossy, high-quality glass look */
    background: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
    backdrop-filter: blur(25px); /* Stronger Blur */
    -webkit-backdrop-filter: blur(25px);
    
    border: 1px solid rgba(255,255,255,0.9); /* Sharp White Border */
    border-radius: 24px;
    padding: 40px 25px;
    text-align: center;
    
    /* Double Shadow for 3D Pop */
    box-shadow: 
        0 10px 20px rgba(0,0,0,0.05), /* Drop shadow */
        inset 0 0 20px rgba(255,255,255,0.5); /* Inner light */
        
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* HOVER EFFECT: The "Vivid" part */
.glass-profile-card:hover {
    transform: translateY(-15px);
    background: #ffffff; /* Solid white on hover makes it pop against background */
    border-color: #FDB813; /* Gold Border */
    
    /* Intense Glow */
    box-shadow: 0 25px 50px rgba(46, 139, 56, 0.2); 
}

/* Profile Image */
.profile-img-container {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}
.profile-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.glass-profile-card:hover .profile-img-container img {
    transform: scale(1.1);
}

/* Text */
.glass-profile-card h3 {
    color: #0a2e0e;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 5px;
}
.role-badge {
    background: rgba(46, 139, 56, 0.1);
    color: #2E8B38;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 15px;
    display: inline-block;
}
.glass-profile-card p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Footer Line */
.card-footer-line {
    width: 0; /* Start width 0 */
    height: 4px;
    background: #FDB813;
    border-radius: 2px;
    margin-top: 20px;
    transition: width 0.4s ease; /* Animate width */
}
.glass-profile-card:hover .card-footer-line {
    width: 50px; /* Expand on hover */
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .story-grid { grid-template-columns: 1fr; }
    .story-glass-card { padding: 40px 20px; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .story-image-container { margin-top: 20px; }
}
@media (max-width: 600px) {
    .team-grid { grid-template-columns: 1fr; }
}

















/* --- 1. REMOVE GAP BETWEEN HEADER & STORY SECTION --- */
/* Targets the container of the "Our Story" section to remove top spacing */
.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group.alignwide.is-layout-flow.wp-block-group-is-layout-flow {
    margin-top: 0 !important; /* Removes the white space above the story section */
    padding-top: 0 !important; /* Ensures no internal padding creates a gap */
}

/* Ensures the main header section has no bottom margin */
.wp-block-cover.alignfull.is-light {
    margin-bottom: 0 !important;
}


/* --- OUR STORY SECTION (FINAL CINEMATIC VERSION) --- */

.story-glass-wrapper {
    position: relative;
    padding: 100px 20px;
    background: linear-gradient(135deg, #f0f7f1 0%, #ffffff 100%); /* Clean light base */
    overflow: hidden;
    
    /* GAP FIX: Pulls the section up to touch the header */
    margin-top: -5px; 
}

/* 1. Background Blobs (The Animation) */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.6;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: #2E8B38; /* Green */
    top: -100px;
    left: -100px;
    animation: blobFloat 10s infinite alternate;
}

.blob-2 {
    width: 300px;
    height: 300px;
    background: #FDB813; /* Gold */
    bottom: -50px;
    right: -50px;
    animation: blobFloat 14s infinite alternate-reverse;
}

@keyframes blobFloat {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

/* 2. The Glass Card Container */
.story-glass-card {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    
    /* VIVID GLASS EFFECT */
    background: rgba(255, 255, 255, 0.65); /* High opacity white */
    backdrop-filter: blur(20px); /* Heavy frost */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #ffffff;
    
    border-radius: 30px;
    padding: 60px;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.05), /* Soft Shadow */
        inset 0 0 30px rgba(255,255,255,0.8); /* Inner Glow */
}

/* 3. Grid Layout (Text Left, Image Right) */
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* 4. Text Styling */
.story-badge {
    background: rgba(46, 139, 56, 0.1);
    color: #2E8B38;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.story-text h2 {
    color: #0a2e0e;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    margin-bottom: 25px;
    line-height: 1.2;
}

.highlight-intro {
    font-size: 1.15rem;
    color: #222;
    line-height: 1.6;
    margin-bottom: 20px;
}

.story-text p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
    font-family: 'Open Sans', sans-serif;
}

/* Quote */
.story-quote {
    display: flex;
    align-items: center;
    margin-top: 30px;
}
.quote-line {
    width: 4px;
    height: 50px;
    background: #FDB813; /* Gold Line */
    margin-right: 20px;
    border-radius: 2px;
}
.story-quote p {
    font-style: italic;
    color: #2E8B38;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

/* 5. Image Styling */
.story-image-container {
    position: relative;
    border-radius: 20px;
}

.story-image-container img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    transform: rotate(2deg); /* Stylish tilt */
    transition: transform 0.5s ease;
    border: 5px solid #fff;
}

.story-glass-card:hover .story-image-container img {
    transform: rotate(0deg) scale(1.02); /* Straighten on hover */
}

/* Floating Impact Badge */
.impact-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: #ffffff;
    padding: 15px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(46, 139, 56, 0.15);
    text-align: center;
    border-left: 5px solid #CC2A1F; /* Red Accent */
}
.impact-number {
    display: block;
    font-weight: 800;
    font-size: 1.5rem;
    color: #0a2e0e;
    font-family: 'Montserrat', sans-serif;
}
.impact-label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .story-grid { grid-template-columns: 1fr; }
    .story-glass-card { padding: 40px 20px; }
    .story-image-container { margin-top: 30px; }
    .story-text h2 { font-size: 2rem; }
}














/* --- UNIVERSAL PAGE HEADER (FINAL VIBRANT VERSION) --- */
/* Use this on ALL inner pages: About, Programs, Contact, etc. */

.universal-page-header {
    /* 1. Background Image (The same as Home for consistency) */
    background-image: url('https://plus.unsplash.com/premium_photo-1689177356594-b988a1cc45ff?q=80&w=2532&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?q=80&w=2427&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?q=80&w=1920&auto=format&fit=crop'); 
    background-size: cover;
    background-position: center 20%; /* Shifts image slightly up for better faces */
    background-attachment: fixed; /* Parallax effect */
    
    /* 2. Dimensions */
    height: 50vh; /* Takes up half the screen height */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    /* 3. NO GAP FIX: Ensures it touches the next section */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* The Vibrant Overlay */
.universal-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Gradient: Clear at top -> Dark Green at bottom */
    background: linear-gradient(180deg, rgba(10, 46, 14, 0.1) 0%, rgba(10, 46, 14, 0.5) 60%, #0a2e0e 100%);
    /* Top Gold Glow (Sunlight effect) */
    box-shadow: inset 0 100px 100px -50px rgba(253, 184, 19, 0.2);
    z-index: 1;
}

/* The Glass Title Box */
.page-title-glass {
    position: relative;
    z-index: 2;
    
    /* Smoked Glass Look */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    padding: 40px 60px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    
    /* Animation */
    animation: fadeDown 1s ease-out forwards;
}

.page-title-glass h1 {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.page-title-glass p {
    color: #FDB813; /* Gold Breadcrumb */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 2px;
}

/* Animation Keyframes */
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .universal-page-header { height: 40vh; min-height: 300px; }
    .page-title-glass h1 { font-size: 2rem; }
    .page-title-glass { padding: 30px 20px; width: 90%; }
}













/* --- PROGRAMS PAGE: HOLOGRAPHIC ORBS --- */

.programs-glass-wrapper {
    padding: 100px 20px;
    background: linear-gradient(135deg, #f9fbf9 0%, #ebf5ed 100%);
    position: relative;
    overflow: hidden;
    margin-top: -50px; /* Gap Killer */
    z-index: 1;
}

/* Background Blobs */
.blob-prog {
    position: absolute; border-radius: 50%; filter: blur(100px); z-index: 0; opacity: 0.6;
}
.blob-p1 { width: 600px; height: 600px; background: #2E8B38; top: -200px; right: -100px; animation: blobFloat 20s infinite alternate; }
.blob-p2 { width: 500px; height: 500px; background: #FDB813; bottom: -100px; left: -100px; animation: blobFloat 15s infinite alternate-reverse; }

/* GRID */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* THE HOLOGRAPHIC CARD */
.program-glass-card {
    /* Ultra Glass Background */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    
    /* Prism Border */
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-top: 2px solid rgba(255, 255, 255, 1);
    border-left: 2px solid rgba(255, 255, 255, 1);
    
    border-radius: 30px;
    padding: 50px 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05), inset 0 0 30px rgba(255,255,255,0.4);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Hover: Lift + Rainbow Shine */
.program-glass-card:hover {
    transform: translateY(-15px);
    background: rgba(255, 255, 255, 0.85);
    border-color: #FDB813;
    box-shadow: 0 30px 70px rgba(46, 139, 56, 0.2);
}

/* --- HEADER GROUP (Centered for Impact) --- */
.prog-header-group {
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* THE GLOWING ORB ICON */
.icon-orb {
    width: 90px;
    height: 90px;
    /* Gradient Orb */
    background: linear-gradient(135deg, rgba(253, 184, 19, 0.2) 0%, rgba(253, 184, 19, 0.05) 100%);
    border: 1px solid rgba(253, 184, 19, 0.3);
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem; /* Big Emoji */
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(253, 184, 19, 0.15);
    transition: all 0.5s ease;
}

/* Orb Pulse on Hover */
.program-glass-card:hover .icon-orb {
    transform: scale(1.1) rotate(10deg);
    background: #FDB813;
    box-shadow: 0 0 30px rgba(253, 184, 19, 0.5);
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-color: #FDB813;
}

.prog-header-group h3 {
    color: #0a2e0e;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* Gold Divider */
.gold-divider-small {
    width: 50px;
    height: 4px;
    background: #FDB813;
    border-radius: 10px;
}

/* --- BODY GROUP (Left Aligned for Readability) --- */
.prog-body-group {
    text-align: left;
    flex-grow: 1;
}

.prog-body-group p {
    color: #555;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Feature List with Custom Bullets */
.prog-features {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 20px;
}

.prog-features li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #2E8B38; /* Green Text */
    font-weight: 700;
    display: flex;
    align-items: center;
}

.prog-features li::before {
    content: '✦'; /* Diamond Bullet */
    position: absolute;
    left: 0;
    color: #FDB813; /* Gold Bullet */
    font-size: 1.2rem;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .programs-grid { grid-template-columns: 1fr; }
    .program-glass-card { padding: 40px 25px; }
}











/* --- REUSABLE MINT PREMIUM BOX --- */
.mint-premium-box {
    background-color: #f6f9f7; /* Mint */
    background-image: radial-gradient(#2E8B38 0.5px, transparent 0.5px);
    background-size: 20px 20px; /* Dots Pattern */
    
    border-left: 6px solid #FDB813; /* Gold Line */
    padding: 60px 40px;
    border-radius: 0 12px 12px 0;
    margin: 40px 0;
    position: relative;
    box-shadow: 0 10px 40px rgba(46, 139, 56, 0.08);
}

/* Red Accent Tag (Top Left) */
.mint-premium-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 60px;
    background: #CC2A1F; /* Brand Red */
}

/* Typography Fixes */
.mint-header h2 {
    color: #0a2e0e !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    margin: 0;
}







/* --- CLEAN & SYMMETRICAL MINT BOX --- */
.mint-premium-box {
    /* 1. Centered Box Layout */
    max-width: 800px;       /* Restricts width so it doesn't stretch */
    margin: 0 auto 60px auto; /* Centers the box on the screen */
    
    /* 2. Visuals */
    background-color: #f6f9f7; /* Mint */
    background-image: radial-gradient(#2E8B38 0.5px, transparent 0.5px);
    background-size: 20px 20px; /* Dots Pattern */
    
    /* 3. The Gold Accent (Moved to TOP for symmetry) */
    border-top: 6px solid #FDB813; 
    border-left: none; /* Remove side border */
    border-right: none;
    border-bottom: none;
    border-radius: 8px;
    
    /* 4. Spacing */
    padding: 50px 40px;
    text-align: center; /* Forces all text to be centered */
    box-shadow: 0 10px 30px rgba(46, 139, 56, 0.08);
    position: relative;
}

/* Remove the Red Tag (It causes alignment issues) */
.mint-premium-box::before {
    display: none !important;
}

/* Headers inside the box */
.mint-header h2 {
    color: #0a2e0e !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    margin-bottom: 20px !important;
    font-size: 2rem;
}













/* --- IMPACT PAGE: VIVID GLASS & MAGNIFICENT DESIGN --- */

/* 1. SECTION CONTAINER (Background & Animation) */
.impact-glass-section {
    padding: 100px 20px;
    /* Soft, premium light base */
    background: linear-gradient(135deg, #f9fbf9 0%, #ebf5ed 100%);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* 2. ANIMATED BLOBS (Bringing the section to life) */
.blob-impact {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px); /* Soft, dreamy blur */
    z-index: -1; /* Behind content */
    opacity: 0.6;
}

/* Define animation specifically for this section */
@keyframes impactFloat {
    0% { transform: translate(0, 0); }
    100% { transform: translate(30px, 30px); }
}

.blob-i1 {
    width: 500px; height: 500px;
    background: #2E8B38; /* Brand Green */
    top: -100px; left: -100px;
    animation: impactFloat 12s infinite alternate ease-in-out;
}

.blob-i2 {
    width: 450px; height: 450px;
    background: #FDB813; /* Brand Gold */
    bottom: -50px; right: -50px;
    animation: impactFloat 15s infinite alternate-reverse ease-in-out;
}


/* 3. STATS GRID LAYOUT */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto 100px auto;
    position: relative;
    z-index: 2;
}

/* 4. VIVID GLASS CARD DESIGN */
.impact-card {
    /* The "Thick Crystal" Look */
    background: rgba(255, 255, 255, 0.65); /* High transparency */
    backdrop-filter: blur(25px); /* Strong frost effect */
    -webkit-backdrop-filter: blur(25px);
    
    border: 1px solid rgba(255, 255, 255, 0.9); /* Sharp, bright border */
    border-radius: 30px;
    padding: 50px 30px;
    
    /* Inner Glow + Drop Shadow for 3D Pop */
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.05), 
        inset 0 0 30px rgba(255,255,255,0.6);
        
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hover Effect: Lift & Glow */
.impact-card:hover {
    transform: translateY(-15px);
    background: #ffffff; /* Turns solid white */
    border-color: #FDB813; /* Gold Border */
    box-shadow: 0 30px 60px rgba(46, 139, 56, 0.2); /* Green Outer Glow */
}

/* Stat Typography */
.stat-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));
}

.stat-number {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 4rem;
    color: #2E8B38; /* Green */
    line-height: 1;
    margin-bottom: 15px;
    text-shadow: 0 5px 15px rgba(46, 139, 56, 0.15); /* Depth */
}

.stat-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #0a2e0e; /* Dark Green */
    font-size: 1.1rem;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.stat-sub {
    font-family: 'Open Sans', sans-serif;
    color: #555;
    font-size: 0.95rem;
    font-style: italic;
    margin: 0;
}


/* 5. VISION & STORIES HEADERS (Brand Consistency) */
/* Forces all titles in this section to match the "About Us" style */
.impact-vision-box h3,
.stories-placeholder h3 {
    color: #0a2e0e !important; /* Dark Green */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 2.2rem !important;
    margin-bottom: 30px !important;
    text-align: center;
}


/* 6. VISION TEXT BOX */
.impact-vision-box {
    max-width: 900px;
    margin: 0 auto 100px auto;
    position: relative;
    z-index: 2;
    text-align: center;
}

.impact-vision-box p {
    font-size: 1.3rem;
    color: #333;
    line-height: 1.8;
    font-weight: 500;
    max-width: 800px;
    margin: 0 auto;
}


/* 7. STORIES PLACEHOLDER (Upgraded to Glass) */
.stories-placeholder {
    /* Beautiful glass container instead of a flat box */
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 30px;
    
    padding: 80px 40px;
    margin: 0 auto 60px auto;
    max-width: 900px;
    text-align: center;
    box-shadow: inset 0 0 40px rgba(255,255,255,0.5);
}

.stories-placeholder p {
    font-size: 1.1rem;
    color: #666;
    font-style: italic;
}


/* RESPONSIVE DESIGN */
@media (max-width: 900px) {
    .impact-grid { grid-template-columns: 1fr; gap: 30px; }
    .impact-card { padding: 40px 20px; }
    .stat-number { font-size: 3.5rem; }
    .impact-vision-box h3, .stories-placeholder h3 { font-size: 1.8rem !important; }
}












/* --- CTA SECTION (HOMEPAGE REPLICA) --- */
.cta-hero-style {
    /* 1. Exact same background image as Homepage */
    background-image: url('https://images.unsplash.com/photo-1579600161224-cac5a2971069?q=80&w=2342&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?q=80&w=1920&auto=format&fit=crop'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    
    /* 2. Positioning & Spacing */
    position: relative;
    padding: 100px 20px; /* Padding instead of 100vh height */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 3. Gap Fix */
    margin-top: -5px; 
}

/* The Dark Overlay (Exact match to Hero) */
.cta-hero-style::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 46, 14, 0.4) 0%, rgba(10, 46, 14, 0.6) 60%, #0a2e0e 100%);
    z-index: 0;
}





/* --- BOOST GLASS EFFECT FOR CTA SECTION --- */
/* This targets the glass card ONLY inside the bottom CTA to make it pop more */
.cta-hero-style .hero-glass-console {
    /* 1. Stronger Blur (Frosted Look) */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    /* 2. Thicker, Sharper Border */
    border: 2px solid rgba(255, 255, 255, 0.4) !important;

    /* 3. Inner Glow (The "Thick Crystal" Effect) */
    box-shadow: 
        0 30px 60px rgba(0,0,0,0.6), /* Deep Drop Shadow */
        inset 0 0 30px rgba(255,255,255,0.15) !important; /* Inner White Glow */

    /* 4. Slightly Darker Background for Text Contrast */
    background: rgba(0, 0, 0, 0.4) !important;
}











/* --- PARTNER PAGE STYLES --- */

/* 1. CHECKLIST STYLING */
.premium-check-list { list-style: none; padding: 0; margin: 0; }
.premium-check-list li {
    position: relative; padding-left: 35px; margin-bottom: 20px; color: #444;
}
.premium-check-list li::before {
    content: '✔'; position: absolute; left: 0; top: 0;
    color: #FDB813; font-size: 1.2rem; font-weight: 800;
}

/* 2. GLASS SECTION BACKGROUND */
.partner-glass-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #f0f7f1 0%, #fff 100%);
    position: relative; overflow: hidden; z-index: 1;
}

/* Blobs Animation */
.blob-partner {
    position: absolute; border-radius: 50%; filter: blur(90px); z-index: -1; opacity: 0.5;
}
.blob-pt1 { width: 400px; height: 400px; background: #2E8B38; top: -100px; right: -100px; animation: impactFloat 14s infinite alternate; }
.blob-pt2 { width: 300px; height: 300px; background: #CC2A1F; bottom: -50px; left: -50px; animation: impactFloat 18s infinite alternate-reverse; }

/* 3. PARTNER GRID */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; max-width: 1100px; margin: 40px auto; position: relative; z-index: 2;
}

/* 4. VIVID PARTNER CARD */
.partner-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px; padding: 40px 30px; text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05); transition: all 0.4s ease;
}
.partner-card:hover {
    transform: translateY(-10px); background: #ffffff;
    border-color: #2E8B38;
    box-shadow: 0 25px 50px rgba(46, 139, 56, 0.15);
}
.partner-icon { font-size: 3rem; margin-bottom: 20px; }
.partner-card h3 {
    color: #0a2e0e; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.3rem; margin-bottom: 15px;
}

/* 5. LOGO SECTION */
.partners-logo-section { padding: 60px 20px; background: #fff; }
.logo-grid {
    display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; align-items: center; opacity: 0.7;
}
.partner-logo {
    max-width: 150px; filter: grayscale(100%); transition: all 0.3s;
}
.partner-logo:hover { filter: grayscale(0%); transform: scale(1.05); opacity: 1; }

/* 6. GOLD BUTTON (For PDF) */
.hero-btn.glass-gold-btn {
    display: inline-block; padding: 18px 50px; border-radius: 50px;
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    text-transform: uppercase; text-decoration: none;
    font-size: 1rem; letter-spacing: 1px; transition: all 0.3s ease;
    background: rgba(253, 184, 19, 0.1); border: 2px solid #FDB813; color: #FDB813;
}
.hero-btn.glass-gold-btn:hover {
    background: #FDB813; color: #0a2e0e; box-shadow: 0 0 20px rgba(253, 184, 19, 0.4);
}












/* --- BLOG PAGE: MAGNIFICENT GLASS & GOLD SEPARATOR (FINAL V3) --- */

/* 1. ZERO-GAP LAYOUT FIX */
body.blog .site-content,
body.blog #primary,
body.blog #main,
body.blog .ast-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 2. HEADER FIX + GOLD SEPARATOR LINE */
body.blog .universal-page-header {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    /* Height & Centering */
    height: 60vh !important;
    min-height: 500px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    
    /* --- THE MISSING GOLD SEPARATOR LINE --- */
    border-bottom: 6px solid #FDB813 !important; /* This creates the yellow line at the bottom */
}

/* Gold Dash Under Title (Inside the Glass Box) */
.page-title-glass h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #FDB813;
    margin: 20px auto;
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(253, 184, 19, 0.4);
}

/* 3. GRID SECTION BACKGROUND */
body.blog .blog-glass-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    padding: 80px 20px;
    background: linear-gradient(135deg, #f9fbf9 0%, #ebf5ed 100%);
    overflow: hidden;
    margin-top: -1px; 
    z-index: 1;
}

/* 4. ANIMATED BLOBS */
.blob-blog {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    opacity: 0.5;
}
@keyframes blobFloatBlog {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}
.blob-b1 {
    width: 600px; height: 600px; background: #2E8B38; top: -200px; left: -200px;
    animation: blobFloatBlog 15s infinite alternate;
}
.blob-b2 {
    width: 500px; height: 500px; background: #FDB813; bottom: -100px; right: -100px;
    animation: blobFloatBlog 18s infinite alternate-reverse;
}

/* 5. GRID CONTAINER */
.glass-blog-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

/* 6. VIVID GLASS POST CARD */
.glass-post-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    display: flex; flex-direction: column;
}

.glass-post-card:hover {
    transform: translateY(-10px);
    background: #ffffff;
    border-color: #FDB813;
    box-shadow: 0 25px 50px rgba(46, 139, 56, 0.2);
}

/* 7. IMAGE & BADGE */
.post-img-wrapper { position: relative; height: 240px; overflow: hidden; }
.post-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.glass-post-card:hover .post-img-wrapper img { transform: scale(1.1); }

.category-badge {
    position: absolute; top: 15px; right: 15px;
    background: rgba(255, 255, 255, 0.95);
    color: #0a2e0e; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; padding: 6px 14px; border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 8. CONTENT STYLING */
.post-content { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
.post-date { font-size: 0.85rem; color: #888; margin-bottom: 10px; font-family: 'Open Sans', sans-serif; }
.post-content h3 { margin: 0 0 15px 0; line-height: 1.3; }
.post-content h3 a {
    color: #0a2e0e; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.3rem; text-decoration: none;
}
.glass-post-card:hover h3 a { color: #2E8B38; }
.post-content p { color: #555; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }

/* 9. READ MORE LINK */
.read-more-link {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9rem;
    color: #FDB813; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; margin-top: auto;
}
.read-more-link:hover { color: #0a2e0e; }

/* 10. PAGINATION */
.blog-pagination .nav-links { display: flex; justify-content: center; gap: 10px; }
.blog-pagination .page-numbers {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.5); color: #0a2e0e; font-weight: 700;
    border: 1px solid rgba(255,255,255,0.8); transition: all 0.3s;
}
.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
    background: #2E8B38; color: #fff; border-color: #2E8B38;
}

/* RESPONSIVE */
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; }
    body.blog .universal-page-header,
    body.blog .blog-glass-section {
        width: 100%; left: auto; right: auto; margin-left: 0; margin-right: 0;
    }
}
















/* --- SINGLE POST PAGE: MAGNIFICENT DESIGN --- */

/* 1. LAYOUT RESET (Zero-Gap Fix) */
/* Forces Astra to release constraints so the header is full-width */
body.single-post .site-content,
body.single-post #primary,
body.single-post #main,
body.single-post .ast-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 2. CINEMATIC HERO HEADER */
.single-post-hero {
    position: relative;
    width: 100vw; /* Force Full Viewport Width */
    height: 70vh;
    min-height: 500px;
    
    /* Breakout of container centering */
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -100px; /* Pulls content UP into the header */
    z-index: 0;
}

/* Dark Overlay */
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,46,14,0.4) 0%, rgba(10,46,14,0.9) 100%);
}

/* Glass Title Console */
.hero-glass-content {
    position: relative; z-index: 2;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 50px 40px;
    border-radius: 20px;
    text-align: center;
    max-width: 900px;
    margin: 0 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}

.hero-glass-content h1 {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.8rem;
    line-height: 1.2;
    margin: 25px 0;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Meta Data Styling */
.meta-tag {
    background: #FDB813; color: #0a2e0e;
    font-weight: 700; text-transform: uppercase;
    padding: 6px 16px; border-radius: 50px; font-size: 0.85rem;
    margin-right: 15px; letter-spacing: 1px;
}
.meta-date {
    color: #e0e0e0; font-family: 'Open Sans', sans-serif; font-size: 0.95rem;
}
.byline {
    color: #ccc; font-style: italic; font-size: 1.1rem;
}

/* 3. CONTENT CONTAINER (The Reader) */
.single-post-container {
    background: linear-gradient(180deg, transparent 0%, #f9fbf9 20%);
    position: relative;
    padding-top: 100px; /* Space for the overlap */
    padding-bottom: 80px;
    
    /* Full Width Breakout */
    width: 100vw;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    z-index: 1;
}

/* Animated Blobs */
.blob-single { position: absolute; border-radius: 50%; filter: blur(120px); z-index: -1; opacity: 0.4; }
.blob-s1 { width: 600px; height: 600px; background: #2E8B38; top: 100px; right: -200px; }
.blob-s2 { width: 500px; height: 500px; background: #FDB813; bottom: 200px; left: -200px; }

/* 4. THE GLASS ARTICLE CARD */
.glass-article-card {
    background: #fff; /* Solid white for readability */
    max-width: 800px;
    margin: 0 auto;
    padding: 60px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    position: relative;
    border-top: 6px solid #FDB813; /* Gold Top Border */
}

/* Typography Inside Post */
.entry-content {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #333;
}
.entry-content p { margin-bottom: 25px; }
.entry-content h2, .entry-content h3 {
    color: #0a2e0e; font-family: 'Montserrat', sans-serif; font-weight: 700; margin-top: 40px; margin-bottom: 20px;
}

/* 5. NAVIGATION LINKS */
.post-navigation-glass {
    max-width: 800px;
    margin: 40px auto;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.nav-prev a, .nav-next a {
    display: block;
    background: rgba(255,255,255,0.6);
    padding: 20px;
    border-radius: 15px;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
.nav-prev a:hover, .nav-next a:hover {
    background: #fff; transform: translateY(-5px); box-shadow: 0 15px 30px rgba(46,139,56,0.1); border-color: #FDB813;
}
.nav-label {
    display: block; font-size: 0.8rem; color: #888; text-transform: uppercase; margin-bottom: 5px; font-weight: 700;
}
.nav-title {
    display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; color: #0a2e0e; font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .single-post-hero { height: 60vh; }
    .hero-glass-content h1 { font-size: 2rem; }
    .glass-article-card { padding: 30px; margin: 0 20px; }
    .post-navigation-glass { flex-direction: column; padding: 0 20px; }
}











/* --- HOMEPAGE CTA: MAGNIFICENT GLASS & HIGH CONTRAST --- */

/* 1. The Container (Background & Layout) */
.cta-hero-style {
    position: relative;
    padding: 100px 20px;
    
    /* Dark Green Background + Image Overlay */
    background: linear-gradient(180deg, rgba(10, 46, 14, 0.7) 0%, rgba(10, 46, 14, 0.95) 100%),
                url('https://images.unsplash.com/photo-1542601906990-b4d3fb7d5b43?q=80&w=1920&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax Effect */
    
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 2. The Glass Console (The Box) */
.cta-hero-style .hero-glass-console {
    /* Transparent White Glass */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 70px 50px;
    border-radius: 30px;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    
    /* Deep Shadow for Pop */
    box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}

/* 3. Typography (CONTRAST FIX) */
/* Forces the Heading to be WHITE, not Green */
.cta-hero-style h2 {
    color: #ffffff !important; 
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    
    /* Drop shadow to separate text from background */
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Forces Subtext to be Light Grey */
.cta-hero-style p {
    color: #e0e0e0 !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

/* The Tagline Pill (Gold) */
.cta-hero-style .hero-tagline {
    display: inline-block;
    background: #FDB813;
    color: #0a2e0e; /* Dark Text on Gold Background is OK */
    font-weight: 800;
    text-transform: uppercase;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.9rem;
    margin-bottom: 30px;
    letter-spacing: 2px;
    box-shadow: 0 5px 15px rgba(253, 184, 19, 0.4);
}

/* 4. Button Layout (Side-by-Side) */
.hero-btn-group {
    display: flex;
    gap: 30px; /* Space between buttons */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .cta-hero-style { padding: 60px 20px; }
    .cta-hero-style h2 { font-size: 2.2rem; }
    .hero-glass-console { padding: 40px 20px; }
    
    /* Stack buttons on phone */
    .hero-btn-group { flex-direction: column; gap: 20px; }
    .hero-btn { width: 100%; text-align: center; }
}













/* --- FIX: BUTTON GROUP LAYOUT --- */
.hero-btn-group {
    display: flex;
    gap: 25px; /* Space between buttons */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Stacks nicely on mobile */
    margin-top: 30px;
    width: 100%;
}

/* Ensure buttons don't touch on mobile */
@media (max-width: 600px) {
    .hero-btn-group {
        flex-direction: column;
        gap: 15px;
    }
    .hero-btn-group .hero-btn {
        width: 100%; /* Full width buttons on phone */
        text-align: center;
    }
}











/* --- CONTACT PAGE: ULTRA-GLASS & GAP FIX (FINAL) --- */

/* 1. GAP KILLER (The Fix) */
/* Forces the glass section to pull up and cover any theme gaps */
.contact-glass-section {
    margin-top: -50px !important; /* Pulls section up to eliminate white gap */
    padding-top: 130px; /* Adds internal space to compensate for the pull-up */
    padding-bottom: 100px;
    padding-left: 20px;
    padding-right: 20px;
    
    background: linear-gradient(135deg, #f9fbf9 0%, #ebf5ed 100%);
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* 2. VIVID ANIMATED BLOBS */
.blob-contact {
    position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0; opacity: 0.6;
}
.blob-c1 { width: 600px; height: 600px; background: #2E8B38; top: -100px; right: -200px; animation: blobFloatBlog 15s infinite alternate; }
.blob-c2 { width: 500px; height: 500px; background: #FDB813; bottom: -100px; left: -200px; animation: blobFloatBlog 12s infinite alternate-reverse; }
.blob-c3 { width: 300px; height: 300px; background: #0a2e0e; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.15; }

/* 3. GRID LAYOUT */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1200px;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* 4. CRYSTAL CARD DESIGN (Prism Effect) */
.contact-card {
    position: relative;
    /* Gradient Glass Background */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    
    /* White Border with Top Shine */
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-top: 2px solid rgba(255, 255, 255, 1);
    
    border-radius: 30px;
    padding: 50px 30px;
    text-align: center;
    
    /* Deep Shadow */
    box-shadow: 0 20px 50px rgba(0,0,0,0.05), inset 0 0 20px rgba(255,255,255,0.5);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

/* Hover Effect: Lift & Glow */
.contact-card:hover {
    transform: translateY(-15px) scale(1.02);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-color: #FDB813; /* Gold Border */
    box-shadow: 0 30px 60px rgba(46, 139, 56, 0.2); /* Green Glow */
}

/* 5. CONTENT STYLING */
.contact-icon {
    font-size: 3.5rem;
    margin-bottom: 25px;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.1));
    transition: transform 0.5s ease;
}
.contact-card:hover .contact-icon {
    transform: scale(1.2) rotate(10deg);
}

.contact-card h3 {
    color: #0a2e0e;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-card p {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 30px;
    font-family: 'Open Sans', sans-serif;
}

/* 6. ACTION BUTTON STYLING */
.card-link-btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    background: rgba(10, 46, 14, 0.05); /* Subtle Green */
    color: #0a2e0e;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(10, 46, 14, 0.1);
}

.card-link-btn:hover {
    background: #0a2e0e;
    color: #fff;
    box-shadow: 0 10px 20px rgba(10, 46, 14, 0.2);
}

/* 7. GLASS SHINE ANIMATION */
.glass-shine {
    position: absolute;
    top: 0; left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
}

.contact-card:hover .glass-shine {
    animation: shineMove 0.75s;
}

@keyframes shineMove {
    100% { left: 150%; }
}

/* Responsive */
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-glass-section { padding-top: 80px; margin-top: -30px !important; }
}








/* --- CRITICAL FIX: HOMEPAGE CTA BUTTON CONTRAST --- */
/* This specifically targets the "Ready to Make a Difference" dark section */

/* 1. FORCE "MAKE A DONATION" TO BE WHITE */
.cta-hero-style .hero-btn.glass-btn {
    color: #ffffff !important;             /* Bright White Text */
    border: 2px solid #ffffff !important;  /* Bright White Border */
    background: rgba(255, 255, 255, 0.1) !important; /* Slight transparency */
    opacity: 1 !important;
}

/* Hover State for Donation Button */
.cta-hero-style .hero-btn.glass-btn:hover {
    background: #ffffff !important;        /* Solid White Background */
    color: #0a2e0e !important;             /* Dark Green Text (Readable) */
    border-color: #ffffff !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important; /* White Glow */
}

/* 2. FORCE "PARTNER WITH US" TO BE RED/WHITE */
.cta-hero-style .hero-btn.primary-glow {
    color: #ffffff !important;             /* Bright White Text */
    background: linear-gradient(135deg, #CC2A1F 0%, #a02018 100%) !important;
}

.cta-hero-style .hero-btn.primary-glow:hover {
    background: #ffffff !important;
    color: #CC2A1F !important;             /* Red Text on White */
}















/* --- FINAL REPAIR: HOMEPAGE CTA BUTTONS --- */
/* This specifically forces the buttons in the Dark CTA section to behave */

/* 1. RESET BUTTON SHAPE & SIZE (Fixes the boxy look) */
.cta-hero-style .hero-btn {
    display: inline-block !important; /* Crucial for shape */
    padding: 18px 45px !important;    /* restore size */
    border-radius: 50px !important;   /* Force the PILL shape */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    margin: 10px !important;          /* Spacing between buttons */
}

/* 2. FIX "PARTNER WITH US" (RED) */
.cta-hero-style .hero-btn.primary-glow {
    background: linear-gradient(135deg, #CC2A1F 0%, #a02018 100%) !important;
    color: #ffffff !important;        /* Force White Text */
    border: 2px solid transparent !important; /* Stabilize size */
    box-shadow: 0 10px 25px rgba(204, 42, 31, 0.4) !important;
}

.cta-hero-style .hero-btn.primary-glow:hover {
    background: #ffffff !important;
    color: #CC2A1F !important;
    transform: translateY(-5px) !important;
}

/* 3. FIX "MAKE A DONATION" (GLASS/WHITE) */
.cta-hero-style .hero-btn.glass-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;        /* Force White Text */
    border: 2px solid #ffffff !important; /* Force White Border */
    box-shadow: none !important;
}

.cta-hero-style .hero-btn.glass-btn:hover {
    background: #ffffff !important;
    color: #0a2e0e !important;        /* Dark Green Text on Hover */
    border-color: #ffffff !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important; /* White Glow */
}










/* --- UNIVERSAL FULL-WIDTH BREAKOUT FIX --- */
/* This forces backgrounds to stretch screen-to-screen */
.full-width-breakout {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* 1. IDENTITY FLOATING BOX */
.identity-section { position: relative; z-index: 10; margin-top: -80px; padding: 0 20px; }
.mint-premium-box {
    background: #fff;
    border-radius: 30px;
    padding: 60px 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    max-width: 1000px;
    margin: 0 auto 80px auto;
    text-align: center;
}
.mint-header h2 { color: #0a2e0e; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; margin-bottom: 20px; }

/* 2. VMV SECTION (Vision Mission Values) */
.vmv-section { background: #f9fbf9; padding: 80px 0; }
.vmv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1100px; margin: 0 auto; }
.vmv-card {
    background: #fff; padding: 40px 30px; border-radius: 20px; border: 1px solid #eee; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.3s;
}
.vmv-card:hover { transform: translateY(-10px); border-color: #FDB813; }
.vmv-icon { font-size: 2.5rem; margin-bottom: 20px; }
.vmv-card h3 { color: #0a2e0e; font-weight: 700; margin-bottom: 15px; font-family: 'Montserrat', sans-serif; }
.values-tags span {
    display: inline-block; background: #fff8e1; color: #0a2e0e; padding: 5px 12px; border-radius: 15px;
    font-size: 0.8rem; margin: 3px; border: 1px solid #FDB813;
}

/* 3. STORY & WHY (Split Layouts) */
.story-section, .why-section { padding: 80px 0; background: #fff; }
.split-container {
    display: flex; align-items: center; gap: 60px; max-width: 1100px; margin: 0 auto;
}
.split-image img {
    border-radius: 20px; width: 100%; height: 400px; object-fit: cover; box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.split-content { flex: 1; }
.green-line-left { width: 5px; height: 50px; background: #2E8B38; margin-bottom: 20px; }
.red-line-left { width: 5px; height: 50px; background: #CC2A1F; margin-bottom: 20px; }
.split-content h2 { font-size: 2.5rem; font-family: 'Montserrat', sans-serif; font-weight: 800; margin-bottom: 25px; color: #2E8B38; }
.split-content p { font-size: 1.1rem; color: #555; line-height: 1.8; margin-bottom: 20px; }

/* 4. THEORY OF CHANGE (Green Full Width) */
.theory-section { 
    background: linear-gradient(135deg, #e3f0e5 0%, #f1f8f3 100%); 
    padding: 100px 0; 
}
.theory-header { text-align: center; margin-bottom: 60px; }
.theory-header h2 { color: #0a2e0e; font-size: 2.5rem; font-weight: 800; text-transform: uppercase; }

.theory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
.theory-card {
    background: rgba(255,255,255,0.6); backdrop-filter: blur(10px);
    padding: 30px 20px; border-radius: 20px; text-align: center; border: 1px solid #fff;
    transition: all 0.3s;
}
.theory-card:hover { background: #fff; transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.theory-num {
    width: 50px; height: 50px; background: #2E8B38; color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; margin: 0 auto 20px auto;
}
.theory-card h4 { color: #0a2e0e; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }

/* 5. INTERVENTION PYRAMID (Dark Full Width) */
.intervention-section { background: #0a2e0e; color: #fff; padding: 100px 0; text-align: center; }
.intervention-section h2 { color: #fff; font-weight: 800; font-size: 2.5rem; margin-bottom: 10px; }
.int-sub { color: #ccc; margin-bottom: 50px; font-size: 1.1rem; }

.pyramid-visual { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 800px; margin: 0 auto; }
.p-step {
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);
    padding: 15px; border-radius: 8px; color: #ddd; font-weight: 600; width: 100%;
}
.p1 { width: 40%; }
.p2 { width: 60%; }
.p3 { width: 80%; }
.p4.foundation {
    width: 100%; background: linear-gradient(135deg, #FDB813 0%, #d49605 100%);
    color: #0a2e0e; font-weight: 800; border: none; font-size: 1.1rem; padding: 25px;
    box-shadow: 0 0 30px rgba(253, 184, 19, 0.3);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .vmv-grid, .theory-grid { grid-template-columns: 1fr 1fr; }
    .split-container { flex-direction: column; }
    .reverse-mobile { flex-direction: column-reverse; }
    .split-image img { height: 250px; }
}
@media (max-width: 600px) {
    .vmv-grid, .theory-grid { grid-template-columns: 1fr; }
    .p1, .p2, .p3 { width: 100%; }
}











/* --- 3D CRYSTAL IDENTITY BOX --- */

.identity-section {
    position: relative;
    z-index: 10;
    margin-top: -90px; /* Pulls deeper into Hero for better layering */
    padding: 0 20px;
}

.mint-premium-box {
    position: relative;
    
    /* 1. DEPTH GRADIENT (Simulates curved glass) */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%);
    
    /* 2. HEAVY FROST */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    
    /* 3. PRISM BORDERS (Light Source Effect) */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-top: 2px solid rgba(255, 255, 255, 0.9); /* Bright Top Edge */
    border-left: 2px solid rgba(255, 255, 255, 0.9); /* Bright Left Edge */
    
    border-radius: 30px;
    padding: 70px 40px 50px 40px; /* Extra top padding for icon */
    max-width: 900px;
    margin: 0 auto 80px auto;
    text-align: center;
    
    /* 4. SOFT SHADOW */
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.1), 
        inset 0 0 20px rgba(255, 255, 255, 0.5); /* Inner Glow */
    
    transition: transform 0.3s ease;
}

.mint-premium-box:hover {
    transform: translateY(-5px); /* Subtle float on hover */
}

/* --- THE FLOATING ICON --- */
.identity-icon-wrapper {
    position: absolute;
    top: -40px; /* Floats half-in, half-out */
    left: 50%;
    transform: translateX(-50%);
    
    width: 80px;
    height: 80px;
    
    /* Glassy Gold Circle */
    background: linear-gradient(135deg, #FDB813 0%, #d49605 100%);
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Glow */
    box-shadow: 0 10px 30px rgba(253, 184, 19, 0.4);
}

.identity-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
    animation: floatIcon 3s ease-in-out infinite;
}

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

/* --- TYPOGRAPHY --- */
.mint-header h2 { 
    color: #0a2e0e; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 800; 
    text-transform: uppercase; 
    margin-top: 15px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* Gold Divider */
.gold-divider-small-center {
    width: 60px;
    height: 4px;
    background: #FDB813;
    margin: 0 auto 25px auto;
    border-radius: 2px;
}

.mint-content-text p {
    font-family: 'Open Sans', sans-serif;
    color: #222; /* Darker for better contrast on glass */
    font-size: 1.2rem;
    line-height: 1.7;
    font-weight: 500;
}












/* --- MAGNIFICENT VIVID GLASS FOOTER --- */

/* 1. CONTAINER & BACKGROUND */
.footer-breakout-wrapper {
    width: 100vw;
    position: relative;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    background: radial-gradient(circle at 80% 0%, #1a4d23 0%, #020f03 100%);
    color: #fff;
    border-top: 5px solid #FDB813;
    overflow: hidden;
    padding-top: 80px;
}

/* 2. THE GRID */
.footer-wide-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 0 5%;
    max-width: 1600px;
    margin: 0 auto 80px auto;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}

/* 3. VIVID GLASS CARD (The Core Style) */
.footer-vivid-card {
    /* Vivid Gradient Background */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
    
    /* Heavy Frost */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    
    /* Shining Borders (Prism Effect) */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.4); /* Bright Top */
    border-left: 1px solid rgba(255, 255, 255, 0.4); /* Bright Left */
    
    border-radius: 30px;
    padding: 50px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

.footer-vivid-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
}

/* Left Card Sizing */
.left-card { flex: 0 0 400px; }
/* Right Card Sizing */
.right-card { flex: 1; display: flex; justify-content: space-around; gap: 40px; }


/* 4. THE LOGO PRISM (Crystal Container) */
.logo-prism-wrapper {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 20px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 25px;
    box-shadow: 0 0 30px rgba(255,255,255,0.05);
    transition: all 0.3s;
}

.logo-prism-wrapper:hover {
    background: rgba(255,255,255,0.2);
    box-shadow: 0 0 40px rgba(255,255,255,0.15);
}

.footer-logo {
    max-width: 200px;
    height: auto;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
}

/* 5. TYPOGRAPHY (Crystalline Glow) */
.brand-mission {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.85); /* Brighter Text */
    margin-bottom: 30px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Slight depth */
}

.highlight-glass {
    color: #FDB813;
    font-weight: 700;
    text-shadow: 0 0 15px rgba(253, 184, 19, 0.4); /* Gold Glow */
}

.console-header {
    color: #FDB813;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    text-shadow: 0 0 20px rgba(253, 184, 19, 0.4); /* Strong Glow */
}

/* 6. LINKS & ICONS (Vibrant) */
.console-links a {
    color: #fff;
    opacity: 0.8;
    text-decoration: none;
    font-size: 1.1rem;
    display: block;
    transition: all 0.3s;
    text-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.console-links a:hover {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255,255,255,0.6); /* White Glow on Hover */
    transform: translateX(5px);
}

.console-contact li {
    margin-bottom: 18px;
    display: flex; gap: 15px;
    color: rgba(255,255,255,0.9);
    align-items: center;
}
.console-contact .icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); /* Glowing Emoji */
}

/* 7. SOCIAL ROW */
.custom-social-row { display: flex; gap: 15px; }

.social-circle {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: all 0.3s;
    box-shadow: 0 0 15px rgba(255,255,255,0.05);
}

.social-circle:hover {
    background: #FDB813;
    color: #0a2e0e;
    box-shadow: 0 0 25px rgba(253, 184, 19, 0.6); /* Vivid Gold Glow */
    transform: translateY(-5px);
    border-color: #FDB813;
}

/* 8. ANIMATED BACKGROUND */
.footer-glow-spot {
    position: absolute; top: -200px; left: 20%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(46, 139, 56, 0.3) 0%, transparent 70%);
    animation: glowMove 10s infinite alternate;
}
.footer-glow-spot-2 {
    position: absolute; bottom: -200px; right: 10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(253, 184, 19, 0.2) 0%, transparent 70%);
    animation: glowMove 15s infinite alternate-reverse;
}
@keyframes glowMove { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

/* COPYRIGHT */
.footer-bottom-bar {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 25px 0; text-align: center;
    background: rgba(0,0,0,0.3);
}
.footer-bottom-bar p { color: rgba(255,255,255,0.5); font-size: 0.85rem; margin: 0; }

/* MOBILE */
@media (max-width: 1024px) {
    .footer-wide-grid { flex-direction: column; padding: 0 20px; }
    .left-card, .right-card { flex: 1; width: 100%; }
    .right-card { flex-direction: column; gap: 30px; }
}













/* --- FORCE LEFT ALIGNMENT IN FOOTER --- */

/* 1. Target the internal groups */
.console-group {
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important; /* Forces items to the left edge */
}

/* 2. Target the links list specifically */
.console-links, 
.console-contact {
    text-align: left !important;
    padding-left: 0 !important;
    width: 100%;
}

/* 3. Ensure Logo Resizes properly */
.footer-logo {
    max-width: 100%;
    height: auto;
    display: block;
}












/* --- FIX: FORCE SOCIAL ICONS VISIBILITY --- */

/* 1. Force the container to be visible */
.custom-social-row {
    display: flex !important;
    gap: 15px !important;
    margin-top: 20px;
    position: relative;
    z-index: 10;
}

/* 2. Force the CIRCLE to show up */
.social-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 45px !important;
    height: 45px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50%;
    color: #fff !important; /* Sets the icon color */
    text-decoration: none !important;
}

/* 3. FORCE THE ICON (SVG) SIZE & COLOR */
.social-circle svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important; /* Prevents shrinking */
    fill: #ffffff !important;   /* Force White Color */
    display: block !important;
    opacity: 1 !important;
}

/* 4. HOVER EFFECT (Make sure it works) */
.social-circle:hover {
    background: #FDB813 !important;
    border-color: #FDB813 !important;
    transform: translateY(-3px);
}

.social-circle:hover svg {
    fill: #0a2e0e !important; /* Dark Green on Hover */
}











/* =======================================================
  APPROACH SYSTEM (ID-BASED FORCE FIX)
======================================================= */

/* 1. THE MAIN CONTAINER (Force Full Width & Remove Gaps) */
#vivid-approach-system {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%; 
    right: 50%; 
    margin-left: -50vw; 
    margin-right: -50vw;
    
    /* GAP KILLER: Aggressive negative margin to pull section up */
    margin-top: -90px !important; 
margin-bottom: -90px !important;
    padding-top: 50px !important;
    padding-bottom: 20px !important;
    
    background: linear-gradient(-45deg, #f0fdf4, #e6f9e9, #fffcf0, #ffffff);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
    overflow: hidden;
    z-index: 5;
}

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

/* 2. INNER CONTAINER */
#vivid-approach-system .approach-inner-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* 3. HEADER TYPOGRAPHY */
#vivid-approach-system .approach-header-main {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
}

#vivid-approach-system h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    color: #0a2e0e !important;
    font-size: 3rem !important;
    text-transform: uppercase;
    margin-bottom: 20px !important;
}

#vivid-approach-system .gold-line-center {
    width: 80px; height: 6px; 
    background: #FDB813; 
    margin: 0 auto 25px auto; 
    border-radius: 3px;
}

#vivid-approach-system p {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}

/* 4. ZIG-ZAG LAYOUT ENGINE */
#vivid-approach-system .approach-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important; /* Zero gap because we use negative margins */
    margin-bottom: 100px !important;
    position: relative;
}

/* 5. COLUMN SIZING */
#vivid-approach-system .approach-text-col {
    flex: 0 0 55%; /* Text takes 55% */
    position: relative;
    z-index: 10; /* Text sits ON TOP */
}

#vivid-approach-system .approach-img-col {
    flex: 0 0 50%; /* Image takes 50% */
    position: relative;
    z-index: 1;
}

/* 6. OVERLAP LOGIC (The "Zig Zag" Fix) */
.card-overlap-right {
    margin-right: -80px !important; /* Pulls text right over image */
}

.card-overlap-left {
    margin-left: -80px !important; /* Pulls text left over image */
}

/* 7. VIVID GLASS CARD */
#vivid-approach-system .vivid-glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid #fff;
    box-shadow: 0 30px 60px rgba(10, 46, 14, 0.15);
    padding: 50px 40px;
    border-radius: 20px;
    transition: transform 0.4s ease;
}

/* Gold Accents */
.card-overlap-right .vivid-glass-card { border-left: 6px solid #FDB813; }
.card-overlap-left .vivid-glass-card { border-right: 6px solid #FDB813; }

#vivid-approach-system .vivid-glass-card:hover {
    transform: translateY(-10px);
}

/* 8. TYPOGRAPHY INSIDE CARD */
.giant-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 4rem;
    color: rgba(10, 46, 14, 0.08);
    position: absolute;
    top: 20px; right: 30px;
    line-height: 1;
}

#vivid-approach-system .vivid-glass-card h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
    color: #0a2e0e !important;
    margin-bottom: 20px !important;
    text-transform: uppercase;
    padding-right: 40px;
}

/* 9. IMAGE FRAME */
#vivid-approach-system .vivid-img-frame {
    width: 100%;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

#vivid-approach-system .vivid-img-frame img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
}

#vivid-approach-system .approach-row:hover img { transform: scale(1.05); }

/* 10. MOBILE FIXES */
@media (max-width: 900px) {
    #vivid-approach-system .approach-row {
        flex-direction: column !important;
        margin-bottom: 60px !important;
    }
    
    #vivid-approach-system .approach-text-col,
    #vivid-approach-system .approach-img-col {
        flex: 1; width: 100%;
        margin: 0 !important; /* Reset overlaps */
    }
    
    /* Order: Image first */
    #vivid-approach-system .approach-img-col { order: 1; margin-bottom: -30px !important; }
    #vivid-approach-system .approach-text-col { order: 2; }
    
    #vivid-approach-system .vivid-glass-card {
        text-align: center;
        border-left: 1px solid #fff !important;
        border-right: 1px solid #fff !important;
        border-top: 5px solid #FDB813;
        padding: 30px;
    }
    
    #vivid-approach-system h2 { font-size: 2.2rem !important; }
    .giant-num { font-size: 3rem; position: static; display: block; margin-bottom: 10px; }
    #vivid-approach-system .vivid-glass-card h3 { padding-right: 0; }
}