/* ===================================
   7. HERO
=================================== */

.hero{

    width:90%;
    max-width:1200px;

    margin:50px auto;

    text-align:center;

}

.hero img{

    width:100%;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.hero h1{

    font-size:42px;

    color:var(--primary);

    margin:30px 0 20px;

}

.hero p{

    max-width:850px;

    margin:0 auto 35px;

    font-size:20px;

    color:var(--text-light);

    line-height:2.2;

}

/* ===================================
   8. BUTTONS
=================================== */

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.hero-link,
.register-btn,
.call-btn{

    display:inline-block;

    padding:15px 35px;

    background:var(--secondary);

    color:#111;

    border-radius:12px;

    font-size:19px;

    font-weight:bold;

    transition:var(--transition);

}

.hero-link:hover,
.register-btn:hover,
.call-btn:hover{

    background:#ff9800;

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(0,0,0,.18);

}