.carousel {
    width: 50%;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


.carousel-inner {
    width: 250%;
    animation: slide 40s infinite;
}


.carousel-inner img {
    width: 83.33%;
    height: auto;
}


@keyframes slide {
    0% {
        margin-left: -21%;
    }
    33.33% {
        margin-left: -74.5%;
    }
    66.66% {
        margin-left: -129%;
    }
    100% {
        margin-left: -21%;
    }
}

.carousel-buttons {
    text-align: center;
    width: 100%;
    padding-top: 42.39%;
    margin-top: -50%;
}


.carousel-button-left,
.carousel-button-right {
    font-size: 20px;
    color: rgb(255, 255, 255);
    margin: 0 -45%;
    border-radius: 30%;
    opacity: 0.7;
}


.carousel-button-left:hover,
.carousel-button-right:hover {
    opacity: 1;

}