@charset "utf-8";
/* CSS Document */

        /* body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        } */

        .cr-slider-container {
            margin: 0 auto;
			position: relative;
            /* width: 100%; */
            max-width: 960px; /* Max width for the slider */
            overflow: hidden;
            border-radius: 0; /* Removed border-radius */
            /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
            /* padding-bottom: 56.25%; */ /* 16:9 Aspect Ratio (height / width * 100) */
            touch-action: pan-y; /* Allows vertical scrolling, handles horizontal pan for slider */
            background-color: #ffffff; /* Added background for container */
        }

        .cr-slider-wrapper {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            max-width: 960px; /* map */
			height: 100%;
            display: flex;
            transition: transform 0.5s ease-in-out;
			cursor: -webkit-grab;
       		cursor: -moz-grab;
			cursor: default; /* fallback */
			cursor: grab;   /* Indicate draggable */
        }

        .cr-slider-wrapper.cr-dragging {
			cursor: -webkit-grabbing;
    		cursor: -moz-grabing;
			cursor: default; /* fallback */
			cursor: grabbing;  /* Indicate dragging state */
			transition: none !important; /* Disable transition during drag */
        }

        .cr-slider-item {
            min-width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000; /* Black background for video */
        }

        .cr-slider-item video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Changed to cover the entire slider area */
            border-radius: 0; /* Removed border-radius */
			display: block; /* Remove any extra space below video tag */
        }

        .cr-slider-controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            z-index: 10;
            padding: 0 10px;
            pointer-events: none; /* Allows events to pass through to slider-wrapper */
        }

        .cr-slider-control-btn {
            background-color: rgba(0, 0, 0, 0); /* Removed background-color */
            /* color: rgba(255, 255, 255, 0.5); /* Visbile prev/next buttons */
			color: rgba(255, 255, 255, 0.2); /* Hidden prev/next buttons */
            border: none;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            cursor: pointer; /* Restore cursor for the button itself */
            transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease; /* Added color transition */
            box-shadow: none; /* Removed box-shadow */
            outline: none;
            pointer-events: auto; /* Re-enable pointer events for the buttons */
        }

        .cr-slider-control-btn:hover {
            background-color: rgba(255, 255, 255, 0.7); /* Revised hover background */
            color: #3399FF; /* Revised hover color */
            transform: scale(1.05);
        }

        .cr-slider-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .cr-dot {
            width: 12px;
            height: 12px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            border: 2px solid rgba(0, 0, 0, 0.2);
        }

        .cr-dot.cr-active {
            background-color: #fff;
            transform: scale(1.2);
            border-color: #007bff; /* A subtle border color for active dot */
        }

        .cr-mute-btn {
            display: none; /* for two-slide classic vs artight videos */
			position: absolute;
            bottom: 20px;
            right: 20px;
            background-color: rgba(0, 0, 0, 0); /* Changed to transparent */
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            /* display: flex; */
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: none; /* Changed to none */
            z-index: 10;
            outline: none;
        }

        .cr-mute-btn:hover {
            background-color: rgba(200, 200, 200, 0.6); /* Changed hover background */
            transform: scale(1.05);
        }

        .cr-mute-btn svg {
            width: 20px;
            height: 20px;
            fill: #fff; /* SVG icon color */
            transition: fill 0.3s ease;
        }

        .cr-mute-btn svg.hidden {
            display: none;
        }
        
        /* Responsive adjustments */
        @media (max-width: 767.98px) {
            cr-slider-item video {
				height: 75vw;
			}
			.cr-slider-controls {
				top: 67%;
			}
			.cr-slider-control-btn {
                width: 30px;
                height: 30px;
                font-size: 1rem;
				color: rgba(51,153,255, 0.8);
            }
			.cr-slider-control-btn:hover {
                background-color: rgba(255,255,255,0);
			}
            .cr-slider-dots {
                display: none; /* Adjusted for smaller screens */
            }
            .cr-dot {
                width: 10px;
                height: 10px;
            }
			.cr-slider-wrapper {
			cursor: default;
       		}
            .cr-mute-btn {
                width: 36px;
                height: 36px;
                bottom: 15px;
                right: 15px;
            }
            .cr-mute-btn svg {
                width: 18px;
                height: 18px;
            }
        }