/* Container setup */
.swiper-container {
  width: 100%;
  height: auto;
  max-width: 100vw;
  overflow: hidden;
   /*border: 2px solid black;  Add black border */
 position: relative;
 background-color: var(--havelock-blue-2);
}


.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 3.3vw;

}

.frame-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

}

/* Ensure images within slides are responsive */
.frame-174 img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Ensures the image covers the container without distortion */
}
/* Optional: Adjust responsive settings if needed */
/* Responsive settings for Swiper */
@media (max-width: 1024px) {
  .swiper-container {
    padding: 0 20px; /* Smaller padding for tablet screens */
  }
  .swiper-slide {
    padding: 2vw;
  }
}

@media (max-width: 768px) {
  .swiper-container {
    padding: 0 10px; /* Even smaller padding for mobile screens */
  }
  .swiper-slide {
    padding: 3vw;
  }
}