.reaWrap {
    padding: 20px;
    display: flex;
}

.circleText {
    border-radius: 50%;
    width: 385px;
    height: 385px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 40px;

    &::before {
        width: 420px;
        height: 420px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 20px solid #0000002b;
        content: "";
        border-radius: 50%;
    }
}

.bg_e4f2f7 {
    background-color: #e4f2f7;
}

.bg_ecf8ec {
    background-color: #ecf8ec;
}

.countTextWrap {
    width: calc(100% - 100px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;

    .countTextItem {
        padding: 30px;
        padding-left: 400px;
        border-radius: 0 50px 0 0;

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

.resoucesWrap {
    background-image: url(../images/capitals/natural-capital/resource-management.jpg);
    background-size: 100%;
    padding-bottom: 500px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;

    &::before {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        background: linear-gradient(to bottom, #ffffff 35%, #f3f28c00 100%);
    }
}

.count_2 {
    column-count: 2;
}

/* Stakeholder Value and Environmental Outcomes */
.outcomeWrap {
    position: relative;
    padding: 10px 0 0;
    --lineClr: #a5a5a5;
}

.outcomeHead {
    max-width: 760px;
    margin: 0 auto 70px;
    border: 1px solid var(--lineClr);
    border-radius: 60px;
    padding: 7px;
    position: relative;
    z-index: 2;
    background-color: #fff;

    .outcomeHeadInner {
        border: 1px solid var(--lineClr);
        border-radius: 55px;
        padding: 20px 40px;
        text-align: center;
    }
}

.outcomeBody {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -40px;
        transform: translateX(-50%);
        width: 158px;
        height: 40px;
        border: 1px solid var(--lineClr);
        border-bottom: 0;
    }

    &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: -70px;
        width: 1px;
        height: 30px;
        background-color: var(--lineClr);
    }
}

.outcomeRow {
    display: flex;
    align-items: center;
    position: relative;

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

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        width: 1px;
        height: calc(100% + 30px);
        background-color: var(--lineClr);
    }

    &::before {
        left: calc(50% - 79px);
    }

    &::after {
        right: calc(50% - 79px);
    }

    &:last-child {

        &::before,
        &::after {
            height: 50%;
        }
    }
}

.outcomeItem {
    width: 50%;
    display: flex;
    align-items: center;

    &.itemLeft {
        flex-direction: row-reverse;
        padding-right: 20px;
    }

    &.itemRight {
        padding-left: 20px;
    }
}

.outcomeIcon {
    --icoClr: var(--green);
    width: 118px;
    height: 118px;
    min-width: 118px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;

    &.lime {
        --icoClr: var(--pale);
    }

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 8px solid var(--icoClr);
        border-bottom-color: transparent;
        transform: rotate(-45deg);
    }

    &::after {
        content: "";
        position: absolute;
        inset: 13px;
        border-radius: 50%;
        background-color: var(--icoClr);
    }

    svg {
        width: 54px;
        height: 54px;
        position: relative;
        z-index: 1;
    }

    .icoCut {
        fill: var(--icoClr);
    }

    .icoCutStroke {
        stroke: var(--icoClr);
    }
}

.itemRight .outcomeIcon::before {
    transform: rotate(135deg);
}

.outcomeArrow {
    width: 46px;
    min-width: 46px;
    height: 1px;
    background-color: var(--lineClr);
    position: relative;

    &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
    }
}

.itemLeft .outcomeArrow::after {
    left: 0;
    border-right: 9px solid var(--lineClr);
}

.itemRight .outcomeArrow::after {
    right: 0;
    border-left: 9px solid var(--lineClr);
}

.outcomeText {
    width: 100%;
    background-color: #e8f1ee;
    border-radius: 10px;
    padding: 22px 25px;
}

.outComeSec {
    position: relative;

    &.borderCircle {
        &::after {
            width: 400px;
            height: 400px;
            position: absolute;
            content: "";
            left: auto;
            right: -90px;
            bottom: -200px;
            background: url(../images/capitals/natural-capital/circleBottom.png) no-repeat top center;
            background-size: 100%;
            opacity: 1;
        }
    }
}

/* @media screen and (max-width: 1366px){
    .outcomeIcon{
        width: 100px;
        height: 100px;
        min-width: 100px;
        svg{
            width: 46px;
            height: 46px;
        }
    }
    .outcomeRow{
        &::before{
            left: calc(50% - 70px);
        }
        &::after{
            right: calc(50% - 70px);
        }
    }
    .outcomeBody::before{
        width: 140px;
    }
    .outcomeArrow{
        width: 34px;
        min-width: 34px;
    }
    .outcomeText{
        padding: 18px 20px;
    }
}
@media screen and (max-width: 991px){
    .outcomeHead{
        margin-bottom: 50px;
        .outcomeHeadInner{
            padding: 15px 25px;
        }
    }
    .outcomeIcon{
        width: 84px;
        height: 84px;
        min-width: 84px;
        &::before{
            border-width: 6px;
        }
        &::after{
            inset: 10px;
        }
        svg{
            width: 38px;
            height: 38px;
        }
    }
    .outcomeRow{
        &::before{
            left: calc(50% - 57px);
        }
        &::after{
            right: calc(50% - 57px);
        }
    }
    .outcomeBody::before{
        width: 114px;
    }
    .outcomeArrow{
        width: 22px;
        min-width: 22px;
    }
    .outcomeText{
        padding: 15px;
    }
}
@media screen and (max-width: 767px){
    .outcomeHead{
        margin-bottom: 30px;
        border-radius: 30px;
        .outcomeHeadInner{
            border-radius: 26px;
            padding: 15px 20px;
        }
    }
    .outcomeBody{
        &::before,
        &::after{
            display: none;
        }
    }
    .outcomeRow{
        display: block;
        margin-bottom: 0;
        &::before,
        &::after{
            display: none;
        }
    }
    .outcomeItem{
        width: 100%;
        margin-bottom: 20px;
        &.itemLeft{
            flex-direction: row;
            padding-right: 0;
        }
        &.itemRight{
            padding-left: 0;
        }
    }
    .itemLeft .outcomeArrow::after{
        left: auto;
        right: 0;
        border-right: 0;
        border-left: 9px solid var(--lineClr);
    }
    .outcomeArrow{
        width: 18px;
        min-width: 18px;
    }
} */

/* Responsive */
@media (max-width: 1440px) {
    .circleText {
        width: 240px;
        height: 240px;

        &::before {
            width: 280px;
            height: 280px;
        }

        .fz_28 {
            font-size: 20px !important;
            text-align: center;
        }
    }

    .countTextWrap {
        .countTextItem {
            padding: 20px;
            padding-left: 200px;

            &.mb_20 {
                margin-bottom: 12px !important;
            }
        }
    }
}

@media (max-width: 991px) {
    .resoucesWrap {
        padding-bottom: 350px;
    }
}

@media (max-width: 767px) {
    .reaWrap {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        row-gap: 45px;
        padding: 0;
    }

    .countTextWrap {
        width: 100%;
        position: static;
        transform: none;

        .countTextItem {
            padding-left: 20px;
        }
    }

    .count_2 {
        column-count: 1;
    }
}

@media (max-width: 575px) {
    .circleText {
        width: 200px;
        height: 200px;
        padding: 20px;

        &::before {
            width: 240px;
            height: 240px;
        }

        .fz_28 {
            font-size: 18px !important;
        }
    }

    .reaWrap {
        margin-bottom: 20px !important;
    }

    .stakeWrap {
        row-gap: 20px;

        &::before {
            content: normal;
        }

        .stakeItem {
            width: calc(100% / 2);
            position: relative;

            &::before {
                width: 100%;
                height: 20px;
                background-color: #f1f8fc;
                position: absolute;
                left: 0;
                top: 20px;
                content: "";
                z-index: -1;
            }
        }
    }
}