.btn-prev,
.btn-next {
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out;
    border-radius: 50%;
    background-color: #fff;
    color: #3e4265 !important;
    box-shadow: 0 .275rem .75rem -0.0625rem rgba(19, 16, 34, .06), 0 .125rem .4rem -0.0625rem rgba(19, 16, 34, .03)
}

    .btn-prev:focus,
    .btn-next:focus {
        box-shadow: 0 .275rem .75rem -0.0625rem rgba(19, 16, 34, .06), 0 .125rem .4rem -0.0625rem rgba(19, 16, 34, .03)
    }

    .btn-prev.bg-white,
    .btn-next.bg-white {
        color: #3e4265 !important
    }

    .btn-prev:not(.bg-transparent):hover,
    .btn-next:not(.bg-transparent):hover {
        background-color: #0058D2 !important;
        color: #fff !important;
        box-shadow: 0 .5rem 1.125rem -0.5rem rgba(99, 102, 241, .9) !important
    }

    .btn-prev > i,
    .btn-next > i {
        font-size: 1.5rem
    }

    .btn-prev.btn-sm > i,
    .btn-group-sm > .btn-prev.btn > i,
    .btn-next.btn-sm > i,
    .btn-group-sm > .btn-next.btn > i {
        font-size: 1.25rem
    }

    .btn-prev.btn-lg > i,
    .btn-group-lg > .btn-prev.btn > i,
    .btn-next.btn-lg > i,
    .btn-group-lg > .btn-next.btn > i {
        font-size: 1.75rem
    }

    .btn-prev.btn-xl > i,
    .btn-next.btn-xl > i {
        font-size: 2rem
    }

.swiper-button-disabled,
.swiper-button-disabled:disabled {
    color: rgba(62, 66, 101, .5) !important;
    box-shadow: 0 .275rem .75rem -0.0625rem rgba(19, 16, 34, .06), 0 .125rem .4rem -0.0625rem rgba(19, 16, 34, .03) !important;
    opacity: 1
}

    .swiper-button-disabled.shadow-none,
    .swiper-button-disabled:disabled.shadow-none {
        box-shadow: none !important
    }

.pagination .swiper-button-disabled,
.pagination .swiper-button-disabled:disabled {
    background-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none
}

.swiper .btn-prev:not(.position-static),
.swiper .btn-next:not(.position-static) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5
}

.swiper .btn-prev {
    left: 1.25rem
}

.swiper .btn-next {
    right: 1.25rem
}

.swiper-nav-onhover .btn-prev,
.swiper-nav-onhover .btn-next {
    opacity: 0 !important
}

.swiper-nav-onhover:hover .btn-prev,
.swiper-nav-onhover:hover .btn-next {
    opacity: 1 !important
}

.swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 1.25rem
}

.swiper-pagination-bullet {
    width: .3125rem;
    height: .3125rem;
    transition: width .2s ease-in-out, height .2s ease-in-out, background-color .2s ease-in-out;
    border-radius: 50rem;
    background-color: #b4b7c9;
    opacity: 1
}

.swiper-pagination-bullet-active {
    background-color: #6366f1
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 1.25rem
}

    .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
        margin-right: .4375rem;
        margin-left: .4375rem
    }

    .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active,
    .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
        width: 1.5rem
    }

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-vertical {
    flex-direction: column;
    right: 1.25rem
}

    .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-pagination-bullets.swiper-pagination-vertical .swiper-pagination-bullet {
        margin-top: .4375rem;
        margin-bottom: .4375rem
    }

    .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet-active,
    .swiper-pagination-bullets.swiper-pagination-vertical .swiper-pagination-bullet-active {
        height: 1.5rem
    }

.page-link.btn-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0
}

.swiper-scrollbar {
    background-color: #e2e5f1
}

.swiper-scrollbar-drag {
    background-color: #a2a6bc
}

.swiper-vertical > .swiper-scrollbar {
    top: 0;
    height: 100%;
    width: .1875rem
}

.swiper-horizontal > .swiper-scrollbar {
    left: 0;
    width: 100%;
    height: .1875rem
}

.scrollbar-hover .swiper-scrollbar {
    transition: opacity .2s ease-in-out;
    opacity: 0
}

.scrollbar-hover:hover .swiper-scrollbar {
    opacity: 1
}

.swiper-pagination-progressbar {
    background-color: #e2e5f1
}

    .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        background-color: #0058D2 !important
    }

    .swiper-horizontal > .swiper-pagination-progressbar,
    .swiper-pagination-progressbar.swiper-pagination-horizontal {
        height: .1875rem
    }

    .swiper-vertical > .swiper-pagination-progressbar,
    .swiper-pagination-progressbar.swiper-pagination-vertical {
        width: .1875rem
    }

.swiper-tabs {
    position: relative;
    height: 100%;
}

.swiper-tab {
    display: flex;
    position: absolute;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: opacity .3s ease-in-out;
    opacity: 0
}
.mobile-app-slider .swiper-slide:not(.swiper-slide-active) {
    transition: opacity .3s ease-in-out;
    opacity: .6;
}
    .swiper-tab.active {
        position: relative;
        opacity: 1
    }

.mobile-app-slider {
    max-width: 328px;
    border-radius: 4rem;
}

@media (min-width: 768px) {
    .mobile-app-slider { max-width: 100%; }
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

.phone-frame {
    max-width: 328px;
    background-image: url(/assets/landing/phone-frame.png);
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.phone-screen {
    max-width: 328px;
    background-image: url(/assets/landing/phone-screen.png);
    background-size: cover !important;
    background-repeat: no-repeat !important;
}