.swiper-container {
    width: 100%;
    height: auto;
}


.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    font-size: 10vw;
    text-align: center;
    color: #fff;
    transition: 0.5s all;
    overflow:hidden;
}

.swiper-slide::before{
    content:"";
    position:absolute;
    height:100%;
    width:100%;
    background-color:rgba(0,0,0,0);
    z-index:10;
}

.swiper-slide a {
    height: 500px;
    width: 100%;
    z-index: 20;
}
    .swiper-slide .image {
        height: 500px;
        width: 100%;
        object-fit: cover;
    }

    .swiper-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
    }
/* button style */
.swiper-pagination-bullet {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    margin: 0 10px;
    background-color: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

    .swiper-pagination-bullet span {
        color: #fff;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


/* button circle */
.progress {
    transform: rotate(-90deg);
    height: auto;
    border-radius: 2.25rem;
    background-color: #172b69;
}

/*.swiper-pagination-bullet{opacity:.5 !important;}*/

.circle-origin {
    fill: #431f46;
    stroke: rgb(48, 174, 235);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 125.664px;
    stroke-dashoffset: 125.664px;
}

.swiper-pagination-bullet-active .circle-origin {
    animation: progress 5s;
}

@keyframes progress {
    0% {
        stroke-dashoffset: 125.664px;
    }

    90% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -125.664px;
    }
}