html {
    --x-pct: 0%;
    --x-rem: 0rem;
    /*--x-remm: 0rem;*/
    /*--opac: 0%;*/
}

@media(max-width: 767px) {
    .motto {
        margin-bottom: 1.875rem;
    }

    .title {
        margin-bottom: 3.75rem;
    }

    .section-hero {
        background: var(--argo-stal);
        display: flex;
        flex-direction: column;
        margin: 0 0 6.25rem 0;
        gap: 5rem;
    }

    .section-hero__inner-divider.left {
        padding: 0 2rem 6.25rem 2rem;
        display: flex;
        flex-direction: column;
    }

    .section-hero__motto {
        margin-top: auto;
    }

    .section-hero__title {
        margin-top: -0.1875rem;
        margin-bottom: 2.25rem;
    }

    .section-hero__text {
    }

    .section-hero__button {
    }

    .section-hero__inner-divider.right {
        height: 60rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }
    .section-hero__img {
        width: 100%;
    }
    .section-hero__img__svg {
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: calc(5rem + 1px);
        height: calc(5rem + 1px);
        --color-fill: var(--argo-stal);
    }

    .section-quality {
        display: flex;
        flex-direction: column;
        margin: 0 2rem 6.25rem 2rem;
        gap: 5rem;
    }

    .section-quality__inner-divider {
        min-width: 0;
    }


    .section-quality__inner-divider.right {
        display: flex;
        flex-direction: column;
    }

    .section-quality__inner-divider.left {
        height: 45rem;
    }

    .section-quality__img {
        object-position: center top !important;
    }

    .section-quality__motto {
        margin-top: auto;
    }

    .section-project {
        display: flex;
        flex-direction: column;
        margin: 0 2rem 6.25rem 2rem;
        gap: 5rem;
    }

    .section-project__inner-divider.right {
        height: 45rem;
    }

    .section-project__inner-divider {

    }

    .section-project__inner-divider.left {

    }

    .section-project__motto {

    }

    .section-project__business__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 6rem;
        row-gap: 7.5rem;
        margin: 9.375rem 0 8.125rem 0;
    }

    .section-project__business__grid__flex {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }


    .section-project__business__img {
        width: 70%;
        height: auto;
    }

    .section-project__business__name {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .section-team {
        display: flex;
        flex-direction: column;
        margin: 0 0 10rem 0;
        gap: 5rem;
    }

    .section-team__inner-divider.top {
        height: 31.25rem;
    }
    .section-team__inner-divider.bottom {
        display: flex;
        flex-direction: column;
        margin: 0 2rem 0 2rem;
    }

    .section-certificates {
        margin-top: 10rem;
        display: grid;
        grid-template-columns: 1fr;
    }
    .section-certificates__buttons {
        display: none;
    }
    .section-certificates__certificates-mobile {
        grid-row: 1;
        grid-column: 1;
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 1.375rem;
        padding: 0 calc(calc(100vw - 26rem) / 2) 0 calc(calc(100vw - 26rem) / 2);
    }

    .section-certificates__segment__certificate {
        padding: 5rem 4.25rem 5rem 4.25rem;
        background: var(--argo-jasna-stal);
    }

    .section-certificates__segment__img {
        width: 17.5rem;
        height: auto;
    }

    .section-certificates__segments {
        display: none;
    }
    .section-certificates__points.dynamic {
        display: none;
    }

    .section-certificates__descriptions-mobile {
        grid-row: 2;
        grid-column: 1;
        gap: 2.5rem;
        margin: 5rem 2rem 0 2rem;
        display: grid;
        grid-template-columns: 1fr;
    }
    .section-certificates__segment__subtitle {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .section-certificates__segment__subtitle.active {
        opacity: 1;
    }
    .section-certificates__segment__text {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        text-align: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        margin-bottom: 5rem;
    }
    .section-certificates__segment__text.active {
        opacity: 1;
    }

    .section-certificates__points {
        grid-row: 3;
        grid-column: 1;
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        justify-content: center;
        margin-bottom: 6.25rem;
    }

    .section-certificates__points__svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    .section-certificates__points.static {
        --color-fill: transparent;
        --color-stroke: var(--argo-czarny);
        --stroke-width: 2px;
    }

    .section-certificates__points.mobile-dynamic {
        --color-fill: var(--argo-czarny);
    }

    .section-certificates__points__svg.mobile-dynamic {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .section-certificates__points__svg.mobile-dynamic.active {
        opacity: 1;
    }

    .section-references {
        display: flex;
        flex-direction: column;
        background: var(--argo-błękit);
        padding: 4.25rem 4rem 0 4rem;
        align-items: center;
        text-align: center;
        /*max-height: 90rem;*/
    }
    .section-references__inner-divider.left {
        min-width: 37.5rem;
        aspect-ratio: 1;
        position: relative;
    }

    .section-references__svg {
        position: absolute;
        width: auto;
        aspect-ratio: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;

        --color-fill: transparent;
        --color-stroke: var(--argo-biel);
        --stroke-width: 3px;
    }
    .section-references__img {
        position: absolute;
        z-index: 3;
        width: auto;
        height: 102.33%;
        top: 12%;
        right: 19.33%;
    }

    .section-references__inner-divider.right {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content;
        position: relative;
    }
    .section-references__motto {
        margin-top: 9.5rem;
        grid-row: 1;
        grid-column: 1;
    }

    .section-references__title {
        font-size: 2.5rem;
        line-height: 3.125rem;
        margin-bottom: 2.5rem;
    }

    .section-references__reference {
        grid-column: 1;
        grid-row: 2;
    }

    .section-references__text {
        margin-bottom: 5rem;
    }

    .section-references__sign {
        display: none;
    }

    .section-references__points {
        grid-column: 1;
        grid-row: 3;
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        justify-content: center;
        margin-bottom: 6.25rem;
    }

    .section-references__points__svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    .section-references__points__svg.static {
        --stroke-width: 2px;
        --color-stroke: var(--argo-biel);
        --color-fill: transparent;
    }
    .section-references__points__svg.dynamic {
        --color-stroke: transparent;
        --color-fill: var(--argo-biel);
    }

    .section-references__arrow {
        position: absolute;
        top: 0;
        bottom: 6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        --stroke-width: 1px;
        --color-stroke: var(--argo-biel);
    }
    .section-references__arrow svg {
        height: 3.125rem;
        width: 2rem;
    }
    .section-references__arrow.right {
        right: -2rem;
    }
    .section-references__arrow.left {
        transform: rotateZ(180deg);
        left: -2rem;
    }

    .section-references__button {
        position: absolute;
        width: 6rem;
        cursor: pointer;
        top: 6rem;
        bottom: 6rem;
        border: none;
        background: none;
        color: transparent;
    }
    .section-references__button.right {
        right: -4rem;
    }
    .section-references__button.left {
        left: -4rem;
    }

    .section-references__arrow {
        position: absolute;
        top: 0;
        bottom: 6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        --stroke-width: 0.5px;
        --color-stroke: var(--argo-biel);
    }
    .section-references__arrow svg {
        height: 3.125rem;
        width: 2rem;
    }
    .section-references__arrow.right {
        right: -2rem;
    }
    .section-references__arrow.left {
        transform: rotateZ(180deg);
        left: -2rem;
    }
}

@media(min-width: 768px) {
    .motto {
        margin-bottom: 2.125rem;
    }

    .title {
        margin-bottom: 2.5rem;
    }

    .section-hero {
        background: var(--argo-stal);
        display: flex;
        flex-direction: row-reverse;
        margin: 0 1.875rem 7.5rem 1.875rem;
        height: 55rem;
    }

    .section-hero__inner-divider.left {
        padding: 0 21.1vw 7.5rem 4.95vw;
        display: flex;
        flex-direction: column;
    }

    .section-hero__motto {
        margin-top: auto;
    }

    .section-hero__title {
        margin-top: -0.1875rem;
        margin-bottom: 2.25rem;
    }

    .section-hero__text {
    }

    .section-hero__button {
    }

    .section-hero__inner-divider.right {
        min-width: 32.8125vw;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }
    .section-hero__img {
        height: 100%;
    }
    .section-hero__img__svg {
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: calc(5rem + 1px);
        height: calc(5rem + 1px);
        --color-fill: var(--argo-biel);
    }

    .section-quality {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0 1.875rem 7.5rem 1.875rem;
        height: 46.875rem;
        gap: 9.89vw;
    }

    .section-quality__inner-divider {
        min-width: 0;
    }


    .section-quality__inner-divider.right {
        display: flex;
        flex-direction: column;
        margin: 0 calc(11.46vw - 1.875rem) 5.2vw 0;
    }

    .section-quality__inner-divider.left {

    }

    .section-quality__motto {
        margin-top: auto;
    }

    .section-project {
        display: grid;
        grid-template-columns: 1fr 1fr;
        direction: rtl;
        margin: 0 1.875rem 7.5rem 1.875rem;
        gap: 9.89vw;
    }

    .section-project__inner-divider {
        direction: ltr;
        min-width: 0;
    }

    .section-project__inner-divider.left {
        display: flex;
        flex-direction: column;
        margin: 0 0 5.2vw calc(6.25vw - 1.875rem);
    }

    .section-project__motto {
        margin-top: auto;
    }

    .section-project__business__grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
        margin: 5rem 0 5rem 0;
        align-items: flex-start;
    }


    .section-project__business__grid__flex {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .section-project__business__img {
        width: 9rem;
        height: auto;
    }

    .section-project__business__name {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .section-team {
        display: flex;
        flex-direction: column;
        margin: 0 1.875rem 10.625rem 1.875rem;
        gap: 3.75rem;
    }

    .section-team__inner-divider.top {
        height: 55rem;
    }
    .section-team__inner-divider.bottom {
        display: flex;
        flex-direction: column;
    }

    .section-certificates {
        display: flex;
        margin: 0 1.875rem 6.25rem 1.875rem;
        position: relative;
    }

    .section-certificates__segments {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.875rem;
    }

    .section-certificates__certificates-mobile {
        display: none;
    }

    .section-certificates__segment {
        grid-column: 2;
        grid-row: 1;
        transform: translateX(calc(var(--x-pct) + var(--x-rem)));
    }

    .section-certificates__segment__certificate {
        background: var(--argo-jasna-stal);
        position: relative;
        aspect-ratio: 60 / 75;
    }

    .section-certificates__segment__img-wrapper {
        position: absolute;
        inset: 4.6875vw;
    }
    .section-certificates__segment__img {
        width: 100%;
        height: 100%;
    }
    .section-certificates__segment__subtitle {
        margin-top: 2.5rem;
        margin-bottom: 2rem;
    }
    .section-certificates__segment__text {
        margin-bottom: 6.25rem;
    }

    .section-certificates__points {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.3125rem;

        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        justify-content: center;
    }

    .section-certificates__points.mobile-dynamic {
        display: none;
    }

    .section-certificates__points__svg {
        width: 1rem;
        height: 1rem;
    }

    .section-certificates__points__svg.static {
        --stroke-width: 2px;
        --color-stroke: var(--argo-czarny);
        --color-fill: transparent;
    }
    .section-certificates__points__svg.dynamic {
        --color-stroke: transparent;
        --color-fill: var(--argo-czarny);
    }
    .section-certificates__descriptions-mobile {
        display: none;
    }

    .section-certificates__buttons {
        position: absolute;
        bottom: 0.03125rem;
        display: flex;
        align-items: flex-end;
        --stroke-width: 1px;
        --color-stroke: var(--argo-czarny);
        cursor: pointer;
        width: 4rem;
        height: 4rem;
        transition: transform 0.2s ease;
    }
    .section-certificates__buttons:active {
        transform: scale(1.1);
    }
    .section-certificates__buttons.right {
        justify-content: flex-end;
        right: 0;
    }
    .section-certificates__buttons.left {
        justify-content: flex-start;
        left: 0;
    }

    .section-certificates__buttons__svg {
        width: 1.6675rem;
        height: 1.5625rem;
    }


    .section-certificates__buttons__svg.right {
        transform: rotateZ(180deg);
    }
    .section-certificates__buttons__svg.left {
    }


    .section-references {
        display: flex;
        flex-direction: row;
        background: var(--argo-błękit);
        padding: 2.25rem 5.2vw 4.875rem 5.21vw;
        gap: 16.40625vw;
    }
    .section-references__inner-divider.left {
        min-width: 35rem;
        aspect-ratio: 1;
        position: relative;
    }

    .section-references__svg {
        position: absolute;
        width: 35rem;
        aspect-ratio: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;

        --color-fill: transparent;
        --color-stroke: var(--argo-biel);
        --stroke-width: 2px;
    }
    .section-references__img {
	position: absolute;
    	z-index: 3;
    	width: auto;
    	height: 31.25rem;
    	top: 2.625rem;
    	left: 6.5rem;    
    }

    .section-references__shadow {
        position: absolute;
        z-index: 2;
        top: 23rem;
        left: 8.9rem;
        width: 19rem;
        height: 15rem;

        transform: scaleY(56%) scale(104%);
    }

    .section-references__inner-divider.right {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: min-content;
        position: relative;

    }
    .section-references__motto {
        margin-top: 7.125rem;
    }
    .section-references__title {
        min-height: 6.5rem;
        margin-bottom: 2rem;
    }
    .section-references__text {
    	margin-bottom: 1.25rem;
    }

    .section-references__reference {
        display: flex;
        flex-direction: column;
        gap: 0;
        grid-row: 2;
        grid-column: 1;
    }

    .section-references__points__svg {
        width: 1rem;
        height: 1rem;
    }

    .section-references__points {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 1.375rem;
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        justify-content: center;
    }

    .section-references__points__svg.static {
        --stroke-width: 2px;
        --color-stroke: var(--argo-biel);
        --color-fill: transparent;
    }
    .section-references__points__svg.dynamic {
        --color-stroke: transparent;
        --color-fill: var(--argo-biel);
    }

    .section-references__button {
        position: absolute;
        width: 6rem;
        cursor: pointer;
        top: 6rem;
        bottom: 6rem;
        border: none;
        background: none;
        color: transparent;
    }
    .section-references__button.right {
        right: -5rem;
    }
    .section-references__button.left {
        left: -5rem;
    }

    .section-references__arrow {
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.875rem;
        --stroke-width: 1px;
        --color-stroke: var(--argo-biel);
    }
    .section-references__arrow svg {
        height: 1.5625rem;
        width: 0.875rem;
    }
    .section-references__arrow.right {
        right: calc(-5.2vw + 1.875rem);
    }
    .section-references__arrow.left {
        transform: rotateZ(180deg);
        left: calc(-5.2vw + 1.875rem);
    }

    .section-references__button {
        position: absolute;
        width: 6rem;
        cursor: pointer;
        top: 6rem;
        bottom: 6rem;
        border: none;
        background: none;
        color: transparent;
    }
    .section-references__button.right {
        right: -5rem;
    }
    .section-references__button.left {
        left: -5rem;
    }

    .section-references__arrow {
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.875rem;
        --stroke-width: 1px;
        --color-stroke: var(--argo-czarny);
    }
    .section-references__arrow svg {
        height: 1.5625rem;
        width: 0.875rem;
    }
    .section-references__arrow.right {
        right: calc(-5.2vw + 1.875rem);
    }
    .section-references__arrow.left {
        transform: rotateZ(180deg);
        left: calc(-5.2vw + 1.875rem);
    }
}