.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-height: 400px; /* Adjust as per your design */
}

.carousel {
  display: flex;
  width: 400%;
  animation: slide 60s infinite;
}

.carousel img {
  width: 100%;
  max-height: 400px;
  object-fit: contain; /* Shows full image without cropping */
  flex-shrink: 0;
}

@keyframes slide {
  0% { transform: translateX(0); }
  25% { transform: translateX(-100%); }
  50% { transform: translateX(-200%); }
  75% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}

@media (max-width: 768px) {
  .carousel {
    animation: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .carousel img {
    scroll-snap-align: center;
  }
}