/* =========================================
   HERO SLIDER - FINAL FIX (CLS + SLIDING IMAGES)
========================================= */

/* 1. Main outer containers ko fix height do taaki Page (body) shift na ho */
.block-views-blockhero-slider-block-2 {
    display: block !important;
    width: 100% !important;
    min-height: 700px !important;
    background-color: #f8f9fa; /* Placeholder color */
}

.block-views-blockhero-slider-block-2 .new_flexflexslider,
.block-views-blockhero-slider-block-2 .flex-viewport {
    height: 700px !important;
    overflow: hidden !important;
}

/* 2. UL Slides: Margin allow karo taaki slide ho sake, par transform lagao taaki hardware handle kare */
.block-views-blockhero-slider-block-2 .slides {
    padding: 0 !important;
    /* YAHAN SE MARGIN: 0 !important HATA DIYA HAI TAAKI FLEXSLIDER MOVE KAR SAKE */
    will-change: transform;
}

/* 3. LI Slides: ISKO ABSOLUTE NAHI KARNA HAI. Ise FlexSlider ke control me rehne do */
.block-views-blockhero-slider-block-2 .slides > li {
    height: 700px !important;
    overflow: hidden !important;
    position: relative; /* Absolute nahi! */
}

/* 4. Media Elements (Images & Videos): Container ke andar fit karo bina uske bahar nikle */
.slider-media-for-desktop,
.slider-media-for-phones {
    width: 100%;
    height: 100%;
}

.slider-media-for-desktop img,
.slider-media-for-desktop video,
.slider-media-for-phones img,
.slider-media-for-phones video {
    width: 100% !important;
    height: 700px !important;
    object-fit: cover !important;
    display: block !important;
}

/* 5. Text Shift (.hero-slider-item09) Fix: Taki Text achanak se na kude */
.block-views-blockhero-slider-block-2 .hero-slider-item09 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 700px !important;
    display: flex !important;
    align-items: center !important;
    z-index: 10 !important;
    background: transparent !important;
}