.hero {
    background: linear-gradient(to right, #f5f5f5, #e9ecef);
    padding: 80px 20px;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;
    font-weight: bold;
}

.hero p {
    font-size: 1.2rem;
    color: #555;
}

@media (min-width: 768px) {
    .hero h1 {
        font-size: 3rem;
    }

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

.section-title {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: bold;
}

footer {
    background: #f8f9fa;
    padding: 20px 0;
    text-align: center;
    color: #666;
}