.skyBor {
    border: 1px solid #9fdbeb;
}

.bg_f6f5c2 {
    background-color: #f6f5c2;
}

.bg_d9edf6 {
    background-color: #d9edf6;
}

.blkBorTop {
    border-top: 2px solid #000;
}

.blkBorBtm {
    border-bottom: 2px solid #000;
}

.blkBorRt {
    border-right: 2px solid #000;
}

.rad_15 {
    border-radius: 15px;
}

.customList {
    &.whiteList {
        li {
            &::before {
                filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(50deg) brightness(98%) contrast(112%);
            }
        }
    }
}

.h5wrap {
    background-color: rgb(255, 255, 255);
    border-radius: 30px;
    display: inline-flex;
    padding: 10px 30px 17px;
    border: 1px solid var(--sky);
    box-shadow: 5px 5px 12px var(--sky);

    h5 {
        color: #58595b;
    }
}

.matDiv {
    position: relative;
    padding-top: 50px;
    min-height: 300px;

    .h5wrap {
        position: absolute;
        top: -30px;
        background: #fff;
    }

    ul {
        column-count: 2;
    }
}

.stakeCol {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 40px;
        background-color: #f1f8fc;
        left: 0;
        top: 40%;
        transform: translateY(-50%);
    }

    .stakeDiv {
        text-align: center;
        position: relative;
        z-index: 2;

        .stakeImg {
            width: 65px;
            height: 65px;
            border-radius: 50%;
            background-color: #fff;
            padding: 12px;
            margin: 0px auto 6px;

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

.pictureBlock {
    .pictureBlockInn {
        position: relative;
        width: 100%;
        height: 500px;

        .imgBox {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 30px;
                object-position: right;
            }

            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6), transparent);
                border-radius: 30px 0px 0px 30px;
            }
        }

        .pictureText {
            position: absolute;
            left: 0;
            width: 100%;
            max-width: 50%;
            padding: 20px 30px;
            height: 100%;
            display: flex;
            align-items: center;
            z-index: 2;

            .pictureTextInn {
                p {
                    color: #fff;
                }
            }
        }

        .pictureBlockUl {
            position: absolute;
            bottom: -50px;
            width: 100%;
            display: flex;
            justify-content: flex-end;
            gap: 20px;
            z-index: 2;
            padding: 0px 40px;

            li {
                a {
                    display: block;
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    background-color: #fff;
                    padding: 8px;

                    .pictureCircle {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        padding: 10px;

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

                    &.active {
                        .pictureCircle {
                            background: linear-gradient(90deg, rgba(0, 132, 73, 1) 0%, rgba(231, 229, 25, 1) 100%);
                            padding: 12px;
                        }
                    }
                }
            }
        }
    }
}

.levelCol {
    &:not(:last-child) {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            background-image: url(../images/capitals/social/arrow-bottom.png);
            background-repeat: no-repeat;
            background-size: contain;
            width: 20px;
            height: 60px;
        }
    }
}

.levelCard {
    text-align: center;
    padding-bottom: 80px;

    .levelWrap {
        background: linear-gradient(to right, #93c3a49e 0%, #f3f28c8f 100%);
        padding: 10px 30px;
        display: inline-block;
        border-radius: 30px;
        margin-bottom: 20px;

        h5 {
            font-size: 24px;
        }
    }

    .levelBtm {
        .levelCir {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 1px solid var(--green);
            padding: 15px;
            margin: 0px auto 12px;

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

        h6 {
            font-size: 22px;
        }
    }
}

.levelSkyDesign {
    display: flex;

    .levelSkyDesignInn {
        width: 33.33%;

        .levelSkyDesHead {
            background-color: #84cce7;
            position: relative;
            text-align: center;
            padding: 10px 15px;
            margin-bottom: 20px;

            &::after {
                content: '';
                position: absolute;
                background-image: url(../images/capitals/social/curve.jpg);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                right: 0px;
                top: 0px;
                width: 62px;
                height: 107px;
            }
        }

        &:first-child {
            position: relative;

            &::before {
                content: '';
                position: absolute;
                right: -76px;
                top: 0;
                background-image: url(../images/capitals/social/design-line.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: 150px;
                height: 102px;
                z-index: 2;
            }
        }

        &:nth-child(2) {
            .levelSkyDesHead {
                &::before {
                    content: "";
                    position: absolute;
                    background-image: url(../images/capitals/social/curve.jpg);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    left: 0px;
                    top: -3px;
                    width: 60px;
                    height: 107px;
                    transform: rotate(180deg);
                }
            }
        }

        &:last-child {
            .levelSkyDesHead {
                &::after {
                    left: 0px;
                    top: -3px;
                    width: 56px;
                    height: 107px;
                    transform: rotate(180deg);
                }

                &::before {
                    content: '';
                    position: absolute;
                    left: -74px;
                    top: 0;
                    background-image: url(../images/capitals/social/design-line.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    width: 146px;
                    height: 103px;
                    z-index: 2;
                }
            }
        }

        .levelSkyDesBtm {
            padding: 0px 20px 10px;
            min-height: 360px;
            text-align: center;
            border-bottom: 2px solid #000;
        }

        &:not(:last-child) {
            .levelSkyDesBtm {
                border-right: 2px solid #000;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: -7px;
                    right: -9px;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: #b2d235;
                    z-index: 1;
                }
            }
        }
    }
}

.numCol {
    padding-bottom: 25px;

    .eachIconH {
        padding: 15px 0px;
    }
}

.csrCardWrap {
    position: relative;

    .csrHead {
        display: inline-block;
        background-color: #fff;
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 40px;
        padding: 10px 20px;
    }

    .csrCardRow {
        padding-top: 60px;
    }
}

.csrCard {
    text-align: center;

    .imgBox {
        width: 100%;
        height: 60px;
        margin-bottom: 10px;

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

.devgTable {
    width: 100%;
    overflow-y: auto;

    table {
        width: 100%;

        th,
        td {
            padding: 12px 18px;
        }

        thead {
            tr {
                background: linear-gradient(to right, #008449 0%, #97b43d 100%);

                th {
                    color: var(--white);
                    font-weight: 700;
                    text-align: center;

                    &:first-child {
                        text-align: left;
                    }

                    &:not(:last-child) {
                        border-right: 3px solid var(--white);
                    }
                }
            }
        }

        tbody {
            tr {
                td {
                    border-bottom: 2px solid var(--pale);
                    text-align: center;

                    &:first-child {
                        text-align: left;
                        font-weight: 700;
                        position: relative;

                        &::after {
                            content: "";
                            position: absolute;
                            bottom: -2px;
                            left: 0px;
                            right: 0px;
                            height: 2px;
                            background: linear-gradient(to right, rgb(0, 132, 73), rgb(151, 180, 61));
                        }
                    }
                }
            }
        }
    }
}

.fltLt,
.fltLRt {
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.beforeDiv {
    padding-top: 30px;
    margin-top: 50px;

    .beforeDivInn {
        background-color: #f1f09b;
        border-radius: 20px 20px 0px 0px;
        padding: 60px 20px 30px;
        position: relative;
        z-index: 2;

        &:last-child {
            border-radius: 0 0 20px 20px;
        }

        &:not(:last-child) {
            margin-bottom: 55px;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 55px;
                left: 0;
                bottom: -55px;
                background: url(../images/capitals/social/pillar.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
        }

        .locationWrap {
            border: 1px solid #000;
            border-radius: 30px;
            padding: 6px 15px;
            display: inline-flex;
            margin-bottom: 20px;

            .locCir {
                width: 25px;
                height: 25px;
                background-color: #fff;
                border-radius: 50%;
                padding: 3px;
                display: flex;
                justify-content: center;
                align-items: center;

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

            p {
                width: calc(100% - 25px);
                padding-left: 10px;
                color: #000 !important;
                font-weight: 700;
            }
        }

        .beforeCard {
            position: relative;
            z-index: 2;

            .h5wrap {
                position: absolute;
                top: -90px;

                h5 {
                    color: var(--grey) !important;
                    margin-bottom: 0;
                }
            }

            .imgBox {
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 15px;
                }
            }
        }
    }
}

.section_4 {
    .row_4 {
        &.bg_green_box {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 400px;
                height: 400px;
                background: url(../images/capitals/social/gredient-circle2.png);
                background-repeat: no-repeat;
                background-size: contain;
                z-index: 1;
            }
        }
    }

    .row_5 {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 400px;
            height: 400px;
            background: url(../images/capitals/social/gredient-circle.png);
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
}

.socialMediaDiv {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        background-image: url(../images/capitals/social/box-arrow.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 25px;
        height: 25px;
        top: -12px;
        left: 20px;
    }

    ul {
        li {
            display: flex;
            align-items: baseline;
            margin-bottom: 0;
            padding: 10px 0px;

            .socialIcon {
                width: 30px;
                height: 30px;

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

            .socialText {
                width: calc(100% - 30px);
                padding-left: 12px;
            }

            &:not(:last-child) {
                border-bottom: 1px solid #58595b;
            }
        }
    }

    .h5HeaderWrap {
        position: relative;
        background: linear-gradient(180deg, #5FB74D 0%, #74BF53 35%, #A8D366 75%, #B7DA6D 100%);
        padding: 15px;
        padding-top: 30px;
        margin-top: 20px;
        border-radius: 0px 0px 20px 20px;

        .h5wrap {
            position: absolute;
            top: -25px;
            left: 10px;
        }

        p {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                width: calc(100% - 180px);
                height: 1px;
                background-color: #fff;
            }
        }
    }
}

.section_5 {
    .row_1 {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 400px;
            height: 400px;
            background: url(../images/capitals/social/gredient-circle.png);
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }

    .bg_green_box {
        position: relative;
        overflow: hidden;

        &::after {
            content: '';
            position: absolute;
            left: -150px;
            bottom: -250px;
            width: 400px;
            height: 400px;
            background: url(../images/capitals/social/gredient-circle2.png);
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 1;
        }

        .col_inner {
            position: relative;
            z-index: 2;
        }
    }
}

/* start responsive */

@media(max-width: 1600px) {
    .levelCard {
        .levelBtm {
            h6 {
                font-size: 20px;
            }
        }
    }
}

@media(max-width: 1536px) {
    .levelSkyDesign {
        .levelSkyDesignInn {
            &:first-child {
                &::before {
                    height: 88px;
                }
            }

            .levelSkyDesHead {
                &::after {
                    height: 94px;
                }
            }

            &:nth-child(2) {
                .levelSkyDesHead {
                    &::before {
                        height: 93px;
                    }
                }
            }

            &:last-child {
                .levelSkyDesHead {
                    &::before {
                        height: 90px;
                    }

                    &::after {
                        height: 93px;
                    }
                }
            }
        }
    }
}

@media(max-width: 1366px) {
    .levelCard {
        .levelBtm {
            h6 {
                font-size: 18px;
            }
        }
    }

    .levelSkyDesign {
        .levelSkyDesignInn {
            &:first-child {
                &::before {
                    height: 83px;
                }
            }

            .levelSkyDesHead {
                &::after {
                    height: 87px;
                }
            }

            &:nth-child(2) {
                .levelSkyDesHead {
                    &::before {
                        height: 88px;
                    }
                }
            }

            &:last-child {
                .levelSkyDesHead {
                    &::after {
                        height: 87px;
                    }
                }
            }

            &:last-child {
                .levelSkyDesHead {
                    &::before {
                        height: 83px;
                    }
                }
            }
        }
    }
}

@media(max-width: 1280px) {
    .pictureBlock {
        .pictureBlockInn {
            height: 440px;
        }
    }
}

@media(max-width: 1140px) {
    .csrCardWrap {
        .csrHead {
            white-space: nowrap;
        }
    }
}

@media(max-width: 991px) {
    .pictureBlock {
        .pictureBlockInn {
            height: auto;
            margin-bottom: 30px !important;

            .imgBox {
                position: relative;
                height: 300px;
            }

            .pictureText {
                position: static;
                width: 100%;
                max-width: 100%;
                margin-top: 75px;
                box-shadow: 0 0 10px 0 #c2c2c273;
                border-radius: 20px;
                padding: 20px;
                background-color: #fff;

                .pictureTextInn {
                    p {
                        color: #000;
                    }
                }

            }

            .pictureBlockUl {
                bottom: auto;
                top: 265px;
            }
        }
    }


    .socWrap_3 {
        .row_3 {
            .col_1 {
                .numWrap {
                    .numCol {

                        &:nth-child(2),
                        &:nth-child(4) {
                            .eachIconH {
                                border-right: unset;
                            }
                        }

                        &:nth-child(3) {
                            .eachIconH {
                                border-right: 2px solid #000;
                            }
                        }
                    }
                }
            }
        }
    }

    .csrCardWrap {
        margin-top: 60px;
    }


    .section_4,
    .section_5 {

        .row_1,
        .row_4.bg_green_box,
        .row_5,
        .bg_green_box {
            &::after {
                width: 220px;
                height: 220px;
            }
        }
    }

    div.fltLt {
        width: 32% !important;
    }

    div.fltLRt {
        width: 40% !important;
    }

    .levelCard {
        padding-bottom: 55px;
    }

    .levelCol {
        &:not(:last-child)::after {
            height: 45px;
            bottom: 12px;
        }
    }

    .socWrap_6 {
        .subrow_1 {
            .subcol_3 {
                .shadowBox {
                    margin-bottom: 0;
                }
            }
        }
    }

    .socWrap_7 {
        .subrow_1 {
            .subcol_2 {
                .shadowBox {
                    margin-bottom: 0;
                }
            }
        }
    }

    .beforeCardInn {
        .col_1 {
            &.blkBorRt {
                border-right: unset;
                border-bottom: 2px solid #000;
                padding-bottom: 20px;
                margin-left: 5px;
                margin-right: 5px;
            }
        }
    }

    .socWrap_9 {
        .row_5 {
            .subrow_1 {
                .subcol_2 {
                    .shadowBox {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

    .socWrap_10 {
        .subrow_1 {
            flex-direction: column-reverse;
        }
    }
}


@media(max-width: 767px) {
    .pictureBlock {
        .pictureBlockInn {

            .pictureText {
                margin-top: 60px;
            }

            .pictureBlockUl {
                li {
                    a {
                        width: 70px;
                        height: 70px;
                    }
                }
            }
        }
    }

    .socWrap_3 {
        .row_3 {
            margin-bottom: 0 !important;

            .col_1 {
                .numWrap {
                    .numCol {
                        .eachIconH {
                            border-right: unset;
                        }

                        &:nth-child(3) {
                            .eachIconH {
                                border-right: unset;
                            }
                        }

                        &:last-child {
                            border-bottom: unset;
                        }
                    }
                }
            }
        }
    }

    .levelSkyDesign {
        flex-wrap: wrap;

        .levelSkyDesignInn {
            width: 100%;

            .levelSkyDesHead {
                &::after {
                    display: none;
                }
            }

            .levelSkyDesBtm {
                border-right: unset;
                min-height: auto;
                padding: 0px 20px 30px;
            }

            &:first-child {
                &::before {
                    display: none;
                }
            }

            &:nth-child(2) {
                .levelSkyDesHead {
                    &::before {
                        display: none;
                    }
                }
            }

            &:last-child {
                .levelSkyDesHead {
                    &::before {
                        display: none;
                    }

                    &::after {
                        left: auto;
                        top: -1px;
                        height: 85px;
                        transform: rotate(0deg);
                    }
                }
            }

            &:not(:last-child) {
                .levelSkyDesBtm {
                    border-right: unset;
                    margin-bottom: 30px;

                    &::after {
                        right: auto;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
            }
        }
    }

    .levelCard {
        padding-bottom: 45px;

        .levelWrap {
            padding: 8px 24px;
            margin-bottom: 15px;
        }

        .levelBtm {
            .levelCir {
                width: 60px;
                height: 60px;
                padding: 12px;
            }

            h6 {
                font-size: 16px;
            }
        }
    }

    .levelCol {
        &:not(:last-child)::after {
            height: 35px;
            bottom: 8px;
        }
    }


    .csrCardWrap {
        margin-top: 40px;
        border-top: unset;

        /* free the heading from its absolute position so it can never overlap */
        .csrHead {
            position: static;
            transform: none;
            display: block;
            max-width: 100%;
            margin: 0;
            padding: 10px 0;
            white-space: wrap;
            text-align: center;
        }

        .csrCardRow {
            padding-top: 15px;
        }
    }

    .beforeDiv {
        padding-top: 25px;
        margin-top: 35px;

        .beforeDivInn {
            padding: 50px 15px 22px;

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

                &::after {
                    height: 45px;
                    bottom: -45px;
                }
            }

            .beforeCard {
                .h5wrap {
                    top: -78px;
                }
            }
        }
    }

    .beforeCardInn {
        .subcol_1 {
            margin-bottom: 20px;
        }
    }

    div.fltLt {
        width: 40% !important;
    }

    div.fltLRt {
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    .socialMediaDiv {
        .h5HeaderWrap {
            p {
                font-size: 34px !important;

                &::after {
                    width: calc(100% - 140px);
                }
            }
        }
    }
}

@media(max-width: 640px) {

    .section_4,
    .section_5 {

        .row_1,
        .row_4.bg_green_box,
        .row_5,
        .bg_green_box {
            &::after {
                width: 170px;
                height: 170px;
            }
        }
    }

    .shadowBox2 {
        padding: 15px;
    }
}

@media(max-width: 575px) {
    .pictureBlock {
        .pictureBlockInn {
            .pictureBlockUl {
                justify-content: center;
            }
        }
    }

    .csrCardWrap {
        .csrHead {
            padding: 10px 12px;
            font-size: 18px !important;
        }

        .imgBox {
            height: 75px;
            width: 243px;
            margin: 0 auto 10px;
            background-color: #fff;
            padding: 10px;
        }

        .csrCardRow {
            .col-6 {
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
            }
        }
    }

    /* floated images take the full width rather than shrinking to a thumbnail */


    .beforeDiv {
        .beforeDivInn {
            padding: 46px 12px 20px;

            .beforeCard {
                .h5wrap {
                    top: -72px;
                }
            }
        }
    }

    .devgTable {
        table {
            min-width: 480px;

            th,
            td {
                padding: 9px 10px;
            }
        }
    }

    .socialMediaDiv {
        ul {
            li {
                padding: 8px 0px;
            }
        }

        .h5HeaderWrap {
            p {
                font-size: 30px !important;

                &::after {
                    width: calc(100% - 125px);
                }
            }
        }
    }

}

@media(max-width: 480px) {
    .csrCard {
        .imgBox {
            height: 50px;
        }
    }

    div.fltLt {
        width: 100% !important;
        margin-bottom: 15px;
    }
}

@media(max-width: 420px) {
    .beforeDiv {
        .beforeDivInn {
            padding: 42px 10px 18px;

            .beforeCard {
                .h5wrap {
                    top: -66px;
                }
            }
        }
    }

    .socialMediaDiv {
        .h5HeaderWrap {
            p {
                font-size: 26px !important;

                &::after {
                    width: calc(100% - 110px);
                }
            }
        }
    }
}

/* end responsive */


/* ---- gradient moved out of the markup (CSP: no inline styles) ---- */
.socWrap_10.gradBox {
    border-radius: 20px !important;
    background: linear-gradient(to right, #008449 0%, #97b43d 100%);
}