/* Disable horizontal scrolling and interactions on the page when the video modal is open */
body.modal-open [data-scroll-container] {
    overflow-x: hidden !important;  
    pointer-events: none !important; 
    transform: none !important; 
}

/* Enable interaction specifically for the video modal */
body.modal-open .video-modal, 
body.modal-open .video-modal * {
    pointer-events: all !important;
}

/* Allow interaction with the video modal backdrop */
body.modal-open .video-modal .modal-backdrop {
    pointer-events: all !important;
}

/* Video modal specific styles */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 1055; /* Higher z-index for the video modal */
    overflow: hidden;
    border-radius: 8px; /* Rounded corners for the video modal only */
    background-color: transparent; /* Transparent background for video modal */
}

.video-modal .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.95;
    z-index: 1050;
}

.video-modal .modal-dialog {
    width: 80%;
    z-index: 1060;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px; /* Rounded corners for video modal dialog */
}

.video-modal .modal-content {
    background-color: transparent;
    border-radius: 8px; /* Rounded corners for video modal content */
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.video-modal .video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Maintain a 16:9 aspect ratio */
    height: 0;
}

.video-modal .video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Close button */
.video-modal .modal-close {
    position: fixed;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    z-index: 1070;
}

/* Responsive styles for video modal */
@media (max-width: 768px) {
    .video-modal .modal-dialog {
        width: 95%;
    }
}

@media (max-width: 480px) {
    .video-modal .modal-dialog {
        width: 100%;
        margin: 0 10px;
    }
    .video-modal .modal-close {
        top: 5px; 
        right: 10px;
        position: fixed;
    }
}