/* --- 1. Branding Colors & Fonts --- */
:root {
    --color-primary-purple: #5F379F;
    --color-action-purple: #8A60B3;
    --color-accent-gold: #FFC72C;
    --color-neutral-light: #F5F5F5;
    --color-text-dark: #1A1A1A;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* --- Base & Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    line-height: 1.6;
    background-color: #F3E5F5;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    color: var(--color-primary-purple);
    line-height: 1.2;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

}

a {
    text-decoration: none;
    color: var(--color-primary-purple);
    transition: color 0.3s;
}

a:hover {
    color: var(--color-action-purple);
}

.accent {
    color: var(--color-accent-gold);
}

/* --- CTA Buttons --- */
.cta-button {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
    font-size: 0.9rem;
}

.primary-cta,
.primary-cta-nav {
    background-color: var(--color-accent-gold);
    color: var(--color-text-dark);
    border: 2px solid var(--color-accent-gold);
}

.primary-cta:hover,
.primary-cta-nav:hover {
    background-color: var(--color-primary-purple);
    color: white;
    border-color: var(--color-primary-purple);
}

.secondary-cta {
    background-color: var(--color-accent-gold);
    color: black;
    border: 2px solid var(--color-accent-gold);
}

.secondary-cta:hover {
    background-color: var(--color-action-purple);
    border-color: var(--color-action-purple);
}

/* --- Header & Navigation --- */
header {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;

}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.logo a {
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-links {
    display: flex;
    gap: 25px;
    align-items: center;
}

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

/* Dropdown styling */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: var(--color-text-dark) !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-weight: 400;
}

.dropdown-content a:hover {
    background-color: var(--color-neutral-light);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.hamburger-menu {
    display: none;
    /* Hidden on desktop */
    font-size: 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-primary-purple);
}

/* --- Main Sections Layout --- */

/* Hero */
.hero {
    background-color: var(--color-neutral-light);
    padding: 80px 0;
}

.hero .container {
    display: flex;
    align-items: center;
    gap: 40px;
}

.hero-content {
    flex: 1;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.sub-headline {
    font-size: 1.25rem;
    margin-bottom: 30px;
    color: #4a4a4a;
}

/* --- 1. FULL-WIDTH IMAGE DISPLAY (Top Section) --- */
.hero-image-section {
    /* Set the background image (full width) */
    background-image: url('schools and age/groupie.jpg');
    /* REPLACE with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Set a fixed height for the image area */
    height: 450px;

    /* Optional: Add a subtle linear gradient overlay for fade effect */
    background-color: #f0f0f0;
    /* Fallback color */
    background-blend-mode: multiply;

    /* Optional: Add a light fade to the bottom to transition into the text section */
    box-shadow: inset 0 -50px 50px -50px rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 1;
}

/* --- 2. TEXT CONTENT SECTION (Bottom Section) --- */
.hero-content-section {
    padding: 40px 0 80px 0;
    /* Padding above and below the content */
    background-color: #ffffff;
    /* Use your main content background color */

    /* Pull the section up slightly to touch the image (optional) */
    margin-top: -1px;
    z-index: 2;
    position: relative;
}

.hero-content {
    /* Center text content horizontally within the container */
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    /* Center the text */
    color: var(--color-text-dark);
    /* Ensure text is readable */
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-content .sub-headline {
    margin-bottom: 2rem;
    font-size: 1.25rem;
}

/* --- RESPONSIVENESS --- */
@media (max-width: 768px) {
    .hero-image-section {
        height: 300px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content-section {
        padding: 30px 0 60px 0;
    }
}

/* Core Mission */
.core-mission {
    padding: 60px 0;
    text-align: center;
}

.core-mission h2 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.core-mission>p {
    max-width: 800px;
    margin: 0 auto 40px;
}

.pillars {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.pillar {
    flex-basis: 30%;
    padding: 20px;
    background-color: var(--color-neutral-light);
    border-radius: 8px;
}

.pillar h3 {
    margin-bottom: 10px;
    font-size: 1.15rem;
}


/* Programmes and Gallery Section */
.programmes-gallery {
    padding: 60px 0;
    background-color: var(--color-neutral-light);
}

.programmes-gallery .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two columns for showcase and gallery */
    gap: 60px;
}

.programme-showcase h2,
.gallery-section h2 {
    margin-bottom: 20px;
}

.programme-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.programme-cards .card {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.programme-cards h3 {
    color: var(--color-primary-purple);
    margin-bottom: 5px;
}

/* Gallery Specifics */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gallery-item {
    height: 150px;
    background-color: var(--color-primary-purple);
    /* Placeholder for images */
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 0.8rem;
}

/* Trust Signals */
.trust-signals {
    padding: 60px 0;
    text-align: center;
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
    margin-bottom: 60px;
}

.stat .number {
    font-size: 3rem;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.stat p {
    max-width: 200px;
    margin: 0 auto;
}

.testimonial-block {
    max-width: 700px;
    margin: 0 auto;
    background-color: var(--color-neutral-light);
    padding: 30px;
    border-left: 5px solid var(--color-accent-gold);
    border-radius: 5px;
}

.testimonial-block blockquote {
    font-style: italic;
    font-size: 1.1rem;
    color: #4a4a4a;
}

/* Final Conversion */
.final-conversion {
    padding: 60px 0;
    background-color: var(--color-primary-purple);
}

.final-conversion .container {
    display: flex;
    justify-content: space-around;
    gap: 40px;
}

.conversion-box {
    text-align: center;
    background-color: white;
    padding: 40px;
    border-radius: 8px;
    flex: 1;
}

.conversion-box h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--color-primary-purple);
}

.conversion-box p {
    margin-bottom: 20px;
}

/* --- Footer --- */
footer {
    background-color: var(--color-text-dark);
    color: white;
    padding: 20px 0;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

footer a {
    color: var(--color-accent-gold);
}

/* --- Media Queries for Responsiveness --- */
@media (max-width: 1024px) {
    .programmes-gallery .container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero .container {
        flex-direction: column;
        text-align: center;
    }

    .hero-image {
        width: 100%;
    }

    .pillars,
    .stats-grid,
    .final-conversion .container {
        flex-direction: column;
        gap: 20px;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: white;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    }

    .nav-links.active {
        display: flex;
    }

    .hamburger-menu {
        display: block;
    }

    .primary-cta-nav {
        display: none;
    }
}

/* --- ABOUT PAGE SPECIFIC STYLES --- */

.page-hero {
    background-color: var(--color-primary-purple);
    color: white;
    padding: 60px 0;
    text-align: center;
}

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

.page-hero .sub-headline {
    color: var(--color-neutral-light);
    max-width: 800px;
    margin: 10px auto 0;
}

.page-content {
    padding: 60px 0;
}

.bg-light {
    background-color: var(--color-neutral-light);
}

.section-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
    text-align: center;
}

.page-content p {
    max-width: 900px;
    margin: 0 auto 30px;
    text-align: center;
}

/* Team Grid */
.team-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    margin-bottom: 40px;
}

.team-member {
    flex-basis: 30%;
    padding: 20px;
    border: 1px solid var(--color-neutral-light);
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.team-member h3 {
    color: var(--color-accent-gold);
    margin-bottom: 5px;
}

/*impcact on home*/
.text-center {
    margin-top: 20px;
}


/* Program List */
.program-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.program-item {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-top: 5px solid var(--color-action-purple);
}

.program-item h3 {
    margin-bottom: 10px;
}

/* Impact Areas */
.impact-areas {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.impact-box {
    flex-basis: 30%;
    background-color: var(--color-neutral-light);
    padding: 30px;
    border-radius: 8px;
    border-bottom: 4px solid var(--color-accent-gold);
}

.impact-box h3 {
    color: var(--color-primary-purple);
    margin-bottom: 10px;
}

/* Responsive adjustments for About Page */
@media (max-width: 768px) {

    .team-grid,
    .impact-areas {
        flex-direction: column;
        gap: 20px;
    }
}

/* --- PARTNERS PAGE SPECIFIC STYLES --- */

/* Value Propositions */
.value-propositions {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    margin-bottom: 40px;
}

.value-box {
    flex-basis: 30%;
    padding: 30px;
    background-color: var(--color-neutral-light);
    border-radius: 8px;
    border-right: 5px solid var(--color-action-purple);
    text-align: left;
}

.value-box h3 {
    color: var(--color-primary-purple);
    margin-bottom: 10px;
    font-size: 1.25rem;
}

/* Tiered Opportunities */
.tier-list {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    margin-bottom: 40px;
    text-align: left;
}

.tier-box {
    flex-basis: 30%;
    padding: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tier-box h3 {
    color: var(--color-accent-gold);
    border-bottom: 2px solid var(--color-primary-purple);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.tier-box ul {
    list-style: disc inside;
    padding-left: 0;
    margin-top: 15px;
}

.tier-box ul li {
    margin-bottom: 5px;
}

/* Logo Grid (Hall of Support) */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    padding: 40px 0;
    margin-bottom: 40px;
    border-top: 1px solid var(--color-neutral-light);
}

.logo-placeholder {
    height: 4 0px;
    background-color: var(--color-neutral-light);
    border: 1px dashed var(--color-primary-purple);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-dark);
    font-size: 0.9rem;
    border-radius: 5px;
}

.conversion-end {
    padding: 40px;
    background-color: var(--color-primary-purple);
    color: white;
    border-radius: 8px;
}

.conversion-end h3 {
    color: var(--color-accent-gold);
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.conversion-end p {
    color: white;
    margin-bottom: 25px;
}

/* Responsive adjustments for Partners Page */
@media (max-width: 900px) {

    .value-propositions,
    .tier-list {
        flex-direction: column;
        gap: 20px;
    }

    .value-box,
    .tier-box {
        flex-basis: 100%;
        text-align: center;
    }

    .tier-box ul {
        text-align: left;
        margin: 0 auto;
        max-width: 400px;
    }
}

/* --- BLOG PAGE SPECIFIC STYLES --- */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.blog-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card-image-placeholder {
    height: 200px;
    background-color: var(--color-neutral-light);
    border-bottom: 4px solid var(--color-accent-gold);
    /* Accent line for visual separation */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-primary-purple);
    font-size: 0.9rem;
    font-weight: 600;
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    font-size: 1.35rem;
    margin: 10px 0;
    color: var(--color-primary-purple);
}

.card-content p {
    font-size: 0.95rem;
    color: #4a4a4a;
    margin-bottom: 15px;
    text-align: left;
    /* Override global page-content p center alignment */
}

/* Category Tags */
.category {
    display: inline-block;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 3px;
    color: white;
    text-transform: uppercase;
}

.category.impact {
    background-color: var(--color-action-purple);
}

.category.sport {
    background-color: var(--color-accent-gold);
    color: var(--color-text-dark);
}

.category.mentorship {
    background-color: var(--color-primary-purple);
}

.category.news {
    background-color: #555;
}

/* A simple gray for general news */

.read-more {
    font-weight: 700;
    color: var(--color-accent-gold);
    display: inline-block;
}

.read-more:hover {
    color: var(--color-action-purple);
}

.load-more-area {
    text-align: center;
    padding: 30px 0;
}

/* --- Logo Image Styling --- */
.logo img {
    height: 80px;
    /* Adjust height to fit the navbar comfortably */
    width: auto;
    display: block;
}

/* Ensure the text logo styling is removed if the image is used */
.logo a {
    /* Remove the font size styling previously used for text logo */
    font-size: initial;
    font-weight: initial;
}

/* --- Team Directory Specific Styles --- */

.team-directory {
    display: grid;
    /* Two columns on desktop, allowing the content to flow cleanly */
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
    margin-top: 40px;
}

.team-profile-card {
    display: flex;
    gap: 25px;
    padding: 25px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-left: 5px solid var(--color-action-purple);
}

.profile-image-placeholder {
    width: 150px;
    min-width: 150px;
    height: 150px;
    background-color: var(--color-neutral-light);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--color-accent-gold);
    color: var(--color-primary-purple);
    font-size: 0.75rem;
    text-align: center;
}

.profile-details {
    flex-grow: 1;
}

.profile-details h3 {
    color: var(--color-primary-purple);
    font-size: 1.35rem;
    margin-bottom: 5px;
}

.profile-details .role {
    color: var(--color-accent-gold);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.profile-details .bio {
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
    /* Ensure bio text is left-aligned within the card */
    margin: 0;
    /* Override global paragraph margin */
}

/* Responsive adjustment for Team Directory */
@media (max-width: 768px) {
    .team-directory {
        grid-template-columns: 1fr;
        /* Single column on mobile */
    }

    .team-profile-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-details .bio {
        text-align: center;
    }
}

/* --- FOUNDATION SECTION (Vision, Mission, Goals, Values) --- */

.foundation {
    padding: 60px 0;
    text-align: center;
}

.foundation-grid {
    display: grid;
    /* Use 2 columns on desktop for better readability, 4 is too crowded */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.foundation-box {
    padding: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    text-align: left;
    min-height: 100%;
    /* Ensures boxes stretch if one has less content */
    display: flex;
    flex-direction: column;
}

.foundation-box h3 {
    color: var(--color-action-purple);
    font-size: 1.5rem;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--color-accent-gold);
}

.foundation-box p {
    margin-bottom: 0;
    text-align: left;
    /* Overriding the global centered paragraph style */
    max-width: none;
}

.goal-list,
.values-list {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.goal-list li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    font-size: 0.95rem;
}

.goal-list li::before {
    content: "●";
    /* Simple bullet */
    color: var(--color-primary-purple);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.values-list li {
    font-weight: 600;
    color: var(--color-primary-purple);
    font-size: 1.1rem;
    padding: 5px 0;
}

/* Responsive adjustment for Foundation Grid */
@media (max-width: 900px) {
    .foundation-grid {
        grid-template-columns: 1fr;
        /* Single column on tablets/mobile */
    }
}

/* --- Navigation Hover Effects --- */

/* 1. Base style adjustment for smooth transitions */
.nav-links a,
.dropbtn {
    /* Ensure all links and buttons have a smooth transition */
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 6px;
    /* Slightly rounded corners for the hover background */
    padding: 10px 15px;
    /* Increase padding to give the hover background space */
    margin: 0 5px;
    /* Add small space between links */
}

/* 2. Hover effect for primary navigation links (Home, Our Friends, Blog) */
.nav-links a:hover {
    background-color: var(--color-action-purple);
    color: white !important;
    /* Override default link color for contrast */
}

/* 3. Hover effect for the Dropdown button ("About") */
.dropbtn:hover {
    background-color: var(--color-action-purple);
    color: white !important;
}

/* 4. Hover effect for links inside the dropdown menu */
.dropdown-content a {
    transition: background-color 0.3s ease;
    /* Ensure dropdown links also transition smoothly */
}

.dropdown-content a:hover {
    background-color: var(--color-accent-gold);
    /* Use the gold accent color */
    color: var(--color-primary-purple) !important;
    /* Use purple text for contrast on gold */
}

/* Fix for the initial state of the dropdown button to align with main links */
.dropbtn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    /* --- NEW STYLES FOR CONSISTENCY --- */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    /* Inherit the main navigation color */
    line-height: normal;
    /* Ensure clean vertical alignment */
    text-align: center;
    /* ----------------------------------- */
}

/* STICKY HEADER STYLES */
header {
    /* Ensure the header stays at the top when scrolling */
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Keep it above other content */
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Styles applied when the 'scrolled' class is added by JavaScript */
header.scrolled {
    background-color: rgba(247, 243, 245, 0.98);
    /* Slightly transparent white background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    /* You could also slightly reduce padding/height here if desired */
}

/* --- Gallery Specific Layout & Styling --- */
.gallery-section {
    padding: 40px 0;
    border-bottom: 1px solid var(--color-light);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.gallery-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--shadow-small);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-medium);
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.image-caption {
    background-color: var(--color-primary-dark);
    color: #fff;
    padding: 10px;
    font-size: 0.9em;
    text-align: center;
}

.gallery-title {
    color: var(--color-secondary);
    font-size: 1.8em;
    margin-bottom: 10px;
    border-left: 5px solid var(--color-primary);
    padding-left: 15px;
    margin-top: 40px;
}

/* ADJUSTMENT: Increased vertical space on the final CTA */
#conversion-cta {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* --- Contact Page Specific Styling & Layout --- */

/* Main Grid Layout for the contact section */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 0;
}

@media (min-width: 900px) {
    .contact-grid {
        grid-template-columns: 2fr 1fr;
        /* Form takes 2/3, Details take 1/3 on desktop */
    }
}

/* Contact Form Styling */
.contact-form-container {
    background-color: var(--color-light);
    /* Light background for the form area */
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-secondary);
    font-size: 0.95em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.2);
}

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

.form-actions {
    text-align: right;
}

/* Contact Details Styling */
.contact-details-box {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-small);
}

.contact-details-box h3 {
    color: var(--color-primary-dark);
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-light);
}

.contact-item {
    margin-bottom: 25px;
    padding: 15px;
    border-left: 5px solid var(--color-primary);
    background-color: plum;
    border-radius: 4px;
}

.contact-item strong {
    display: block;
    font-size: 1.1em;
    margin-bottom: 5px;
}

/* --- READ MORE STYLES --- */

/* CRITICAL: This limits the initial height of the content. 
If this is missing or incorrect, the text will not hide.
*/
.collapsible-content {
    /* Set a visible height (e.g., about 3 lines of text) */
    max-height: 5em;
    overflow: hidden;
    /* Smooth transition for expansion */
    transition: max-height 0.5s ease-in-out;
    position: relative;
    padding-bottom: 0.5rem;
}

/* Gradient overlay to indicate truncation, use your box background color (#ffffff) */
.collapsible-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    /* Assuming impact-box background is white */
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* State when expanded */
.collapsible-content.expanded {
    max-height: 2000px;
    /* Large enough value to show all content */
    padding-bottom: 0;
}

/* Remove gradient when expanded */
.collapsible-content.expanded::after {
    content: none;
}

/* Style for the new <a> tag anchor */
.read-more {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    color: var(--color-accent-gold);
    margin-top: 0.5rem;
    /* Reduced margin to bring it closer to the text */
    transition: color 0.3s;
}

.read-more:hover {
    color: var(--color-primary-purple);
    text-decoration: underline;
}

.long-bio {
    margin-top: 1rem;
}

/* Styles for Impact Box Images */
.impact-image-wrapper {
    width: 100%;
    /* Image wrapper takes full width of the box */
    height: 180px;
    /* Fixed height for consistency, adjust as needed */
    overflow: hidden;
    /* Hide any overflow if the image is larger */
    border-radius: 0.75rem;
    /* Match parent box border-radius, or adjust */
    margin-bottom: 1rem;
    /* Space between image and title */
    background-color: #e0e0e0;
    /* Placeholder background while image loads */
}

.impact-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure image covers the area without distortion */
    object-position: center;
    /* Center the image within its container */
    display: block;
    /* Remove any extra space below the image */
}

/* You might want to adjust existing .impact-box padding or margin-top 
   if the image feels too cramped */
.impact-box {
    /* ... existing styles ... */
    text-align: left !important;
    padding: 1rem;
    /* Slightly reduced padding to make space for the image */
    border-top: none;
    /* We will move the border to the image wrapper or remove it */
}

/* Optional: If you want a top border like before, apply it to the image wrapper or a pseudo-element */
.impact-image-wrapper {
    /* ... existing styles ... */
    border-top-left-radius: 0.75rem;
    /* Match box radius */
    border-top-right-radius: 0.75rem;
    /* Match box radius */
    border-top: 5px solid var(--color-primary-purple);
    /* Re-add the top border here if desired */
}

/* --- Alignment Change for Impact & Projects Section --- */

#impact .section-title {
    /* Left-align the main heading */
    text-align: left !important;
}

#impact .container>p {
    /* Target the descriptive paragraph right below the heading */
    text-align: left !important;
    /* Remove center-aligning margins if they were used (like mx-auto in Tailwind) */
    margin-left: initial !important;
    margin-right: initial !important;
    max-width: none !important;
}

/* --- New Composite Logo Styling --- */
.logo-showcase {
    /* Ensures the container respects any max-width */
    margin: 40px auto;
    max-width: 900px;
    /* Adjust this max-width to control the image size */
}

.composite-logos {
    /* Ensure the image is fully responsive */
    width: 100%;
    height: auto;
    display: block;
    /* Optional: Add a slight border or subtle shadow for definition */
    border: 1px solid var(--color-neutral-border);
    border-radius: 8px;
    padding: 10px;
}

/* Cleanup: Remove old grid styles if they are no longer needed */
/* Remove or comment out the following old rules from style.css: */
/*
.logo-grid { ... }
.logo-placeholder { ... }
*/
/* Use the unique class to load the specific background image for this page */
.partnership-hero {
    background-image: url('gbv/press.jpg');
    /* REPLACE with your partners page image path */
}

/* --- HERO CAROUSEL STYLING (Replacing/Augmenting .hero-image-section) --- */

.carousel-container {
    position: relative;
    /* max-width is essential for manual carousels */
    max-width: 900px;
    margin: 40px auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Hero carousel might use width: 100% and no max-width if desired, but this is a safe default */
}

/* This container acts as the 'window' */
.carousel-viewport {
    overflow: hidden;
    /* CRUCIAL: Hides slides outside the viewport */
    border-radius: 8px;
    /* Use a fixed height or aspect-ratio for consistency */
    height: 450px;
    /* Use for the Hero Section (or your desired height) */
    /* If you prefer aspect ratio: aspect-ratio: 16 / 9; height: auto; */
}

.carousel-track {
    /* CRITICAL: Use display: flex to align slides horizontally */
    display: flex;
    /* The track holds all slides horizontally. width will be implicitly wide */
    width: fit-content;
    height: 100%;
    /* CRITICAL: Allows JavaScript to control movement smoothly */
    transition: transform 0.5s ease-in-out;

    /* REMOVE: overflow-x: scroll; and scroll-snap-type: x mandatory; */

    /* Hero Carousel adjustment (since the track had position: absolute previously) */
    position: relative;
    left: 0;
}

.carousel-slide {
    /* CRITICAL: Must take up exactly the width of the visible viewport */
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-slide img {
    /* Ensure the image fills the slide area */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 1. Container for the image within the post */
.single-post-page .post-image {
    /* Ensures the image doesn't exceed the defined width of the article container (800px max) */
    max-width: 100%;
    margin: 25px 0;
    /* Adds spacing above and below the image */
    display: block;
    /* Optional: Adds a subtle shadow for depth */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    /* Smooth corners */
    overflow: hidden;
    /* Ensures image corners match the container corners */
}

/* 2. Image inside the container */
.single-post-page .post-image img {
    width: 100%;
    /* Makes the image fill its container */
    height: auto;
    /* Maintains the aspect ratio */
    display: block;
}

/* 3. Ensures the overall article content has a good reading width */
.single-post-page .post-container {
    max-width: 800px;
    /* Adjust for a comfortable reading width, same as before */
    margin: 0 auto;
    padding: 20px 15px;
}



.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px 15px;
    font-size: 0.9em;
    text-align: center;
}

/* --- Navigation Buttons (The correct absolute positioning) --- */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Use your preferred styling here (I've included the clean one) */
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 2em;
    line-height: 1;
    transition: background 0.2s;
    border-radius: 4px;
}

.prev-btn {
    left: 10px;
    border-radius: 0 4px 4px 0;
}

.next-btn {
    right: 10px;
    border-radius: 4px 0 0 4px;
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}


/* --- VIDEO SECTION STYLING (For blog.html) --- */

.video-grid {
    display: grid;
    /* 3 columns on large screens, 1 column on small screens */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.video-item {
    background-color: #f7f7f7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.video-caption {
    padding: 15px;
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    text-align: center;
}

/* Responsive Video Container (Crucial for YouTube embeds) */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio (9 / 16 * 100) */
    height: 0;
    overflow: hidden;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- SINGLE POST PAGE READABILITY FIX --- */

/* This rule targets the main content wrapper on the single post pages */
.single-post-page .post-container {
    /* Ensures the main text content is justified on the left (the default and most readable format) */
    text-align: left;
}

/* This targets the paragraphs specifically, ensuring no inherited center alignment remains */
.single-post-page .post-container p {
    text-align: left;
    line-height: 1.6;
    /* Optional: Improves reading comfort by increasing vertical space */
    margin-bottom: 1.5em;
    /* Optional: Adds spacing between paragraphs */
}

/* Note: I'm assuming you have other CSS here. I'm adding the necessary social links styling. */

/* Existing Footer Styling */
footer {
    background-color: black;
    /* black */
    color: #fff;
    padding: 20px 0;
    font-size: 0.9em;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}

/* NEW: Social Links Styling - Updated Size and Spacing */
footer .social-links a {
    color: #fff;
    font-size: 1.4rem;
    /* Increased icon size for more visibility */
    margin-left: 20px;
    /* Increased spacing between icons */
    transition: color 0.3s ease;
    text-decoration: none;
    /* Remove underline */
}

footer .social-links a:hover {
    color: white;
    /* white hover effect */
}

/* Ensure the layout is responsive on small screens */
@media (max-width: 600px) {
    footer .container {
        flex-direction: column;
    }

    footer p {
        margin-bottom: 15px;
    }

    footer .social-links {
        margin-top: 10px;
    }
}


/* TARGET 2: The moving track */
.carousel-container .carousel-track {
    display: flex;
    transition: transform 0.3s ease-in-out !important;
    gap: 0 !important;

}

/* ------------------------------------------------------------------- */
/* CLUB NEWS AND ADVERT FLEX LAYOUT STYLES */
/* ------------------------------------------------------------------- */
.club-news-and-advert {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    align-items: stretch;
}

/* Club News Card - takes up 66% of the space */
.club-news-and-advert .blog-card {
    flex: 2;
    margin: 0;
}

/* Advert Poster Container - takes up 33% of the space */
.advert-poster {
    flex: 1;
    max-width: 400px;
    min-width: 250px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    background-color: #002d62;
    position: relative;
}

.advert-poster a {
    display: block;
    height: 100%;
}

.advert-poster img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    min-height: 400px;
}

/* Responsive Stacking for the Advert section */
@media (max-width: 992px) {
    .club-news-and-advert {
        flex-direction: column;
    }

    .club-news-and-advert .blog-card,
    .advert-poster {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: unset;
    }

    .advert-poster img {
        min-height: 250px;
    }
}

/* ================================================= */
/* PARTNERS.HTML NEW LOGO SECTION STYLES */
/* ================================================= */

.other-partners-section {
    margin-top: 3rem;
    /* equivalent to mt-12 in Tailwind */
    text-align: center;
}

.other-partners-title {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    color: #333;
    /* Dark gray text */
    margin-bottom: 2rem;
    /* mb-8 */
}

.partner-logos-grid {
    display: flex;
    flex-wrap: wrap;
    /* Allows wrapping on small screens */
    justify-content: center;
    /* Centers the logos */
    align-items: center;
    gap: 1.5rem;
    /* space between logos */
}

.partner-logo {
    width: 8rem;
    /* w-32 */
    height: auto;
    object-fit: contain;
    padding: 0.5rem;
    /* p-2 */
    background-color: white;
    border-radius: 0.5rem;
    /* rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* shadow-md */

    /* KEEP LOGOS IN FULL COLOR BY DEFAULT */
    filter: none;
    /* Removed the grayscale(100%) filter */
    opacity: 1;
    /* Set opacity to full */

    /* Keep the transition for the hover effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.partner-logo:hover {
    /* Only the transform and shadow effects remain on hover */
    filter: none;
    opacity: 1;
    transform: scale(1.05);
    /* Slightly bigger on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustment for very small screens */
@media (max-width: 500px) {
    .partner-logo {
        width: 6rem;
        /* Make logos smaller on mobile */
    }
}

/*
===================================
2. Gallery Carousels Optimization (REFINED)
===================================
*/

.carousel-container {
    margin: 40px 0;
    position: relative;
}

.carousel-viewport {
    overflow: hidden;
    /* *** KEY CHANGE: Set Max-Height explicitly *** */
    max-height: 350px;
    /* Limits the vertical size of all gallery photos */
    /* Use a fixed aspect ratio for the container to prevent vertical shift on load */
    aspect-ratio: 4 / 3;
    width: 100%;
    margin: 0 auto;
}

.carousel-viewport .carousel-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
    scroll-snap-type: x mandatory;
}

.carousel-viewport .carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    scroll-snap-align: start;
}

.carousel-viewport img {
    /* The image itself must fill the fixed space created by the slide and viewport */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Centering the content below the main hero image */
.hero-content-section .container.text-center {
    /* Ensures the container itself can be centered if needed, 
       but primarily targets the text within (via text-align: center 
       which should be in your base styles). */
    max-width: 800px;
    /* Optional: Makes the text block less wide */
    margin-left: auto;
    margin-right: auto;
}

/* Center all h2 titles and paragraph descriptions above the carousels */
.gallery-title {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 5px;
}

.page-content p.text-center {
    text-align: center;
    margin-bottom: 20px;
}

.carousel-container {
    margin: 40px auto;
    /* 'auto' centers the block horizontally */
    position: relative;
    /* Example: if you wanted to limit the carousel width: */
    /* max-width: 900px; */
}

/* Enable smooth, momentum-based scrolling for all track elements */
.carousel-track {
    /* Ensures smooth horizontal scrolling behaviour */
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    /* Allows the scrollbar to appear if necessary */
}

/* Ensure images maintain quality when accelerated */
.carousel-viewport img {
    /* Use translateZ(0) to force hardware acceleration on the images/slides, 
       which helps with smooth scrolling on mobile. */
    transform: translateZ(0);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.carousel-track::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.carousel-track {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Ensure the button controls are easily tappable and visible on small screens */
.carousel-btn {
    /* Position the buttons absolutely on the container */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* Make buttons larger and easier to hit */
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    line-height: 40px;
    text-align: center;

    /* Center the button text/symbol */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Move buttons slightly inward to be visible */
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    z-index: 10;
}

/* Specific button placement */
.prev-btn {
    left: 10px;
    /* Closer to the edge on mobile */
}

.next-btn {
    right: 10px;
    /* Closer to the edge on mobile */
}

.image-grid {
    /* Create a grid layout */
    display: grid;
    gap: 20px;
    /* Space between images */
    padding: 20px;
}

/* 💻 Default (Larger Screens - 2 Images per Row) */
.image-grid {
    /* Use 2 equally sized columns */
    grid-template-columns: repeat(2, 1fr);
}

/* 📱 Media Query for Mobile/Small Screens (1 Image per Row) */
@media (max-width: 650px) {
    .image-grid {
        /* On screens 650px or smaller, use 1 full-width column */
        grid-template-columns: 1fr;
    }
}

/* Standard styles (Keep these the same) */
.grid-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-in-out;
}

.grid-item:hover img {
    transform: scale(1.15);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Hiding mechanism for "Show More" */
.hidden-item {
    display: none !important;
}

.show-more-wrapper {
    text-align: center !important;
    padding: 20px 0;
}
/* --- GALLERY HERO IMAGE & FADE EFFECT (UPDATED FOR BRIGHTER TOP) --- */

.gallery-hero {
    /* Retain fixed height so the content knows where "the bottom" is */
    height: 450px;
    /* Or min-height: 450px if you prefer flexibility */
    padding: 0;
    /* Remove top/bottom padding as flexbox handles vertical alignment */
    position: relative;
    z-index: 2;
    text-align: center;
    /* Ensures content inside is centered horizontally */

    /* 1. Set the image and background properties */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* 2. CRUCIAL: Adjust the linear gradient for brighter top and white fade bottom */
       background-image:
        linear-gradient(to bottom,
            /* Start of gradient (top of the image) - Much more transparent */
            rgba(255, 255, 255, 0.1) 0%,
            /* Very light overlay at the very top */
            rgba(255, 255, 255, 0.1) 30%,
            /* Maintain light overlay for the text area */
            rgba(247, 243, 245, 0.7) 60%,
            /* Start fading to the light background color */
            rgba(247, 243, 245, 1) 100%
            /* Fully opaque light background at the bottom */
        ),
        /* Replace with your specific image path! */
        url('kidsgroup.jpg');
}

/* --- Container and Text Styling (Keep these as they were for bottom alignment) --- */
.gallery-hero .container {
    height: 100%;
    /* Make the container fill the height of the section */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* PUSH CONTENT TO THE END (BOTTOM) */
    padding-bottom: 5px;
    padding-top: 40px;
}

/* Ensure the text is readable over the image, adjusted for the brighter top */
.gallery-hero h1,
.gallery-hero .sub-headline {
    color: var(--color-primary-dark);
    /* Using dark text now, as the top is brighter */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    /* Subtle white shadow for contrast */
}

/* Ensure the text wrapper does not interfere with the Flexbox alignment */
.gallery-hero .text-center {
    margin-bottom: 0;
}

/* Ensure proper vertical separation between gallery sections */
#gallery-container h2.gallery-title {
    /* Set a specific top margin to push the title away from the previous section's buttons */
    margin-top: 50px;

    /* Ensure bottom margin for spacing before the next grid */
    margin-bottom: 20px;
}
/* --- TOT WORKSHOP DOCUMENTS STYLING (LILAC & PURPLE) --- */

/* Setting the entire section background to a light neutral for contrast */
#workshop-materials {
    background-color: #fafafa;
    /* Very light grey */
    /* Reduced vertical padding to make the entire section feel shorter */
    padding: 40px 0;
}

/* Document Grid: Maintains Two Columns */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    /* Slightly reduced gap */
    margin-top: 30px;
    /* Reduced top margin */
}

.document-item {
    /* 1. LAYERED BACKGROUND: Lilac color with a subtle image */

    /* Using a semi-transparent lilac color */
    background-color: #f5d9eee5;

    /* 2. Add the Image and make it semi-transparent (less distracting) */
    background-image: url('presentations/pink.jpg');
    /* <-- **UPDATE THIS PATH!** */
    background-size: cover;
    /* Ensures the image covers the entire box */
    background-position: center;
    /* Centers the image */
    background-blend-mode: multiply;
    /* Blends the image with the background-color */
    opacity: 0.98;
    /* Slightly reduces the opacity of the entire box */

    /* 3. Keep the compact padding and branding colors */
    padding: 20px 25px;
    border-radius: 8px;
    border: 1px solid #7030A020;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Ensure the text and link stay vibrant when the background changes */
.document-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    opacity: 1;
    /* Increase opacity slightly on hover for an effect */
}
/* Style adjustments for shorter look */
.document-icon {
    font-size: 2rem;
    /* Reduced icon size */
    color: #7030A0;
    /* Your strong PURPLE color */
    margin-bottom: 10px;
    /* Reduced icon margin */
    display: block;
}

.document-item h3 {
    font-size: 1.3rem;
    /* Slightly reduced heading size */
    margin-top: 0;
    margin-bottom: 8px;
    /* Reduced heading margin */
}

/* Shorten the paragraph part */
.document-item p {
    font-size: 0.95rem;
    /* Slightly smaller text */
    margin-bottom: 12px;
}

/* Color the download link with your main brand PURPLE */
.download-link {
    display: inline-block;
    /* Reduced top margin to bring the link closer to the text */
    margin-top: 5px;
    color: #7030A0;
    /* Your strong PURPLE color */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.download-link:hover {
    color: #4a206a;
    text-decoration: underline;
}

/* Ensure mobile view remains a single column */
@media (max-width: 768px) {
    .documents-grid {
        grid-template-columns: 1fr;
    }
}
/* --- TOT WORKSHOP DOCUMENTS STYLING (LILAC & PURPLE) --- */

/* Setting the entire section background to a light neutral for contrast */
#workshop-materials {
    background-color: #fafafa;
    /* Very light grey */
    /* Reduced vertical padding to make the entire section feel shorter */
    padding: 40px 0;
}

/* Document Grid: Maintains Two Columns */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    /* Slightly reduced gap */
    margin-top: 30px;
    /* Reduced top margin */
}

/* This rule applies the Lilac background color to ALL presentation boxes */
.document-item {
    background-color: #f7dff7;
    /* <-- The chosen Lilac background color */

    /* Reduced padding inside the box to make the content area shorter/more compact */
    padding: 20px 25px;

    border-radius: 8px;
    border: 1px solid #7030A020;
    /* 20% transparent Purple border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.document-item:hover {
    transform: translateY(-3px);
    /* Slightly less movement */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* Style adjustments for shorter look */
.document-icon {
    font-size: 2rem;
    /* Reduced icon size */
    color: #7030A0;
    /* Your strong PURPLE color */
    margin-bottom: 10px;
    /* Reduced icon margin */
    display: block;
}

.document-item h3 {
    font-size: 1.3rem;
    /* Slightly reduced heading size */
    margin-top: 0;
    margin-bottom: 8px;
    /* Reduced heading margin */
}


/* Color the download link with your main brand PURPLE */
.download-link {
    display: inline-block;
    /* Reduced top margin to bring the link closer to the text */
    margin-top: 2px;
    color: #7030A0;
    /* Your strong PURPLE color */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.download-link:hover {
    color: #4a206a;
    text-decoration: underline;
}

/* Ensure mobile view remains a single column */
@media (max-width: 768px) {
    .documents-grid {
        grid-template-columns: 1fr;
    }
}
/* --- ALIGNMENT MODIFICATIONS --- */

/* Use Flexbox to put the icon and h3 on the same line */
.document-title-group {
    display: flex;
    align-items: center;
    /* Vertically centers the icon and the text */
    margin-bottom: 5px;
    /* Space between the title group and the paragraph below */
}

/* Adjust the icon to sit properly next to the text */
.document-icon {
    /* Use right margin to create space between the icon and the h3 text */
    margin-right: 10px;

    /* Remove the bottom margin we added previously, as it's now handled by the group's margin-bottom */
    margin-bottom: 0;
}

/* Ensure the heading flows next to the icon and has no unnecessary bottom margin */
.document-title-group h3 {
    /* Remove top margin that might push it down */
    margin-top: 0;
    /* Remove bottom margin that might push the p tag down */
    margin-bottom: 0;
    line-height: 1.2;
    /* Ensures text wraps cleanly */
}