/* ==========================================================================
   ROBUST MEDIA QUERIES FOR ALL DEVICES
   ========================================================================== */

/* --- 1. Small Smartphones & Mobile Devices (Up to 480px) --- */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2rem; /* Sharper heading sizing for small screens */
    }
    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .btn-secondary {
        margin-left: 0; /* Stack buttons cleanly on tiny devices */
    }
    .seasonal-card {
        padding: 40px 20px; /* Snug padding for compact mobile views */
    }
    .seasonal-perks {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        max-width: 200px;
        margin: 0 auto 30px auto;
    }
}

/* --- 2. Tablets & Portals (768px and below) --- */
@media (max-width: 768px) {
    .section-padding { 
        padding: 60px 0; 
    }
    .hero-content h1 { 
        font-size: 2.5rem; 
    }
    .form-row { 
        grid-template-columns: 1fr; 
        gap: 0; 
    }
    .footer-grid { 
        grid-template-columns: 1fr; 
        gap: 30px;
    }
    .testimonials-grid { 
        grid-template-columns: 1fr; 
    }
    .why-grid {
        grid-template-columns: 1fr;
    }
    .why-image-placeholder {
        height: 350px;
        order: -1; /* Keeps the photo above the text on mobile layouts */
    }
    
    /* Mobile Hamburger Menu System */
    .menu-toggle { 
        display: block; 
    }
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--light);
        flex-direction: column;
        padding: 30px;
        gap: 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        display: none;
    }
    .nav-links.active { 
        display: flex; 
    }
    .navbar.scrolled .nav-links a, .nav-links a { 
        color: var(--dark); 
    }
    .logo-text { 
        color: var(--primary); 
    }
}

/* --- 3. Medium Tablets & Landscape Views (769px to 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        width: 92%;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* Clean 2-column balance on tablets */
    }
    .why-grid {
        gap: 30px;
    }
    .why-features-list {
        grid-template-columns: 1fr; /* Stack checkmarks cleanly if text is tight */
    }
    .hero-content h1 {
        font-size: 3rem;
    }
}

/* --- 4. Standard Laptops & Desktops (1025px to 1440px) --- */
@media (min-width: 1025px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr); /* Keeps cards in a gorgeous 3-column matrix */
    }
}

/* --- 5. Ultra-Wide Monitors & Large Screens (1441px and up) --- */
@media (min-width: 1441px) {
    .container {
        max-width: 1400px; /* Expanding container structure slightly for pristine presentation */
    }
    body {
        font-size: 17px; /* Scales readability comfortably on large displays */
    }
}