@media (max-width: 768px) {
            .menu-toggle {
                display: flex;
            }
            .menu-toggle span{
                background-color: #1e3c72;
            }

            .nav-links {
                position: fixed;
                left: -100%;
                top: 70px;
                flex-direction: column;
                background: #eaeaea;
                width: 100%;
                text-align: center;
                transition: 0.3s;
                padding: 2rem 0;
            }

            .nav-links.active {
                left: 0;
            }

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

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

            .about-content,
            .contact-content {
                grid-template-columns: 1fr;
            }

            h2 {
                font-size: 2rem;
            }
            .info-item p {
                margin: 3px 0 0;
                font-size: 12px;
            }
        }