.circle-border {
    position: relative;
    &::before {
        position: absolute;
        content: "";
        width: calc(100% - 50px);
        height: calc(100% - 50px);
        border: 1px solid var(--neutral-400);
        border-radius: 50%;
        top: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
    }
}

svg.radial-progress {
    height: auto;
    max-width: 140px;
    transform: rotate(0deg);
    width: 100%;
}

svg.radial-progress circle {
    fill: none;
    stroke: #fff;
    stroke-width: 6;
    stroke-linecap: round; 
}

svg.radial-progress circle.incomplete {
    opacity: 0.1;
}

svg.radial-progress circle.complete {
    stroke-dasharray: 219.91148575129;
    stroke-dashoffset: 219.91148575129; /* Full circumference */
    stroke: var(--main-600);
    transition: stroke-dashoffset 1.25s ease-out;
}

svg.radial-progress text {
    fill: #fff;
    text-anchor: middle;
    transform: rotate(0deg);
}
