.telGray_bg {
    background-color: #4d4d4f;
}

.telBlack_Bg {
    background-color: #000;
}

.telWhite_bg {
    background-color: #fff;
}

.telSky_bg {
    background-color: #5684a0;
}

.gryBrBtm {
    border-bottom: 1px solid #4d4d4f;
}

.cap_ban_cont {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 100%;
        background-color: #e31837;
    }

    .cap-banWrap {
        p {
            padding: 15px;
            margin-top: 15px;

            &:not(:last-child) {
                border-right: 2px solid #9c9c9c;
                margin-bottom: 0;
            }
        }
    }
}

.mobCapBan {
    display: none;
}


/* counter number */

.brBtm {
    border-bottom: 1px solid #9c9c9c;
}

.numBlockBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .leftText {
        padding-left: 60px;
        position: relative;
        padding-right: 10px;

        &::before {
            width: 50px;
            height: 30px;
            position: absolute;
            content: "";
            background: url(../images/common/rightTopArrow.png) no-repeat center top;
            background-size: 100%;
            left: 3px;
            top: 0;
        }
    }
}

/* drowLine */
.capLine {
    position: relative;

    .capHeadLine {
        position: relative;
        padding-right: 30px;

        &::after {
            content: "";
            position: absolute;
            bottom: 14px;
            right: 0;
            width: 100%;
            height: 1px;
            background-color: #4d4d4f;
        }
    }

    h4 {
        display: inline-block;
        background: #fff;
        position: relative;
        padding-right: 20px;
        z-index: 1;

        &::after {
            content: "";
            position: absolute;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            border: 2px solid #4d4d4f;
            background-color: transparent;
            bottom: 8px;
            right: 0;
        }
    }

    .capContBx {
        border-right: 1px solid #4d4d4f;
        padding: 40px 20px 20px 0;
        position: relative;
        margin-top: -16px;

        &::after {
            content: "";
            position: absolute;
            bottom: -40px;
            right: 16px;
            width: 1px;
            height: 50px;
            background-color: #4d4d4f;
            transform: rotate(45deg);
        }

        &::before {
            content: "";
            position: absolute;
            bottom: -42px;
            right: 25px;
            width: 1px;
            height: 50px;
            background-color: #e31837;
            transform: rotate(45deg);
        }

    }
}

/* cap left line */
.capLftLine {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 98%;
        top: 2px;
        left: 0;
        z-index: 1;
        background-color: #4d4d4f;
    }


    &::after {
        content: "";
        position: absolute;
        bottom: -32px;
        left: 15px;
        width: 1px;
        height: 44px;
        background-color: #4d4d4f;
        transform: rotate(-45deg);
    }

    .capLftContBx {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            border: 2px solid #4d4d4f;
            background-color: transparent;
            top: -2px;
            left: 15px;

        }

        &::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 0px;
            width: 17px;
            height: 1px;
            background-color: #4d4d4f;
        }
    }

}

/* cap-right-line */

.capRgtLine {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 98%;
        top: 2px;
        right: 0;
        z-index: 1;
        background-color: #4d4d4f;
    }


    &::after {
        content: "";
        position: absolute;
        bottom: -32px;
        right: 15px;
        width: 1px;
        height: 44px;
        background-color: #4d4d4f;
        transform: rotate(45deg);
    }

    .capRgtContBx {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            border: 2px solid #4d4d4f;
            background-color: transparent;
            top: -2px;
            right: 15px;

        }

        &::after {
            content: "";
            position: absolute;
            top: 2px;
            right: 0px;
            width: 17px;
            height: 1px;
            background-color: #4d4d4f;
        }
    }

}

/* stakeholder */
.stakeholderWrap {
    .stakeRow {
        display: -ms-flexbox;
        flex-wrap: wrap;

        .stakeCol {
            width: 100%;
            flex: 0 0 25%;
            max-width: 25%;
            -ms-flex: 0 0 25%;

            .stakeWrap {
                text-align: center;
            }

            .stakeIco {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                background-color: #d10036;
                padding: 16px;
                margin: 0 auto;
            }

            .stakeText {
                min-height: 55px;
            }
        }
    }
}

/* sdgs */
.sdgList {
    ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        li {
            width: calc(10% - 10px);
            margin: 0 5px;
        }
    }
}

.bsGraph {
    box-shadow: 0 0 4px #e318363f;
    padding: 20px;
}

.comCapLine {
    h4 {
        padding: 10px;
        border-right: 15px solid #fff;
        width: calc(100% - 70px);

        &::after {
            right: -15px;
            bottom: 26px;
        }
    }

    &.capLine {
        & .capHeadLine {
            &::after {
                bottom: 30px;
            }
        }
    }
}

.paraArrow {
    h4 {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: 10px;
            left: -16px;
            border-left: 2px solid #898989;
            border-top: 2px solid #898989;
            width: 10px;
            height: 100%;
        }

        &::after {
            content: "";
            position: absolute;
            bottom: -44px;
            left: -16px;
            background-image: url(../images/manufactured-capital/grayLineArrow.png);
            background-repeat: no-repeat;
            background-size: contain;
            width: 46px;
            height: 35px;
        }
    }

    p {
        padding-left: 30px;
    }

    &.whiteLstArrow {
        h4 {
            &::before {
                left: -13px;
                border-left: 2px solid #b7b7b8;
                border-top: 2px solid #b7b7b8;
            }

            &::after {
                bottom: -40px;
                left: -14px;
                background-image: url(../images/intellectual-capital/whiteLineArrow.png);
            }
        }
    }
}

.paraWhiteArrow {
    h4 {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            bottom: -74px;
            left: -19px;
            background-image: url(../images/social-capital/whiteArw.png);
            background-repeat: no-repeat;
            background-size: contain;
            width: 54px;
            height: 54px;
        }

        &::after {
            content: "";
            position: absolute;
            top: 27px;
            left: -16px;
            width: 10px;
            height: 100%;
            border-left: 1px solid #fff;
            border-top: 1px solid #fff;
        }
    }

    p {
        padding-left: 30px;
    }
}


/* grayCardBox */
.grayCardBx {
    display: flex;
    flex-wrap: wrap;

    .eachGrayCardBx {
        width: 100%;
        flex: 0 0 33.33%;
        max-width: 33.33%;
        -ms-flex: 0 0 33.33%;
        padding: 0 15px;
    }
}

/* gray box top left bottom right */
.tLBRSd {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 0;
        width: 2px;
        height: 26px;
        background-color: #4d4d4f;
        z-index: 1;
        transform: rotate(45deg);
    }

    &::after {
        content: "";
        position: absolute;
        bottom: -8px;
        right: 0;
        width: 2px;
        height: 26px;
        background-color: #4d4d4f;
        z-index: 1;
        transform: rotate(42deg);
    }
}

.tLBRBg {
    position: relative;

    &::after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: -1px;
        width: 60px;
        height: 60px;
        clip-path: polygon(100% 63%, 64% 100%, 100% 100%);
        background-color: #fff;
    }
}

.tLBRBg {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        width: 65px;
        height: 65px;
        clip-path: polygon(0 0, 0 32%, 33% 0);
        background-color: #fff;
    }
}

.tLBRLine {
    position: relative;
}

.tLBRLine::after,
.tLBRLine::before {

    content: "";
    position: absolute;
    width: 95%;
    height: 20px;
    border-top: 2px solid #e01b22;
    top: -4px;
    left: 6px;
    transform: skew(-45deg);
    z-index: 1;
}

.tLBRLine::after {
    top: auto;
    left: auto;
    bottom: -4px;
    right: 7px;
    border-top: none;
    border-left: none;
    border-bottom: 2px solid #e01b22;
    transform: skew(-42deg);
}

.tLBRLine::before {
    border-top: 2px solid #e01b22;
    border-left: 2px solid #e01b22;
}

.tLBRLine::after {
    border-bottom: 2px solid #e01b22;
    border-right: 2px solid #e01b22;
}

/* gray box top right bottom left */

.tRBLSd {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: -8px;
        right: 0;
        width: 2px;
        height: 26px;
        background-color: #4d4d4f;
        z-index: 1;
        transform: rotate(-48deg);
    }

    &::after {
        content: "";
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 2px;
        height: 26px;
        background-color: #4d4d4f;
        z-index: 1;
        transform: rotate(-44deg);
    }
}

.tRBLBg {
    position: relative;

    &::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 60px;
        height: 60px;
        clip-path: polygon(29% 100%, 0 71%, 0 100%);
        background-color: #fff;
    }
}

.tRBLBg {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: -1px;
        right: 0;
        width: 65px;
        height: 65px;
        clip-path: polygon(100% 0, 69% 0, 100% 28%);
        background-color: #fff;
    }
}

.tRBLLine {
    position: relative;
}

.tRBLLine::after,
.tRBLLine::before {
    content: "";
    position: absolute;
    width: 95%;
    height: 20px;
    border-top: 2px solid #e31837;
    top: -4px;
    right: 7px;
    transform: skew(48deg);
    z-index: 1;
}

.tRBLLine::after {
    top: auto;
    left: auto;
    bottom: -4px;
    left: 6px;
    border-top: none;
    border-left: none;
    border-bottom: 2px solid #e31837;
    transform: skew(44deg);
}

.tRBLLine::before {
    border-top: 2px solid #e31837;
    border-right: 2px solid #e31837;
}

.tRBLLine::after {
    border-bottom: 2px solid #e31837;
    border-left: 2px solid #e31837;
}

.redBgbrCrv {
    border-radius: 0 50px 0;
    margin-bottom: 15px;
}

.redLnebrCrv {
    border: 4px solid #e31936;
    padding: 15px;
    border-radius: 0 30px 30px 30px;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: -28px;
        left: -4px;
        background-image: url(../images/intellectual-capital/angle_img.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 50px;
        height: 50px;
    }
}

.whiteLnebrCrv {
    border: 4px solid #fff;
    padding: 15px;
    border-radius: 0 30px 30px 30px;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: -25px;
        left: -4px;
        background-image: url(../images/natural-capital/white_angle_img.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 50px;
        height: 50px;
    }
}

.grayLnebrCrv {
    border: 4px solid #e31936;
    padding: 15px;
    border-radius: 0 30px 30px 30px;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: -25px;
        left: -4px;
        background-image: url(../images/natural-capital/red_gray_angle.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 50px;
        height: 50px;
    }
}

.ceroCardRow {
    display: flex;
    flex-wrap: wrap;

    .ceroCardCol {
        width: 100%;
        flex: 0 0 20%;
        max-width: 20%;
        -ms-flex: 0 0 20%;
        padding: 0 15px;
    }
}


/* drow line  */

.drowLineSde {
    position: relative;
    margin-left: 7px;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: -7px;
        width: 1px;
        height: 100%;
        background-color: #000;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 70px;
        background-color: #e31837;
    }

    h4 {
        position: relative;
        padding: 10px;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background-color: #e31837;
        }
    }

    .drowLineSdePara {
        padding: 0 0 0 10px;
    }

    .drowLineSdeLst {
        display: flex;
        flex-wrap: wrap;

        .sec4IntelInnEach {
            width: 100%;
            flex: 0 0 33.33%;
            max-width: 33.33%;
            -ms-flex: 0 0 33.33%;
            padding: 0 15px;

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

                    &::after {
                        content: "";
                        position: absolute;
                        top: 0;
                        right: -10px;
                        width: 1px;
                        height: 100%;
                        background-color: #000;
                    }

                }
            }
        }
    }
}


/* vision curve box */

.inteliCont {
    position: relative;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 20px;
        width: calc(100% - 132px);
        height: 4px;
        background-color: #e31837;
    }

    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 20px;
        width: calc(100% - 132px);
        height: 4px;
        background-color: #e31837;
    }

    .intelHead {

        h4 {
            margin-bottom: 15px;
            border-radius: 0 50px 0;
        }

    }

    .intelSde {

        position: relative;
        padding: 0 70px;
        text-align: center;

        h4 {
            margin-bottom: 15px;
            border-radius: 0 50px 0;
        }

        .intelSdeIcon {
            position: absolute;
            top: 50%;
            right: -52px;
            transform: translateY(-50%);
            width: 100px;
        }
    }

    .inteliCol {
        width: 100%;
        flex: 0 0 50%;
        max-width: 50%;
        -ms-flex: 0 0 50%;

    }

    .intelSdeInn {
        display: flex;
        align-items: center;
        border-right: 4px solid #e31837;
        border-bottom: 4px solid #e31837;
        border-top: 4px solid #e31837;
        flex: 0 0 40%;
        max-width: 40%;
        -ms-flex: 0 0 40%;
    }
}

/* start responsive */

@media(max-width: 1768px) {

    /* start custom redBoxtable */
    .srcRedBx {
        .srcRedHead {
            h4 {
                font-size: 20px !important;
            }
        }

        .srcBdy {
            p {
                font-size: 16px;
            }
        }
    }
}

@media(max-width: 1680px) {
    .rndBx {
        .lftRnd {
            width: calc(100% - 230px);

            p {
                font-size: 18px !important;
            }
        }
    }

    /* custom redBoxtable */
    .srcRedRow {
        .srcRedCol {
            .srcRedHead {
                padding: 0 20px 0 28px;

                h4 {
                    padding: 15px 0 15px 0;
                }
            }

            .srcBdy {
                padding: 10px;
            }
        }
    }

    .paraWhiteArrow {
        h4 {
            &::before {
                width: 40px;
            }
        }

        p {
            padding-left: 38px;
        }
    }
}

@media(max-width: 1440px) {
    .capLine {
        h4 {
            font-size: 20px !important;
        }

    }

    .rndBx {
        .lftRnd {

            p {
                font-size: 18px !important;
            }
        }

        .rgtRnd {
            p {
                font-size: 16px;
            }
        }
    }

    .natParaBx {
        min-height: 140px;
    }
}

@media(max-width: 1366px) {
    .srcRedBx {
        .srcRedCol {
            .srcRedHead {
                h4 {
                    font-size: 18px !important;
                    min-height: 140px;
                }
            }
        }

        .srcBdy {
            p {
                font-size: 14px;
            }
        }
    }
}

@media(max-width: 1280px) {
    .capSecHead {
        .mb_100 {
            margin-bottom: 0px !important;
        }
    }

    /* start social vision */


    .paraArrow {
        h4 {
            &::after {
                width: 30px;
            }
        }

        p {
            padding-left: 20px;
        }
    }
}

@media (max-width: 1199px) {
    .cap_ban_cont {
        h4 {
            font-size: 20px;
        }

        & .cap-banWrap {
            p {
                margin-top: 0;
            }
        }
    }

    /* start custom redBoxtable */
    .srcRedRow {
        .srcRedCol {
            flex: 0 0 100%;
            max-width: 100%;
            -ms-flex: 0 0 100%;

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

            .srcRedHead {
                h4 {
                    min-height: auto;
                }
            }

            .srcBdy {
                min-height: auto;
            }
        }
    }
}

@media (max-width: 991px) {
    .dskCapBan {
        display: none;
    }

    .mobCapBan {
        display: block;

        img {
            width: 100%;
        }
    }

    .drowLineSde {
        margin-bottom: 30px;

    }

    .capLftContBx,
    .capRgtContBx {
        img {
            width: 100%;
        }
    }

    .capLftLine {
        &::after {
            bottom: -28px;
        }
    }

    .capitalSec {
        .row_3 {
            .col_3 {
                padding-top: 30px;
            }
        }
    }
}

@media (max-width: 768px) {
    .stakeholderWrap {
        .stakeRow {
            .stakeCol {
                width: 100%;
                flex: 0 0 50%;
                max-width: 50%;
                -ms-flex: 0 0 50%;
            }
        }
    }

    .drowLineSde {
        & .drowLineSdeLst {
            .sec4IntelInnEach {
                flex: 0 0 100%;
                max-width: 100%;
                -ms-flex: 0 0 100%;
                padding: 10px 0;

                &:not(:last-child) {
                    & .drowLineSdeBx {
                        &::after {
                            top: auto;
                            bottom: -10px;
                            right: auto;
                            left: 0;
                            width: 30%;
                            height: 1px;
                        }
                    }
                }
            }
        }
    }
}

@media(max-width: 575px) {
    .sdgList {
        & ul {
            li {
                width: calc(18% - 10px);
                margin: 0 5px 10px;
            }
        }
    }


    .capLftLine {
        &::after {
            bottom: -32px;
        }
    }
}


@media (max-width: 480px) {
    .stakeholderWrap {
        .stakeRow {
            .stakeCol {
                width: 100%;
                flex: 0 0 100%;
                max-width: 100%;
                -ms-flex: 0 0 100%;
                margin-bottom: 20px;

                .stakeText {
                    min-height: auto;
                }
            }
        }
    }


}