

figure img {
  max-width:100%;
}

.swiper {
  margin-bottom:-40px;
}

/* 1. Default State (Left Outermost) */
.swiper-slide figure {
  cursor: pointer;
  margin: 1em;
  text-align: center;
  opacity: 0.2;
  filter: blur(6px);
  /* Push heavily to the RIGHT */
  transform: scale(0.5) translateX(80px); 
  transition: transform 600ms ease-out, opacity 600ms ease-out, filter 600ms ease-out, -webkit-filter 600ms ease-out;
}

.swiper-slide figure img {
  margin-top:5%;
}

/* 2. Right Outermost (Any slide after the next one) */
.swiper-slide-next ~ .swiper-slide figure {
  opacity: 0.2;
  filter: blur(6px);
  /* Push heavily to the LEFT */
  transform: scale(0.5) translateX(-80px);
}

/* 3. Immediate Left Neighbor */
.swiper-slide-prev figure {
  opacity: 0.6;
  filter: blur(2px);
  /* Push slightly RIGHT (Adjust this to give the center more/less room) */
  transform: scale(0.75) translateX(10px);
}

/* 4. Immediate Right Neighbor */
.swiper-slide-next figure {
  opacity: 0.6;
  filter: blur(2px);
  /* Push slightly LEFT (Adjust this to give the center more/less room) */
  transform: scale(0.75) translateX(-10px);
}

/* 5. Center Active Item */
.swiper-slide-active figure {
  opacity: 1;
  filter: blur(0px);
  /* Perfectly centered, no pushing */
  transform: scale(1.2) translateX(0px);
}
/* The new parent wrapper controls the overall width and relative positioning */
.slider-wrapper {

  position: relative;
  width: 100%;
  max-width: 1192px;
  margin: 0;
}


/* The screen layer placed directly behind the slider */
.screen-background {
  position: absolute;
  /* Use negative values to make the background larger than the slider if needed */
  top: 0px; 
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-image: url('../img/ai/zeus_aiformat_00.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0; /* Keeps it behind the slider */
  border-radius: 12px; 
}

/* Ensure the slider sits on top of the background */
.myFadeSwiper {
  position: relative;
  z-index: 1; 
  width: 100%;
}

.myFadeSwiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* Push the arrows outside the container */
.slider-wrapper .swiper-button-prev {
  left: -50px; /* Pushes the left arrow 50px outside */
}

.slider-wrapper .swiper-button-next {
  right: -50px; /* Pushes the right arrow 50px outside */
  font-weight:bold;
}

.slider-wrapper .swiper-button-next::after,
.slider-wrapper .swiper-button-prev::after {
  font-size: 16px !important; 
  color:#CDC8BF;
}

.slider-wrapper .swiper-button-next::after:hover,
.slider-wrapper .swiper-button-prev::after:hover {
  font-size: 32px !important; 
  color:#CDC8BF;
}

@media only screen and (max-width: 480px) {
  .slider-wrapper .swiper-button-prev, .slider-wrapper .swiper-button-next {
  display:none;
}
}