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

.hero{

    max-width:1550px;
    height:380px;
    margin:20px auto;
    position:relative;

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

    border-radius:20px;
    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}

.hero-overlay{

    position:absolute;

    top:0;
    left:0;
    right:0;
    bottom:0;

    background:rgba(0,0,0,.30);

    display:flex;
    justify-content:center;
    align-items:center;

}

.hero-content{

    text-align:center;

    color:#fff;

    z-index:5;

    padding:30px;

}

.hero-live{

    display:inline-block;

    background:#d60000;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    margin-bottom:20px;

    font-weight:bold;

}

.hero h1{

    font-size:60px;

    margin:15px 0;

    text-shadow:0 3px 10px rgba(0,0,0,.45);

}

.hero-text{

    font-size:24px;

    margin-bottom:30px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    padding:14px 28px;

    border-radius:40px;

    font-weight:bold;

}