/* ---------------------------- Base Carousel Styles CSS ---------------------------- */


/* Carousel Base Styles */
.carousel {
    margin-bottom: 2rem;
    overflow: hidden;
}

/* Carousel Item Height */
.carousel-item {
    height: 100vh; /* Ensure the carousel takes the full viewport height */
    min-height: 580px; /* Set a substantial minimum height */
    position: relative;
}

/* Image within Carousel Item */
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* The image will cover the container without distortion */
    object-position: center; /* Center the image content */
}



/* ---------------------------- Carousel Caption Styles CSS ---------------------------- */


/* Carousel Caption */
.carousel-caption2 {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the caption */
    padding: 1.25rem;
    color: #fff;
    text-align: center;
    width: 70%;
}


/* ---------------------------- Media Queries for Larger Screens (Desktop) CSS ---------------------------- */


/* Larger text for desktop */
@media (min-width: 768px) {
    .carousel-caption2 h2 {
        font-size: 3rem;
        font-weight: bold;
    }

    .carousel-caption2 h4 {
        font-size: 1.75rem;
        line-height: 1.5;
    }

    .carousel-caption2 p {
        font-size: 1.5rem;
    }
}


/* ---------------------------- Media Queries for Smaller Screens (Mobile) CSS ---------------------------- */


/* Adjust carousel item height for mobile */
@media (max-width: 767px) {
    .carousel-item {
        height: 50vh; /* Adjusted height for mobile */
        min-height: 500px; /* Set a minimum height */
    }

    .carousel-caption2 {
        width: 90%;
        font-size: 1.2rem;
    }
}