/*.carousel-caption {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
}

.carousel-title {
    font-size: 4rem;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0;
    animation: easeIn 1s forwards;
    animation-delay: .5s;
}

.carousel-text {
    font-size: 2.5rem;
    opacity: 0;
    animation: easeIn 2.5s forwards;
    animation-delay: .75s;
}

@keyframes easeIn {
    from {
        opacity: 0;
        transform: translateY(2em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
} 
*/
.carousel-caption {
    position: absolute;
    bottom: 10%;
    left: 10%;
    text-align: left;
    color: white;
    width: 80%; /* Ensure the caption does not overflow */
}

.carousel-title {
    font-size: 4rem;
    font-weight: bold;
    opacity: 0;
    animation: easeInTitle 1s forwards;
    animation-delay: .5s;
}

.carousel-text {
    font-size: 2rem;
    opacity: 0;
    animation: easeInText 1.5s forwards;
    animation-delay: .75s;
}

@keyframes easeInTitle {
    from {
        opacity: 0;
        transform: translateX(-2em);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes easeInText {
    from {
        opacity: 0;
        transform: translateX(-4em);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.custom-carousel-control-prev {
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;

}
.custom-carousel-control-next {
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
}

.custom-carousel-control-next .card {
    margin: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.custom-carousel-control-next .card-img-top {
    height: 400px;
    object-fit: cover;
}

/* Responsive styles */
@media (max-width: 768px) {
    .carousel-caption {
        bottom: 0;
    }
    .carousel-title {
        font-size: 2rem;
        animation: easeInTitleMobile 1s forwards;
        animation-delay: .5s;
    }

    .carousel-text {
        font-size: 1rem;
        animation: easeInTextMobile 1.5s forwards;
        animation-delay: .75s;
    }

    #carouselExample{
        margin-top: 118px;
    }

    @keyframes easeInTitleMobile {
        from {
            opacity: 0;
            transform: translateX(-1em);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes easeInTextMobile {
        from {
            opacity: 0;
            transform: translateX(-2em);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}