.section_1 {}

.fancyWrap{
    z-index: 2;
    position: relative;
}
.section_2 {
    margin: 0px 0 0px 15px;

    .col_1 {}

    .col_2 {
        .col_2_inner {
            .eachRow {
                &:not(:last-child) {
                    margin-bottom: 40px;
                }

                .eachRowTop {
                    .figureWrap {
                        width: 80px;
                        height: 80px;
                        display: flex;
                        padding: 10px;
                        border-radius: 10px;
                        align-items: center;
                        justify-content: center;
                        border: 1px solid var(--blue);
                        background-color: var(--white);
                    }

                    .figureCont {
                        padding-left: 20px;
                        width: cala(100% - 100px);
                    }
                }

                .eachRowBot {
                    padding-left: 100px;

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

                        .eachRowBoxTop {
                            .figureWrap {
                                width: 60px;
                                height: 60px;
                                display: flex;
                                padding: 10px;
                                margin-bottom: 10px;
                                border-radius: 10px;
                                align-items: center;
                                justify-content: center;
                                background-color: var(--blue);
                            }

                            .figureCont {
                                padding-left: 20px;
                                width: cala(100% - 100px);
                            }
                        }

                        .eachRowBotCont {
                            padding-left: 0px;
                        }
                    }

                }
            }
        }
    }
}
.col_1_inner{
    z-index: 10;
    position: sticky;
    top: 100px;
    background-size: cover;
    border-radius: 50px;
    padding: 30px;
    height: 700px;
}
.section_3 {
    position: relative;
    overflow: hidden;
    padding-bottom: 700px;
    .geoImg {
        position: absolute;
        bottom: 0;
    }

    .col_2 {
        .col_2_inner {
            .numBoxWrap {
                padding: 50px;
                border-radius: 20px;
                background-color: #ffffff20;
                border: 1px solid var(--white);

                .numBoxEach {
                    width: 25%;
                    position: relative;

                    &:not(:first-child) {
                        padding-left: 50px;
                    }
                    
                    &:not(:last-child) {
                        padding-right: 15px;
                        &::after {
                            top: 0;
                            right: 0;
                            bottom: 0;
                            width: 2px;
                            content: '';
                            margin: auto;
                            height: 120px;
                            position: absolute;
                            background-color: var(--white);
                        }
                    }

                    .numBoxInner {}
                }
            }

            .figWrap {
                display: block;

                img {
                    width: 100%;
                    display: block;
                }
            }
        }
    }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1366px) {
    .section_3 {
        .col_2 {
            .col_2_inner {
                .numBoxWrap {
                    padding: 20px;
                    .numBoxEach {
                        &:not(:last-child) {
                            padding-right: 15px;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1199px) {
    .section_2 {
        margin: 60px 0 60px;
    }

    .col_1_inner {
        height: 600px;
        padding: 25px;
        border-radius: 30px;
    }

    .section_3 {
        padding-bottom: 500px;

        .col_2 .col_2_inner .numBoxWrap {
            padding: 30px;

            .numBoxEach {
                &:not(:first-child) {
                    padding-left: 25px;
                }
            }
        }
    }
}

/* Bootstrap "lg" stack point: the two-column rows become full width. */
@media (max-width: 991px) {
    .section_2 {
        margin: 40px 0;

        .col_1 {
            margin-bottom: 30px;
        }

        .col_2 .col_2_inner .eachRow .eachRowBot {
            padding-left: 0;
        }
    }

    /* Sticky fixed-height panels can't work once stacked */
    .col_1_inner {
        top: 0;
        height: auto;
        position: static;

        .figWrap img {
            width: 100%;
            height: auto;
        }
    }

    .section_3 {
        padding-bottom: 40px;

        .col_1 {
            margin-bottom: 30px;
        }

        /* Let the map flow under the content instead of being absolutely
           pinned with a huge reserved padding-bottom. */
        .geoImg {
            position: static;
            width: 100%;
            height: auto;
            margin-top: 30px;
        }

        /* Stat boxes: 4-up -> 2-up grid */
        .col_2 .col_2_inner .numBoxWrap {
            padding: 30px;

            .numBoxEach {
                width: 50%;
                margin-bottom: 30px;

                /* clear the desktop right-edge dividers... */
                &::after {
                    display: none;
                }

                /* ...left column: keep one vertical divider between columns */
                &:nth-child(odd) {
                    padding-left: 0;
                    padding-right: 25px;

                    &::after {
                        right: 0;
                        height: 70px;
                        display: block;
                    }
                }

                /* right column */
                &:nth-child(even) {
                    padding-left: 25px;
                }

                /* bottom row: no gap */
                &:nth-last-child(-n + 2) {
                    margin-bottom: 0;
                }

                /* pixel-wise font tuning for the 2-up layout */
                .fz_40 {
                    font-size: 30px !important;
                }

                .fz_20 {
                    font-size: 16px !important;
                }

                .fz_18 {
                    font-size: 14px !important;
                }
            }
        }
    }
    .section_2 {
        .col_2 {
            .col_2_inner {
                .eachRow {
                    .eachRowTop {
                        margin-bottom: 20px !important;
                    }
                }
            }
        }
    }
}

@media (max-width: 767px) {
    .section_2 {
        padding-top: 0px;
    }
}
.section_2 {
    .col_2 {
        .col_2_inner {
            .eachRow {                
                .eachRowTop {
                    margin-bottom: 0px;
                    padding-bottom: 0px;
                }
            }
        }
    }
}
/* Stat boxes: 2-up -> single column */
@media (max-width: 575px) {
    .col_1_inner {
        padding: 20px;
        border-radius: 24px;
    }

    .section_3 {
        .col_2 .col_2_inner .numBoxWrap {
            padding: 20px;

            .numBoxEach {
                width: 100%;
                margin-bottom: 20px;
                padding-bottom: 20px;
                text-align: center;
                border-bottom: 1px solid #ffffff40;

                &::after {
                    display: none;
                }

                /* drop the 2-up divider + side paddings for a single column */
                &:nth-child(odd) {
                    padding-left: 0;
                    padding-right: 0;

                    &::after {
                        display: none;
                    }
                }

                &:nth-child(even) {
                    padding-left: 0;
                }

                /* restore the bottom gap removed by the 2-up bottom-row rule */
                &:nth-last-child(-n + 2) {
                    margin-bottom: 20px;
                }

                /* last box: no divider / trailing space */
                &:last-child {
                    margin-bottom: 0;
                    padding-bottom: 0;
                    border-bottom: none;
                }
            }
        }
    }
}