.progress-bar-circle {
    position: relative;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg, var(--clr) 0%, var(--clr) 0% var(--i), #A4A4A4 var(--i), #A4A4A4 100%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-background {
    width: 100%;
    height: 100%;
    background-color: #A4A4A4;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
}

.progress-bar {
    width: 100%;
    height: var(--i);
    background-color: var(--clr);
    align-self: end;
    border-radius: 10%;
}

.progress-text {
    position: absolute;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
}