.carousel-item {
    position: relative;
}

    .carousel-item img {
        width: 100%; /* Ensure the image width is 100% of its container */
        height: 35vh; /* Set the height to 35% of the viewport height */
        object-fit: fill; /* Ensure the image covers the container without stretching */
        display: inline-block; /* Ensure the image is treated as an inline element */
        vertical-align: top; /* Align the image to the top */
    }

    .carousel-item h6 {
        position: absolute;
        top: 35%;
        left: 50%;
        width: 80%; /* Adjust width to fit the text */
        transform: translate(-50%, -50%);
        color: black;
        font-size: 22px; /* Default font size */
        font-weight: bold;
        text-align: center;
        line-height: 1.4; /* Adjust line height for better spacing */
        padding: 5px; /* Optional: Add padding for better spacing */
        border-radius: 5px; /* Optional: Add border radius for rounded corners */
    }
.custom-size {
    width: auto; /* 50% of the parent element's width */
    height: auto; /* Adjust height automatically to maintain aspect ratio */
}

.carousel-indicators button {
    background-color: black !important;
}

.carousel-indicators .active {
    background-color: darkgray !important; /* Optional: Different color for the active indicator */
}
h6 {
    font-family: 'Arial Rounded MT' !important;
    font-size:medium;
}
@media (max-width: 768px) {
    .carousel-item h6 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%; /* Adjust width to fit the text */
        transform: translate(-50%, -50%);
        color: black;
        font-size: 18px; /* Default font size */
        font-weight: bold;
        text-align: center;
        line-height: 1.4; /* Adjust line height for better spacing */
        padding: 10px; /* Optional: Add padding for better spacing */
        border-radius: 5px; /* Optional: Add border radius for rounded corners */
    }
}