.carousel-container {
    width: 480px; /*100%;*/
    overflow: hidden; /* Hides images outside the current view */
    position: relative;
}

.image-wrapper {
    display: flex; /* Arranges images side-by-side */
    transition: transform 0.5s ease-in-out; /* Smooth transition for slide effect */
    width: fit-content; /* Ensure the wrapper is wide enough for all images */
}

.slide {
    width: 100%; /* Each slide takes the full width of the container */
    flex-shrink: 0; /* Prevents images from shrinking */
    display: block;
}

/* Styling for the pagination dots (numbers) */
.pagination-dots button {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin: 0 2px;
    background: #fff;
}

.pagination-dots button.active {
    background-color: #333;
    color: white;
}

.carousel-nav{
    display: flex;
    /* border:1px solid #000; */
    justify-content: center;
}

.hidden-button{
    display: none;
}