.getInTouch-container {
    padding:10px;
    width:max(70%, 450px);
    margin:5rem auto 2rem;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap:1rem;
}

.contact-form {
    width:100%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap:2rem;
}

.left-contact-form > section,
.right-contact-form > section {
    text-align: center;
    display: flex;
    align-items: center;
    margin:1rem auto;
}

.contact-button {
    cursor: pointer;
    margin:10px 0;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 1rem;
    gap:1rem;
    background: transparent;
    color: var(--text-color);
    width: 100%;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(135, 0, 0, 0.4);
}

#anouncement{
    height:33px;
}

.form {
    display: flex;
    flex-direction: column;
    gap:1rem;
    width:max(40%, 400px);
    font-size: 1.5rem;
}

.form > button,
.form > textarea ,
.form > input {
    padding: 15px 5px;
    font-size: 1rem;
    outline:0;
    max-width: 530px;
    border: 1px solid rgba(135, 0, 0, 0.7);
    background: rgba(0,0,0,0.7);
    color: var(--text-color);
    transition: var(--transition-quick);
}

.form > textarea {
    max-height: 350px;
}

.form > button { 
    cursor: pointer; 
    width: 30%;
}

.form > button:focus,
.form > button:hover,
.form > textarea:focus,
.form > input:focus {
    border: 1px solid rgba(160, 1, 1, 0.7);
    background: rgba(40, 40, 40, 0.7);
}

.socials:is([data-animate="true"]) {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 2rem;
    opacity: 1;
    width: 70%;
    margin:0 auto;
    transform: translateY(0);
}

.form-signature {
    position: absolute;
    left:30%;
    top:50%;
    filter: invert(1);
    width: 5rem;
}

@media only screen and (max-width: 1180px){
    .form-signature {
        width: 3rem;
        left:35%;
    }
}

@media only screen and (max-width: 917px) {
    .form-signature {
        display: none;
    }
    
    .form > button,
    .form > textarea ,
    .form > input {
        font-size: 1rem;
    }

    .form > textarea ,
    .form > input {
        width: 80%;
    }
}

@media only screen and (max-width: 500px) {

    .getInTouch-container{
        margin:1rem auto 0;
        transform: scale(0.8);
    }

    #anouncement{
        font-size: 20px;
    }

    .socials:is([data-animate="true"]){
        margin-top: -4rem;
        width: 100%;
        padding-left:15px;
        transform: scale(0.8);
    }
}