/* Modal Overlay */
        .modal {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3); /* Set opacity of the black background to 30% */
            z-index: 1000;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s, opacity 0.3s;
        }

        /* Modal Content */
        .modal-content {
            position: relative;
            width: 70%; /* Increased width on desktop */
            max-width: 1000px; /* Larger max-width */
            background-color: #000;
            height: 60%; /* Increased height on desktop */
        }

        .modal-content iframe {
            width: 100%;
            height: 100%;
        }

        /* Close Button */
        .close-button {
            position: absolute;
            top: 10px;
            right: 15px;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            z-index: 1100; /* Ensure the button stays on top */
        }

        /* Fullscreen on mobile */
        @media (max-width: 768px) {
            .modal-content {
                width: 95%; /* Increased width on mobile */
                height: 75%; /* Increased height for better vertical size */
                max-width: 95%; /* Limit the width to prevent stretching */
                max-height: 85vh; /* Adjust max-height to 85% for more vertical space */
            }

            /* Make the close button bigger and adjust position for mobile */
            .close-button {
                font-size: 36px; /* Bigger size for mobile */
                top: 20px; /* Adjust the top position */
                right: 20px; /* Adjust the right position */
            }
        }