body {
        font-family: 'Poppins', sans-serif;
        background: linear-gradient(to right, #58bfe5, #3c97b8); /* Gradiente de fundo */
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        padding: 20px;
    }
    .container {
        background-color: #ffffff; /* Fundo branco semi-transparente para o conteúdo */
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        width: 100%;
        max-width: 1200px; /* Largura máxima para o conteúdo */
    }
    .navbar {
        background-color: transparent !important;
        border-bottom: none;
        padding-bottom: 0;
    }
    .navbar-brand img {
        height: 60px; /* Ajuste o tamanho da sua logo aqui */
        margin-right: 15px;
    }
    .header-section {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        color: #333; /* Cor do texto no cabeçalho */
    }
    .header-section h1 {
        font-weight: 700;
        font-size: 2.8rem;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px; /* Espaçamento entre os cards */
    }
    .custom-card {
        background-color: #ffffff;
        border-radius: 15px;
        padding: 30px;
        text-align: center;
        flex: 1 1 calc(33% - 50px); /* 3 cards por linha em telas maiores, com espaçamento */
        max-width: 300px; /* Largura máxima para cada card */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 220px; /* Altura mínima para uniformidade */
        color: white; /* Texto branco dentro do card colorido */
        text-decoration: none;
    }
    .custom-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    }
    .custom-card h3 {
        font-weight: 600;
        margin-top: 15px;
        font-size: 1.6rem;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .card-estudantes { background: linear-gradient(45deg, #FF6B6B, #FFA500); } /* Laranja avermelhado */
    .card-cursos { background: linear-gradient(45deg, #4CAF50, #8BC34A); } /* Verde */
    .card-instituicoes { background: linear-gradient(45deg, #2196F3, #03A9F4); } /* Azul */
    .card-impressoes { background: linear-gradient(45deg, #9C27B0, #E040FB); } /* Roxo */
    .card-relatorios { background: linear-gradient(45deg, #FFC107, #FFEB3B); } /* Amarelo */
    .card-configuracoes { background: linear-gradient(45deg, #607D8B, #9E9E9E); } /* Cinza */

    /* Ícones placeholder - idealmente você usaria Font Awesome ou similar */
    .card-icon {
        font-size: 3.5rem;
        margin-bottom: 10px;
        line-height: 1; /* Alinha o ícone */
    }

    /* Responsividade */
    @media (max-width: 992px) {
        .custom-card {
            flex: 1 1 calc(50% - 30px); /* 2 cards por linha em telas médias */
        }
    }
    @media (max-width: 768px) {
        .header-section {
            flex-direction: column;
            text-align: center;
        }
        .navbar-brand img {
            margin-bottom: 15px;
            margin-right: 0;
        }
        .custom-card {
            flex: 1 1 90%; /* 1 card por linha em telas pequenas */
            max-width: 350px;
        }
        .header-section h1 {
            font-size: 2rem;
        }
    }