
/* Main Container */

        .slideshow-container {
            max-width: 800px;
            margin: auto;
            font-family: sans-serif;
            overflow: hidden; /* Hides the images that aren't active */
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            position: relative;
        }

        /* The moving strip containing all images */
        .slides-wrapper {
            display: flex;
            width: 2000%; /* 3 images = 300% width */
            height: 600px;
            /* Total animation time: 30 seconds (10s per slide) */
            animation: slideAnimation 200s infinite; 
        }

        /* Individual Slide Styles */
        .slide {
            width: 100.333%; /* Each slide takes up exactly 1/3 of the wrapper */
            position: relative;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Caption Styling */
        .caption {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
        }
      
        @keyframes slideAnimation {
            /* Slide 1 */   0%, 4.5%     { transform: translateX(0%); }
            /* Slide 2 */   5%, 9.5%     { transform: translateX(-5%); }
            /* Slide 3 */   10%, 14.5%   { transform: translateX(-10%); }
            /* Slide 4 */   15%, 19.5%   { transform: translateX(-15%); }
            /* Slide 5 */   20%, 24.5%   { transform: translateX(-20%); }
            /* Slide 6 */   25%, 29.5%   { transform: translateX(-25%); }
            /* Slide 7 */   30%, 34.5%   { transform: translateX(-30%); }
            /* Slide 8 */   35%, 39.5%   { transform: translateX(-35%); }
            /* Slide 9 */   40%, 44.5%   { transform: translateX(-40%); }
            /* Slide 10 */  45%, 49.5%   { transform: translateX(-45%); }
            /* Slide 11 */  50%, 54.5%   { transform: translateX(-50%); }
            /* Slide 12 */  55%, 59.5%   { transform: translateX(-55%); }
            /* Slide 13 */  60%, 64.5%   { transform: translateX(-60%); }
            /* Slide 14 */  65%, 69.5%   { transform: translateX(-65%); }
            /* Slide 15 */  70%, 74.5%   { transform: translateX(-70%); }
            /* Slide 16 */  75%, 79.5%   { transform: translateX(-75%); }
            /* Slide 17 */  80%, 84.5%   { transform: translateX(-80%); }
            /* Slide 18 */  85%, 89.5%   { transform: translateX(-85%); }
            /* Slide 19 */  90%, 94.5%   { transform: translateX(-90%); }
            /* Slide 20 */  95%, 99.5%   { transform: translateX(-95%); }
            /* Loop Back */ 100%         { transform: translateX(0%); }
        }       
        
        
        
        
        
        