/* ============================================
   KHOBARA ALRASHAQA - FINAL HERO SLIDER
   Desktop + Mobile Responsive Images
   ============================================ */


/* ============================================
   1. HERO SECTION
   ============================================ */

section.s-block--hero-slider {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* ============================================
   2. FULL-WIDTH SLIDER CONTAINER
   ============================================ */

.s-block--hero-slider salla-slider,
.s-block--hero-slider .fullwidth-slider,
.s-block--hero-slider .s-slider-container,
.s-block--hero-slider .swiper {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* ============================================
   3. SWIPER WRAPPER
   ============================================ */

.s-block--hero-slider .swiper-wrapper {
  height: 100% !important;
  align-items: stretch !important;
}


/* ============================================
   4. SLIDE SETTINGS
   ============================================ */

.s-block--hero-slider .swiper-slide {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;

  height: 80vh !important;
  min-height: 0 !important;
  max-height: 80vh !important;

  position: relative !important;
  overflow: hidden !important;

  margin: 0 !important;
  padding: 0 !important;

  background-color: #101827 !important;
}


/* ============================================
   5. IMAGE COVER - NO EMPTY SPACES
   ============================================ */

.s-block--hero-slider .swiper-slide > .bg-cover {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* ============================================
   6. DESKTOP SLIDER IMAGES
   ============================================ */

/* DESKTOP IMAGE 1 */

.s-block--hero-slider
.swiper-slide:nth-child(1) > .bg-cover {
  background-image: url("https://cdn.files.salla.network/other/296686687/a184bc59-15c1-4e74-8ee4-9e48c921e1d0-original.webp") !important;
}


/* DESKTOP IMAGE 2 */

.s-block--hero-slider
.swiper-slide:nth-child(2) > .bg-cover {
  background-image: url("https://cdn.files.salla.network/other/296686687/d5d5fd6e-b54c-4939-bb37-180e697510b0-original.webp") !important;
}


/* DESKTOP IMAGE 3 */

.s-block--hero-slider
.swiper-slide:nth-child(3) > .bg-cover {
  background-image: url("https://cdn.files.salla.network/other/296686687/2717874f-369c-49b5-9002-2b5a57d1677e-original.webp") !important;
}


/* ============================================
   7. SLIDER CONTENT
   ============================================ */

.s-block--hero-slider .home-slider__content {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  z-index: 2;
}


/* ============================================
   8. NAVIGATION ARROWS
   ============================================ */

.s-block--hero-slider .s-slider-prev,
.s-block--hero-slider .s-slider-next {
  z-index: 10 !important;
}


/* ============================================
   9. DESKTOP: 1024px AND ABOVE
   ============================================ */

@media (min-width: 1024px) {

  .s-block--hero-slider .swiper-slide {
    height: 80vh !important;
    max-height: 80vh !important;
  }

}


/* ============================================
   10. TABLET: 768px - 1023px
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {

  .s-block--hero-slider .swiper-slide {
    height: 65vh !important;
    max-height: 65vh !important;
  }

}


/* ============================================
   11. MOBILE: 767px AND BELOW
   ============================================ */

@media (max-width: 767px) {

  /* Mobile slider dimensions */

  .s-block--hero-slider .swiper-slide {
    width: 100% !important;

    height: 70vh !important;
    height: 70svh !important;

    max-height: 70vh !important;
    max-height: 70svh !important;

    min-height: 0 !important;
  }

  /* Mobile image display */

  .s-block--hero-slider .swiper-slide > .bg-cover {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }


  /* ========================================
     MOBILE IMAGE 1
     ======================================== */

  .s-block--hero-slider
  .swiper-slide:nth-child(1) > .bg-cover {
    background-image: url("https://cdn.files.salla.network/other/296686687/30b7e8df-f950-44ee-a3c7-1e3bc9ca5566-original.webp") !important;
  }


  /* ========================================
     MOBILE IMAGE 2
     ======================================== */

  .s-block--hero-slider
  .swiper-slide:nth-child(2) > .bg-cover {
    background-image: url("https://cdn.files.salla.network/other/296686687/497dd6f1-cd43-4669-bd88-2662a688a82a-original.webp") !important;
  }


  /* ========================================
     MOBILE IMAGE 3
     ======================================== */

  .s-block--hero-slider
  .swiper-slide:nth-child(3) > .bg-cover {
    background-image: url("https://cdn.files.salla.network/other/296686687/7ae4b380-d683-4f97-8f91-dee7e87b9e68-original.webp") !important;
  }

}