@media (max-width: 768px) {
    body {
        font-size: 16px; 
    }

    header {
        flex-direction: column; 
        align-items: flex-start; 
    }

    nav {
        flex-direction: column; 
        align-items: flex-start; 
    }

    nav a {
        margin: 10px 0; 
        font-size: 1.2rem; 
    }

    .portofolio-container {
        grid-template-columns: repeat(2, 1fr); 
    }

    .portofolio-item {
        width: 100%; 
        height: auto; 
    }

    .hero {
        padding: 70px 30px; 
    }

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

    .cta-button, #comment-form button, footer .social-button {
        padding: 15px 30px; 
        font-size: 1.1rem;
    }

    .comment-section {
        padding: 20px; 
    }

    .about-content {
        flex-direction: column; 
        align-items: center; 
    }

    .profile-photo {
        width: 80%; 
        height: auto; 
    }

    #popup-container::after {
        font-size: 1rem; 
    }
}