.banner {
  width: 100%;             /* Make the banner full-width */
  height: 72vh; /* 651px; */          /* Set the height to 500px */
  background-image: url("/media/images/verse_2.jpg");
  background-size: cover;  /* Ensure the image covers the div without distortion */
  background-position: center; /* Center the image within the div */
  background-repeat: no-repeat; /* Prevent the image from repeating */
}

/* Media query for tablets and smaller devices */
@media (max-width: 1020px) {
  .banner {
    height: 60vh;               /* Adjust height for smaller screens */
    background-size: cover;     /* Still cover the container */
  }
}

@media (max-width: 880px) {
  .banner {
    height: 50vh;               /* Adjust height for smaller screens */
    background-size: cover;     /* Still cover the container */
  }
}

@media (max-width: 768px) {
  .banner {
    height: 40vh;               /* Adjust height for smaller screens */
    background-size: cover;     /* Still cover the container */
  }
}

@media (max-width: 590px) {
  .banner {
    height: 35vh;               /* Adjust height for smaller screens */
    background-size: cover;     /* Still cover the container */
  }
}

/* Media query for mobile devices in portrait mode */
@media (max-width: 480px) {
  .banner {
    height: 30vh;               /* Further reduce height for mobile portrait mode */
    background-size: contain;   /* Use 'contain' to ensure the full image is visible */
  }
}

/* Initial state: Hide elements off-screen to the right */
.container, .banner {
    opacity: 0; /* Start invisible */
    transform: translateX(100vw); /* Start off-screen to the right */
    position: relative; /* Ensure relative positioning */
}

/* Slide in from the right */
@keyframes slideInX {
    0% {
        opacity: 0;
        transform: translateX(100vw); /* Off-screen */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* On-screen */
    }
}

/* Applying the same animation to each container */
.container, .banner {
    animation: slideInX 1.2s ease-out forwards;
}

/* Staggered delays for each container */
.container:nth-of-type(1) {
    animation-delay: 0.6s; /* First element */
}
.container:nth-of-type(2) {
    animation-delay: 0.9s;
}
.container:nth-of-type(3) {
    animation-delay: 1.2s;
}
.container:nth-of-type(4) {
    animation-delay: 1.5s;
}
.container:nth-of-type(5) {
    animation-delay: 1.8s; /* Last container */
}

/* Delay for the banner (appears after all containers) */
.banner {
    animation-delay: 0.3s; /* Adjust based on when you'd like the banner to appear */
}