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

.hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding-top:var(--navbar-height);

    background:url("../images/hero/hero.jpg") center center/cover no-repeat;

    overflow:hidden;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(0,0,0,.80) 0%,

        rgba(0,0,0,.55) 45%,

        rgba(0,0,0,.18) 100%

    );

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero-content{

    max-width:650px;

    color:var(--white);

}

.hero-line{

    width:60px;

    height:4px;

    display:block;

    margin-bottom:35px;

    border-radius:999px;

    background:var(--primary);

}

.hero h1{

    margin-bottom:20px;

    font-size:var(--fs-5xl);

    font-weight:var(--fw-extrabold);

    line-height:1;

    text-transform:uppercase;

}

.hero h1 span{

    display:block;

    color:var(--primary);

}

.hero h2{

    margin-bottom:30px;

    color:var(--primary);

    font-size:var(--fs-xl);

    font-weight:var(--fw-semibold);

    text-transform:uppercase;

}

.hero p{

    max-width:560px;

    margin-bottom:45px;

    color:rgba(255,255,255,.92);

    font-size:var(--fs-lg);

    line-height:1.9;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:55px;

}

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:40px;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--white);

    font-size:var(--fs-sm);

    font-weight:var(--fw-semibold);

}

.hero-features i{

    color:var(--primary);

    font-size:18px;

}

@media(max-width:992px){

    .hero{

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-line{

        margin:0 auto 30px;

    }

    .hero h1{

        font-size:var(--fs-4xl);

    }

    .hero h2{

        font-size:var(--fs-lg);

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

}

@media(max-width:576px){

    .hero h1{

        font-size:42px;

    }

}