.index_img {
    overflow: hidden !important;
    object-fit: fit; /* or use 'cover' based on your preference */
    width: 100%;
    /* height: 100%; */

}

.carousel_custom {
    color: #1a1d20;
    background-color: #ffffff75;
    border-radius: 5px;
}

.carousel_button_background {
    color: #1a1d20;
    background-color: #1a1d2075;
    border-radius: 5px;
    padding: 1rem;
}

main {
    min-height: 100vh;
}

/* Set a fixed height on carousel items */
.carousel-inner, 
.carousel-item {
    /* height: 500px; Added 'px' units */
    height: 500px;
}

@media screen and (max-width: 800px) {
    .index_img {
        object-fit: cover;  /* Adjust based on your needs */
        /* height: 100%;       Ensure the image still fills the container */
    }
    .carousel-inner, 
.carousel-item {
    /* height: 500px; Added 'px' units */
    height: 300px;
}
}