/* Slideshow container */
.slideshow-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* All images stacked on top of each other */
.slide-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation-fill-mode: forwards;
}

/* Image 1: visible immediately, fades out from 3s to 7s */
.img1 {
  animation: fadeOut 4s ease-in-out 3s forwards;
  opacity: 1;
}

/* Image 2:
   - Fades in from 3s to 7s
   - Remains fully visible from 7s to 8s
   - Fades out from 8s to 12s
*/
.img2 {
  animation:
    fadeIn 4s ease-in-out 3s forwards,
    fadeOut 4s ease-in-out 8s forwards;
}

/* Image 3: fades in from 8s to 12s */
.img3 {
  animation: fadeIn 4s ease-in-out 8s forwards;
}

/* Final text (centered in the middle of the screen) */
.final-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(30px); /* 30px below vertical center */
  width: 100%;
  max-width: 90%;
  text-align: center;
  color: white;
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 200;
  text-shadow:
    0 0 1px #fff,
    0 0 2px #fff,
    0 0 3px #fff;
  opacity: 0;
  animation: fadeIn 4s ease-in-out 8s forwards;
  z-index: 10;
  padding: 0 20px;
}

/* Keyframes for fading in and out */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.navbar {
  opacity: 0;
  animation: fadeIn 2s ease-in 0s forwards;
}