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

.hero{

    position:relative;

    width:100%;

    overflow:hidden;

}

.hero-slide{

    position:relative;

    width:100%;

    height:82vh;

    min-height:650px;

}

.hero-image{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.65),
        rgba(0,0,0,.25),
        rgba(0,0,0,.08)
    );

}

.hero-content{

    position:absolute;

    top:50%;

    left:8%;

    transform:translateY(-50%);

    max-width:540px;

    color:#fff;

    z-index:5;

}

.hero-subtitle{

    font-size:13px;

    letter-spacing:4px;

    font-weight:600;

    text-transform:uppercase;

    margin-bottom:16px;

}

.hero-content h1{

    font-size:72px;

    line-height:1.05;

    font-weight:800;

    margin-bottom:20px;

}

.hero-description{

    font-size:18px;

    line-height:1.7;

    margin-bottom:35px;

    color:#f3f3f3;

}

.hero-buttons{

    display:flex;

    gap:16px;

}

.hero-btn{

    padding:15px 34px;

    text-decoration:none;

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

    transition:.3s;

    border:2px solid #fff;

}

.hero-btn.primary{

    background:#fff;

    color:#111;

}

.hero-btn.secondary{

    color:#fff;

    background:transparent;

}

.hero-btn:hover{

    background:#111;

    border-color:#111;

    color:#fff;

}

.hero-dots{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:10;

}

.hero-dot{

    width:11px;

    height:11px;

    border-radius:50%;

    background:#fff;

    opacity:.35;

}

.hero-dot.active{

    opacity:1;

}

@media(max-width:768px){

.hero-slide{

height:420px;

min-height:auto;

}

.hero-overlay{

background:linear-gradient(

180deg,

rgba(0,0,0,.45),

rgba(0,0,0,.25)

);

}

.hero-content{

left:6%;

right:6%;

top:55%;

max-width:none;

}

.hero-subtitle{

font-size:11px;

letter-spacing:2px;

}

.hero-content h1{

font-size:42px;

margin-bottom:14px;

}

.hero-description{

font-size:15px;

line-height:1.6;

margin-bottom:22px;

}

.hero-buttons{

flex-direction:column;

gap:12px;

}

.hero-btn{

width:190px;

text-align:center;

padding:14px 20px;

}

.hero-dots{

bottom:18px;

}

}