/* =========================
HERO
========================= */
.hero-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

.hero{
    position:relative;

    width:100%;
    height:133vh;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    
    overflow:hidden;
}

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

.hero-video{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:1;
}

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

.hero-slider{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    overflow:hidden;

    z-index:1;
}

.hero-slide{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity 0.8s ease;
}

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

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

.hero::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

    z-index:2;
}

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

.hero-content{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    background:#fff201;

    border-radius:50%;

    text-align:center;

    color:white;

    z-index:3;

    padding:40px;

    transition:opacity .3s ease;
}

.hero-content h1{
    font-family:'Bebas Neue', sans-serif;

    font-size:50px;
    font-weight:600;

    text-transform:uppercase;

    color:#e51b19;

    letter-spacing:2px;

    text-shadow:0 5px 20px rgba(0,0,0,0.6);
}

.highlight{
    color:#fff301;
}

/* =========================
WORD ROTATOR
========================= */

.word-rotator{
    display:inline-block;

    position:relative;

    width:100%;
    min-width:180px;

    height:1em;

    perspective:500px;

    vertical-align:middle;

    margin-top:-2.3rem;
}

.word{
    position:absolute;

    top:0;
    left:0;

    width:100%;

    opacity:0;

    transform:rotateX(90deg);

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

    font-family:'Dancing Script', cursive;

    text-transform:capitalize;

    rotate:-5deg;

    color:#ffffff;

    -webkit-text-stroke:2px #0077b6;

    text-shadow:
        0 3px 8px rgba(0,0,0,0.5);

    font-size:80px;

    letter-spacing:2px;
}

.word.active{
    opacity:1;
    transform:rotateX(0deg);
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1000px){

    .hero{
        height:90vh;
    }

    .hero-content{
        width:90%;
        padding:25px;
        border-radius:30px;
    }

    .hero-content h1{
        font-size:36px;
    }

    .word{
        font-size:45px;
    }

}

@media(max-width:700px){

    .hero{
        height:75vh;
    }

    .hero-content{
        width:92%;

        padding:20px;

        border-radius:20px;
    }

    .hero-content h1{
        font-size:28px;
    }

    .word{
        font-size:32px;
    }

}