/* ==============================================
   CONTACT FORM — improx-group/assets/css/contact/form.css
   Fully Responsive Version
   ============================================== */


/* ==============================
   CONTACT SECTION
================================ */

.contact-main {
    padding: var(--section-padding);
    background: var(--color-white);
}


.contact-layout {
    width:100%;
    display:grid;
    grid-template-columns: minmax(0, 900px);
    justify-content:center;
}


/* ==============================
   FORM WRAPPER
================================ */

.contact-form-wrap {

    background:#ffffff;

    padding:clamp(1.5rem,4vw,3rem);

    border-radius:var(--radius-xl);

    border:1px solid rgba(15,23,42,0.08);

    box-shadow:
    0 20px 45px rgba(15,23,42,0.08);

}


/* Heading */

.contact-form-wrap h2 {

    font-size:clamp(1.5rem,3vw,2.35rem);

    line-height:1.2;

    color:var(--color-navy);

    margin-bottom:1rem;

}


.contact-form-wrap > p {

    color:var(--color-muted);

    font-size:1rem;

    line-height:1.7;

    margin-bottom:2rem;

}



/* ==============================
   FORM STRUCTURE
================================ */


.contact-form {

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}



.form-row {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1.25rem;

}



.form-group {

    width:100%;

}



/* ==============================
   LABELS
================================ */


.contact-form .form-group label {

    display:block;

    font-size:.9rem;

    font-weight:600;

    color:var(--color-navy);

    margin-bottom:.5rem;

}



/* ==============================
   INPUTS
================================ */


.contact-form .form-input,
.contact-form .form-select,
.contact-form .form-textarea {


    width:100%;

    padding:0.95rem 1rem;

    border:1px solid #D1D5DB;

    border-radius:12px;

    background:#fff;

    font-size:1rem;

    color:var(--color-navy);

    transition:.3s ease;

    outline:none;

}



.contact-form .form-input:focus,
.contact-form .form-select:focus,
.contact-form .form-textarea:focus {


    border-color:var(--color-primary);

    box-shadow:
    0 0 0 4px rgba(37,99,235,.12);

}



.form-textarea {

    resize:vertical;

    min-height:150px;

}



/* ==============================
   CHECKBOX SERVICES
================================ */


.services-checkboxes {


    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:.8rem;

}



.checkbox-item {


    display:flex;

    align-items:center;

    gap:.6rem;

    padding:.75rem;

    border-radius:10px;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    font-size:.9rem;

    color:var(--color-navy-mid);

    cursor:pointer;

    transition:.25s ease;

}



.checkbox-item:hover {

    border-color:var(--color-primary);

}



.checkbox-item input {

    width:16px;

    height:16px;

    accent-color:var(--color-primary);

}




/* ==============================
   PRIVACY
================================ */


.form-consent {


    display:flex;

    align-items:flex-start;

    gap:.75rem;

    font-size:.875rem;

    color:var(--color-muted);

    line-height:1.6;

}



.form-consent input {

    width:16px;

    height:16px;

    margin-top:4px;

    flex-shrink:0;

    accent-color:var(--color-primary);

}



.form-consent a {

    color:var(--color-primary);

    text-decoration:underline;

}




/* ==============================
   SUCCESS MESSAGE
================================ */


.form-success-msg {


    display:none;

    background:#DCFCE7;

    border:1px solid #BBF7D0;

    border-radius:14px;

    padding:1.25rem;

    color:#15803D;

    margin-bottom:1.5rem;

    font-weight:600;

}



/* ==============================
   BUTTON
================================ */


.btn-full {


    width:100%;

    justify-content:center;

    padding:1.1rem;

    font-size:1rem;

}



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


@media(max-width:900px){


    .contact-layout {

        grid-template-columns:1fr;

    }


    .form-row {

        grid-template-columns:1fr;

    }


    .services-checkboxes {

        grid-template-columns:1fr;

    }


}




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


@media(max-width:600px){


    .contact-main {

        padding:60px 0;

    }



    .contact-form-wrap {

        padding:1.25rem;

        border-radius:16px;

    }



    .contact-form {

        gap:1.25rem;

    }



    .contact-form-wrap h2 {

        font-size:1.5rem;

    }



    .contact-form-wrap > p {

        font-size:.95rem;

    }



    .contact-form .form-input,
    .contact-form .form-select,
    .contact-form .form-textarea {

        padding:.85rem;

        font-size:.95rem;

    }



    .form-consent {

        font-size:.8rem;

    }


}



/* =================================================
   SMALL MOBILE
================================================= */


@media(max-width:400px){


    .contact-form-wrap {

        padding:1rem;

    }


    .checkbox-item {

        padding:.65rem;

        font-size:.85rem;

    }


}