/* Carousel container */
.carousel-container {
    width: 70%;                  /* Full width of the window */
    height: auto;                /* Set carousel height */
    overflow: hidden;             /* Hide overflow */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Carousel track */
.carousel-track {
    display: flex;                /* Images in a row */
    width: 400%;                  /* Adjusted for 4 images (including duplicate) */
    animation: seamlessSlide 16s infinite; /* Smooth looping animation */
}

/* Individual images */
.carousel-image {
    width: 100%;                  /* Full container width */
    height: auto;                 /* Full container height */
    object-fit: cover;            /* Maintain aspect ratio */
    flex-shrink: 0;               /* Prevent shrinking */
}

/* Keyframes for seamless sliding */
@keyframes seamlessSlide {
    0% { transform: translateX(0); }              /* Show first image */
    25% { transform: translateX(0); }             /* Hold first image */
    33.33% { transform: translateX(-100%); }      /* Slide to second image */
    58.33% { transform: translateX(-100%); }      /* Hold second image */
    66.66% { transform: translateX(-200%); }      /* Slide to third image */
    91.66% { transform: translateX(-200%); }      /* Hold third image */
    100% { transform: translateX(-300%); }        /* Slide to duplicate */
}

/* Reset position instantly after animation ends */
.carousel-track {
    animation-timing-function: ease-in-out;
}
