body {
    font-family: Arial, sans-serif;
    background-color: #e7eaec; /* Seu verde claro */
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Garante que o corpo ocupa toda a altura da tela */
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scroll during animation */
}

/* O container do Bootstrap já cuida da largura e centralização,
   então podemos focar nos elementos internos. */

/* Estilos para o logo */
.img-fluid {
    display: block; /* Garante que a imagem se comporte como bloco para centralizar */
    margin: 0 auto; /* Centraliza a imagem */
    margin-bottom: 20px; /* Espaçamento abaixo do logo */
}

/* Estilos para os títulos */
h1 {
    color: #004a99; /* Seu verde escuro */
}

/* Estilo para os cards */
.card {
    border: none; /* Remove a borda padrão do Bootstrap */
    border-radius: 12px; /* Mantém seu border-radius original */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sua sombra original */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efeito de hover */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
}
.text-success {
    color: #1a4a7a !important; /* AQUI: Troque #1a4a7a pela cor azul desejada */
}

.card-title {
    color: #004a99; /* Seu verde escuro para os títulos dos cards */
}

/* Estilo para os botões dentro dos cards */
.btn-success {
    background-color: #004a99; /* Seu verde escuro para os botões */
    border-color: #004a99;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-success:hover {
    background-color: #004a99; /* Seu verde mais escuro para o hover */
    border-color: #004a99;
    transform: translateY(-1px);
}

.btn-success:active {
    transform: scale(0.98);
}

.btn-success:active, 
.btn-success:focus, 
.btn-success:active:focus {
    background-color: #103152 !important; /* Um azul um pouco mais escuro para o clique */
    border-color: #103152 !important;
    transform: scale(0.98); /* Mantém aquele efeito de 'apertar' que você tinha antes */
}

/* Estilo para o footer */
.footer {
    font-size: 0.9em;
    color: #6c757d; /* Cor mais suave para o texto do footer */
}

/* Você pode adicionar mais estilos aqui se precisar */

.logo {
    display: block;
    margin: 0 auto 30px auto;
    max-width: 130px;
    padding: 15px;
    border-radius: 9px;
    background-color: #004a99;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

/* New: Fade-in animation for the container */
.container {
    animation: fadeIn 1s ease-out forwards;
    opacity: 0; /* Start invisible */
}

.caixa-indicadores {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}