/* CSS-Only Accordion Styles */
        
        :root {
            --orange: #FFA500;
            --gray: #808080;
            --black: #000000;
            --white: #FFFFFF;
            --light-gray: #f0f0f0;
        }

        body {
            font-family: 'Inter', sans-serif; /* Using Inter as requested */
            margin: 0;
            padding: 20px;
            background-color: var(--light-gray);
            color: var(--black);
            /* text-align: center; */
        }

        h1 {
            color: var(--orange);
            margin-bottom: 30px;
            font-size: 2em;
        }

        /* General Section Styles */
        .content-section {
            padding: 20px;
            margin-bottom: 20px;
            background-color: var(--white);
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        /*
        .content-section h2 {
            color: var(--orange);
            margin-bottom: 20px;
            font-size: 1.8em;
        }
        */

        /* Gallery Styles */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid */
            gap: 20px;
            padding: 20px 0;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .gallery-item:hover {
            transform: translateY(-5px);
        }

        .gallery-item img {
            width: 100%;
            height: 150px; /* Fixed height for thumbnails */
            object-fit: cover; /* Ensures images cover the area without distortion */
            display: block;
            border-radius: 8px;
        }

        /* Pop-out Overlay Styles */
        .popout-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9); /* Dark overlay */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: 20px; /* Padding for mobile screens */
            box-sizing: border-box; /* Include padding in element's total width and height */
        }

        /* When the overlay is targeted by the URL hash, make it visible */
        .popout-overlay:target {
            opacity: 1;
            visibility: visible;
        }

        .popout-content {
            background-color: var(--black);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 90%; /* Max width for content on smaller screens */
            max-height: 90%; /* Max height for content on smaller screens */
            overflow: auto; /* Enable scrolling if content is too large */
            position: relative; /* For positioning the close button */
        }

        .popout-content img {
            max-width: 100%;
            max-height: 70vh; /* Max height relative to viewport height */
            height: auto;
            display: block;
            border: 3px solid var(--orange);
            border-radius: 8px;
            margin-bottom: 15px;
        }

        .popout-content p {
            color: var(--white);
            text-align: center;
            font-size: 1.1em;
            line-height: 1.4;
            max-width: 600px; /* Limit text width for readability */
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            color: var(--white);
            font-size: 2.5em;
            text-decoration: none;
            line-height: 1;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            transition: background-color 0.3s ease;
        }

        .close-btn:hover {
            background-color: var(--orange);
        }

        .accordion-item {
            border: 1px solid var(--gray);
            border-radius: 8px;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .accordion-input {
            display: none; /* Hide the actual checkbox */
        }

        .accordion-label {
            display: block;
            background-color: var(--gray);
            color: var(--white);
            padding: 15px 20px;
            cursor: pointer;
            font-size: 1.1em;
            text-align: left;
            transition: background-color 0.3s ease;
            position: relative;
        }

        .accordion-label::after {
            content: '+'; /* Plus sign for collapsed state */
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5em;
            transition: transform 0.3s ease;
        }

        .accordion-input:checked + .accordion-label {
            color: white;
            background-color: orange;
        }

        .accordion-input:checked + .accordion-label::after {
            content: '-'; /* Minus sign for expanded state */
            transform: translateY(-50%) rotate(0deg); /* Reset rotation if any */
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out; /* Smooth transition for height */
            background-color: var(--white);
            padding: 0 20px; /* Initial padding, will expand with content */
        }

        .accordion-input:checked ~ .accordion-content {
            max-height: 500px; /* A large enough value to ensure content is visible */
            padding-top: 15px; /* Add padding when expanded */
            padding-bottom: 15px; /* Add padding when expanded */
        }