section.your-journey {
    padding: 60px 0 120px;
    overflow: hidden;
    position: relative;

    &.shine:before {
        content: '';
        position: absolute;
        bottom: -200px;
        left: 0;
        width: 100%;
        max-width: 997px;
        height: 1010px;
        background: url(../../img/your-journey-shine.png) left bottom / contain no-repeat;
        pointer-events: none;
    }

    .container {
        position: relative;
    }

    &.background-dark {
        color: #DADADA;

        .description,
        .title-steps,
        .step-title,
        h2 {
            color: #FFFFFF;
        }
    }

    .btn {
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .number {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.25em;
        letter-spacing: 1px;
        color: #F9371C;
    }

    .title-row {
        display: flex;
        align-items: center;
        column-gap: 60px;

        h2 {
            margin: 0;
        }

        .description {
            margin-top: 8px;
        }

        > div {
            width: 50%;
        }
    }

    .cards {
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        gap: 24px;

        .item {
            padding: 24px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.04);
        }

        .description {
            margin-top: 16px;
        }
    }

    .title-steps {
        margin-top: 60px;
        font-size: 20px;
        line-height: 1.6em;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        font-family: "Benzin Bold", sans-serif;
    }

    .steps {
        margin-top: 40px;
        padding: 0;
        display: flex;
        justify-content: space-between;
        column-gap: 64px;

        .item {
            padding: 20px;
            border-radius: 16px;
            border: 1px solid #F9371C;
            flex: 1;
            position: relative;

            &:not(:first-child):before {
                content: '';
                position: absolute;
                top: calc(50% - 12px);
                left: -44px;
                width: 24px;
                height: 24px;
                background: url("../../img/your-journey-arrow-right-ico.svg") no-repeat;
                background-size: contain;
            }
        }

        .step-title {
            margin-top: 16px;
            letter-spacing: 1px;
            font-weight: 700;
        }
    }

    .button-wrap {
        margin-top: 60px;

        .btn {
            display: inline-block;
        }
    }
}


/* MEDIA */

@media (max-width: 991px) {
    section.your-journey {
        padding: 40px 0;

        .title-row {
            flex-wrap: wrap;

            .title-wrap {
                width: 100%;
                max-width: 700px;
                margin: 0 auto;
            }

            .image-wrap {
                width: 100%;
                max-width: 700px;
                margin: 32px auto 0 auto;
            }
        }

        .cards {
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 28px;

            .item {
                width: 100%;
                display: flex;
                gap: 16px;
            }

            .description {
                margin: 0;
            }
        }

        .title-steps {
            font-size: 16px;
            margin-top: 32px;
        }

        .steps {
            margin-top: 24px;
            flex-wrap: wrap;
            row-gap: 56px;

            .item {
                min-width: 100%;
                display: flex;
                align-items: center;
                gap: 16px;

                &:not(:first-child):before {
                    top: -40px;
                    left: calc(50% - 12px);
                    transform: rotate(90deg);
                }

                br {
                    display: none;
                }

                .step-title {
                    margin: 0;
                }
            }
        }

        .button-wrap {
            margin-top: 40px;
        }
    }
}

/* ( < 991 ) */

@media (max-width: 575px) {
    section.your-journey.shine:before {
        bottom: 0;
        left: auto;
        right: 0;
        width: 100%;
        max-width: 997px;
        height: 1010px;
        background: url(../../img/your-journey-mobile-shine.png) right bottom / contain no-repeat;
    }
}