/* HERO */

.mcu-hero{
    padding:100px 0;

    background:
    linear-gradient(
        135deg,
        #E8F8F5,
        #FFFFFF
    );

    text-align:center;
}

.mcu-label{
    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    background:
    rgba(14,159,141,.1);

    color:#0E9F8D;

    font-weight:700;
}

.mcu-hero h1{
    margin-top:20px;

    font-size:56px;

    font-weight:800;
}

.mcu-hero p{
    max-width:700px;

    margin:20px auto 0;

    color:#6B7280;

    line-height:1.9;
}


/* INTRO */

.mcu-intro{
    text-align:center;

    padding:80px 0 40px;
}


/* ROADMAP */

.mcu-roadmap{
    position:relative;

    padding-bottom:100px;
}

.mcu-roadmap::before{

    content:'';

    position:absolute;

    left:50%;

    top:0;
    bottom:0;

    width:4px;

    background:#0E9F8D;

    transform:translateX(-50%);
}


/* STEP */

.mcu-step{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

    margin-bottom:100px;

    position:relative;
}

.mcu-step.reverse{
    flex-direction:row-reverse;
}


/* IMAGE */

.step-image{
    flex:1;
}

.step-image img{
    width:100%;

    max-width:420px;

    display:block;

    margin:auto;
}


/* CONTENT */

.step-content{
    flex:1;

    background:#fff;

    padding:30px;

    border-radius:24px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);
}

.step-content span{

    color:#0E9F8D;

    font-size:48px;

    font-weight:800;
}

.step-content h3{

    margin:10px 0;

    font-size:30px;
}

.step-content p{

    color:#6B7280;

    line-height:1.8;
}
/* =========================
   MCU MOBILE
========================= */

@media(max-width:768px){

    /* HERO */
    .mcu-hero{
        padding:60px 0;
    }

    .mcu-hero h1{
        font-size:34px;

        line-height:1.2;
    }

    .mcu-hero p{
        font-size:15px;

        line-height:1.7;

        padding:0 10px;
    }


    /* INTRO */
    .mcu-intro{
        padding:50px 0 20px;
    }

    .mcu-intro h2{
        font-size:28px;
    }


    /* TIMELINE PINDAH KE KIRI */
    .mcu-roadmap::before{

        left:22px;

        transform:none;

        width:3px;
    }


    /* STEP */
    .mcu-step,
    .mcu-step.reverse{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

        margin-bottom:50px;

        padding-left:50px;

        position:relative;
    }


    /* BULAT TIMELINE */
    .mcu-step::after{

        content:'';

        position:absolute;

        left:13px;
        top:18px;

        width:18px;
        height:18px;

        border-radius:50%;

        background:#0E9F8D;

        border:4px solid #E8F8F5;

        z-index:2;
    }


    /* IMAGE */
    .step-image{
        width:100%;
    }

    .step-image img{
        max-width:240px;

        margin:0;
    }


    /* CARD */
    .step-content{

        width:100%;

        padding:20px;

        border-radius:18px;
    }


    .step-content span{
        font-size:32px;
    }

    .step-content h3{
        font-size:22px;

        margin-top:8px;
    }

    .step-content p{
        font-size:14px;

        line-height:1.7;
    }

}