@charset "ISO-8859-1";
 
 .slider-container {
  width: 100%; /* Adjust width as needed */
  height: 180px; /* Adjust height as needed */
  margin: auto;
  overflow: hidden; /* Hides images outside the view */
  position: relative;
}

.slider img {
  width: 100%;
  height: 180px;
  /* Ensures images cover the area well */
  object-fit: cover;
}

.slider {
  display: flex; /* Arranges images in a row */
  width: 200%; /* 100% * 4 images */
  height: 100%;
  /* Define the animation: name, duration, infinite loop */
  animation: slide 16s infinite;
}

@keyframes slide {
  /* Show Image 1 */
  0% { transform: translateX(0%); }
  25% { transform: translateX(0%); }
  /* Show Image 2 (move left by 100% of container width) */
  30% { transform: translateX(-50%); }
  50% { transform: translateX(-50%); }
  /* Show Image 3 (move left by 150% of container width) */
 /* 55% { transform: translateX(-150%); }*/
 /* 75% { transform: translateX(-150%); }*/
 /* Show Image 4 (move left by 200% of container width) */
 /* 80% { transform: translateX(-200%); }*/
 /* 100% { transform: translateX(-200%); }*/
}