.container{
        max-width: 100%;
    }

    .caseSectionTitle {
        font-size: 1.2rem;
        padding-top: 6rem;
        padding-left: 2rem;
    }

    .caseSubTitle {
        color: #51E699;
        font-size: 1.4rem;
        padding-top: 6rem;
        padding-left: 2rem;
        padding-right: 2rem;
        font-weight: 100;
        letter-spacing: 0.01rem;
        line-height: 2rem;
    }


/* ===================== */
/* Header               */
/* ===================== */

    .headCase{
        display: flex;
        color: #fff;
        flex-direction: column;
        padding: 4rem 2rem 0 2rem;
        gap: 4rem;
    }

    .headCase div h1 {
        font-size:2.3rem;
        font-weight: 100;
        padding-top: 2rem;
    }

    .leftBox {
        align-items: flex-start;
        flex-direction: column;
        display: flex;
    }

    .headCase .leftBox ul li , .rightBox ul li{
        list-style-type: disc;
    }

    .leftBox ul{
        padding-top: 2rem;
    }

    .leftBox ul li , .rightBox ul li{
        padding-top: 0.5rem;
        line-height: 1.5rem;
        font-weight: 100;
    }

    .rightBox{
        display: flex;
        align-items: center;
        justify-content: center;
    }


/* ===================== */
/* Design Impact         */
/* ===================== */

    .designImpact {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: start; 
        gap: 2rem;
        padding:4rem 2rem 0 2rem;
    }

    .designImpact > div {
        display: flex;
        flex-direction: column; 
        align-items: center;  
        text-align: center; 
        gap: 0.5rem;
        max-width: 9rem;
    }

    .kpiColor1{
        color:#1AB0E1;
    }

    .kpiColor2{
        color:#14B864 ;
    }

    .kpiColor3{
        color:#C158C3;
    }

    .kpiColor4{
        color:#F0AC46;
    }

/* ===================== */
/* Business Context         */
/* ===================== */

    .businessImpact{
        display: flex;
        color: #fff;
        flex-direction: column;
        padding: 2rem 2rem 7rem 2rem;
        gap: 2rem;
    }

    .businessImpact .leftBox {
        align-items: center;
        justify-content: center;
        display: flex;
    }


/* ===================== */
/* Section divider       */
/* ===================== */

    .divider {
        color: #51E699;
        background-color: #002B15;
        width: 220px;
        border-radius: 3rem;
        font-size: 1.2rem;
        text-align: center;
        padding: 0.5rem 3rem;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 0%;
    }

        .dividerBottom {
        color: #51E699;
        background-color: #002B15;
        width: 220px;
        border-radius: 3rem;
        font-size: 1.2rem;
        text-align: center;
        padding: 0.5rem 3rem;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: -1%;
    }


/* ===================== */
/* Stages       */
/* ===================== */

    .bgKeyStages{
        background:url(../i/bg-pattern.png) repeat #121212;
        position: relative;
    }

.stageOne {
    display: flex;
    color: #fff;
    flex-direction: column;
    padding: 2rem 2rem 1rem 2rem;
    gap: 4rem;
}


.stageOne .rightBox img{
    width: 100%;
    height: auto;
    display: block;
}


.stageTwo {
    display: flex;
    color: #fff;
    flex-direction: column;
    padding: 2rem 2rem 4rem 2rem;
    gap: 2rem;
}

.stageTwo .leftBox {
    align-items: center;
}

.stageTwo .leftBox img{
    width: 100%;
    height: auto;
    display: block;
}


.stageThree {
    display: flex;
    color: #fff;
    flex-direction: column-reverse;
    padding: 2rem 2rem 5rem 2rem;
    gap: 2rem;
    background-image: url("../i/itau-case/benchmark.png");
    background-size: 88%;
    background-position: bottom;
    background-repeat: no-repeat;
}

.stageThree .rightBox img {
    width: 100%;
}


.stageFour {
    display: flex;
    color: #fff;
    flex-direction: column;
    padding: 2rem 2rem 2rem 2rem;
    gap: 3rem;
}

.stageFour .leftBox img {
    width: 100%;
}

.stageFour .rightBox {
    flex-direction: column;
}

.rightBox ul {
    padding-left: 2rem;
}

.stageFive{
    display: flex;
    color: #fff;
    flex-direction: column;
    padding: 2rem 2rem 9rem 2rem;
    gap: 3rem;
}

.stageFive .rightBox , .finalDesign .rightBox {
    flex-direction: column;
}


.finalDesign{
    display: flex;
    color: #fff;
    flex-direction: column;
    padding: 8rem 2rem 3rem 2rem;
    gap: 3rem;
}

.finalDesign .leftBox{
    flex-direction: column;
    display: flex;
    align-items: center;
}

.stageFive .leftBox img , .finalDesign .leftBox img{
    width: 100%;
}

.finalDesign .rightBox p{
    padding: 0;
}

.badgesList{
    display: flex;
    list-style: none;
    gap:1rem;
    justify-content: center;
    align-items: center;
}

.symbolKpiRight{
    font-size: 1rem;
    padding-right: 0.4rem;
    font-weight: bold;
}

.symbolKpi{
    font-size: 1rem;
    padding-left: 0.4rem;
    font-weight: bold;
}

.symbolKpiTitle{
    font-size: 1.5rem;
    padding-left: 0.4rem;
}

/* ===================== */
/* Breackpoints          */
/* ===================== */

    @media (min-width: 768px) {

    .w850{
        width: 850px;
        margin: 0 auto;
    }

        .headCase , .businessImpact , .stageOne , .stageThree{
            flex-direction: row;
        }

        .designImpact {
            flex-direction: row; 
            gap:4rem;
        }

        .stageOne .leftBox{
            width: 60%;
        }

        .stageTwo .leftBox img{
            width: 600px;
        }

        .stageThree .rightBox img{
            width: 524px;
        }

        .stageThree {
            padding: 2rem 2rem 10rem 2rem;
        }

        .finalDesign .rightBox p{
            padding: 0 7rem;
        }

        .finalDesign .leftBox img{
            width: 564px;
        }
    }

/* ===================== */
/* Section divider          */
/* ===================== */