@media (max-width: 768px) {

    * {
        /border: 2px solid;
    }

    .body-contain.contact-body {
        background: var(--ggray2);
    }

    .contact-top {
        margin: 0 auto 2rem auto;
        width: 95%;
        padding-top: 3rem;
        text-align: center;
    }

    /* CONTACT FORM */

    #contact-us-text {
        padding-top: 9rem;
        text-align: center;
    }

    .intro-text {
        width: 85%;
        margin: 2rem auto 5rem auto;
    }

    .contact {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 85vh;
        background-color: white;
        z-index: 10;
        box-shadow: none;
        padding: 0rem;
        background: none;
    }

    .contact-us {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60rem;
        font-size: 2.2rem;
    }

    #contactForm {
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 50vh;
        width: 90%;
        padding-bottom: 15vh;
    }

    .contact .right form .fields {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .field.email input,
    .field.name input,
    .field.subject input {
        height: 4rem
    }

    .contact .right form .field,
    .contact .right form .fields .field {
        width: 100%;
        margin-bottom: 2.5rem;
    }

    .contact .right form .name {
        margin-right: 2%;
    }

    .contact .right form .textarea textarea {
        height: auto;
    }

    .contact .right form .field input,
    .contact .right form .textarea textarea {
        width: 100%;
        border: 0.1rem solid var(--blue3);
        border-radius: 0.5rem;
        outline: none;
        padding: 0 1.2rem;
        font-size: 1.6rem;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

    .contact .right form .field input:focus,
    .contact .right form .textarea textarea:focus {
        border: 0.25rem solid var(--blue3)
    }

    .contact .right form .textarea textarea {
        padding-top: 0.8rem;
        resize: none;
    }

    #send-message-btn-area {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 1rem;
    }

    .contact-button-area button {
        width: 50% !important;
        max-width: 20rem;
        height: 4.5rem;
        outline: none;
        font-size: 2rem;
        font-weight: 500;
        border-radius: 0.5rem;
        cursor: pointer;
        flex-wrap: nowrap;
        transition: all 0.3s ease;
    }

    .contact-button-area button:hover {
        font-size: 2.1rem;
    }

    .fa-paper-plane {
        margin-left: 0.04rem;
        margin-bottom: 0.2rem;
        font-size: 1rem;
    }

    #responseMessage {
        font-size: 1.5rem;
        font-style: italic;
        font-weight: bold;
    }
}