.redHeadBg {
    background-color: #e31837;
}

.corporate-governance {
    .lineHeading {
        &::before {
            width: 410px;
            left: 164px;
            bottom: 70px;
            transform: rotate(-18deg) skew(-20deg) translate(-120%, 0);
        }

        &::after {
            left: 240px;
            top: 53px;
            transform: rotate(-20deg) skew(-20deg) translate(100%, 0%);
        }
    }

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

        .iconBox {
            width: 33.33%;
            text-align: center;
            padding: 0 15px;
        }

        .iconWrap {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            align-items: center;
            background-color: #e31837;
            margin: 0 auto;
            justify-content: center;
            display: flex;
            margin-bottom: 20px;
            padding: 15px;

            img {
                mix-blend-mode: lighten;
            }
        }
    }
}

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

.bg_f8d0c6 {
    background-color: #f8d0c6;
}

.practicesWrap {
    padding-top: 50px;

    .practiceItem:nth-child(even) {
        .curveBox {
            &::before {
                filter: brightness(0) invert(1);
            }
        }
    }

    .practicesWrapFx {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .practiceItem {
            width: 100%;
            max-width: 20%;
            flex: 0 0 20%;
            -ms-flex: 0 0 20%;
        }
    }

    .curveBox {
        padding: 20px;
        border-radius: 30px 30px 30px 0;
        text-align: center;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &::before {
            width: 15px;
            height: 32px;
            position: absolute;
            content: "";
            background: url(../images/corporate-governance/curveBlackCorner.png) no-repeat center center;
            left: -14px;
            bottom: 0;
        }
    }
}

.whiteBg {
    background-color: #fff;
}

.curveBox {
    & .curveBoxInner {
        .curveBoxHeading {
            position: relative;

            h4 {
                display: inline-block;
                padding: 10px 30px;
                background-color: #e31837;
                border-radius: 0 30px 0 30px;
                color: #fff;
                position: relative;
                z-index: 1;
            }
        }

        .curveBoxText {
            padding: 30px;
            border: 3px solid #e31837;
            border-radius: 0 60px 60px 60px;
            position: relative;
            height: calc(100% - 65px);

            &::before {
                width: 32px;
                height: 30px;
                background: url(../images/brand-story/angle_img.png) no-repeat center center;
                background-size: 100%;
                content: "";
                position: absolute;
                top: -20px;
                left: -2px;
            }
        }
    }
}

.frameworkHeading {
    padding: 10px;
    text-align: center;

    &.borderHeading {
        border: 3px solid #e31837;

        &:after {
            display: none;
        }
    }
}

.frameworkWrap {
    .borderHeading {
        &:after {
            display: none;
        }
    }
}

.redBorder {
    border: 2px solid #e31837;

    &.border-bottom-none {
        border-bottom: none;
    }
}

.frameWorkItemHeading {
    padding: 10px 20px;
    border-bottom: 5px solid #fff;
}

.blackBg {
    background-color: #000;
}

.frameworkItemWrap {
    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            width: 33.33%;
            -ms-flex: 0 0 33.33%;
            flex: 0 0 33.33%;
            height: 100%;

            .frameWorkItemContent {
                padding: 15px;
                min-height: 105px;
            }
        }
    }
}

.bg_e6e7e8 {
    background-color: #e6e7e8;
}

.bg_fce6df {
    background-color: #fce6df;
}

.pillarWrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;

    .pillarItem {
        width: 33.33%;
        -ms-flex: 0 0 33.33%;
        position: relative;

        .pillarInner {
            padding-top: 30px;
            padding-top: 50px;
        }

        &::before {
            content: "";
            width: 100%;
            height: 8px;
            position: absolute;
            left: 0;
            top: 0;
            background: url(../images/corporate-governance/dashed_line.png) repeat center center;
        }

        .pillarIcon {
            width: 85px;
            height: 85px;
            border-radius: 50%;
            background-color: #4d4d4f;
            left: -15px;
            top: -40px;
            /* transform: translateX(-50%); */
            position: absolute;
            display: flex;
            justify-content: center;
            border: 10px solid #fff;
            align-items: center;
            padding: 10px;
        }
    }
}

/* start responsive */

@media(max-width: 1600px) {
    .frameworkItemWrap {
        ul {
            li {
                .frameWorkItemContent {
                    min-height: 132px;
                }
            }
        }
    }
}

@media(max-width: 1540px) {
    .practicesWrap {
        .curveBox {
            padding: 12px;

            p {
                font-size: 14px
            }
        }
    }
}

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

@media(max-width: 1280px) {
    .corporate-governance {
        .row_1.mb_100 {
            margin-bottom: 50px !important;
        }
    }

    .practicesWrap {
        .practicesWrapFx {
            .practiceItem {
                width: 100%;
                max-width: 25%;
                flex: 0 0 25%;
                -ms-flex: 0 0 25%;
            }
        }
    }
}

@media(max-width: 991px) {
    .corporate-governance {
        .row_1.mb_100 {
            margin-bottom: 30px !important;
        }

        .curveBox {
            margin-bottom: 20px;

            .curveBoxInner {
                .curveBoxText {
                    &::before {
                        left: -3px;
                    }
                }
            }
        }
    }

    .iconBoxWrap {
        padding-top: 20px;
    }

    .practicesWrap {
        .practicesWrapFx {
            .practiceItem {
                width: 100%;
                max-width: 33.33%;
                flex: 0 0 33.33%;
                -ms-flex: 0 0 33.33%;
            }
        }
    }
}

@media(max-width: 768px) {
    .frameworkItemWrap {
        ul {
            li {
                width: 100%;
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                height: 100%;
                .frameWorkItemContent {
                    min-height: auto;
                }
            }
        }
    }
}

@media(max-width: 767px) {
    .mb_50 {
        margin-bottom: 20px !important;
    }

    .doubleBorderBtmBox {
        &.mb_50 {
            margin-bottom: 50px !important;
        }
    }

    .corporate-governance {
        .iconBoxWrap {
            .iconBox {
                width: 100%;
                text-align: center;
                margin-bottom: 20px;
            }
        }
    }

    /* .frameworkItemWrap {
        ul {
            li {
                width: 100%;
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                height: 100%;
            }
        }
    } */

    .pillarWrap {
        .pillarItem {
            width: 100%;
            -ms-flex: 0 0 100%;
            position: relative;
            margin-bottom: 30px;

            &:last-child {
                margin-bottom: 0px;
            }
        }
    }

    .practicesWrap {
        .practicesWrapFx {
            .practiceItem {
                width: 100%;
                max-width: 50%;
                flex: 0 0 50%;
                -ms-flex: 0 0 50%;
            }
        }
    }
}

@media(max-width: 575px) {
    .practicesWrap {
        .practicesWrapFx {
            .practiceItem {
                width: 100%;
                max-width: 100%;
                flex: 0 0 100%;
                -ms-flex: 0 0 100%;
            }
        }
    }
}