@import url('color.css');

.carousel-indicators button {
    border-radius: 50%;
    width: 10px !important;
    height: 10px !important;
    /* margin-bottom: 80px; */
}


.carousel-inner {
    border: 2px solid var(--bg-main);
    transition: transform .8s ease, opacity .5s ease-out
}


.carousel-control-prev {
    justify-content: left;
    opacity: 1;
}
.carousel-control-next {
    justify-content: right;
    opacity: 1;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none;
    color:var(--font-color-main);
    background-color: var(--bg-main);
    border-radius: 50%;
}

@media (min-width: 768px) {
    .carousel-inner {
        border: 20px solid var(--bg-main);
    }
}


body.modal-open {
    padding-right: 0 !important;
}

.modal-backdrop {
    /* background-color: rgb(0, 0, 0); */
    /* opacity: 0.9 !important; */
}