.carousel-control-next,
.carousel-control-prev {
    height: 25px !important;
    width: 25px !important;
    border-radius: 25px !important;
    background-color: var(--prim-color) !important;
    color: var(--white-color) !important;
}

    .carousel-control-next:focus,
    .carousel-control-prev:focus,
    .carousel-control-next:active,
    .carousel-control-prev:active,
    .carousel-control-next:focus,
    .carousel-control-prev:focus,
    .carousel-control-prev:hover,
    .carousel-control-next:hover {
        background-color: var(--prim-color) !important;
        color: var(--white-color) !important;
    }

.carousel-control-prev .carousel-control-prev-icon,
.carousel-control-next .carousel-control-next-icon {
    background-image: none !important; 
    background-color: var(--prim-color) !important;
    border-radius: 25px !important;
    height: 25px !important;
    width: 25px !important;
    border-radius: 25px !important;
    color: var(--white-color) !important;
}

.carousel-control-next:focus .carousel-control-next-icon,
.carousel-control-prev:focus .carousel-control-prev-icon,
.carousel-control-next:active .carousel-control-next-icon,
.carousel-control-prev:active .carousel-control-prev-icon,
.carousel-control-next:focus .carousel-control-next-icon,
.carousel-control-prev:focus .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon,
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next-icon:active,
.carousel-control-prev-icon:active,
.carousel-control-next-icon:focus,
.carousel-control-prev-icon:focus,
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: var(--prim-color) !important;
    color: var(--white-color) !important;
}

.carousel-control-next-icon {
    align-content: end !important;
    font-size: 16px !important;
    text-align: right !important;
}

.carousel-control-prev-icon {
    align-content: center !important;
    font-size: 16px !important;
    text-align: center !important;
}