.carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Ensures no horizontal scroll appears */
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 400px;
  width: 100%;
  max-width: 700px;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.image-container {
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
  position: relative; /* Add position relative */
}

.carousel {
  display: flex;
  flex-wrap: nowrap; /* Prevent images from wrapping */
  transition: all 0.4s ease;
  align-items: center;
  width: 100%; /* Ensure the carousel takes full width */
}

.carousel img {
  flex: 0 0 100%; /* Ensure each image takes full width of the carousel */
  max-width: 100%; /* Set maximum width */
  max-height: 100%; /* Adapt to container height */
  object-fit: cover;
  border-radius: 18px;
}