/* Mobile-first responsive styles */

/* Base styles for small screens (<= 640px) */
@media (max-width: 640px) {
    .hero-title {
        font-size: 2.5rem !important;
    }

    #navbar .container {
        padding: 0 1rem;
    }

    section {
        padding: 3rem 1rem !important;
    }

    h2 {
        font-size: 2rem !important;
    }

    .product-card,
    .service-card {
        padding: 1.5rem;
    }

    #contact-form {
        padding: 1.5rem;
    }

    .floating-buttons {
        right: 1rem;
        bottom: 1rem;
    }
}

/* Medium screens (641px to 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
    .hero-title {
        font-size: 3rem !important;
    }
}

/* Ensure all grids are responsive */
@media (max-width: 768px) {
    #products-grid,
    #gallery-grid,
    #branches-grid {
        grid-template-columns: 1fr !important;
    }

    #accessories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile menu full width */
#mobile-menu {
    width: 100%;
}