/* =====================================================
   RALALI MITRA DIGITAL
   BUSINESS.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: 13px;

    padding:
        12px 16px;

    color:
        #fff;

    background:
        #087F3E;

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

}


.back-btn {

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    color:
        #fff;

    cursor:
        pointer;

}


.back-btn .material-icons {

    font-size:
        27px;

}


.header-title {

    flex: 1;

    display:
        flex;

    flex-direction:
        column;

}


.header-title h2 {

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.3;

}


.header-title span {

    font-size:
        11px;

    opacity:
        .8;

}


.header-icon {

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

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

}


.header-icon .material-icons {

    font-size:
        23px;

}


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

.hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        42px 20px 56px;

    text-align:
        center;

    color:
        #fff;

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

}


.hero::before {

    content:
        "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    border-radius:
        50%;

    top:
        -125px;

    right:
        -90px;

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

}


.hero::after {

    content:
        "";

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    border-radius:
        50%;

    bottom:
        -110px;

    left:
        -75px;

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

}


.hero-icon {

    position:
        relative;

    z-index:
        1;

    width:
        68px;

    height:
        68px;

    margin:
        0 auto 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        20px;

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

}


.hero-icon .material-icons {

    font-size:
        37px;

}


.hero-label {

    position:
        relative;

    z-index:
        1;

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

    opacity:
        .85;

}


.hero h1 {

    position:
        relative;

    z-index:
        1;

    max-width:
        650px;

    margin:
        0 auto 11px;

    font-size:
        29px;

    font-weight:
        800;

    line-height:
        1.3;

}


.hero p {

    position:
        relative;

    z-index:
        1;

    max-width:
        650px;

    margin:
        auto;

    font-size:
        13px;

    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 {

    margin-bottom:
        16px;

    padding:
        21px;

    border:
        1px solid #E5ECE8;

    border-radius:
        20px;

    background:
        #fff;

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

}


.section-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        16px;

}


.section-icon {

    width:
        47px;

    height:
        47px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    color:
        #087F3E;

    background:
        #E8F7EF;

}


.section-icon .material-icons {

    font-size:
        24px;

}


.section-heading h2 {

    color:
        #087F3E;

    font-size:
        20px;

    font-weight:
        700;

    line-height:
        1.3;

}


.section-heading p {

    margin-top:
        2px;

    color:
        #8A938E;

    font-size:
        11px;

}


.main-description {

    color:
        #68716C;

    font-size:
        13px;

    line-height:
        1.85;

}


/* =====================================================
   SERVICE GRID
===================================================== */

.service-grid {

    display:
        grid;

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

    gap:
        13px;

}


.service-item {

    padding:
        18px;

    border:
        1px solid #E3ECE7;

    border-radius:
        17px;

    background:
        #F8FBF9;

    transition:
        .25s;

}


.service-item:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 9px 22px
        rgba(0,0,0,.07);

}


.service-icon {

    width:
        48px;

    height:
        48px;

    margin-bottom:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    color:
        #087F3E;

    background:
        #E4F5EA;

}


.service-icon .material-icons {

    font-size:
        25px;

}


.service-item h3 {

    margin-bottom:
        6px;

    color:
        #222;

    font-size:
        16px;

}


.service-item p {

    color:
        #707975;

    font-size:
        12px;

    line-height:
        1.75;

}


/* =====================================================
   BENEFIT
===================================================== */

.benefit-section {

    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,.18);

}


.benefit-header {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        18px;

}


.benefit-header > .material-icons {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

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

}


.benefit-header span {

    display:
        block;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        1.2px;

    opacity:
        .8;

}


.benefit-header h2 {

    margin-top:
        2px;

    font-size:
        19px;

    line-height:
        1.35;

}


.benefit-grid {

    display:
        grid;

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

    gap:
        10px;

}


.benefit-item {

    display:
        flex;

    gap:
        10px;

    padding:
        13px;

    border-radius:
        14px;

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

}


.benefit-item > .material-icons {

    flex:
        0 0 auto;

    font-size:
        22px;

}


.benefit-item h3 {

    font-size:
        13px;

    margin-bottom:
        2px;

}


.benefit-item p {

    font-size:
        10px;

    line-height:
        1.6;

    opacity:
        .85;

}


/* =====================================================
   JOIN
===================================================== */

.join-card {

    position:
        relative;

    overflow:
        hidden;

    margin-bottom:
        16px;

    padding:
        28px 22px;

    border-radius:
        22px;

    text-align:
        center;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #075D30,
            #087F3E
        );

    box-shadow:
        0 9px 25px
        rgba(7,93,48,.18);

}


.join-card::before {

    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    border-radius:
        50%;

    right:
        -90px;

    top:
        -90px;

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

}


.join-icon {

    position:
        relative;

    z-index:
        1;

    width:
        62px;

    height:
        62px;

    margin:
        0 auto 13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        19px;

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

}


.join-icon .material-icons {

    font-size:
        34px;

}


.join-label {

    position:
        relative;

    z-index:
        1;

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

    opacity:
        .75;

}


.join-card h2 {

    position:
        relative;

    z-index:
        1;

    margin-bottom:
        9px;

    font-size:
        23px;

}


.join-card p {

    position:
        relative;

    z-index:
        1;

    max-width:
        650px;

    margin:
        0 auto 20px;

    font-size:
        12px;

    line-height:
        1.8;

    opacity:
        .92;

}


.join-btn {

    position:
        relative;

    z-index:
        1;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        11px 18px;

    border-radius:
        13px;

    color:
        #087F3E;

    background:
        #fff;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        .25s;

}


.join-btn:hover {

    transform:
        translateY(-2px);

}


.join-btn .material-icons {

    font-size:
        18px;

}


/* =====================================================
   CONTACT
===================================================== */

.contact-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}


.contact-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        14px;

    border:
        1px solid #E5ECE8;

    border-radius:
        15px;

    background:
        #F8FBF9;

}


.contact-icon {

    width:
        43px;

    height:
        43px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    color:
        #087F3E;

    background:
        #E4F5EA;

}


.contact-icon .material-icons {

    font-size:
        22px;

}


.contact-item h3 {

    margin-bottom:
        3px;

    color:
        #242824;

    font-size:
        14px;

}


.contact-item p {

    color:
        #707975;

    font-size:
        11px;

    line-height:
        1.7;

}


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

.footer {

    padding:
        38px 20px 24px;

    text-align:
        center;

    color:
        #fff;

    background:
        #075D30;

}


.footer-logo {

    width:
        55px;

    height:
        55px;

    margin:
        0 auto 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        17px;

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

}


.footer-logo .material-icons {

    font-size:
        29px;

}


.footer h3 {

    margin-bottom:
        8px;

    font-size:
        20px;

}


.footer p {

    max-width:
        600px;

    margin:
        auto;

    font-size:
        12px;

    line-height:
        1.8;

    opacity:
        .9;

}


.copyright {

    margin-top:
        20px;

    padding-top:
        14px;

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

    font-size:
        10px;

    opacity:
        .72;

}


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

@media (
    max-width: 700px
) {

    .service-grid {

        grid-template-columns:
            1fr;

    }


    .benefit-grid {

        grid-template-columns:
            1fr;

    }

}


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

@media (
    max-width: 520px
) {

    .header {

        padding:
            11px 13px;

    }


    .back-btn {

        width:
            43px;

        height:
            43px;

    }


    .header-title h2 {

        font-size:
            17px;

    }


    .hero {

        padding:
            35px 18px 48px;

    }


    .hero-icon {

        width:
            60px;

        height:
            60px;

    }


    .hero h1 {

        font-size:
            24px;

    }


    .hero p {

        font-size:
            12px;

    }


    .container {

        padding:
            0 13px 25px;

    }


    .content-card {

        padding:
            17px;

        border-radius:
            17px;

    }


    .section-heading h2 {

        font-size:
            18px;

    }


    .service-item {

        padding:
            16px;

    }


    .benefit-section {

        padding:
            18px;

        border-radius:
            17px;

    }


    .benefit-header h2 {

        font-size:
            17px;

    }


    .join-card {

        padding:
            24px 18px;

        border-radius:
            18px;

    }


    .join-card h2 {

        font-size:
            21px;

    }


    .contact-item {

        padding:
            13px;

    }


    .footer {

        padding:
            32px 16px 22px;

    }

}