.slideshow-container {
    position: relative; /* Container for absolute positioning of images */
    width: 100vw; /* Adjust size as needed */
    height: 75vw; /* Adjust size as needed */
    overflow: hidden; /* Hides parts of images outside the container */
}

.slideshow-container img {
    position: absolute; /* Stack images on top of each other */
    width: 100vw;
    height: 75vw;
    opacity: 0; /* Initially hide all images */
    animation: fade-animation 36s infinite; /* 12 images * 3 seconds per cycle */
}



@media (min-width: 1000px) {
	
	.slideshow-container { width:1000px; height:750px; }
	.slideshow-container img { width:1000px; height:750px; }
	
}




/* Define different animation delays for each image */
.slideshow-container img:nth-child(1) {
    animation-delay: 0s;
}

.slideshow-container img:nth-child(2) {
    animation-delay: 3s; /* Delay by duration of one slide */
}

.slideshow-container img:nth-child(3) {
    animation-delay: 6s; /* Delay by duration of two slides */
}

.slideshow-container img:nth-child(4) {
    animation-delay: 9s; /* Delay by duration of two slides */
}

.slideshow-container img:nth-child(5) {
    animation-delay: 12s; /* Delay by duration of two slides */
}

.slideshow-container img:nth-child(6) {
    animation-delay: 15s; /* Delay by duration of two slides */
}

.slideshow-container img:nth-child(7) {
    animation-delay: 18s; /* Delay by duration of two slides */
}

.slideshow-container img:nth-child(8) {
    animation-delay: 21s; /* Delay by duration of two slides */
}

.slideshow-container img:nth-child(9) {
    animation-delay: 24s; /* Delay by duration of two slides */
}

.slideshow-container img:nth-child(10) {
    animation-delay: 27s; /* Delay by duration of two slides */
}

.slideshow-container img:nth-child(11) {
    animation-delay: 30s; /* Delay by duration of two slides */
}

.slideshow-container img:nth-child(12) {
    animation-delay: 33s; /* Delay by duration of two slides */
}





/* Keyframe animation for the fade effect */
@keyframes fade-animation {
    0% {
        opacity: 0;
    }
    10% { /* Fade in starts */
        opacity: 1;
    }
    33% { /* Image is fully visible */
        opacity: 1;
    }
    43% { /* Fade out starts */
        opacity: 0;
    }
    100% {
        opacity: 0; /* Remains invisible until the next cycle */
    }
}