.swiper-pagination {
    width: 100%;
    height: 7px;
    max-width: 250px;
    display: flex;
    gap: 20px;
}
.swiper-pagination-bullet {
    width: 100%;
    max-width: 121px;
    height: 100%;
    position: relative;
    background: grey;
    overflow: hidden;
    border-radius: 99em;
}
.swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light));
    transition: none;
}
.swiper-pagination-bullet.is-before::after {
    width: 100%;
    background:var(--color-gold-dark);
}
.swiper-pagination-bullet.animate-progress::after {
    width: 100%;
    transition: width 2s linear;
}

.swiper-navigation {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.swiper-button-prev-custom {
    --x-direction: -100%;
    --y-direction: 100%;
}
.swiper-button-next-custom {
    --x-direction: 100%;
    --y-direction: -100%;
}

.swiper-button-prev-custom,
.swiper-button-next-custom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.swiper-button-wrapper {
    overflow: hidden;
}

.swiper-button-prev-custom .svg-wrapper,
.swiper-button-next-custom .svg-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-button-prev-custom:hover .svg-wrapper,
.swiper-button-next-custom:hover .svg-wrapper {
    animation: slideIn 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.swiper-button-prev-custom .svg-in,
.swiper-button-next-custom .svg-in{
    position: relative;
}
.swiper-button-prev-custom .svg-out,
.swiper-button-next-custom .svg-out{
    position: absolute;
    transform:translate(var(--y-direction),var(--x-direction));
}


@keyframes slideIn {
    0% {
        transform: translate(0%);
    }
    100% {
        transform: translate(var(--x-direction),var(--y-direction));
    }
}