/* inner */
section.contact .inner {
    display: block;
    padding: 32px 16px 64px 16px;
}

@media (min-width: 768px) {
    section.contact .inner {
        padding: 64px 16px;
        display: flex;
        gap: 24px;
    }
}

/* title */
section.contact .inner .title-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

section.contact .inner .title-wrap .title {
    color: var(--Black);
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.22px;
}

@media (min-width: 768px) {
    section.contact .inner .title-wrap .title {
        font-size: 28px;
        line-height: 38px;
        letter-spacing: -0.56px;
    }
}

section.contact .inner .title-wrap .description {
    color: var(--Gray-2);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

@media (min-width: 768px) {
    section.contact .inner .title-wrap .description {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: -0.2px;
    }
}

@media (min-width: 768px) {
    section.contact .inner .title-wrap {
        gap: 12px;
    }

    section.contact .inner .title-wrap,
    section.contact .inner .form-wrap {
        flex: 1;
        position: relative;
    }
}

/* form */
section.contact .inner .form-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

section.contact .inner .form-wrap .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

section.contact .inner .form-wrap .form-group .form-label {
    color: var(--Black);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

section.contact .inner .form-wrap .form-group .form-input {
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Gray-3);
    background: var(--Gray-6);
    color: var(--Black);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

section.contact .inner .form-wrap .form-group .form-input:focus,
section.contact .inner .form-wrap .form-group .form-textarea:focus {
    border: 1px solid var(--Black);
}

section.contact .inner .form-wrap .form-group .form-input::placeholder {
    color: var(--Gray-2);
}

section.contact .inner .form-wrap .form-group.filled .form-input,
section.contact .inner .form-wrap .form-group.filled .form-textarea {
    color: var(--Black);
    font-size: 16px;
    border: 1px solid var(--Black);
    background: var(--Gray-6);
}

section.contact .inner .form-wrap .form-group.error .form-input,
section.contact .inner .form-wrap .form-group.error .form-textarea {
    border: 1px solid var(--Red);
    background: var(--Gray-6);
}

section.contact .inner .form-wrap .form-group .form-error {
    display: none;
}

section.contact .inner .form-wrap .form-group.error .form-error {
    display: block;
    color: var(--Red);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

section.contact .inner .form-wrap .form-group .form-textarea {
    display: flex;
    height: 120px;
    padding: 12px 16px;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Gray-3);
    background: var(--Gray-6);
    color: var(--Gray-2);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

section.contact .inner .form-wrap .form-group#message {
    margin-bottom: 24px;
}

section.contact .inner .btn-wrap {
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 8px;
    background: var(--Black);
    color: var(--White);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

section.contact .inner .btn-wrap button {
    width: 100%;
    cursor: pointer;
}