section {
    padding: 10rem 0;
}

.contact {
    background-color: rgb(46, 50, 103);
    border-radius: 20px;
    padding: 4rem;
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 25px;
    height: 30rem;
}

.contact input {
    color: #fff;
}

.form-side {
    display: flex;
    gap: 15px;
}

.form-control {
    color: red;
    background-color: rgb(46, 50, 103);
    border-radius: rgb(46, 50, 103);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input,
textarea {
    width: 100%;
    padding: 0.9rem;
    background: var(--bg-color);
    border-radius: 1rem;
}

.contacts-us {
    background-color: rgb(108, 99, 255);
    border-radius: 20px;
    padding: 30px 30px;
    line-height: 2;
    position: relative;
    bottom: 9rem;
}

.contact h6 {
    font-weight: bold;
    font-size: 0.90rem;
}

.contacts-us h2 {
    font-weight: bold;
    margin: 15px 0;
}

.fa-brands {
    background-color: rgb(66, 72, 144);
    padding: 10px;
    border-radius: 10px;
    transition: all 0.4s;
}

.fa-brands:hover {
    border: 1px solid #fff;
    background-color: transparent;
}

@media screen and (max-width: 600px) {
    .contact {
        padding: 0;
        grid-template-columns: repeat(1, 1fr);
        height: fit-content;
    }
    .contacts-us {
        width: 100%;
        position: relative;
        bottom: 0;
    }
    .forms-input{
        padding: 15px;
    }
}
@media screen and (max-width: 1024px) {
    .contact {
        padding: 2rem;
        height: fit-content;
    }
    .contacts-us {
        padding: 15px 15px;
        position: relative;
        bottom: 0;
    }
    .contact h6 {
        font-weight: bold;
        font-size: 0.63rem;
    }
}