.hero{
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

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

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 20%;
}

.hero-content{
    max-width: 800px;
    margin: 0 auto;
}

.hero h1{
    color:#fff;
    font-size:56px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:20px;
    text-shadow:0 3px 8px rgba(0,0,0,.7);
}

.hero p{
    color:#fff;
    font-size:22px;
    line-height:1.6;
    text-shadow:0 2px 6px rgba(0,0,0,.7);
    margin-bottom:30px;
}