.carousel-container {
    position: relative;
}

.progress {
    height: 0.7rem;
    width: 100%;
}

.carousel-buttons {
    position: relative; /* Position relative to the progress bar */
    display: flex;
    justify-content: space-between; /* Space buttons evenly */
    /* top: -1.1rem; Position buttons over the progress bar */
    width: 100%;
}

.carousel-buttons button {
    cursor: pointer;
    border: none;
    background-color: var(--bs-secondary-bg); /* Default inactive color */
    color: var(--bs-secondary-color);
    height: 2rem;
    transform: translate(-50%, -70%);
    border-radius: 50%;
    width: 2rem;
    position: absolute; /* Position buttons absolutely */
}

.carousel-buttons button.active {
    background-color: var(--bs-dark); /* Active button color */
    color: var(--bs-light);
}

.carousel-item {
    display: none;
    align-items: center;
}

.carousel-item.active {
    display: flex !important;
}

.carousel-inner {
    width:auto;
}


.carousel-control-prev, .carousel-control-next, .carousel-control {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    font-size: 2rem;
    cursor: pointer;
}

.abs {
    position: absolute;  /* Position the buttons absolutely */
    top: 40% !important;            /* Center the buttons vertically */
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
/*     transform: translateY(-50%); Adjust for vertical centering  */
    z-index: 1;        /* Ensure the buttons are above the carousel items */
}

@media (min-width: 500px) { 
    #progressCarousel { 
        width: 70vw;
    } 
}