/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .header {
        padding: 20px;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        height: auto;
        min-height: 120px;
    }

    .nav {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
    }

    .home-page h1 {
        font-size: 3rem;
    }

    .nav-menu a {
        font-size: 2rem;
    }

    .projects-page,
    .experience-page,
    .about-page,
    .resume-page {
        padding-top: 180px; /* More padding for mobile due to taller header */
    }

    .projects-page h1,
    .experience-page h1,
    .about-page h1,
    .resume-page h1 {
        font-size: 3rem;
    }

    .project-grid {
        grid-template-columns: 1fr;
    }
}