/* ============================================
   NATURA STEP ORBIT NUMBER
   декоративный круг с цифрой и двумя точками
   точки всегда напротив друг друга
   угол точек меняется через --orbit-rotate
   ============================================ */

.natura-step-orbit {
    --orbit-size: 60px;
    --dot-size: 6px;
    --orbit-border: 1px;
    --orbit-color: #4E5B3133;
    --dot-color: #D5D3C6;
    --orbit-rotate: 25deg;

    position: relative;
    width: var(--orbit-size);
    height: var(--orbit-size);
    border: var(--orbit-border) solid var(--orbit-color);
    border-radius: 50%;
    transform: rotate(var(--orbit-rotate));

    display: flex;
    align-items: center;
    justify-content: center;
}

.natura-step-orbit::before,
.natura-step-orbit::after {
    content: "";
    position: absolute;
    left: 50%;
    width: var(--dot-size);
    height: var(--dot-size);
    background: var(--dot-color);
    border-radius: 50%;
    transform: translateX(-50%);
}

.natura-step-orbit::before {
    top: calc(var(--dot-size) / -2);
}

.natura-step-orbit::after {
    bottom: calc(var(--dot-size) / -2);
}

.natura-step-orbit__num {
    font-size: 32px;
    line-height: 1;
    color: #4E5B31;
    font-weight: 500;
    transform: rotate(calc(var(--orbit-rotate) * -1));
    display: inline-block;
}