/*
 * Fliptown Global Styles
 * Defines base styles, variables, and common elements
 */

/* ======== Variables ======== */
:root {
    --primary-color: #0056b3; /* Fliptown Blue */
    --secondary-color: #ff8f00; /* Orange accent */
    --accent-color: #1565c0; /* Ubuntu blue */
    --dark-color: #263238; /* Dark grey/blue for footer etc. */
    --light-color: #f5f5f5; /* Light background */
    --text-color: #333; /* Default text color */
    --text-light: #666; /* Lighter text color */
    --white: #ffffff; /* White color */

    --ubuntu-gradient: linear-gradient(135deg, #2e7d32 0%, #1565c0 100%); /* Green to Blue Gradient */
    --nature-gradient: linear-gradient(to right, #2e7d32, #43a047); /* Green Gradient */

    --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Standard box shadow */
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Card specific shadow */
    --transition: all 0.3s ease; /* Standard transition */
    --transition-fast: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Fast transition */

    --dark-bg: #0A1F0C; /* Dark background color */
    --light-bg: #fbfdfc; /* Very light background color */

    /* Added border-color variable */
    --border-color: #0056b4; /* Example border color */

    /* Note: Duplicate variable definitions were consolidated, keeping the last defined values. */
    /* Removed duplicate --primary-blue, --secondary-orange, --light-bg, --card-shadow, --transition-fast definitions */
}

/* ======== Global Reset and Base Styles ======== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--light-color); /* Default body background */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--dark-color); /* Headings are dark by default */
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1.5em; /* Example: Adds space equal to 1.5 times the current font size below each paragraph */
}

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

a:hover {
    color: var(--secondary-color);
}

img {
    max-width: 100%;
    height: auto;
}

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

/* ======== Header Styles ======== */

header {
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
    transition: var(--transition);
}

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

.logo {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;
    margin-right: 10px;
}

.logo span {
    color: var(--primary-color);
}

/* Navigation (Desktop) */
nav {
    display: flex; /* Show desktop nav by default */
}

nav ul {
    display: flex;
    list-style: none;
    padding: 0; /* Ensure no default padding */
}

nav ul li {
    margin-left: 30px;
}

nav ul li a {
    font-weight: 600;
    position: relative;
}

nav ul li a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    bottom: -5px;
    left: 0;
    transition: var(--transition);
}

nav ul li a:hover:after {
    width: 100%;
}

/* Mobile Menu Button (Hidden by default on desktop) */
.mobile-menu-btn {
    display: none; /* Hidden on larger screens */
    font-size: 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0; /* Remove default button padding */
    z-index: 1001; /* Ensure it's above the header */
    color: var(--dark-color); /* Default color for the icon */
}


/* ======== Mobile Menu Overlay ======== */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 998; /* Below the menu (999) but above other content */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Not interactive when hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}

/* Add a class to the body when the menu is open (requires JavaScript to toggle this class) */
body.menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
}


/* ======== Section Styles ======== */

/* Core Pillars Section Styling */
.core-pillars-bg {
    background-image: url('../images/corepillarsbg5.jpg'); /* Path to Background Image */
    background-attachment: fixed; /* Parallax effect */
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    color: white; /* Default text color for this section */
}

.core-pillars-bg .section-title h2,
.core-pillars-bg .section-title p {
    color: royalblue; /* Ensure text is readable against the background */
}

.core-pillars-bg .feature-card {
    background-color: rgba(0, 0, 0, 0.6); /* Add a semi-transparent background to the cards */
    padding: 20px;
    border-radius: 8px;
}

 /* Projects Section Styles */

.projects-section {
    padding: 80px 0;
    background-color: var(--light-color);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.project-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.project-img {
    height: 200px;
    overflow: hidden;
}

.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.project-card:hover .project-img img {
    transform: scale(1.1);
}

/* Tech Services Enhancements */
.tech-services {
    background: var(--dark-color);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.tech-services:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Using a light color for the pattern for subtle effect */
    opacity: 0.05;
    z-index: 1;
}

.enhanced-tech-grid .feature-card {
    background: rgba(var(--white-rgb), 0.05); /* Using white with opacity */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--accent-color-rgb), 0.3); /* Ubuntu blue for border */
    transition: var(--transition-fast);
}

.enhanced-tech-grid:hover {
    transform: translateY(-10px) perspective(1000px) rotateX(5deg);
    box-shadow: 0 25px 50px rgba(var(--accent-color-rgb), 0.15); /* Ubuntu blue for shadow */
}

.tech-services .feature-icon {
    /* Using a gradient based on primary and secondary colors */
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 2.5rem;
}

.tech-services .value-list li {
    border-color: rgba(var(--accent-color-rgb), 0.2); /* Subtle Ubuntu blue for list item border */
}

.tech-cta {
    text-align: center;
    padding: 3rem;
    background: rgba(var(--white-rgb), 0.05); /* White with opacity for background */
    border-radius: 15px;
    margin-top: 4rem;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tech-cta .ubuntu-badge {
    margin: 0 0 1.5rem;
    background-color: var(--secondary-color); /* Orange badge */
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-weight: bold;
}

/* Style for the service details text */
.service-details .value-list li {
    color: var(--text-color); /* Default dark text color */
    border-color: rgba(var(--accent-color-rgb), 0.2);
}

.service-details .value-list li i {
    color: var(--text-light); /* Lighter shade for icons if desired */
}


/* Project Background Adjustment */
.project-bg {
    background-image: url('../images/projectbg.jpg');
    background-attachment: fixed; /* Parallax effect */
    background-size: cover;
    background-position: center;
    padding: 80px 0; /* Adjust padding as needed */
    color: white; /* Ensure text is readable against the background */
}

/* Project Section Styling (Background related) */
.projects-section { /* Default projects section padding and background */
    padding: 80px 0;
    background-color: var(--light-color);
}

.project-bg .section-title h2,
.project-bg .section-title p {
    color: royalblue; /* Ensure text is readable against the background */
}

/* Project Card Highlighted Headings (inside project-bg) */
.project-bg .project-card h3 {
    color: #ffd700; /* Bright gold color, you can change this */
    font-weight: bold; /* Make the headings bold */
}

/* Hero Section Styling */
.hero {
    background: var(--ubuntu-gradient);
    color: var(--white);
    padding: 150px 0 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/FliptownwebsiteCoverphoto2024png.jpg') no-repeat center center/cover;
    opacity: 0.2;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--white); /* White heading in hero */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero h2 {
    font-size: 1.8rem;
    color: var(--white); /* White heading in hero */
    margin-bottom: 30px;
    font-weight: 400;
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Ubuntu Section Styling */
.ubuntu {
    background: var(--ubuntu-gradient);
    color: var(--white);
    padding: 150px 0 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ubuntu:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/treegatheringsession.jpg') no-repeat center center/cover;
    opacity: 0.2;
    z-index: 1;
}

.ubuntu h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--white); /* White heading in ubuntu section */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ubuntu h2 {
    font-size: 1.8rem;
    color: var(--white); /* White heading in ubuntu section */
    margin-bottom: 30px;
    font-weight: 400;
}

.ubuntu p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Project Tags Styling */
.project-tags {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin-top: 15px; /* Space above tags */
    display: flex; /* Arrange tags in a row */
    justify-content: center; /* Center tags horizontally */
    flex-wrap: wrap; /* Allow tags to wrap to the next line */
    gap: 8px; /* Space between tags */
}

.project-tags li {
    display: inline-block; /* Display as inline blocks */
    padding: 5px 12px;
    background: #e0f2e7; /* Light green background */
    color: var(--secondary-orange); /* Use secondary orange color */
    border-radius: 20px; /* Rounded corners */
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap; /* Prevent tags from breaking lines unexpectedly */
}


/* ======== Button Styling ======== */
.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--accent-color);
    color: var(--white);
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    margin: 10px 5px;
    text-align: center;
}

.btn:hover {
    background-color: var(--secondary-color);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--white);
    color: var(--white); /* Ensure text color is white for outline */
}

.btn-outline:hover {
    background-color: var(--white);
    color: var(--primary-color);
}

/* Added specific outline button style for ubuntu gradient background if needed */
.btn-outline-ubuntu {
     border-color: var(--white);
     color: var(--white);
}

.btn-outline-ubuntu:hover {
    background-color: var(--white);
    color: var(--primary-color);
}


/* ======== About Section Styling ======== */
.about-section {
    padding: 80px 0;
    background: var(--white); /* Default about background */
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; /* Adjusted gap, original was 3rem and 50px */
    align-items: center;
    margin: 50px 0; /* Adjusted margin, original was 3rem and 50px */
}

.about-text {
    padding: 30px;
    background: rgba(46, 125, 50, 0.03); /* Light green transparent background */
    border-radius: 12px;
}

.reverse { /* Rule for reversing grid order */
    grid-template-columns: 1fr 1fr; /* Ensure grid is two columns if applied */
}
.reverse .about-text {
    order: 2;
}
.reverse .about-img {
    order: 1;
}


.about-img {
    position: relative;
    border-radius: 12px; /* Adjusted from 10px */
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.about-img img {
    width: 100%;
    display: block;
}

.featured-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: var(--transition);
}

.ubuntu-badge {
    background: var(--ubuntu-gradient);
    color: var(--white);
    padding: 8px 20px; /* Adjusted padding */
    border-radius: 30px; /* Adjusted border-radius */
    display: inline-block;
    margin-bottom: 20px;
    font-size: 0.9em; /* Adjusted font-size */
    font-weight: 600;
    /* Removed margin-left and vertical-align as display: inline-block handles flow */
}



.highlight {
    font-size: 1.4em;
    color: var(--primary-color);
    margin: 25px 0;
    padding-left: 30px;
    border-left: 4px solid var(--secondary-color);
    font-style: italic;
    background: #e8f5e9;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color); /* Overriding border-left from duplicate */
}

.value-list {
    list-style: none;
    margin-top: 25px;
    padding: 0;
}

.value-list li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(46, 125, 50, 0.1); /* Light green transparent border */
    display: flex;
    align-items: center;
}

.value-list i {
    color: var(--secondary-color); /* Changed icon color to secondary-color */
    margin-right: 15px; /* Adjusted margin */
    font-size: 1.2em; /* Adjusted font-size */
    width: 30px;
    text-align: center; /* Center icon */
}

.vision-icon { /* Specific icon styling for the vision section */
    width: 70px; /* Match mission-icon size */
    height: 70px; /* Match mission-icon size */
    margin: 0 auto 20px; /* Center the icon */
    background: var(--ubuntu-gradient); /* Use ubuntu gradient */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white); /* Ensure the icon color is white */
    font-size: 2rem; /* Match feature-icon size */
}

/* Explicitly set color for the icon inside .vision-icon */
.vision-icon i {
    color: var(--white);
}


.mission-statement { /* Specific styling for mission statements */
    margin-bottom: 15px; /* Add some space below paragraphs */
}


/* ======== Features Section Styling ======== */


.features-section {
    background-image: url('../images/projectbg.jpg');
    background-attachment: fixed; /* Fixes the background relative to the viewport */
    background-size: cover;     /* Ensures the image covers the entire section */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-color: var(--white); /* Default features background */
    color: #fff; /* Assuming your background image might be dark, make text light */
    padding-top: 80px; /* Adjust padding as needed */
    padding-bottom: 80px; /* Adjust padding as needed */
}

/* Style the section title text */
.features-section .section-title h2,
.features-section .section-title p {
    color: var(--white); /* Ensure title and subtitle are readable */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Optional: add a subtle shadow for contrast */
}

/* Style the feature cards to have a background that makes text readable */
.features-section .feature-card {
    background-color: rgba(255, 255, 255, 0.9); /* Example: White with 90% opacity */
    padding: 30px; /* Adjust padding inside the card */
    border-radius: 8px; /* Keep your existing border-radius */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: add a subtle shadow to lift the card */
}

/* Ensure text inside the cards is dark and readable on the light card background */
.features-section .feature-card h3 {
    color: #333; /* Example dark color */
}

.features-section .feature-card p {
    color: #555; /* Example slightly lighter dark color */
}

/* Ensure the "Learn More" button inside the card is visible */
.features-section .feature-card .btn {
    /* You might need to adjust the button styles here if needed */
}

/* Optional: Disable fixed background on mobile */
@media (max-width: 768px) {
    .features-section {
        background-attachment: scroll;
    }
}


.section-title {
    text-align: center;
    margin-bottom: 10px;
}

.section-title h2 {
    font-size: 2.5rem;
    position: relative;
    display: inline-block;
}

.section-title h2:after {
    content: '';
    position: absolute;
    width: 70px;
    height: 4px;
    background: var(--nature-gradient);
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card {
    background: var(--white); /* Default feature card background */
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ubuntu-gradient);
    border-radius: 50%;
    color: var(--white);
    font-size: 2rem;
}

.feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}



		.stories-section {
			padding: 60px 0;
			background-color: #f9f9f9; /* Light background */
		}

		.stories-section .container {
			/* Use existing container styles */
		}

		/* Container for the entire story content */
		.full-story-container {
			background-color: #fff; /* White card background */
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
			padding: 30px;
			margin-bottom: 50px; /* Space below the story block */
		}

		.full-story-container h2 {
			color: #1b5e20; /* Dark green for story title */
			margin-top: 0;
			margin-bottom: 20px;
			font-size: 2rem; /* Larger title */
			font-weight: 700;
			text-align: center; /* Center the main story title */
		}

		/* Styling for sections within the story */
		.story-section-block {
			display: flex;
			flex-wrap: wrap;
			gap: 30px; /* Space between image/text */
			align-items: center; /* Align items vertically */
			margin-bottom: 40px; /* Space between story blocks */
		}

		.story-section-block .story-media {
			flex: 1 1 300px; /* Allow media to grow/shrink */
			max-width: 500px; /* Max width for media */
			height: auto;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            text-align: center; /* Center image if it's smaller than max-width */
		}

        .story-section-block .story-media img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover; /* Ensure images fill their container */
        }

		.story-section-block .story-text {
			flex: 2 1 300px; /* Allow text to grow/shrink */
		}

		.story-section-block h3 {
			color: #2e7d32; /* Green for section subheadings */
			margin-top: 0;
			margin-bottom: 10px;
			font-size: 1.4rem;
		}

		.story-section-block p {
			color: #555;
			line-height: 1.7;
			margin-bottom: 15px;
		}

		/* Optional: Style for alternating layout */
		.story-section-block:nth-child(odd) {
			flex-direction: row-reverse; /* Image on the right for odd blocks */
		}

        /* Style for full-width images */
        .full-width-image {
            width: 100%;
            height: auto;
            border-radius: 8px;
            overflow: hidden;
            margin: 40px 0; /* Space above and below full-width image */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

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

		/* Style for anchor target padding (to prevent content being hidden by fixed header) */
		/* Add this if your header is fixed */
		.story-detail-block:before { /* Renamed class to avoid conflict, though this structure is different */
            content: "";
            display: block;
            height: 80px; /* Adjust this height to match your header's height */
            margin-top: -80px; /* Negative margin matching the height */
            visibility: hidden;
            pointer-events: none;
        }

         /* Style for the back button/link */
        .back-link {
            display: block; /* Make it a block to center */
            text-align: center;
            margin-top: 40px;
        }




		.report-section {
			padding: 60px 0;
		}
		.report-section:nth-child(odd) {
			background-color: #f9f9f9;
		}
		.report-metrics-summary {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 30px;
			margin-top: 40px;
			margin-bottom: 40px;
			text-align: center;
		}
		.report-metrics-summary .metric-item {
			background-color: #e8f5e9;
			padding: 20px;
			border-radius: 8px;
			box-shadow: 0 2px 5px rgba(0,0,0,0.05);
		}
		.report-metrics-summary .metric-item i {
			font-size: 2.5rem;
			color: #1b5e20;
			margin-bottom: 10px;
		}
		.report-metrics-summary .metric-item .value {
			font-size: 2rem;
			font-weight: 700;
			color: #333;
		}
		.report-metrics-summary .metric-item .label {
			font-size: 1rem;
			color: #555;
			font-weight: 500;
		}
		.story-block {
			display: flex;
			flex-wrap: wrap;
			gap: 40px;
			align-items: center;
			margin-bottom: 50px;
		}
		.story-block img {
			flex: 1 1 300px;
			max-width: 400px;
			height: auto;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0,0,0,0.1);
		}
		.story-block .story-content {
			flex: 2 1 300px;
		}
		.story-block h3 {
			color: #1b5e20;
			margin-top: 0;
		}
		.story-block:nth-child(even) {
			flex-direction: row-reverse;
		}
         .impact-chart-placeholder {
             background-color: #eee;
             padding: 80px 20px;
             text-align: center;
             border-radius: 8px;
             margin-top: 30px;
         }











        /* Simple styles for the new buttons */
        .artist-actions {
            margin-top: 15px;
            display: flex; /* Use flexbox for alignment */
            gap: 10px; /* Space between buttons */
            flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
        }
        .artist-actions .btn {
            padding: 8px 15px; /* Adjust padding */
            text-decoration: none; /* Remove underline */
            border-radius: 5px; /* Rounded corners */
            font-size: 0.9em; /* Slightly smaller font */
            display: inline-block; /* Ensure buttons are inline-block */
            text-align: center;
            transition: background-color 0.3s ease;
        }
        .artist-actions .btn-download {
             background-color: #4CAF50; /* Green background */
             color: white;
             border: 1px solid #4CAF50;
        }
         .artist-actions .btn-download:hover {
             background-color: #388E3C; /* Darker green on hover */
         }

        .artist-actions .btn-more-music {
            background-color: #2196F3; /* Blue background */
            color: white;
            border: 1px solid #2196F3;
        }
        .artist-actions .btn-more-music:hover {
             background-color: #1976D2; /* Darker blue on hover */
        }

         /* Optional: Adjust project-content padding if needed to make space */
         .project-content {
             padding-bottom: 10px; /* Add some padding at the bottom */
         }










/* ======== Projects Grid and Cards Styling ======== */

.project-grid { /* Main grid style - used for projects, events, and donation cards */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* Default gap */
    padding: 0 1.5rem; /* Default padding */
    max-width: 1200px;
    margin: 0 auto;
}

.project-card { /* Card style - used for projects, events, and donation cards */
    background: var(--white); /* Use white variable */
    border-radius: 16px; /* Adjusted from 10px */
    box-shadow: var(--card-shadow); /* Use card-shadow variable */
    transition: var(--transition-fast); /* Use transition-fast variable */
    overflow: hidden;
    display: flex; /* Added flexbox for donation cards layout */
    flex-direction: column; /* Stack content vertically */
    align-items: flex-start; /* Align content to the left */
    width: auto; /* Added to prevent unintended stretching on larger screens */
}

.project-card:hover {
    transform: translateY(-5px); /* Adjusted from -10px */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Adjusted shadow */
}

/* This rule is necessary to actually hide the elements that have the 'hidden' class added by the JavaScript. */
.project-card.hidden {
    display: none;
}

.project-img { /* Image container style - used for project and event images */
    height: 240px; /* Adjusted from 200px */
    position: relative;
    overflow: hidden;
    width: 100%; /* Ensure image container takes full width */
}

.project-img img { /* Image style */
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-card:hover .project-img img {
    transform: scale(1.1);
}

.project-content { /* Content area style - used for project and event content */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Added gap */
    text-align: left;
    width: 100%;
    flex-grow: 1; /* Allow content to grow in flex container */
    align-items: center; /* Align text left within content */
}

.project-content h3 { /* Heading inside project card content */
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--dark-color); /* Default dark color for headings unless overridden in .project-bg */
    text-align: center;
    width: 100%; /* Ensure heading takes full width */
}


/* Event Specific Styles*/
.event-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--primary-color); /* Adjusted to use primary-color variable */
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    z-index: 2;
}

.event-date {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    color: var(--dark-color);
    line-height: 1.2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.event-date .day {
    font-size: 1.5em;
    display: block;
}

.event-date .month {
    font-size: 0.8em;
    display: block;
    text-transform: uppercase;
}

.event-date.recurring i {
    font-size: 2em;
    color: var(--primary-color);
}

.event-meta {
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: var(--text-light);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.event-meta span i {
    margin-right: 5px;
    color: var(--primary-color);
}

.event-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    color: var(--dark-color);
    line-height: 1.2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 0.9em;
}

.project-content .project-tags { /* Override center alignment for tags in project content */
    justify-content: flex-start; /* Align tags to the left */
    margin-top: 10px; /* Adjust margin */
    margin-bottom: 15px; /* Adjust margin */
}

/* Filter Section Styling */
.event-filter-section,
.projects-filter-container .event-filter-section { /* Added projects-filter-container context */
    padding: 2.5rem 0;
    background: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(5px);
    position: relative;
    margin: 2rem 0;
}

.event-filter-section .container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.filter-controls {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: white;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    box-shadow: var(--card-shadow);
    flex-grow: 1;
}

/* Styling for the filter select elements */
.filter-group select {
    /* Remove default browser styling */
    appearance: none;
    -webkit-appearance: none; /* For older WebKit browsers */
    -moz-appearance: none;    /* For Firefox */
    width: 100%;
    /* Add custom styling */
    background-color: var(--white); /* Match card background */
    border: 2px solid var(--border-color); /* Use your defined border color variable */
    border-radius: 40px; /* Rounded corners */
    padding: 10px 35px 10px 15px; /* Add padding on the right for the custom arrow */
    font-size: 1rem;
    color: var(--text-color);
    cursor: pointer;
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
    line-height: 1.5; /* Improve text alignment */

    /* Position the custom arrow */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234F4F4F%22%20d%3D%22M287%2C114.7L159.3%2C7c-3.1-3.1-8.1-3.1-11.3%2C0L5.4%2C114.7c-3.1%2C3.1-3.1%2C8.1%2C0%2C11.3l19.6%2C19.6c3.1%2C3.1%2C8.1%2C3.1%2C11.3%2C0l100.4-100.4l100.4%2C100.4c3.1%2C3.1%2C8.1%2C3.1%2C11.3%2C0l19.6-19.6C290.1%2C122.8%2C290.1%2C117.8%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E'); /* A simple down arrow SVG */
    background-repeat: no-repeat;
    /* Adjust position and size of the custom arrow */
    background-size: 12px auto; /* Adjust size as needed */
    background-position: right 20px center; /* Position to the right, centered vertically, with 15px padding */
}

/* Style for the select element when it's focused */
.filter-group select:focus {
    border-color: var(--accent-color); /* Highlight border on focus */
    box-shadow: var(--box-shadow);
}

/* Style for the select element on hover */
.filter-group select:hover {
     border-color: var(--secondary-color); /* Change border color on hover */
}

/* Ensure consistency in padding and alignment */
.filter-group label {
    margin-right: 10px; /* Space between label and select */
    font-weight: 500;
    color: var(--text-color);
}

/* Optional: Adjust filter group layout if needed */
.filter-controls {
    display: flex;
    gap: 20px; /* Space between filter groups */
    flex-wrap: wrap; /* Allow filters to wrap on smaller screens */
    align-items: center;
    margin-bottom: 30px; /* Space below filter controls */
}

/* Styling for the "No events found" message */
.no-projects-message {
    text-align: center; /* Center the text */
    font-size: 1.2rem; /* Slightly larger font size */
    color: var(--text-light); /* Using --text-light from your style.css */
    padding: 30px 20px; /* Add some padding around the message */
    margin-top: 20px; /* Add space above the message */
    border: 1px dashed var(--border-color); /* Add a dashed border */
    border-radius: 8px; /* Rounded corners for the border */
    background-color: var(--light-bg); /* Using --light-bg from your style.css */
    width: 100%; /* Ensure it takes the full width of its container */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.no-projects-message p {
    margin: 0; /* Remove default paragraph margin */
}


/* Event Grid Section */
.event-grid-section {
    padding: 4rem 0;
    background: var(--light-bg);
}


/* ======== Testimonials Section Styling ======== */
.testimonials-section {
    padding: 80px 0;
    /* Decide if testimonials should have light-bg or no background */
    /* background: var(--light-bg); */
}

.testimonials-container {
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-card {
    background: var(--ubuntu-gradient);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: var(--box-shadow);
    color: var(--white);
}

.testimonial-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.testimonial-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.testimonial-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-author h4 {
    color: var(--white); /* Author name color */
    margin-bottom: 5px;
}

.testimonial-author p {
    opacity: 0.8;
    font-size: 0.9rem;
    color: var(--white); /* Ensure author title is white */
}

/* ======== Collaborators Logos Section Styling ======== */
.partners-section {
    padding: 20px 0;
    background-color: var(--white); /* Default partners background */
}

.logo-slider-container {
    padding: 60px 0; /* Combined paddings */
    text-align: center;
    border-radius: 10px;
    overflow: hidden; /* Hides the logos that are outside the container */
}

.logo-slider-container:hover .logo-slider {
    animation-play-state: paused;
}

.logo-slider {
    display: flex; /* Arrange logos in a row */
    animation: slide-left 20s linear infinite; /* Apply the sliding animation */
    width: 3630px; /* Keep the explicit width for animation */
}

.logo-slider img {
    height: 100px; /* Adjust the height of the logos as needed */
    margin-right: 30px; /* Space between logos */
    filter: grayscale(0%); /* Optional: Make logos grayscale */
    opacity: 1; /* Optional: Adjust logo opacity */
}

.logo-slider img:last-child {
    margin-right: 0; /* Remove margin from the last logo */
}


/* ======== Products Modern Styling With Awesome Fonts ======== */



/* --- Styles for Modernizing Project Cards --- */

/* Basic card container styling */
.project-card {
    background-color: #fff; /* White background */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensures image corners are also rounded and content stays within bounds */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    display: flex; /* Use flexbox for image/content layout if desired, or keep as block */
    flex-direction: column; /* Stack image and content vertically */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
    height: 100%; /* Make cards the same height in the grid */
}

.project-card:hover {
    transform: translateY(-5px); /* Slight lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Increased shadow on hover */
}

/* Image container styling */
.project-img {
    position: relative; /* Keep for badge/button absolute positioning */
    width: 100%;
    /* Maintain aspect ratio - adjust padding-top as needed */
    padding-top: 75%; /* Example: 4:3 aspect ratio (height is 75% of width) */
    overflow: hidden;
    /* If you want rounded top corners, add it here */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.project-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area without distorting aspect ratio */
    display: block; /* Remove extra space below image */
}

/* Position and style for badges/buttons within the image container */
/* These styles build on the absolute positioning from the previous step */
.project-img .product-badge {
    position: absolute;
    top: 10px;
    left: 10px; /* Position badge on the left */
    background-color: #2e7d32; /* Green background (matches your theme) */
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 10; /* Ensure it's above the image */
}

/* Ensure AR button and Provenance link are styled well within the new image container */
.project-img .btn-ar-preview,
.project-img .provenance-link {
    /* Keep existing absolute positioning */
    top: 10px; /* Align with badge vertically */
    z-index: 10;
    /* Add modern button/link styling */
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    color: #333;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85rem; /* Slightly smaller font */
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-flex; /* Use flex for icon and text alignment */
    align-items: center;
    gap: 5px; /* Space between icon and text */
    text-decoration: none; /* Remove underline from link */
}

.project-img .btn-ar-preview {
    right: 10px; /* Position AR button */
    border: 1px solid #ccc; /* Subtle border */
}

.project-img .provenance-link {
     left: 50%; /* Position Provenance link */
     border: 1px solid #ccc; /* Subtle border */
}


.project-img .btn-ar-preview:hover,
.project-img .provenance-link:hover {
    background-color: rgba(255, 255, 255, 1); /* Make fully opaque on hover */
    color: #1b5e20; /* Darker green on hover */
}


/* Content area styling */
.project-content {
    padding: 20px; /* Inner padding for content */
    text-align: center; /* Center all text content inside */
    display: flex; /* Use flexbox to organize content vertically */
    flex-direction: column;
    flex-grow: 1; /* Allow content area to take available height */
}

/* Styling for text elements */
.project-content h3 {
    font-size: 1.3rem; /* Adjust title size */
    color: #333; /* Dark color for title */
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 600;
}

.project-content .product-price {
    font-size: 1.1rem; /* Adjust price size */
    color: #1b5e20; /* Darker green for price */
    margin-bottom: 15px;
    font-weight: 700;
}

.project-details {
    margin-bottom: 15px;
    /* text-align: center is inherited from .project-content */
}

.project-details p {
    font-size: 0.95rem; /* Adjust details text size */
    color: #555;
    line-height: 1.5;
    margin-bottom: 10px; /* Space below details list */
}

/* Styling for the interactive origin tag */
.project-details .origin-tag.interactive-origin-tag {
     font-size: 0.9rem; /* Slightly smaller font */
     color: #1b5e20; /* Darker green */
     text-decoration: none; /* Remove default underline */
     font-weight: 600;
     /* Inherits display: inline-flex from previous step */
     /* Inherits align-items: center from previous step */
     /* Inherits gap: 5px from previous step */
     /* Inherits cursor: pointer from previous step */
     margin-top: 10px; /* Space above the origin tag */
}

.project-details .origin-tag.interactive-origin-tag:hover {
     text-decoration: underline; /* Add underline on hover */
     color: #2e7d32; /* Lighter green on hover */
}

/* Adjust Font Awesome icon size within the origin tag */
.project-details .origin-tag.interactive-origin-tag i {
    font-size: 1em; /* Keep icon size relative to parent font size */
    margin-right: 5px; /* Space between icon and text */
}


/* Ensure the project grid container uses grid or flexbox to layout cards */
/* (Assuming this already exists in your style.css, but adding a comment as a reminder) */
/*
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; // Space between cards
    padding-bottom: 40px; // Space below grid
}
*/

/* --- End Project Card Styles --- */



/* ======== Products Modern Styling ======== */


/* --- New Styles for Project Activities Page --- */

/* Filter Section Styling (Mimics Events Page) */
.project-filter-section {
    padding: 40px 0; /* Adjust padding as needed */
    background-color: #f4f4f4; /* Light background for filter area */
    border-bottom: 1px solid #ddd; /* Separator */
}

.project-filter-section .container {
    /* Use existing container styles */
    display: flex; /* Arrange filter controls horizontally */
    justify-content: center; /* Center the filter controls */
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 20px; /* Space between filter groups */
}

.filter-controls {
    /* Add basic styles for the controls container */
    display: flex;
    gap: 20px; /* Space between filter groups */
    flex-wrap: wrap; /* Allow wrapping */
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between label and select */
}

.filter-group label {
    font-weight: 600;
    color: #333; /* Darker color for labels */
}

.filter-group select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    background-color: #fff;
    /* Use existing styles for select if any */
}

/* Hide filtered items */
.project-card.hidden {
    display: none; /* Or use visibility: hidden; opacity: 0; transition: opacity 0.3s; for fade effect */
}

/* No Projects Message */
.no-projects-message {
    text-align: center;
    font-size: 1.2rem;
    color: #555;
    padding: 40px 0;
    width: 100%; /* Ensure it takes full width in the grid */
}

/* Dynamic Impact Section */
.impact-section {
    padding: 60px 0; /* Adjust padding */
    background-color: #e8f5e9; /* Light green background */
    text-align: center; /* Center content */
}

.impact-section .section-header {
    margin-bottom: 40px;
}

.impact-metrics {
    display: flex;
    justify-content: center; /* Center metrics */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 40px; /* Space between metric items */
    margin-bottom: 40px;
}

.metric {
    text-align: center;
    flex: 1; /* Allow metrics to grow */
    min-width: 150px; /* Minimum width for each metric */
}

.metric i {
    font-size: 3rem; /* Size of the icon */
    color: #2e7d32; /* Primary green color */
    margin-bottom: 10px;
}

.metric-value {
    display: block; /* Make value a block element */
    font-size: 2.5rem; /* Large size for the number */
    font-weight: 700;
    color: #1b5e20; /* Darker green */
    margin-bottom: 5px;
}

.metric-label {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}

.impact-link .eco-link {
     /* Style the link to the report */
     display: inline-block;
     margin-top: 20px;
     font-size: 1.1rem;
     color: #1b5e20; /* Darker green */
     text-decoration: underline;
}

.impact-link .eco-link i {
    margin-right: 5px;
    color: #1b5e20;
}

/* Futuristic Elements on Product Cards */
.project-img {
    position: relative; /* Needed for absolute positioning of children */
    overflow: hidden; /* Hide anything overflowing */
}

.btn-ar-preview,
.provenance-link {
    position: absolute;
    top: 10px; /* Adjust position */
    z-index: 10; /* Ensure it's above the image */
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.btn-ar-preview {
    right: 10px; /* Position AR button on the right */
    background-color: #2e7d32; /* Green button */
    color: #fff;
    border: none;
    cursor: pointer;
}

.provenance-link {
    left: 10px; /* Position Provenance link on the left */
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    color: #333;
    border: 1px solid #ccc;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}


.btn-ar-preview:hover,
.provenance-link:hover {
    opacity: 1;
}

/* Interactive Origin Tag */
.interactive-origin-tag {
    cursor: pointer; /* Indicate clickability */
    color: #1b5e20; /* Change color or add underline to highlight */
    text-decoration: underline;
    display: inline-flex; /* Align icon and text */
    align-items: center;
    gap: 5px; /* Space between icon and text */
}

.interactive-origin-tag i {
    font-size: 0.9em; /* Adjust icon size relative to text */
}


/* Modal Styling */
.futuristic-modal {
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black background with opacity */
    display: flex; /* Use flexbox to center content */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    padding: 20px; /* Add padding around modal content */
}

.modal-content {
    background-color: #fefefe;
    margin: auto; /* Auto margins for horizontal centering */
    padding: 30px;
    border: 1px solid #888;
    width: 90%; /* Could be responsive */
    max-width: 600px; /* Maximum width */
    border-radius: 8px;
    position: relative; /* Needed for absolute positioning of close button */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Add shadow */
    max-height: 90vh; /* Limit height */
    overflow-y: auto; /* Add scrollbar if content is too tall */
}

.modal-content h3 {
    margin-top: 0;
    color: #1b5e20; /* Use theme color */
}

.modal-content p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.modal-content ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #555;
    text-decoration: none;
}

/* Optional: Animation Styles (adjust as needed based on your design) */
/* Assumes basic fade-in/slide-up for elements with .animate */

.animate.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Animation delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
/* Add more delays if needed */


/* --- End New Styles --- */



/* --- Styles for Environmental Impact Infographic --- */

.environmental-impact-infographic {
    margin-top: 30px; /* Space above the infographic */
    /* The infographic is inside a report-card, so it inherits padding and centering */
}

.infographic-grid {
    display: grid;
    /* Responsive grid: auto-fit columns with a minimum width and a gap */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px; /* Space between infographic items */
    justify-content: center; /* Center grid items within the available space */
    padding: 0 10px; /* Add slight horizontal padding if grid touches edges */
}

.infographic-grid .impact-item {
    text-align: center; /* Center content within each item */
    padding: 20px 10px; /* Padding inside each item */
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background */
    /* Optional: Add a small shadow */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.05); */
}

.infographic-grid .impact-item i {
    font-size: 2.8rem; /* Size of the icon */
    color: #2e7d32; /* Green color */
    margin-bottom: 10px;
    display: block; /* Ensure icon takes its own line */
}

.infographic-grid .impact-item .infographic-value {
    font-size: 1.6rem; /* Size for the number/main value */
    font-weight: 700;
    color: #1b5e20; /* Darker green */
    margin-bottom: 5px;
    line-height: 1.2; /* Adjust line height */
}

.infographic-grid .impact-item .infographic-label {
    font-size: 0.9rem; /* Size for the label */
    color: #555;
    font-weight: 500;
    line-height: 1.4;
}


/* --- End Environmental Impact Infographic Styles --- */


/* --- Styles for Impact Report Cards (Healing the Planet down to Join) --- */

.report-card {
    background-color: #fff; /* White background for the card */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    padding: 30px; /* Inner padding */
    margin-bottom: 30px; /* Space below each card */
    text-align: center; /* Center align text content within the card */
    /* Add max-width and margin: auto if you want cards to not span full container width */
    /* max-width: 800px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/* Adjust headings inside cards */
.report-card h3 {
    color: #1b5e20; /* Darker green */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

/* Adjust paragraphs inside cards */
.report-card p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px; /* Space below paragraphs */
}

/* Style for lists inside cards (e.g., materials list, tokenomics list) */
.report-card ul {
    list-style: none; /* Remove default bullets */
    padding: 0; /* Remove default padding */
    margin: 20px 0; /* Space above/below list */
    display: inline-block; /* Allow the ul block to be centered */
    text-align: left; /* Align list items text to the left within the list block */
}

.report-card ul li {
    margin-bottom: 10px; /* Space between list items */
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
    display: flex; /* Use flexbox for icon and text alignment */
    align-items: flex-start; /* Align items to the top if text wraps */
    gap: 10px; /* Space between icon and text */
}

/* Style for icons within list items */
.report-card ul li i {
    color: #2e7d32; /* Green color for icons */
    font-size: 1.1em; /* Slightly larger icon */
    margin-top: 3px; /* Vertically align icon better with text */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Style for the button group in the Join section card */
.report-card .button-group {
    display: flex; /* Use flexbox to layout buttons */
    justify-content: center; /* Center buttons horizontally */
    flex-wrap: wrap; /* Allow buttons to wrap on small screens */
    gap: 20px; /* Space between buttons */
    margin-top: 25px; /* Space above button group */
}

/* Ensure existing button styles apply */
.report-card .button-group .btn {
    /* Your existing .btn and .btn-outline styles will apply here */
    /* Add any specific adjustments for buttons within cards if needed */
}


/* Ensure the chart placeholder fits within the card */
.report-card .impact-chart-placeholder {
    background-color: #f0f0f0; /* Slightly different background */
    padding: 50px 20px; /* Adjust padding */
    margin-top: 20px; /* Space above placeholder */
    border-radius: 6px;
    /* text-align is inherited as center */
}


/* --- End Impact Report Card Styles --- */

/* ======== Stats Section Styling ======== */


.stats-section {
    padding: 60px 0;
    background: var(--nature-gradient);
    color: var(--white);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}

.stat-item h3 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--white); /* White stats headings */
}

.stat-item p {
    color: var(--white); /* Ensure stats text is white */
    opacity: 0.9;
}

/* Newsletter Styling */
.newsletter-section {
    padding: 60px 0;
    background-color: var(--light-color); /* Default newsletter background */
    text-align: center;
}

.newsletter-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
}

.newsletter-form input {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 50px 0 0 50px;
    font-size: 1rem;
}

.newsletter-form button {
    padding: 15px 30px;
    background: var(--nature-gradient);
    color: var(--white);
    border: none;
    border-radius: 0 50px 50px 0;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.newsletter-form button:hover {
    background: var(--ubuntu-gradient);
}

/* Mission Section Styling */
.mission-section {
    margin-top: 60px;
    padding: 40px 0;
    background: var(--light-color); /* Default mission background */
    border-radius: 12px;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.mission-card {
    background: var(--white); /* Default mission card background */
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
}

.mission-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.mission-icon {
    width: 70px;
    height: 70px;
    background: var(--ubuntu-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--white);
    font-size: 1.5em;
}

.mission-card h4 {
    color: var(--primary-color); /* Primary color for mission card headings */
    margin: 15px 0;
    font-size: 1.2em;
}

/* Timeline Styling */

.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    height: 100%;
    width: 2px;
    background: var(--ubuntu-gradient);
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 40px;
}

.timeline-dot {
    position: absolute;
    left: -10px;
    top: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--ubuntu-gradient);
    border: 2px solid white;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
}



/* CTA Section Styling */
.cta-section {
    padding: 60px 0;
    background: var(--ubuntu-gradient);
    color: var(--white);
    text-align: center;
}

.cta-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--white); /* White heading in CTA */
}

/* Core Values Grid */
.core-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.core-value-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.core-value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.core-value-card:hover::before {
    width: 100%;
    opacity: 0.1;
}

/* Social Bridge (Used on Who We Are) */
.social-bridge {
    display: flex;
    gap: 15px;
    justify-content: center; /* Center social icons */
    margin-top: 20px; /* Space above social icons */
}

.social-bridge a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(46, 125, 50, 0.1); /* Subtle green background */
    border-radius: 50%;
    color: var(--primary-color); /* Use primary color for icons */
    transition: var(--transition);
    font-size: 1.8rem; /* Larger icon size */
}

.social-bridge a:hover {
    background: var(--primary-color); /* Change background on hover */
    color: var(--white); /* Change icon color on hover */
    transform: translateY(-3px);
}






        .process-steps {
            list-style: none;
            padding: 0;
             counter-reset: step-counter; /* Initialize counter */
        }

        .process-steps li {
            background-color: var(--accent-color);
            border-left: 4px solid #2196F3; /* Accent color (blue) */
            margin-bottom: 15px;
            padding: 15px 20px;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
            line-height: 1.6;
            position: relative;
            padding-left: 30px; /* Make space for number */
            color: var(--light-color);
        }

         .process-steps li::before {
            content: counter(step-counter);
            counter-increment: step-counter;
            position: absolute;
            left: 0px; /* Position left edge at 0 */
            top: 50%;
            transform: translateY(-50%);
            background-color: #2196F3;
            color: white;
            width: 28px; /* Smaller size */
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.9em; /* Smaller font */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 1; /* Ensure it's above text */
        }


         .process-steps li strong {
             color: var(--light-bg); /* Blue color for step title */
             font-size: 1.1em;
             display: block;
             margin-bottom: 5px;
         }





        .initiative-section {
            padding: 50px 0;
        }

        .initiative-section:nth-of-type(odd) { /* Continue alternating background */
             background-color: #f8f8f8;
        }
         .initiative-section:nth-of-type(even) {
             background-color: #ffffff;
         }


        .initiative-section h2 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2em;
            color: #333;
            position: relative;
            padding-bottom: 10px;
        }

        .initiative-section h2::after { /* Theme color underline */
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #2e7d32;
        }


        .initiative-section p {
            margin-bottom: 20px;
            line-height: 1.7;
            color: #555;
        }

        .initiative-section ul {
            list-style: none;
            padding: 0;
            margin-bottom: 20px;
        }

        .initiative-section li {
             background-color: #fff;
             border-left: 4px solid #55b959; /* Theme color accent */
             margin-bottom: 15px;
             padding: 15px 20px;
             border-radius: 5px;
             box-shadow: 0 1px 3px rgba(0,0,0,0.08);
             line-height: 1.6;
        }

        .initiative-section li strong {
            color: #2e7d32; /* Highlight main point */
            font-size: 1.1em;
            display: block;
            margin-bottom: 5px;
        }







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

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

.footer-column h3 {
    color: var(--white); /* White headings in footer */
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h3:after {
    content: '';
    position: absolute;
    width: 40px;
    height: 3px;
    background: var(--secondary-color);
    bottom: 0;
    left: 0;
}

.footer-column p {
    opacity: 0.8;
    margin-bottom: 15px;
    color: var(--white); /* Ensure footer text is white */
}

.footer-links {
    list-style: none;
    padding: 0; /* Removed default padding */
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--white);
    opacity: 0.8;
    transition: var(--transition);
}

.footer-links a:hover {
    opacity: 1;
    padding-left: 5px;
}

.social-links { /* Used in footer */
    display: flex;
    gap: 15px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--white);
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--secondary-color);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white); /* Ensure copyright text is white */
    opacity: 0.8;
}




        .td-section:nth-of-type(odd) {
            background-color: #f8f8f8; /* Alternating background */
        }

        .td-section:nth-of-type(even) {
             background-color: #ffffff;
        }


        .td-section h2 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2em;
            color: #333;
            position: relative;
            padding-bottom: 10px;
        }

        .td-section h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #2e7d32; /* Theme color */
        }

        .td-section p {
            margin-bottom: 20px;
            line-height: 1.7;
            color: #555;
        }





/* Resources Page Styling */
.resources-hero {
    background: var(--ubuntu-gradient);
    color: var(--white);
    padding: 120px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.resources-hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Add a background image specific to the resources hero if desired */
    /* background: url('../images/your-resources-hero-bg.jpg') no-repeat center center/cover; */
    opacity: 0.3;
    z-index: 1;
}

.resources-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.resources-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 15px;
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.resources-hero h2 {
    font-size: 1.6rem;
    color: var(--white);
    margin-bottom: 25px;
    font-weight: 400;
}

.resources-hero p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    opacity: 0.9;
}

.resources-section {
    padding: 60px 0;
    background-color: var(--light-color);
}

.resources-section .section-title {
    margin-bottom: 40px;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    padding: 20px; /* Keep padding for inner spacing */
}

.resource-category {
    background-color: var(--white);
    border-radius: 10px;
    padding: 25px;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    display: flex; /* Use flexbox for internal layout */
    flex-direction: column; /* Stack content vertically */
}

.resource-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.resource-category h4 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;     /* Ensure heading doesn't shrink */
}

.resource-category h4 i {
    font-size: 1.6rem;
    color: var(--secondary-color);
}

.resource-category ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0; /* Remove default ul top margin */
    flex-grow: 1; /* Allow list to take available space */
}


/* Resources Page Styling _ Enhanced Styling for Individual Resource Links */
.resource-category ul li {
    margin-bottom: 15px; /* Space between list items */
    padding: 15px; /* Add padding to the list item */
    border: 1px solid #eee; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth hover transition */
    background-color: var(--white); /* Explicit background */
    line-height: 1.4; /* Adjust line height for readability */
}

.resource-category ul li:last-child {
    margin-bottom: 0;
}

.resource-category ul li:hover {
    background-color: var(--light-color); /* Light background on hover */
    border-color: var(--primary-color); /* Highlight border on hover */
}

/* Style for the link itself */
.resource-category ul li a {
    display: flex; /* Use flexbox to align title and icon */
    flex-direction: column; /* Stack title and description */
    color: var(--text-color); /* Default text color for the link block */
    text-decoration: none; /* Remove default underline */
    transition: color 0.3s ease;
}

.resource-category ul li a:hover {
     color: var(--primary-color); /* Change color of the whole block on hover */
}


/* Style for the link title span */
.resource-category ul li .link-title {
    font-weight: 600; /* Make title bold */
    font-size: 1.05rem; /* Slightly larger font for title */
    color: var(--primary-color); /* Primary color for the title */
    margin-bottom: 5px; /* Space between title and description */
    transition: color 0.3s ease;
}

.resource-category ul li a:hover .link-title {
    color: var(--accent-color); /* Accent color on link hover */
}


/* Style for the description paragraph */
.resource-category ul li .link-description {
    font-size: 0.95rem; /* Slightly smaller font size */
    color: var(--text-light); /* Lighter color for description */
    margin-bottom: 0; /* Remove default paragraph margin */
    opacity: 0.9;
}

/* Style for the external link icon (optional, if added) */
.resource-category ul li .link-icon {
    font-size: 0.9em; /* Slightly smaller icon */
    color: var(--text-light); /* Lighter color for icon */
    margin-left: 10px; /* Space from description */
    flex-shrink: 0; /* Prevent icon from shrinking */
    align-self: flex-start; /* Align icon to the top if using flex-direction: row */
    transition: color 0.3s ease;
}

.resource-category ul li a:hover .link-icon {
     color: var(--secondary-color); /* Change icon color on link hover */
}

/* Style for paragraph tags directly within resource categories (like "Search for...") */
.resource-category p {
    margin-bottom: 10px;
    opacity: 0.9;
    /* Ensure these paragraphs are not styled like the link descriptions */
    font-size: 1rem; /* Default paragraph size */
    color: var(--text-color); /* Default paragraph color */
}

.resources-section .call-to-action {
    text-align: center;
    padding: 50px 20px;
    background-color: #f0f8f0; /* Light green background */
    border-radius: 10px;
    margin-top: 40px;
}

.resources-section .call-to-action h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}


/* Donate Page Styles */
/* These styles are added to style.css */

/* Hero Section Specific Styles (Overrides for .ubuntu or .hero if used) */
.donate-hero {
    /* Removed background gradient and image overlay */
    background-color: transparent; /* Or use var(--light-color); or var(--light-bg); */
    color: var(--dark-color); /* Adjusted text color for light background */
    padding: 160px 0 80px; /* Increased top padding, kept bottom padding */
    text-align: center; /* Keep content centered */
    margin-bottom: 5px; /* Reduced space below the hero */
}

.donate-hero h1 {
    color: var(--dark-color); /* Dark color for readability on a light background */
    margin-bottom: 15px;
    font-size: 3rem; /* Made the H1 larger */
}

.donate-hero h2 {
    color: var(--primary-color); /* Suitable color for subheading */
    margin-bottom: 20px;
}

.donate-hero p {
    color: var(--text-color); /* Default text color */
    max-width: 700px; /* Limit paragraph width for readability */
    margin: 0 auto 30px; /* Center paragraph and add space below */
    font-size: 1.1rem;
    line-height: 1.6;
}


/* Donation Options Section (Overrides for .mission-section if used) */
.donation-options-section {
    /* Inherits padding and background from .mission-section if used */
    padding: 40px 0;
    background: var(--light-color);
    border-radius: 12px;
}

.donation-options-section .container {
     /* Inherits container styles */
    padding: 0 20px;
}

/* Donation Grid (Overrides for .project-grid if used) */
.donation-grid {
    /* Inherits grid layout from .project-grid */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 4px; /* Reduced space above the grid */
}

/* Individual Donation Card (Overrides for .project-card if used) */
.donation-card {
    /* Inherits card styles from .project-card */
    border-radius: 10px;
    /* overflow: hidden; */
    /* box-shadow: var(--box-shadow); */
    /* transition: var(--transition); */
    display: flex; /* Added flexbox for donation cards layout */
    flex-direction: column; /* Stack content vertically */
    align-items: flex-start; /* Align content to the left */
    border: 1px solid var(--border-color);
    padding: 30px; /* Inherited from project-card */
}

.donation-card:hover {
    /* Inherits hover styles from .project-card */
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Styles for the donation icons (Overrides for .mission-icon if used) */
.donation-icon {
    font-size: 2.5rem; /* Larger icons */
    color: var(--primary-color); /* Use primary color for icons */
    margin-bottom: 15px;
    /* Inherits other styles from .mission-icon if used */
    width: 70px; 
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    margin: 0 auto 20px;
    /* color: var(--white); */
}


.donation-card h3 {
    /* Inherits heading styles */
    /* color: var(--heading-color); */
    /* margin-top: 0; */
    /* margin-bottom: 15px; */
    /* font-size: 1.5rem; */
}

.donation-card p {
    /* Inherits paragraph styles */
    /* color: var(--text-color); */
    /* margin-bottom: 15px; */
    /* line-height: 1.6; */
}

/* Style for the details blocks within donation cards */
.donation-details {
    background-color: var(--light-bg); /* Use your defined light background color */
    border-left: 4px solid var(--primary-color); /* Accent border using primary color */
    padding: 15px;
    border-radius: 0 8px 8px 0; /* Rounded corners on the right */
    margin-bottom: 20px;
    width: 100%; /* Take full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Style for text within donation details */
.donation-details p,
.donation-details ol,
.donation-details ul {
    margin: 0 0 10px 0; /* Space between detail lines */
    color: var(--text-light); /* Lighter text for details */
    font-size: 0.95rem;
    line-height: 1.6;
}

.donation-details p:last-child,
.donation-details li:last-child {
    margin-bottom: 0; /* No bottom margin for the last item */
}

.donation-details strong {
    color: var(--dark-color); /* Stronger color for labels */
}

.donation-details ol,
.donation-details ul {
    padding-left: 20px; /* Indent lists */
}

.donation-details li {
    margin-bottom: 8px; /* Space between list items */
}

/* Style for the Bitcoin address code block */
.donation-details code.bitcoin-address {
    background-color: var(--light-color); /* Using --light-color from your style.css */
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace; /* Monospace font */
    font-size: 0.9em;
    color: var(--dark-color); /* Using --dark-color from your style.css */
    word-break: break-all; /* Break long addresses */
    display: inline-block; /* Allows padding and margins */
    margin-bottom: 10px; /* Space below the code */
}

/* Style for the note paragraphs */
p.note {
    font-size: 0.9em;
    color: var(--text-light); /* Using --text-light from your style.css */
    margin-top: -10px; /* Pull note closer to details */
    margin-bottom: 20px;
    font-style: italic;
}

/* Style for the QR code image (if you add one) */
.qr-code {
    display: block; /* Ensure image is on its own line */
    max-width: 150px; /* Max size for QR code */
    height: auto;
    margin: 15px auto; /* Center QR code */
    border: 1px solid var(--border-color); /* Using --border-color (assuming it's defined) */
    border-radius: 4px;
}

/* Specific styling for the copy address button within the project card */
.project-card .copy-address-btn {
    margin-top: auto; /* Push button to the bottom of the flex container (.project-card) */
    align-self: center; /* Center button horizontally within the flex container */
    /* Inherits other button styles from .btn and .btn-outline */
}


/* ======== Responsive Styles - Media Queries ======== */

/* Adjustments for screens up to 992px wide */
@media (max-width: 992px) {
    /* Adjust about content layout for medium screens */
    .about-content {
        grid-template-columns: 1fr;
        text-align: center; /* Center text on single column */
    }

    .about-img {
        order: -1; /* Place image above text by default */
        margin-bottom: 30px; /* Add space below image when stacked */
    }

    /* Ensure reverse class works, resetting order for 992px and below */
    .reverse .about-text,
    .reverse .about-img {
        order: initial;
    }

    /* Project grid adjustment for medium screens */
    .project-grid {
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Slightly smaller min width for project cards */
    }

     /* Hero section text size adjustments */
     .hero h1 {
         font-size: 2.5rem;
     }

     .hero h2 {
         font-size: 1.5rem;
     }

     .section-title h2 { /* Adjust section title size */
         font-size: 2rem;
     }

    /* Donate page specific adjustments for medium screens */
    .donate-hero {
        padding: 120px 0 60px; /* Adjusted padding */
        margin-bottom: 4px; /* Reduced space below hero */
    }

    .donate-hero h1 {
        font-size: 2.5rem; /* Keep this size for medium screens */
    }

    .donate-hero h2 {
        font-size: 1.5rem;
    }

     .donation-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px; /* Slightly smaller gap */
        margin-top: 2.5px; /* Reduced space above grid */
    }

    .donation-card {
        padding: 20px;
    }

    .donation-icon {
        font-size: 2rem;
    }

    .donation-card h3 {
        font-size: 1.3rem;
    }

    /* Resource grid adjustment for medium screens */
    .resources-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjusted min width */
        gap: 20px; /* Slightly smaller gap */
        padding: 15px; /* Adjusted padding */
    }

    .resource-category {
        padding: 20px; /* Adjusted padding */
    }

    .resource-category h4 {
        font-size: 1.3rem; /* Slightly smaller heading */
    }

    .resource-category h4 i {
        font-size: 1.5rem; /* Adjusted icon size */
    }

    .resource-category ul li {
        padding: 12px; /* Adjusted padding */
        margin-bottom: 10px; /* Adjusted margin */
    }

    .resource-category ul li .link-title {
        font-size: 1rem; /* Adjusted font size */
    }

    .resource-category ul li .link-description {
        font-size: 0.9rem; /* Adjusted font size */
    }

    .resources-section .call-to-action {
        padding: 40px 15px; /* Adjusted padding */
    }

    .resources-section .call-to-action h3 {
        font-size: 1.6rem; /* Adjusted font size */
    }
}


/* Adjustments for screens up to 768px wide */
@media (max-width: 768px) {
    .features-section {
        background-attachment: scroll; /* Change background attachment on scroll */
    }

    /* Mobile Menu Button */
    .mobile-menu-btn {
        display: block; /* Show button on small screens */
        font-size: 1.8rem; /* Slightly larger icon */
        cursor: pointer;
        background: none;
        border: none;
        z-index: 1001; /* Ensure it's above the header and menu */
        color: var(--dark-color); /* Use dark color for the icon */
        transition: transform 0.3s ease; /* Add transition for rotation */
        line-height: 1; /* Helps vertically align the icon */
        padding: 5px; /* Add some padding for easier clicking */
    }

    /* Rotate the button when the nav is active (choose the selector that matches your HTML/JS)
    If you add an 'is-active' class directly to the button (recommended):
    .header-container .mobile-menu-btn.active {
         transform: rotate(90deg);
    } */

    /* Hide desktop navigation */
    nav {
        display: none; /* Hide desktop nav on small screens */
        position: fixed;
        top: 70px; /* Adjusted to match likely header height (logo height + padding) */
        left: -100%; /* Start off-screen */
        width: 80%; /* Menu takes up 80% of the width */
        max-width: 300px; /* Optional: Set a max width for the menu */
        height: calc(100vh - 70px); /* Adjust height calculation accordingly */
        background: var(--white);
        box-shadow: var(--box-shadow);
        transition: left 0.3s ease; /* Transition for sliding */
        z-index: 999; /* Below the button */
        flex-direction: column;
        padding: 20px 0; /* Add vertical padding, list items will handle horizontal */
        overflow-y: auto; /* Allows scrolling if menu content overflows */
    }

    nav.active {
        display: flex; /* Show mobile nav when active */
        left: 0; /* Slide in */
    }

    nav ul {
        flex-direction: column;
        padding: 0; /* Remove default ul padding */
        list-style: none; /* Ensure no list bullets */
        width: 100%; /* Make ul take full width of nav */
    }

    nav ul li {
        margin: 0; /* Remove margin between list items */
        border-bottom: 1px solid #eee; /* Add a subtle separator */
    }

    nav ul li:last-child {
         border-bottom: none; /* No border on the last item */
    }

    nav ul li a {
        display: block; /* Make the whole list item clickable */
        padding: 15px 20px; /* Add padding for touch target and spacing */
        font-weight: 600;
        color: var(--text-color); /* Link color */
        position: relative;
        transition: background-color 0.3s ease, color 0.3s ease; /* Add transition for hover */
    }

    nav ul li a:hover {
         background-color: var(--light-color); /* Highlight on hover */
         color: var(--primary-color); /* Change color on hover */
    }

    nav ul li a:after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        background: var(--secondary-color);
        bottom: 0; /* Position underline at the bottom of the padded link */
        left: 20px; /* Align underline with padding */
        transition: width 0.3s ease;
    }

    nav ul li a:hover:after {
        width: calc(100% - 40px); /* Underline width matches padding */
    }

    /* Adjust about content layout for smaller screens */
    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-text { /* Applies when about-content is single column */
         order: 2; /* Set text order below image */
         margin-top: 30px; /* Add margin above text when stacked */
    }

    .value-list li {
        justify-content: center; /* Center value list items */
    }

    /* Adjust mission grid layout for smaller screens */
    .mission-grid {
        grid-template-columns: 1fr; /* Single column layout for mission */
    }

    /* Adjust timeline grid layout for smaller screens */
    .timeline-grid {
        grid-template-columns: 1fr; /* Single column layout for timeline */
    }

    /* Adjust impact stats layout for smaller screens */
    .stats-grid {
        grid-template-columns: 1fr; /* Single column layout for stats */
    }

    /* Specific adjustment between consecutive about sections */
    .about-section + .about-section {
        padding-top: 30px;
        margin-top: -30px;
    }

    /* Specific styles for other sections found in the media queries */
    .about-hero h1 { /* Assuming .about-hero is a specific hero for an about page */
        font-size: 2.5rem;
    }
    .about-hero p {
        font-size: 1rem;
    }
    .founder-content { /* Assuming .founder-content is a layout grid */
        grid-template-columns: 1fr;
    }
    .founder-image {
        order: 1;
        margin-bottom: 20px;
    }
    .founder-info {
        order: 2;
    }

    /* Filter section adjustments */
    .event-filter-section .container {
        flex-direction: column;
        gap: 1rem;
    }

    .filter-group select {
         width: 100%; /* Full width on small screens */
         margin-bottom: 15px; /* Space between selects */
     }

     .filter-controls {
         flex-direction: column; /* Stack filters vertically on small screens */
         align-items: flex-start;
     }

     .filter-group {
         width: 100%;
     }

    /* Donate page specific adjustments for small screens */
    .donate-hero {
         padding: 100px 0 60px; /* Adjusted padding */
         margin-bottom: 2.5px; /* Reduced space below hero */
    }
    .donate-hero h1 {
        font-size: 2rem; /* Smaller H1 on very small screens */
    }

    .donate-hero h2 {
        font-size: 1.2rem;
    }

    .donation-grid {
        grid-template-columns: 1fr; /* Stack cards on very small screens */
         margin-top: 1.5px; /* Reduced space above grid */
    }

    .donation-details {
        padding: 10px;
    }

    /* Resource grid adjustment for small screens */
    .resources-grid {
        grid-template-columns: 1fr; /* Single column layout */
        gap: 15px; /* Adjusted gap */
        padding: 10px; /* Adjusted padding */
    }

    .resource-category {
        padding: 15px; /* Adjusted padding */
    }

    .resource-category h4 {
        font-size: 1.2rem; /* Smaller heading */
    }

    .resource-category h4 i {
        font-size: 1.4rem; /* Adjusted icon size */
    }

    .resource-category ul li {
        padding: 10px; /* Adjusted padding */
        margin-bottom: 8px; /* Adjusted margin */
    }

    .resource-category ul li .link-title {
        font-size: 0.95rem; /* Adjusted font size */
    }

    .resource-category ul li .link-description {
        font-size: 0.85rem; /* Adjusted font size */
    }

    .resources-section .call-to-action {
        padding: 30px 10px; /* Adjusted padding */
    }

    .resources-section .call-to-action h3 {
        font-size: 1.4rem; /* Adjusted font size */
    }
}


/* Adjustments for screens up to 576px wide (very small screens) */
@media (max-width: 576px) {
    .hero { /* Tighter padding on hero section */
        padding: 120px 0 80px;
    }

    .hero h1 { /* Smaller hero heading */
        font-size: 2rem;
    }

    .hero h2 { /* Smaller hero subheading */
        font-size: 1.2rem;
    }

    .btn { /* Smaller button padding */
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .section-title h2 { /* Smaller section title */
        font-size: 2rem;
    }

    /* Specific project grid adjustment for very small screens */
     .project-grid {
         grid-template-columns: 1fr; /* Single column layout */
         padding: 0 1rem; /* Adjusted padding */
     }

     .project-img { /* Smaller image height */
         height: 200px;
     }

      /* Stack event actions on very small screens */
      .event-actions {
        display: flex; /* Ensure flexbox is applied */
        flex-direction: column;
        align-items: center; /* Center items when stacked */
        margin-top: 15px; /* Add space above actions */
      }

      .event-actions .btn { /* Adjust button margin when stacked */
         margin: 5px 0;
      }

     /* Donate page specific adjustments for very small screens */
     .donate-hero {
         padding: 100px 0 60px; /* Adjusted padding */
         margin-bottom: 1.5px; /* Further reduced space below hero */
     }
      .donation-grid {
         margin-top: 1px; /* Further reduced space above grid */
     }

    /* Resource grid adjustment for very small screens */
    .resources-grid {
        gap: 10px; /* Further reduced gap */
        padding: 5px; /* Further reduced padding */
    }

    .resource-category {
        padding: 10px; /* Further reduced padding */
    }

    .resource-category h4 {
        font-size: 1.1rem; /* Smaller heading */
    }

    .resource-category h4 i {
        font-size: 1.3rem; /* Adjusted icon size */
    }

    .resource-category ul li {
        padding: 8px; /* Further reduced padding */
        margin-bottom: 5px; /* Further reduced margin */
    }

    .resource-category ul li .link-title {
        font-size: 0.9rem; /* Adjusted font size */
    }

    .resource-category ul li .link-description {
        font-size: 0.8rem; /* Adjusted font size */
    }

    .resources-section .call-to-action {
        padding: 20px 5px; /* Adjusted padding */
    }

    .resources-section .call-to-action h3 {
        font-size: 1.2rem; /* Adjusted font size */
    }
}


/* Animations */

@keyframes slide-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Continues to move 50% of the container's width */
    }
}

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

.animate {
    animation: fadeIn 1s ease forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }


/* Subtle animation for "No events found matching your criteria." when it appears */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.no-projects-message {
    animation: fadeIn 0.5s ease-in-out;
}