/* ==========================================================================
   RESPONSIVE LAYOUT ADJUSTMENTS (MEDIA QUERIES)
   ========================================================================== */

@media (max-width: 992px) {
    .grid-3-col { grid-template-columns: repeat(2, 1fr); }
    .grid-4-col { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    
    .infra-row, .infra-row.reverse {
        flex-direction: column;
        gap: 24px;
    }
    
    .hero-content h1 { font-size: 2.75rem; }
}

@media (max-width: 768px) {
    .section { padding: 56px 0; }
    
    .grid-2-col, .grid-3-col, .grid-4-col {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .gallery-grid { grid-template-columns: 1fr; }

    /* Mobile Responsive Navigation Toggle */
    .mobile-nav-toggle {
        display: block;
        z-index: 1001;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: var(--white);
        box-shadow: -4px 0 15px rgba(0,0,0,0.1);
        padding: 100px 32px 32px 32px;
        transition: var(--transition-smooth);
        z-index: 1000;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu ul {
        flex-direction: column;
        gap: 24px;
    }
    
    .nav-menu a {
        font-size: 1.1rem;
        display: block;
    }

    /* Transform Hamburger Icon into 'X' when Active */
    .mobile-nav-toggle[aria-expanded="true"] .hamburger {
        background-color: transparent;
    }
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::before {
        transform: rotate(45deg) translate(4px, 5px);
    }
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::after {
        transform: rotate(-45deg) translate(4px, -5px);
    }

    .hero-section { height: auto; padding: 100px 0; }
    .hero-content h1 { font-size: 2.25rem; }
    .hero-content p { font-size: 1.1rem; }
    .hero-actions { flex-direction: column; gap: 12px; }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
    .container { padding: 0 16px; }
    .hero-content h1 { font-size: 2rem; }
    .section-title { font-size: 1.65rem; }
    .back-to-top-btn { bottom: 16px; right: 16px; }
}