/* Screen 1 Image Animation - Image comes from right and leaves within 10 seconds */

@keyframes imageSlideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20% {
    transform: translateX(0%);
    opacity: 1;
  }
  80% {
    transform: translateX(0%);
    opacity: 1;
  }
  90% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes textFadeInOut {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Apply slide animation only to the banner image */
.screen-1__banner-image {
  animation: imageSlideInFromLeft 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

/* Apply fade animation to the text content */
.screen-1__content-container {
  animation: textFadeInOut 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}