/* Hero Section */

.hero {

    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);

    color: var(--white);

    padding: 150px 0 100px;

    text-align: center;

}



.hero h1 {

    font-size: 2.8rem;

    margin-bottom: 20px;

    color: var(--white);

}



.hero p {

    font-size: 1.2rem;

    max-width: 800px;

    margin: 0 auto 30px;

}



.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}