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

.hero-slider{
    position:relative;
    height:62vh;
    min-height:500px;
    overflow:hidden;
max-height:820px;
    background:#071d3b;
padding-top:180px;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .9s ease;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
}

.hero-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    animation:heroZoom 18s linear infinite;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(6,22,46,.78) 0%,
        rgba(6,22,46,.58) 40%,
        rgba(6,22,46,.28) 100%
    );

    backdrop-filter:blur(2px);
}

.hero-container{
    position:relative;
    z-index:5;
    height:100%;
    display:flex;
    align-items:center;
}

.hero-content{
    max-width:700px;
    color:#fff;
}

.hero-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

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

    backdrop-filter:blur(18px);

    margin-bottom:35px;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.hero-content h1{

    font-size:52px;

    line-height:1;

    margin-bottom:35px;

    font-weight:800;

}

.hero-content p{

    font-size:24px;

    line-height:1.7;

    color:#dce7ff;

    margin-bottom:15px;

    max-width:650px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn{

    background:#F4B400;

    color:#111;

    padding:18px 34px;

    border-radius:12px;

    font-weight:700;

    text-decoration:none;

}

.btn:hover{

    transform:translateY(-3px);

}

.btn-outline{

    border:2px solid rgba(255,255,255,.65);

    color:#fff;

    padding:18px 34px;

    border-radius:12px;

    text-decoration:none;

}

.btn-outline:hover{

    background:white;

    color:#111;

}

.hero-dots{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:30;

}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

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

    cursor:pointer;

}

.dot.active{

    background:#F4B400;

    transform:scale(1.35);

}

@keyframes heroZoom{

0%{
transform:scale(1);
}

100%{
transform:scale(1.08);
}

}
.header-scrolled{

    background:#ffffff;

    box-shadow:0 8px 30px rgba(0,0,0,.08);

    backdrop-filter:none;

}
}