/* css/responsive.css */
/* Contains ALL @media queries DIRECTLY and COMPLETELY from your provided HTML's <style> block */

@media (max-width: 1024px) {
    .desktop-nav {
        display: none;
    }
    .mobile-menu-toggle {
        display: flex; /* Ensure it's flex */
    }
    .hero-buttons {
        /* flex-direction: column; (This might already be handled by flex-wrap: wrap in main styles for smaller containers) */
        /* If explicit stacking is needed only at this breakpoint, add it here. */
    }
    .trust-stats {
        gap: 1.5rem; /* Adjust gap for tablets */
        grid-template-columns: repeat(2, 1fr); /* Stack to 2x2 for trust stats */
    }
    .features-grid,
    .competencies-grid,
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Allow 2 columns if space */
    }
    .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    /* Target the div containing the two name input groups */
    .contact-form div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important; /* Stack name fields */
    }
}

@media (max-width: 768px) { /* Common tablet portrait / large phone landscape */
    .container {
        padding: 0 1rem;
    }
    .section {
        padding: 4rem 0;
    }
     .hero-title {
        font-size: clamp(2.2rem, 7vw, 3.2rem); /* Adjusted for better readability */
    }
    .hero-subtitle {
        font-size: clamp(1.1rem, 5vw, 1.6rem);
    }
    .hero-description {
        font-size: clamp(0.95rem, 4vw, 1.15rem);
    }
    .hero-buttons {
        flex-direction: column; /* Explicitly stack buttons */
        gap: 1rem;
    }
     .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    /* .trust-stats already 2x2 from 1024px, should be fine */

    /* Single column for these on smaller tablets/large phones */
    .features-grid, /* If it's not already single column from auto-fit */
    .competencies-grid,
    .projects-grid {
        grid-template-columns: 1fr;
    }
    .feature-card,
    .competency-card,
    .project-card,
    .team-card {
        padding: 2rem 1.5rem;
    }
    .footer-content {
        text-align: center; /* Center align footer content */
    }
    .footer-section {
        margin-bottom: 2rem;
    }
}


@media (max-width: 640px) { /* Your template's specific breakpoint, mostly for fine-tuning */
    /* .container padding might already be 1rem */
    /* .section padding might already be 4rem */
    /* .hero-buttons are already stacked and sized */
    /* .trust-stats are already 2x2 */
    /* .feature-card, etc. padding might be fine, or adjust slightly */
    .feature-card, .competency-card, .project-card, .team-card {
        padding: 1.5rem; /* Further reduce padding */
    }
     .section-title {
        font-size: clamp(2rem, 6vw, 2.8rem);
    }
    .section-subtitle {
        font-size: clamp(0.9rem, 3.5vw, 1.1rem);
    }
    .project-content, .competency-content { /* Assuming a .competency-content wrapper */
        padding: 1.5rem;
    }
    .project-image {
        height: 180px; /* Reduce image height */
    }
}

/* For very small devices, e.g., portrait phones */
@media (max-width: 480px) {
    html {
        font-size: 15px; /* Slightly smaller base font */
    }
    .hero-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem); /* More aggressive clamp */
    }
    .hero-subtitle {
        font-size: clamp(1rem, 6vw, 1.4rem);
    }
    .btn-xl { /* Make XL buttons smaller */
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
    .section-title {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
    }
    .section-subtitle {
        font-size: clamp(0.85rem, 4vw, 1.05rem);
    }
    .footer-bottom p {
        font-size: 0.8rem;
    }
    .loading-container h2 { font-size: 1.3rem; } /* From your inline style */
    .loading-container p { font-size: 1rem; } /* From your inline style */
    .trust-stats {
        gap: 0.5rem; /* Tighter gap for stats */
        grid-template-columns: repeat(2,1fr); /* Ensure two columns if not already */
    }
    .stat-number { font-size: 1.3rem; }
    .stat-label { font-size: 0.75rem; }
}