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

.hero-slider{

    background:#fff;

    margin-bottom:20px;

}

#heroCarousel{

    overflow:hidden;

}

/* Banner Height */

.carousel-item{

    height:360px;

}

.carousel-item img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==============================
    Overlay
==============================*/

.carousel-caption{

    left:8%;

    right:auto;

    bottom:50px;

    max-width:550px;

    text-align:left;

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

    padding:25px;

    border-radius:8px;

}

.carousel-caption h2{

    font-size:32px;

    color:#fff;

    font-weight:700;

}

.carousel-caption p{

    font-size:16px;

    color:#fff;

    margin:15px 0;

}

.carousel-caption .btn{

    padding:10px 22px;

}

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

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

    width:55px;

    opacity:0;

    transition:.3s;

}

.hero-slider:hover .carousel-control-prev,
.hero-slider:hover .carousel-control-next{

    opacity:1;

}

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

    width:48px;

    height:48px;

    border-radius:50%;

    background-color:rgba(0,0,0,.5);

}

/*==============================
    Indicators
==============================*/

.carousel-indicators button{

    width:12px;

    height:12px;

    border-radius:50%;

}

.carousel-indicators .active{

    background:#ffc107;

}

/*==============================
    Thumbnails
==============================*/

.slider-thumbnails{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:15px;

}

.slider-thumbnails img{

    width:100px;

    height:60px;

    object-fit:cover;

    cursor:pointer;

    opacity:.6;

    border:2px solid transparent;

    transition:.3s;

}

.slider-thumbnails img:hover,
.slider-thumbnails img.active{

    opacity:1;

    border-color:#ffc107;

}

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

@media(max-width:992px){

.carousel-item{

    height:280px;

}

.carousel-caption{

    max-width:420px;

}

.carousel-caption h2{

    font-size:24px;

}

}

@media(max-width:768px){

.carousel-item{

    height:220px;

}

.carousel-caption{

    left:5%;

    bottom:20px;

    padding:15px;

}

.carousel-caption h2{

    font-size:18px;

}

.carousel-caption p{

    display:none;

}

.slider-thumbnails{

    display:none;

}

}


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

.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    color:#fff;

    font-size:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:all .35s ease;

    z-index:20;

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

}

/* Left */

.slider-prev{

    left:25px;

}

/* Right */

.slider-next{

    right:25px;

}

/* Hover */

.slider-btn:hover{

    background:#ffc107;

    color:#000;

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

}

/* Click */

.slider-btn:active{

    transform:translateY(-50%) scale(.95);

}

/* Show only on hover */

.slider-btn{

    opacity:0;

}

.hero-slider:hover .slider-btn{

    opacity:1;

}

/* Mobile */

@media(max-width:768px){

.slider-btn{

    width:42px;

    height:42px;

    font-size:18px;

}

.slider-prev{

    left:10px;

}

.slider-next{

    right:10px;

}

}