/**
=========================================================
DHE Studio - Premium Swiper Styling
Swiper v11 Optimized Build
=========================================================
*/

.swiper{
    position:relative;
    overflow:hidden;
    width:100%;
    height:100%;
    margin:auto;
    padding:0;
    z-index:1;
    display:block
}

.swiper-wrapper{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    transition-property:transform;
    box-sizing:border-box
}

.swiper-slide{
    flex-shrink:0;
    width:100%;
    height:100%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center
}

/* =========================================================
   HERO SWIPER
========================================================= */

.hero-swiper{
    position:relative;
    width:100%;
    height:100vh
}

.hero-swiper .swiper-slide{
    min-height:100vh;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative
}

.hero-swiper .swiper-slide::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(15,23,42,0.65);
    z-index:1
}

.hero-swiper .hero-content{
    position:relative;
    z-index:2
}

/* =========================================================
   PRODUCT SWIPER
========================================================= */

.product-swiper{
    padding-bottom:70px
}

.product-swiper .swiper-slide{
    height:auto
}

/* =========================================================
   TESTIMONIAL SWIPER
========================================================= */

.testimonial-swiper{
    padding-bottom:60px
}

/* =========================================================
   LOGO SWIPER
========================================================= */

.logo-swiper .swiper-slide{
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:.7;
    transition:0.4s ease
}

.logo-swiper .swiper-slide:hover{
    opacity:1;
    transform:scale(1.05)
}

/* =========================================================
   NAVIGATION BUTTONS
========================================================= */

.swiper-button-prev,
.swiper-button-next{
    width:52px;
    height:52px;
    border-radius:50%;
    background:#ffffff;
    color:#0F172A;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all .3s ease;
    box-shadow:0 10px 30px rgba(0,0,0,0.15)
}

.swiper-button-prev{
    left:25px
}

.swiper-button-next{
    right:25px
}

.swiper-button-prev:hover,
.swiper-button-next:hover{
    background:#2563EB;
    color:#ffffff;
    transform:translateY(-50%) scale(1.08)
}

.swiper-button-prev::after,
.swiper-button-next::after{
    font-size:16px;
    font-weight:800
}

.swiper-button-disabled{
    opacity:.4;
    pointer-events:none
}

/* =========================================================
   PAGINATION
========================================================= */

.swiper-pagination{
    position:absolute;
    bottom:30px !important;
    left:0;
    width:100%;
    text-align:center;
    z-index:20
}

.swiper-pagination-bullet{
    width:12px;
    height:12px;
    background:rgba(255,255,255,0.5);
    border-radius:50px;
    margin:0 6px !important;
    opacity:1;
    transition:all .3s ease
}

.swiper-pagination-bullet-active{
    width:34px;
    background:#F59E0B
}

/* =========================================================
   SCROLLBAR
========================================================= */

.swiper-scrollbar{
    background:rgba(255,255,255,0.2);
    border-radius:50px
}

.swiper-scrollbar-drag{
    background:#2563EB;
    border-radius:50px
}

/* =========================================================
   LAZY LOADER
========================================================= */

.swiper-lazy-preloader{
    width:42px;
    height:42px;
    border:4px solid #2563EB;
    border-top-color:transparent;
    border-radius:50%;
    animation:swiperSpin 1s linear infinite
}

@keyframes swiperSpin{

    100%{
        transform:rotate(360deg)
    }

}

/* =========================================================
   SMOOTH EFFECTS
========================================================= */

.swiper-slide-active .hero-content{

    animation:fadeUp 1s ease forwards

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px)

    }

    to{

        opacity:1;
        transform:translateY(0)

    }

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:992px){

    .hero-swiper{

        height:85vh

    }

}

@media(max-width:768px){

    .hero-swiper{

        height:75vh

    }

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

        width:42px;
        height:42px

    }

    .swiper-button-prev{

        left:10px

    }

    .swiper-button-next{

        right:10px

    }

    .swiper-pagination{

        bottom:15px !important

    }

}

@media(max-width:576px){

    .hero-swiper{

        height:70vh

    }

    .swiper-pagination-bullet{

        width:10px;
        height:10px

    }

    .swiper-pagination-bullet-active{

        width:24px

    }

}