@media (max-width: 992px) {
            .hero-content h1 {
                font-size: 2.8rem;
            }
        }
        
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }
            
            nav {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 80%;
                height: calc(100vh - 70px);
                background-color: white;
                box-shadow: var(--shadow);
                transition: var(--transition);
                padding: 20px;
            }
            
            nav.active {
                left: 0;
            }
            
            nav ul {
                flex-direction: column;
            }
            
            nav ul li {
                margin: 10px 0;
            }
            
            .hero-content h1 {
                font-size: 2.3rem;
            }
            
            .hero-content p {
                font-size: 1rem;
            }
        }
        
        @media (max-width: 576px) {
            .hero {
                padding: 70px 0;
            }
            
            .hero-content h1 {
                font-size: 2rem;
            }
            
            .section-title h2 {
                font-size: 1.8rem;
            }
            
            .category-grid, .product-grid, .features-grid {
                grid-template-columns: 1fr;
            }
        }