.video-container {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        /* Maintains widescreen aspect ratio */
        overflow: hidden;
        border-radius: 8px;
   
    }

    .video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensures video is proportional without stretching */
        transition: transform 0.3s ease;
        /* Smooth hover zoom */
    }

    /* Overlay styling */
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        /* Semi-transparent overlay */
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        color: #fff;
    }

    .overlay i {
        color: #fff;
        font-size: 32px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    /* Hover effects */
    .video-container:hover video {
        transform: scale(1.1);
        /* Zoom effect */
    }

    .video-container:hover .overlay {
        opacity: 1;
        /* Show overlay on hover */
    }

    .overlay:hover i {
        transform: scale(1.2);
        /* Slightly enlarge icon on hover */
    }

    /* Modal styling */
    .modal-body {
        position: relative;
        padding: 0;
    }

    .modal-body video {
        width: 100%;
        height: auto;
    }

    .btn-close {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
        border: none;
        font-size: 20px;
        color: #fff;
        cursor: pointer;
    }

    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 568px;
        }
    }