.vs-root { padding: 0; overflow: hidden; position: relative; }
.vs-header-wrap { text-align: center; margin-bottom: 50px; padding: 0 20px; }
.vs-eyebrow { color: hsl(var(--accent)); font-size: 13px; text-transform: uppercase; letter-spacing: 0.3em; font-weight: 600; display: block; }
.vs-main-heading { font-size: clamp(30px, 5vw, 48px); font-weight: 300; margin: 15px 0; }
.vs-lead-text { color: hsl(var(--muted-foreground)); max-width: 600px; margin: 0 auto; }

.vs-carousel-stage { position: relative; width: 100%; height: 500px; display: flex; align-items: center; }
.vs-viewport { width: 100%; overflow: visible; cursor: grab; }

.vs-track { 
    display: flex !important; 
    flex-direction: row !important; 
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1); 
    will-change: transform;
}
.video-card{
padding:7px !important;
}
.vs-item {
    flex: 0 0 700px !important; /* Fixed width for consistency */
    padding: 0 30px;
    opacity: 0.7;
    filter: blur(4px);
    transform: scale(0.85);
    transition: all 0.6s ease;
    pointer-events: none; /* Disable click on side items */
}

.vs-item.is-active {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.05);
    pointer-events: auto; /* Enable click on active item */
}

/* Nav Arrows */
.vs-arrow {
    position: absolute; z-index: 100; top: 50%; transform: translateY(-50%);
   border-radius: 50%; border: 1px solid hsl(var(--border));
    background: white; cursor: pointer; display: flex; align-items: center; justify-content: center;
    padding: 15px;
}
.vs-arrow:hover,.vs-arrow:focus{
background:white;
}
.vs-prev { left: 40px; }
.vs-next { right: 40px; }

/* Video Elements */
.vs-card-body { padding: 15px; border-radius: 25px; }
.vs-media-box { aspect-ratio: 16/9; position: relative; border-radius: 18px; overflow: hidden; background: #ddd; }
.vs-poster { width: 100%; height: 100%; object-fit: cover; }

.vs-play-ui { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vs-play-circle { width: 70px; height: 70px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; }
.vs-ring { position: absolute; width: 100px; height: 100px; border: 1px solid white; border-radius: 50%; animation: vs-pulse 2s infinite; }
@keyframes vs-pulse { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }

.vs-label-badge { position: absolute; bottom: 20px; left: 20px; padding: 10px 15px; border-radius: 12px; display: flex; flex-direction: column; }
.vs-label-title { font-size: 14px; font-weight: 600; }
.vs-label-time { font-size: 11px; opacity: 0.7; }

/* Modal */
.vs-overlay { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; }
.vs-overlay.show { display: flex; }
.vs-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); }
.vs-modal-box { position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/9; z-index: 10; border-radius: 20px; overflow: hidden; background: #000; }
.vs-close-x { position: absolute; top: 15px; right: 20px; font-size: 30px; color: white; background: none; border: none; cursor: pointer; z-index: 11; }

@media (max-width: 800px) {
    .vs-item { flex: 0 0 85vw !important; padding: 0 10px; }
    .vs-arrow { display: none; }
}
.vs-item {
    pointer-events: auto !important; /* Enable events on all items */
    user-select: none; /* Prevent text/image selection while dragging */
}

.vs-viewport {
    user-select: none;
    -webkit-user-drag: none;
}

.vs-item img {
    pointer-events: none; /* Prevent ghost image dragging */
}
/* Pagination Dots */
.vs-pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.vs-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: hsla(var(--glass-bg) / 0.3);
    border: 1px solid hsla(var(--glass-border) / 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.vs-dot.is-active {
    width: 30px; /* Pill shape for active dot */
    background: hsl(var(--accent));
    border-color: hsl(var(--accent));
    border-radius: 10px;
}

/* Mobile Optimizations */
@media (max-width: 800px) {
    .vs-carousel-stage { height: 400px; }
    
    .vs-item { 
        flex: 0 0 80vw !important; /* Smaller width so side cards 'peek' in */
        padding: 0 10px;
        opacity: 0.4; /* Slightly more visible on mobile */
        filter: blur(2px); /* Less blur so user sees it's a card */
    }

    .vs-item.is-active {
        opacity: 1;
        filter: blur(0);
        transform: scale(1.2);
    }
}
@media (max-width: 600px) {
.vs-play-circle{
width:30px;
height:30px;
}
.vs-label-badge{
bottom:0;
left:0;
padding:5px;
}
.vs-label-title{
font-size:8px;
}
.vs-label-time{
font-size:8px;
}
}