*::-webkit-scrollbar {
    display: none;
}

* {
    scrollbar-width: none;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}


/* ========================================================== */

@font-face {
    font-family: IntroRust;
    src: url("/fonts/IntroRust/Commercial/OTF/IntroHeadR-Base.otf");
}


/* People desc */

.dofinansowanie {
    counter-reset: step;
    margin: 6em;
    margin-bottom: 0;
    display: flex;
    flex-flow: column;
    gap: 2em;
}


/* header */

.dofinansowanie-header {
    display: flex;
    flex-flow: column;
    align-self: flex-start;
    gap: 1em;
}

.dofinansowanie-header h1 {
    font-size: 3.4em;
    font-weight: var(--font-medium);
    margin: 0;
}

.dofinansowanie-header hr {
    margin: 0 0 1em 1.5em;
    width: 14.3em;
    border: 1px solid var(--text-color);
    opacity: 70%;
}

.dofinansowanie-desc {
    font-size: 0.85em;
}

.dofinansowanie-steps {
    align-self: center;
    margin: auto;
    width: auto;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 4em;
    margin-bottom: 20em;
}

.dofinansowanie-steps h1 {
    align-self: center;
    font-weight: var(--font-medium);
}

.dofinansowanie-step {
    counter-increment: step;
    padding: 1em;
    padding-left: 9em;
    padding-right: 3em;
    width: auto;
    height: 4em;
    background: var(--dofi-gradient);
    border-radius: 100px;
    color: white;
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
}

.dofinansowanie-step::after {
    position: absolute;
    z-index: 1;
    top: 6px;
    left: 6px;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 100px;
    opacity: 0.18;
    background: var(--dofi-gradient);
}

.dofinansowanie-style {
    position: absolute;
    z-index: 2;
    top: -20%;
    left: -2%;
    height: 120%;
    aspect-ratio: 1/1;
}

.dofinansowanie-style::after {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: counter(step, decimal-leading-zero);
    font-family: IntroRust;
    font-weight: var(--font-bold);
    color: var(--text-color-blue);
    text-shadow: 0.05em 0.05em var(--text-shadow-color);
    font-size: 3.26em;
    border-radius: 100%;
    background-color: var(--dofi-step-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dofinansowanie-style .ring1 {
    position: absolute;
    z-index: 4;
    width: 108%;
    aspect-ratio: 1/1;
    top: -5%;
    left: -5%;
    bottom: -5%;
    right: -5%;
}

.dofinansowanie-style .ring2 {
    position: absolute;
    z-index: 2;
    width: 130%;
    aspect-ratio: 568/440;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: translateX(-1em) rotateZ(-30deg) translateX(0.2em) translateY(-0.4em);
}

.dofinansowanie-style .steps {
    position: absolute;
    z-index: 1;
    width: 25%;
    aspect-ratio: 24/41;
}

.dofinansowanie-step.right {
    margin-left: 10em;
}

.dofinansowanie-step.right .dofinansowanie-style .steps {
    top: 100%;
    left: 60%;
    transform: rotateZ(-45deg);
}

.dofinansowanie-step.left {
    margin-left: 16em;
}

.dofinansowanie-step.left .dofinansowanie-style .steps {
    top: 80%;
    left: -35%;
    transform: rotateZ(45deg);
}


/* media quieries */

@media (min-width: 799px) and (max-width: 1200px) {
    .dofinansowanie {
        margin: 3em;
        font-size: 0.66em;
    }
    .dofinansowanie-step.right {
        margin-left: 7em;
    }
    .dofinansowanie-step.left {
        margin-left: 11.2em;
    }
}

@media (max-width: 800px) {
    .dofinansowanie {
        margin: 0.5em;
        font-size: 0.33em;
    }
    .dofinansowanie-step.right {
        margin-left: 4em;
    }
    .dofinansowanie-step.left {
        margin-left: 6em;
    }
}