/* =========================================================
   PAGE 21 - MITRA KERJA KAMI
   PT. MUSTIKA BERKAH SENTOSA
   Referensi: Company Profile PDF Page 21
   ========================================================= */


/* =========================================================
   DASAR
   ========================================================= */

.company-partners-page .partners-page {
    position: relative;

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

    color: #111111;
    background: #ffffff;
}

.company-partners-page .partners-container,
.company-partners-page .partners-offices-container,
.company-partners-page .partners-navigation-container {
    position: relative;

    width: min(
        calc(100% - 48px),
        1100px
    );

    margin-inline: auto;
}


/* =========================================================
   AREA ATAS
   ========================================================= */

.company-partners-page .partners-content {
    position: relative;

    width: 100%;

    padding:
        calc(var(--company-header-height) + 58px)
        0
        68px;

    overflow: hidden;

    background: #ffffff;
}


/* =========================================================
   HEADING
   ========================================================= */

.company-partners-page .partners-heading {
    position: relative;
    z-index: 3;

    width: 100%;
}

.company-partners-page .partners-heading h1 {
    margin: 0;

    color: #242424;

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

    font-size:
        clamp(66px, 6.2vw, 94px);

    font-weight: 400;

    line-height: 0.88;

    letter-spacing: -0.055em;
}

.company-partners-page .partners-heading h1 span,
.company-partners-page .partners-heading h1 strong {
    display: block;
}

.company-partners-page .partners-heading h1 strong {
    margin-top: 7px;

    font-weight: 800;
}


/* =========================================================
   ORNAMEN TITIK
   2 grid seperti PDF
   ========================================================= */

.company-partners-page .partners-dots {
    position: absolute;

    top: 128px;
    right: 95px;

    z-index: 1;

    width: 100px;
    height: 88px;

    pointer-events: none;
}

.company-partners-page .partners-dots::before,
.company-partners-page .partners-dots::after {
    content: "";

    position: absolute;

    background-repeat: repeat;
}

.company-partners-page .partners-dots::before {
    top: 0;
    left: 0;

    width: 50px;
    height: 50px;

    background-image:
        radial-gradient(
            circle,
            #9eb7d2 0 1.8px,
            transparent 2px
        );

    background-size:
        8px
        8px;
}

.company-partners-page .partners-dots::after {
    top: 20px;
    left: 23px;

    width: 61px;
    height: 61px;

    background-image:
        radial-gradient(
            circle,
            #123064 0 1.95px,
            transparent 2.15px
        );

    background-size:
        8px
        8px;
}


/* =========================================================
   GRID MITRA
   PDF:
   BARIS 1 = 3 KARTU
   BARIS 2 = 2 KARTU LEBAR
   ========================================================= */

.company-partners-page .partners-grid {
    position: relative;
    z-index: 3;

    width: 100%;

    margin-top: 58px;

    display: grid;

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

    gap:
        24px
        18px;
}


/* =========================================================
   KARTU
   ========================================================= */

.company-partners-page .partner-card {
    position: relative;

    min-width: 0;

    margin: 0;

    padding: 13px;

    overflow: hidden;

    background: #1a2d57;

    border-radius: 12px;
}

.company-partners-page .partner-card-small {
    grid-column: span 2;

    aspect-ratio: 1.07 / 1;
}

.company-partners-page .partner-card-wide {
    grid-column: span 3;

    aspect-ratio: 2.04 / 1;
}


/* =========================================================
   INNER PUTIH
   ========================================================= */

.company-partners-page .partner-card-inner {
    width: 100%;
    height: 100%;

    display: flex;

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

    overflow: hidden;

    background: #ffffff;

    border-radius: 8px;
}

.company-partners-page .partner-card-inner img {
    display: block;

    width: auto;
    height: auto;

    max-width: 86%;
    max-height: 84%;

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


/* =========================================================
   PENYESUAIAN PROPORSI LOGO
   ========================================================= */

.company-partners-page
.partner-card:nth-child(1)
.partner-card-inner img {
    max-width: 76%;
    max-height: 86%;
}

.company-partners-page
.partner-card:nth-child(2)
.partner-card-inner img {
    max-width: 82%;
    max-height: 78%;
}

.company-partners-page
.partner-card:nth-child(3)
.partner-card-inner img {
    max-width: 70%;
    max-height: 84%;
}

.company-partners-page
.partner-card:nth-child(4)
.partner-card-inner img {
    max-width: 88%;
    max-height: 75%;
}

.company-partners-page
.partner-card:nth-child(5)
.partner-card-inner img {
    max-width: 86%;
    max-height: 74%;
}


/* =========================================================
   AREA KANTOR
   ========================================================= */

.company-partners-page .partners-offices {
    position: relative;

    width: 100%;

    padding:
        42px
        0
        34px;

    overflow: hidden;

    color: #ffffff;

    background: #083f56;
}


/* =========================================================
   STRIPE KANAN
   ========================================================= */

.company-partners-page .partners-side-stripes {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: clamp(
        70px,
        7vw,
        105px
    );

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            #477795 0,
            #477795 54px,
            #396987 54px,
            #396987 108px
        );
}


/* =========================================================
   ORNAMEN GELOMBANG KANAN
   ========================================================= */

.company-partners-page .partners-office-wave {
    position: absolute;

    right: 36px;
    bottom: 108px;

    z-index: 2;

    width: 190px;
    height: 72px;

    opacity: 0.95;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 80' fill='none'%3E%3Cpath d='M5 50c36-31 63-30 91-11 29 20 55 19 119-22' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M8 62c34-25 62-22 89-7 29 16 60 13 111-19' stroke='%2398cce1' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


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

.company-partners-page .partners-offices-container {
    position: relative;
    z-index: 3;

    padding-right: 180px;
}


/* =========================================================
   OFFICE
   ========================================================= */

.company-partners-page .partners-office {
    position: relative;

    width: min(100%, 650px);
}

.company-partners-page
.partners-office + .partners-office {
    margin-top: 28px;
}


/* =========================================================
   OFFICE HEADING
   ========================================================= */

.company-partners-page .partners-office h2 {
    margin: 0;

    color: #ffffff;

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

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

    line-height: 1.2;

    letter-spacing: -0.025em;
}

.company-partners-page .partners-office h2 strong {
    font-weight: 800;
}


/* =========================================================
   ADDRESS
   ========================================================= */

.company-partners-page .partners-office address {
    margin:
        10px
        0
        0;

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

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

    font-size: 14px;
    font-style: normal;
    font-weight: 400;

    line-height: 1.55;
}

.company-partners-page .partners-office address span {
    display: block;
}


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

.company-partners-page .partners-contact-pill {
    width: min(100%, 520px);

    min-height: 38px;

    margin-top: 12px;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    overflow: hidden;

    border:
        1.4px solid rgba(255, 255, 255, 0.9);

    border-radius: 999px;
}

.company-partners-page .partners-contact-pill a {
    min-width: 0;

    padding:
        7px
        13px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: #ffffff;

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

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

    line-height: 1.2;

    text-decoration: none;

    transition:
        background-color 0.2s ease;
}

.company-partners-page
.partners-contact-pill a + a {
    border-left:
        1px solid rgba(255, 255, 255, 0.82);
}

.company-partners-page
.partners-contact-pill a:hover,
.company-partners-page
.partners-contact-pill a:focus-visible {
    background:
        rgba(255, 255, 255, 0.09);
}

.company-partners-page
.partners-contact-pill svg {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;

    fill: none;

    stroke: #8ecce3;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   NAVIGASI
   NAVY MENYATU DENGAN AREA KANTOR
   ========================================================= */

.company-partners-page .partners-navigation-band {
    position: relative;
    z-index: 5;

    padding:
        24px
        0
        34px;

    background: #083f56;
}


/* =========================================================
   NAV WRAPPER
   ========================================================= */

.company-partners-page .partners-page-navigation {
    width: 100%;

    margin: 0;
    padding: 0;

    display: flex;

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

    gap: 24px;
}


/* =========================================================
   NAV BUTTON
   ========================================================= */

.company-partners-page
.partners-page-navigation
.director-page-link {
    width: auto;

    min-width: 190px;
    max-width: 310px;
    min-height: 62px;

    margin: 0;

    padding:
        10px
        14px;

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

    gap: 12px;

    color: #ffffff;

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

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

    border-radius: 12px;

    box-shadow: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.company-partners-page
.partners-page-navigation
.director-page-link:hover,
.company-partners-page
.partners-page-navigation
.director-page-link:focus-visible {
    color: #ffffff;

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

    border-color:
        rgba(255, 255, 255, 0.42);
}

.company-partners-page
.partners-page-navigation
.director-page-link-next {
    margin-left: auto;

    justify-content: flex-end;

    text-align: right;
}


/* =========================================================
   NAV TEXT
   ========================================================= */

.company-partners-page
.partners-page-navigation
.director-page-link small {
    display: block;

    margin-bottom: 2px;

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

    font-size: 8px;

    line-height: 1.2;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.company-partners-page
.partners-page-navigation
.director-page-link strong {
    display: block;

    color: #ffffff;

    font-size: 11px;

    line-height: 1.35;
}

.company-partners-page
.partners-page-navigation
.director-page-arrow {
    color: #ffffff;

    font-size: 19px;

    line-height: 1;
}


/* =========================================================
   ANIMASI
   ========================================================= */

.company-partners-page .reveal-on-scroll {
    opacity: 0;

    transform: translateY(22px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.company-partners-page
.reveal-on-scroll.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1180px) {

    .company-partners-page .partners-container,
    .company-partners-page .partners-offices-container,
    .company-partners-page
    .partners-navigation-container {
        width: min(
            calc(100% - 42px),
            1040px
        );
    }

    .company-partners-page .partners-dots {
        right: 62px;
    }

    .company-partners-page
    .partners-offices-container {
        padding-right: 150px;
    }

    .company-partners-page
    .partners-office-wave {
        right: 15px;

        width: 165px;
    }
}


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

@media (max-width: 900px) {

    .company-partners-page .partners-container,
    .company-partners-page .partners-offices-container,
    .company-partners-page
    .partners-navigation-container {
        width: min(
            calc(100% - 32px),
            780px
        );
    }

    .company-partners-page .partners-content {
        padding:
            calc(var(--company-header-height) + 48px)
            0
            58px;
    }

    .company-partners-page
    .partners-heading h1 {
        font-size: 68px;
    }

    .company-partners-page .partners-dots {
        top: 110px;
        right: 28px;

        transform: scale(0.85);
    }

    .company-partners-page .partners-grid {
        margin-top: 48px;

        gap:
            18px
            14px;
    }

    .company-partners-page .partner-card {
        padding: 10px;
    }


    /* OFFICE */

    .company-partners-page .partners-offices {
        padding:
            38px
            0
            34px;
    }

    .company-partners-page
    .partners-offices-container {
        padding-right: 115px;
    }

    .company-partners-page
    .partners-side-stripes {
        width: 76px;
    }

    .company-partners-page
    .partners-office-wave {
        right: -35px;

        width: 160px;
    }

    .company-partners-page
    .partners-office h2 {
        font-size: 21px;
    }

    .company-partners-page
    .partners-office address {
        font-size: 13px;
    }
}


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

@media (max-width: 680px) {

    .company-partners-page .partners-container,
    .company-partners-page .partners-offices-container,
    .company-partners-page
    .partners-navigation-container {
        width: min(
            calc(100% - 26px),
            520px
        );
    }

    .company-partners-page .partners-content {
        padding:
            calc(var(--company-header-height) + 36px)
            0
            46px;
    }

    .company-partners-page
    .partners-heading h1 {
        font-size:
            clamp(48px, 15vw, 62px);
    }

    .company-partners-page .partners-dots {
        top: 93px;
        right: -1px;

        transform: scale(0.64);

        transform-origin: top right;
    }


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

    .company-partners-page .partners-grid {
        margin-top: 38px;

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

        gap: 12px;
    }

    .company-partners-page
    .partner-card-small,
    .company-partners-page
    .partner-card-wide {
        grid-column: auto;

        aspect-ratio: 1.35 / 1;
    }

    .company-partners-page
    .partner-card:nth-child(5) {
        grid-column: 1 / -1;

        width:
            calc(50% - 6px);

        justify-self: center;
    }


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

    .company-partners-page .partners-offices {
        padding:
            34px
            0
            38px;
    }

    .company-partners-page
    .partners-offices-container {
        padding-right: 44px;
    }

    .company-partners-page
    .partners-side-stripes {
        width: 30px;
    }

    .company-partners-page
    .partners-office-wave {
        display: none;
    }

    .company-partners-page
    .partners-office + .partners-office {
        margin-top: 32px;
    }

    .company-partners-page
    .partners-office h2 {
        font-size: 18px;
    }

    .company-partners-page
    .partners-office address {
        margin-top: 9px;

        font-size: 12px;

        line-height: 1.6;
    }

    .company-partners-page
    .partners-office address span {
        display: inline;
    }


    /* CONTACT */

    .company-partners-page
    .partners-contact-pill {
        grid-template-columns: 1fr;

        border-radius: 16px;
    }

    .company-partners-page
    .partners-contact-pill a {
        min-height: 38px;

        font-size: 11px;
    }

    .company-partners-page
    .partners-contact-pill a + a {
        border-left: 0;

        border-top:
            1px solid rgba(255, 255, 255, 0.75);
    }


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

    .company-partners-page
    .partners-navigation-band {
        padding:
            20px
            0
            28px;
    }

    .company-partners-page
    .partners-page-navigation {
        flex-direction: row;

        align-items: stretch;

        flex-wrap: nowrap;

        gap: 12px;
    }

    .company-partners-page
    .partners-page-navigation
    .director-page-link {
        width: auto;

        min-width: 118px;

        max-width:
            calc(50% - 6px);

        min-height: 56px;

        margin: 0;

        padding:
            9px
            11px;

        flex:
            0
            1
            auto;

        gap: 8px;
    }

    .company-partners-page
    .partners-page-navigation
    .director-page-link:first-child {
        margin-right: auto;

        justify-content: flex-start;

        text-align: left;
    }

    .company-partners-page
    .partners-page-navigation
    .director-page-link:last-child {
        margin-left: auto;

        justify-content: flex-end;

        text-align: right;
    }

    .company-partners-page
    .partners-page-navigation
    .director-page-link small {
        font-size: 7px;
    }

    .company-partners-page
    .partners-page-navigation
    .director-page-link strong {
        font-size: 10px;

        white-space: normal;

        overflow-wrap: anywhere;
    }

    .company-partners-page
    .partners-page-navigation
    .director-page-arrow {
        font-size: 17px;
    }
}


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

@media (max-width: 430px) {

    .company-partners-page
    .partners-heading h1 {
        font-size: 45px;
    }

    .company-partners-page
    .partners-grid {
        grid-template-columns: 1fr;
    }

    .company-partners-page
    .partner-card-small,
    .company-partners-page
    .partner-card-wide,
    .company-partners-page
    .partner-card:nth-child(5) {
        grid-column: auto;

        width: 100%;

        aspect-ratio: 1.75 / 1;
    }

    .company-partners-page
    .partners-offices-container {
        padding-right: 36px;
    }

    .company-partners-page
    .partners-office h2 {
        font-size: 17px;
    }

    .company-partners-page
    .partners-page-navigation {
        gap: 10px;
    }

    .company-partners-page
    .partners-page-navigation
    .director-page-link {
        min-width: 105px;

        max-width:
            calc(50% - 5px);

        padding:
            8px
            9px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .company-partners-page
    .reveal-on-scroll,
    .company-partners-page
    .reveal-on-scroll.is-visible {
        opacity: 1;

        transform: none;

        transition: none;
    }
}