.module-component-princip .tag {
    color: var(--blue-100);
    padding: var(--spacing-8) var(--spacing-30);
    border-radius: var(--radius-20);
    background: var(--blue-100-10);
    width: fit-content;
}

.module-component-princip .box {
    background:var(--gradient-bg-overlay-2);
    padding: var(--spacing-80) 0;
    padding-bottom: calc(270 * var(--rpx));
    border-radius: var(--radius-20);
}

.module-component-princip .flex .circle{
    position: relative;
}

.module-component-princip .flex .circle svg{
    width: auto;
    height: calc(380 * var(--rpx));
    display: block;
    inset: 0;
    margin: auto;
}

/* Animated line drawing inside the circle */
.module-component-princip .flex .circle .line path.main{
    stroke-dasharray: var(--svg-path-length, 1700);
    stroke-dashoffset: var(--svg-path-length, 1700);
    opacity: 0;
}

.module-component-princip .flex .circle .h-logo{
    position: absolute;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
}

.module-component-princip .flex .circle img{
    width: auto;
    height: calc(230 * var(--rpx));
    margin-top: calc(-110 * var(--rpx));
    pointer-events: none;
}

.module-component-princip .h-text{
    position: absolute;
}

.module-component-princip .inner .h-text:nth-child(1) {
    top: 30%;
    left: -5%;
    text-align: right;
}

.module-component-princip .inner .h-text:nth-child(2) {
    text-align: center;
    bottom: -50%;
}

.module-component-princip .inner .h-text:nth-child(3) {
    right: -1%;
    top: 30%;
}

.module-component-princip .inner .h-text:nth-child(3) h3 {
    color: var(--red-100);
}

.module-component-princip .text p{
    font:var(--font-p1);
    color: var(--text-70);
}

.module-component-princip .text h3{
    color: var(--blue-100);
}

/* Анимация появления номеров синхронизированная с путем */
.module-component-princip .flex .circle .line .number-1,
.module-component-princip .flex .circle .line .number-2,
.module-component-princip .flex .circle .line .number-3,
.module-component-princip .inner[step="1"] .h-text:nth-child(1) h3,
.module-component-princip .inner[step="2"] .h-text:nth-child(2) h3,
.module-component-princip .inner[step="3"] .h-text:nth-child(3) h3 {
    opacity: 0.2;
    transition: opacity 0.6s ease-out;
}

/* Появление номеров по шагам */
.module-component-princip .inner[step="1"] .number-1,
.module-component-princip .inner[step="2"] .number-1,
.module-component-princip .inner[step="3"] .number-1,
.module-component-princip .inner[step="1"] .h-text:nth-child(1) h3,
.module-component-princip .inner[step="2"] .h-text:nth-child(1) h3,
.module-component-princip .inner[step="3"] .h-text:nth-child(1) h3  {
    opacity: 1 !important;
}

.module-component-princip .inner[step="2"] .number-2,
.module-component-princip .inner[step="3"] .number-2,
.module-component-princip .inner[step="2"] .h-text:nth-child(2) h3,
.module-component-princip .inner[step="3"] .h-text:nth-child(2) h3 {
    opacity: 1 !important;
}

.module-component-princip .inner[step="3"] .number-3,
.module-component-princip .inner[step="3"] .h-text:nth-child(3) h3 {
    opacity: 1 !important;
}



@media (max-width: 1023px) {

    .module-component-princip .flex [pc]{
        display: none;
    }

    .module-component-princip .box{
        padding: 60px 12px;
        padding-bottom: 85px;   
    }

    .module-component-princip .top{
        align-items: flex-start;
        gap:24px;
    }

    .module-component-princip .flex {
        max-width: 100%;
        gap: 34px;
    }

    .module-component-princip .flex svg {
        position: unset;
        margin: 0;
    }

    .module-component-princip .flex .h-logo{
        position: relative;
    }

    .module-component-princip .flex img {
        width: 100%;
        height: 271px;
    }

    .module-component-princip .flex h3 {
        font: var(--font-h4);
    }

    .module-component-princip .flex .main{
        gap:15px;
    }

    .module-component-princip .flex .h-logo::after {
        content: '';
        position: absolute;
        inset: 0;
        margin: auto;
        width: 271px;
        height: 271px;
        background: var(--blue-100-80);
        opacity: 0.1;
        z-index: -1;
        border-radius: 100%;
    }

    .module-component-princip .flex .texts .text{
        gap: 15px;
    }

    .module-component-princip .flex .texts .text:not(:last-child){
        margin-bottom: 10px
    }

    .module-component-princip .flex .texts .text br{
        display: none;
    }
}


@media (min-width: 1024px) {
    .module-component-princip [mobile] {
        display: none;
    }
}