.hero{

    position:relative;

    width:100%;
    height:100vh;

    overflow:hidden;

}

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

.hero-slider{

    position:absolute;

    inset:0;

}

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity 2s ease;

}

.slide.active{

    opacity:1;

    z-index:2;

}

.slide img{

    width:100%;
    height:100%;

    object-fit:cover;

    animation:slowZoom 12s ease-in-out infinite;

}

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

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.65)
    );

    z-index:3;

}

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

.hero-content{

    position:relative;

    z-index:4;

    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    padding:20px;

}

.hero-subtitle{

    color:var(--yellow);

    letter-spacing:4px;

    margin-bottom:20px;

    text-transform:uppercase;

}

.hero-content h1{

    font-family:'Cinzel', serif;

    font-size:78px;

    max-width:1000px;

    margin-bottom:25px;

    line-height:1.2;

}

.hero-content p{

    max-width:700px;

    line-height:1.8;

    font-size:18px;

    color:#f0f0f0;

    margin-bottom:40px;

}

/* =========================
   BUTTON
========================= */

.explore-btn{

    padding:16px 36px;

    background:var(--gold);

    color:black;

    border-radius:50px;

    font-weight:600;

    transition:0.4s;

}

.explore-btn:hover{

    transform:translateY(-5px);

    background:var(--yellow);

}

/* =========================
   AUDIO BUTTON
========================= */

.audio-toggle{

    position:absolute;

    bottom:40px;
    right:40px;

    width:60px;
    height:60px;

    border-radius:50%;

    background:
    rgba(255,255,255,0.15);

    backdrop-filter:blur(10px);

    color:white;

    font-size:22px;

    z-index:10;

}

/* =========================
   ANIMATION
========================= */

@keyframes slowZoom{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.1);

    }

}