.pxl-swiper-slide .item--featured {
  background-size: cover !important;
  background-position: 50% 0% !important; /* top */
  background-repeat: no-repeat !important;
}
.pxl-swiper-slide .item--featured img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 0% !important;     /* top */
  display: block !important;
}



/* Per-slide overrides via stable data index */
.pxl-swiper-slide[data-swiper-slide-index="0"] .item--featured { background-position: 50% 40% !important; }
.pxl-swiper-slide[data-swiper-slide-index="1"] .item--featured { background-position: 50% 20% !important; }
.pxl-swiper-slide[data-swiper-slide-index="2"] .item--featured { background-position: 50% 60% !important; }
.pxl-swiper-slide[data-swiper-slide-index="3"] .item--featured { background-position: 50% 30% !important; }
.pxl-swiper-slide[data-swiper-slide-index="4"] .item--featured { background-position: 50% 20% !important; }
.pxl-swiper-slide[data-swiper-slide-index="5"] .item--featured { background-position: 50% 60% !important; }
.pxl-swiper-slide[data-swiper-slide-index="6"] .item--featured { background-position: 50% 30% !important; }
.pxl-swiper-slide[data-swiper-slide-index="7"] .item--featured { background-position: 50% 20% !important; }
.pxl-swiper-slide[data-swiper-slide-index="8"] .item--featured { background-position: 50% 60% !important; }
.pxl-swiper-slide[data-swiper-slide-index="9"] .item--featured { background-position: 50% 30% !important; }
.pxl-swiper-slide[data-swiper-slide-index="10"] .item--featured { background-position: 50% 20% !important; }
.pxl-swiper-slide[data-swiper-slide-index="11"] .item--featured { background-position: 50% 60% !important; }
.pxl-swiper-slide[data-swiper-slide-index="12"] .item--featured { background-position: 50% 60% !important; }
/* Mirror per-slide for <img> if the image tag is the visible layer */
.pxl-swiper-slide[data-swiper-slide-index="1"] .item--featured img { object-position: 50% 20% !important; }
.pxl-swiper-slide[data-swiper-slide-index="2"] .item--featured img { object-position: 50% 60% !important; }

/* Force mobile header background */
@media (max-width: 767px) {
  #pxl-header-elementor,
  .elementor-5497 .elementor-section {
    background-color: transparent !important; /* or match desktop header color */
  }
}
.dark-mode .header-mobile-fixed {
    background: transparent; }
/* start here */
/* --------------------------------------------------
   1. Show only the active slide and keep it on top
   (works on both desktop and mobile)
-------------------------------------------------- */

.pxl-swiper-sliders .pxl-swiper-slide {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Active slide (and loop duplicate) is fully visible, on top */
.pxl-swiper-sliders .pxl-swiper-slide.swiper-slide-active,
.pxl-swiper-sliders .pxl-swiper-slide.swiper-slide-duplicate-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* --------------------------------------------------
   2. Desktop-only per-slide width for the image block
   (so portrait slides can be narrower)
-------------------------------------------------- */

@media (min-width: 1025px) {
  /* Center the image block inside each slide */
  .pxl-swiper-sliders .pxl-swiper-slide .item--featured {
    margin: 0 auto;
  }

  /* Slide 0 – landscape: full width */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="0"] .item--featured {
    max-width: 100%;
  }

  /* Slide 1 – portrait: make it narrower */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="1"] .item--featured {
    max-width: 100%;
  }

  /* Slide 2 – portrait: tweak as needed */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="2"] .item--featured {
    max-width: 100%;
  }

  /* Slide 3 – example landscape */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="3"] .item--featured {
    max-width: 40%;
  }
      /* Slide 4 – example landscape */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="4"] .item--featured {
    max-width: 35%;
  }
  /* Slide 5 – example landscape */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="5"] .item--featured {
    max-width: 100%;
  }
    
      /* Slide 6 – example landscape */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="6"] .item--featured {
    max-width: 30%;
  }
    
      /* Slide 7 – example landscape */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="7"] .item--featured {
    max-width: 30%;
  }
    
      /* Slide 8 – example landscape */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="8"] .item--featured {
    max-width: 100%;
  }
    
      /* Slide 9 – example landscape */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="9"] .item--featured {
    max-width: 100%;
  }
    
      /* Slide 10 – example landscape */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="10"] .item--featured {
    max-width: 100%;
  }
    
  /* Slide 11 – example landscape */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="11"] .item--featured {
    max-width: 30%;
  }
    
  /* Slide 12 – example landscape */
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="12"] .item--featured {
    max-width: 100%;
  }
  /* Add more slides like this:
  .pxl-swiper-sliders .pxl-swiper-slide[data-swiper-slide-index="X"] .item--featured {
    max-width: 50%;  // or 40%, 70% etc
  }
  */
}
/* Hide all non-active slides completely */
.pxl-swiper-slide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Show ONLY the active slide */
.pxl-swiper-slide.swiper-slide-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Ensure duplicate slides used by loop mode behave correctly */
.pxl-swiper-slide.swiper-slide-duplicate-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}