@media (max-width: 1199px) {
  /*====================================== SECTION MENU NAVBAR ======================================*/
  .menu-lang {
    margin-right: 1rem;
  }

  .nav-hamburger {
    display: flex;
  }

  .container-nav .nav-logo {
    width: 160px;
  }

  .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);
    backdrop-filter: blur(1px);
    transition: all 0.5s;
  }

  .scroll#navigation {
    background-color: rgb(246 241 232 / 60%) !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%;
  }

  /*====================================== PAGE INNER SECTIONS ======================================*/
  .section-about-story {
    padding: 3.5rem 0;
  }

  .section-about-values {
    padding: 3.5rem 0;
  }

  .section-menu-preview {
    padding: 4rem 0;
  }

  .section-kontak-lokasi {
    padding: 3.5rem 0;
  }

  .section-home-usp {
    padding: 3.5rem 0;
  }

  .services-card--asset {
    height: 380px;
  }

  /*====================================== SECTION KONTAK (Tablet and below) ======================================*/
  .kontak-lokasi--left {
    flex: 0 0 42%;
  }
}

/*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;
  }

  .container-nav {
    gap: 1rem;
  }

  /*====================================== SECTION HOME - Mobile GENERAL ======================================*/
  .services-card--asset {
    height: 420px;
    position: relative;
    overflow: hidden;
  }

  .services-card .services-card--desc-wrapper {
    padding: 1.25rem;
  }

  .home-gallery--wrapper.grid {
    display: none !important;
  }

  .home-gallery--swiper-outer {
    display: block !important;
  }

  .grid-sizer,
  .grid-item {
    width: 160px;
  }

  /*====================================== SECTION HERO HOME (Mobile) ======================================*/
  .hero-home {
    padding: 4.5rem 0 1.5rem 0;
  }

  .hero-home--wrapper {
    padding-bottom: 2.5rem;
  }

  .hero-home--title {
    max-width: 100%;
  }

  /*====================================== SECTION HOME ABOUT (Mobile) ======================================*/
  .section-home-about {
    padding: 2.5rem 0;
  }

  .section-home-about .row {
    row-gap: 1.5rem;
  }

  .section-home-about .image {
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /*====================================== SECTION HOME SERVICES (Mobile) ======================================*/
  .section-home-services {
    padding: 2.5rem 0;
  }

  .home-services-wrapper {
    gap: 1.5rem !important;
  }

  /*====================================== SECTION HOME GALLERY (Mobile) ======================================*/
  .section-home-gallery {
    padding: 2.5rem 0 0 0;
  }

  .home-gallery-wrapper {
    gap: 2rem !important;
  }

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

  .home-gallery-card {
    padding: 0.5rem;
  }

  /*====================================== SECTION HOME USP (Mobile) ======================================*/
  .section-home-usp {
    padding: 2.5rem 0;
  }

  .home-usp-wrapper {
    gap: 2rem !important;
  }

  .section-home-usp .row {
    row-gap: 1.5rem;
  }

  .section-home-usp .image {
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .home-usp--desc {
    order: 2;
  }

  .home-usp--image {
    order: 1;
  }

  /*====================================== SECTION CLOSING (Mobile) ======================================*/
  .section-closing {
    padding: 5rem 0;
  }

  .section-closing-wrapper {
    gap: 1rem !important;
  }

  /*====================================== TENTANG KAMI (Mobile) ======================================*/
  .about-hero {
    padding: 4.5rem 0 2.5rem;
  }

  .about-hero--content {
    max-width: 100%;
  }

  .section-about-story {
    padding: 2.5rem 0;
  }

  .section-about-values {
    padding: 2.5rem 0;
  }

  .section-about-story h2 {
    position: static;
  }

  .about-values--item-misi {
    margin-top: 0;
  }

  .kontak-lokasi--map,
  .kontak-lokasi--map iframe {
    min-height: 16rem;
  }

  /*====================================== TENTANG ACTIVITY DETAIL  (Mobile) ======================================*/
  .detail-overview--image {
    height: 260px;
  }

  .gallery-main {
    height: 260px;
  }

  .gallery-thumbs {
    height: auto;
  }

  .gallery-thumb {
    flex: none;
    height: 120px;
  }

  /*====================================== SECTION KONTAK (Mobile) ======================================*/
  .kontak-lokasi--body {
    flex-direction: column;
    gap: 1rem;
  }

  .kontak-lokasi--left {
    flex: none;
    width: 100%;
    margin: 0;
  }

  .kontak-lokasi--right {
    width: 100%;
  }

  .about-values--item {
    padding: 0rem;
  }

  .about-values-wrapper {
    gap: 2rem;
  }

  /*====================================== 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 HERO HOME (Small Phone) ======================================*/
  .hero-home {
    padding: 4rem 0 1rem 0;
  }

  .hero-home--wrapper {
    padding-bottom: 2rem;
  }

  /*====================================== SECTION KONTAK (Small Phone) ======================================*/
  .kontak-lokasi--card {
    padding: 1.25rem;
  }

  /*====================================== SECTION HOME SERVICES (Small Phone) ======================================*/
  .services-card--asset {
    height: 360px;
  }

  /*====================================== SECTION HOME USP (Small Phone) ======================================*/
  .home-usp--desc .usp-info--list {
    gap: 0.75rem;
  }

  /*====================================== SECTION CLOSING (Small Phone) ======================================*/
  .section-closing {
    padding: 4rem 0;
  }

  /*====================================== TENTANG KAMI (Small Phone) ======================================*/
  .about-hero {
    padding: 4rem 0 2rem;
  }

  .about-values--item {
    padding: 0rem;
    gap: 1rem;
  }

  /*====================================== 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) {
  /*====================================== SECTION HOME - Mobile SMALL - Normal ======================================*/

  .intermezo-ship img {
    scale: 0.2;
  }

  /*====================================== SECTION HERO HOME (Tiny Phone) ======================================*/
  .hero-home--wrapper {
    padding-bottom: 1.5rem;
  }

  /*====================================== SECTION HOME GALLERY (Tiny Phone) ======================================*/
  .grid-sizer,
  .grid-item {
    width: 140px;
  }

  /*====================================== SECTION CLOSING (Tiny Phone) ======================================*/
  .section-closing {
    padding: 3rem 0;
  }

  /*====================================== 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
======================================*/
}

/*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 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) {
  /*====================================== 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 ======================================*/
  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;
  }
  .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 NAVBAR - iPad Portrait ======================================*/

  /*====================================== 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 HERO HOME (Tablet) ======================================*/
  .hero-home--title {
    max-width: 32rem;
  }

  /*====================================== SECTION HOME ABOUT (Tablet) ======================================*/
  .section-home-about {
    padding: 3rem 0;
  }

  .section-home-about .row {
    row-gap: 2rem;
  }

  .section-home-about .image {
    max-width: 100% !important;
  }

  /*====================================== SECTION HOME SERVICES (Tablet) ======================================*/
  .section-home-services {
    padding: 3rem 0;
  }

  .home-services-wrapper {
    gap: 2.5rem !important;
  }

  .services-card--asset {
    height: 520px;
  }

  .services-card .services-card--desc-wrapper {
    padding: 1.25rem;
  }

  /*====================================== SECTION HOME GALLERY (Tablet) ======================================*/
  .section-home-gallery {
    padding: 3rem 0;
  }

  .home-gallery-wrapper {
    gap: 2.5rem !important;
  }

  .grid-sizer,
  .grid-item {
    width: 210px;
  }

  /*====================================== SECTION HOME USP (Tablet) ======================================*/
  .section-home-usp {
    padding: 3rem 0;
  }

  .home-usp-wrapper {
    gap: 2.5rem !important;
  }

  .section-home-usp .row {
    row-gap: 2rem;
  }

  .section-home-usp .image {
    max-width: 100% !important;
  }

  /*====================================== TENTANG KAMI (Tablet) ======================================*/
  .section-about-story h2 {
    position: static;
  }

  /*====================================== SECTION CLOSING (Tablet) ======================================*/
  .section-closing {
    padding: 8rem 0;
  }

  /*====================================== 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 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 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 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 HOME PAGE ======================================*/
  .hero-home--wrapper {
    padding-bottom: 10rem;
  }
  /*====================================== SECTION 404 - >18 Inch ======================================*/
}

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