.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
    padding: 70px;
    max-width: 100%;
    margin: auto;
    margin-bottom: 8%;
}

.section__img__forms {
    width: 50%;
    max-width: 600px;
    display: block;
    margin: 0 auto 10px;
    transition: transform 0.3s ease, border 0.3s ease; /* Suaviza a transição */
    border: 2px solid transparent; /* Borda transparente por padrão */
}

.section__img__forms:hover {
    transform: scale(1.2); /* Aumenta a imagem ao passar o mouse */
    
}

.section__header__forms, .section__description__forms {
    max-width: 600px;
    margin-inline: auto;
    color: var(--extra-light);
    text-align: center;
    line-height: 1.75rem;
}

.container__forms {
    background: #1b1919ad;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
}

.container__forms h1 {
    margin-bottom: 15px;
    color: white;
}

.container__forms input, .container__forms textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 0.125rem solid transparent;
    background: #323644;
    border-radius: 1.125rem;
    color: white;
}

.contact-form input:hover,
.contact-form input:focus,
.contact-form textarea:hover,
.contact-form textarea:focus{
    outline: none;
    border-color: #ca065b;
    box-shadow: 0 0 0 0.125rem #26344a;
}

.contact-form label{
    margin-bottom: 0.05rem;
    color: #8f8484;
}

.contact-form textarea{
    min-height: 12.5rem;
    resize: vertical;
}

.container__forms button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 99px;
    color: white;
    background: var(--gradient-buttons);
    cursor: pointer;
    transition: 0.3s;
}

.container__forms button:hover {
    outline: none;
    background: linear-gradient(90deg, #720d2c, #9e0c39, #3a1525);
}

.contact-form button:disabled{
    cursor: not-allowed;
    background: #555b69;
}

@media (max-width: 768px) {
    .contact-form {
        grid-template-columns: 1fr;
        text-align: center;
    }
}