@media (max-width: 767px) {
       /* Transforma o container .row em um flex container com direção de coluna */
    .row {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza os itens horizontalmente */
    }

    /* Ajusta a largura dos campos para ocupar mais espaço na tela do celular */
    .container-principal, .col-2, .col-8 {
        width: 90%; /* Você pode ajustar este valor */
        max-width: 400px; /* Limite máximo para não ficar muito largo em telas maiores */
        flex: 0 0 auto; /* Remove o comportamento de coluna do Bootstrap */
        margin-bottom: 15px; /* Adiciona um espaçamento entre os campos */
    }
}