/* Responsive Menu Navbar */
@media (max-width: 1199px) {
    /*====================================== SECTION DEWAN KOMISARIS dan DIREKSI ======================================*/
    .modalbocd-content--right .btn-close {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    /*====================================== SECTION MENU NAVBAR ======================================*/
    .menu-lang {
        margin-right: 1rem;
    }

    .nav-hamburger {
        display: flex;
    }

    .container-nav .nav-logo a img {
        width: 140px;
    }

    .container-nav {
        position: relative;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 0;
    }

    .hide-menu {
        width: 100%;
    }

    #navigation {
        background-color: var(--c-transparent);
        transition: all 0.5s;
    }

    .scroll#navigation {
        background-color: var(--c-primary) !important;
    }

    .nav-menu .menu-nav {
        display: none !important;
    }

    .menu-container-mobile .nav-header {
        position: relative;
        top: 1rem;
        left: 1rem;
    }

    .menu-container-mobile .nav-header .image {
        max-width: 64px !important;
    }

    .menu-container-mobile .nav-logo-mobile {
        position: absolute;
        top: 1rem;
        left: 1rem;
    }

    .menu-container-mobile .nav-logo-mobile .image {
        max-width: 104px;
    }

    .menu-container-mobile .nav-close {
        z-index: 999;
        top: 1rem;
        right: 1rem;
    }

    .menu-container-mobile nav {
        position: relative;
        max-height: 100%;
        height: 100%;
        padding-top: 6rem;
        padding-bottom: 2rem;
        margin: 0 0 0 0;
        justify-content: space-between;
        align-items: start;
        overflow-y: auto;
        background-image: url("../images/general/graph-hais-13.png");
        background-size: 128px;
        background-repeat: no-repeat;
        background-position: bottom right;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .menu-container-mobile .menu-nav-mobile {
        width: 100%;
        height: auto;
        justify-content: start;
        margin: 0 0.5rem 0 0.5rem;
        padding: 0 1rem 1rem 0.5rem;
    }

    .menu-mobile-li .accordion-button,
    .submenu-mobile li a,
    .menu-mobile-li .menu-mobile-unsub {
        position: relative;
        background-color: var(--c-transparent);
        font-size: 18px;
        display: flex;
        align-items: center;
        padding: 1rem 0.5rem !important;
        gap: 8px;
        transition: all 0.5s;
    }

    .submenu-mobile li a {
        width: auto;
        color: var(--c-black);
    }

    .menu-mobile-li .accordion-button.collapsed::before {
        width: 0 !important;
    }

    .menu-mobile-li .accordion-button::before,
    .menu-mobile-li .menu-mobile-unsub::before {
        content: "";
        bottom: 0;
        left: 0;
        background-color: var(--c-primary);
        height: 1px;
        width: 0;
        transition: all 0.5s;
    }

    .menu-mobile-li:hover .accordion-button::before,
    .menu-mobile-li:hover .menu-mobile-unsub::before {
        width: 24px;
    }

    .menu-mobile-li .accordion-button:not(.collapsed) {
        background-color: var(--c-tertiary);
        color: var(--c-primary);
    }

    .menu-mobile-li .accordion-button:not(.collapsed)::before {
        width: 24px;
    }

    .menu-nav-mobile > li.cursor-none.active a {
        color: var(--c-primary);
        font-size: 20px;
        font-weight: 700;
    }

    .menu-nav-mobile li .accordion-item {
        border: 0;
        background-color: var(--c-transparent);
    }

    .menu-nav-mobile .menu-mobile-li.active .accordion-button,
    .menu-mobile-li.active .menu-mobile-unsub,
    .submenu-mobile li:hover a {
        color: var(--c-primary);
    }

    .menu-nav-mobile li .accordion-item .accordion-body {
        padding: 0 1rem;
    }

    .submenu-mobile > li a::before {
        content: "";
        background-color: var(--c-primary);
        height: 1px;
        width: 0;
        transition: all 0.5s;
    }

    .submenu-mobile > li:hover a::before {
        width: 24px;
    }

    .submenu-mobile > li.active a,
    .submenu-mobile > li.active:hover a,
    .menu-mobile-li.active .menu-mobile-unsub,
    .menu-mobile-li:hover .menu-mobile-unsub {
        color: var(--c-primary) !important;
    }

    .submenu-mobile > li.active a::before,
    .menu-mobile-li.active .menu-mobile-unsub::before {
        width: 24px;
    }

    .menu-mobile-li .menu-mobile-unsub {
        color: var(--c-black);
    }

    .ir-etc--img::before {
        background: linear-gradient(
            270deg,
            rgb(22 65 148 / 40%) 0%,
            #164194 100%
        ) !important;
    }
}

@media (max-width: 991px) {
    .sidebar-container {
        z-index: -2;
        pointer-events: none;
        width: 100%;
        height: 100%;
        background-color: rgb(32 32 32 / 61%);
        margin: 0 auto;
        position: fixed;
        opacity: 0;
        inset: 0;
        transition: all 0.3s;
    }

    .menu-sidebar-mobile {
        z-index: 107;
        position: fixed;
        bottom: 16px;
        left: 50%;
        transform: translate(-50%, 0);
        /* geser balik ke tengah */
        display: block;
        box-shadow:
            0px 20px 50px rgba(0, 0, 0, 0.12),
            0px 6px 20px rgba(0, 0, 0, 0.26);
        border-radius: var(--rd-lg);
        transition: 0.5s;
    }

    .menu-sidebar-mobile .btn {
        padding: 0.625rem 1rem;
        color: var(--c-white);
        background-color: var(--c-secondary);
        border-color: var(--c-white);
    }

    .menu-sidebar-mobile.is-hidden {
        transform: translate(-50%, 200%);
    }

    .sidebar-container.active {
        z-index: 107;
        pointer-events: auto;
        opacity: 1;
    }

    .menu-sidebar {
        height: fit-content;
        max-width: 480px;
        height: 365px;
        overflow: auto;
        margin: 0 auto;
        position: fixed;
        inset: 0;
        top: auto;
        bottom: 80px;
        transform: translate(0%, 250%);
        transition: all 0.6s;
    }

    .sidebar-container.active .menu-sidebar {
        transform: translate(0%, 0%);
    }

    .sidebar-container.sidebar--financial .menu-sidebar,
    .sidebar-container.sidebar--publication .menu-sidebar,
    .sidebar-container.sidebar--media .menu-sidebar {
        height: fit-content;
    }

    /*====================================== SECTION HOME ======================================*/

    .section-intermezo--container .section-intermezo--wrapper {
        padding: 0 1rem;
    }

    .hero-home--media .article-list {
        padding-right: 0rem;
    }

    .hero-home--media .article-list .article-list--image {
        display: none;
    }

    .hero-home--media .article-list .article-list--desc,
    .hero-home--media .article-list .cta {
        padding: 1rem;
    }

    .hero-home--media .cta-swiper-wrapper {
        max-width: 3.5rem;
    }

    .hero-home--media .cta-swiper--hero .swiper-hero-prev,
    .hero-home--media .cta-swiper--hero .swiper-hero-next {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .home-stock--desc {
        max-width: 100%;
    }
    /*====================================== SECTION HUBUNGAN INVESTOR - OVERVIEW ======================================*/
    .ir-strategy--list {
        flex-direction: column;
    }

    .ir-strategy--image {
        max-width: 100%;
        height: 320px;
        border-top-right-radius: var(--rd-lg);
        border-bottom-left-radius: 0;
    }

    .ir-strategy--image img {
        border-top-right-radius: var(--rd-lg);
        border-bottom-left-radius: 0;
    }

    .ir-strategy--image::before {
        right: 0;
        height: 101%;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 1) 100%
        );
    }

    .stocks-chart-wrapper {
        height: 22.5rem;
        padding: 0 2rem;
    }

    /*====================================== SECTION TENTANG KAMI - iPad Portrait ======================================*/
    .about-intermezo-left .about-intermezo-left--desc ul {
        margin-left: 20px;
    }

    /*====================================== SECTION DEWAN KOMISARIS dan DIREKSI ======================================*/
    .bocd-card--image {
        height: 400px;
        aspect-ratio: auto;
        margin: 0 auto;
    }

    .section-bi-form {
        background-size: 0;
        background-position: bottom -148px right -80px;
    }

    .row-bi-form {
        flex-direction: column-reverse;
    }

    .bi-right-content {
        position: relative;
        background-color: var(--c-white);
        padding: 1.5rem;
        border-radius: var(--rd-xl);
    }

    /*====================================== SECTION SUSTAINABILITY ======================================*/
    .pillar-list--item {
        flex-basis: calc((100% - 16px) / 1);
    }

    .pillar-list--item:nth-child(5n + 1),
    .pillar-list--item:nth-child(5n + 2) {
        flex-basis: calc((100% - 16px) / 1);
    }
}

/*Mobile General*/
@media (max-width: 767px) {
    /*====================================== SECTION COMPONENT - Mobile General ======================================*/
    h1 {
        font-size: 2.25rem;
        line-height: 1.1;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 1.25;
    }

    h3 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    h4 {
        font-size: 1.375rem;
        line-height: 1.35;
    }

    h5 {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    h6 {
        font-size: 1.125rem;
        line-height: 1.35;
    }

    p {
        font-size: 1rem;
        line-height: 1.45;
    }

    .f-xxxl {
        font-size: 2.5rem !important;
    }

    .f-xxl {
        font-size: 2rem !important;
    }

    .f-xl {
        font-size: 1.75rem !important;
    }

    .f-lg {
        font-size: 1.5rem !important;
    }

    .f-sl {
        font-size: 1.25rem !important;
        line-height: 1.3;
    }

    .f-md {
        font-size: 1.125rem !important;
    }

    .f-base {
        font-size: 1rem !important;
    }

    .f-sm {
        font-size: 0.875rem !important;
    }

    .f-xs {
        font-size: 0.75rem !important;
    }

    .f-xxs {
        font-size: 0.5rem !important;
    }

    .btn {
        padding: 12px 14px;
        line-height: 1.25;
    }

    .modal-header {
        padding: 1.5rem 1.5rem 1rem 1rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modalbocd-content--right .modal-close {
        top: 8px;
        right: 8px;
    }

    section {
        padding: 1rem 0;
    }

    .section-hero-top {
        padding-top: 7rem;
    }

    .subject-title {
        max-width: 100%;
    }

    .hero-container {
        height: 100%;
        padding: 6rem 0rem 4rem 0rem;
    }

    .hero-ornament {
        opacity: 0;
        width: 180px;
        height: 180px;
    }

    .hero-container::before {
        background: linear-gradient(
            148deg,
            rgba(25, 68, 149, 1) 0%,
            rgb(54 97 166 / 90%) 60% 60%,
            rgb(38 79 152 / 40%) 100%,
            rgb(38 79 151 / 0%) 100%
        );
    }

    .hero-container::after {
        height: 128px;
    }

    .hero-container .hero-wrapper {
        gap: 0.5rem !important;
    }

    .breadcrumb-list {
        font-size: 16px;
    }

    .breadcrumb-list li + li::before {
        margin: 0 0.25rem;
    }

    .about-content-wrapper {
        padding: 1.5rem 1rem;
    }

    .section-margin-top {
        margin-top: 0;
    }

    .empty-page--asset {
        max-width: 240px !important;
    }

    /*====================================== SECTION HOME - Mobile GENERAL ======================================*/
    .hero-home--map {
        transform: translate(-50px, -280px);
    }

    .hero-home--wrapper {
        margin-top: unset;
    }

    .hero-home {
        padding: 5.5rem 0 1rem 0;
    }

    .hero-home--gradient-bot {
        background: linear-gradient(
            180deg,
            rgb(22 65 148 / 1%) 34.18% 70%,
            #f5f9fd 100%
        );
    }

    .section-intermezo--container .section-intermezo--wrapper {
        flex-direction: column;
        gap: 0.5rem;
    }

    .intermezo-ship {
        top: 68.9%;
        left: 82%;
    }

    .intermezo-ship img {
        scale: 0.2;
    }

    .section-home-solution {
        margin-top: 0rem;
    }

    .home-sol-card.career-highlight {
        padding: 24px;
        min-height: auto;
    }

    .homesol-card-wrapper {
        display: grid !important;
        grid-template-columns: 35% 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
        align-items: start;
    }

    .home-solution-center {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    .home-solution-left {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .home-solution-right {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .home-solution-center {
        max-width: 180px !important;
    }

    .home-solution-ornament,
    .home-solution-ornament-pulse {
        position: absolute;
        width: 240px;
        height: 240px;
    }

    .section-gradient-trans {
        display: none;
    }

    .home-about--row .home-about--head,
    .home-about--row .home-about--desc {
        max-width: 100% !important;
    }

    .home-about--thumbnail {
        height: 360px;
        margin-top: 0;
    }

    .home-about--modal {
        height: 22.5rem;
    }

    .services-home--container {
        height: 1600px;
        padding: 6rem 1rem 5rem 1rem;
    }

    .services-home--article:nth-child(1) {
        top: 7%;
    }

    .services-home--article:nth-child(2) {
        top: 35%;
        left: 2%;
    }

    .services-home--article:nth-child(3) {
        top: 50%;
        right: 0%;
    }

    .services-home--article:nth-child(4) {
        top: 80%;
    }

    .services-home--article {
        max-width: 16rem;
    }

    .services-home--card {
        padding: 1rem 1.5rem 1rem 1rem;
        height: 360px;
    }

    .services-home--ornament {
        width: 4rem;
        height: 4rem;
    }

    .services-home--ship .image {
        max-width: 54px;
    }

    .services-home--ship .image h3 {
        font-size: 2rem;
    }

    .home-stock {
        max-width: 100%;
        padding: 2rem;
        display: flex;
        gap: 1.5rem;
        flex-direction: column-reverse !important;
    }

    .home-stock::before {
        background: linear-gradient(
            270deg,
            rgba(22, 65, 148, 0) -70%,
            rgba(22, 65, 148, 1) 100%
        );
    }

    .home-stock--chart {
        max-width: 100%;
        position: relative !important;
        right: 0;
        transform: none;
    }

    .home-usp {
        overflow: hidden;
        padding: 2rem 2rem 0 2rem;
    }

    .home-usp .home-usp--wrapper {
        max-width: 100%;
    }

    .home-usp .home-usp--wrapper .home-usp--desc h2,
    .home-usp .home-usp--wrapper .home-usp--desc p {
        max-width: 100%;
    }

    /*====================================== SECTION TENTANG KAMI - Mobile GENERAL ======================================*/

    .section-about-intermezo {
        background-size: 18rem;
    }

    .about-intermezo-left--desc :where(ol) {
        padding-left: 1.5rem;
    }

    .corval-1 .corval-list--header,
    .corval-2 .corval-list--header,
    .corval-3 .corval-list--header {
        border-radius: 8px;
    }

    .corval-5 .corval-list--header,
    .corval-6 .corval-list--header,
    .corval-7 .corval-list--header {
        border-radius: 8px;
    }

    .corval-1 .corval-list--body p,
    .corval-2 .corval-list--body p,
    .corval-3 .corval-list--body p,
    .corval-5 .corval-list--body p,
    .corval-6 .corval-list--body p,
    .corval-7 .corval-list--body p {
        text-align: center;
    }

    .download-compro-card {
        padding: 1.5rem;
    }

    .swiper-about-tl-pagination {
        gap: 6rem;
    }

    .swiper-about-tl-pagination .swiper-pagination-bullet.next,
    .swiper-about-tl-pagination .swiper-pagination-bullet.prev {
        font-size: 1.5rem;
    }

    .swiper-about-tl-pagination .swiper-pagination-bullet {
        font-size: 0.75rem;
    }

    .abouttimeline-content .swiper-pagination-wrapper .boat-image {
        top: -51px;
        width: 64px;
    }

    .timeline-about-card .timeline-about-card--head h2 {
        font-size: 7rem;
    }

    .swiper-about-tl .cta-swiper-tl {
        position: absolute;
        top: 40px;
        width: 100%;
    }

    .timeline-about-card .timeline-about-card--body {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: var(--c-white);
        border-radius: var(--rd-xxl);
        padding: 2rem 2rem 2rem 2rem;
        margin-top: -1rem;
        position: relative;
        overflow: hidden;
    }

    .timeline-about-card
        .timeline-about-card--body
        .timeline-about-card--body-ornament {
        max-width: 54px;
    }

    .timeline-about-card .timeline-about-card--body .cta .btn {
        width: 100%;
    }

    .cta-swiper-tl-gallery .swiper-button-prev,
    .cta-swiper-tl-gallery .swiper-button-next {
        width: 2rem !important;
        height: 2rem !important;
    }

    /*====================================== SECTION BISNIS KAMI - Mobile GENERAL ======================================*/
    .section-ob-intermezo {
        padding-bottom: 4rem;
    }

    .section-ob-list .ob-list-bg {
        top: -2rem;
        height: 720px !important;
    }

    .ob-card {
        min-height: 22.5rem;
    }

    .ob-card::before {
        background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 50%
        );
    }

    .ob-card .ob-card--content {
        padding: 2rem 2rem 4rem 1.5rem;
    }

    .ob-card .ob-card--ornament {
        max-width: 96px;
    }

    .section-ob-value {
        background-image: none !important;
    }

    .ob-value-card {
        padding: 1rem;
    }

    .ob-value-card .obvalue-card--header-title p {
        min-height: auto;
    }

    section.section-direct-subsidiary .career-highlight,
    section.section-other-subsidiary .career-highlight {
        padding: 1.5rem 1rem;
    }

    /*====================================== SECTION DEWAN KOMISARIS dan DIREKSI - MOBILE GENERAL
======================================*/
    .modalbocd-content--left {
        width: 100%;
    }

    .modalbocd-content--left .bocd-card--image {
        height: auto;
        /* aspect-ratio: auto; */
        margin: 0 auto;
    }

    .modalbocd-content--left .bocd-card--image img {
        object-fit: contain;
        object-position: bottom;
    }

    /*====================================== SECTION STRUKTUR GRUP - MOBILE GENERAL ======================================*/
    section.section-organizational-structure .skeleton-picture {
        height: 320px;
    }

    /*====================================== SECTION PENGHARGAAN DAN SERTIFIKASI - MOBILE GENERAL
======================================*/
    .investor-publikasi--image {
        padding: 0 1rem;
    }

    .awards-list .awards-list--desc-bottom {
        padding-top: 0.5rem;
    }

    /*====================================== SECTION HUBUNGAN INVESTOR - IKHTISAR KEUANGAN - Mobile General
======================================*/
    .faq-accordion .accordion-item .accordion-body,
    .finance-accordion .accordion-item .accordion-body {
        padding: 1rem 0.5rem 1rem 0.5rem;
    }

    .section-investor-publication .nav-secondary .nav-pills {
        padding: 4px;
        gap: 4px;
    }

    .section-investor-publication .nav-secondary li.nav-item,
    .section-investor-publication .nav-secondary .nav-pills .nav-link {
        padding: 8px 12px;
    }

    /*====================================== SECTION BUSINESS INQUIRY - Mobile General
======================================*/
    .bi-form-wrapper {
        padding: 1.5rem 1rem;
    }

    /*====================================== SECTION SUSTAINABILITY - Mobile General
======================================*/
    section.section-sustainability {
        margin-top: -4rem;
    }

    .pillar-list {
        transition: all 0.3s;
    }

    .pillar-card--detail .close-pillar {
        top: 0.25rem;
        right: 0.25rem;
    }

    .pillar-card .pillar-card--info {
        height: 240px;
        padding: 2rem 1rem;
    }

    .pillar-card--surface {
        padding: 1.5rem 2rem 1.5rem 1rem;
    }

    /*====================================== SECTION SUSTAINABILITY - Mobile GENERAL ======================================*/
    .csr-card {
        aspect-ratio: auto;
        height: 280px;
        width: 100%;
    }

    /*====================================== SECTION MEDIA PAGE - Mobile General ======================================*/
    section.section-media .article-list {
        flex-direction: column;
        padding-right: 0;
    }

    section.section-media .article-list .article-list--image {
        max-width: 100%;
        height: 264px;
    }

    section.section-media .article-list .article-list--desc {
        padding: 0 1rem;
    }

    section.section-public-expose .article-list .article-list--desc,
    section.section-public-expose .article-list .cta {
        padding: 0;
        margin: 0;
    }

    section.section-media .article-list .cta {
        width: 100%;
        margin: 0 0 1rem 0;
        padding: 0 1rem;
    }

    section.section-public-expose .article-list .cta a,
    section.section-media .article-list .cta a,
    section.section-media .article-list .cta button {
        width: 100%;
    }

    /*====================================== SECTION CAREER PAGE - Mobile General ======================================*/
    .career-testimoni-container::before {
        background: linear-gradient(
            90deg,
            rgb(22 65 148 / 41%) 35.93%,
            #164194 100%
        );
    }

    .career-testimoni--content {
        padding-left: 0.5rem;
        width: 100%;
    }

    .career-intermezo-right,
    .about-intermezo-right {
        max-width: 400px;
    }

    .swiper-career-testi {
        max-height: 100%;
    }

    .swiper-vertical > .swiper-pagination-bullets,
    .swiper-pagination-vertical.swiper-pagination-bullets {
        transform: none;
    }

    .career-position-header {
        padding: 1rem;
        background-size: 64px auto;
    }

    .career-position-header .menu-filter-container .form-control {
        max-width: 100%;
    }

    .career-position-header .menu-filter-container .cta .btn {
        width: 100%;
    }

    .career-list .career-list--link {
        padding: 1rem 1rem 1.25rem 1.25rem;
    }

    .career-highlight,
    .capital-market-card,
    .bi-highlight {
        padding: 1.5rem;
    }

    .career-highlight::before,
    .capital-market-card::before,
    .bi-highlight::before {
        background: linear-gradient(
            270deg,
            rgb(22 65 148 / 60%) 39.32%,
            #164194 100%
        );
    }

    /*====================================== SECTION CONTACT - Mobile General ======================================*/
    .contact-card-content .contactcard-content--body {
        padding: 1.5rem 1rem;
    }

    .bi-highlight::before {
        background: linear-gradient(
            270deg,
            rgb(22 65 148 / 30%) 39.32%,
            #164194 100%
        );
    }

    .bi-highlight {
        min-height: 27rem;
        padding: 1rem;
    }

    .bi-highlight--ship-1,
    .bi-highlight--ship-2 {
        width: 8rem;
    }

    .bi-highlight--wave-1,
    .bi-highlight--wave-2,
    .bi-highlight--wave-3 {
        height: 240px;
        top: auto;
        bottom: 0;
    }

    .bi-highlight--ship-1,
    .bi-highlight--ship-2 {
        bottom: 16px;
    }

    .bi-highlight--ship-1 {
        left: auto;
        right: 24px;
    }

    .bi-highlight--ship-2 {
        right: 14rem;
    }

    /*====================================== SECTION FOOTER - Mobile General ======================================*/
    footer {
        padding: 2rem 0 1rem 0;
    }

    .footer--wrapper {
        padding: 0 1rem;
    }

    .footer-row {
        gap: 1rem;
    }

    footer::before {
        width: 100%;
        height: 100%;
    }

    .footer--wrapper .row-gap-2 {
        row-gap: 1.5rem;
    }

    .footer-social--link {
        flex-shrink: 0;
    }

    .footer-logo .image {
        max-width: 10rem !important;
    }

    /*====================================== SECTION 503 - Mobile General ======================================*/
    .mt-layout--title h1 {
        font-size: 18rem;
        line-height: 1;
    }
}

/*Phone View - MAX / PRO Devices GENERAL */
@media (max-width: 575px) {
    .menu-container-mobile .menu-nav-mobile {
        margin-left: 0;
    }

    .menu-mobile-li .accordion-button,
    .submenu-mobile li a,
    .menu-mobile-li .menu-mobile-unsub {
        font-size: 16px;
    }

    /*====================================== SECTION COMPONENT - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .about-content--head-desc {
        max-width: 100%;
    }

    .menu-sidebar {
        height: 389px;
    }

    /*====================================== SECTION HOMEPAGE -  Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .section-intermezo--container {
        inset: 90px auto 0 auto;
    }
    .section-intermezo--body {
        flex-direction: column;
        gap: 0.5rem;
    }

    .intermezo-feature p {
        font-size: 14px;
    }

    .home-sol-card.career-highlight {
        padding: 1.25rem;
    }

    .homesol-card-wrapper {
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 12px;
        align-items: center;
    }

    .home-solution-center,
    .home-solution-left,
    .home-solution-right {
        grid-column: 1 / -1;
        grid-row: auto;
        width: auto;
        margin: 0 auto;
    }

    .home-solution-center {
        grid-row: 1;
        max-width: 128px !important;
    }

    .home-solution-left {
        grid-row: 2;
        width: 100%;
    }

    .home-solution-right {
        grid-row: 3;
        width: 100%;
    }

    .home-solution-left {
        margin-top: -2rem;
    }

    .home-about--thumbnail {
        height: 320px;
    }

    .home-about--cta {
        top: 40%;
    }

    .services-home--container {
        height: 1750px;
    }

    .services-home--article:nth-child(1) {
        top: 0;
    }

    .services-home--article:nth-child(2) {
        top: 25%;
    }

    .services-home--article:nth-child(3) {
        top: 50%;
    }

    .services-home--article:nth-child(4) {
        top: 78%;
    }

    .home-stock {
        padding: 1.5rem 1rem;
        gap: 1rem;
    }

    .home-stock--chart {
        height: 200px;
    }

    .cta-swiper-home-news {
        padding: 0.25rem;
    }

    .home-news--image {
        height: 360px;
    }

    .swiper-home-news .swiper-slide,
    .swiper-home-news .swiper-slide:not(.swiper-slide-active),
    .swiper-home-news .swiper-slide-active {
        width: 100%;
    }

    .home-news--swiper {
        padding: 0 1rem;
    }

    .home-usp {
        padding: 1rem 1rem 0 1rem;
    }

    .home-usp--ornament {
        position: relative;
        bottom: 0;
        right: 48px;
        transform: rotate(-16deg);
    }

    .home-usp--ornament .image {
        max-width: none;
        width: 360px;
    }

    .home-usp--logo .image {
        max-width: 128px;
    }

    /*====================================== SECTION INVESTOR RELATION - OVERVIEW - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .ir-etc-card {
        padding: 1.5rem 1rem;
    }

    .ir-strategy--image {
        height: 224px;
    }

    .ir-strategy--desc {
        padding: 0.5rem 0;
    }

    .ir-etc--img img {
        object-position: bottom 0 right 40%;
    }

    /*====================================== SECTION BUSINESS INQUIRY - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .bi-form-wrapper .bi-form-ornament {
        max-width: 64px;
    }

    .bi-right-content {
        padding: 1.5rem 1rem;
    }

    .file-upload {
        padding: 1rem;
    }

    .service-radio-wrapper {
        width: 100%;
        gap: 0.75rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }

    /*====================================== SECTION BUSINESS DETAIL - Mobile MAX / PRO DEVICES GENERAL
======================================*/

    .section-obd-list .obd-list-bg {
        padding: 2rem 0rem 20rem 0rem;
    }

    .section-obd-list .obd-gallery-container {
        margin-top: -18rem;
    }

    .obd-gallery-card,
    .obd-gallery-card.skeleton-card {
        width: 100%;
        padding: 0 1rem;
    }

    .obd-gallery-card img,
    .obd-gallery-card .skeleton-picture {
        aspect-ratio: auto;
        width: 100%;
        height: 320px;
    }

    .ob-list--foter {
        padding: 0 1rem;
        margin-top: -1rem;
    }

    .ob-list--foter .swiper-obd-gallery-pagination .swiper-pagination-bullet {
        width: 1rem;
    }

    .swiper-obd-gallery-pagination {
        justify-content: center !important;
        gap: 0.25rem;
    }

    .obd-desc-container {
        padding: 4rem 0;
    }

    .obd-desc-container::before {
        background: linear-gradient(
            270deg,
            rgba(22, 65, 148, 45%) 0%,
            #164194 100%
        );
    }

    .section-obd-armada {
        background-size: 128px;
        background-position: top 15vh right -5%;
    }

    .obd-armada-content .obd-armada-content--body .armada-tab-desc {
        padding: 1rem 0;
    }

    /*====================================== SECTION DEWAN KOMISARIS dan DIREKSI - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    section.section-bocd {
        background-position: top right -10%;
    }

    .bocd-headline .cta-swiper-wrapper {
        max-width: 96px !important;
    }

    .modalbocd-content--left {
        width: 100%;
    }

    /*====================================== SECTION DEWAN KOMISARIS dan DIREKSI - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .awards-list .awards-list--image {
        height: 180px;
    }

    .awards-list .awards-list--image img {
        object-fit: contain;
        padding: 0.5rem;
    }

    .awards-list .awards-list--desc-top .awards-list--title {
        min-height: auto;
    }

    .awards-list .awards-list--image .skeleton-picture {
        height: 10rem;
    }

    /*====================================== SECTION TATA KELOLA - WBS (Whistleblow) - Mobile MAX / PRO DEVICES GENERAL
======================================*/

    .faq-accordion .accordion-item .accordion-button,
    .finance-accordion .accordion-item .accordion-button {
        padding: 12px 12px 12px 12px;
    }

    /*====================================== SECTION TATA KELOLA - KOMITE AUDIT - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .card-person {
        gap: 8px;
        padding: 1rem 1rem 0 1rem;
    }

    .card-person.card-person-commite,
    .card-person.card-person--member {
        padding: 1rem;
    }

    .card-person::before {
        width: 116px;
        height: 116px;
    }

    .card-person .card-person--wrapper {
        height: auto;
        margin-top: 0;
    }

    .card-person .card-person--desc {
        width: 100%;
        height: auto;
        padding: 0;
    }

    .card-person .card-person--img {
        height: 180px !important;
    }

    /*====================================== SECTION HUBUNGAN INVESTOR - Publikasi - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .section-investor-publication .article-list,
    .section-media .article-list {
        flex-direction: column;
        gap: 12px !important;
        padding-right: 0;
    }

    .article-list-publication .article-list .article-list--image {
        flex-shrink: 0;
        height: 164px;
    }

    .article-list-publication .article-list .article-list--desc,
    .article-list-financial .article-list .article-list--desc,
    .article-list-investor .article-list .article-list--desc,
    .article-list-rups .article-list .article-list--desc {
        padding: 0;
    }

    .article-list-publication .article-list .cta,
    .article-list-financial .article-list .cta,
    .article-list-investor .article-list .cta,
    .article-list-rups .article-list .cta {
        margin-left: 0;
        padding: 0;
    }

    .article-list-publication .article-list .cta,
    .article-list-publication .article-list .cta a,
    .article-list-rups .article-list .cta,
    .article-list-rups .article-list .cta a {
        width: 100%;
    }

    /*====================================== SECTION HUBUNGAN INVESTOR - LAPORAN KEUANGAN - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .article-list-financial .article-list {
        flex-direction: row;
        gap: 12px !important;
        padding-right: 0;
    }

    .article-list-financial .article-list .article-list--image {
        flex-shrink: 0;
        height: 148px;
    }

    /*====================================== SECTION HUBUNGAN INVESTOR - PROSPEKTUS - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .prospektus-card .prospektus-card--image .skeleton-picture {
        height: 180px;
        border-radius: 0;
    }

    .prospektus-card .prospektus-card--image {
        max-width: 128px !important;
    }

    /*====================================== SECTION HUBUNGAN INVESTOR - INVESTOR NEWS - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .article-list-investor .article-list {
        padding-right: 0 !important;
    }

    .article-list-investor .article-list .article-list--image {
        max-width: 100%;
    }

    /*====================================== SECTION MEDIA - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .filter-topic-wrapper,
    .filter-year-date {
        width: 100%;
    }

    /*====================================== SECTION ARTICLE DETAIL - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .section-article-detail .hero-container {
        min-height: 30dvh;
    }

    .article-other-container .article-list {
        padding-right: 0;
        flex-direction: column;
    }

    .article-other-container .article-list .article-list--image {
        height: 204px;
        max-width: 100%;
    }

    .article-other-container .article-list .article-list--desc,
    .section-magazine-list .article-list .article-list--desc {
        padding: 0 0.5rem 0 0.5rem;
    }

    .article-other-container .article-list .cta,
    .section-magazine-list .article-list .cta {
        padding: 0 0.5rem 0rem 0.5rem;
        margin-left: 0;
        width: 100%;
    }

    .article-other-container .article-list .cta a,
    .section-magazine-list .article-list .cta a {
        width: 100%;
    }

    .section-magazine-list .article-list--image {
        max-width: 128px;
        margin: 0.5rem 0 0 0.5rem;
    }

    /*====================================== SECTION CAREER - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .career-testimoni-wrapper {
        height: 74dvh;
    }

    .swiper-career-testi .swiper-slide.swiper-slide-active .career-testi-list {
        margin: 0 auto auto auto;
    }

    .career-testi-list .career-testi--desc-top {
        max-height: 40dvh !important;
        overflow-y: auto !important;
        padding-bottom: 0;
    }

    .career-intermezo-right,
    .about-intermezo-right {
        max-width: 240px;
    }

    .career-list--desc {
        width: 100%;
    }

    .career-list---meta {
        flex-direction: column !important;
    }

    .career-testi-list .career-testi--desc-bottom {
        padding: 1rem 2rem 1rem 1rem;
        background-size: 64px auto;
    }

    .career-list .career-list--link .cta {
        margin-top: auto;
    }

    /*====================================== SECTION CONTACT - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .contactcard-content--head iframe {
        height: 280px;
    }

    .bi-highlight {
        min-height: 32rem;
        padding: 1rem;
    }

    .bi-highlight--ship-1,
    .bi-highlight--ship-2 {
        width: 8rem;
    }

    .bi-highlight--wave-1,
    .bi-highlight--wave-2,
    .bi-highlight--wave-3 {
        height: 240px;
        top: auto;
        bottom: 0;
    }

    .bi-highlight--ship-1,
    .bi-highlight--ship-2 {
        bottom: 16px;
    }

    .bi-highlight--ship-1 {
        left: auto;
        right: 24px;
    }

    .bi-highlight--ship-2 {
        right: 12rem;
    }

    /*====================================== SECTION FOOTER - Mobile MAX / PRO DEVICES GENERAL
======================================*/

    /*====================================== SECTION 404 - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .notfound-layout--title {
        top: 15%;
    }

    .notfound-layout---img {
        bottom: -16px;
    }

    .notfound-layout--title .image {
        transform: scale(1.5);
    }

    .notfound-layout--desc {
        bottom: 24px;
    }

    .notfound-layout--desc .notfound-desc--wrapper p.f-lg {
        font-size: 24px !important;
    }

    .notfound-layout--desc .notfound-desc--wrapper p.f-md {
        font-size: 18px !important;
    }

    /*====================================== SECTION 503 - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .mt-layout--title {
        margin-bottom: -7rem;
    }

    .mt-layout--title h1 {
        font-size: 14rem;
        line-height: 1;
    }

    .mt-layout--desc {
        margin-top: -3rem;
    }
}

/*Mobile (Small Phone - Normal Phone)*/
@media (max-width: 399px) {
    .ob-card::before {
        background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 35%
        );
    }

    .ob-card .ob-card--ornament {
        max-width: 64px;
    }

    /*====================================== SECTION HOME - Mobile SMALL - Normal ======================================*/

    .intermezo-ship img {
        scale: 0.2;
    }

    /*====================================== SECTION BUSINESS OVERVIEW - Mobile SMALL - Normal
======================================*/
    .ir-strategy--image {
        height: 224px;
    }

    .stocks-chart-wrapper {
        padding: 0 1rem;
    }

    .stocks-chart-wrapper {
        height: 20rem;
    }

    /*====================================== SECTION BUSINESS INQUIRY - MOBILE Small - Normal
======================================*/

    /* .form-service-wrapper {
width: 100%;
} */
    .bi-form-wrapper .nav-secondary {
        width: 100%;
    }

    .form-service-label {
        padding: 1rem 0.5rem 1rem 2rem;
    }

    /*====================================== SECTION STRUKTUR GRUP - MOBILE Small - Normal
======================================*/
    section.section-organizational-structure
        .about-content-wrapper
        .about-content--head {
        text-align: center;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /*====================================== SECTION TATA KELOLA - KOMITE AUDIT - MOBILE Small - Normal
======================================*/
    .card-person {
        text-align: center;
    }

    .card-person--title {
        width: 100%;
    }

    .card-person .card-person--desc .cta {
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translate(-50%);
    }

    .card-person .card-person--desc .cta button {
        padding: 6px 16px 20px 1rem;
        background-color: var(--c-white);
        color: var(--c-primary);
        border-color: var(--c-white);
    }

    .card-person.card-person-commite .card-person--desc .cta,
    .card-person.card-person--member .card-person--desc .cta {
        position: static;
        bottom: -12px;
        left: 50%;
        transform: none;
    }

    .card-person.card-person-commite .card-person--desc .cta button,
    .card-person.card-person--member .card-person--desc .cta button {
        padding: 12px 14px;
        background-color: var(--c-white);
        color: var(--c-primary);
        border-color: var(--c-white);
    }

    /*====================================== SECTION MEDIA - MOBILE Small - Normal ======================================*/

    section.section-media .article-list .article-list--image {
        height: 204px;
    }

    /*====================================== SECTION 404 - MOBILE Small - Normal ======================================*/
    .notfound-layout--title .image {
        transform: scale(1.75);
    }

    .notfound-layout--desc .notfound-desc--wrapper p.f-md {
        font-size: 16px !important;
    }

    /*====================================== SECTION 503 - MOBILE Small - Normal ======================================*/
    .mt-layout--title {
        margin-bottom: -5rem;
    }

    .mt-layout--title h1 {
        font-size: 10rem;
        line-height: 1;
    }

    .mt-layout--desc {
        margin-top: -3rem;
    }
}

/*Phone View - MAX / PRO Devices*/
@media (min-width: 400px) and (max-width: 575px) {
    /*====================================== SECTION COMPONENT - Mobile MAX / PRO DEVICES
======================================*/

    /*====================================== SECTION TATA KELOLA - KOMITE AUDIT - Mobile MAX / PRO DEVICES
======================================*/
    .card-person .card-person--wrapper {
        flex-direction: row !important;
    }
}

/*Phone Medium*/
@media (min-width: 576px) and (max-width: 767px) {
    /*====================================== SECTION HOMEPAGE - Mobile MAX / PRO DEVICES GENERAL
======================================*/

    .swiper-home-news .swiper-slide,
    .swiper-home-news .swiper-slide:not(.swiper-slide-active),
    .swiper-home-news .swiper-slide-active {
        width: 100%;
    }

    .home-usp--ornament {
        position: relative;
        bottom: 0;
        right: 0;
        transform: rotate(-8deg);
    }

    .home-usp--ornament .image {
        max-width: 480px;
    }

    .home-usp--logo .image {
        max-width: 180px;
    }

    /*====================================== SECTION BISNIS KAMI - Mobile MAX / PRO DEVICES GENERAL
======================================*/
    .ob-card::before {
        background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 30%
        );
    }

    .ob-card .ob-card--content {
        padding-bottom: 5rem;
    }

    .section-ob-list .ob-list-bg {
        height: 85% !important;
    }

    /*====================================== SECTION BUSINESS DETAIL - Mobile MAX / PRO DEVICES GENERAL
======================================*/

    .section-obd-list .obd-list-bg {
        padding: 2rem 0rem 14rem 0rem;
    }

    .section-obd-list .obd-gallery-container {
        margin-top: -13rem;
    }

    .obd-gallery-card,
    .obd-gallery-card.skeleton-card {
        width: 100%;
        /* padding: 0 1rem; */
    }

    .obd-gallery-card img,
    .obd-gallery-card .skeleton-picture {
        aspect-ratio: auto;
        height: 360px;
    }

    .ob-list--foter {
        padding: 0 1rem;
        margin-top: -1rem;
    }

    .obd-armada-content .obd-armada-content--body .armada-tab-desc {
        padding: 1rem 0;
    }

    /*====================================== SECTION TATA KELOLA - KOMITE AUDIT - MOBILE Medium
======================================*/

    .card-person--desc {
        width: 100%;
    }

    .card-person .card-person--title {
        max-width: 18rem;
    }

    /*====================================== SECTION MEDIA DETAIL - MOBILE Medium ======================================*/

    .article-other-container .article-list .article-list--desc {
        padding-bottom: 0;
    }

    .article-other-container .article-list .cta {
        padding: 0 0 1rem 0;
        margin-left: 0;
    }

    /*====================================== SECTION CAREER - MOBILE Medium ======================================*/
    .career-intermezo-wrapper {
        flex-direction: row !important;
    }

    .career-testimoni--content {
        padding-left: 1rem;
    }

    .career-intermezo-right,
    .about-intermezo-right {
        max-width: 320px;
    }

    .career-testimoni-wrapper {
        height: 75dvh;
    }

    .swiper-career-testi .swiper-slide.swiper-slide-active .career-testi-list {
        margin: auto auto auto auto;
    }

    .career-list .career-list--link {
        padding: 1rem 3.5rem 1.25rem 1.25rem;
    }

    .career-position-header .menu-filter-container .form-control {
        max-width: 7rem;
    }

    .career-position-header {
        background-size: 64px auto;
    }

    /*====================================== SECTION GALLERY - MOBILE Medium ======================================*/

    .media-gallery--image {
        height: 148px;
    }

    /*====================================== SECTION 404 - MOBILE Medium ======================================*/
    .notfound-layout--title {
        top: 20%;
    }

    .notfound-layout--title .image {
        transform: scale(1.35);
    }

    .notfound-layout--desc {
        bottom: 5%;
    }
}

/*Phone FOLD Unfolded View*/
@media (min-width: 0) and (max-width: 316px) {
    .home-usp--ornament {
        position: relative;
        bottom: 0;
        right: 64px;
        transform: rotate(-16deg);
    }

    .home-usp--ornament .image {
        max-width: none;
        width: 300px;
    }

    .home-usp--logo .image {
        max-width: 128px;
    }

    /*====================================== SECTION SUSTAINABILITY - Mobile Folded ======================================*/
    .pillar-card .pillar-card--info {
        height: 280px;
    }

    .pillar-card .pillar-card--title {
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    .pillar-card--surface {
        padding: 1.5rem 1rem 1.5rem 1rem;
    }

    .pillar-card--cta {
        position: absolute !important;
        bottom: 8px;
        right: 8px;
    }

    /*====================================== SECTION CAREER - Mobile Folded ======================================*/
    .career-testimoni--content {
        padding-left: 0rem;
    }

    .career-testimoni-wrapper {
        margin-top: 3rem;
        height: 75dvh;
        flex-direction: column;
    }

    .career-testi--desc-avatar {
        flex-shrink: 0;
    }

    .swiper-vertical > .swiper-pagination-bullets,
    .swiper-pagination-vertical.swiper-pagination-bullets {
        display: flex;
        gap: 0.5rem;
        transform: translate3d(0px, -50%, 0);
    }

    .prospektus-card {
        flex-direction: column;
        gap: 8px !important;
    }

    .bi-highlight {
        min-height: 33rem;
    }

    .bi-highlight--ship-2 {
        right: 8rem;
    }

    .ob-card {
        min-height: 100%;
    }

    .ob-card::before {
        background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 30%
        );
    }

    .ob-card .ob-card--content {
        padding-bottom: 6rem;
    }

    /*====================================== SECTION CONTACT - MOBILE Folded ======================================*/

    .bi-highlight--ship-1,
    .bi-highlight--ship-2 {
        width: 6rem !important;
        bottom: 16px;
    }

    .bi-highlight--wave-1,
    .bi-highlight--wave-2,
    .bi-highlight--wave-3 {
        height: 240px;
        top: auto;
        bottom: 0;
    }

    .bi-highlight--ship-1 {
        left: auto;
        right: 24px;
    }

    .bi-highlight--ship-2 {
        right: 8rem;
    }

    /*====================================== SECTION 503 - MOBILE Folded ======================================*/
    .mt-layout--title {
        margin-bottom: -3.5rem;
    }

    .mt-layout--title h1 {
        font-size: 7rem;
        line-height: 1;
    }

    .mt-layout--desc {
        margin-top: -2rem;
    }
}

@media (max-width: 767px) and (min-height: 750px) {
}

/* Portrait iPad */
@media (min-width: 768px) and (max-width: 991px) {
    /*====================================== SECTION COMPPONENT - iPad Portrait ======================================*/

    .menu-container-mobile {
        width: 50%;
    }

    .hero-container::before {
        background: linear-gradient(
            148deg,
            rgba(25, 68, 149, 1) 0%,
            rgb(54 97 166 / 80%) 60% 60%,
            rgb(38 79 152 / 40%) 100%,
            rgb(38 79 151 / 0%) 100%
        );
    }

    .hero-container::after {
        height: 50%;
        background: linear-gradient(
            0deg,
            rgb(245 249 253) 0%,
            rgba(255, 255, 255, 0) 80%
        );
    }

    .hero-container {
        height: 30rem;
        padding: 8rem 0 5rem 0;
    }

    .hero-ornament {
        width: 180px;
        height: 180px;
    }

    .breadcrumb-list {
        font-size: 16px;
    }

    .empty-page--asset {
        max-width: 240px !important;
    }

    .modal-body {
        padding: 1.5rem;
    }

    /*====================================== SECTION HOME - iPad Portrait ======================================*/

    .hero-home--wrapper {
        margin-top: unset;
    }

    .hero-home {
        padding: 5.5rem 0 1rem 0;
    }

    .hero-home--ornament {
        max-width: 48px;
        top: 670px;
        right: 165px;
        left: unset;
    }

    .intermezo-ship {
        top: 69.4%;
    }

    .intermezo-ship img {
        scale: 0.5;
    }

    .home-sol-card.career-highlight {
        padding: 16px;
        min-height: auto;
    }

    .home-solution-left,
    .home-solution-right {
        max-width: 280px;
        position: absolute;
        top: 80px;
    }

    .home-solution-left {
        top: 104px;
        left: -16px;
    }

    .home-solution-right {
        right: -16px;
    }

    .home-solution-center {
        max-width: 180px !important;
    }

    .home-solution-ornament,
    .home-solution-ornament-pulse {
        position: absolute;
        width: 360px;
        height: 360px;
    }

    .home-about--row .home-about--head,
    .home-about--row .home-about--desc {
        max-width: 100% !important;
    }

    section.section-home-about {
        padding-top: 0;
    }

    .home-about--thumbnail {
        height: 400px;
        margin-top: -24px;
    }

    .home-about--modal {
        height: 20rem;
    }

    .services-home--container {
        height: 1500px;
        padding: 6rem 1rem 5rem 1rem;
    }

    .services-home--article:nth-child(2) {
        top: 35%;
        left: 2%;
    }

    .services-home--article:nth-child(3) {
        top: 50%;
        right: 4%;
    }

    .services-home--article:nth-child(4) {
        top: 70%;
    }

    .services-home--article {
        max-width: 17.5rem;
    }

    .services-home--card {
        padding: 1rem 1.5rem 1rem 1rem;
        height: 360px;
    }

    .services-home--ornament {
        width: 4rem;
        height: 4rem;
    }

    .services-home--ship .image {
        max-width: 64px;
    }

    .services-home--ship .image h3 {
        font-size: 2rem;
    }

    .home-stock {
        max-width: 100%;
        padding: 2rem;
        display: flex;
        gap: 1.5rem;
        flex-direction: column-reverse !important;
    }

    .home-stock::before {
        background: linear-gradient(
            270deg,
            rgba(22, 65, 148, 0) -70%,
            rgba(22, 65, 148, 1) 100%
        );
    }

    .home-stock--chart {
        position: relative !important;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: 280px;
    }

    .home-usp {
        overflow: hidden;
        padding: 3rem;
    }

    .home-usp .home-usp--wrapper {
        max-width: 100%;
    }

    .home-usp .home-usp--wrapper .home-usp--desc h2 {
        max-width: 75%;
    }

    .home-usp .home-usp--wrapper .home-usp--desc p {
        max-width: 50%;
    }

    .home-usp--ornament {
        bottom: 0;
        right: 0;
        transform: rotate(-24deg);
    }

    .home-usp--ornament .image {
        max-width: 540px;
    }

    .home-usp--logo .image {
        max-width: 180px;
    }

    /*====================================== SECTION TENTANG KAMI - iPad Portrait ======================================*/

    .section-about-intermezo {
        background-size: 20rem;
    }

    .section-about-intermezo .about-intermezo-right {
        max-width: 420px;
    }

    .about-intermezo-left--desc :where(ol) {
        padding-left: 1.5rem;
    }

    .corval-1 .corval-list--header,
    .corval-2 .corval-list--header,
    .corval-3 .corval-list--header {
        border-radius: 8px;
    }

    .corval-5 .corval-list--header,
    .corval-6 .corval-list--header,
    .corval-7 .corval-list--header {
        border-radius: 8px;
    }

    .corval-1 .corval-list--body p,
    .corval-2 .corval-list--body p,
    .corval-3 .corval-list--body p,
    .corval-5 .corval-list--body p,
    .corval-6 .corval-list--body p,
    .corval-7 .corval-list--body p {
        text-align: center;
    }

    /*====================================== SECTION BISNIS KAMI - iPad Portrait ======================================*/
    .section-ob-intermezo,
    .section-sustainability {
        margin-top: -4.5rem;
        padding-bottom: 5rem;
    }

    .section-ob-list .ob-list-bg {
        position: absolute;
        top: -2.5rem;
        height: 520px !important;
    }

    .ob-card {
        min-height: 32rem;
    }

    .ob-card::before {
        background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0) 2.67%,
            rgba(255, 255, 255, 1) 55%
        );
    }

    .ob-card .ob-card--content {
        padding: 2rem 2rem 3rem 2rem;
    }

    .ob-card .ob-card--ornament {
        max-width: 96px;
    }

    .ob-value-card .obvalue-card--header-title p {
        min-height: auto;
    }

    /*====================================== SECTION DEWAN KOMISARIS dan DIREKSI - iPad Portrait
======================================*/
    section.section-bocd {
        background-size: 20% auto;
        background-position: top right -5%;
    }

    .bocd-headline h3 {
        font-size: 1.75rem !important;
    }

    .bocd-headline .cta-swiper-wrapper {
        max-width: 96px !important;
        margin-right: 16px;
    }

    .boc-list--item .bocd-card::after {
        background-size: 25%;
    }

    .modalbocd-content--left .bocd-card--image img {
        object-fit: contain;
    }

    #modalKomisaris .modal-dialog,
    #modalDireksi .modal-dialog {
        max-width: 640px;
    }

    .modalbocd-content--left {
        width: 100%;
    }

    .modalbocd-content--left .modalbocd-content--left-wrapper {
        position: relative;
    }

    .bocd-card--link .cta {
        opacity: 1;
    }

    .bocd-card--link .cta::after,
    .bocd-card--link:hover .cta::after {
        background: rgb(255 255 255 / 35%);
        opacity: 1;
        transform: scale(4);
    }

    /*====================================== SECTION NAVBAR - iPad Portrait ======================================*/

    /*====================================== SECTION ABOUT PAGE - iPad Portrait ======================================*/

    /*====================================== SECTION SHIPPING SERVICES - iPad Mini Portrait
======================================*/
    .section-obd-armada {
        background-size: 204px;
        background-position: top 35vh right -5%;
        padding-bottom: 0;
    }

    /*====================================== SECTION TATA KELOLA - KOMITE AUDIT - iPad Mini Portrait
======================================*/
    .card-person .card-person--title {
        max-width: 28rem;
    }

    /*====================================== SECTION SUSTAINABILITY - iPad Portrait ======================================*/
    .pillar-card--surface {
        padding: 2rem 2.5rem 1.5rem 2rem;
    }

    /*====================================== SECTION GALLERY - iPad Portrait ======================================*/

    .media-gallery--image {
        height: 164px;
    }

    /*====================================== SECTION CONTACT - iPad Portrait ======================================*/
    .bi-highlight {
        padding: 1rem 1.5rem;
        min-height: 480px;
    }

    .bi-highlight::before {
        background: linear-gradient(
            270deg,
            rgb(22 65 148 / 30%) 39.32%,
            #164194 100%
        );
    }

    .bi-highlight--ship-1,
    .bi-highlight--ship-2 {
        width: 10rem;
    }

    .bi-highlight--wave-1,
    .bi-highlight--wave-2,
    .bi-highlight--wave-3 {
        height: 240px;
        top: auto;
        bottom: 0;
    }

    .bi-highlight--ship-1,
    .bi-highlight--ship-2 {
        bottom: 0;
    }

    .bi-highlight--ship-1 {
        left: auto;
        right: 32px;
    }

    .bi-highlight--ship-2 {
        right: 14rem;
    }

    /*====================================== SECTION CAREER - iPad Portrait ======================================*/
    .career-testimoni-container::before {
        background: linear-gradient(
            90deg,
            rgb(22 65 148 / 41%) 35.93%,
            #164194 100%
        );
    }

    .career-testimoni--content {
        margin: auto;
    }

    .career-highlight,
    .capital-market-card,
    .bi-highlight {
        padding: 2rem 2.5rem;
    }

    .swiper-vertical > .swiper-pagination-bullets,
    .swiper-pagination-vertical.swiper-pagination-bullets {
        transform: translate3d(0px, -0%, 0);
    }

    .career-highlight::before,
    .capital-market-card::before {
        background: linear-gradient(
            270deg,
            rgb(22 65 148 / 50%) 39.32%,
            #164194 100%
        );
    }

    .career-testi-list .career-testi--desc-bottom {
        padding: 1rem 3rem 1rem 1rem;
    }

    .career-position-header .menu-filter-container .form-control {
        max-width: 12rem;
    }

    /*====================================== SECTION CONTACT - iPad ======================================*/

    .contactcard-content--head iframe {
        height: 400px;
    }

    /*====================================== SECTION FOOTER - iPad Portrait ======================================*/
    .footer--wrapper {
        padding: 0 3rem;
    }

    .footer-row {
        gap: 1rem;
    }

    /*====================================== SECTION 404 - iPad Portrait ======================================*/

    .notfound-layout--title .image {
        transform: scale(1.35);
    }

    .notfound-layout--title {
        top: 20%;
    }

    .notfound-layout--desc {
        bottom: 10%;
    }
}

/* Landscape iPad Air and another Tab */
@media only screen and (min-device-width: 768px) and (max-device-width: 1180px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    /*====================================== SECTION NAVBAR - iPad LANDSCAPE ======================================*/
    /*====================================== SECTION HOME - iPad LANDSCAPE ======================================*/
    .hero-container {
        height: 30rem;
    }

    .hero-home--map {
        transform: translate(-70px, -480px);
    }

    .section-intermezo--container .section-intermezo--wrapper {
        padding: 0 1rem;
    }

    .hero-home--ornament {
        right: 200px;
    }

    .services-home--container {
        height: 1500px;
        padding: 7rem 1rem 5rem 1rem;
    }

    .services-home--article:nth-child(2) {
        top: 35%;
        left: 5%;
    }

    .services-home--article:nth-child(3) {
        top: 55%;
        right: 8%;
    }

    .services-home--article:nth-child(4) {
        top: 70%;
    }

    .services-home--article {
        max-width: 20rem;
    }

    .services-home--card {
        padding: 1.5rem;
        height: 380px;
    }

    .services-home--ornament {
        width: 4rem;
        height: 4rem;
    }

    .services-home--ship .image {
        max-width: 64px;
    }

    .home-stock {
        padding: 3rem 8rem 3rem 3rem;
    }

    .home-stock--chart {
        /* right: -25%; */
        transform: translate(0%, 30%);
        height: 224px;
    }

    .home-usp {
        overflow: hidden;
        padding: 3rem;
    }

    .home-usp .home-usp--wrapper {
        max-width: 100%;
    }

    .home-usp .home-usp--wrapper .home-usp--desc h2 {
        max-width: 75%;
    }

    .home-usp .home-usp--wrapper .home-usp--desc p {
        max-width: 50%;
    }

    .home-usp--ornament {
        bottom: 0;
        right: 0;
        transform: rotate(-24deg);
    }

    .home-usp--ornament .image {
        max-width: 540px;
    }

    .home-usp--logo .image {
        max-width: 180px;
    }

    /*====================================== SECTION BISNIS KAMI - iPad LANDSCAPE ======================================*/
    .section-ob-intermezo {
        padding-bottom: 5rem;
    }

    .section-ob-list .ob-list-bg {
        position: absolute;
        top: -2.5rem;
        height: 564px !important;
    }

    /*====================================== SECTION SHIPPING SERVICES - iPad Mini Landscape
======================================*/
    .section-obd-armada {
        background-size: 204px;
        background-position: top 45vh right -5%;
        padding-bottom: 0;
    }

    .obd-armada-content .obd-armada-content--body .armada-tab-desc {
        padding: 2rem 0;
    }

    /*====================================== SECTION SUSTAINABILITY - iPad LANDSCAPE
======================================*/
    .section-sustainability {
        margin-top: -5rem;
    }

    .pillar-list--item {
        flex-basis: calc((100% - 16px) / 1) !important;
    }

    /*====================================== SECTION CONTACT - iPad LANDSCAPE ======================================*/
    .bi-highlight {
        padding: 2rem;
        min-height: 480px;
    }

    .bi-highlight--wave-1,
    .bi-highlight--wave-2,
    .bi-highlight--wave-3 {
        height: 280px;
        top: auto;
        bottom: 0;
    }

    .bi-highlight--ship-1,
    .bi-highlight--ship-2 {
        max-width: 13rem;
        bottom: -16px;
    }

    .bi-highlight--ship-1 {
        left: auto;
        right: 32px;
    }

    .bi-highlight--ship-2 {
        right: 16rem;
    }

    /*====================================== SECTION CAREER PAGE - IPAD LANDSCAPE ======================================*/
    .hero-container::before {
        background: linear-gradient(
            148deg,
            rgb(25 68 149) 10%,
            rgb(54 97 166) 30%,
            rgb(255 255 255 / 15%) 80%,
            rgba(255, 255, 255, 0) 100%
        );
    }

    .hero-container::after {
        height: 128px;
    }

    .hero-ornament {
        width: 240px;
        height: 240px;
    }

    .swiper-career-testi {
        max-height: 33.5rem;
    }

    /*====================================== SECTION 404 - iPad LANDSCAPE ======================================*/

    /*====================================== SECTION FOOTER ======================================*/
}

/* Landscape iPad Mini and another Tab */
@media only screen and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    /*====================================== SECTION HOME PAGE - iPad Mini Landscape ======================================*/

    .section-intermezo--container .section-intermezo--wrapper {
        padding: 0 1rem;
    }

    .hero-home--ornament {
        max-width: 48px;
        top: unset;
        bottom: 335px;
        right: 165px;
        left: unset;
    }

    .intermezo-ship img {
        scale: 0.5;
    }

    /*====================================== SECTION SHIPPING SERVICES - iPad Mini Landscape
======================================*/

    .obd-desc-container::before {
        background: linear-gradient(
            270deg,
            rgba(22, 65, 148, 0) 0%,
            #164194 100%
        );
    }

    .obd-gallery-card img,
    .obd-gallery-card .skeleton-picture {
        aspect-ratio: 10 / 11;
    }

    /*====================================== SECTION 404 - iPad Mini Landscape ======================================*/
}

/* iPad Pro Portrat & Tab 1024 Portrait */
@media only screen and (device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    /*====================================== SECTION HOME PAGE - iPad Pro Portrait ======================================*/
    .hero-home--wrapper {
        margin-top: unset;
    }

    .section-intermezo--container .section-intermezo--wrapper {
        padding: 0 1rem;
    }

    .hero-home--ornament {
        max-width: 48px;
        top: unset;
        bottom: 335px;
        right: 165px;
        left: unset;
    }

    .intermezo-ship {
        top: 69.4%;
    }

    .intermezo-ship img {
        scale: 0.4;
    }

    .home-about--thumbnail {
        height: 480px;
        margin-top: -64px;
    }

    .services-home--container {
        padding: 7rem 1rem 5rem 1rem;
    }

    .services-home--article:nth-child(2) {
        top: 35%;
        left: 5%;
    }

    .services-home--article:nth-child(3) {
        top: 55%;
        right: 8%;
    }

    .services-home--article:nth-child(4) {
        top: 70%;
    }

    .services-home--article {
        max-width: 20rem;
    }

    .services-home--card {
        padding: 1.5rem;
        height: 380px;
    }

    .services-home--ship .image {
        max-width: 64px;
    }

    .home-stock {
        padding: 3rem 13.5rem 3rem 3rem;
    }

    .home-usp {
        overflow: hidden;
    }

    .home-usp--ornament {
        bottom: 0;
        right: 4px;
        transform: rotate(-16deg);
    }

    .home-usp--ornament .image {
        max-width: 720px;
    }

    /*====================================== SECTION 404 - iPad Pro PORTRAIT ======================================*/
    .notfound-layout--title .image {
        max-width: 540px;
        transform: scale(1.35);
    }

    .notfound-layout--desc {
        bottom: 10%;
    }
}

/* Small Laptop */
@media (min-width: 992px) and (max-width: 1199px) {
    /*====================================== SECTION COMPPONENT - Small Laptop ======================================*/

    .menu-container-mobile {
        width: 50%;
    }
    /*====================================== SECTION HUBUNGAN INVESTOR - OVERVIEW - SMALL LAPTOP
======================================*/
    .ir-etc-card {
        height: 290px;
    }

    /*====================================== SECTION DEWAN KOMISARIS - Small Laptop ======================================*/
    .bocd-card--image {
        aspect-ratio: auto;
        height: 100%;
    }

    .modalbocd-content--left .modalbocd-content--left-wrapper {
        height: 100%;
    }

    /*====================================== SECTION KOMITE AUDIT - Small Laptop ======================================*/
    .card-person .card-person--title {
        max-width: 22rem;
    }

    /*====================================== SECTION FOOTER - Small Laptop ======================================*/

    .footer--wrapper {
        padding: 0 2rem;
    }
}

/* 11-12 Inch */
@media (min-width: 1025px) and (max-width: 1199px) {
    /*====================================== SECTION HOMEPAGE - 11-12 Inch ======================================*/
    .intermezo-ship {
        width: 16px;
    }

    /*====================================== SECTION 404 - 11-12 Inch ======================================*/

    .notfound-layout---img {
        bottom: -32px;
    }

    .notfound-layout--title {
        top: 12.5%;
    }

    .notfound-layout--desc {
        bottom: 5%;
    }
}

/* 11-12 Inch - Notebook */
@media (min-width: 1025px) and (max-width: 1199px) and (max-height: 600px) {
    /*====================================== SECTION 404 - 11-12 Inch - Notebook ======================================*/
    .notfound-layout--title .image {
        max-width: 400px;
    }

    .notfound-layout--desc {
        bottom: 2%;
    }

    /*====================================== SECTION FOOTER CONTACT - 11-12 Inch - Notebook
======================================*/
}

/* >15 Inch */
@media (min-width: 1440px) {
    /*====================================== SECTION HOME PAGE >15 Inch ======================================*/

    /*====================================== SECTION FOOTER CONTACT >15 Inch ======================================*/
}

/* >16 Inch */
@media (min-width: 1550px) {
    /*====================================== SECTION HOME PAGE > 16 Inch ======================================*/

    .hero-home--map {
        transform: translate(-180px, -700px);
    }

    .hero-home--ornament {
        position: absolute;
        top: 480px;
        max-width: 80px;
        right: 600px;
    }

    .intermezo-ship {
        width: 24px;
        height: auto;
        position: absolute;
        top: 69.5%;
        left: 81%;
        transform: translate(-50%, -50%);
    }

    /*====================================== SECTION 404 - >16 Inch ======================================*/
}

@media (min-width: 1880px) {
    /*====================================== SECTION 404 - >18 Inch ======================================*/
}

@media (min-width: 2500px) {
    /*====================================== SECTION 404 - >25 Inch ======================================*/
}