@font-face {

  font-family: mmc-bold;

  src: url(fonts/MMCOFFICE-Bold.ttf);

}



@font-face {

  font-family: mmc-regular;

  src: url(fonts/MMCOFFICE-Regular.ttf);

}



@font-face {

  font-family: mmc-medium;

  src: url(fonts/MMC-Medium.ttf);

}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 16px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 16px));
}


* {

  padding: 0;

  margin: 0;

}



body {

  font-family: mmc-regular;

  background: transparent !important;

}

.bg-black {
  background-color: #000;
}


.f14 {

  font-size: 14px;

}



.mmc-medium {

  font-family: mmc-medium;

}



.fixed-body {

  position: fixed;

}



.mauto {

  margin: auto;

}



.display-none {

  display: none !important;

}



.font-mmc-bold {

  font-family: mmc-bold;

}



.wrapper {

  position: relative;

  overflow-x: hidden;

  background: black;

  color: white;

}



.fullsize-background {

  overflow: hidden;

  position: relative;

  height: 100vh;

  width: 100vw;

}



.red {

  background-color: #333;

}

.mmc-red{
  color: #ED0000 !important;
}

.mmc-red:hover {
  text-decoration: none !important;
}


.green {

  background-color: #444;

}



.container-pause {

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

  width: 2.5em;

  height: 2em;

  position: absolute;

  top: 10%;

  color: white;

  left: 5%;

  display: flex;

  cursor: pointer;

}



.container-pause:hover {

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

}



.container-pause i {

  margin: auto;

}



/* Button Custom */

.button-book {

  display: flex;

  width: 200px;

  height: 50px;

  border: 2px solid white;

  background: linear-gradient(-60deg, #fff 50%, transparent 50%);

  cursor: pointer;

  background-size: 250% 100%;

  background-position: bottom left;

  transition: all 0.1s ease-out;

  text-decoration: none;

  margin: auto;

}



.button-book-black span,

.button-book span,

.button-test-drive span {

  color: white;

  margin: auto;

  letter-spacing: 2px;

}



.button-book-black:hover,

.button-book:hover,

.button-test-drive:hover {

  text-decoration: none;

  background-position: bottom right;

  color: #000;

}



.button-book-black:hover span,

.button-book:hover span,

.button-test-drive:hover span {

  color: black;

}



.button-book-black,

.button-test-drive {

  display: flex;

  width: 200px;

  height: 50px;

  border: 2px solid white;

  background: linear-gradient(-60deg, #fff 50%, black 50%);

  cursor: pointer;

  background-size: 250% 100%;

  background-position: bottom left;

  transition: all 0.1s ease-out;

  text-decoration: none;

}



.button-test-drive {

  margin: auto;

}



.button-book-black:hover,

.button-test-drive:hover {

  border: 2px solid black;

}

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

.bg-2 {

  display: flex;

  background-image: url(img/xfc-concept-banner.png);

  position: relative;

  background-repeat: no-repeat;

  background-size: cover;

}

/* .exterior-height {
  height: 200px;
} */

/* for Ipad devices */
@media (min-width: 768px) and (max-width: 910px) {
  .bg-2 {
    background-size: cover;
  }

  .py-12 {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }

  .fullsize-background {
    height: 40vh;
  }
}

@media (max-width: 768px) {
  .bg-2 {
    background-image: url(img/xfc-concept-mobile-banner.png);
  }
  
  .button-spesifikasi {
    font-size: .8rem !important;
  }
}

.bg-2::after {

  content: '';

  display: block;

  background-image: linear-gradient(

    to left,

    rgb(0, 0, 0) 0%,

    rgba(0, 0, 0, 0) 60%

  );

  width: 100%;

  position: absolute;

  bottom: 0;

  height: 100%;

}



.container-bg-2 {

  margin: auto;

  transform: translateX(70%);

  text-align: center;

  color: white;

  position: relative;

  z-index: 1;

  line-height: 40px;

  letter-spacing: 1px;

}



.grey {

  color: #c8c7c7;

}



.bg-3 {

  margin: 10px auto;

  text-align: center;

  overflow-x: hidden;

}



.bg-3 .swiper-container .card {

  border-radius: 5px;

}



.bg-3 img {

  width: 100%;

}



.swiper-slide .card {

  width: 100%;

  height: 100%;

  overflow: hidden;

}



#popup,

#popupBrochure {

  position: fixed;

  z-index: 4;

  top: 50%;

  left: 50%;

  width: 45%;

  padding: 40px;

  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);

  background: #fff;

  visibility: hidden;

  opacity: 0;

  transition: 0.7s;

  transform: scaleX(-1) translate(-50%, -50%);

  -webkit-transform-origin: 0 0;

  -moz-transform-origin: 0 0;

  transform-origin: 0 0;

}



#popup.active-popup,

#popupBrochure.active-popup {

  transform: scaleX(1) translate(-50%, -50%);

  visibility: visible;

  opacity: 1;

  transition: 0.7s;

}



@keyframes ZoomRotate {

  from {

    opacity: 0;

    transform: scale(0) rotate(0);

  }

  to {

    opacity: 1;

    transform: scale(1) rotate(720deg);

  }

}

.card-header {
  border-bottom: 3px solid #ed0000;
  background-color: #fff;
  padding-bottom: 0;
}

.accordion, .spesifikasi {
  /* background-color: #eee; */
  color: #444;
  cursor: pointer;
  /* padding: 18px; */
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active {

  /* filter: blur(20px); */

  position: relative;

  z-index: 3;

  pointer-events: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  user-select: none;

}



.header-xfc {

  opacity: 0;

  transform: translateX(600px);

  transition: 1s;

}



.translate-x {

  transform: translateX(0) !important;

  opacity: 1 !important;

  z-index: 9999;

}



.grey {

  transform: translateY(40px);

  opacity: 0;

  transition: 1s 1s;

}



.button-book-now,

.harga-pajero {

  opacity: 0;

  transform: translateY(40px);

  transition: 1s;

}



.translate-y-book {

  transform: translateY(0);

  opacity: 1;

}



.translate-y {

  transform: translateY(0) !important;

  opacity: 1 !important;

}



.bg-5 {

  overflow: hidden;

  position: relative;

}



.img-bg-5 {

  position: relative;

  width: 100%;

  margin-top: -100px;

  opacity: 0;

  transition: 3s;

}



.img-bg-5.fade-out {

  opacity: 1;

}



.container-bg-5 {

  position: absolute;

  top: 0;

  left: 0;

  margin-top: 80px;

  color: white;

  max-width: 400px;

  margin-left: 100px;

  opacity: 0;

  transform: translateY(40px);

  transition: 1s;

}



.container-bg-5 p {

  margin-bottom: 0 !important;

}



.specs {

  transform: translateX(-60px);

}



.e-brochure {

  transform: translateX(-55px);

}



.close {

  font-size: 1.5rem;

  cursor: pointer;

}



.slick-slide.container-outside {

  display: flex !important;

  align-items: center;

}



.bg-4 {

  margin-top: 80px;

}



.container-bg-4 {

  cursor: pointer;

}



.bg-4 {

  overflow-x: hidden;

  opacity: 0;

  transform: translateX(120%);

  transition: 0.5s;

}



.container-bg-4 .img-features {

  width: 40%;

}



.container-bg-4 .container-inside {

  padding: 20px;

}



.newsletter-container {

  background: rgba(0, 0, 0, 0.9);

  color: white;

  padding: 30px 0;

  /* opacity: 0;

  transition: 1s;

  transform: translateX(600px); */

}



.newsletter {

  max-width: 1110px;

  margin: auto;

}



.copyright {

  position: absolute;

  bottom: 0;

  width: 100%;

  text-align: center;

  margin-bottom: 0.5rem;

}

.button-spesifikasi {
  width: 100%;
  overflow: hidden;
  position: relative;
  transition: all .3s ease-in-out;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  z-index: 2;
  border: 2px solid black;
  color: black;
  background: white;
  line-height: .5;
  padding: 1.5rem 1rem;
  font-weight: 600;
}

.button-spesifikasi:hover {
  background: #ed0000;
  color: white;
}

#tableSpekContainer {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: #fff;
  z-index: 9999;
  top: 0;
}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



/* Firefox */

input[type='number'] {

  -moz-appearance: textfield;

}



.iframe-pajero-sport {

  width: 100%;

  height: 100vh;

}



.interior,

.exterior {

  transform: translateY(60px);

  opacity: 0;

  transition: 1s;

}



.label-features {

  transform: translateX(-300px);

  opacity: 0;

  transition: 1s;

}



.palet {

  border-radius: 50%;

  width: 40px;

  height: 40px;

  cursor: pointer;

  border: 1px solid #aaa;

}



.container-grid {

  width: 90%;

  margin: 50px auto;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 20px;

}



.container-grid .item {

  text-align: center;

  transform: translateY(-40px);

  opacity: 0;

  transition: 1s;

}



.container-grid .item img {

  width: 100%;

  cursor: pointer;

}



.container-grid .item .color img {

  width: 30px;

  height: 30px;

  margin-right: 5px;

}



.container-grid .item span {

  font-weight: bold;

}



.container-grid .item .color {

  display: flex;

  justify-content: center;

  margin-top: 0.5rem;

}



.container-grid .item .color span {

  margin-right: 10px;

}



.container-grid .item.muncul {

  opacity: 1;

  transform: translateY(0);

}



.container-varian {

  overflow-x: hidden;

}



.varian-line {

  width: 0;

  border-top: 2px solid rgba(255, 255, 255, 0.5);

  transition: 1s;

}



.varian-line.full {

  width: 100%;

}



.varian {

  transform: translateX(calc(100% + 200px));

  transition: 1s;

}



.footer {

  color: white;

  overflow-x: hidden;

  background: black;

}



.footer a {

  color: white;

  text-decoration: none;

}



.footer a:hover {

  color: #00fdfd;

}



.footer ul {

  display: flex;

  justify-content: space-evenly;

  font-size: 20px;

  width: 82%;

  margin: auto;

}

.footer ul li {

  list-style: none;

}


.footer .tetap {

  font-size: 18px;

}



.swiper-container.swiper-container-interior,

.swiper-container.swiper-container-exterior {

  z-index: 0;

}



.lb-data .lb-caption {

  font-size: 20px;

}



.video-desktop {

  display: block;

}



.video-mobile {

  display: none;

}



.f20 {

  font-size: 20px;

}



.color-black {

  color: black;

}



.slick-dots li button::before,

.slick-dots li.slick-active button::before {

  color: white;

}



.slick-dots li button {

  background: transparent;

}



.container-review {

  /* background: linear-gradient(

    90deg,

    rgba(0, 0, 0, 0) 0%,

    rgba(0, 0, 0, 0.75) 100%

  ); */

  background: linear-gradient(to right, black, gray);

  padding: 50px;

}



.container-review .swiper-slide {

  width: 80%;

}



.container-review .swiper-slide:nth-child(2n) {

  width: 60%;

}



.container-review .swiper-slide:nth-child(3n) {

  width: 40%;

}



.swiper-button-prev-custom::after,

.swiper-button-next-custom::after {

  content: 'none';

}



.swiper-button-prev-custom,

.swiper-button-next-custom {

  height: 80px;

  width: 80px;

  background: rgba(0, 0, 0, 0.3);

  border-radius: 100%;

  transform: translateY(-50%);

}



.swiper-button-prev-custom:hover,

.swiper-button-next-custom:hover {

  background: rgba(0, 0, 0, 0.6);

}



.swiper-button-prev-custom::before {

  content: '<';

}



.swiper-button-next-custom::before {

  content: '>';

}



.swiper-button-prev-custom::before,

.swiper-button-next-custom::before {

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

  font-size: 46px;

  color: #fff;

  text-align: center;

  display: table-cell;

  vertical-align: middle;

}



@media (min-width: 769px) {

  video {

    width: 100%;

  }



  .form-test-drive {

    width: 100%;

  }



  .popup-body {

    padding: 0 20px;

  }



  .iframe-pajero-sport {

    height: 500px;

  }

}



@media (min-width: 577px) and (max-width: 768px) {

  .bg-2 {

    background-repeat: no-repeat;

    /* background-size: 300%; */

    /* background-position-x: -330px; */

  }



  .bg-2::after {

    background-image: linear-gradient(

      to top,

      rgb(0, 0, 0) 0%,

      rgba(0, 0, 0, 0) 100%

    );

  }



  .container-bg-2 {

    transform: translateY(0);

    letter-spacing: 2px;

  }



  .grey {

    font-size: 0.9em;

  }



  .bg-3 .swiper-container {

    width: 95%;

  }



  .overlay {

    padding: 150px 40px;

  }



  #popup,

  #popupBrochure {

    width: 80%;

  }



  .container-bg-5 {

    color: white;

    max-width: 600px;

    margin-top: 500px;

  }



  .specs,

  .e-brochure {

    transform: translateX(0);

  }



  .img-bg-5 {

    margin-top: -50px;

    width: 100%;

  }



  .form-test-drive {

    width: 100%;

  }



  .popup-body {

    padding: 0 20px;

  }



  .slick-slide.container-outside {

    flex-direction: column;

  }



  .container-bg-4 .img-features {

    width: 80%;

  }



  .newsletter-container {

    padding: 30px;

  }



  .no-whatsapp {

    display: none;

  }



  .footer .tetap {

    margin-top: 20px;

  }



  .copyright {

    font-size: 16px;

  }



  .bg-5 {

    height: 1050px;

  }



  .video-desktop {

    width: 100%;

  }



  .video-mobile {

    display: none;

  }



  .container-pause {

    top: 5%;

  }



  .iframe-pajero-sport {

    height: 500px;

  }

}



@media (max-width: 576px) {

  .video-desktop {

    display: none;

  }



  .video-mobile {

    display: block;

    width: 100%;

  }



  .mt40 {

    margin-top: 40px;

  }



  .bg-2 {

    background-position: bottom center;

    /* background-size: 400%;

    background-position-x: -200px; */

  }



  /* .header-xfc {

    padding: 0 40px;

  } */



  .bg-3 .swiper-container {

    width: 95%;

  }



  .overlay {

    padding: 150px 20px;

  }



  #popup,

  #popupBrochure {

    width: 80%;

    height: 80%;

    padding: 25px;

    overflow: hidden;

  }



  #popupBrochure {

    height: auto;

  }



  .container-bg-5 {

    max-width: 576px;

    margin: 250px auto;

  }



  .padding-mobile {

    padding: 0 20px;

  }



  .popup-body {

    overflow: auto;

    height: 90%;

  }



  .slick-slide.container-outside {

    flex-direction: column;

  }



  .container-bg-4 .img-features {

    width: 100%;

  }



  .berlangganan {

    text-align: center;

  }



  .newsletter-container {

    padding: 40px 20px;

    /* margin-top: 80px; */

  }


  

  .palet {

    width: 30px;

    height: 30px;

  }



  .footer .tetap {

    margin-top: 20px;

  }



  .copyright {

    font-size: 12px;

  }



  .bg-5 {

    background: black;

    height: 900px;

  }



  .khusus {

    text-align: center;

  }



  .p10 {

    padding: 0 10px;

  }



  .mt-mb {

    margin-top: 30px;

  }

  .container-pause {

    top: 7%;

  }



  .container-bg-2 {

    transform: translateX(0);

  }



  .bg-2::after {

    background: rgba(0, 0, 0, 0.6);

  }



  .bg-2 .header-xfc,

  .bg-2 .harga-pajero {

    text-shadow: 1px 1px black;

  }



  .img-bg-5 {

    margin-top: -50px;

  }



  .specs,

  .e-brochure {

    transform: translateX(0);

  }



  .container-bg-4 .img-features {

    width: 90%;

  }



  .container-review {

    padding: 20px;

  }



  .iframe-pajero-sport {

    height: 300px;

  }



  .swiper-button-prev-custom,

  .swiper-button-next-custom {

    height: 60px;

    width: 60px;

  }



  .swiper-button-prev-custom::before,

  .swiper-button-next-custom::before {

    font-size: 28px;

  }

}

.font-disclaimer {
  font-size: 1.25rem;
}

/* xfc custom part */
.xfc-font {
  font-size: 2rem;
}

.mr-md-10 {
  margin-right: 10rem;
}

.second-xfc-banner {
  max-width: 75vw;
}


@media (min-width: 768px) {
  .xfc-font {
    font-size: 3rem;
  }

  .mr-md-10 {
    margin-right: 6rem;
  }

  .second-xfc-banner {
    max-width: 408px;
  }
}

@media (min-width: 1024px) {
  .mr-md-10 {
    margin-right: 2.5rem;
  }

  .second-xfc-banner {
    max-width: 460px;
  }
}

/* .xfc-banner {
  background-image: url('<?=BASE_URL.DS?>produk-mitsubishi-medan/xfc-concept/xfc-concept-mobile-banner.png');
  height: 80vh;
  background-position: 50%;
  width: 90vw;
  background-size: cover;
} */

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.container-exterior {
  opacity: 0;
  transition: 1s;
  transform: translateX(-600px);
}

.container-tech {
  opacity: 0;
  transition: 1s;
  transform: translateY(300px);
}

.container-interior {
  opacity: 0;
  transition: 1s;
  transform: translateX(-600px);
}

.iframe-container {
  opacity: 0;
  transition: 1s;
  transform: translateY(300px);
}

.newsletter-container {
  opacity: 0;
  transition: 1s;
  transform: translateX(-600px);
}

@media (min-width: 1080px) {
  .mr-sm-5rem {
    margin-right: 5rem;
  }
}

@media(min-width: 1280px) {
  #iframe-xfc {
      height:calc(80vh - 4px) !important;
      width:calc(80vw - 4px) !important;
      box-sizing: border-box;
  }
}

#iframe-xfc {
  height:calc(30vh - 4px);
  width:calc(85vw - 4px);
  box-sizing: border-box;
}

@font-face {
    src: url("../../../fonts/MMC Medium.ttf");
    font-family: mmc-medium;
}

body {
    overflow-x: hidden !important;
    z-index: 1 !important;
}

.mmc-medium {
    font-family: mmc-medium;
}

.XForce-swiper .swiper-scrollbar-drag {
    background-color: #ED0000;
    border-radius: 0 !important;
}

.XForce-swiper .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    left: 7.5% !important;
    width: 85% !important;
}

.font-header {
    font-size: 2.25rem;
}

div#clock {
   position: relative;
}

.popover {
    max-width: 70vw;
}

.popover .arrow {
    display: none !important;
}

.interior-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: unset;
    width: 340%;
}

.xforce-color {
    width: 100%;
}

.price-tags {
    width: 100%;
}

.button-360 {
    width: 100%;
    overflow: hidden;
    position: relative;
    transition: all .3s ease-in-out;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    z-index: 2;
    border: 2px solid black;
    color: white;
    background: black;
    line-height: .5;
}

.button-360:hover {
    background: white;
    color: black;
}

.image-slider {
    height: 240px;
}


@media(min-width: 1280px) {
    #iframe-xfc {
        height:calc(80vh - 4px) !important;
        width:calc(80vw - 4px) !important;
        box-sizing: border-box;
    }
}

#iframe-xfc {
    height:calc(30vh - 4px);
    width:calc(85vw - 4px);
    box-sizing: border-box;
}

.error {
    color: red;
    border-color:red;
}

.required::after {
    content: ' * ';
    color: #ed0000;
}
.registration-section {
    background-color: #1a1a1a;
    color: white;
}
.registration-font {
    font-size: 40px !important;
}
.mb-60 {
    margin-bottom: 60px;
}
.disabled-cursor {
    cursor: no-drop;
}
.bigBannerCaption{margin-top: auto}
.tagLine{font-size:30px;}
/* .firstSection{height:calc(100vh - 92px);} */
.firstSection{height:auto;}
p{font-size:14px}
.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
/* .xfc-banner {
    background-image: url('<?=BASE_URL?>mitsubishi-medan/assets/img/bg/xfc-concept-banner.png');
} */
.btn-kirim {
    width: 100px !important;
    font-size: 12px !important;
}

.price-fonts {
    height: .5rem !important;
}

#exterior-icon-swipe {
    width: 50px;
    display: block;
    position: absolute;
    right: 1rem;
    z-index: 1;
}

#interior-icon-swipe {
    width: 50px;
    display: block;
    position: absolute;
    right: 1rem;
    z-index: 1;
}


#color-grey {
    background-image: linear-gradient(
        to right,
        #6b7280,
        #374151
    );
}

#color-yellow {
    background-image: linear-gradient(
        to right,
        #eab308,
        #eab308
    );
}

#color-white {
    background-color: white;
}

#color-red {
    background-color: rgb(220 38 38);
}

#color-black {
    background-color: black;
}

#color-silver {
    background-image: linear-gradient(
        to right,
        #6b7280,
        #d1d5db
    );
}

.swiper-pagination-bullet-active {
    background: #ed0000 !important;
}

.swiper-button-next, .swiper-button-prev {
    color: #ed0000 !important;
}

.activeRed {
  color: #ed0000;
}

#accOpt p {transition: .3s all ease;border-bottom:1px solid #000}
@media (max-width: 767px) {
    .exterior-position {
        transform: translate(0, 14.5rem);
    }
    .exterior-xforce {
        width: 200%;
        position: absolute;
    }
    .x-force-icon-bg {
        width: 85%;
        position: relative;
    }
    .exterior-heading {
        top: 5%;
    }
    .font-disclaimer {
      font-size: 1rem !important;
    }
    .padding-section-hero {
      padding-top: 3rem !important;
    }
    /* #exterior-indicator-dynamic-shield {
        position: absolute;
        z-index: 1;
        transform: translate(5rem, 7rem);
    }
    #exterior-indicator-headlight {
        position: absolute;
        z-index: 1;
        transform: translate(4rem, 9rem);
    }
    #exterior-indicator-wheel {
        position: absolute;
        z-index: 1;
        transform: translate(9.75rem, 12.5rem);
    }
    #exterior-indicator-rear {
        position: absolute;
        z-index: 1;
        transform: translate(39rem, 5rem);
    } */
    #exterior-indicator-dynamic-shield {
      position: absolute;
      z-index: 1;
      left: 16%;
      width: 3rem;
      bottom: 42%;
    }

    #exterior-indicator-headlight {
        position: absolute;
        z-index: 1;
        left: 16%;
        width: 3rem;
        bottom: 31%;
    }

    #exterior-indicator-wheel {
        position: absolute;
        z-index: 1;
        left: 41.5%;
        width: 3rem;
        bottom: 11%;
    }

    #exterior-indicator-rear {
        position: absolute;
        z-index: 1;
        left: 175%;
        width: 3rem;
        top: 30%;
    }
    .dynamic-popover {
        transform: translate3D(120px, 1301px, 0px) !important;
    }
    .wheel-popover {
        transform: translate3D(96px, 1280px, 0px) !important;
    }

    .interior-heading {
        padding-bottom: 2rem;
        padding-top: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #exterior-icon-swipe {
        top: 54vw;
    }

    #interior-icon-swipe {
        top: 62vw;
    }

    /* #dynamic-premium-sound {
        position: absolute;
        z-index: 1;
        transform: translate(10rem, 30rem);
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        transform: translate(40.75rem, 12rem);
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        transform: translate(36rem, 20.5rem);
    }

    #drive-mode {
        position: absolute;
        z-index: 1;
        transform: translate(39.75rem, 38rem);
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        transform: translate(61rem, 16.5rem);
    } */

    #dynamic-premium-sound {
      position: absolute;
      z-index: 1;
      left: 80%;
      top: 53.5%;
      width: 3rem;
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        left: 160%;
        top: 27.5%;
        width: 3rem;
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        left: 148%;
        top: 40%;
        width: 3rem;
    }

    #drive-mode {
        position: absolute;
        z-index: 1;
        left: 157.5%;
        bottom: 28%;
        width: 3rem;
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        /* right: 33.5%; */
        left: 212%;
        top: 33.5%;
        width: 3rem;
    }

    .font-safety {
        font-size: 1.25rem !important;
    }

    .registration-section {
        min-height: 105vh !important;
    }
    .ml-kirim {
        margin-left: 2.75rem;
    }
    .second-xfc-banner {
        max-width: 75vw;
    }
    .p-registration {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .xfc-position {
      top: 8rem;
      left: 9%;
      width: 80%;
    }
    .new-suv-position {
      top: 1rem;
      width: 50%;
      align-self:center;
    }
    /* .bigBanner {
        background-blend-mode: darken;
        background-color: rgba(32,32,32, 0.5);
    } */
    /* .firstSection{height:calc(90vh - 120px);} */
    section {
        min-height: 70vh;
    }

    .price-font-labels {
        font-size: .75rem !important;
        /* line-height: .75rem !important; */
    }

    .xfc-banner {
        background-image: url('<?=BASE_URL?>mitsubishi-medan/cars/xfc-concept/xfc-concept-mobile-banner.png');
        height: 80vh;
        background-position: 50%;
        width: 90vw;
        background-size: cover;
        /* width: 1200px;
        height: 80vh;
        background-size: cover;
        background-repeat: no-repeat; */
    }
    .mr-md-10 {
        margin-right: 10rem;
    }

    div#clock {
        top: 18rem;
        right: 4%;
        align-self:center;
        width: 55vw;
    }
    div#clock p {
        background: rgba(0, 0, 0, 0.5);
        float: left;
        height: 55px;
        width: 55px;
    }
    div#clock p span {
        display: block;
        font-size: 30px;
        font-weight: bold;
        padding: .75px 0;
    }
    div#clock div.space {
        color: #ccc;
        display: block;
        line-height: 1.7em;
        font-size: 25px;
        float: left;
        height: 44px;
        width: 15px;
    }
    .xfc-buttons {
        align-self:center;
    }
    .button-book {
        /* width: 180px !important;
        font-size: 14px !important; */
        /* left: 75% !important;  */
        top: -280% !important;   
    }

    /* .header1-span {
        top: 28.5rem !important;
        left: 2.75rem !important;
    }

    .header2-span {
        top: 33rem !important;
        left: 3rem !important;
    }

    .header3-span1 {
        top: 22rem !important;
        left: 26rem !important;
    }

    .header3-span2 {
        top: 30rem !important;
        left: 3rem !important;
    }

    .header3-mb-show {
        display: block !important;
    } */

    .header1-span {
      top: 65% !important;
      left: 10% !important;
    }

    .header2-span {
        top: 80% !important;
        left: 10% !important;
    }

    .header3-span {
        top: 70%;
        left: 10%;
    }

    .banner-page {
      margin-top: 5rem;
    }
}
@media (max-width: 767px) and (orientation: landscape) {
    .new-suv-position {
        left: 14.5rem;
    }
    div#clock {
        top: 40rem;
        left: 2rem;
        align-self:center;
        width: 55vw;
    }
    div#clock p {
        background: rgba(0, 0, 0, 0.5);
        float: left;
        height: 100px;
        width: 100px;
    }
    div#clock p span {
        display: block;
        font-size: 30px;
        font-weight: bold;
        padding: 2px 0;
    }
    div#clock div.space {
        color: #ccc;
        display: block;
        line-height: 1.7em;
        font-size: 25px;
        float: left;
        height: 44px;
        width: 15px;
    }
    .button-book {
        /* width: 180px !important;
        font-size: 14px !important; */
        /* left: 75% !important;  */
        top: -580% !important; 
        left: 11rem !important;  
    }
    .section-exterior {
        transform: translate(0, 8rem);
        height: 180vh;
    }

    .exterior-heading {
        top: -13.5%;
        left: 10%;
    }

    .exterior-position {
        transform: translate(0, -2rem);
    }

    .x-force-icon-bg {
        width: 80%;
        position: absolute;
    }
    
    .exterior-xforce {
        width: 200vw;
        position: relative;
    }

    #exterior-indicator-dynamic-shield {
      position: absolute;
      z-index: 1;
      left: 16%;
      width: 10vw;
      bottom: 48%;
    }

    #exterior-indicator-headlight {
        position: absolute;
        z-index: 1;
        left: 16%;
        width: 10vw;
        bottom: 39%;
    }

    #exterior-indicator-wheel {
        position: absolute;
        z-index: 1;
        left: 43%;
        width: 10vw;
        bottom: 21%;
    }

    #exterior-indicator-rear {
        position: absolute;
        z-index: 1;
        left: 175%;
        width: 10vw;
        top: 28%;
    }

    /* #exterior-indicator-dynamic-shield {
        position: absolute;
        z-index: 1;
        width: 10vw;
        transform: translate(8.5rem, 15rem);
    }

    #exterior-indicator-headlight {
        position: absolute;
        z-index: 1;
        width: 10vw;
        transform: translate(8rem, 18.5rem);
    }

    #exterior-indicator-wheel {
        position: absolute;
        z-index: 1;
        width: 10vw;
        transform: translate(20rem, 25.5rem);
    }
    #exterior-indicator-rear {
        position: absolute;
        z-index: 1;
        width: 10vw;
        transform: translate(81rem, 10rem);
    } */



    .dynamic-popover {
        transform: translate3D(200px, 1305px, 0px) !important;
    }
    .wheel-popover {
        transform: translate3D(96px, 1620px, 0px) !important;
    }

    .interior-heading {
        padding-bottom: 2rem;
        padding-top: 2rem;
        padding-left: 5.5rem;
        padding-right: 5.5rem;
    }

    #exterior-icon-swipe {
        top: 20vw;
    }

    #interior-icon-swipe {
        top: 35vw;
    }

    /* #dynamic-premium-sound {
        position: absolute;
        z-index: 1;
        transform: translate(7.5rem, 28.5rem);
        width: 10vw;
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        transform: translate(40rem, 11rem);
        width: 10vw;
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        transform: translate(34.5rem, 19.5rem);
        width: 10vw;
    }

    #drive-mode {
        position: absolute;
        z-index: 1;
        transform: translate(38rem, 37rem);
        width: 10vw;
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        transform: translate(60rem, 15rem);
        width: 10vw;
    } */
    #dynamic-premium-sound {
      position: absolute;
      z-index: 1;
      left: 80%;
      top: 54%;
      width: 10vw;
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        left: 161%;
        top: 28%;
        width: 10vw;
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        left: 149%;
        top: 40.5%;
        width: 10vw;
    }

    #drive-mode {
        position: absolute;
        z-index: 1;
        left: 157.5%;
        bottom: 28%;
        width: 10vw;
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        /* right: 33.5%; */
        left: 214%;
        top: 34%;
        width: 10vw;
    }
}
.XForceBanner {
    /* background-image: url('<?=BASE_URL?>mitsubishi-medan/assets/img/bg/the-new-suv-kv-mobile.webp'); */
    min-height: 156vw;
    /* min-height: 0; */
    /* margin-top: -20%; */
    position: relative;
    display:flex;
    flex-direction:column;
    background-position: left center;
}
.xfc-buttons {
    top: 62.5%;
    left: 17.5%;
    display: flex;
    flex-direction: column;
    height: 5rem;
}
.button-book {
    width: 220px;
    font-size: 12px;
}
.xfc-font {
    font-size: 2.5rem;
}

.spec-brosur {
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .XForce-bg-1 {
      background-position: top -120px center !important;
    }

    .banner-page {
      margin-top: 5rem;
    }

    /* .header1-span {
        top: 45rem;
        left: 8rem;
    }

    .header2-span {
        top: 50rem;
        left: 25rem;
    }

    .header3-span1 {
        display: none !important;
    }

    .header3-span2 {
        top: 50rem !important;
        left: 8rem !important;
    } */

    .header1-span {
      top: 65% !important;
      left: 10% !important;
    }

    .header2-span {
        top: 82.5% !important;
        left: 50% !important;
    }

    .header3-span {
        top: 75%;
        left: 10%;
    }

    .header3-mb-show {
        display: block !important;
    }

    .section-exterior {
        transform: translate(0, 10rem);
        min-height: 72.5vh;
    }

    .exterior-position {
        position: relative;
    }

    .exterior-heading {
        top: -15%;
        left: 10%;
        width: 50%;
    }

    .x-force-icon-bg {
        width: 80%;
        position: absolute;
    }
    
    .exterior-xforce {
        width: 200vw;
        position: relative;
    }

    #exterior-indicator-dynamic-shield {
      position: absolute;
      z-index: 1;
      left: 16%;
      width: 10vw;
      bottom: 48%;
    }

    #exterior-indicator-headlight {
        position: absolute;
        z-index: 1;
        left: 16%;
        width: 10vw;
        bottom: 39%;
    }

    #exterior-indicator-wheel {
        position: absolute;
        z-index: 1;
        left: 43%;
        width: 10vw;
        bottom: 21%;
    }

    #exterior-indicator-rear {
        position: absolute;
        z-index: 1;
        left: 175%;
        width: 10vw;
        top: 28%;
    }

    /* #exterior-indicator-dynamic-shield {
        position: absolute;
        z-index: 1;
        transform: translate(9.5rem, 15.5rem);
        width: 10vw;
    }

    #exterior-indicator-headlight {
        z-index: 1;
        position: absolute;
        transform: translate(8.5rem, 19rem);
        width: 10vw;
    }

    #exterior-indicator-wheel {
        z-index: 1;
        position: absolute;
        transform: translate(20.75rem, 26.5rem);
        width: 10vw;
    }

    #exterior-indicator-rear {
        z-index: 1;
        position: absolute;
        transform: translate(83rem, 10rem);
        width: 10vw;
    } */

    .wheel-popover {
        transform: translate3d(98px, 2625px, 0px) !important;
    }

    #exterior-icon-swipe {
        right: -18rem;
    }

    #interior-icon-swipe {
        top: 28vw;
    }

    .interior-heading {
        padding-left: 6rem;
        padding-right: 6rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* #dynamic-premium-sound {
        position: absolute;
        z-index: 1;
        transform: translate(8rem, 29rem);
        width: 10vw;
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        transform: translate(39.5rem, 10.5rem);
        width: 10vw;
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        transform: translate(34.5rem, 19rem);
        width: 10vw;
    }

    #drive-mode {
        position: absolute;
        z-index: 1;
        transform: translate(38.25rem, 36.75rem);
        width: 10vw;
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        transform: translate(60rem, 15rem);
        width: 10vw;
    } */

    #dynamic-premium-sound {
      position: absolute;
      z-index: 1;
      left: 80%;
      top: 54%;
      width: 10vw;
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        left: 161%;
        top: 28%;
        width: 10vw;
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        left: 149%;
        top: 40.5%;
        width: 10vw;
    }

    #drive-mode {
        position: absolute;
        z-index: 1;
        left: 157.5%;
        bottom: 28%;
        width: 10vw;
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        /* right: 33.5%; */
        left: 214%;
        top: 34%;
        width: 10vw;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .section-exterior {
        transform: translate(0, 10rem) !important;
        min-height: 110vh !important;
    }

    .exterior-position {
        position: relative;
    }

    .exterior-heading {
        width: 50% !important;
        top: -15% !important;
        left: 7.5% !important;
    }

    .x-force-icon-bg {
        width: 75% !important;
        position: absolute !important;
    }
    
    /* .exterior-xforce {
        width: 200vw !important;
        position: relative !important;
        transform: translate(12rem, -5rem) !important;
    } */

    .exterior-xforce {
      width: 200vw !important;
      position: relative !important;
      left: 23%;
      top: 26%;
      /* transform: translate(12rem, -5rem) !important; */
    }

    /* #exterior-indicator-dynamic-shield {
        position: absolute;
        z-index: 1;
        transform: translate(24rem, 15.5rem);
        width: 10vw;
    }

    #exterior-indicator-headlight {
        z-index: 1;
        position: absolute;
        transform: translate(23rem, 21rem);
        width: 10vw;
    }

    #exterior-indicator-wheel {
        z-index: 1;
        position: absolute;
        transform: translate(39.5rem, 30.25rem);
        width: 10vw;
    }

    #exterior-indicator-rear {
        z-index: 1;
        position: absolute;
        transform: translate(123rem, 9rem);
        width: 10vw;
    }
     */

     #exterior-indicator-dynamic-shield {
      position: absolute;
      z-index: 1;
      left: 37%;
      width: 10vw;
      bottom: 48%;
    }

    #exterior-indicator-headlight {
        position: absolute;
        z-index: 1;
        left: 36%;
        width: 10vw;
        bottom: 39%;
    }

    #exterior-indicator-wheel {
        position: absolute;
        z-index: 1;
        left: 57.5%;
        width: 10vw;
        bottom: 20%;
    }

    #exterior-indicator-rear {
        position: absolute;
        z-index: 1;
        left: 165%;
        width: 10vw;
        top: 28%;
    }

    /* .dynamic-popover {
        transform: translate3d(500px, 1500px, 0px) !important;
    }

    .headlight-popover {
        transform: translate3d(500px, 1700px, 0px) !important;
    }

    .wheel-popover {
        transform: translate3d(550px, 1700px, 0px) !important;
    } */
    
    .popover {
        width: 30vw !important;
    }

    #exterior-icon-swipe {
        top: 25vw;
        right: -25rem;
    }

    #interior-icon-swipe {
        top: 23vw;
    }

    /* #dynamic-premium-sound {
        position: absolute;
        z-index: 1;
        transform: translate(7rem, 28rem);
        width: 10vw;
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        transform: translate(38rem, 10rem);
        width: 10vw;
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        transform: translate(33.5rem, 18rem);
        width: 10vw;
    }

    #drive-mode {
        position: absolute;
        z-index: 1;
        transform: translate(37.5rem, 36rem);
        width: 10vw;
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        transform: translate(59rem, 14rem);
        width: 10vw;
    } */

    #dynamic-premium-sound {
      position: absolute;
      z-index: 1;
      left: 80%;
      top: 54%;
      width: 10vw;
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        left: 161%;
        top: 28%;
        width: 10vw;
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        left: 149%;
        top: 40.5%;
        width: 10vw;
    }

    #drive-mode {
        position: absolute;
        z-index: 1;
        left: 157.5%;
        bottom: 28%;
        width: 10vw;
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        /* right: 33.5%; */
        left: 214%;
        top: 34%;
        width: 10vw;
    }
}


@media (min-width: 768px) {

    .XForce-bg-1 {
        background-image: url('img/background/xforce-infinite-excitement-mobile.webp');
        /* background-position: center; */
        object-fit:cover;
    }

    .button-360 {
        width: 15% !important;
    }
    
    .ml-kirim {
        margin-left: 1.25rem;
    }
    .w-desktop {
        width: calc(100% + 1rem);
    }
    section {
        min-height: 50vh;
    }
    #footer {
        min-height: 50vh;
    }
    .second-xfc-banner {
        max-width: 408px;
    }
    .p-registration {
        padding-left: 5.5rem;
        padding-right: 5.5rem;
    }
    .registration-section {
        min-height: 47.5vh !important;
    }
    .registration-font {
        font-size: 3rem !important;
    }
    .mb60 {
        margin-bottom: 30px;
    }
    .mr-md-10 {
        margin-right: 6rem;
    }
    .btn-kirim {
        width: 220px !important;
        font-size: 12px !important;
    }
    /* .firstSection{height:calc(100vh - 280px);} */
    p{font-size:16px}
    .XForceBanner {
        /* background-image: url('<?=BASE_URL?>mitsubishi-medan/assets/img/bg/the-new-suv-kv-mobile.webp');
        height: 128vw; */
        min-height: 0;
        /* margin-top: -20%; */
        position: relative;
        display:flex;
        flex-direction:column;
        background-position: left center;
    }
    .xfc-font {
        font-size: 3rem;
    }
    .new-suv-position {
      top: 2rem;
      width: 30%;
      align-self:center;
    }
    .xfc-position {
      top: 18rem;
      left: 10%;
      width: 80%;
    }
    /* .xfc-buttons {
        top: 75%;
        left: 29.5%;
        display: flex;
        flex-direction: column;
        height: 5rem;
    } */
    .xfc-buttons {
        top: 85%;
        left: 14.75rem;
        display: flex;
        flex-direction: column;
        height: 5rem;
    }
    .button-book {
        width: 325px;
        font-size: 12px;
    }
    .button-custom-book {
        width: 200px !important;
        height: 50px !important;
    }
    
    .xfc-banner {
        background-image: url('<?=BASE_URL?>mitsubishi-medan/cars/xfc-concept/xfc-concept-banner.png');
        width: 100vw;
        height: 65vw;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    div#clock {
        top: 25rem;
        right: 4rem;
        align-self:center;
        width: 55vw;
    }
    div#clock p {
        background: rgba(0, 0, 0, 0.5);
        float: left;
        height: 100px;
        width: 100px;
    }
    div#clock p span {
        display: block;
        font-size: 30px;
        font-weight: bold;
        padding: 2px 0;
    }
    div#clock div.space {
        color: #ccc;
        display: block;
        line-height: 1.7em;
        font-size: 25px;
        float: left;
        height: 44px;
        width: 15px;
    }

    /* .header1-span {
        top: 33.5rem;
        left: 4rem;
    }

    .header2-span {
        top: 40rem;
        left: 3rem;
    }

    .header3-span1 {
        top: 22rem;
        left: 26rem;
    }

    .header3-span2 {
        top: 35rem;
        left: 3rem;
    } */

    .image-slider {
        height: 420px;
    }


}

@media (max-width: 1025px) {
    .mt-header {
        margin-top: -5rem !important;
    }

    .swiper-slide {
        background-size: cover !important;
        background-repeat: no-repeat;
        background-position: 0 50px;
        z-index: 9999;
    }

    .XForce-swiper {
        width: 100% !important;
        height: 100vh !important;
    }

    .XForce-bg-1 {
        background-image: url('img/background/xforce-infinite-excitement-mobile.webp');
        /* background-position: bottom center !important; */
        object-fit:cover;
    }

    .XForce-bg-2 {
        background-image: url('img/background/xforce-header2-mb.webp');
        background-position: top 80px center !important;
        object-fit:cover;
    }

    .XForce-bg-3 {
        background-image: url('img/background/xforce-header3-mb.webp');
        background-position: center;
        object-fit:cover;
    }

    .XForce-bg-4 {
        background-image: url('img/background/xforce-header4-mb.png');
        background-position: center;
        object-fit:cover;
    }

   
}

@media (min-width: 1026px) {

    .xforce-color {
        width: 69%;
    }

    .spec-brosur {
      width: 80% !important;
    }
    
    .x-force-icon-bg {
        width: 50%;
        position: relative;
    }
    .font-header {
        font-size: 3rem !important;
    }
    /* .w-desktop {
        width: 96% !important;
    } */
    .XForce-swiper {
        width: 100% !important;
        height: 100% !important;
    }

    .XForce-bg-1 {
        background-image: url('img/background/xforce-infinite-excitement.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        object-fit:cover;
        /* position: absolute; */
    }

    .XForce-bg-2 {
        background-image: url('img/background/xforce-header2.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        object-fit:cover;
        /* position: absolute; */
    }

    .XForce-bg-3 {
        background-image: url('img/background/xforce-header3.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        object-fit:cover;
        /* position: absolute; */
    }

    .XForce-bg-4 {
        background-image: url('img/background/xforce-header4.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        object-fit:cover;
        /* position: absolute; */
    }

    .section-exterior {
        min-height: 70vh !important;
    }

    .section-exterior > img {
        max-height: 100vh !important;
    }

    /* .exterior-xforce {
        width: 80vw;
        transform: translate(18rem, 10rem);
        position: absolute;
    } */

    .button-spesifikasi {
      width: 100%;
      overflow: hidden;
      position: relative;
      transition: all .3s ease-in-out;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      z-index: 2;
      border: 2px solid black;
      color: black;
      background: white;
      line-height: .5;
      padding: 1.5rem 1rem;
      font-weight: 600;
    }

    .exterior-xforce {
      width: 80vw;
      /* transform: translate(18rem, 10rem); */
      left: 23%;
      top: 26%;
      position: absolute;
    }

    .exterior-heading {
        width: 30%;
        top: 5%;
        left: 5%;
    }

    /* #exterior-indicator-dynamic-shield {
        z-index: 1;
        position: absolute;
        transform: translate(24.5rem, 21rem);
    }

    #exterior-indicator-headlight {
        z-index: 1;
        position: absolute;
        transform: translate(24rem, 23.5rem);
    }

    #exterior-indicator-wheel {
        z-index: 1;
        position: absolute;
        transform: translate(32.35rem, 28.25rem);
    }

    #exterior-indicator-rear {
        z-index: 1;
        position: absolute;
        transform: translate(74rem, 17.5rem);
    } */

    /* .exterior-height {
      height: 360px !important;
    } */

    #exterior-indicator-dynamic-shield {
      position: absolute;
      z-index: 1;
      left: 30%;
      width: 3rem;
      bottom: 35%;
    }

    #exterior-indicator-headlight {
        position: absolute;
        z-index: 1;
        left: 30%;
        width: 3rem;
        bottom: 28%;
    }

    #exterior-indicator-wheel {
        position: absolute;
        z-index: 1;
        left: 40.25%;
        width: 3rem;
        bottom: 15%;
    }

    #exterior-indicator-rear {
        position: absolute;
        z-index: 1;
        right: 2.5%;
        width: 3rem;
        top: 48%;
    }

    .price-fonts {
        font-size: 1.25rem !important;
        line-height: 1.25rem !important;
    }

    .popover {
        max-width: 35vw !important;
    }

    .popover-wheel {
        transform: translate3D(24.5rem, 21rem);
    }

    /* #dynamic-premium-sound {
        position: absolute;
        z-index: 1;
        transform: translate(9rem, 30rem);
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        transform: translate(40.5rem, 11.75rem);
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        transform: translate(36.25rem, 20.5rem);
    }

    #drive-mode {
        position: absolute;
        z-index: 1;
        transform: translate(39.75rem, 38rem);
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        transform: translate(61rem, 16rem);
    } */

    #dynamic-premium-sound {
      position: absolute;
      z-index: 1;
      left: 23.5%;
      top: 53.5%;
      width: 3rem;
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        left: 47%;
        top: 27.5%;
        width: 3rem;
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        left: 43.5%;
        top: 40%;
        width: 3rem;
    }


    /* #auto-climate-control {
        position: absolute;
        z-index: 1;
        transform: translate(36.25rem, 20.5rem);
    } */

    #drive-mode {
        position: absolute;
        z-index: 1;
        left: 46%;
        bottom: 28%;
        width: 3rem;
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        right: 33.5%;
        top: 33.5%;
        width: 3rem;
    }

    .interior-heading {
       padding-top: 3rem;
       padding-bottom: 3rem;
       padding-left: 5rem;
       padding-right: 5rem; 
    }

    .interior-wrapper {
        overflow-x: hidden;
        overflow-y: hidden;
        height: fit-content;

    }

    #exterior-icon-swipe {
        display: none;
    }

    #interior-icon-swipe {
        display: none;
    }

    .registration-section {
        min-height: 87.5vh !important;
    }
    .ml-kirim {
        margin-left: 3rem;
    }
    .p-registration {
        padding-left: 8.25rem;
        padding-right: 8.25rem;
    }
    .p-register {
        padding-left: 8.25rem;
        padding-right: 8.25rem;
    }

    .price-tags {
        width: 41.666667%;
    }

    /* .section-up {
        margin-top: -3rem;
    } */

    .mr-md-10 {
        margin-right: 2.5rem;
    }
    .second-xfc-banner {
        max-width: 460px;
    }
    .firstSection{height:calc(80vh - 48px) !important;}
    /* .header1-span {
        top: 26.5rem;
        left: 5rem;
    }

    .header2-span {
        top: 20rem;
        left: 8rem;
    }

    .header3-span1 {
        top: 22rem;
        left: 26rem;
    }

    .header3-span2 {
        top: 26rem;
        left: 8rem;
    }

    .header3-mb-show {
        display: none !important;
    } */

    .header1-span {
      top: 65% !important;
      left: 10% !important;
    }

    .header2-span {
        top: 70% !important;
        left: 10% !important;
    }

    .header3-span {
        top: 70%;
        left: 10%;
    }

    .header3-mb-show {
      display: none !important;
    }
    
    .xfc-position {
        top: 6rem;
        /* top: 0; */
        width: 16rem;
        left: 64rem;
        right: 6rem;
        bottom: 308px;
    }
    .new-suv-position {
        top: 2.5rem;
        width: 28rem;
        left: 48rem;
        right: 6rem;
        bottom: 308px;
    }
    .xfc-banner {
        width: 1200px;
        height: 80vh;
        background-size: cover;
        background-repeat: no-repeat;
    }
    /* .xfc-buttons {
        top: 70%;
        left: 27.5%;
        width: 32rem;
        flex-direction: row;
    } */
    .xfc-buttons {
        top: 80%;
        left: 36.5%;
        width: 32rem;
        flex-direction: row;
    }
    .XForceBanner {
        /* background-image: url('<?=BASE_URL?>mitsubishi-medan/assets/img/bg/the-new-suv-kv.webp');
        background-position-x: 0; */
        margin-top: 0;
        height: 80vw;
        background-position: center;
    }
    .button-book {
        width: 200px;
        height: 50px;
        font-size: 14px;
    }
    div#clock {
        top: 1rem;
        left: 11.5%;
        width: auto;
        /* width: 300px; */
    }
    .wheel-popover {
        transform: translate3d(600px, 1912px, 0px) !important;
    }

    
}



@media(min-width: 1281px) {
    .XForceBanner {
        height: 120vw;
    }

    .firstSection{height:calc(100vh) !important;}

    .header1-span {
        top: 26.5rem;
        left: 5rem;
    }

    .header2-span {
        top: 20rem;
        left: 8rem;
    }

    .header3-span1 {
        top: 22rem;
        left: 26rem;
    }

    .header3-span2 {
        top: 26rem;
        left: 8rem;
    }

    /* #exterior-indicator-dynamic-shield {
        z-index: 1;
        position: absolute;
        transform: translate(25rem, 22rem);
    }

    #exterior-indicator-headlight {
        z-index: 1;
        position: absolute;
        transform: translate(24rem, 24.5rem);
    }

    #exterior-indicator-wheel {
        position: absolute;
        z-index: 1;
        transform: translate(33.45rem, 29.5rem);
    }

    #exterior-indicator-rear {
        position: absolute;
        z-index: 1;
        transform: translate(78rem, 18rem);
    } */

    #exterior-indicator-wheel {
      position: absolute;
      z-index: 1;
      left: 40.7%;
      width: 3rem;
      bottom: 14.5%;
   }

    /* #dynamic-premium-sound {
        position: absolute;
        z-index: 1;
        transform: translate(9rem, 30rem);
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        transform: translate(40.5rem, 11.75rem);
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        transform: translate(36.25rem, 20.5rem);
    }

    #drive-mode {
        position: absolute;
        z-index: 1;
        transform: translate(39.75rem, 38rem);
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        transform: translate(61rem, 16rem);
    } */

    #dynamic-premium-sound {
      position: absolute;
      z-index: 1;
      left: 23.5%;
      top: 54%;
      width: 3rem;
    }

    #smartphone-display {
        position: absolute;
        z-index: 1;
        left: 47%;
        top: 27.5%;
        width: 3rem;
    }

    #auto-climate-control {
        position: absolute;
        z-index: 1;
        left: 43.5%;
        top: 40%;
        width: 3rem;
    }

    #drive-mode {
        position: absolute;
        z-index: 1;
        left: 46%;
        bottom: 28%;
        width: 3rem;
    }

    #digital-display {
        position: absolute;
        z-index: 1;
        right: 34%;
        top: 34%;
        width: 3rem;
    }

    .new-suv-position {
        top: 2.5rem;
        width: 28rem;
        left: 52rem;
        right: 6rem;
        bottom: 308px;
    }

    .xfc-buttons {
        top: 80%;
        left: 36.5%;
        width: 32rem;
        flex-direction: row;
    }

    div#clock {
        top: 1rem;
        left: 10%;
    }
}

/* xforce svg animations */
@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
      opacity: 0.3;
  }

  100% {
      opacity: 1;
  }
}

.interior-indicator, .exterior-indicator {
  animation: blink 1.5s infinite;
  cursor: pointer !important;
}

.squareBox {
  cursor: pointer;
  width: 35px;
  height: 35px;
  border: 1px solid black;
}

.w-40 {
  width: 40%;
}
.w-30 {
  width: 30%;
}
.w-50 {
  width: 50%;
}
.w-60 {
  width: 60%;
}
.w-70 {
  width: 70%;
}
.w-80 {
  width: 80%;
}
.w-90 {
  width: 90%;
}

@media (min-width: 768px) {
  .w-md-40 {
    width: 40% !important;
  }
  .w-md-30 {
    width: 30% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
  .w-md-60 {
    width: 60% !important;
  }
  .w-md-70 {
    width: 70% !important;
  }
  .w-md-80 {
    width: 80% !important;
  }
  .w-md-90 {
    width: 90% !important;
  }
}

@media (max-width: 380px) and (max-height: 600px) {
  section {
    min-height: 85vh;
  }
}

.interior-dashboard {
  width: 340%;
}

@media (min-width: 1080px) {
  .w-lg-100 {
    width: 100% !important;
  }
}

.slider-height {
  height: 200px;
}

@media (max-width: 768px) and (orientation: landscape) {
  .slider-height {
      height: 280px;
  }
}

@media(min-width: 768px) {
  .slider-height {
      height: 380px !important;
  }
}

@media (max-width: 320px) {
  .slider-height {
      height: 180px !important;
  }
}