@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Lato&display=swap');

:root {
    --primary-color: #007BFF;
    --secondary-color: #4CAF50;
    --accent-color: #FFC107;
    --neutral-light: #F8F9FA;
    --neutral-dark: #343A40;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Lato', sans-serif;
}

body {
    font-family: var(--font-body);
    background-color: var(--neutral-light);
    color: var(--neutral-dark);
    margin: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23dedede' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

header, main, footer {
    padding: 2rem;
}

h2 {
    font-family: var(--font-heading);
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

#how-it-works .steps {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

#how-it-works .step {
    flex-basis: 30%;
}

#featured-tutors .tutor-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

footer {
    text-align: center;
    margin-top: 2rem;
    border-top: 1px solid #ccc;
}