/*
==========================================================
Hero
==========================================================
*/

.hero{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:100vh;

    background-image:url("../images/hero.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    overflow:hidden;

}

.hero__overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

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

        rgba(0,0,0,.55)

    );

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero__content{

    max-width:720px;

}

.hero__subtitle{

    display:inline-block;

    margin-bottom:20px;

    color:var(--color-primary);

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.hero__title{

    color:#fff;

    font-size:82px;

    margin-bottom:30px;

}

.hero__description{

    color:#fff;

    font-size:22px;

    max-width:620px;

    margin-bottom:45px;

}

.hero__buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.hero__scroll{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    font-size:34px;

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translate(-50%,0);

    }

    40%{

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

    }

    60%{

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

    }

}