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

.tnp-featured-slider{

    position:relative;

    min-height:620px;

    border-radius:28px;

    overflow:hidden;

    margin-bottom:60px;

    box-shadow:0 30px 80px rgba(0,0,0,.20);

    background:#111;

}

/* =========================
   SLIDES
========================= */

.tnp-featured-slide{

    position:absolute;

    inset:0;

    display:flex;

    align-items:stretch;

    justify-content:flex-start;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .8s ease,
        transform .8s ease;

    transform:scale(1.03);

}

.tnp-featured-slide.active{

    position:relative;

    opacity:1;

    visibility:visible;

    z-index:2;

    transform:scale(1);

}

/* =========================
   OVERLAY
========================= */

.tnp-featured-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    width:100%;

    padding:70px;

    color:#fff;

    background:linear-gradient(
        180deg,
        rgba(0,0,0,.10) 0%,
        rgba(0,0,0,.55) 45%,
        rgba(0,0,0,.92) 100%
    );

}

/* =========================
   CONTENT
========================= */

.tnp-featured-overlay > .tnp-container{

    width:100%;

}

/* =========================
   SLIDER DOTS
========================= */

.tnp-slider-dots{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:20;

}

.tnp-slider-dot{

    width:12px;

    height:12px;

    border:none;

    border-radius:50%;

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

    cursor:pointer;

    transition:.3s;

}

.tnp-slider-dot:hover{

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

}

.tnp-slider-dot.active{

    background:#fff;

    transform:scale(1.3);

}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .tnp-featured-slider{

        min-height:500px;

    }

    .tnp-featured-overlay{

        padding:35px 25px;

    }

}