/* ==============================
   Premium Banner Slider
============================== */

.hero-banner-slider{
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

.hero-banner-slider .banner-item{
    overflow: hidden;
    border-radius: 22px;
}

.hero-banner-slider .banner-item img{
    width:100%;
    object-fit:contain;
    background:#fff; /* ya transparent */
}

.hero-banner-slider .banner-item:hover img{
    transform:scale(1.03);
}

/* Premium Navigation */

.hero-banner-slider .owl-nav{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    transform:translateY(-50%);
    pointer-events:none;
}

.hero-banner-slider .owl-nav button{
    position:absolute;
    width:54px;
    height:54px;
    border-radius:50%!important;
    background:rgba(255,255,255,.92)!important;
    color:#222!important;
    font-size:22px!important;
    box-shadow:0 8px 25px rgba(0,0,0,.18);
    transition:.35s;
    pointer-events:auto;
}

.hero-banner-slider .owl-nav button:hover{
    background:#ff6b00!important;
    color:#fff!important;
    transform:scale(1.08);
}

.hero-banner-slider .owl-nav .owl-prev{
    left:20px;
}

.hero-banner-slider .owl-nav .owl-next{
    right:20px;
}

/* Premium Dots */

.hero-banner-slider .owl-dots{
    position:absolute;
    bottom:18px;
    width:100%;
    text-align:center;
}

.hero-banner-slider .owl-dot span{
    width:12px;
    height:12px;
    margin:5px;
    border-radius:50%;
    background:rgba(255,255,255,.55)!important;
    transition:.35s;
}

.hero-banner-slider .owl-dot.active span{
    width:36px;
    border-radius:50px;
    background:#ff6b00!important;
}

/* Tablet */

@media(max-width:991px){

.hero-banner-slider .owl-nav button{
    width:46px;
    height:46px;
    font-size:20px!important;
}

}

/* Mobile */

@media(max-width:576px){

.hero-banner-slider{
    border-radius:16px;
}

.hero-banner-slider .banner-item{
    border-radius:16px;
}


.hero-banner-slider .owl-nav button{
    width:38px;
    height:38px;
    font-size:16px!important;
}

.hero-banner-slider .owl-nav .owl-prev{
    left:10px;
}

.hero-banner-slider .owl-nav .owl-next{
    right:10px;
}

.hero-banner-slider .owl-dot span{
    width:8px;
    height:8px;
}

.hero-banner-slider .owl-dot.active span{
    width:24px;
}

}