p {
    margin: 1%;
}

.container {
    padding: 10.5vh;
    padding-bottom: 1vh;

    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../_assets/_images/soy.jpg");

    background-repeat: no-repeat;

    display: flex;
    flex-wrap: wrap;
}

.column {
    flex: 1;
    margin-left: 2.5px;
    margin-right: 2.5px;
    min-width: 300px;
    /* Define um tamanho mínimo para cada coluna */
}

/* Estilo dos botões de acordeão */
.accordion {
    background-color: #d6d6d6;
    color: #444;

    cursor: pointer;

    width: 100%;
    padding: 2%;
    margin-top: 5px;

    border: none;

    outline: none;
    text-align: left;

    transition: 0.4s;
}


/* Botão ativo e hover */
.active,
.accordion:hover,
.innactive-accordion:hover {
    background-color: #eee;
}

/* Ícone do acordeão */
.accordion:after {
    content: "\002B";
    color: #777;
    font-weight: bold;
    float: right;
}

.active:after {
    content: "\2212";
}

/* Painel do acordeão */
.panel {
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.textarea {
    padding: 1%;
}

/* Media query para telas menores que 768px (celulares) */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 10.5vh 1.5% 0.5vh 0;
        /* Altera a direção do container para coluna */
    }

    .column {
        width: 100%;
        /* Ajusta a largura da coluna para ocupar 100% da largura disponível */
        min-width: unset;
        /* Remove a largura mínima definida para a coluna */
    }
}