/* ==========================================================
    App Slider
========================================================== */

.app-slider{

    position:relative;

    width:100%;

    overflow:hidden;

}

.app-slider .swiper-wrapper{

    align-items:stretch;

}

.app-slider .swiper-slide{
    box-sizing:border-box;
    height:auto;

}

/* ==========================================================
    Navigation
========================================================== */

.app-slider .swiper-button-prev,
.app-slider .swiper-button-next{

    width:46px;
    height:46px;

    border-radius:50%;

    background:rgba(255,255,255,.96);

    border:1px solid var(--border);

    color:var(--text);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.25s;

}

.app-slider .swiper-button-prev:hover,
.app-slider .swiper-button-next:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

.app-slider .swiper-button-prev::after,
.app-slider .swiper-button-next::after{

    display:none;

}
.app-slider .swiper-button-prev,
.app-slider .swiper-button-next{

    display:flex;

    align-items:center;

    justify-content:center;

}

.app-slider .swiper-button-prev i,
.app-slider .swiper-button-next i{

    font-size:18px;

    line-height:1;

}

.app-slider .swiper-button-disabled{

    opacity:.35;

    pointer-events:none;

}
.swiper-button-next, .swiper-button-prev{
    top: var(--swiper-navigation-top-offset, 41%);
}
/* ==========================================================
    Pagination
========================================================== */

.app-slider .swiper-pagination{

    position:relative;

    margin-top:24px;

}

.app-slider .swiper-pagination-bullet{

    width:10px;

    height:10px;

    margin:0 5px !important;

    opacity:1;

    background:#d1d5db;

    transition:.25s;

}

.app-slider .swiper-pagination-bullet-active{

    width:28px;

    border-radius:30px;

    background:var(--primary);

}

/* ==========================================================
    Scrollbar
========================================================== */

.app-slider .swiper-scrollbar{

    margin-top:18px;

    position:relative;

    height:4px;

    border-radius:10px;

    background:rgba(0,0,0,.08);

}

.app-slider .swiper-scrollbar-drag{

    background:var(--primary);

}

/* ==========================================================
    Effects
========================================================== */

.app-slider[data-effect="fade"] .swiper-slide{

    pointer-events:none;

}

.app-slider[data-effect="fade"] .swiper-slide-active{

    pointer-events:auto;

}

/* ==========================================================
    Responsive
========================================================== */

@media (max-width:768px){

    .app-slider .swiper-button-prev,
    .app-slider .swiper-button-next{

        display:none;

    }

}