/* ══════════════════════════════════════════
   HERO SLIDER - FIXED
══════════════════════════════════════════ */


.hero-slider-area {
    background: #090e16;
    position: relative;
}

.hero-slider-area .swiper {
    height: 80vh;  /* Reduced from 90vh */
    width: 100%;
    min-height: 400px;  /* Minimum height for mobile */
    max-height: 800px;  /* Maximum height for desktop */
}

.hero-slider-area .swiper-slide {
    background-color: #090e16;
    overflow: hidden;
}

/* The Image - Full Coverage */
.hero-slider-area .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.1);
    transition: transform 6s ease-out;
}

/* When the slide is active, zoom in slowly */
.hero-slider-area .swiper-slide-active img {
    transform: scale(1);
}

/* The Overlay - Makes images pop and text readable */
.hero-slider-area .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.slide-inner{
    overflow:hidden;
    width:100%;
    height:100%;
}

/* Progress Bar at bottom */
.swiper-pagination-custom.swiper-pagination-progressbar {
    background: rgba(255, 255, 255, 0.1);
    height: 4px !important;
    top: auto !important; 
    bottom: 0 !important;
}

.swiper-pagination-custom .swiper-pagination-progressbar-fill {
    background: #3182ce !important;
}

/* ============================================================
   RESPONSIVE FIXES - THIS IS THE KEY
   ============================================================ */

/* Tablet */
@media (max-width: 991px) {
    .hero-slider-area .swiper {
        height: 60vh;  /* Shorter on tablet */
        min-height: 350px;
        max-height: 600px;
    }
}

/* Mobile Phones */
@media (max-width: 767px) {
    .hero-slider-area .swiper {
        height: 50vh;  /* Much shorter on mobile */
        min-height: 300px;
        max-height: 500px;
    }
}

/* Small Mobile */
@media (max-width: 575px) {
    .hero-slider-area .swiper {
        height: 40vh;  /* Even shorter on small phones */
        min-height: 250px;
        max-height: 400px;
    }
}

/* Extra Small Mobile */
@media (max-width: 380px) {
    .hero-slider-area .swiper {
        height: 35vh;
        min-height: 200px;
        max-height: 350px;
    }
}