.hero-slider{
    position:relative;
    min-height:78vh;
    overflow:hidden;
    background:#111827;
}
.hero-slider-track{
    position:relative;
    min-height:78vh;
}
.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .55s ease, visibility .55s ease;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
}
.hero-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(17,24,39,.68), rgba(17,24,39,.76));
}
.hero-slide.active{
    opacity:1;
    visibility:visible;
    z-index:2;
}
.hero-slide .hero-content{
    position:relative;
    z-index:3;
}
.hero-slider-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:4;
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#0f172a;
    font-size:28px;
    font-weight:900;
    cursor:pointer;
    display:grid;
    place-items:center;
    box-shadow:0 12px 26px rgba(0,0,0,.18);
}
.hero-slider-nav.prev{left:22px}
.hero-slider-nav.next{right:22px}
.hero-slider-dots{
    position:absolute;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    z-index:4;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
}
.hero-slider-dot{
    width:14px;
    height:14px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    cursor:pointer;
    transition:.2s ease;
}
.hero-slider-dot.active{
    background:#fff;
    transform:scale(1.08);
}
.hero-slide .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}
@media (max-width: 860px){
    .hero-slider,
    .hero-slider-track{
        min-height:62vh;
    }
    .hero-slide{
        align-items:flex-end;
    }
    .hero-slide .hero-content{
        padding:90px 0 70px;
    }
    .hero-slider-nav{
        width:44px;
        height:44px;
        font-size:24px;
    }
    .hero-slider-nav.prev{left:10px}
    .hero-slider-nav.next{right:10px}
    .hero-slider-dots{
        bottom:14px;
    }
}