.hero{

    height:100vh;

    background:
    linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.35)
    ),
    url("../img/hero.jpg");

    background-size:cover;

    background-position:center;

}

.hero-overlay{

    width:100%;
    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-content{

    text-align:center;

    color:white;

    max-width:700px;

    padding:20px;

}

.hero-content h1{

    font-size:5rem;

}

.hero-content p{

    font-size:1.8rem;

    margin:15px 0;

}

.hero-content span{

    display:block;

    margin-bottom:40px;

}

@media (max-width: 768px){

    .hero-content{
        padding: 0 20px;
    }

    .hero h1{
         font-size:clamp(2.1rem, 11vw, 5rem);
        line-height: 1;
    }

    .hero h2{
        font-size:clamp(2.1rem, 11vw, 5rem);
    }

    .hero p{
        font-size: 1rem;
    }

    .hero span{
        font-size: 1rem;
        display:block;
        margin:20px 0;
    }
}