/* Hero Slider Styles */
.hero-slider::-webkit-scrollbar {
    display: none;
}

.hero-slide {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.6s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.hero-slide.prev {
    transform: translateX(-100px);
    opacity: 0;
}

.slide-indicator {
    transition: all 0.3s ease;
}

.slide-indicator.active {
    opacity: 1;
    background-color: white;
}

/* Navigation Arrows - hidden by default */
.slider-nav-btn {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Show buttons on hover over the slider container */
.hero-slider-container:hover .slider-nav-btn {
    opacity: 1;
    visibility: visible;
}

/* Content Slider (for teachers, centers etc.) */
.content-slider {
    scroll-behavior: auto; /* Disable smooth scroll for continuous animation */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Smooth continuous scrolling for auto-slide */
.content-slider.auto-scrolling {
    scroll-behavior: auto;
}

.content-slider::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.content-slider-wrapper {
    position: relative;
}

.nav-btn {
    transition: opacity 0.3s ease;
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Responsive Content Slider */
@media (min-width: 1200px) {
    /* Desktop large - show 4 items */
    .content-slider .min-w-\[280px\] {
        min-width: calc(25% - 18px);
        width: calc(25% - 18px);
    }
    .content-slider {
        gap: 1.5rem;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* Desktop medium - show 3 items */
    .content-slider .min-w-\[280px\] {
        min-width: calc(33.333% - 16px);
        width: calc(33.333% - 16px);
    }
    .content-slider {
        gap: 1.5rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet - show 2 items */
    .content-slider .min-w-\[280px\] {
        min-width: calc(50% - 12px);
        width: calc(50% - 12px);
    }
    .content-slider {
        gap: 1.5rem;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    /* Mobile landscape - show 1.5 items */
    .content-slider .min-w-\[280px\] {
        min-width: calc(66.666% - 8px);
        width: calc(66.666% - 8px);
    }
    .content-slider {
        gap: 1rem;
    }
}

@media (max-width: 575px) {
    /* Mobile portrait - show 1 item */
    .content-slider .min-w-\[280px\] {
        min-width: calc(100% - 2rem);
        width: calc(100% - 2rem);
    }
    .content-slider {
        gap: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}