body {
    font-family: 'Inter', 'Roboto', sans-serif;
}

/* -------------------------------------------------------------------------- */


/* Estilo da barra de navegacao */

.navbar {
    background-color: #f0f0f0; /* Fundo branco */
}

.navbar-brand img {
    margin-left: 20px;
    height: 60px;
}

.navbar .navbar-nav .nav-link {
    color: #101820; /* Cor branca para os links */
}

.navbar .navbar-nav .nav-link:hover {
    font-weight: bold;
}

.navbar .navbar-nav .nav-link.active {
    /*color: #f0f0f0; /* Cor cinza para o estado hover e ativo
    background-color: #101820;
    text-decoration: underline;*/
    color: #101820;
    font-weight: bold;
}


/* -------------------------------------------------------------------------- */


/* Estilo da solucoes parte 1 */


.caixa-preta {
    color: #f0f0f0; /* Cor padrão do texto */
    background-color: #101820;
    padding: 30px 10px; /* Espaçamento interno ajustado */
}

/* Estilo da solucoes parte 1 */

#solucoes1 .texto-apresenta {
    margin: 40px 10px 40px 10px;
    padding: 18px 0;
    font-size: 1.6em;
    text-align: justify;
}

.texto-apresenta-final {
    margin: 0 10px;
    font-size: 1.6em;
    text-align: justify;
}

.imagem-solucoes {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 100%; /* Faz a div ocupar toda a altura disponível */
}

.imagem-solucoes img {
    margin: 50px 10px 10px 10px;
    max-width: 100%; /* Garante que a imagem não ultrapasse os limites */
    max-height: 100%; /* Ajusta a altura máxima */
    border: 3px solid #f0f0f0;
}

/* -------------------------------------------------------------------------- */


/* Estilo da solucoes parte 2 */

#solucoes2 .container {
    margin: 60px auto;
}

.caixa-branca {
    color: #101820; /* Cor padrão do texto */
    background-color: #f0f0f0;
    padding: 40px 10px; /* Espaçamento interno ajustado */
}

#solucoes2 .texto-apresenta {
    margin: 35px 10px 40px 10px;
    padding: 18px 0;
    font-size: 1.6em;
    text-align: justify;
}

.imagem-solucoes2 img {
    margin: 50px 10px 10px 10px;
    max-width: 100%; /* Garante que a imagem não ultrapasse os limites */
    max-height: 100%; /* Ajusta a altura máxima */
    border: 3px solid #101820;
}


/* -------------------------------------------------------------------------- */


/* Estilo da solucoes parte 3 */


#solucoes3 .container {
    margin: 60px auto;
}

.caixa-preta2 {
    color: #f0f0f0; /* Cor padrão do texto */
    background-color: #101820;
    padding: 40px 10px; /* Espaçamento interno ajustado */
}

.caixa-preta2 .texto-apresenta {
    margin: 35px 10px 40px 10px;
    padding: 18px 0;
    font-size: 1.6em;
    text-align: justify;
}

.imagem-solucoes3 img {
    margin: 50px 10px 10px 10px;
    max-width: 100%; /* Garante que a imagem não ultrapasse os limites */
    max-height: 100%; /* Ajusta a altura máxima */
    border: 3px solid #f0f0f0;
}


/* -------------------------------------------------------------------------- */


/* Estilo da solucoes parte 4 */

.apresenta {
    margin: 30px
}

.imagem-solucoes4 {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

.imagem-solucoes4 img {
    margin: 30px 10px 10px 10px;
    max-width: 80%; /* Garante que a imagem não ultrapasse os limites */
    max-height: 80%; /* Ajusta a altura máxima */
    border: 3px solid #101820;
}

.texto-apresenta-final4 {
    margin: 0 40px;
    font-size: 1.6em;
    text-align: center;
}

.final-apresenta {
    font-size: 1.1em;
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: space-between; /* Distribui os itens: um à esquerda, outro à direita */
}

.final-apresenta a {
    color: #101820;
    text-decoration: none;
    font-size: 1.2em; /* Ajusta tamanho da fonte para links */
    display: block; /* Garante que cada link ocupe sua própria linha */
    margin: 10px 30px;
}

.final-apresenta a:hover {
    text-decoration: underline;
}



/* -------------------------------------------------------------------------- */

/* Estilo do rodape */

.footer {
    background-color: #f0f0f0; /* Mesmo fundo do menu */
    
    bottom: 0; /* Gruda no rodapé da página */
    left: 0;
    width: 100%; /* Ocupa a largura inteira */
    padding: 10px 20px; /* Espaçamento interno */
    display: flex;
    justify-content: flex-start; /* Alinha os links à esquerda */
    align-items: center;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.9); /* Leve sombra no topo */
}

.footer .nav-link {
    color: #101820; /* Mesma cor dos links do menu */
    margin-right: 15px; /* Espaçamento entre os links */
    text-decoration: none;
    font-size: 14px;
}

.footer .nav-link:hover {
    font-weight: bold;
}

.footer .nav-link.active {
    color: #101820;
    font-weight: bold;
}

.direitos{
    background-color: #f0f0f0;
    color: #101820;
    text-align: center;
    padding: 10px;
}


/* -------------------------------------------------------------------------- */


/* Media query para telas pequenas */
@media (max-width: 767.98px) {

    .navbar-brand img {
        margin-left: 0px;
        height: 55px;
    }

    /* Estilo da solucoes parte 1 */
    .caixa-preta {
        padding: 10px; /* Espaçamento interno ajustado */
    }
    #solucoes1 .texto-apresenta {
        margin: 0 10px 0 10px;
        font-size: 1.2em;
    }
    .texto-apresenta-final {
        font-size: 1.2em;
        margin: 0 10px 20px 10px;
        padding-bottom: 10px;
    }

    .imagem-solucoes img {
        margin: 0 10px 20px 10px;
    }

    /* Estilo da solucoes parte 2 */

    #solucoes2 .container {
        margin: 10px auto;
    }

    .caixa-branca {
        padding: 10px 10px; /* Espaçamento interno ajustado */
    }

    #solucoes2 .texto-apresenta {
        margin: 10px 10px 0 10px;
        font-size: 1.2em;
    }

    .imagem-solucoes2 img {
        margin: 30px 10px 10px 0;
    }


    /* Estilo da solucoes parte 3 */

    #solucoes3 .container {
        margin: 10px auto;
    }

    .caixa-preta2 {
        padding: 10px; /* Espaçamento interno ajustado */
    }

    .caixa-preta2 .texto-apresenta {
        margin: 10px;
        font-size: 1.2em;
    }

    .imagem-solucoes3 img {
        margin: 0 10px 20px 0;
    }


    /* Estilo da solucoes parte 4 */

    .apresenta {
        text-align: center;
    }
 
    .imagem-solucoes4 img {
        margin: 30px 10px 10px 10px;
        max-width: 100%; /* Garante que a imagem não ultrapasse os limites */
        max-height: 100%; /* Ajusta a altura máxima */
    }

    .texto-apresenta-final4 {
        margin: 0 10px;
        font-size: 1.2em;
        text-align: justify;
    }   

    .final-apresenta a {
        font-size: 1em;
    }





    /* Estilo do rodapé */
    .footer .nav-link {
        margin-right: 5px; /* Espaçamento entre os links */
        font-size: 11px;
    }
    .direitos{
        font-size: 11px;
    }
}