body {
    background-color: #f2f2f2;
}

section {
    margin-top: 111px;
    color: black;
}

.bg-1 {
    color: white;
    background-color: var(--text-on-white);
}

.contact,
.message {
    padding: 1.375rem;
    border-radius: 1rem;
    display: grid;
}

.contact>*:first-child,
.message h3 {
    font-size: 2rem;
    margin-bottom: 1.375rem;
}

.contact .xtc {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.125rem;
}

.contact .xtc i {
    font-size: 1.375rem;
    background-color: white;
    color: var(--text-on-white);
    padding: .3rem;
    border-radius: .2rem;
}

.contact .xtc:not(:last-child) {
    margin-bottom: 1rem;
}

.contact .socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.375rem;
}

.contact .socials a {
    color: var(--text-on-white);
    display: inline-flex;
    font-size: 26px;
    padding: .5rem;
    background-color: white;
    border-radius: .3rem;
}

.message {
    background-color: white;
}

.form-control>* {
    padding: .8rem;
    font-size: 1rem;
    width: 100%;
    padding: .8rem;
    border: 1px solid var(--text-on-white);
    outline: 0px;
    border-radius: .5rem;
}

.form-control {
    margin-bottom: 1rem;
}

.form-control textarea {
    height: 150px;
    resize: none;
    display: block;
}


@media (min-width:1024px) {
    .thx {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        gap: 2rem;

    }

}