#contact {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 100px);
    justify-content: center;
    /* padding: 0 2rem; */
    align-items: center;
}

.contact-contain {
    background-color: var(--c-1);
    display: flex;
    flex-direction: column;
    padding: 5rem 4.6rem 3rem;
    width: 640px;
}

#contact p, #contact h1 {
    color: var(--black);
}

#contact p {
    line-height: 1.65;
    letter-spacing: -0.008em;
    margin-bottom: 18px;
}

.contact-heading {
    font-family: iv, serif;
    font-weight: 400;
    font-size: 68px;
    line-height: 1;
    color: var(--black);
    margin-bottom: 6px;
    letter-spacing: -0.06em;
}

.contact-form-contain {
    width: 100%;
    padding: unset;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#contact-email, #contact-name, #contact-message {
    width: 100%;
    font-family: nhg-tx, sans-serif;
    /* font-size: var(--lg); */
    padding: 0 1rem;
    border: 1.5px solid var(--black);
    outline: none;
    color: var(--black);
    background-color: var(--c-1);
}

#contact-email, #contact-name {
    height: 3.5rem;
    letter-spacing: -0.008em;
    line-height: 1.65;
}

#contact-message {
    height: 8.5rem;
    padding-top: 0.75rem;
    line-height: 1.65;
    letter-spacing: -0.008em;
}

textarea::placeholder,
input::placeholder {
  color: var(--black); 
}

.contact-button-contain {
    display: flex;
    justify-content: flex-end;
}

#contact-button {
    font-family: nhg-tx, sans-serif;
    /* font-size: var(--lg); */
    padding: var(--btn-vert-padding) var(--btn-horz-padding);
    border: 1.75px solid var(--black);
    outline: none;
    background-color: var(--black);
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: var(--btn-bdr-radius);
    letter-spacing: var(--btn-ltr-spacing);
}

#contact-button:hover {
    background-color: var(--c-1);
    color: var(--black);
    font-weight: 400;
}

@media (max-width: 688px) {
    .contact-contain {
        width: 100%;
    }
}

@media (max-width: 548px) {
    .contact-contain {
        padding: 2.5rem 2.3rem 1.5rem;
    }
}

@media (max-width: 425px) {
    .contact-heading {
        font-size: 48px;
    }
}

@media (max-width: 375px) {
    .contact-contain {
        padding: 1.25rem 1.15rem 0.75rem;
    }
}