/* =====================================================
   Responsive Breakpoints — Deepak Packers & Movers
   ===================================================== */

/* --- Tablet Landscape (1024px) --- */
@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .hover-expand-grid { flex-direction: column; height: auto; }
    .he-card { padding: 25px; align-items: flex-start; justify-content: flex-start; }
    .he-title-vertical { display: none; }
    .he-icon { position: static; transform: none !important; margin-bottom: 15px; width: 50px; height: 50px; }
    .he-card:hover .he-icon { left: auto; transform: none; }
    .he-content { opacity: 1; transform: none; position: static; min-width: auto; padding-top: 0; }
    .he-content h5 { font-size: 1.3rem; white-space: normal; }
    .about-split { gap: 40px; }
    .contact-cards { grid-template-columns: repeat(2, 1fr); }
    .hero-visual { width: 50%; opacity: 0.6; }
    .advantage-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablet Portrait (768px) --- */
@media (max-width: 768px) {
    :root { --navbar-height: 90px; }
    
    /* Override hardcoded desktop values */
    .navbar { height: var(--navbar-height); }
    
    .navbar-logo img { 
        height: 70px; 
        width: auto;
        max-width: 200px;
    }
    .navbar-solid .navbar-logo img { 
        height: 60px; 
        width: auto;
    }

    .section { padding: 70px 0; }
    .container { padding: 0 20px; }

    /* Navbar mobile */
    .navbar { padding: 0 20px; }
    .navbar-toggle { display: flex; }

    .navbar-menu-wrap {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 360px;
        height: 100vh;
        background: var(--bg-white);
        box-shadow: -8px 0 32px rgba(0,0,0,0.15);
        padding: 80px 30px 30px;
        transition: right var(--transition);
        overflow-y: auto;
        z-index: 1000;
    }

    .navbar-menu-wrap.open { right: 0; }

    .navbar-menu {
        flex-direction: column;
        gap: 0;
    }

    .navbar-menu > li > a {
        color: var(--text-dark) !important;
        padding: 14px 0;
        font-size: 1rem;
        border-bottom: 1px solid var(--border-light);
    }

    .navbar-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0 0 0 16px;
        display: none;
    }

    .navbar-dropdown.open { display: block; }

    .navbar-dropdown a {
        padding: 10px 0;
        border-bottom: 1px solid var(--border-light);
    }

    .nav-quote-btn {
        margin-top: 20px;
        text-align: center;
        display: block !important;
        width: 100%;
    }

    .mobile-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition);
    }

    .mobile-overlay.active { opacity: 1; visibility: visible; }

    /* Hero */
    .hero { min-height: auto; padding: 120px 0 80px; }
    .hero-content { max-width: 100%; }
    .hero-visual { display: none; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; justify-content: center; }

    /* Stats */
    .stats-section { margin-top: -20px; }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 30px 24px;
        gap: 24px;
    }
    .stat-item:not(:last-child)::after { display: none; }

    /* Services */
    .services-grid { grid-template-columns: 1fr; }
    .service-card.featured { grid-column: span 1; }

    /* Process */
    .process-timeline {
        flex-direction: column;
        gap: 24px;
    }
    .process-timeline::before {
        top: 0;
        bottom: 0;
        left: 28px;
        width: 3px;
        height: auto;
        right: auto;
    }
    .process-step {
        text-align: left;
        display: flex;
        gap: 20px;
        align-items: flex-start;
        padding: 0;
    }
    .process-number {
        margin: 0;
        flex-shrink: 0;
    }

    /* About */
    .about-split { grid-template-columns: 1fr; gap: 32px; }
    .about-image { order: -1; }

    /* Advantage */
    .advantage-grid { grid-template-columns: 1fr; gap: 20px; }

    /* Testimonials */
    .testimonial-card { flex: 0 0 320px; }

    /* Contact */
    .contact-cards { grid-template-columns: 1fr; }
    .contact-split { grid-template-columns: 1fr; gap: 32px; }
    .form-row-2 { grid-template-columns: 1fr; gap: 16px; }
    .contact-map { height: 300px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer h5::after { left: 0; }

    /* Inner hero */
    .inner-hero { padding: 140px 0 70px; }

    /* Section header */
    .section-header { margin-bottom: 40px; }
}

/* --- Small phones (480px) --- */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; padding: 24px 20px; }
    .stat-number { font-size: 1.8rem; }
    .service-card { padding: 28px 22px; }
    /* Hover expand handled in 1024px rule */
    .testimonial-card { flex: 0 0 290px; padding: 28px 22px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .error-page h1 { font-size: 5rem; }
    .cta-section { padding: 70px 0; }
}

/* --- Very small (320px) --- */
@media (max-width: 360px) {
    body { font-size: 15px; }
    .container { padding: 0 16px; }
    .btn { padding: 12px 24px; font-size: 0.88rem; }
    .hero h1 { font-size: 1.8rem; }
    .gallery-grid { grid-template-columns: 1fr; }
}

/* --- Large Desktop (1440px+) --- */
@media (min-width: 1440px) {
    .container { max-width: 1360px; }
}

/* --- Ultra Wide (1920px+) --- */
@media (min-width: 1920px) {
    .container { max-width: 1440px; }
    .hero-content { max-width: 720px; }
}