/* ============================================
   Responsive Styles
   ============================================ */

@media (max-width: 991px) {
    .nav-menu {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        flex-direction: column;
        padding: 20px;
        gap: 5px;
        z-index: 999;
        overflow-y: auto;
    }

    .nav-menu.active { display: flex; }
    .mobile-menu-btn { display: block; }

    .hero-content h1 { font-size: 28px; }
    .hero-content p { font-size: 15px; }
    .hero-buttons { flex-direction: column; align-items: center; }

    .vehicle-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    .vehicles-layout { grid-template-columns: 1fr; }
    .filter-card { position: static; }

    .detail-layout { grid-template-columns: 1fr; }
    .about-content { grid-template-columns: 1fr; }
    .contact-info-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .vehicle-grid { grid-template-columns: 1fr; }
    .vehicle-grid.cols-3 { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .contact-info-cards { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: 1fr 1fr; }
    .specs-grid { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr; }
    .contact-form .form-row { grid-template-columns: 1fr; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .page-banner h1 { font-size: 24px; }
    .section-header { flex-direction: column; gap: 15px; text-align: center; }

    .search-form .search-row { flex-direction: column; }

    .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 480px) {
    .container { padding: 0 15px; }
    .section { padding: 40px 0; }
    .hero { padding: 50px 0 40px; }
    .hero-content h1 { font-size: 24px; }
    .detail-header h1 { font-size: 20px; }
    .price-value { font-size: 22px; }
}