/* Base styles for the carousel */
.carousel-item {
    position: relative;
    overflow: hidden;
 }
 
 /* Ensure images are responsive */
 .carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures the image covers the entire slider */
 }
 
 /* Base styles for animated text */
 .animated-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    opacity: 0; /* Start with invisible text */
    animation-duration: 1.5s;
    animation-fill-mode: forwards; /* Keep the final state after animation */
    z-index: 10; /* Ensure text is above the image */
    width: 90%; /* Ensure text doesn't overflow on small screens */
    max-width: 800px; /* Limit maximum width for large screens */
 }
 
 /* Responsive font size for text */
 .animated-text {
    font-size: 1.5rem; /* Default size for mobile */
 }
 
 @media (min-width: 576px) {
    .animated-text {
       font-size: 2rem; /* Medium screens */
    }
 }
 
 @media (min-width: 768px) {
    .animated-text {
       font-size: 2.5rem; /* Tablets and small desktops */
    }
 }
 
 @media (min-width: 992px) {
    .animated-text {
       font-size: 3rem; /* Large desktops */
    }
 }
 
 /* Custom animations */
 .fade-in {
    animation-name: fadeIn;
 }
 
 @keyframes fadeIn {
    from {
       opacity: 0;
    }
    to {
       opacity: 1;
    }
 }
 
 .slide-in {
    animation-name: slideIn;
 }
 
 @keyframes slideIn {
    from {
       opacity: 0;
       transform: translate(-50%, -100%);
    }
    to {
       opacity: 1;
       transform: translate(-50%, -50%);
    }
 }
 
 .zoom-in {
    animation-name: zoomIn;
 }
 
 @keyframes zoomIn {
    from {
       opacity: 0;
       transform: translate(-50%, -50%) scale(0.5);
    }
    to {
       opacity: 1;
       transform: translate(-50%, -50%) scale(1);
    }
 }