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

.contact-form-section{

    padding:100px 0 120px;

}

.contact-heading{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.contact-hero{

    padding:170px 0 90px;

}
.contact-form-card{

    max-width:1050px;

    margin:0 auto;

    background:#322E2E;

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:60px;

}

.form-header{

    text-align:center;

    margin-bottom:50px;

}

.form-header h2{

    font-size:48px;

    color:#fff;

    margin-bottom:18px;

}

.form-header p{

    max-width:620px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    color:var(--text);

}

/* FORM */

.contact-form{

    display:flex;

    flex-direction:column;

    gap:28px;

}

/* TWO COLUMNS */

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    color:#fff;

    font-size:15px;

    font-weight:600;

    margin-bottom:12px;

}

/* INPUT */

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    padding:18px 20px;

    background:#272424;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    color:#fff;

    font-size:16px;

    font-family:'Outfit',sans-serif;

    transition:.3s;

    outline:none;

}

/* PLACEHOLDER */

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#9d9d9d;

}

/* FOCUS */

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:#0D85EB;

    box-shadow:0 0 0 4px rgba(13,133,235,.15);

}

/* TEXTAREA */

.form-group textarea{

    resize:vertical;

    min-height:220px;

}

/* BUTTON */

.contact-form .contact-btn{

    width:240px;

    margin:20px auto 0;

}