@media screen {

    .locomotive__text-arrow__back {
        margin-right: 28px;
    }

    .locomotive__text-arrow__forward {
        margin-left: 28px;
    }

    .locomotive__text-arrow svg {
        width: 10px;
        height: 32px;
    }

    .locomotive__text-arrow:not(.locomotive__text-arrow__disabled) {
        cursor: pointer;
    }


    .cycle_b2c .title-header:not(:last-child) {
        margin-bottom: -130px;
    }

    .locomotive__background-container  {
        pointer-events: none;
    }

    .locomotive__circle svg.step-icon {
        pointer-events: all;
    }

    .locomotive__circle svg.step-icon * {
        pointer-events: none;
    }

    .locomotive__text {
        /* pointer-events: none !important; */
        /* cursor: pointer; */
    }

    /* .main-circle svg .path {
         stroke: #2ecc71;
         stroke-width: 2;
         fill: none;
         stroke-dasharray: 650;
         stroke-dashoffset: 650;
         transform: scale(1);
         transform-origin: center;
         -webkit-animation: fill 2s linear forwards;
         animation: fill 2s linear forwards;
    }
     */
    .nw-circle {
        position: absolute;
        background: red;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
        z-index: 1000;
    }
    /* .locomotive {
        min-height: 100vh;
    } */

    .locomotive.horizontal-scroll {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    .locomotive .horizontal-panel {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        justify-content: space-between;
        min-width: 20vw;
        min-height: 20vh;
    }
    .locomotive .horizontal-panel div {
        width: 20vw;
    }

    .locomotive .horizontal-panel.a div {
        width: 20vw;
    }

    .after-circle {
        position: absolute;
        left: 0;
        top: 0;
        stroke: #24a871;
        stroke-width: 4;
        stroke-dasharray: 3333 3333;
        transform: rotate(270deg);
        stroke-dashoffset: 3333;
        width: 34.6875vw;
        height: 34.6875vw;
    }
    .dots-circle {
        position: absolute;
        left: 0;
        top: -0.78125vw;
        width: 34.6875vw;
        height: 35.4166666667vw;
    }
    .circle-inner-1 {
        position: absolute;
        left: 1.5625vw;
        /* opacity: 0 !important; */
        visibility: hidden;
        top: 1.5625vw;
        animation: pulseCircle1 7s infinite;
        width: 31.3541666667vw;
        height: 31.3541666667vw;
    }
    .circle-inner-2 {
        position: absolute;
        left: 3.75vw;
        /* opacity: 0 !important; */
        visibility: hidden;
        top: 3.9583333333vw;
        animation: pulseCircle2 7s infinite;
        width: 26.875vw;
        height: 26.875vw;
    }
    .locomotive[data-step='0'] .circle-inner-1, .locomotive[data-step='0'] .circle-inner-2 {
        opacity: 1 !important;
        visibility: visible;
    }
    .main-circle[data-step=0] svg .path {
                                  stroke: #2ecc71;
                                  stroke-width: 2;
                                  fill: none;

                                  transform: scale(1);
                                  transform-origin: center;

                              }
    .w-container {
        width: 100%;
        max-width: 93.0208333333vw;
        margin: 0 auto;
        padding: 0 1.5625vw;
    }
    .locomotive__container {
        position: relative;
        z-index: 1000;
        width: 100% !important;
        min-width: 100%;
        min-height: 100%;
        /* height: 5.2083333333vw !important; */
        /* background-color: red;
         */
        display: flex;
    }
    .locomotive__container {
        height: 42.1875vw;
        /* border: 1vw/$a+vw solid red;
         */
        position: relative;
        z-index: 2;
        padding: 0 !important;
        overflow: hidden !important;
    }
    .locomotive__inner {
        display: flex;
        position: relative;
        /* border: 1vw/$a+vw solid red;
         */
        margin-bottom: 3.4895833333vw;
        width: 100%;
        /* margin-top: auto; */
        height: 42.1875vw;
    }
    .locomotive__background-container {
        /* margin-top: auto !important;
         */
        /* margin-bottom: 67vw/$a+vw;
         */
        display: flex;
        position: relative;
        width: 100%;
        padding: 0 !important;
    }
    .locomotive__background {
        height: 100%;
        min-width: 100%;
        width: 100% !important;
        min-height: 100%;
        /* max-width: 1786vw/$a+vw;
         */
        /* max-height: 810vw/$a+vw;
         */
        position: relative;
        overflow: hidden;
        border-radius: 0.5208333333vw;
        background: linear-gradient(95.37deg, #fff -10.22%, #d8ebf1 55.11%, #c6e8f0 101.93%);
    }
    .locomotive__circle {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1005;
        top: 4.53125vw;
        left: 4.375vw;
    }
    .locomotive__circle .before-circle {
        opacity: 0.3;
    }
    .locomotive[data-step='1'] .locomotive__circle .after-circle {


    }
    .step-icon {
        position: absolute;
        opacity: 1;
        visibility: visible;
        visibility: visible;
        z-index: 1040;
        transform: scale(0.5);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
        width: 4.4791666667vw;
        height: 4.4791666667vw;
        /* cursor: pointer; */
    }
    .step-icon-1 {
        top: -2.0833333333vw;
        left: 14.9479166667vw;
    }
    .step-icon-2 {
        top: 10.4166666667vw;
        left: 31.5625vw;
    }
    .step-icon-3 {
        top: 28.125vw;
        left: 26.25vw;
    }
    .step-icon-4 {
        left: 4.1666666667vw;
        top: 28.125vw;
    }
    .step-icon-5 {
        top: 10.4166666667vw;
        left: -1.40625vw;
    }
    .locomotive[data-step='1'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-4 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-4 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-4 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-5 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-5 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    @keyframes showStepIcon {
        from {
            transform: scale(0.5);
            opacity: 0;
        visibility: hidden;
        }
        70% {
            transform: scale(1.1);
            opacity: 1;
        visibility: visible;
        }
        to {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
    }
    @keyframes pulseCircle1 {
        from {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
        50% {
            transform: scale(0.95);
            opacity: 0.9;
        }
        to {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
    }
    @keyframes pulseCircle2 {
        from {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
        50% {
            transform: scale(0.95);
            opacity: 0.9;
        }
        to {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
    }
    .locomotive__text {
        opacity: 0;
        visibility: hidden;
        transform: translateY(1.5625vw);
        transition: 0.4s;
        position: absolute;
        z-index: 1050;
        left: 7.03125vw;
        top: 9.333333333vw;
        width: 29.1666666667vw;
    }
    .locomotive__text-h2 {
        font-style: normal;
        font-weight: 700;
        font-size: 4.6875vw;
        line-height: 5.46875vw;
        text-align: center;
        margin-bottom: 0.7291666667vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .locomotive__text-h3 {
        font-style: normal;
        font-weight: 700;
        font-size: 2.0833333333vw;
        line-height: 2.4479166667vw;
        text-align: center;
        color: #099;
    }
    .locomotive__text-p {
        font-weight: 400;
        font-size: 1.25vw;
        line-height: 1.4583333333vw;
        text-align: center;
        margin-top: 1.7708333333vw;
    }
    .arrow-to-scroll {
        height: 2.8234375vw;
        margin-top: 2.1875vw;
        width: 30vw;
    }
    .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive .locomotive__text-p {
        transform: translateY(1.5625vw);
        /* opacity: 1;
        visibility: visible; */
        transition: 0.6s;
    }
    .locomotive[data-step='99'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='0'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='1'] .locomotive__text[data-info="1"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='2'] .locomotive__text[data-info="2"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='3'] .locomotive__text[data-info="3"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='4'] .locomotive__text[data-info="4"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='5'] .locomotive__text[data-info="5"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='6'] .locomotive__text[data-info="6"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='99'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
        margin-top: 5vw;
    }
    .locomotive[data-step='0'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
        */
        margin-top: 6vw;
    }
    .locomotive[data-step='1'] .locomotive__text[data-info="0"] {
        transform: translateY(-1.5625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         margin-top: 5vw;
         */

    }
    .locomotive[data-step='1'] .locomotive__text[data-info="1"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .locomotive__text[data-info="2"] {
        transform: translateY(-1.5625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .locomotive__text[data-info="2"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .locomotive__text[data-info="2"] {
        transform: translateY(-1.5625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .locomotive__text[data-info="3"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .locomotive__text[data-info="3"] {
        transform: translateY(-1.5625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .locomotive__text[data-info="4"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .locomotive__text[data-info="4"] {
        transform: translateY(-1.5625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .locomotive__text[data-info="5"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .locomotive__text[data-info="5"] {
        transform: translateY(-1.5625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .locomotive__text[data-info="6"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        margin-top: 2vw;
    }
    .locomotive .locomotive__step {
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
        transform: translateY(3.6458333333vw);
    }
    .recycling__image-box.recycling__image-box--1 {
        position: absolute;
        right: 48.2291666667vw;
        bottom: -32.0833333333vw;
        z-index: 9000;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
    }
    .recycling__image-box--1 .recycling__image {
        width: 27.333333333299997vw;
        height: 49.8125vw;
    }
    .recycling__image-box.recycling__image-box--2 {
        position: absolute;
        right: 21.1458333333vw;
        bottom: -5.8854166667vw;
        z-index: 9000;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
    }
    .recycling__image-box--2 .recycling__image {
        width: 28.59375vw;
        height: 64.7916666667vw;
    }
    .recycling__image-box.recycling__image-box--3 {
        position: absolute;
        right: 29.8958333333vw;
        bottom: -8.3333333333vw;
        z-index: 9000;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
    }
    .recycling__image-box--3 .recycling__image {
        width: 19.0625vw;
        height: 20.15625vw;
    }
    .locomotive[data-step='99'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='99'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='0'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='1'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='2'] .locomotive__step[data-info="0"] {
        transform: translateY(-5.2083333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--4 {
        position: absolute;
        right: 49.1145833333vw;
        bottom: 2.3958333333vw;
        z-index: 9000;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
    }
    .recycling__image-box--4 .recycling__image {
        width: 62.5vw;
        height: 65.46875vw;
    }
    .locomotive[data-step='2'] .locomotive__step[data-info="2"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .locomotive__step[data-info="2"] {
        transform: translateY(-5.2083333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--5 {
        position: absolute;
        right: 49.5416666667vw;
        bottom: -4.4270833333vw;
        z-index: 9000;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
    }
    .recycling__image-box--5 .recycling__image {
        width: 44vw;
        height: 51.7083333333vw;
    }
    .recycling__image-box.recycling__image-box--6 {
        position: absolute;
        right: 42.5833333333vw;
        bottom: -5.166666666699999vw;
        z-index: 9000;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
    }
    .recycling__image-box--6 .recycling__image {
        width: 57.01041699999999vw;
        height: 55.96875vw;
    }
    .locomotive[data-step='3'] .locomotive__step[data-info="3"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .locomotive__step[data-info="3"] {
        transform: translateY(-5.2083333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--7 {
        position: absolute;
        right: 32.8645833333vw;
        bottom: -40vw;
        z-index: 9000;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
    }
    .recycling__image-box--7 .recycling__image {
        width: 19.53125vw;
        height: 7.9166666667vw;
    }
    .recycling__image-box.recycling__image-box--8 {
        position: absolute;
        right: 45.78125vw;
        bottom: -4.041667vw;
        z-index: 9000;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
    }
    .recycling__image-box--8 .recycling__image {
        width: 50.5729166667vw;
        height: 40.09375vw;
    }
    .recycling__image-box.recycling__image-box--9 {
        position: absolute;
        right: 43.572917vw;
        bottom: -4.90625vw;
        z-index: 9000;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
    }
    .recycling__image-box--9 .recycling__image {
        width: 39.572917vw;
        height: 37.09375vw;
    }
    .locomotive[data-step='4'] .locomotive__step[data-info="4"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .locomotive__step[data-info="4"] {
        transform: translateY(-5.2083333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--10 {
        position: absolute;
        right: 48.2291666667vw;
        bottom: 0;
        z-index: 9000;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
    }
    .recycling__image-box--10 .recycling__image {
        width: 59.21875vw;
        height: 47.6041666667vw;
    }
    .locomotive[data-step='5'] .locomotive__step[data-info="5"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .locomotive__step[data-info="5"] {
        transform: translateY(-5.2083333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--11 {
        position: absolute;
        right: 35.3645833333vw;
        bottom: -13.6458333333vw;
        z-index: 9000;
        width: 5.2083333333vw;
        height: 5.2083333333vw;
    }
    .recycling__image-box--11 .recycling__image {
        width: 46.9270833333vw;
        height: 35.0520833333vw;
    }
    .locomotive[data-step='6'] .locomotive__step[data-info="6"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
}

.arrow-to-scroll.arrow-to-scroll-mobile {
    display: flex;
    width: 72vw;
    height: 14.25vw;
    display: none;
}

@media screen and (min-width: 1279px) {
    .cycle_b2c {
        margin-bottom: 50px;
    }
}


@media (max-width: 1090px) {
    /* .main-circle svg .path {
         stroke: #2ecc71;
         stroke-width: 2;
         fill: none;
         stroke-dasharray: 650;
         stroke-dashoffset: 650;
         transform: scale(1);
         transform-origin: center;
         -webkit-animation: fill 2s linear forwards;
         animation: fill 2s linear forwards;
    }
     */
    .locomotive.horizontal-scroll {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    .locomotive .horizontal-panel {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        justify-content: space-between;
        min-width: 20vw;
        min-height: 20vh;
    }
    .locomotive .horizontal-panel div {
        width: 20vw;
    }
    .after-circle {
        position: absolute;
        left: 0vw;
        top: -0.99125vw;
        stroke: #24a871;
        stroke-width: 6;
        stroke-dasharray: 3333 3333;
        transform: rotate(270deg);
        stroke-dashoffset: 3333;
        width: 57.8125vw;
        height: 57.8125vw;
    }
    .dots-circle {
        position: absolute;
        left: 0;
        top: -1.953125vw;
        width: 57.8125vw;
        height: 58.8541666667vw;
    }
    .circle-inner-1 {
        position: absolute;
        left: 2.9947916667vw;
        /* opacity: 0 !important; */
        visibility: hidden;
        top: 1.953125vw;
        animation: pulseCircle1 7s infinite;
        width: 52.0833333333vw;
        height: 52.0833333333vw;
    }
    .circle-inner-2 {
        position: absolute;
        left: 7.1614583333vw;
        /* opacity: 0 !important; */
        visibility: hidden;
        top: 6.25vw;
        animation: pulseCircle2 7s infinite;
        width: 44.53125vw;
        height: 44.53125vw;
    }
    .locomotive[data-step='0'] .circle-inner-1, .locomotive[data-step='0'] .circle-inner-2 {
        opacity: 1 !important;
        visibility: visible;
    }
    .main-circle[data-step=0] svg .path {
                                  stroke: #2ecc71;
                                  stroke-width: 2;
                                  fill: none;
                                  stroke-dasharray: 650;
                                  stroke-dashoffset: 650;
                                  transform: scale(1);
                                  transform-origin: center;
                                  stroke-dashoffset: 0;
                              }
    .w-container {
        width: 100%;
        max-width: 232.5520833333vw;
        margin: 0 auto;
        padding: 0 3.90625vw;
    }
    .locomotive__container {
        position: relative;
        z-index: 1000;
        width: 100% !important;
        min-width: 100%;
        min-height: 100%;
        height: 1024px !important;
        /* background-color: red;
         */
        display: flex;
    }
    .locomotive__container {
        height: 105.46875vw;
        /* border: 1vw/$a+vw solid red;
         */
        position: relative;
        z-index: 2000;
        padding: 0 !important;
        overflow: hidden !important;
    }
    .locomotive__inner {
        display: flex;
        position: relative;
        /* border: 1vw/$a+vw solid red;
         */
        margin-bottom: 3.3854166667vw;
        width: 100%;
        /* margin-top: auto; */
        height: 93vh;
    }
    .locomotive__background-container {
        /* margin-top: auto !important;
         */
        /* margin-bottom: 67vw/$a+vw;
         */
        display: flex;
        position: relative;
        height: 71.48435vw;
        padding: 0 !important;
        height: 470px;
    }

    .locomotive__circle {
        position: absolute;
        z-index: 1005;
        top: 412px;
        left: 15.275vw;
        /* top: 67.942708vw;
        left: 16.927083vw; */
        /* bottom: 436vw/$a+vw;
        */
    }
    .locomotive__circle .before-circle {
        opacity: 0.3;
    }

    .step-icon {
        position: absolute;
        opacity: 1;
        visibility: visible;
        z-index: 1040;
        transform: scale(0.5);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .step-icon-1 {
        top: -2.8041666667vw;
        left: 26.5625vw;
    }
    .step-icon-2 {
        top: 18.6197916667vw;
        left: 54.2875vw;
    }
    .step-icon-3 {
        top: 47.7864583333vw;
        left: 45.4427083333vw;
    }
    .step-icon-4 {
        left: 8.84375vw;
        top: 48.3375vw;
    }
    .step-icon-5 {
        top: 18.4895833333vw;
        left: -1.1510416667vw;
    }



    .locomotive[data-step='1'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-4 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-4 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-4 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-5 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-5 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    @keyframes showStepIcon {
        from {
            transform: scale(0.5);
            opacity: 0;
        visibility: hidden;
        }
        70% {
            transform: scale(1.1);
            opacity: 1;
        visibility: visible;
        }
        to {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
    }
    @keyframes pulseCircle1 {
        from {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
        50% {
            transform: scale(0.95);
            opacity: 0.9;
        }
        to {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
    }
    @keyframes pulseCircle2 {
        from {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
        50% {
            transform: scale(0.95);
            opacity: 0.9;
        }
        to {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
    }
    .locomotive__text {
        opacity: 0;
        visibility: hidden;
        transform: translateY(3.90625vw);
        transition: 0.4s;
        position: absolute;
        z-index: 1050;
        left: 24vw;
        top: 52vw;
        width: 40vw;
        /* background: red; */
    }
    .locomotive__text-h2 {
        font-weight: 700;
        font-size: 7.8125vw;
        line-height: 9.1145833333vw;
    }
    .locomotive__text-h3 {
        font-weight: 700;
        font-size: 3.4722265625vw;
        line-height: 4.0364583333vw;
    }
    .locomotive__text-p {
        font-weight: 400;
        font-size: 2.0833333333vw;
        line-height: 2.4739583333vw;
        text-align: center;
    }
    .arrow-to-scroll {
        height: 4.7057291667vw;
        margin-top: 3.6458333333vw;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 72vw;
        height: 10vw;
        position: relative;
        left: -15.5vw;
    }
    .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive .locomotive__text-p {
        transform: translateY(3.90625vw);
        /* opacity: 1;
        visibility: visible; */
        transition: 0.6s;
    }
    .locomotive[data-step='99'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='0'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='1'] .locomotive__text[data-info="1"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='2'] .locomotive__text[data-info="2"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='3'] .locomotive__text[data-info="3"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='4'] .locomotive__text[data-info="4"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='5'] .locomotive__text[data-info="5"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='6'] .locomotive__text[data-info="6"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='99'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='0'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
        */
        margin-top: 37px;
    }
    .locomotive[data-step='1'] .locomotive__text[data-info="0"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='1'] .locomotive__text[data-info="1"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .locomotive__text[data-info="2"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .locomotive__text[data-info="2"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .locomotive__text[data-info="2"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .locomotive__text[data-info="3"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .locomotive__text[data-info="3"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .locomotive__text[data-info="4"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .locomotive__text[data-info="4"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .locomotive__text[data-info="5"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .locomotive__text[data-info="5"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .locomotive__text[data-info="6"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /*margin-top: 35px;*/
    }
    .locomotive .locomotive__step {
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
        transform: translateY(9.1145833333vw);
    }
    .recycling__image-box.recycling__image-box--1 {
        position: absolute;
        right: 78.515625vw;
        bottom: -58.4635416667vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--1 .recycling__image {
        width: 48.3541666667vw;
        height: 69.3580729167vw;
    }
    .recycling__image-box.recycling__image-box--2 {
        position: absolute;
        right: 30.2083333333vw;
        bottom: -21.09375vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--2 .recycling__image {
        width: 41.4791666667vw;
        height: 93.98828125vw;
    }
    .recycling__image-box.recycling__image-box--3 {
        position: absolute;
        right: 40.625vw;
        bottom: -22.7864583333vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--3 .recycling__image {
        width: 27.65234375vw;
        height: 29.2395833333vw;
    }
    .locomotive[data-step='99'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='99'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='0'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='1'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='2'] .locomotive__step[data-info="0"] {
        transform: translateY(-13.0208333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--4 {
        position: absolute;
        right: 67.96875vw;
        bottom: -2.4739583333vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--4 .recycling__image {
        width: 90.6640625vw;
        height: 94.9700520833vw;
    }
    .locomotive[data-step='2'] .locomotive__step[data-info="2"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .locomotive__step[data-info="2"] {
        transform: translateY(-13.0208333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--5 {
        position: absolute;
        right: 56.5104166667vw;
        bottom: -22.1354166667vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--5 .recycling__image {
        width: 58.0247395833vw;
        height: 61.953125vw;
    }
    .recycling__image-box.recycling__image-box--6 {
        position: absolute;
        right: 53.90625vw;
        bottom: -33.203125vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--6 .recycling__image {
        width: 83.3333333333vw;
        height: 65.3645833333vw;
    }
    .locomotive[data-step='3'] .locomotive__step[data-info="3"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .locomotive__step[data-info="3"] {
        transform: translateY(-13.0208333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--7 {
        position: absolute;
        right: 44.0104166667vw;
        bottom: -73.6979166667vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--7 .recycling__image {
        width: 28.33203125vw;
        height: 11.484375vw;
    }
    .recycling__image-box.recycling__image-box--8 {
        position: absolute;
        right: 60.546875vw;
        bottom: 7.2916666667vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--8 .recycling__image {
        width: 72.1536458333vw;
        height: 89.9075520833vw;
    }
    .recycling__image-box.recycling__image-box--9 {
        position: absolute;
        right: 55.2083333333vw;
        bottom: 23.3072916667vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--9 .recycling__image {
        width: 73.3619791667vw;
        height: 103.1302083333vw;
    }
    .locomotive[data-step='4'] .locomotive__step[data-info="4"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .locomotive__step[data-info="4"] {
        transform: translateY(-13.0208333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--10 {
        position: absolute;
        right: 71.7447916667vw;
        bottom: -11.0677083333vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--10 .recycling__image {
        width: 90.3255208333vw;
        height: 73.9765625vw;
    }
    .locomotive[data-step='5'] .locomotive__step[data-info="5"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .locomotive__step[data-info="5"] {
        transform: translateY(-13.0208333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--11 {
        position: absolute;
        right: 69.7916666667vw;
        bottom: -15.625vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--11 .recycling__image {
        width: 88.671875vw;
        height: 70.8203125vw;
    }
    .locomotive[data-step='6'] .locomotive__step[data-info="6"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
}

.cycle_b2c {
    background: linear-gradient(180deg, #fff -10.22%, #d8ebf1 75.11%, #c6e8f0 101.93%);
}

@media (max-width: 1090px) and (min-width: 446px) {
    .locomotive__background {
        height: 100%;
        min-width: 100%;
        width: 100% !important;
        min-height: 100%;
        transform: scale(0.93) translateY(-55px);
        position: relative;
        overflow: hidden;
        border-radius: 1.3020833333vw;
        background: linear-gradient(95.37deg, #fff -10.22%, #d8ebf1 55.11%, #c6e8f0 101.93%);
    }
}

@media (max-width: 780px) {
    .locomotive__text {
        top: 65vw;
    }
}

@media (max-width: 700px) {
    .locomotive__text {
        top: 75vw;
    }
}

@media (max-width: 600px) {

    .locomotive__container {
        height: 666px !important;
    }

    .locomotive__background-container {
        height: 260px;
    }

    .locomotive__circle {
        top: 260px;
    }
    .locomotive__text {
        top: 55vw;
    }
}

@media (max-width: 445px) {
    .locomotive.horizontal-scroll {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    .locomotive .horizontal-panel {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        justify-content: space-between;
        min-width: 20vw;
        min-height: 20vh;
    }
    .locomotive .horizontal-panel div {
        width: 20vw;
    }
    .after-circle {
        position: absolute;
        left: 1vw;
        top: 1.5vw;
        stroke: #24a871;
        stroke-width: 4;
        stroke-dasharray: 3333 3333;
        transform: rotate(270deg);
        stroke-dashoffset: 3333;
        width: 90vw;
        height: 90vw;
    }
    .dots-circle {
        position: absolute;
        left: 0vw;
        top: 0;
        width: 92vw;
        height: 92vw;
    }
    .circle-inner-1 {
        position: absolute;
        left: 5.994792vw;
        /* opacity: 0 !important; */
        visibility: hidden;
        top: 6.953125vw;
        animation: pulseCircle1 7s infinite;
        width: 80vw;
        height: 80vw;
    }
    .circle-inner-2 {
        position: absolute;
        left: 13.161458vw;
        /* opacity: 0 !important; */
        visibility: hidden;
        top: 13.25vw;
        animation: pulseCircle2 7s infinite;
        width: 66.53125vw;
        height: 66.53125vw;
    }
    .locomotive[data-step='0'] .circle-inner-1, .locomotive[data-step='0'] .circle-inner-2 {
        opacity: 1 !important;
        visibility: visible;
    }
    .main-circle[data-step=0] svg .path {
                                  stroke: #2ecc71;
                                  stroke-width: 2;
                                  fill: none;
                                  stroke-dasharray: 650;
                                  stroke-dashoffset: 650;
                                  transform: scale(1);
                                  transform-origin: center;
                                  stroke-dashoffset: 0;
                              }
    .w-container {
        width: 100%;
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 4vw;
    }
    .locomotive__container {
        position: relative;
        z-index: 1000;
        width: 100% !important;
        min-width: 100%;
        min-height: 100%;
        height: 666px !important;
        /* background-color: red;
         */
        display: flex;
    }
    .locomotive__container {
        height: 105.46875vw;
        /* border: 1vw/$a+vw solid red;
         */
        position: relative;
        z-index: 2000;
        padding: 0 !important;
        overflow: visible !important;
    }
    .locomotive__inner {
        display: flex;
        position: relative;
        /* border: 1vw/$a+vw solid red;
        */
        margin-bottom: 3.3854166667vw;
        width: 100%;
        margin-top: 32px;
        height: 100vh;
    }
    .locomotive__background-container {
        display: flex;
        position: relative;
        width: 100%;
        padding: 0 !important;
        height: 260px;
    }
    .locomotive__background {
        height: 100%;
        min-width: 100%;
        width: 100% !important;
        min-height: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 1.3020833333vw;
        background: linear-gradient(95.37deg, #fff -10.22%, #d8ebf1 55.11%, #c6e8f0 101.93%);
    }
    .locomotive__circle {
        position: absolute;
        z-index: 1005;
        top: 260px;
        left: 0;
        width: 100%;
    }
    .locomotive__circle .before-circle {
        opacity: 0.3;
    }
    .step-icon {
        position: absolute;
        opacity: 1;
        visibility: visible;
        z-index: 1040;
        transform: scale(0.5);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
        width: 10.75vw;
        height: 10.75vw;
    }
    .step-icon-1 {
        top: -4.204167vw;
        left: 40.5625vw;
    }
    .step-icon-2 {
        top: 28.619792vw;
        left: 82.6875vw;
    }
    .step-icon-3 {
        top: 74.786458vw;
        left: 68.442708vw;
    }
    .step-icon-4 {
        left: 10.984375vw;
        top: 74.4375vw;
    }
    .step-icon-5 {
        top: 27.489583vw;
        left: -2.651042vw;
    }
    .locomotive[data-step='1'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-1 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-2 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-3 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .step-icon-4 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-4 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-4 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .step-icon-5 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .step-icon-5 {
        animation: showStepIcon 0.4s forwards;
        transition: 0.4s;
    }
    @keyframes showStepIcon {
        from {
            transform: scale(0.5);
            opacity: 0;
        visibility: hidden;
        }
        70% {
            transform: scale(1.1);
            opacity: 1;
        visibility: visible;
        }
        to {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
    }
    @keyframes pulseCircle1 {
        from {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
        50% {
            transform: scale(0.95);
            opacity: 0.9;
        }
        to {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
    }
    @keyframes pulseCircle2 {
        from {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
        50% {
            transform: scale(0.95);
            opacity: 0.9;
        }
        to {
            transform: scale(1);
            opacity: 1;
        visibility: visible;
        }
    }
    .locomotive__text {
        opacity: 0;
        visibility: hidden;
        transform: translateY(3.90625vw);
        transition: 0.4s;
        position: absolute;
        z-index: 1050;
        left: 20vw;
        top: 96vw;
        width: 53vw;
    }
    .locomotive__text-h2 {
        font-weight: 700;
        font-size: 11.25vw;
        line-height: 9.1145833333vw;
        margin-bottom: 1.75vw;
    }
    .locomotive__text-h3 {
        font-weight: 700;
        font-weight: 700;
        font-size: 5vw;
        line-height: 5.75vw;
    }
    .locomotive__text-p {
        margin-top: 4.25vw;
        font-weight: 400;
        font-size: 3vw;
        line-height: 3.5vw;
        text-align: center;
    }
    .arrow-to-scroll {
        height: 4.7057291667vw;
        margin-top: 3.6458333333vw;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 72vw;
        display: none;
    }
    .arrow-to-scroll-mobile {
        display: flex;
        width: 72vw;
        height: 14.25vw;
    }
    .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive .locomotive__text-p {
        transform: translateY(3.90625vw);
        /* opacity: 1;
        visibility: visible; */
        transition: 0.6s;
    }
    .locomotive[data-step='99'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='0'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='1'] .locomotive__text[data-info="1"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='2'] .locomotive__text[data-info="2"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='3'] .locomotive__text[data-info="3"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='4'] .locomotive__text[data-info="4"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='5'] .locomotive__text[data-info="5"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='6'] .locomotive__text[data-info="6"] .locomotive__text-p {
        transform: translateY(0vw);
        transition: 0.9s;
    }
    .locomotive[data-step='99'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='0'] .locomotive__text[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
        margin-top: 6vw;
    }
    .locomotive[data-step='1'] .locomotive__text[data-info="0"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='1'] .locomotive__text[data-info="1"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .locomotive__text[data-info="2"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='2'] .locomotive__text[data-info="2"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .locomotive__text[data-info="2"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .locomotive__text[data-info="3"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .locomotive__text[data-info="3"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .locomotive__text[data-info="4"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .locomotive__text[data-info="4"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .locomotive__text[data-info="5"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .locomotive__text[data-info="5"] {
        transform: translateY(-3.90625vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .locomotive__text[data-info="6"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive .locomotive__step {
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
        transform: translateY(9.1145833333vw);
    }
    .recycling__image-box.recycling__image-box--1 {
        position: absolute;
        right: 78.515625vw;
        bottom: -58.4635416667vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--1 .recycling__image {
        width: 48.3541666667vw;
        height: 69.3580729167vw;
    }
    .recycling__image-box.recycling__image-box--2 {
        position: absolute;
        right: 30.2083333333vw;
        bottom: -21.09375vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--2 .recycling__image {
        width: 41.4791666667vw;
        height: 93.98828125vw;
    }
    .recycling__image-box.recycling__image-box--3 {
        position: absolute;
        right: 40.625vw;
        bottom: -22.7864583333vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--3 .recycling__image {
        width: 27.65234375vw;
        height: 29.2395833333vw;
    }
    .locomotive[data-step='99'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='99'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='0'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='1'] .locomotive__step[data-info="0"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
        /* width: 128vw/$a+vw;
         */
    }
    .locomotive[data-step='2'] .locomotive__step[data-info="0"] {
        transform: translateY(-13.0208333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--4 {
        position: absolute;
        right: 67.96875vw;
        bottom: -2.4739583333vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--4 .recycling__image {
        width: 90.6640625vw;
        height: 94.9700520833vw;
    }
    .locomotive[data-step='2'] .locomotive__step[data-info="2"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='3'] .locomotive__step[data-info="2"] {
        transform: translateY(-13.0208333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--5 {
        position: absolute;
        right: 56.5104166667vw;
        bottom: -22.1354166667vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--5 .recycling__image {
        width: 58.0247395833vw;
        height: 61.953125vw;
    }
    .recycling__image-box.recycling__image-box--6 {
        position: absolute;
        right: 53.90625vw;
        bottom: -33.203125vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--6 .recycling__image {
        width: 83.3333333333vw;
        height: 65.3645833333vw;
    }
    .locomotive[data-step='3'] .locomotive__step[data-info="3"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='4'] .locomotive__step[data-info="3"] {
        transform: translateY(-13.0208333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--7 {
        position: absolute;
        right: 44.0104166667vw;
        bottom: -73.6979166667vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--7 .recycling__image {
        width: 28.33203125vw;
        height: 11.484375vw;
    }
    .recycling__image-box.recycling__image-box--8 {
        position: absolute;
        right: 60.546875vw;
        bottom: 7.2916666667vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--8 .recycling__image {
        width: 72.1536458333vw;
        height: 89.9075520833vw;
    }
    .recycling__image-box.recycling__image-box--9 {
        position: absolute;
        right: 55.2083333333vw;
        bottom: 23.3072916667vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--9 .recycling__image {
        width: 73.3619791667vw;
        height: 103.1302083333vw;
    }
    .locomotive[data-step='4'] .locomotive__step[data-info="4"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='5'] .locomotive__step[data-info="4"] {
        transform: translateY(-13.0208333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--10 {
        position: absolute;
        right: 71.7447916667vw;
        bottom: -11.0677083333vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--10 .recycling__image {
        width: 90.3255208333vw;
        height: 73.9765625vw;
    }
    .locomotive[data-step='5'] .locomotive__step[data-info="5"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
    .locomotive[data-step='6'] .locomotive__step[data-info="5"] {
        transform: translateY(-13.0208333333vw);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .recycling__image-box.recycling__image-box--11 {
        position: absolute;
        right: 69.7916666667vw;
        bottom: -15.625vw;
        z-index: 9000;
        width: 13.0208333333vw;
        height: 13.0208333333vw;
    }
    .recycling__image-box--11 .recycling__image {
        width: 88.671875vw;
        height: 70.8203125vw;
    }
    .locomotive[data-step='6'] .locomotive__step[data-info="6"] {
        transform: translateY(0vw);
        opacity: 1;
        visibility: visible;
        transition: 0.4s;
    }
}


.locomotive[data-step='1'] .circle-inner-1,
.locomotive[data-step='1'] .circle-inner-2,
.locomotive[data-step='2'] .circle-inner-1,
.locomotive[data-step='2'] .circle-inner-2,
.locomotive[data-step='3'] .circle-inner-1,
.locomotive[data-step='3'] .circle-inner-2,
.locomotive[data-step='4'] .circle-inner-1,
.locomotive[data-step='4'] .circle-inner-2,
.locomotive[data-step='5'] .circle-inner-1,
.locomotive[data-step='5'] .circle-inner-2,
.locomotive[data-step='6'] .circle-inner-1,
.locomotive[data-step='6'] .circle-inner-2 {
    /* opacity: 0 !important; */
        visibility: hidden;
    animation: unset !important;
}

@media (min-width: 450px) {
    .cycle_b2c .title-header {
        margin-bottom: 30px;
    }
}