body {
    margin: 0;
    padding: 0;
    background-color: #1a2634; /* Darker background to make images pop */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.slider {
    /* Responsive sizing */
    width: 95vw;           /* Uses 95% of screen width */
    height: 90vh;          /* Uses 90% of screen height */
    max-width: 1200px;     /* Optional: prevents it from getting too huge on PC */
    
    /* Crucial fix for full visibility */
    background-size: contain;   /* Shows the FULL image */
    background-position: center; /* Keeps the image perfectly centered */
    background-repeat: no-repeat; /* Prevents the image from tiling */
    
    /* Animation speed: roughly 3 seconds per image for 24 images */
    animation: animateGallery 72s infinite ease-in-out;
}

/* Keyframes for 24 images (100 / 24 ≈ 4.16% each) */
@keyframes animateGallery {
    0%, 4.16%    { background-image: url('Assets/photo22.jpg'); }
    8.33%        { background-image: url('Assets/photo21.jpg'); }
    12.5%        { background-image: url('Assets/photo16.jpg'); }
    16.66%       { background-image: url('Assets/photo8.jpg'); }
    20.83%       { background-image: url('Assets/photo2.jpg'); }
    25%          { background-image: url('Assets/photo6.jpg'); }
    29.16%       { background-image: url('Assets/photo24.jpg'); }
    33.33%       { background-image: url('Assets/photo4.jpg'); }
    37.5%        { background-image: url('Assets/photo9.jpg'); }
    41.66%       { background-image: url('Assets/photo10.jpg'); }
    45.83%       { background-image: url('Assets/photo11.jpg'); }
    50%          { background-image: url('Assets/photo12.jpg'); }
    54.16%       { background-image: url('Assets/photo13.jpg'); }
    58.33%       { background-image: url('Assets/photo14.jpg'); }
    62.5%        { background-image: url('Assets/photo15.jpg'); }
    66.66%       { background-image: url('Assets/photo5.jpg'); }
    70.83%       { background-image: url('Assets/photo17.jpg'); }
    75%          { background-image: url('Assets/photo18.jpg'); }
    79.16%       { background-image: url('Assets/photo19.jpg'); }
    83.33%       { background-image: url('Assets/photo20.jpg'); }
    87.5%        { background-image: url('Assets/photo3.jpg'); }
    91.66%       { background-image: url('Assets/photo1.jpg'); }
    95.83%       { background-image: url('Assets/photo23.jpg'); }
    100%         { background-image: url('Assets/photo7.jpg'); }
}

/* Specific Phone Optimizations */
@media screen and (max-width: 768px) {
    .slider {
        width: 100vw;
        height: 80vh; /* Shorter for mobile to leave room for browser UI */
    }
}