/* =========================================================
   RESPONSIVE
   ========================================================= */

/* =========================================================
   ≤ 1024px (Tablet)
   ========================================================= */

@media (max-width: 1024px) {
    /* HERO */
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-image {
        order: 2;
    }

    /* SERVICES */
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================
   ≤ 768px (Mobile / Tablet)
   ========================================================= */

@media (max-width: 768px) {
    /* HEADER */
    .nav {
        display: none;
    }

    .header-actions {
        display: none;
    }

    /* HERO */
    .hero-title {
        font-size: 34px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-image {
        display: none;
    }

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

    /* BUTTONS */
    .btn {
        width: 100%;
    }

    /* =====================================================
       CONSULTATION
       ===================================================== */

    .consultation {
        padding: 56px 0;
    }

    .consultation-header {
        margin-bottom: 32px;
        padding: 0 16px;
    }

    .consultation-title {
        font-size: 24px;
        line-height: 1.25;
    }

    .consultation-subtitle {
        font-size: 14px;
        line-height: 1.5;
    }

    .consultation-card {
        margin: 0 16px;
        padding: 24px;
        border-radius: 18px;
    }

    /* FORM */
    .form-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .form-group,
    .form-group.full {
        width: 100%;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
    }

    .form-submit {
        width: 100%;
        height: 48px;
        font-size: 15px;
        border-radius: 12px;
    }

    /* =====================================================
       FOOTER
       ===================================================== */

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: left;
    }

    .footer-desc {
        max-width: 100%;
    }

    .footer-bottom {
        margin-top: 32px;
        font-size: 12px;
    }
}

/* =========================================================
   ≤ 640px (Small Mobile)
   ========================================================= */

@media (max-width: 640px) {
    /* SERVICES */
    .services {
        padding: 100px 0;
    }

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

    .services-header {
        margin-bottom: 60px;
    }

    .services-title {
        font-size: 32px;
    }
}