/* Container for the entire slider */
        .slider-container {
            position: relative;
     
            max-width: 1200px; /* Max width for a desktop view */
            height: 85vh;
            max-height: 800px;
            border-radius: 20px;
            border-color: transparent;
            background-color: transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
    
            /* box-sizing: border-box; */
            overflow: hidden; /* Hide overflowing content in the container itself */
        }



        /* Wrapper for video items to enable sliding */
        .video-wrapper {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: calc(100% - 60px); /* Adjust height for title */
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth slide transition */
            position: relative;
            left: 0; /* Important for translateX base */
            /* Removed padding-left/right here, will handle spacing with gap */
            box-sizing: border-box;
            gap: 30px; /* Space between video cards */
            justify-content: flex-start; /* Align items to the start */
        }

        /* Individual video item styling */
        .video-item {
            flex-shrink: 0; /* Prevent items from shrinking */
            height: 100%; /* Take full height of wrapper */
            display: flex;
            justify-content: center;
            align-items: center;
        
            border-radius: 18px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
            transition: transform 0.3s ease-in-out;
            /* Width will be set by JavaScript based on itemsPerView */
        }

        .video-item video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 18px;
        }

        /* Navigation buttons */
        .nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--bs-burgundy); /* Purple, semi-transparent */
            color: #fff;
            border: none;
            padding: 15px 18px;
            border-radius: 50%; /* Circular buttons */
            cursor: pointer;
            font-size: 1.5rem;
            font-weight: 700;
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            z-index: 10; /* Ensure buttons are above videos */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none; /* Remove outline on focus */
        }

        .nav-button:hover {
            background-color: var(--burgundy-color); /* Deeper purple on hover */
            transform: translateY(-50%) scale(1.05); /* Slight enlarge */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .nav-button:active {
            transform: translateY(-50%) scale(0.98); /* Press effect */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .prev-button {
            left: 10px;
        }

        .next-button {
            right: 10px;
        }

        /* Disabled button style */
        .nav-button:disabled {
            background-color: rgba(189, 195, 199, 0.4); /* Lighter, more transparent */
            cursor: not-allowed;
            box-shadow: none;
            transform: translateY(-50%);
        }

        /* Message box for alerts */
        .message-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 20px 30px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
            z-index: 1000;
            display: none;
            text-align: center;
            font-size: 1.1rem;
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, -60%); }
            to { opacity: 1; transform: translate(-50%, -50%); }
        }

        /* Responsive adjustments */
        @media (max-width: 1024px) {
            /* No specific width for video-item here, handled by JS */
        }

        @media (max-width: 768px) {
            .slider-container {
                width: 95%;
                height: 90vh;
                padding: 20px;
                border-radius: 15px;
            }

            .slider-title {
                font-size: 1.8rem;
                margin-bottom: 25px;
            }

            .nav-button {
                padding: 12px 15px;
                font-size: 1.2rem;
            }
        }

        @media (max-width: 480px) {
            .slider-container {
                width: 100%;
                height: 100vh;
                padding: 15px;
                border-radius: 0;
                box-shadow: none;
            }

            .slider-title {
                font-size: 1.6rem;
                margin-bottom: 20px;
            }
        }