.bg-custom-blue {
    background-color: #0052b4; /* azul semelhante ao da imagem */
    color: white;
}

:root {
    --bs-primary: #0052b4;
}
.text-primary {
    color: var(--bs-primary) !important;
}

.progress-bar-modulos {
    position: relative;
}

/* Estilo padrão (já existe, mas mantemos aqui para garantir) */
.progress-circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #d9d9d9;
    position: relative;
}

/* Responsividade para telas menores */
@media (max-width: 576px) {
    .progress-bar-modulos {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px; /* reduz o espaçamento entre bolinhas */
    }

    .progress-circle {
        width: 10px;
        height: 10px;
    }

    .progress-circle::after {
        width: 20px;
        top: 4px;
        left: 10px;
    }
}

.progress-circle:last-child::after {
    display: none;
}

.progress-circle.filled {
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 2px white;
}

button.btn-primary {
    background-color: #0052b4;
    border: none;
    font-weight: bold;
    font-size: 1rem;
}

.btn {
    font-weight: bold;
    font-size: 0.95rem;
    color: white;
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    opacity: 0.9;
}

#content {
    padding-top: 75px; /* ajuste conforme a altura da sua navbar */
}

.bg-primary-dark {
    background-color: #003366 !important;
    color: #fff;
}

.btn-primary-dark {
    background-color: #003366 !important;
    color: #fff;
}

.btn-primary-dark:hover {
    background-color: #0c56a0 !important;
    color: #fff;
}
