/* =========================================================
   PA BUNTOK — MENU TRANSPARANSI
   DESKTOP : MEGA MENU
   MOBILE  : GROUP ACCORDION
========================================================= */


/* =========================================================
   DESKTOP — MEGA MENU
========================================================= */

@media (min-width: 1025px) {

    /* =====================================================
       MEGA MENU CONTAINER
    ===================================================== */

    .main-navigation
    .main-nav
    li.pa-menu-transparansi
    > ul.sub-menu {

        position: absolute;

        left: 50%;
        transform: translateX(-50%);

        width: 920px;
        max-width: calc(100vw - 40px);

        margin: 0;

        padding: 22px 24px 24px !important;

        background: #FFFFFF;

        border: 1px solid #E7ECE9;
        border-top: 0;
        border-bottom: 3px solid #C9A227;

        border-radius: 0 0 12px 12px;

        box-shadow:
            0 18px 42px rgba(16, 24, 40, .11);

        box-sizing: border-box;

        z-index: 9999;
    }


    /* =====================================================
       3 KOLOM
    ===================================================== */

    .pa-menu-transparansi-columns {

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        column-gap: 30px;

        width: 100%;
    }


    /* =====================================================
       KOLOM
    ===================================================== */

    .pa-menu-transparansi-column {

        min-width: 0;

        width: 100%;
    }


    /* =====================================================
       GROUP
    ===================================================== */

    .pa-menu-transparansi-group {

        margin: 0 0 18px;

        padding: 0;
    }


    .pa-menu-transparansi-group:last-child {

        margin-bottom: 0;
    }


    /* =====================================================
       GROUP TITLE
    ===================================================== */

    .pa-menu-transparansi-group
    > li.pa-menu-separator {

        margin: 0 0 4px;

        padding: 0;

        border: 0;

        list-style: none;
    }


    .pa-menu-transparansi-group
    .pa-menu-group-title {

        display: block;

        padding: 6px 10px 8px;

        color: #0B7A3B;

        font-size: 10px;
        font-weight: 700;

        line-height: 1.2;

        letter-spacing: 1.5px;

        text-transform: uppercase;

        border-bottom: 1px solid #E8EEEA;
    }


    /* =====================================================
       MENU ITEM
    ===================================================== */

    .pa-menu-transparansi-group
    > li:not(.pa-menu-separator) {

        margin: 0;
        padding: 0;

        list-style: none;
    }


    .pa-menu-transparansi-group
    > li:not(.pa-menu-separator)
    > a {

        display: block;

        width: 100%;

        padding: 8px 10px;

        color: #26352F;

        font-size: 13px;
        font-weight: 600;

        line-height: 1.35;

        text-decoration: none;

        border-radius: 6px;

        box-sizing: border-box;

        transition:
            background-color .18s ease,
            color .18s ease;
    }


    /* =====================================================
       HOVER
    ===================================================== */

    .pa-menu-transparansi-group
    > li:not(.pa-menu-separator)
    > a:hover {

        background: #F3F8F5;

        color: #0B7A3B;
    }

}


/* =========================================================
   MOBILE — GROUP ACCORDION
========================================================= */

@media (max-width: 1024px) {


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

    .main-navigation
    .main-nav
    li.pa-menu-transparansi
    > ul.sub-menu {

        position: static;

        display: block !important;

        width: 100% !important;
        max-width: none;

        margin: 0;

        padding: 8px 0 10px !important;

        transform: none;

        background: #FFFFFF;

        border: 0;

        border-radius: 0;

        box-shadow: none;

        box-sizing: border-box;
    }


    /* =====================================================
       GROUP
    ===================================================== */

    .pa-menu-transparansi-group {

        display: block;

        width: 100%;

        margin: 0;
        padding: 0;
    }


    /* =====================================================
       GROUP CLOSED
    ===================================================== */

    .pa-menu-transparansi-group
    > li:not(.pa-menu-separator) {

        display: none;
    }


    /* =====================================================
       GROUP OPEN
    ===================================================== */

    .pa-menu-transparansi-group.pa-group-open
    > li:not(.pa-menu-separator) {

        display: block;
    }


    /* =====================================================
       SEPARATOR
    ===================================================== */

    .pa-menu-transparansi-group
    > li.pa-menu-separator {

        display: block;

        width: 100%;

        margin: 0;
        padding: 0;

        border: 0;

        list-style: none;
    }


    /* =====================================================
       SEPARATOR BUTTON
    ===================================================== */

    .pa-menu-transparansi-group
    > li.pa-menu-separator
    > a {

        position: relative;

        display: flex !important;

        align-items: center;
        justify-content: space-between;

        width: 100%;

        min-height: 56px;

        margin: 0;

        padding: 12px 18px !important;

        background: transparent !important;

        color: #0B7A3B !important;

        font-size: 10px !important;
        font-weight: 700 !important;

        line-height: 1.2;

        letter-spacing: 1.6px;

        text-transform: uppercase;

        text-decoration: none;

        cursor: pointer;

        pointer-events: auto !important;

        border: 0;

        border-bottom: 1px solid #E8EEEA;

        box-sizing: border-box;

        transition:
            background-color .2s ease,
            color .2s ease;
    }


    /* =====================================================
       REMOVE GENERATEPRESS ICON
    ===================================================== */

    .pa-menu-transparansi-group
    > li.pa-menu-separator
    > a::before {

        display: none !important;

        content: none !important;
    }


    .pa-menu-transparansi-group
    > li.pa-menu-separator
    > a
    .gp-icon {

        display: none !important;
    }


    /* =====================================================
       RIGHT ARROW
    ===================================================== */

    .pa-menu-transparansi-group
    > li.pa-menu-separator
    > a::after {

        content: '›';

        display: flex;

        align-items: center;
        justify-content: center;

        flex: 0 0 auto;

        width: 24px;
        height: 24px;

        margin-left: 12px;

        color: #0B7A3B;

        font-size: 23px;
        font-weight: 400;

        line-height: 1;

        transform: rotate(0deg);

        transition:
            transform .22s ease;
    }


    /* =====================================================
       OPEN ARROW
    ===================================================== */

    .pa-menu-transparansi-group.pa-group-open
    > li.pa-menu-separator
    > a::after {

        transform: rotate(90deg);
    }


    /* =====================================================
       OPEN GROUP
    ===================================================== */

    .pa-menu-transparansi-group.pa-group-open
    > li.pa-menu-separator
    > a {

        background: #F7FAF8 !important;

        color: #08783F !important;
    }


    /* =====================================================
       SUBMENU ITEM
    ===================================================== */

    .pa-menu-transparansi-group
    > li:not(.pa-menu-separator)
    > a {

        display: block;

        width: 100%;

        padding: 10px 18px 10px 30px !important;

        background: #FAFCFB;

        color: #26352F;

        font-size: 14px;
        font-weight: 500;

        line-height: 1.4;

        text-decoration: none;

        border-bottom: 1px solid #F0F3F1;

        border-radius: 0;

        box-sizing: border-box;

        transition:
            background-color .18s ease,
            color .18s ease;
    }


    /* =====================================================
       REMOVE LEFT ARROW
    ===================================================== */

    .pa-menu-transparansi-group
    > li:not(.pa-menu-separator)
    > a::before {

        display: none !important;

        content: none !important;
    }


    .pa-menu-transparansi-group
    > li:not(.pa-menu-separator)
    > a
    .gp-icon {

        display: none !important;
    }


    /* =====================================================
       ITEM HOVER
    ===================================================== */

    .pa-menu-transparansi-group
    > li:not(.pa-menu-separator)
    > a:hover {

        background: #F3F8F5;

        color: #0B7A3B;
    }

}