html,
body {
    height: 100vh;
}

.inherit-border-radius {
    border-radius: inherit;
}

.inherit-border-radius-right {
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}

.inherit-border-radius-left {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

.has-border-radius {
    border-radius: 20px;
}

.is-cover-parent {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.is-absolute {
    position: absolute;
}

.is-top-0 {
    top: 0;
}

.is-left-0 {
    left: 0;
}

.has-min-height {
    min-height: 150px;
}

.navbar-burger span {
    height: 3px;
}

.has-background-primary-opaque-75 {
    background-color: #003C7FC0;
}

.has-background-primary-opaque-50 {
    background-color: #003C7F80;
}

.has-background-primary-opaque-62 {
    background-color: #003C7FA0;
}

.is-behind {
    z-index: -1;
}

/* Container setup */
.slideshow-container {
    position: relative;
    width: 100%;           /* Or whatever size you want */
    height: 500px;         /* Set a fixed height */
    overflow: hidden;      /* Hide anything outside bounds */
}

/* All slides - base styling */
.slide {
    position: absolute;    /* Stack on top of each other */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Make images fill container nicely */
    opacity: 0;            /* Start invisible */
    
    /* Apply the animation */
    animation-name: fade;
    animation-duration: 20s;    /* Total cycle: 3 images × 5s each */
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Individual delays for each image */
.slide-1 {
    animation-delay: 0s;    /* First image: no delay */
}

.slide-2 {
    animation-delay: 5s;    /* Second image: starts after 5s */
}

.slide-3 {
    animation-delay: 10s;   /* Third image: starts after 10s */
}

/* The animation keyframes */
@keyframes fade {
    0% {
        opacity: 0;         /* Invisible */
    }
    6.66% {                 /* 1/15 of cycle = fade in */
        opacity: 1;         /* Fully visible */
    }
    33.33% {                /* 5/15 of cycle = stay visible */
        opacity: 1;         /* Still fully visible */
    }
    40% {                   /* 6/15 of cycle = fade out */
        opacity: 0;         /* Back to invisible */
    }
    100% {
        opacity: 0;         /* Stay invisible for rest */
    }
}