/* ======================================================
   GONBAD FIROUZE
   CAROUSEL.CSS
   Version 2.0
======================================================*/



/*======================================================
BOOTSTRAP HERO SLIDER
======================================================*/

.fz-slider{
    position:relative;
    overflow:hidden;
}

.fz-slider .carousel-inner{
    overflow:hidden;
}

.fz-slider .carousel-item{
    transition:transform .8s ease-in-out;
}

.fz-slider img{
    width:100%;
    display:block;
}



/*======================================================
BOOTSTRAP INDICATORS
======================================================*/

.carousel-indicators{

    position:absolute;

    left:50%;
    bottom:25px;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;
    align-items:center;

    gap:10px;

    margin:0;
    padding:0;

    list-style:none;

    z-index:20;

}

.carousel-indicators li{

    flex:0 0 auto;

    width:12px;
    height:12px;

    margin:0 !important;
    padding:0 !important;

    border:none;

    border-radius:50%;

    background:var(--color-primary);

    opacity:.35;

    cursor:pointer;

    transition:
        opacity .35s ease,
        transform .35s ease,
        background .35s ease;

}

.carousel-indicators li:hover{

    opacity:.7;

}

.carousel-indicators li.active{

    opacity:1;

    transform:scale(1.25);

}



/*======================================================
BOOTSTRAP ARROWS
======================================================*/

.carousel-control-prev,
.carousel-control-next{

    width:55px;

    opacity:1;

}

.carousel-control-prev-icon,
.carousel-control-next-icon{

    width:46px;
    height:46px;

    border-radius:50%;

    background-color:rgba(255,255,255,.95);

    background-size:45%;

    box-shadow:0 6px 18px rgba(0,0,0,.15);

    transition:.35s ease;

}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon{

    transform:scale(1.08);

}



/*======================================================
OWL CAROUSEL
======================================================*/

.carousel1{

    position:relative;

}

.carousel1 .owl-stage{

    display:flex;

}

.carousel1 .owl-item{

    display:flex;

}

.carousel1 .owl-nav{

    display:block !important;

}

.carousel1 .owl-nav button{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:42px;
    height:42px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:var(--color-white) !important;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    transition:.35s ease;

}

.carousel1 .owl-nav button:hover{

    transform:
        translateY(-50%)
        scale(1.08);

}

.carousel1 .owl-prev{

    left:-45px;

}

.carousel1 .owl-next{

    right:-45px;

}

.carousel1 .owl-nav img{

    width:22px !important;
    height:22px !important;

}
/* ==========================================
   OWL CAROUSEL NAVIGATION
========================================== */

.carousel1 .owl-nav{
    display:flex !important;
}

.carousel-website .owl-nav button{

    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--color-white) !important;

    border-radius:50%;

    border:none;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

    transition:all .35s ease;

    z-index:20;

}

.carousel-website .owl-nav button:hover{

    background:var(--color-primary) !important;

    transform:translateY(-50%) scale(1.08);

}

.carousel1 .owl-nav .owl-prev{

    left:-45px;

}

.carousel1 .owl-nav .owl-next{

    right:-45px;

}

.carousel1 .owl-nav button img{

    width:22px !important;
    height:22px !important;

}

.carousel1 .owl-nav button span{

    display:none;

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

/* ---------- Large Desktop ---------- */

@media (max-width:1400px){

    .carousel1 .owl-prev{
        left:-25px;
    }

    .carousel1 .owl-next{
        right:-25px;
    }

}


/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .carousel1 .owl-prev{
        left:-15px;
    }

    .carousel1 .owl-next{
        right:-15px;
    }

    .carousel-indicators{
        bottom:18px;
    }

}


/* ---------- Tablet ---------- */

@media (max-width:991px){

    .carousel-control-prev,
    .carousel-control-next{

        display:none;

    }

    .carousel1 .owl-nav{

        display:none !important;

    }

    .carousel-indicators{

        bottom:15px;

        gap:8px;

    }

    .carousel-indicators li{

        width:10px;
        height:10px;

    }

}


/* ---------- Mobile ---------- */

@media (max-width:768px){

    .carousel-indicators{

        bottom:12px;

        gap:7px;

    }

    .carousel-indicators li{

        width:9px;
        height:9px;

    }

}


/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .carousel-indicators{

        bottom:10px;

        gap:6px;

    }

    .carousel-indicators li{

        width:8px;
        height:8px;

    }

}
/* ==========================================
   Mobile Slider Indicators
========================================== */

@media (max-width:991px){

    .carousel-indicators{

        bottom:-15px !important;

    }

}