/* =========================================================
   Reset
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

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

    background:#fff;

    color:var(--color-primary);

}

/* =========================================================
   Layout
========================================================= */

.contact-section{

    width:100%;

    padding:0px;

}

.contact-container{

    width:100%;

    margin:auto;

}

/* =========================================================
   Form Grid
========================================================= */

.grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap: 0px 24px;

}

/* =========================================================
   Form Group
========================================================= */

.form-group{

    display:flex;

    flex-direction:column;

}

label{

    font-size:15px;

    font-weight:500;

    margin-bottom:8px;

}

label span{

    color:var(--color-error);

}

/* =========================================================
   Inputs
========================================================= */

input,
select,
textarea{

    width:100%;

    border:var(--border-desktop);

    border-radius:var(--radius);

    background:#fff;

    color:var(--color-primary);

    font-size:15px;

    font-family:inherit;

    transition:var(--transition);

}

input,
select{

    height:var(--input-height);

    padding:0 18px;

}

textarea{

    min-height:120px;

    resize:vertical;

    padding:18px;

    line-height:1.6;

}

input::placeholder,
textarea::placeholder{

    color:var(--color-placeholder);

}

/* =========================================================
   Focus
========================================================= */

input:focus,
textarea:focus,
select:focus{

    outline:none;

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

    box-shadow:var(--shadow-focus);

}

/* =========================================================
   Error
========================================================= */

.error{

    margin-top:6px;

    color:var(--color-error);

    font-size:13px;

    min-height:18px;

}

.input-error{

    border-color:var(--color-error)!important;

}

/* =========================================================
   Character Counter
========================================================= */

.textarea-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:8px;

}

#charCount{

    font-size:13px;

    color:#777;

}

/* =========================================================
   CAPTCHA
========================================================= */

.captcha-wrapper{

    margin-top:0px;

    margin-bottom:0px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    overflow-x:auto;

    transform: scale(0.8);

    transform-origin: left top;

}

.g-recaptcha{

    max-width:100%;

}

#captcha-error{

    display:block;

    margin-top:8px;

    color:var(--color-error);

    font-size:13px;

}

/* =========================================================
   Button
========================================================= */

button{

    padding: 24px;

    height:54px;

    border:none;

    border-radius:var(--radius);

    background:var(--color-secondary);

    color:var(--color-primary);

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

}

button:hover{

    background:var(--color-primary);

    color:var(--color-secondary);

}

button:disabled{

    opacity:.65;

    cursor:not-allowed;

}

/* =========================================================
   Spinner
========================================================= */

.spinner{

    width:18px;

    height:18px;

    border-radius:50%;

    border:3px solid rgba(0,0,0,.2);

    border-top-color:#000;

    animation:spin .8s linear infinite;

}

.hidden{

    display:none;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* =========================================================
   Success Card
========================================================= */

.success-card{

    margin-top:30px;

    border:3px solid var(--color-success);

    border-radius:var(--radius);

    padding:24px;

    text-align:center;

}

.success-card h3{

    margin-bottom:10px;

    color:var(--color-success);

}

.success-card p{

    line-height:1.7;

}