.width-container {
    width: 60rem;
}

.center-container {
    display: flex;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

.carousel-inner img {
    height: 600px;
    object-fit: contain;
}

.footer-container {
    background-color: #0d6efd;
    margin-top: auto;
}

html, body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ----- Styles for Carousel Arrows Visibility ----- */

.carousel-inner {
    position: relative; /* Ensures the absolute positioning of the arrows is relative to the carousel */
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%; /* Position vertically in the middle */
    transform: translateY(-50%); /* Adjust to center exactly */
    width: 50px; /* Adjust width for circular background */
    height: 50px; /* Adjust height for circular background */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4); /* Dark semi-transparent background */
    border-radius: 50%; /* Makes it a circle */
    transition: background 0.3s ease-in-out;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(0, 0, 0, 0.6); /* Darken more on hover */
}

.carousel-control-prev,
.carousel-control-next {
    opacity: 1; /* Ensure arrows are always visible */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%); /* Make arrows white for better visibility */
}