/* Cookie Banner Styling for Mobile Screens */
@media (max-width: 768px) {
    #cookie-banner {
        padding: 15px; /* Reduce padding for smaller devices */
        flex-direction: column; /* Stack the content vertically */
        text-align: center; /* Center text for better readability */
    }

    #cookie-banner p {
        margin-bottom: 15px; /* Add spacing between text and buttons */
        font-size: 0.9rem; /* Reduce font size for better fit */
    }

    .cookie-banner-buttons {
        flex-direction: column; /* Stack buttons vertically */
        gap: 10px; /* Add spacing between buttons */
    }

    #cookie-banner .cookie-button {
        width: 100%; /* Make buttons full width for easier tapping */
        padding: 10px; /* Adjust padding for a better touch area */
        font-size: 0.85rem; /* Adjust font size to maintain readability */
    }

    /* Hamburger Menu Visibility for Mobile */
    .hamburger {
        display: block; /* Show hamburger icon on mobile */
    }

    /* Navbar Styles for Mobile */
    .navbar {
        display: none; /* Hidden by default on mobile */
        flex-direction: column;
        width: 100%;
        background-color: #9DC209;
        position: absolute;
        top: 80px; /* Adjust depending on header height */
        left: 0;
        z-index: 3000; /* Ensure the navbar appears above all other elements */
    }

    .navbar.active {
        display: flex; /* Show navbar when hamburger icon is clicked */
    }

    .navbar ul {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    /* Override for .container on mobile */
    .container {
        max-width: 100%; /* Full-width container for mobile */
        padding: 10px; /* Reduced padding for a better mobile fit */
    }

    /* Single Column Layout for Mobile */
    .placements-card-grid, .team-card-grid, .card-grid, .grid-container {
        grid-template-columns: 1fr; /* Stack all items in one column for mobile */
    }

    .three-column-list {
        column-count: 2; /* Set to 2 columns for mobile screens */
    }

    /* Header Adjustments for Mobile */
    .header-content {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    /* Image Brochure Section */
    .image-brochure-section {
        background-color: #f9f9f9; /* Light background to differentiate the section */
        padding: 40px 15px 30px; /* Add padding for spacing */
    }

    .index-image {
        display: grid;
        grid-template-rows: auto auto; /* Two rows: 1 for image, 1 for text */
        text-align: center; /* Center all content */
        border-radius: 15px; /* Rounds the corners of the grid container */
        overflow: hidden; /* Ensures the rounded corners apply to contents as well */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Optional: Add a subtle shadow for depth */
    }

    .index-image .brochure-image {
        width: 100%; /* Ensures the image scales within the container */
        max-width: 100%; /* Limits the width to fit the container */
        height: auto; /* Maintains image aspect ratio */
        border-radius: 15px; /* Remove any extra radius on the image */
    }

    .index-image .brochure-text {
        font-size: 1.5em;
        color: #DC381F; /* Matches the red used elsewhere in the design */
        margin-top: 20px; /* Space between image and text */
        font-weight: bold; /* Adds emphasis to the text */
        font-family: 'Nunito', sans-serif;
        padding: 8px 15px; /* Adds padding inside the text area */
        background-color: #fff; /* White background for text row */
        max-height: 80vh;
        object-fit: contain;
    }

    /* Image Gallery Section */
    .image-gallery {
        background-color: #fff;
        padding: 60px 40px;
    }

    .image-gallery h2 {
        text-align: center;
        margin-bottom: 20px;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        justify-content: center;
    }

    .gallery-item {
        background: #f4f4f4;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .gallery-item img {
        width: 300px;
        height: 200px;
        object-fit: cover;
        border-radius: 5px;
    }

    /* Footer Adjustments for Mobile */
    .footer-content {
        padding: 15px;
        font-size: 14px;
    }
}