:root {
    --company-header-height: 70px;
    --company-header-dark: #052f42;
    --company-header-main: #073f56;
    --company-header-gold: #d7ae56;
    --company-header-gold-soft: #f5ead1;
}

.company-header-top {
    position: relative;

    z-index: 1110;

    width: 100%;
    height: 34px;

    background: #052f42;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);

    color: #ffffff;
}

.company-header-top-inner {
    height: 34px;

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

    gap: 28px;
}

.company-header-top-left {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 28px;
}

.company-header-info {
    min-width: 0;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

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

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

    line-height: 1.35;

    text-decoration: none;
}

a.company-header-info {
    transition:
        color 0.18s ease;
}

a.company-header-info:hover {
    color: #ffffff;
}

.company-header-info-icon {
    width: 13px;
    height: 13px;

    flex:
        0
        0
        13px;

    color:
        var(
            --company-header-gold
        );
}

.company-header-info-icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.company-header-address {
    display: block;

    max-width: 620px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-header-phone {
    flex:
        0
        0
        auto;

    color: #ffffff;
}

.company-header-phone strong {
    font-weight: 700;
}


.company-header {
    position: sticky;

    top: 0;

    z-index: 1100;

    width: 100%;

    /*
     * Navbar tetap sticky, tetapi tidak menambah
     * jarak baru terhadap seluruh hero.
     *
     * Halaman Company Profile sebelumnya memang
     * sudah didesain untuk navbar yang overlay.
     */
    margin-bottom: -70px;

    background:
        var(
            --company-header-main
        );

    box-shadow:
        0 4px 18px
        rgba(
            3,
            40,
            55,
            0.10
        );

    overflow: visible;
}

.company-header-main {
    position: relative;

    height: 70px;

    background:
        linear-gradient(
            90deg,
            #063c51 0%,
            #073f56 50%,
            #06475e 100%
        );
}

.company-header .header-inner {
    position: relative;

    height: 70px;

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

    gap: 22px;

    overflow: visible;
}

.company-header .company-brand {
    display: inline-flex;
    align-items: center;

    flex:
        0
        0
        auto;

    text-decoration: none;
}

.company-header .company-brand-logo {
    display: block;

    width: auto;
    height: 52px;

    max-width: 175px;

    object-fit: contain;
    object-position: left center;

    float: none !important;
}


.company-header .company-navigation {
    min-width: 0;
    height: 70px;

    display: flex;
    align-items: stretch;

    gap: 0;
}

.company-header .navigation-item {
    position: relative;

    height: 70px;

    display: flex;
    align-items: stretch;
}

.company-header
.navigation-item.navigation-mega {
    position: static;
}

.company-header .navigation-link {
    position: relative;

    height: 70px;

    box-sizing: border-box;

    padding:
        0
        10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    border: 0;

    background: transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.86
        );

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

   font-size: 11px;
    font-weight: 600;
    
    line-height: 1;
    
    letter-spacing: 0.015em;

    white-space: nowrap;

    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.18s ease;
}

.company-header .navigation-link:hover,
.company-header .navigation-link.active,
.company-header
.navigation-has-dropdown.open
>
.navigation-dropdown-toggle {
    color: #ffffff;
}

.company-header .navigation-link::after {
    content: "";

    position: absolute;

    right: 10px;
    bottom: 17px;
    left: 10px;

    height: 2px;

    border-radius: 99px;

    background:
        var(
            --company-header-gold
        );

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform 0.18s ease;
}

.company-header .navigation-link:hover::after,
.company-header .navigation-link.active::after,
.company-header
.navigation-has-dropdown.open
>
.navigation-dropdown-toggle::after {
    transform:
        scaleX(1);
}

.company-header .navigation-arrow {
    position: relative;

    top: -1px;

    color:
        rgba(
            255,
            255,
            255,
            0.48
        );

    font-size: 8px;

    transition:
        transform 0.18s ease,
        color 0.18s ease;
}

.company-header
.navigation-has-dropdown.open
.navigation-arrow {
    transform:
        rotate(180deg);

    color:
        var(
            --company-header-gold
        );
}


.company-header .navigation-contact {
    height: 34px;

    align-self: center;

    margin-left: 9px;

    padding:
        0
        16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.94
        );

    border-radius: 999px;

    background: #ffffff;

    color:
        var(
            --company-header-main
        );

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.company-header .navigation-contact::after {
    display: none;
}

.company-header .navigation-contact:hover,
.company-header .navigation-contact.active {
    background:
        var(
            --company-header-gold
        );

    border-color:
        var(
            --company-header-gold
        );

    color:
        var(
            --company-header-dark
        );

    transform:
        translateY(-1px);
}


.company-header .navigation-dropdown-panel {
    position: absolute;

    top: 70px;
    left: 50%;

    z-index: 50;

    width: 285px;

    box-sizing: border-box;

    padding: 10px;

    background:
        rgba(
            255,
            255,
            255,
            0.99
        );

    border:
        1px solid
        rgba(
            7,
            63,
            86,
            0.09
        );

    border-top:
        2px solid
        var(
            --company-header-gold
        );

    border-radius:
        0
        0
        9px
        9px;

    box-shadow:
        0 18px 40px
        rgba(
            3,
            39,
            54,
            0.15
        );

    opacity: 0;
    visibility: hidden;

    transform:
        translate(
            -50%,
            4px
        );

    pointer-events: none;

    transition:
        opacity 0.14s ease,
        visibility 0.14s ease,
        transform 0.14s ease;
}

.company-header
.navigation-has-dropdown.open
>
.navigation-dropdown-panel {
    opacity: 1;
    visibility: visible;

    transform:
        translate(
            -50%,
            0
        );

    pointer-events: auto;
}


.company-header .navigation-mega-panel {
    top: 70px;
    right: 0;
    left: 0;

    width: 100%;

    padding:
        24px
        28px
        25px;

    border-radius:
        0
        0
        10px
        10px;

    transform:
        translateY(4px);
}

.company-header
.navigation-mega.open
>
.navigation-mega-panel {
    transform:
        translateY(0);
}

.company-header .navigation-mega-grid {
    display: grid;

    grid-template-columns:
        0.95fr
        0.72fr
        0.78fr
        1.35fr;

    gap: 0;
}

.company-header .navigation-mega-column {
    min-width: 0;

    padding:
        0
        24px;

    border-right:
        1px solid
        #e5eaec;
}

.company-header
.navigation-mega-column:first-child {
    padding-left: 3px;
}

.company-header
.navigation-mega-column:last-child {
    padding-right: 3px;

    border-right: 0;
}

.company-header .navigation-mega-column h3 {
    position: relative;

    margin:
        0
        0
        13px;

    padding-bottom: 8px;

    color:
        var(
            --company-header-main
        );

    font-family:
        "Montserrat",
        sans-serif;

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

    line-height: 1.3;
}

.company-header
.navigation-mega-column h3::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 22px;
    height: 2px;

    border-radius: 99px;

    background:
        var(
            --company-header-gold
        );
}


.company-header .navigation-submenu-link {
    position: relative;

    width: 100%;
    min-height: 33px;

    box-sizing: border-box;

    padding:
        7px
        9px
        7px
        11px;

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

    gap: 9px;

    border-radius: 5px;

    color: #41545d;

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

    font-size: 11.5px;
    font-weight: 500;
    
    line-height: 1.45;

    text-decoration: none;

    transition:
        color 0.17s ease,
        background-color 0.17s ease,
        padding-left 0.17s ease;
}

a.navigation-submenu-link::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 3px;
    height: 0;

    border-radius: 99px;

    background:
        var(
            --company-header-gold
        );

    transform:
        translateY(-50%);

    transition:
        height 0.17s ease;
}

a.navigation-submenu-link:hover {
    padding-left: 15px;

    background:
        linear-gradient(
            90deg,
            rgba(
                215,
                174,
                86,
                0.10
            ),
            rgba(
                238,
                245,
                247,
                0.75
            )
        );

    color: #075d77;
}

a.navigation-submenu-link:hover::before {
    height: 18px;
}

.company-header
.navigation-submenu-link.is-disabled {
    color: #9aa5a9;

    cursor: default;
}

.company-header
.navigation-submenu-link.is-disabled small {
    flex:
        0
        0
        auto;

    padding:
        2px
        6px;

    border-radius: 99px;

    background:
        var(
            --company-header-gold-soft
        );

    color: #987229;

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

    text-transform: uppercase;

    letter-spacing: 0.05em;
}


.company-header .navigation-dropdown-small {
    width: 235px;
}

.company-header .navigation-news-panel {
    width: 280px;
}

.company-header .navigation-elements-panel {
    right: 0;
    left: auto;

    width: 300px;

    transform:
        translate(
            0,
            4px
        );
}

.company-header
.navigation-has-dropdown.open
>
.navigation-elements-panel {
    transform:
        translate(
            0,
            0
        );
}

.company-header .navigation-dropdown-divider {
    height: 1px;

    margin:
        8px
        5px;

    background: #e5eaec;
}

.company-header
.navigation-submenu-highlight {
    margin-top: 2px;

    background: #f5f8f9;

    color: #075d77;

    font-weight: 700;
}

.company-header
.navigation-submenu-highlight span {
    color:
        var(
            --company-header-gold
        );
}


.company-header .mobile-menu-button {
    display: none;
}


@media (max-width: 1180px) {

    .company-header .navigation-link {
        padding:
            0
            7px;

        font-size: 8.5px;
    }

    .company-header .navigation-link::after {
        right: 7px;
        left: 7px;
    }

    .company-header .company-brand-logo {
        max-width: 155px;
    }

    .company-header
    .navigation-contact {
        padding:
            0
            13px;
    }

}


@media (max-width: 900px) {

    :root {
        --company-header-height: 66px;
    }

    .company-header-top {
        display: none;
    }

   .company-header {
        top: 0;
    
        margin-bottom: -66px;
    }

    .company-header-main,
    .company-header .header-inner {
        height: 66px;
    }

    .company-header .company-brand-logo {
        width: auto;
        height: 49px;

        max-width: 160px;
    }

    .company-header .mobile-menu-button {
        display: block;

        width: 42px;
        height: 42px;

        flex:
            0
            0
            42px;

        margin-left: auto;
    }

    .company-header .company-navigation {
        position: fixed;

        top: 66px;
        right: 12px;
        left: 12px;

        z-index: 60;

        width: auto;
        height: auto;

        max-height:
            calc(
                100vh
                -
                80px
            );

        padding: 13px;

        display: flex;
        align-items: stretch;
        flex-direction: column;

        gap: 2px;

        overflow-y: auto;

        background:
            rgba(
                5,
                54,
                73,
                0.99
            );

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                0.10
            );

        border-radius: 11px;

        box-shadow:
            0 20px 45px
            rgba(
                0,
                0,
                0,
                0.24
            );
    }

    .company-header
    .navigation-item {
        width: 100%;
        height: auto;

        display: block;
    }

    .company-header
    .navigation-item.navigation-mega {
        position: relative;
    }

    .company-header .navigation-link {
        width: 100%;
        height: 42px;

        padding:
            0
            11px;

        justify-content:
            space-between;

        color:
            rgba(
                255,
                255,
                255,
                0.90
            );

        font-size: 10.5px;

        text-align: left;
    }

    .company-header
    a.navigation-link {
        justify-content:
            flex-start;
    }

    .company-header
    .navigation-link::after {
        right: 11px;
        bottom: 2px;
        left: 11px;
    }

    .company-header
    .navigation-contact {
        width: auto;
        height: 36px;

        margin:
            8px
            7px
            4px;

        justify-content: center;

        background: #ffffff;

        color:
            var(
                --company-header-main
            );
    }

    .company-header
    .navigation-dropdown-panel,
    .company-header
    .navigation-mega-panel,
    .company-header
    .navigation-news-panel,
    .company-header
    .navigation-elements-panel,
    .company-header
    .navigation-dropdown-small {
        position: static;

        width: auto;

        margin:
            0
            6px
            7px;

        padding: 8px;

        display: none;

        background: #ffffff;

        border: 0;
        border-radius: 7px;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        pointer-events: auto;
    }

    .company-header
    .navigation-has-dropdown.open
    >
    .navigation-dropdown-panel {
        display: block;

        transform: none;
    }

    .company-header
    .navigation-mega-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .company-header
    .navigation-mega-column {
        padding:
            0
            4px
            10px;

        border-right: 0;

        border-bottom:
            1px solid
            #e4eaec;
    }

    .company-header
    .navigation-mega-column:last-child {
        padding-bottom: 0;

        border-bottom: 0;
    }

    .company-header
    .navigation-mega-column h3 {
        margin:
            4px
            7px
            7px;

        font-size: 11.5px;
    }

    .company-header
    .navigation-submenu-link {
        min-height: 33px;

        font-size: 10.5px;
    }

}