.legacy_page{
    background-image: url(../images/journey/journeyBg.png);
    background-repeat: repeat;
}

.section_1 {
    height: 100%;
    background-size: 40%;
    background-repeat: no-repeat;
}

.col_1 {
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;

    /* &:before {
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        position: fixed;
        background-size: 33.333333%;
        background-repeat: no-repeat;
        background-image: url(../images/journey/legacyBg.png);

    } */

    .pageHeaderWrap {
        top: 80px;
        width:100%;
        padding: 20px;
        position: sticky;
        height:calc(100vh - 90px);
        &:before {
            top: 0px;
            left: 0;
            right: 0;
            bottom: 0;
            content: '';
            position: absolute;
            background: linear-gradient(360deg, rgb(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 50%);

        }
    }

    .pageHeaderInner {
        z-index: 2;
        height: 100%;
        display: flex;
        padding-top: 50px;
        position: relative;
        padding-right: 15px;
        padding-bottom: 100px;
        flex-direction: column;
        /* justify-content: space-between; */
    }
}

.journeyWrapHolder {
    padding-top: 60px;
    border-bottom: 2px solid var(--blue);

    .sub_col_1 {
        padding-bottom: 30px;
        position: relative;
        border-right: 2px solid var(--blue);

        /* &:before {
            width: 1px;
            height: 100%;
            left: 0;
            right: 0;
            content: ''
                background-color: var(--blue);
        } */
    }

    .sub_col_2 {
        padding-bottom: 30px;
    }

    .journeyFigWrap {
        .journeyFig {
            overflow: hidden;
            position: relative;
            border-radius: 25px;

            &:not(:last-child) {
                margin-bottom: 30px;
            }

            a {
                height: 275px;
                display: block;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .figT {
                right: 20px;
                bottom: 20px;
                padding: 8px 15px;
                color: var(--black);
                border-radius: 25px;
                position: absolute;
                background-color: var(--white);

                &.bkBox {
                    color: var(--white);
                    background-color: var(--black);
                }
            }
        }
    }

    .timelinePanelWrap {
        .timeline-panel {
            position: relative;

            &:after {
                left: -22px;
                width: 13px;
                height: 10px;
                content: '';
                position: absolute;
                background-repeat: no-repeat;
                background-size: 100%;
                background-position: center;
                background-image: url(../images/journey/arrowDown.png);
            }

            &:not(:last-child) {
                margin-bottom: 20px;
            }

            .journeyCont {
                &.whiteBg {
                    padding: 30px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
                    border-radius: 25px;
                    background-color: var(--white);

                    p {
                        font-family: 'Helvetica Neue';
                        font-style: italic;
                        font-weight: 500;
                    }
                }
            }
        }
    }
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1280px) {
    .col_1 {
        .pageHeaderInner {
            padding-top: 10px;
        }
    }
    .journeyWrapHolder {
        .journeyFigWrap {
            .journeyFig {
                border-radius: 15px;
                a {
                    height: 230px;
                }
            }
        }
    }
}
/* Two columns still side-by-side, but on narrower laptops let the
   sticky header grow with its content instead of a fixed 750px. */
@media (max-width: 1199px) {
    .col_1 {
        .pageHeaderWrap {
            height: auto;
            min-height: 600px;
        }

        .pageHeaderInner {
            padding-bottom: 60px;
        }
    }

    .journeyWrapHolder {
        .journeyFigWrap .journeyFig a {
            height: 230px;
        }
    }
}

/* Bootstrap "lg" stack point: the two columns (and the inner
   gallery/timeline columns) become full width here. */
@media (max-width: 991px) {
    .col_1 {
        .pageHeaderWrap {
            top: 0;
            height: auto;
            min-height: 0;
            position: static;
            margin-bottom: 10px;
        }

        .pageHeaderInner {
            padding-top: 30px;
            padding-right: 0;
            padding-bottom: 40px;
        }
    }

    .journeyWrapHolder {
        padding-top: 30px;

        .sub_col_1 {
            margin-bottom: 30px;
            padding-bottom: 30px;
            border-right: none;
            border-bottom: 2px solid var(--blue);

            .journeyFigWrap .journeyFig a {
                height: 300px;
            }
        }

        /* The arrow markers point at the vertical spine, which is gone
           once stacked — hide them so they don't overflow off-screen. */
        .timelinePanelWrap .timeline-panel:after {
            display: none;
        }
    }
    .section_1{
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }
}

@media (max-width: 575px) {
    .journeyWrapHolder {
        .journeyFigWrap {
            .journeyFig {
                border-radius: 18px;

                &:not(:last-child) {
                    margin-bottom: 20px;
                }

                a {
                    height: 200px;
                }

                .figT {
                    right: 12px;
                    bottom: 12px;
                    padding: 6px 12px;
                    border-radius: 18px;
                    max-width: calc(100% - 24px);
                }
            }
        }

        .timelinePanelWrap .timeline-panel .journeyCont {
            &.whiteBg {
                padding: 20px;
                border-radius: 18px;
            }
        }
    }
}