/* ==========================================================================
   ACTIVE FURNITURE & INTERIOR - RESPONSIVE STYLESHEET
   Responsive Breakpoints: 1400px, 1199px, 991px (Tablets), 767px (Mobile), 575px
   ========================================================================== */

/* Large Desktop & High-DPI screens (max-width: 1400px) */
@media (max-width: 1400px) {
    .category-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .collections-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Laptops & Standard Desktop (max-width: 1199px) */
@media (max-width: 1199px) {
    .hero-title-main {
        font-size: 32px;
    }

    .hero-stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .stat-number {
        font-size: 20px;
    }

    .benefits-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .about-grid,
    .office-grid,
    .contact-grid {
        gap: 30px;
    }

    .why-us-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .footer-strip-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Tablets & Small Laptops (max-width: 991px) */
@media (max-width: 991px) {

    /* Mobile Menu Toggle button */
    .mobile-menu-btn {
        display: block;
    }

    .top-bar-left {
        gap: 10px;
    }

    .top-bar-item span strong {
        display: none;
    }

    .search-box {
        max-width: 300px;
    }

    .category-navbar {
        display: none;
        /* Mobile Drawer JS handles menu when toggled */
    }

    .category-navbar.active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-link {
        padding: 12px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Hero Section Mobile Adaptations */
    .hero-wrapper {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .hero-content {
        align-items: center;
    }

    .hero-title-main {
        font-size: 30px;
    }

    .hero-desc {
        max-width: 100%;
    }

    .hero-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .floating-card-1 {
        top: -10px;
        left: 0;
    }

    .floating-card-2 {
        bottom: -10px;
        right: 0;
    }

    /* Grids to Single/Double Columns */
    .about-grid {
        grid-template-columns: 1fr;
    }

    .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .latest-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .office-grid {
        grid-template-columns: 1fr;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .modal-grid {
        grid-template-columns: 1fr;
    }

    .modal-img-box {
        padding: 20px;
    }

    .modal-img-box img {
        max-height: 180px;
    }
}

/* Small Tablets & Large Phones (max-width: 767px) */
@media (max-width: 767px) {
    .top-bar-right {
        display: none;
    }

    .top-bar-container {
        justify-content: center;
    }

    .header-container {
        flex-wrap: wrap;
        gap: 12px;
    }

    .logo-wrapper {
        order: 1;
    }

    .brand-title {
        font-size: 15px;
        white-space: nowrap;
    }

    .header-actions {
        order: 2;
    }

    .search-box {
        order: 3;
        width: 100%;
        max-width: 100%;
    }

    .action-text {
        display: none;
    }

    .benefits-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .collections-grid {
        grid-template-columns: 1fr;
    }

    .latest-grid {
        grid-template-columns: 1fr;
    }

    .process-timeline {
        grid-template-columns: 1fr;
    }

    .interior-overlay-content {
        padding: 30px 20px;
    }

    .interior-services-grid {
        grid-template-columns: 1fr;
    }

    .form-group-row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-strip-container {
        grid-template-columns: 1fr;
    }

    .footer-bottom-container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* Extra Small Mobile Devices (max-width: 575px) */
@media (max-width: 575px) {
    .brand-title {
        font-size: 13.5px;
        white-space: nowrap;
    }

    .brand-logo-img {
        height: 38px;
    }

    .brand-tagline {
        font-size: 6px;
    }
    .hero-title-main {
        font-size: 24px;
    }

    .hero-subheading {
        font-size: 14px;
    }

    .hero-cta-group {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta-group .btn {
        width: 100%;
    }

    .benefits-container {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .map-info-card {
        position: relative;
        top: 0;
        left: 0;
        max-width: 100%;
        border-radius: 12px 12px 0 0;
    }

    .map-iframe-container {
        height: 300px;
    }
}