.container {
            width: 65%;
            margin: 0 auto;
        }

        .grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px; /* Set the gap between the items to 20px */
        }

        .grid-item {
            width: calc(50% - 20px); /* Adjust width to account for 20px gap */
            position: relative;
            cursor: pointer;
            overflow: hidden;
            padding-bottom: 45px;
        }

        .grid-item img {
            width: 100%;
            display: block;
            object-fit: cover; /* Ensure the image covers the container while maintaining aspect ratio */
        }

        .grid-item .title {
            position: absolute;
            color: black;
            font-size: 18px;
            padding-top: 5px;
            padding-bottom: 10px;
            text-align: center;
            font-family: 'eviteyou', 'Helvetica Neue', sans-serif;
        }

        /* Lightbox styles */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .lightbox-content {
            position: relative;
            text-align: center;
        }

        .lightbox img {
            max-width: 90%;
            max-height: 80vh;
        }

        .lightbox .lightbox-title {
            color: white;
            margin-top: 10px;
            font-size: 18px;
        }

        .lightbox button {
            position: absolute;
            background: rgba(255, 255, 255, 0);
            border: none;
            padding: 12px;
            font-size: 30px;
            cursor: pointer;
            z-index: 1;
            color: white;
            text-decoration: none;
        }

        .close-btn {
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
        }

        .prev-btn {
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
        }

        .next-btn {
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Ensure that the container is responsive */
        .image-container {
            position: relative;
            width: 100%;
            height: 550px;
            overflow: hidden;
        }

        /* Make the image responsive */
        .background-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the container */
        }

        /* Overlay with a semi-transparent background */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Black overlay with transparency */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Style for the centered text */
        .text {
            text-align: center;
        }

        .gallery-container {
            text-align: left;
            position: relative;
        }

        #gallery-image {
            width: 100%;
            height: auto;
            transition: opacity 0.3s ease;
        }

        button {
            cursor: pointer;
            border: none;
            background-color: #fcfcf9;
        }

        /* Media Query for mobile responsiveness */
        @media (max-width: 768px) {
            .grid-item {
                width: calc(100% - 0px); /* Single column with 20px gap for smaller screens */
                padding-left: 15px; /* Left padding */
                padding-right: 15px; /* Right padding */
            }

            .grid-item .title {
                font-size: 18px;
                padding-top: 5px;
                padding-bottom: 10px;
            }

            .container {
                width: 100%; /* Full width on smaller screens */
            }
        }

        @media (max-width: 480px) {
            .grid-item .title {
                font-size: 18px; /* Smaller title font size for small screens */
                padding-top: 5px;
                padding-bottom: 10px;
            }
        }