/* ✅ Swiper container with fixed height */
.swiper {
  width: 100%;
  max-width: 800px;
  height: 400px;              /* ✅ Set fixed height here */
  margin: 2rem auto;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-radius: 12px;
  position: relative;
}

/* ✅ Wrapper behaves like a row of slides */
.swiper-wrapper {
  display: flex;
}

/* ✅ Each slide */
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;               /* ✅ Match container height */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
}

.swiper-slide img {
  width: 100%;
  height: auto;              /* 🔄 Let it scale naturally */
  max-height: 100%;          /* ✅ Prevent overflow */
  object-fit: contain;       /* or 'cover' if you prefer cropping */
  display: block;
  border-radius: 8px;
  background-color: #fff;    /* ✅ Avoid transparent background */
}


/* ✅ Optional: Mobile override */
@media (max-width: 600px) {
  .swiper {
    height: 250px;
  }
}