.contact-form {
    display: flex;
    justify-content: center;
}

.send-form input {
    height: 7rem;
    border: 2px solid #7AB3A6;
    width: 20rem;
    background-color: #7AB3A6;
    transition: background-color 1s;
    font-size: 2rem;
    color: #fff;
    padding: auto auto;
}

.send-form input:hover {
    background-color: #fff;
    border: 3px solid #7AB3A6;
    color: #7AB3A6;
    font-weight: bold;

}

.send-form {
    display: flex;
    justify-content: center;
}

.form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.form input {
    height: 8rem;
    border: 2px solid #7AB3A6;
    width: 25vw;
    background-color: #ede9e2;
    transition: border .1s;
}
textarea {
    padding: 10px;
    margin: 4rem 0;
    height: 16rem;
    border: 2px solid #7AB3A6;
    width: calc(50vw + 4rem);
    background-color: #ede9e2;
}


@media screen and (max-width: 1020px) {
    .form input {
        height: 4rem;
        width: 250px;

    }
    textarea {
        padding: 10px;
        margin: 4rem 0;
        height: 8rem;
        width: calc(500px + 3rem);

    }
    .form {
        gap: 3rem;
    }

    .send-form input {
        height: 6rem;
        width: 10rem;
    font-size: 1.5rem;
}
}

@media screen and (max-width: 575px) {
    .form input {
        height: 3rem;
        width: 150px;

    }
    textarea {
        padding: 10px;
        margin: 2rem 0;
        height: 6rem;
        width: calc(300px + 2rem);

    }
    .form {
        gap: 2rem;
    }

    .send-form input {
        height: 5rem;
        width: 8rem;
    font-size: 1rem;
}
}

.form input:hover, form input:target, form input:focus, textarea:hover, textarea:target, textarea:focus {
    border: 3px solid #7AB3A6;
    font-weight: bold;

}