/* Responsive Design */

        @media (max-width: 768px) {

            .hamburger {

                display: block;

            }

            

            .hamburger.active .bar:nth-child(2) {

                opacity: 0;

            }

            

            .hamburger.active .bar:nth-child(1) {

                transform: translateY(8px) rotate(45deg);

            }

            

            .hamburger.active .bar:nth-child(3) {

                transform: translateY(-8px) rotate(-45deg);

            }

            

            .nav-menu {

                position: fixed;

                left: -100%;

                top: 70px;

                gap: 0;

                flex-direction: column;

                background-color: var(--primary-color);

                width: 100%;

                text-align: center;

                transition: 0.3s;

                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

                padding: 1rem 0;

            }

            

            .nav-item {

                margin: 1rem 0;

            }

            

            .nav-menu.active {

                left: 0;

            }

            

            .hero h1 {

                font-size: 2.2rem;

            }

            

            .hero p {

                font-size: 1rem;

            }

            

            .section-title {

                font-size: 2rem;

            }

        }