/*Animacao dos cartoes*/
.cartao:hover {
    color: #004D81;
    /* Altera a cor do texto */
    box-shadow: 2px 2px 10px 0 #cecccc;
    /* Adiciona uma sombra suave */
}

.cartao:hover h5 a{
    color: #004D81;
}

.cartao {
    transition: box-shadow 0.5s ease;
    /* Adiciona uma transição suave para a sombra */
}


/*Progress Bar Circular*/

.circuloo-container {
    display: flex;
    flex-direction: column; /* Alterado para column para alinhar os círculos verticalmente */
    align-items: center;
    position: relative;
}

.circuloo {
    position: relative;
    width: 80px; /* Tamanho menor dos círculos */
    height: 80px; /* Tamanho menor dos círculos */
    border-radius: 50%;
    background: radial-gradient(circle at center, var(--bg-color) 50%, transparent 52%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Evita que o texto ultrapasse os limites do círculo */
}

.circuloo::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 90deg, #bcbdbd 0%, #fff var(--fill), var(--bg-color) var(--fill), var(--bg-color) 100%);
    transform-origin: center;
    animation: rotate 2s linear ; /* Adiciona animação de rotação */
}

.circuloo-overlay {
    position: absolute;
    width: 70px; /* Tamanho menor do overlay */
    height: 70px; /* Tamanho menor do overlay */
    border-radius: 50%;
    background-color: #fff; /* Cor de fundo do círculo */
    top: 50%;
    left: 50%; /* Posiciona o overlay para a direita do círculo */
    transform: translate(-50%, -50%);
    z-index: 1; /* Coloca o círculo acima do círculo giratório */
}

.circuloo-text-container {
    position: absolute;
    top: 50%;
    left: 55%; /* Posiciona o texto à direita do círculo */
    transform: translate(-50%, -50%); /* Centraliza vertical e horizontalmente */
    z-index: 2; /* Coloca o texto acima do círculo giratório */
}

.circuloo-text {
    font-size: 20px;
    color: #58585a;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.circulo-red {
    --bg-color: #00558C;  /* Red */
    --fill: 1%; /* Preenchimento do primeiro círculo */
}

.circulo-green {
    --bg-color: #00558C;  /* Green */
    --fill: 0%; /* Preenchimento do segundo círculo */
}

.circulo-blue {
    --bg-color: #00558C; /* Blue */
    --fill: 5%; /* Preenchimento do terceiro círculo */
}

/*Fim da Progress Bar Circular*/

/*Card e barras circulares*/

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<RESPONSIVIDADE>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

@media (max-width: 450px){
    .circuloo {
        position: relative;
        width: 10vw; /* Usando viewport width para o tamanho do círculo */
        height: 10vw; /* Usando viewport width para o tamanho do círculo */
        max-width: 80px; /* Definindo um tamanho máximo para o círculo */
        max-height: 80px; /* Definindo um tamanho máximo para o círculo */
        border-radius: 50%;
        background: radial-gradient(circle at center, var(--bg-color) 50%, transparent 52%);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden; /* Evita que o texto ultrapasse os limites do círculo */
    }

    .circuloo-overlay {
        position: absolute;
        width: 9vw; /* Usando viewport width para o tamanho do overlay */
        height: 9vw; /* Usando viewport width para o tamanho do overlay */
        max-width: 70px; /* Definindo um tamanho máximo para o overlay */
        max-height: 70px; /* Definindo um tamanho máximo para o overlay */
        border-radius: 50%;
        background-color: #fff; /* Cor de fundo do círculo */
        top: 50%;
        left: 50%; /* Posiciona o overlay para a direita do círculo */
        transform: translate(-50%, -50%);
        z-index: 1; /* Coloca o círculo acima do círculo giratório */
    }

    .circuloo-text-container {
        position: absolute;
        top: 50%;
        left: 50%; /* Posiciona o texto à direita do círculo */
        transform: translate(-50%, -50%); /* Centraliza vertical e horizontalmente */
        z-index: 2; /* Coloca o texto acima do círculo giratório */
    }

    .circuloo-text {
        font-size: 2vw; /* Usando viewport width para o tamanho do texto */
        color: #58585a;
    }


}