.circle-progress-container .card__percent {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20rem;
}
.circle-progress-container .card__number {
    position: absolute;
    font-size: 2.6rem;
    color: #7c3aed ;
    font-family: "DM Sans", sans-serif;
}


.circle-progress-container svg {
    position: relative;
    width: 24rem;
    height: 24rem;
    z-index: 1000;
    transform: rotate(-90deg);
}

.circle-progress-container svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-linecap: round;
    transform: translate(3rem, 3rem);
    transition: all 1s ease;
    stroke-width: 1rem;
}

.circle-progress-container .circle {
    position: absolute;
    width: 23rem;
    height: 23rem;
    border-radius: 50%;
    box-shadow: 6px 6px 8px var(--greyLight-2), -6px -6px 8px var(--white);
    background: var(--greyLight-1);
}
.circle-progress-container .circle__medium {
    width: 20.5rem;
    height: 20.5rem;
    box-shadow: inset 8px 8px 10px var(--greyLight-2), inset -4px -4px 8px var(--white);
}
.circle-progress-container .circle__small {
    width: 15.5rem;
    height: 15.5rem;
    box-shadow: 6px 6px 8px var(--greyLight-2), -2px -2px 8px var(--white);
}