/* ==========================================================================
   AA DESIGN - RESPONSIVE STYLESHEET
   ========================================================================== */

/* Laptops & Small Desktops (1024px - 1439px) */
@media screen and (max-width: 1439px) {
    .services-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .services-col {
        border-bottom: 1px solid var(--color-border);
    }

    .services-col:nth-child(3n) {
        border-right: none;
    }

    .stats-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-col.cta-col {
        grid-column: span 3;
        align-items: center;
        text-align: center;
        padding-right: 2rem;
        border-top: 1px solid var(--color-border);
    }
}

/* Tablets (768px - 1023px) */
@media screen and (max-width: 1023px) {
    .header, .header.scrolled {
        padding: 1.5rem 2rem;
    }

    .nav-links, .main-nav .btn {
        display: none;
    }

    .hero-content-wrapper {
        padding: 0 2rem;
    }

    .hero-right {
        display: none;
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-text-col {
        padding: 0;
    }

    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-body {
        grid-template-columns: 1fr;
    }
}

/* Mobile Devices (320px - 767px) */
@media screen and (max-width: 767px) {
    .section {
        padding: 5rem 1.5rem;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .hero-bottom-controls {
        left: 2rem;
        bottom: 2rem;
    }

    .bottom-branding {
        display: none;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .services-container {
        grid-template-columns: 1fr;
    }

    .services-col {
        border-right: none;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }

    .stats-col {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .footer-container {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .modal-content {
        padding: 1.5rem;
        width: 95%;
    }
}