.carousel-container {
    position: relative;
}

.carousel-controls a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

.carousel-controls a:hover {
    color: #f6de00;
}

.carousel-images {
    position: relative;
    width: 100%;
}

.carousel-slide {
    background-size: cover;
    background-position: center;
    height: 500px; /* Adjust as needed */
    position: relative;
}

.ilmdcara {
    position: relative;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    /*height: 100vh;  Full viewport height */
    overflow: hidden; /* Ensure no overflow outside the container */
}

#image-to-change {
    width: 100%;
   /* height: 100%;*/    
   object-fit: cover; 
/* Ensures the image covers the container */
}

#carousel-caption {
    font-size: 2em;
    max-width: 35%;
    /* padding: 10px; */
    position: absolute;
    bottom: 50%;
    left: 36%;
    transform: translateX(-50%);
    box-sizing: border-box;
    /* max-width: 35%; */
    align-items: baseline;
    transform: translate(-50%, 50%);
    font-weight: 500;
    line-height: 1em;
}


/* Responsive adjustments */
@media screen and (max-width: 1440px) {
    #carousel-caption {
        font-size: 1.8em; /* Adjust font size for larger screens */
        transform: translateX(-25%);
        max-width: 80%;
    }
    article#carousel-caption {
    width: 80%;
}
}

@media screen and (max-width: 768px) {
    #carousel-caption {
    font-size: 1em;
        /* transform: translateX(-20%); */
        /* max-width: 80%; */
        font-weight: 600;
        line-height: 1.2em;
        text-align: center;
    }
    article#carousel-caption {
    width: 80%;
}
}

@media screen and (max-width: 480px) {
    #carousel-caption {
        font-size: 1em;
        transform: translateX(-15%);
        max-width: 80%;
        margin: 0 auto;
        margin-top: 38%;
        text-align: center;
    }
    article#carousel-caption {
    width: 80%;
}
}




/* Responsive adjustments */
@media screen and (max-width: 1440px) {
    #carousel-caption {
    margin: 0 auto;
    text-align: center;
    padding: 10px; /* Add some padding for better readability */
    border-radius: 5px; /* Optional: for rounded corners */
    position: absolute; /* Ensure it is positioned relative to its parent */
    font-size: 1.2em; /* Slightly larger text on larger screens */
    max-width: 85%; /* Adjust width */
    bottom: 12%; /* Adjust bottom spacing */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center the element */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }
    article#carousel-caption {
        width: 100%;
        font-size: 1em;
    }
}

@media screen and (max-width: 768px) {
     #carousel-caption {
    margin: 0 auto;
    text-align: center;
    padding: 10px; /* Add some padding for better readability */
    position: absolute; /* Ensure it is positioned relative to its parent */
    font-size: 1.2em; /* Slightly larger text on larger screens */
    max-width: 85%; /* Adjust width */
    bottom: 12%; /* Adjust bottom spacing */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center the element */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }
    article#carousel-caption {
        width: 100%;
        font-size: 1em;
    }
}

@media screen and (max-width: 480px) {
   #carousel-caption {
    margin: 0 auto;
    text-align: center;
    padding: 10px; /* Add some padding for better readability */
    position: absolute; /* Ensure it is positioned relative to its parent */
    font-size: 1.2em; /* Slightly larger text on larger screens */
    max-width: 85%; /* Adjust width */
    bottom: 6%; /* Adjust bottom spacing */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center the element */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }
    article#carousel-caption {
        width: 100%;
        font-size: 1em;
    }
}

img#image-to-change {
    margin-bottom: 0;
}