body {
    font-family: 'Montserrat', sans-serif;
    /* Removed background color from body to allow subsequent sections to be styled */
}




/* --- VIDEO BACKGROUND STYLES --- */

.video-background {
    /* Set the default height for larger screens (e.g., 95vh) */
    position: relative;
    width: 100%;
    height: 95vh;
    min-height: 550px; /* Ensure a minimum height even if viewport is small */
    overflow: hidden;
}


#headerVideo {
    /* ... (CSS remains the same) ... */
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* --- THE SHARP DIVISION SOLUTION --- */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -99;
    
    /* Solid Overlay: Darken the video for text readability, now with a simple solid color */
    /* Adjust this color to match the desired darkness for the sharp separation */
    background: rgba(0, 0, 0, 0.6); /* A dark, semi-transparent black for a clear division */

    /* REMOVED: The linear-gradient that caused the blend */
    /* background-image: linear-gradient(...) is gone */
}

/* Ensure the feature section background is set to a solid black/dark color for the sharp visual break */

/* ------------------------------------- */


/* --- 1. Navigation Bar (Header) --- */
.transparent-navbar {
    background-color: transparent !important;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: background-color 0.4s;
}

/* Class added by JS on scroll (Optional but recommended) */
.scrolled-navbar {
    background-color: rgba(0, 0, 0, 0.9) !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-logo {
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffc107 !important;
}


.transparent-navbar .container-fluid {
    /* Use a standard padding for large screens (Bootstrap default is often 1.5rem/24px) */
    padding-left: 300px !important; 
    padding-right: 300px !important;
}

/* Nav links need to be light and highly visible against the video */
.transparent-navbar .nav-link {
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 600;
    margin-right: 15px;
    opacity: 1; /* Keep them bright */
}


/* ... (Remaining Navbar styles like .custom-login-btn, .custom-join-btn, etc., remain the same) ... */


/* --- 2. Hero Section (Support/Donation) --- */
.hero-section {
    position: absolute; /* Position content over the video */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 100px;
    z-index: 1;
}

/* .custom-hero-container {
    padding-left: 50px;
   
    padding-top: 5vh; 
} */

.custom-hero-container {
    padding-left: 50px;
    /* Adjusted to center content vertically on desktop */
    padding-top: 25vh; 
}

/* .custom-hero-container {
    padding-left: 50px;
    
    padding-top: 25vh; 
} */
/* ... (Remaining Hero styles remain the same) ... */


/* --- 3. Series/Video Feature Section --- */
.feature-section {
    background-color: #060101; /* This must match the gradient's ending color! */
    color: #fff;
    padding-top: 100px;
    padding-bottom: 100px;
}

/* --- PREMIUM BUTTON STYLES --- */

/* Base Styles for all Custom Buttons (for consistency) */
.custom-donate-btn,
.custom-watch-btn {
    /* Base appearance */
    border: none;
    font-weight: 700;
    border-radius: 50px; /* Slight rounding */
    padding: 12px 30px; /* Increased padding */
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    
    /* Transition for smooth effects */
    transition: all 0.3s ease;
    
    /* Subtle box shadow for depth (optional, remove if too much) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* 1. GIVE NOW Button (White/Light) */
.custom-donate-btn {
    background-color: #fff;
    color: #000;
}

.custom-donate-btn:hover {
    background-color: #f0f0f0; 
    color: #ff8c00; 
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px); 
}


/* 2. WATCH NOW Button (Orange/Yellow) */
.custom-watch-btn {
    /* Use a slight gradient for a richer look */
    background: linear-gradient(to right, #ffc107, #ff8c00); 
    color: #1f1f1f; /* Dark text for contrast */
}

.custom-watch-btn:hover {
    /* Reverse gradient direction or shift color for a hover effect */
    background: linear-gradient(to right, #ff8c00, #ffc107);
    color: #000;
    box-shadow: 0 6px 12px rgba(255, 140, 0, 0.4); /* Glow effect shadow */
    transform: translateY(-2px);
}
/* ... (Remaining Feature/Welcome styles remain the same) ... */
.mobile-close-bar {
    display: none; /* Hidden by default on desktop */
}

/* Ensure the Bootstrap close button is white/visible */
.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%); /* Makes the button white */
}



/* start welcome section */
/* --- 4. Welcome/Text Content Section Alignment Fix --- */
.welcome-section {
    background-color: #fff; 
    /* padding-top: 90px !important; */
    padding-top: 100px !important;
    /* padding-bottom: 80px; */
    padding-bottom: 100px !important;
    
}



.custom-text-columns {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.custom-text-columns p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
    
    /* THE FIX: Apply Justify Alignment */
    text-align: justify; 
    
    /* Optional: Improves how the browser breaks lines for justify alignment */
    text-rendering: optimizeLegibility; 
}

/* Ensure the links within the section are still left-aligned if necessary */
.custom-read-more {
    color: #e78548; 
    font-weight: 600;
    text-decoration: none;
    margin-top: 20px;
    display: inline-block;
    /* Ensure the link text alignment is standard */
    text-align: center; /* Since the main section is text-center */
}
      /* =================================================== */
/* 5. NEW: HERO IMAGE SECTION (A Place For You) */
/* =================================================== */
/* .hero-image-section {
    position: relative;
    height: 60vh; 
    background: url('assets/images/h2.jpg') center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 100px ;
    padding-bottom: 50px;
    
} */
.hero-image-section {
    position: relative;
    height: 60vh; 
    background: url('static/assets/images/h2.jpg') center center/cover no-repeat;
    display: flex;
   
    align-items: center; 
    justify-content: center;
    text-align: center;
   
    padding-top: 0; 
    padding-bottom: 0;
}

/* 2. NARROW CONTENT FIX (Fixes Left/Right Distance) */
.hero-image-content.narrow-content {
    /* *** THIS IS THE CRITICAL PART *** */
    /* Set a maximum width for the text block (e.g., 700px or 60% of the screen) */
    max-width: 1000px; 
    /* Ensures the narrow block stays centered */
    margin: 0 auto; 
    
    /* Also include some horizontal padding for smaller screens if needed */
    padding-left: 20px;
    padding-right: 20px;
}

.hero-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
}

.hero-image-content {
    z-index: 2;
}

.hero-image-content h2 {
    /* Use a large font size to match the visual weight */
    font-size: 2rem; 
}

.hero-image-content .small-text {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 10px;
}


/* =================================================== */
/* 7. NEW: NEWS SECTION (Latest News) */
/* =================================================== */
.latest-news-section {
    background-color: #fff;
    padding-top: 80px;
    padding-bottom: 80px;
}

.news-card img {
    border-radius: 4px;
}

.news-subtitle {
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 10px;
    margin-bottom: 5px;
}

.news-excerpt {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    min-height: 70px; /* Ensures card heights are roughly similar */
}

.news-read-more {
    color: #ff8c00;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

/* =================================================== */
/* 8. NEW: MEMBER/FOOTER SECTION */
/* =================================================== */
.member-section {
    background-color: #1f1f1f; /* Matches the feature section dark color */
    padding: 30px 0;
}

.member-section .social-icon {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 5px 10px;
    margin-left: 10px;
    text-decoration: none;
    font-size: 0.8rem;
}


@media (max-width: 767.98px) {
    /* Reduce top/bottom padding on mobile */
    .testimonial-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* Testimonial Section - Image */
    .testimonial-img {
        /* Smaller image size on mobile */
        width: 120px;
        height: 120px;
        /* Center image on mobile */
        margin-top: 15px;
    }

    /* Testimonial Section - Content */
    .testimonial-content {
        /* Center content on mobile */
        text-align: center;
        margin-top: 15px;
        /* Remove left padding on mobile */
        padding-left: 15px;
    }

    /* Adjust space between text and name/title on mobile */
    .testimonial-content .small-text {
        margin-bottom: 15px !important;
    }

    /* Smaller font for body copy on mobile */
    .testimonial-text {
        font-size: 0.9rem;
    }
}

/* --- Media Queries (Responsiveness) --- */

/* Adjustments for smaller screens (e.g., tablet and below) */
@media (max-width: 991.98px) {
    /* ... (Navbar auth button adjustments remain the same) ... */

    /* Hero Section (Video Height Adjustment) */
    .video-background {
        /* INCREASED HEIGHT: from 60vh to 70vh for mobile/tablet */
        height: 70vh;
        /* INCREASED MIN-HEIGHT: from 400px to 450px */
        min-height: 450px;
    }

    .custom-hero-container {
        padding-left: 15px;
        text-align: center;
        /* Slightly adjust centering due to new height */
        padding-top: 10vh; 
    }
    
    .side-circle {
        display: none;
    }
    /* ... (Remaining Hero styles remain the same) ... */
    /* 1. Add a solid background to the expanded menu */
    .navbar-collapse {
        /* Use a dark, semi-transparent background for contrast against the video */
        background-color: rgba(0, 0, 0, 0.95); 
        /* Add some padding for visual spacing */
        padding: 15px 20px;
        /* Optional: Add a subtle border or box shadow */
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
    }
    
    /* 2. Style the individual links for better visibility */
    .transparent-navbar .navbar-nav .nav-item {
        margin: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator line */
    }
    
    .transparent-navbar .nav-link {
        /* Ensure links are bright white */
        color: #fff !important; 
        padding-left: 0 !important;
    }
    
    /* 3. Adjust the Authentication Buttons on the mobile menu */
    .custom-auth-buttons {
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        flex-direction: row !important; /* Keep buttons side-by-side or stack if needed */
        justify-content: start;
        align-items: center;
    }
    
    .custom-login-btn, .custom-join-btn {
        width: auto;
        margin-right: 10px;
        margin-bottom: 0;
    }

        /* ... (Existing mobile styles for .navbar-collapse remain here) ... */

    /* Make the close button bar visible and position it */
    .mobile-close-bar {
        display: flex; /* Show the container on mobile */
        justify-content: flex-end; /* Push the button to the right */
        align-items: center;
        width: 100%;
        padding-bottom: 10px; /* Space below the button */
    }

    /* Remove the default mobile menu padding from the top, 
       as the close button now takes up that space */
    .navbar-collapse {
        padding-top: 5px; 
        /* ... (rest of mobile styles) ... */
    }
    
    /* Ensure the mobile links still have proper top padding after the close button */
    .custom-menu-bar {
        padding-top: 10px; 
    }
    

    .hero-image-content h2 {
        /* You might keep it at 2rem or slightly reduce it for smaller tablets */
        font-size: 1.8rem;
    }
    
    .hero-image-content.narrow-content {
        /* Ensures the 20px padding is in effect */
        padding-left: 20px;
        padding-right: 20px;
    }
    
   
    
}



@media (min-width: 992px) { 
    
    .hero-image-content.narrow-content {
        /* Your requested max-width for large screens */
        max-width: 1000px; 
        
        /* The max-width now handles the space, so we can remove the horizontal padding
           or keep it at 20px if you want a total of 1000px + 20px on each side.
           The most common approach is to set padding to 0 when max-width is active: */
        padding-left: 0;
        padding-right: 0;
    }
    
    .hero-image-content h2 {
        /* You may want to increase the font size slightly on desktop for impact */
        font-size: 2rem; /* Increased from 2rem for visual weight */
    }
}
/* =================================================== */
/* Responsive Adjustments for New Sections */
/* =================================================== */
/* @media (max-width: 767.98px) {
    
    
    .testimonial-img {
        width: 100px;
        height: 100px;
    }

    .testimonial-content {
        text-align: center;
        margin-top: 15px;
    }
    
    
    .news-excerpt {
        min-height: auto; 
    }

    .latest-news-section .btn-outline-dark {
        width: 100%;
    }

    
    .member-section .container {
        flex-direction: column;
        text-align: center;
    }

    .member-section div:last-child {
        margin-top: 15px;
    }
} */






@media (max-width: 991.98px) {
    /* ... (other mobile styles) ... */

    .transparent-navbar .container-fluid {
        /* Smaller padding on mobile */
        padding-left: 15px !important; 
        padding-right: 15px !important;
    }
    
    /* Ensure the mobile menu respects the padding */
    .navbar-collapse {
        /* The mobile menu is generally full-width but should look nice inside the padding */
        /* Adjust the horizontal padding if necessary, but keep the vertical as is */
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* --- Responsive Styles (For Mobile) --- */
/* --- Responsive Styles (Mobile) --- */
/* @media (max-width: 767.98px) {
    
    .testimonial-section {
        padding-top: 50px !important; 
        padding-bottom: 50px !important;
    }

   
    .testimonial-img {
        width: 140px;
        height: 140px;
        margin-top: 15px;
    }

    
    .testimonial-content {
        text-align: center;
        margin-top: 15px;
        padding-left: 15px;
    }

    
    .testimonial-content .small-text {
        margin-bottom: 15px !important;
    }

    
    .testimonial-text {
        font-size: 0.9rem;
    }
    
    .social-icons-group {
        margin-top: 20px; 
        margin-bottom: 0;
    }
} */