/* Responsive Menu Navbar */
@media (max-width: 1199px) {
  /*====================================== SECTION MENU NAVBAR - 1199px ======================================*/

  .site-nav--inner {
    padding: 1rem 2rem;
  }

  .nav-overlay--panel {
    width: 60%;
    padding: 6rem 3rem 3rem;
  }
}

@media (max-width: 991px) {
  /*====================================== SECTION MENU NAVBAR - 991px ======================================*/
  .site-nav--inner {
    padding: 0.75rem 1.5rem;
  }

  .site-nav--logo-link {
    width: 124px;
  }

  .nav-overlay--panel {
    width: 72%;
    padding: 6rem 2rem 3rem;
  }

  .nav-overlay--inner {
    justify-content: flex-start;
  }

  header {
    background-color: transparent;
  }

  .nav-hamburger {
    display: flex;
  }

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

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

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

  .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),
  .menu-mobile-li.active .accordion-button:not(.collapsed) {
    background-color: var(--c-primary);
    color: var(--c-white);
  }

  .menu-mobile-li .accordion-button:not(.collapsed)::before {
    background-color: var(--c-white);
    width: 24px;
  }

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

  .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);
  }

  .sidebar-screen {
    display: none;
  }

  .no-scroll {
    overflow: hidden;
  }

  .menu-bottombar-mobile {
    z-index: 901;
    display: block;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translate(-50%, 0) scale(1);
    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:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  .text-wrapper {
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .text-track {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .text-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: none;
  }

  .text-item.is-hidden {
    visibility: hidden;
    width: 0;
    opacity: 0;
  }

  .menu-bottombar-mobile.hide {
    bottom: 0px;
    transform: translate(-50%, 120%) scale(0.8);
    opacity: 0;
  }

  .menu-bottombar-mobile .notif-indicator--o {
    top: -2px;
    left: auto;
    right: -5px;
  }

  section.section-hero {
    min-height: 50vh;
  }

  .container-nav .nav-lang {
    padding-left: 0;
    border-left: 0;
  }

  .empty-page--asset {
    max-width: 220px;
  }

  /*====================================== SECTION HOMEPAGE - 992 ======================================*/
  .hero-home-swiper {
    height: 100svh;
  }

  .hero-slide--caption {
    max-width: 260px;
  }

  .hero-home--pagination {
    justify-content: center;
  }

  .ornament-eclipses::after {
    width: 400px;
    height: 400px;
    background-size: 400px;
  }

  .whats-new-grid {
    grid-template-columns: 1fr;
  }

  .whats-new-grid .article-highlight-card:first-child,
  .whats-new-grid .article-highlight-card:not(:first-child),
  .whats-new-grid .article-highlight-card {
    aspect-ratio: 16 / 8;
  }

  /*====================================== SECTION ABOUT - 992 ======================================*/
  .about-hero-mosaic--grid {
    grid-template-columns: repeat(6, 1fr);
  }

  /*====================================== SECTION BRAND PAGE - HISTORY - 992 ======================================*/

  .history-milestone-card {
    flex-direction: column;
  }

  .history-milestone-card--panel {
    max-width: 100%;
    padding: 1.5rem;
    margin: 0rem;
  }

  /*====================================== SECTION VALUE PAGE - MODELISTA INDONESIA - 992 ======================================*/
  .valuemi-card--pillar-media {
    height: 48px;
  }

  /*====================================== SECTION VALUE PAGE - INDONESIAN VALUE  - 992 ======================================*/

  .value-pillars--item {
    padding: 0 1.5rem;
  }

  .value-highlight-banner--glass {
    width: 65%;
    padding: 4rem 1.25rem;
  }

  /*====================================== SECTION VALUE PAGE - DESIGN VALUE  - 992 ======================================*/
  .design-value--card {
    aspect-ratio: 7 / 3;
  }

  /*====================================== SECTION PRODUCT PAGE - INDONESIA MODELS - 992 ======================================*/
  .product-hero--content {
    justify-content: flex-end;
    height: 100%;
    padding: 0 2rem 2.5rem;
  }

  .jm-tabs-wrapper {
    top: 80px;
    justify-content: flex-start;
  }

  .jm-tabs-wrapper .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .section-indonesia-model-footer .footer-link--card {
    height: 320px;
  }

  /*====================================== SECTION PRODUCT PAGE - PRODUCT DETAIL -992 ======================================*/

  .product-detail-hero {
    padding: 12rem 0 8rem;
  }

  .product-showcase--watermark {
    padding-bottom: 16rem;
  }

  .product-showcase--media {
    width: 80%;
  }

  .product-feature.product-feature-top {
    padding: 2rem 0 16rem 0;
  }

  .product-feature.product-feature-bottom {
    padding: 16rem 0 2rem 0;
  }

  .product-feature::before {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.1) 75%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .product-showcase--watermark h2 {
    font-size: clamp(2.5rem, 16vw, 8rem);
  }

  /*====================================== SECTION PRODUCT PAGE - MERCHANDISE - 992 ======================================*/
  .section-hero-modelista {
    padding: 8rem 0rem 4rem 0rem;
  }

  .section-hero-modelista::before {
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.5) 35%,
      transparent 75%
    );
  }

  .modelista-hero--content {
    height: 100%;
    padding-right: 25%;
    justify-content: flex-end;
  }

  .merch-flipbook-modal .modal-dialog {
    width: 92vw;
    height: 85vh;
    max-height: 85vh;
  }
  /*====================================== SECTION ARTICLE PAGE - 992 ======================================*/
  .article-hero--card {
    max-width: 100%;
    padding: 2rem;
  }

  section.section-article-list .article-highlight-card {
    aspect-ratio: 12 / 10;
  }

  /*====================================== SECTION CONTACT - 992 ======================================*/
  .section-margin-top {
    margin-top: 0;
  }

  .section-hero-glassmorph {
    min-height: 65svh;
  }

  .section-contact-form {
    padding: 2rem 0;
  }

  .contact-hero--card {
    max-width: 100%;
    padding: 2rem;
  }

  .contact-form--wrapper {
    padding: 0rem;
  }

  .contact-info--divider {
    display: none;
  }

  /*====================================== SECTION FOOTER - 992 ======================================*/
  .site-footer {
    padding: 2rem 0 2rem;
  }

  .site-footer--logo {
    max-width: 13rem;
    margin-bottom: 2rem;
  }

  .site-footer--col {
    text-align: center;
  }

  .site-footer--title {
    margin: 0 0 24px;
  }

  .site-footer--menu li:not(:last-child) {
    margin-bottom: 14px;
  }
}

/*Mobile General*/
@media (max-width: 767px) {
  .site-nav--inner {
    padding: 0.75rem 1rem;
  }

  .site-nav--logo-link {
    width: 108px;
  }

  .site-nav .nav-lang--label {
    display: none;
  }

  .nav-overlay--panel {
    width: 100%;
    padding: 5rem 1.5rem 2.5rem;
    border-left: 0;
  }

  .nav-overlay--trigger {
    padding: 1rem 0;
  }

  .nav-overlay--item:hover .nav-overlay--trigger {
    padding-left: 0;
  }

  header nav {
    padding: 8px 0px 0px 0px;
  }

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

  .back-btn {
    padding: 0.5rem 1rem;
  }

  .modal-body {
    padding: 1rem;
  }

  section {
    padding: 1rem 0;
  }

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

  .hero-pad {
    padding-top: 6rem;
  }

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

  .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: 200px;
  }

  header nav .container-nav {
    max-width: 100%;
    padding: 0.75rem 1rem;
  }

  .container-nav .nav-logo {
    max-width: 4rem;
  }

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

  .cta-swiper-wrapper {
    max-width: 92px;
  }

  .hero-page-br,
  .section-br {
    border-radius: 0 0 2rem 0;
  }

  .hero-page--container {
    padding: 4rem 0 2rem 0;
  }

  .hero-page--wrap {
    min-height: 200px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 16px;
  }

  .related-page-card--link {
    min-height: 180px;
  }

  .related-page-card--content {
    padding: 1rem;
    align-items: center;
    gap: 1rem;
  }

  /*====================================== SECTION HOME - Mobile GENERAL ======================================*/
  .hero-home-swiper {
    height: 75svh;
  }

  .hero-slide::before {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 0.65) 50%,
      rgba(0, 0, 0, 0) 75%
    );
  }

  .hero-slide--inner {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 2.5rem;
  }

  .hero-slide--caption {
    max-width: 100%;
  }

  .hero-slide--content {
    min-width: 100%;
  }

  .section-statement {
    padding: 2rem 0;
  }

  .ornament-eclipses::after {
    width: 200px;
    height: 200px;
    background-size: 200px;
  }

  .ornament-eclipses--top-left::after,
  .ornament-eclipses--top-right::after {
    top: -60px;
  }

  .ornament-eclipses--bottom-left::after,
  .ornament-eclipses--bottom-right::after {
    bottom: -60px;
  }

  .ornament-eclipses--top-left::after,
  .ornament-eclipses--bottom-left::after {
    left: -60px;
  }

  .ornament-eclipses--top-right::after,
  .ornament-eclipses--bottom-right::after {
    right: -60px;
  }

  .feature-banner {
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .feature-banner--link {
    height: 100%;
  }

  .feature-banner--inner {
    padding: 1rem 0.25rem;
  }

  .lineup-card--footer {
    padding: 4rem 1rem 1rem 1rem;
  }

  .whats-new-grid .article-highlight-card:first-child,
  .whats-new-grid .article-highlight-card:not(:first-child),
  .whats-new-grid .article-highlight-card {
    aspect-ratio: 12 / 7;
  }

  .worldwide-item--link {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 0;
  }

  .worldwide-item--content {
    width: 100%;
    padding: 1rem 1rem 0rem 0rem;
  }

  .worldwide-item--media {
    max-width: 100%;
    aspect-ratio: 2.5 / 1;
  }

  /*====================================== SECTION ABOUT - OVERVIEW - Mobile GENERAL ======================================*/
  .about-hero-mosaic--grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .section-hero-about-logo {
    height: 40svh;
    padding: 6rem 0 2rem;
  }

  .hero-about-logo--brand {
    max-width: 22rem;
  }

  .about-hero-mosaic--title-bg {
    padding: 0.5rem 1rem;
  }

  .about-values-card--content {
    padding: 1.25rem;
  }

  .about-values-card {
    aspect-ratio: 1 / 1;
  }
  /*====================================== SECTION BRAND PAGE - MANIFESTO PAGE - Mobile GENERAL ======================================*/

  section.section-manifest-statement {
    padding: 3rem 0;
  }

  .section-manifest-history {
    min-height: 640px;
  }

  .manifest-history--logo {
    width: min(70%, 640px);
  }

  .history-image--mountain {
    width: 640px;
  }

  .manifest-history--content {
    width: min(480px, 50vw);
  }

  /*====================================== SECTION BRAND PAGE - HISTORY PAGE - Mobile GENERAL ======================================*/
  .section-history-intro {
    padding: 2rem 0;
  }

  .history-timeline {
    padding: 0 0.5rem;
  }

  .swiper-nav-btn {
    width: 1.75rem;
    height: 1.75rem;
  }

  .history-timeline--point-dot {
    width: 12px;
    height: 12px;
  }

  .history-timeline--point-line {
    top: 5px;
  }

  .history-milestone-card--panel {
    max-width: 100%;
    padding: 1.25rem;
    margin: 0rem;
  }
  /*====================================== SECTION VALUE PAGE - MODELISTA INDONESIA - Mobile GENERAL ======================================*/
  .value-collage--grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .value-card {
    padding: 1.5rem;
  }

  .valuemi-card--pillar-item {
    padding: 1.25rem 0;
    border-left: none;
    gap: 0.75rem;
  }

  .valuemi-card--pillar-item:not(:first-child) {
    border-top: 1px solid var(--c-br);
  }

  .valuemi-card--pillar-item {
  }

  .valuemi-card--pillar-media {
    height: 40px;
  }

  /*====================================== SECTION VALUE PAGE - SECTION INDONESIAN VALUE - Mobile GENERAL ======================================*/

  .value-pillars {
    flex-direction: column;
  }

  .value-pillars--item {
    padding: 1.25rem 0;
  }

  .value-pillars--item:first-child,
  .value-pillars--item:last-child {
    padding-left: 0;
    padding-right: 0;
  }

  .value-pillars--item:not(:first-child) {
    border-left: none;
    border-top: 1px solid var(--c-primary);
  }

  .value-highlight-banner--glass {
    width: 100%;
    padding: 1.25rem;
  }

  /*====================================== SECTION VALUE PAGE - DESIGN VALUE - Mobile General ======================================*/
  .design-resonate--heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .design-resonate--subtitle {
    max-width: 100%;
  }

  .design-value--card {
    aspect-ratio: 7 / 5;
  }

  .design-value--card::before {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0) 75%
    );
  }

  .design-value--card-body {
    padding: 1.25rem;
  }

  /*====================================== SECTION PRODUCT PAGE - INDONESIA MODELS - Mobile General ======================================*/
  .jm-list-wrapper {
    margin-top: 0rem;
  }

  .jm-model-card .jm-model-card--title {
    padding: 0.75rem;
  }

  .jm-model-card--top {
    padding: 1rem 0.75rem;
  }

  .section-indonesia-model-footer .footer-link--panels {
    flex-direction: column;
  }

  .section-indonesia-model-footer .footer-link--card {
    width: 100%;
    height: 260px;
  }

  .jm-brand-tabs--list {
    gap: 0.25rem;
    padding: 0.25rem;
  }

  .jm-brand-card {
    padding: 0.75rem 1rem;
  }

  .jm-brand-card--logo {
    max-width: 124px;
  }

  /*====================================== SECTION PRODUCT PAGE - PRODUCT DETAIL - Mobile General ======================================*/
  .product-detail-hero {
    padding: 12rem 0 2rem;
  }

  .product-detail-hero::before {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.5) 0%,
      transparent 100%,
      transparent 100%
    );
  }

  .product-detail-hero--content {
    padding-right: 25%;
  }

  .product-showcase--watermark {
    padding-bottom: 10rem;
  }

  .product-showcase--watermark h2 {
    font-size: clamp(2.5rem, 16vw, 4rem);
  }

  .product-feature.product-feature-top {
    padding: 2rem 0 8rem 0;
  }

  .product-feature.product-feature-bottom {
    padding: 8rem 0 2rem 0;
  }

  .product-showcase--media {
    width: 80%;
    bottom: -8%;
  }

  .product-feature::before {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  /*====================================== SECTION PRODUCT PAGE - MERCHANDISE - Mobile General ======================================*/

  .section-hero-modelista {
    padding: 6rem 0rem 2rem 0rem;
  }

  .modelista-hero--content {
    padding-right: 0%;
  }

  .product-hero--desc {
    max-width: 100%;
  }

  .merch-flipbook-modal .modal-dialog {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
  }

  .merch-flipbook-modal .modal-content {
    height: 100%;
  }

  /*====================================== SECTION ARTICLE PAGE - Mobile General ======================================*/
  .article-hero--card {
    padding: 1.25rem;
  }

  .article-hero--nav-btn {
    width: 2rem;
    height: 2rem;
  }

  .article-pagination--list {
    gap: 1rem;
  }

  /*====================================== SECTION ARTICLE DETAIL PAGE - Mobile General ======================================*/
  .section-hero-article-detail .hero-page--container {
    padding: 6rem 0 2rem;
  }

  .hero-page--top {
    top: 5rem;
  }

  .article-related-swiper::before,
  .article-related-swiper::after {
    width: 1.5rem;
  }

  .article-highlight-card {
    aspect-ratio: 12 / 10;
  }

  /*====================================== SECTION CONTACT - Mobile Genera ======================================*/

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

  .contact-hero--card {
    padding: 1.25rem;
  }

  .section-contact-form {
    padding: 1rem 0;
  }

  .contact-form--map-frame {
    min-height: 320px;
  }

  .section-contact-info {
    padding: 1rem 0;
  }

  /*====================================== SECTION FOOTER - Mobile General ======================================*/

  /*====================================== SECTION 404 - Mobile Geeneral ======================================*/
  .error-page--code h1,
  .error-page--code h2 {
    font-size: 6rem;
  }
}

/*Phone View - MAX / PRO Devices GENERAL */
@media (max-width: 575px) {
  .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
======================================*/
  .related-page-card--link {
    min-height: 160px;
  }

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

  /*====================================== SECTION SECTION BRAND PAGE - MANIFESTO PAGE - Mobile MAX / PRO DEVICES GENERAL
======================================*/

  /*====================================== SECTION ABOUT - OVERVIEW - Mobile GENERAL ======================================*/
  .about-hero-mosaic--grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero-about-logo--brand {
    max-width: 16rem;
  }
  .section-manifest-history {
    margin-top: 24px;
    min-height: 640px;
  }

  .history-image--mountain {
    width: 400px;
    height: 400px;
  }

  .manifest-history--content {
    top: 108px;
    left: 0;
    width: min(100%, 100vw);
    padding: 0 1rem;
  }

  .manifest-history--image {
    inset: unset;
    bottom: 0;
    width: 100%;
    height: 320px;
  }

  .manifest-history--content .history-content--body p {
    color: var(--c-black) !important;
  }

  /*====================================== SECTION VALUE PAGE - MODELISTA INDONESIA - Mobile MAX / PRO DEVICES GENERAL ======================================*/
  .usp-banner--values {
    padding: 2rem 1.25rem;
  }

  .usp-banner--link {
    height: 200px;
  }

  .usp-banner--action {
    padding: 1rem 1.25rem;
  }

  .usp-banner--action .icon-arrow-right {
    width: 32px;
  }

  /*====================================== SECTION VALUE PAGE - INDONESIAN VALUE - Mobile MAX / PRO DEVICES GENERAL ======================================*/

  .value-highlight--grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }

  /*====================================== SECTION SECTION BRAND PAGE - DESIGN VALUE - Mobile MAX / PRO DEVICES GENERAL
======================================*/
  .design-value--card {
    aspect-ratio: unset;
    height: auto;
    padding-bottom: 5rem;
  }

  .design-value--card-media {
    filter: blur(3px);
    -webkit-filter: blur(3px);
  }

  /*====================================== SECTION PRODUCT PAGE - INDONESIA MODELS ======================================*/
  .jm-brand-card--logo {
    max-width: 100px;
  }

  /*====================================== SECTION VALUE PAGE - MODELISTA INDONESIA ======================================*/
}

/*Mobile (Small Phone - Normal Phone)*/
@media (max-width: 399px) {
  /*====================================== SECTION HOME - Mobile SMALL - Normal ======================================*/

  /*====================================== SECTION ABOUT - OVERVIEW - Mobile SMALL - Normal ======================================*/

  /*====================================== SECTION PRODUCT PAGE - PRODUCT DETAIL - Mobile SMALL - Normal ======================================*/
  .product-showcase--watermark {
    padding-bottom: 8rem;
  }
  /*====================================== SECTION 404 - MOBILE Small - Normal ======================================*/

  /*====================================== SECTION 503 - MOBILE Small - Normal ======================================*/
}

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

  /*====================================== SECTION HOME - Mobile MAX / PRO DEVICES ======================================*/
}

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

  .achievement-gallery--item {
    height: 180px;
  }

  /*====================================== SECTION OUR BUSINESS - ACTIVITIES - Mobile MAX / PRO DEVICES GENERAL ======================================*/
  .racing-card--link {
    min-height: 160px;
  }

  /*====================================== SECTION OUR BUSINESS - RACING PARTS - Mobile MAX / PRO DEVICES GENERAL ======================================*/

  .modal-ipad.modal-dialog {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .modal-parts-item {
    grid-template-columns: 160px 1fr;
  }

  /*====================================== SECTION OUR COMMITMENT - Mobile MAX / PRO DEVICES GENERAL ======================================*/

  .commit-value--track {
    gap: 16px;
  }

  .value-image--wrapper {
    aspect-ratio: 16 / 10;
  }

  .commit-value--image {
    width: 224px;
  }

  /*====================================== SECTION 404 - MOBILE Medium ======================================*/
}

/*Phone FOLD Unfolded View*/
@media (min-width: 0) and (max-width: 316px) {
  /*====================================== SECTION 503 - MOBILE Folded ======================================*/

  /*====================================== SECTION VALUE PAGE - DESIGN VALUE - MOBILE FOLDED ======================================*/
  .design-value--card {
    padding-bottom: 3rem;
  }
}

@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: 100%;
  }

  .modal-body {
    padding: 1.5rem;
  }

  .related-page-card--link {
    min-height: 180px;
  }

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

  /*====================================== SECTION HOME - iPad Portrait ======================================*/
  .lineup-card--footer {
    padding: 10rem 1rem 1rem 1rem;
  }
  /*====================================== SECTION ABOUT - OVERVIEW - iPad Portrait ======================================*/

  .about-values-card {
    aspect-ratio: 1 / 1.25;
  }

  .section-hero-about-logo {
    height: 50svh;
  }

  .hero-about-logo--brand {
    max-width: 30rem;
  }

  /*====================================== SECTION VALUE PAGE - DESIGN VALUE - iPad Portrait ======================================*/
  .design-resonate--heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /*====================================== SECTION VALUE PAGE - MODELISTA INDONESIA - Ipad Portrait ======================================*/

  .usp-banner {
    flex-direction: column;
  }

  .usp-banner--value-media img {
    height: 62px;
  }

  .usp-banner--link {
    height: 260px;
  }

  .usp-banner--action {
    padding: 1rem 2rem;
  }

  /*====================================== SECTION VALUE PAGE - INDONESIAN VALUE - Ipad Portrait ======================================*/
  .value-highlight--grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /*====================================== SECTION BRAND PAGE - MANIFESTO PAGE - iPad Portrait ======================================*/

  section.section-manifest-statement {
    padding: 4rem 0;
  }

  .section-manifest-history {
    min-height: 840px;
  }

  .manifest-history--logo {
    width: min(70%, 640px);
  }

  .history-image--mountain {
    width: 1024px;
  }

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

  .article-highlight-card {
    aspect-ratio: 12 / 10;
  }

  /*====================================== SECTION 404 - iPad Portrait ======================================*/
  .error-page--container {
    background-position: center left;
  }

  .error-page--code h1,
  .error-page--code h2 {
    font-size: 8rem;
  }
}

/* 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 HOME - iPad LANDSCAPE ======================================*/
  .lineup-card--footer {
    padding: 8rem 1rem 1rem 1rem;
  }
  /*====================================== 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 ======================================*/
  .hero-home--pagination {
    justify-content: center;
  }

  /*====================================== 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) {
  /*====================================== COMPONENT NAV - iPad Pro - Portrait ======================================*/
  .mega-menu--expand-list .mega-menu--card.is-active {
    flex: 1.4;
  }

  /*====================================== SECTION HOME - iPad Pro - Portrait ======================================*/
  .hero-home--pagination {
    justify-content: center;
  }

  /*====================================== SECTION BRAND PAGE - MANIFESTO PAGE - iPad Pro - Portrait ======================================*/
  .history-image--mountain {
    width: 1024px;
  }
}

/* Small Laptop */
@media (min-width: 992px) and (max-width: 1199px) {
  /*====================================== SECTION COMPPONENT - Small Laptop ======================================*/
  .related-page-card--link {
    min-height: 204px;
  }

  /*====================================== SECTION PRODUCT PAGE - PRODUCT DETAIL - Small Laptop ======================================*/

  .product-showcase--watermark h2 {
    font-size: clamp(2.5rem, 16vw, 8rem);
  }
  /*====================================== SECTION FOOTER - Small Laptop ======================================*/
}

/* 11-12 Inch */
@media (min-width: 1025px) and (max-width: 1199px) {
  /*====================================== SECTION BRAND PAGE - MANIFESTO PAGE - 11-12 Inch ======================================*/
  section.section-manifest-statement {
    padding: 6rem 0;
  }

  .section-manifest-history {
    min-height: 920px;
  }

  .manifest-history--logo {
    width: min(84%, 540px);
  }

  .history-image--mountain {
    width: 1024px;
  }

  /*====================================== SECTION PRODUCT PAGE - PRODUCT DETAIL - 11-12 Inch ======================================*/
  .product-showcase--watermark {
    padding-bottom: 20rem;
  }

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

/* 11-12 Inch - Notebook */
@media (min-width: 1025px) and (max-width: 1199px) and (max-height: 600px) {
  /*====================================== SECTION 404 - 11-12 Inch - Notebook ======================================*/
}

@media (max-width: 1400px) {
}

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

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

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

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

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

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