/* Basic styling for the image cycle container */
.image-cycle {
    position: relative;
    width: 250px;   /* Set your desired width */
    height: 182px;  /* Set your desired height */
    margin: 0 auto; /* Center the container */
    overflow: hidden;
}

/* Styling for each image */
.image-cycle img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: cycle 30s infinite;
}

/* The animation to cycle through the images */
@keyframes cycle {
    0% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
    45% { opacity: 0; }
    50% { opacity: 1; }
    70% { opacity: 1; }
    75% { opacity: 0; }
    95% { opacity: 0; }
    100% { opacity: 1; }
}

/* Targeting the second image in the cycle */
.image-cycle img:nth-child(2) {
    animation-delay: 6s;
}

/* Targeting the third image in the cycle */
.image-cycle img:nth-child(3) {
    animation-delay: 12s;
}

/* Targeting the fourth image in the cycle */
.image-cycle img:nth-child(4) {
    animation-delay: 18s;
}

/* Targeting the fifth image in the cycle */
.image-cycle img:nth-child(5) {
    animation-delay: 24s;
}