.swiper-buttons {


    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.swiper-item-button {
    background: none;
    padding: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid var(--theme-primary);
    background-color: transparent;
}

.swiper-item-button svg {
    max-height: 16px;
    width: auto;
    height: auto;
}

.swiper-item-button[disabled] {
    opacity: 0;
}


.bar-and-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-bar {
    position: static !important;
    width: 100%;
    background: #E4E4E4 !important;
}

.progress-bar span {
    background: var(--theme-primary) !important;
}

@media only screen and (min-width:992px) {
    .swiper-item-button svg {
        transition: transform var(--timing-function);
        transform: translate3d(0px, 0px, 0.0001px);
    }
}

@media only screen and (hover:hover) {
    .next-btn:hover svg {
        transform: translate3d(5px, 0px, 0.0001px);
    }

    .prev-btn:hover svg {
        transform: translate3d(-5px, 0px, 0.0001px);
    }

    .swiper-item-button {
        transform: translate3d(0px, 0px, 0.0001px);
        transition: background-color var(--timing-function), transform var(--timing-function);
    }

    .swiper-item-button:hover {
        background-color: var(--hover-white);
        transform: translate3d(0px, 0px, 0.0001px);
    }

    .swiper-item-button[disabled]:hover {
        background-color: transparent;
        transform: translate3d(0px, 0px, 0.0001px);
    }

    .swiper-item-button[disabled]:hover svg {
        transforM: translate3d(0px, 0px, 0.0001px) !important;
    }
}