/* =====================================================
   RALALI MITRA DIGITAL
   ABOUT.CSS - VERSION BARU
===================================================== */


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family:
        'Poppins',
        sans-serif;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    background:
        #f4f8f6;

    color:
        #222;

    line-height:
        1.7;

}


/* =====================================================
   HEADER
===================================================== */

.header {

    position: sticky;

    top: 0;

    z-index: 999;

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        14px 18px;

    background:
        #087F3E;

    color:
        #fff;

    box-shadow:
        0 4px 18px
        rgba(0, 0, 0, .15);

}


.back-btn {

    width: 46px;

    height: 46px;

    border: none;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(255,255,255,.15);

    color:
        #fff;

    cursor: pointer;

    transition:
        .25s;

}


.back-btn:hover {

    background:
        rgba(255,255,255,.25);

}


.back-btn .material-icons {

    font-size: 27px;

}


.header-title {

    display: flex;

    flex-direction: column;

}


.header-title h2 {

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.3;

}


.header-title span {

    margin-top:
        2px;

    font-size:
        11px;

    opacity:
        .8;

}


/* =====================================================
   HERO
===================================================== */

.hero {

    position: relative;

    overflow: hidden;

    padding:
        45px 22px 55px;

    text-align:
        center;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #087F3E,
            #0AA95A
        );

}


.hero::before {

    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.07);

    top:
        -100px;

    right:
        -70px;

}


.hero::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.05);

    bottom:
        -100px;

    left:
        -70px;

}


.hero-icon {

    position: relative;

    z-index: 1;

    width: 68px;

    height: 68px;

    margin:
        0 auto 18px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(255,255,255,.16);

    backdrop-filter:
        blur(8px);

}


.hero-icon .material-icons {

    font-size:
        38px;

}


.hero-label {

    position: relative;

    z-index: 1;

    display: block;

    margin-bottom:
        8px;

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

    opacity:
        .85;

}


.hero h1 {

    position: relative;

    z-index: 1;

    font-size:
        29px;

    font-weight:
        800;

    margin-bottom:
        12px;

}


.hero p {

    position: relative;

    z-index: 1;

    max-width:
        560px;

    margin:
        auto;

    font-size:
        14px;

    line-height:
        1.8;

    opacity:
        .94;

}


/* =====================================================
   CONTAINER
===================================================== */

.container {

    width:
        100%;

    max-width:
        900px;

    margin:
        -20px auto 0;

    padding:
        0 16px 30px;

    position:
        relative;

    z-index:
        5;

}


/* =====================================================
   CONTENT CARD
===================================================== */

.content-card {

    display:
        flex;

    gap:
        17px;

    margin-bottom:
        16px;

    padding:
        21px;

    background:
        #fff;

    border:
        1px solid #e7eee9;

    border-radius:
        20px;

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, .06);

}


.section-icon {

    flex:
        0 0 auto;

    width:
        48px;

    height:
        48px;

    border-radius:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #E8F7EF;

    color:
        #087F3E;

}


.section-icon .material-icons {

    font-size:
        25px;

}


.section-content {

    flex:
        1;

    min-width:
        0;

}


.content-card h2 {

    margin-bottom:
        8px;

    color:
        #087F3E;

    font-size:
        21px;

    font-weight:
        700;

}


.content-card p {

    color:
        #626b66;

    font-size:
        14px;

    line-height:
        1.8;

    text-align:
        left;

}


.content-card p + p {

    margin-top:
        10px;

}


/* =====================================================
   MISSION
===================================================== */

.mission-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}


.mission-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding:
        11px 12px;

    border-radius:
        12px;

    background:
        #F7FAF8;

}


.mission-item .material-icons {

    flex:
        0 0 auto;

    margin-top:
        2px;

    color:
        #0A9B51;

    font-size:
        19px;

}


.mission-item p {

    font-size:
        13px;

    line-height:
        1.65;

}


/* =====================================================
   VALUE GRID
===================================================== */

.values-card {

    align-items:
        flex-start;

}


.value-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        12px;

}


.value-item {

    padding:
        17px;

    border:
        1px solid #e7eee9;

    border-radius:
        16px;

    background:
        #F8FBF9;

    transition:
        .25s;

}


.value-item:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.08);

}


.value-icon {

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        10px;

    border-radius:
        13px;

    background:
        #E7F6ED;

    font-size:
        21px;

}


.value-item h3 {

    margin-bottom:
        5px;

    color:
        #087F3E;

    font-size:
        16px;

}


.value-item p {

    font-size:
        12px;

    line-height:
        1.65;

}


/* =====================================================
   COMMITMENT
===================================================== */

.commitment-card {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    margin-bottom:
        16px;

    padding:
        22px;

    border-radius:
        20px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #087F3E,
            #0AA95A
        );

    box-shadow:
        0 8px 25px
        rgba(8,127,62,.2);

}


.commitment-icon {

    flex:
        0 0 auto;

    width:
        50px;

    height:
        50px;

    border-radius:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,.16);

}


.commitment-icon .material-icons {

    font-size:
        27px;

}


.commitment-card h2 {

    margin-bottom:
        7px;

    font-size:
        20px;

}


.commitment-card p {

    font-size:
        13px;

    line-height:
        1.8;

    opacity:
        .94;

}


/* =====================================================
   FOOTER
===================================================== */

.footer {

    padding:
        38px 20px 25px;

    text-align:
        center;

    color:
        #fff;

    background:
        #075D30;

}


.footer-logo {

    width:
        55px;

    height:
        55px;

    margin:
        0 auto 12px;

    border-radius:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,.12);

}


.footer-logo .material-icons {

    font-size:
        29px;

}


.footer h3 {

    margin-bottom:
        8px;

    font-size:
        20px;

    font-weight:
        700;

}


.footer > p {

    max-width:
        600px;

    margin:
        auto;

    font-size:
        13px;

    line-height:
        1.8;

    opacity:
        .9;

}


.copyright {

    margin-top:
        22px;

    padding-top:
        15px;

    border-top:
        1px solid
        rgba(255,255,255,.15);

    font-size:
        11px;

    opacity:
        .75;

}


/* =====================================================
   RESPONSIVE TABLET
===================================================== */

@media (
    max-width: 768px
) {

    .hero {

        padding:
            40px 20px 50px;

    }


    .hero h1 {

        font-size:
            27px;

    }


    .container {

        padding:
            0 14px 25px;

    }


    .content-card {

        padding:
            18px;

    }

}


/* =====================================================
   RESPONSIVE MOBILE
===================================================== */

@media (
    max-width: 520px
) {

    .header {

        padding:
            12px 14px;

    }


    .back-btn {

        width:
            43px;

        height:
            43px;

    }


    .header-title h2 {

        font-size:
            17px;

    }


    .hero {

        padding:
            35px 18px 48px;

    }


    .hero-icon {

        width:
            60px;

        height:
            60px;

    }


    .hero-icon .material-icons {

        font-size:
            33px;

    }


    .hero h1 {

        font-size:
            24px;

    }


    .hero p {

        font-size:
            13px;

    }


    .content-card {

        gap:
            12px;

        padding:
            17px;

        border-radius:
            17px;

    }


    .section-icon {

        width:
            42px;

        height:
            42px;

        border-radius:
            13px;

    }


    .section-icon .material-icons {

        font-size:
            22px;

    }


    .content-card h2 {

        font-size:
            19px;

    }


    .content-card p {

        font-size:
            13px;

    }


    .value-grid {

        grid-template-columns:
            1fr;

    }


    .value-item {

        padding:
            15px;

    }


    .commitment-card {

        gap:
            12px;

        padding:
            18px;

        border-radius:
            17px;

    }


    .commitment-icon {

        width:
            43px;

        height:
            43px;

        border-radius:
            13px;

    }


    .commitment-card h2 {

        font-size:
            18px;

    }


    .commitment-card p {

        font-size:
            12px;

    }


    .footer {

        padding:
            32px 16px 22px;

    }

}