.skill-item {
    position: relative;
    width: 90px;
    height: 120px;
}

.skill-circle {
    width: 100%;
    height: 75%;
}

.skill-circle circle {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transform: translate(5px, 5px);
}

.skill-circle .bg {
    stroke: rgba(255, 255, 255, 0.6);
}

.skill-circle .progress {
    stroke: crimson;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    transition: stroke-dashoffset 1s ease-out;
}

.skill-text {
    position: absolute;
    top: 37.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: crimson;
}

.skill-percent {
    font-size: 1.5rem;
    font-weight: bold;
}

.skill-name {
    position: absolute;
    font-size: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: crimson;
}

.animated {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animated.show {
    opacity: 1;
    transform: translateY(0);
}