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

.contact{

    padding:var(--space-section) 0;

    background:var(--color-white);

}

/*==================================================
    SECTION HEADER
==================================================*/

.contact .section-header{

    width:100%;

    max-width:760px;

    margin:0 auto 120px;

    text-align:center;

}

.contact .section-subtitle{

    display:block;

    margin-bottom:22px;

    font-family:var(--font-body);

    font-size:.80rem;

    font-weight:500;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:var(--color-gold);

}

.contact .section-title{

    font-family:var(--font-title);

    font-size:clamp(2.8rem,5vw,4.8rem);

    font-weight:400;

    line-height:1.15;

    color:var(--color-black);

}

.contact .section-description{

    max-width:620px;

    margin:28px auto 0;

    font-family:var(--font-body);

    font-size:1rem;

    line-height:1.9;

    color:var(--color-light);

}
/*==================================================
    CONTACT FORM
==================================================*/

.contact-form{

    max-width:760px;

    margin:0 auto;

}

/*==================================================
    FORM ROW
==================================================*/

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}

/*==================================================
    FORM GROUP
==================================================*/

.form-group{

    margin-bottom:42px;

}

.form-group label{

    display:block;

    margin-bottom:14px;

    font-family:var(--font-body);

    font-size:.82rem;

    font-weight:500;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--color-black);

}

.form-group input,
.form-group textarea{

    width:100%;

    padding:18px 0;

    border:none;

    border-bottom:1px solid rgba(0,0,0,.12);

    background:transparent;

    font-family:var(--font-body);

    font-size:1rem;

    line-height:1.8;

    color:var(--color-black);

    appearance:none;

    -webkit-appearance:none;

    transition:

        border-color var(--duration-normal) var(--ease-smooth),

        color var(--duration-normal) var(--ease-smooth);

}

.form-group textarea{

    resize:vertical;

    min-height:180px;

}

/*==================================================
    INPUT FOCUS
==================================================*/

.form-group input:focus,
.form-group textarea:focus{

    outline:none;

    border-bottom-color:var(--color-gold);

}

.form-group:focus-within label{

    color:var(--color-gold);

}


.form-group input::placeholder,

.form-group textarea::placeholder{

    color:var(--color-light);

}

/**************************************************
    SUBMIT BUTTON
**************************************************/

.contact-form .btn{

    margin-top:0px;

    min-width:260px;

    justify-content:center;

}

/*==================================================
    WHATSAPP
==================================================*/

.contact-whatsapp{

    margin-top:80px;

    text-align:center;

}

.contact-whatsapp p{

    margin-bottom:16px;

    color:var(--color-light);

}

.contact-whatsapp a{

    display:inline-block;

    margin-bottom:14px;

    font-family:var(--font-title);

    font-size:clamp(1.4rem,2vw,1.8rem);

    color:var(--color-black);

    transition:

        color var(--duration-normal) var(--ease-smooth);

}

.contact-whatsapp a:hover{

    color:var(--color-gold);

}

.contact-whatsapp span{

    display:block;

    font-size:.85rem;

    color:var(--color-light);

}

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

@media (max-width:992px){

    .contact{

        padding:140px 0;

    }

    .contact-form{

        max-width:680px;

    }

}

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

@media (max-width:768px){

    .contact{

        padding:90px 0;

    }

    .form-row{

        grid-template-columns:1fr;

        gap:0;

    }

    .form-group{

        margin-bottom:34px;

    }

    .contact-form .btn{

        width:100%;

        min-width:0;

    }

    .contact-whatsapp{

        margin-top:60px;

    }

}

/*==================================================
    CONTACT QUOTE
==================================================*/

.contact-quote{

    max-width:700px;

    margin:100px auto 0;

    text-align:center;

    font-family:var(--font-title);

    font-size:clamp(2rem,4vw,3rem);

    line-height:1.35;

    color:var(--color-black);

}