main {
    display: flex;
    height: 80vh;
    width: 100vw;
    background: linear-gradient(to top right, #0054ff, #00005a);
}

.bg-contato {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
}

.bg-contato img {
    height: 75%;
}

.contato {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 70%;
    height: max-content;
    border-radius: 10px;
    background-color: var(--white-default);
    padding: 1.5rem 3rem;
}

form button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    margin-top: 1rem;
    width: 180px;
    height: 60px;
    border: initial;
    border-radius: 10px;
    color: #ffffff;
    background-color: #00005a;
    min-width: 160px;
    min-height: 50px;
}

.titulo {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.titulo h1 {
    font-size: 4rem;
    font-weight: 600;
    color: #00005a;
}

.titulo img {
    width: auto;
    height: 100px;
    animation: start 2s ease-in-out forwards;
}

.box-input {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/***** Select *****/
.select-single {
    margin: 18px 0;
}

.select-single select {
    width: 100%;
    border: 0px;
    border-bottom: 2px solid #ccc;
    font-size: 15px;
}

/***** Input *****/

.input-single {
    height: max-content;
    position: relative;
    margin: 18px 0;
}

.input-single label {
    position: absolute;
    left: 0;
    bottom: 5px;
    transition: all 0.2s;
    z-index: 0;
}

.input {
    height: 100%;
    width: 100%;
    border: 0;
    padding: 5px;
    font-size: 20px;
    outline: none;
    background-color: transparent;
    border-bottom: 2px solid #ccc;
}

form .input-single .input:focus ~ label,
form .input-single .input:valid ~ label {
    transform: translateY(-24px);
    font-size: 20px;
    font-weight: 600;
    color: var(--color1-dark-green);
}

@media (max-width: 1440px) {
    .bg-contato {
        width: 50%;
    }

    .bg-contato img {
        height: 70%;
    }

    .titulo {
        gap: 0.5rem;
        height: 70px;
    }

    .titulo img {
        width: auto;
        height: 100%;
    }

    .titulo h1 {
        font-size: 3.5rem;
    }

    form button {
        min-width: 160px;
        min-height: 50px;
    }

    form {
        justify-content: space-between;
        gap: 10px;
        padding: 2rem 2rem;
    }
}

@media (max-width: 1080px) {
    main {
        min-height: 80vh;
    }
    .bg-contato img {
        height: auto;
        width: 90%;
    }
}

@media (max-width: 960px) {
    .titulo {
        gap: 0.5rem;
        height: 60px;
    }

    .titulo img {
        width: auto;
        height: 100%;
    }

    .titulo h1 {
        font-size: 2.75rem;
    }

    form {
        gap: 10px;
        padding: 1rem 2rem 2rem 2rem;
    }
}

@media (max-width: 768px) {
    form {
        min-height: 620px;
    }

    .bg-contato {
        display: none;
    }

    .contato {
        height: auto;
        width: 100%;
    }

    main {
        padding: 1rem 0px;
    }
}

@keyframes start {
    from {
        transform: translateX(-30vw) rotate(-360deg); /* Começa fora da tela à esquerda, girando */
        opacity: 0;
    }
    to {
        transform: translateX(0) rotate(0deg); /* Termina na posição original, sem girar */
        opacity: 1;
    }
}