.progress-bar {
    width: 0;
    background-color: #385bbd;
    height: 25px;
    transition: width 1s ease-in-out;
    position: relative;
    overflow: hidden;
}

.skill-bar .progress-bar::after {
    content: "";
    display: block;
    background-color: #385bbd;
    height: 100%;
    width: 0; /* Largura inicial para garantir animação */
    transition: width 1s ease-in-out; /* Suaviza a animação da largura */
}

.skill-bar .progress-bar[data-skill="50"] {
    width: 50%;
}

.skill-bar .progress-bar[data-skill="40"] {
    width: 40%;
}

.skill-bar .progress-bar[data-skill="30"] {
    width: 30%;
}
.skill-bar .progress-bar[data-skill="25"] {
    width: 25%;
}

.skill-bar .progress-bar[data-skill="20"] {
    width: 20%;
}

.skill-bar .progress-bar[data-skill="10"] {
    width: 10%;
}
.skill-bar .progress-bar[data-skill="5"] {
    width: 5%;
}
/* Ocultar o texto da porcentagem */
.skill-bar .progress-bar {
    color: transparent; /* O texto não ficará visível */
}