@import url('../font/Rota-Regular.otf');
@import url('../font/Rota-ExtraBold.otf');
@import url('../font/Rota-ExtraLight.otf');

@font-face {
    font-family: 'Rota'; 
    src: url('../font/Rota-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Rota-ExtraBold'; 
  src: url('../font/Rota-ExtraBold.otf') format('opentype');
}
@font-face {
  font-family: 'Rota-ExtraLight'; 
  src: url('../font/Rota-ExtraLight.otf') format('opentype');
}
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Rota';
  overflow-x: hidden;
  color: #808285;
  max-width: 100%;
  overflow-y: auto; 
}
/* Untuk Chrome, Safari, dan Edge */
body::-webkit-scrollbar {
  display: none;
}
/* Untuk Firefox */
body {
  scrollbar-width: 0px;
}
/* Untuk Internet Explorer dan versi lama Microsoft Edge */
body {
  -ms-overflow-style: none;
}

/* Main Page Styling */
.main-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 3rem;
}
.contents {
  overflow-x: hidden;
}

/* navbar */
nav {
  display: flex;
  /* position: fixed; */
  background-color: #CD5D27;
  justify-content: space-between;
  height: 40px;
  color:white;
  align-items: center;
  /* width: 100%;
  z-index:900;
  top: 4.8rem; */
}
nav ul {
  display: flex;
  list-style: none;
  width: 100%;
  justify-content: center;
  text-align: center;
}
nav ul li a {
  position: relative;
  color:white;
  text-decoration: none;
  font-size: 0.8em;
  padding-right: 2.7rem;
  padding-left: 2.7rem;
  padding-bottom: 0.816rem;
  letter-spacing: 0.3px;
  padding-top: 1rem;
  margin:0;
}
nav ul li a:hover{
  background-color: white;
  color: chocolate;
  margin-left: -0.05em;
}
nav .logo {
  letter-spacing: 3px;
}

/* hamburger menu */
.menu-toggle {
  display: none;
  flex-direction: column;
  height: 20px;
  justify-content: space-between;
  position: relative;
}
.menu-toggle input {
  position: absolute;
  width: 50px;
  height: 25px;
  left: -10px;
  top:-4px;
  opacity: 0;
  cursor:pointer;
  z-index: 2;
}
.menu-toggle span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: white;
  transition: all 0.5s;
}
.middle {
  width: 20px !important;
}
/* hamburger menu animation */
.menu-toggle span:nth-child(2) {
  transform-origin: 0 0;
}
.menu-toggle input:checked ~ span:nth-child(2){
  transform: rotate(45deg) translate(-1px, -1px);
}
.menu-toggle span:nth-child(4) {
  transform-origin: 0 100%;
}
.menu-toggle input:checked ~ span:nth-child(4){
  transform: rotate(-45deg) translate(-1px, 0);
}
.menu-toggle input:checked ~ span:nth-child(3){
  opacity: 0;
  transform: scale(0)
}
.line-section {
  background-color: black;
  width: 100%;
  height: 10px;
}
.line {
  background-color: black;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7px;
  height: 37px !important;
}
.category {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  height: 37px;
  width: 150px;
  transition: background-color 0.3s, color 0.3s;
  font-size: 0.9em;
}
.category:hover {
  background-color: white; 
}
.category:hover a {
  color: black; 
}
.category.active {
  background-color: white;
}
.category.active a {
  color: black;
  text-decoration: none;
  font-weight: bold;
}
.category a {
  text-decoration: none;
  color: white;
}
.line .category:first-child {
  margin-left: -760px; 
}
.line p {
  color: white; 
  margin: 0; 
}
.navbar-item.active a {
  background-color: #fff;
  color: #CD5D27;
  font-weight: bold;
  font-family: 'Rota-ExtraBold';
}

/* Show line when 'Media' is active */
.line.show {
  display: flex;
  justify-content: center;
}
.line.hide {
  display: none;
}
.line-section.show {
  display: flex;
}
.line-section.hide {
  display: none;
}

/* triangle menu */
.navbar-item.active a:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid black;
  opacity: 1;
  transition: opacity 0.3s, top 0.3s;
}
dir.icon-search-header {
  width: 5.5em;
  margin-left: 7.4em;
  display: none;
}
dir.icon-search-header img {
  width: 70%;
  height: auto;
  object-fit: cover;
}
dir.icon-search-header2 {
  width: 2.5em;
  margin-left: 1em;
  margin-top: 0.3em;
  display: none;
}
dir.icon-search-header2 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* PAGE-HOME */
/* Banner */
.slider {
  width: 100%;
  height: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.slick-dotted.slick-slider {
  margin-bottom: 0px;
}
.slider li {
  position: relative;
  width: 100%;
  height: 100%;
}
.slider li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slick-dots {
  position: absolute;
  bottom: 10%;
  left: 10%; 
  transform: translateX(-50%); 
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 70px;
  height: 1em;
}
.slick-dots li {
  margin: 0 5px; 
}
.slick-dots li button {
  border-radius: 13%;
  width: 20px;
  height: 3.5px;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 0;
}
.slick-dots li.slick-active button {
  background: #ff6600; 
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  height: 86vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-dots li button:before {
  font-family: slick;
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: none;
  text-align: center;
  opacity: .25;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tp-bullets {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tp-bullets .tp-bullet {
  width: 10px;
  height: 1px;
  background-color: white !important; 
  border-radius: 5px; 
  border: 2px solid transparent !important; 
  transition: none; 
}
.tp-bullets .tp-bullet:not(.selected) {
  width: 15px; 
}
.tp-bullets .tp-bullet.selected {
  width: 25px; 
  background-color: #CD5D27 !important; 
  transition: width 0.3s ease, background-color 0.3s ease; 
}

/* Page Home About */
.about-section {
  width: 70rem;
  box-sizing: border-box;
  display: flex;
  margin: 0 auto;
  justify-content: center;
}
.map-section {
  width: 70rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.galery-section {
  width: 100%;
  max-width: 1600px;
  display: flex; 
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 1rem; 
  margin-top: 30px;
}
.map-content {
  width: 1300px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.galery-content {
  width: 100%;
  max-width: 1600px;
  height: 665px;
  max-height: 900px; 
  display: flex; 
  flex-direction: column;
  align-items: center;
}
.about-image {
  height: 550px;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-content {
  height: 550px;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 50px;
}
.home-about-title {
  display: flex;
  align-items: left;
  padding-left: 20px;
}
.h2-about {
  color: #CD5D27 !important;
  font-size: 1.6em;
  font-weight: bold;
  letter-spacing: 2px;
  font-weight: bold !important;
  font-family: 'Rota-ExtraBold' !important;
}
.home-about-desc {
  color: #808285 !important;
  font-size: 1em;
  padding-left: 20px;
  padding-top: 10px;
  width: 100%;
  text-align: justify;
  line-height: 20px;
  letter-spacing: 0.8px;
}
.home-about-btn {
  margin-top: 30px;
  margin-left: 20px;
  height: 23px;
  width: 80px;
  max-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #a5a5a5;
  transition: background-color 0.3s, color 0.3s;
}
.about-image img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.map-title {
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-desc {
  width: 63rem;
  margin: 10px;
  text-align: center;
  font-size: 1em;
  letter-spacing: 0.8px;
  line-height: 23px;
}
.map-image {
  width: 70rem;
  height: 500px;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.map-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
}
.galery-image {
  width: 100%;
  max-width: 1600px;
  height: 800px;
  margin: 10px;
  display: flex;
  flex-direction: row; 
  justify-content: center;
  align-items: center; 
  padding-top: 20px;
  gap: 1.6px;
}
.galery-title{
  align-items: center;
  justify-content: center;
  display: flex;
}
.galery-image1 {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; 
}
.galery-image2 {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
}
.galery-image2 img {
  width: 100%;
  height: 50%; 
  object-fit: cover; 
}
.galery-image1 img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
}
.galery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: transform 0.1s ease; 
}
.galery-image img:hover {
  transform: scale(1.04); 
}
.h2-galery {
  color: #CD5D27;
  font-size: 1.7em;
  letter-spacing: 2px;
  font-weight: 700;
  font-family: 'Rota-ExtraBold' !important;
}
.h2-about-btn {
  color: #7f7f7f;
  font-size: 0.6em;
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 200;
}
.home-about-btn a {
  color: inherit; 
  text-decoration: none; 
  width: 100%; 
  height: 100%; 
  display: flex;
  align-items: center;
  justify-content: center; 
}
.home-about-btn:hover {
  background-color: #CD5D27; 
}
.home-about-btn:hover .h2-about-btn,
.home-about-btn:hover a {
  color: #FFFFFF; 
}
.h2-map {
  color: #CD5D27;
  font-size: 1.6em;
  font-weight: bold;
  letter-spacing: 2px;
  font-family: 'Rota-ExtraBold' !important;
}


/* ABOUT SECTION */
/* Banner Section*/
.banner-about-section {
  width: 100%;
  max-width: 67em;
  height: 26em;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 3.9em;
}
.banner-about-banner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
}
.banner-about-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* About Section*/
.page-about-section {
  width: 100%;
  max-width: 57em;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: 20px 0;
}
.page-about-title-us {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 35px;
}
.page-about-title-us h2 {
  font-size: 1.6em;
  letter-spacing: 2px;
  font-weight: bold;
  color: #CD5D27;
  font-family: 'Rota-ExtraBold' !important;
}
.page-about-desc {
  width: 100%;
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  padding: 10px;
  box-sizing: border-box;
}
.page-about-desc .desc-content {
  width: 100%;
}
.page-about-desc .desc-content p {
  margin: 0;
  text-align: center !important;
  font-size: 0.9em;
  line-height: 23px;
  letter-spacing: 1px;
}

/* Goal Section */
.page-about-goal {
  width: 100%;
  max-width: 57em;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  margin-top: 10px !important;
  margin: 0 auto;
}
.page-about-title-goal {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}
.page-about-title-goal h2 {
  font-size: 1.6em;
  letter-spacing: 2px;
  font-weight: bold;
  color: #CD5D27;
  font-family: 'Rota-ExtraBold' !important;
}
.page-about-vision {
  width: 100%;
  height: max-content;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 10px;
  margin-top: 1em;
  border-radius: 10px;
  border: 4px solid #fafafa;
}
.page-about-vision-image {
  width: 100%;
  max-width: 220px;
  display: flex;
  align-items: center;
  height: 8em;
  margin-right: 10px;
}
.page-about-vision-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-about-vision-content {
  width: 100%;
  margin-left: 20px !important;
  max-width: 1500px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-left: 1em;
  justify-content: center;
  gap: 0.9em;
  padding-bottom: 1.5em;
  padding-top: 1.5em;
}
.page-about-vision-title {
  width: 100%;
  margin-left: 50px;
}
.page-about-vision-desc {
  width: 100%;
  min-height: 100px;
  line-height: 19px;
  font-size: 0.9em;
  margin-left: 50px;
  letter-spacing: 1px;
  text-align: left;
  object-fit: cover;
  padding-left: 10px;
  padding-right: 3.3em;
}
.page-about-mision {
  width: 100%;
  height: max-content;
  max-width: 1050px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 10px;
  padding-top: 0 !important;
  border-radius: 10px;
  margin-top: -6em;
  margin-top: 2em;
  border: 4px solid #fafafa;
}
.page-about-mision-image {
  width: 100%;
  max-width: 220px;
  display: flex;
  height: 9.6em;
  align-items: center;
  margin-right: 10px;
}
.page-about-mision-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-about-mision-content {
  width: 100%;
  max-width: 1500px;
  display: flex;
  margin-left: 20px !important;
  align-items: center;
  padding-left: 1em;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 1.5em;
  padding-top: 1.5em;
}
.page-about-mision-title {
  width: 100%;
  min-height: 50px;
  margin-left: 50px;
}
.page-about-mision-desc {
  width: 100%;
  min-height: 100px;
  line-height: 19px;
  font-size: 0.9em;
  margin-left: 50px;
  letter-spacing: 1px;
  text-align: left;
  object-fit: cover;
  padding-left: 10px;
  padding-right: 3.3em;
}

/* Mailstone Section */
.milestone-section {
  padding: 20px;
  position: relative;
  height: 400px;
}
.milestone-title {
  font-size: 1.6em;
  letter-spacing: 2px;
  font-weight: bold;
  color: #CD5D27;
  font-family: 'Rota-ExtraBold' !important;
  margin-bottom: 20px;
  text-align: center;
}
.milestone-timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  left: 20px;
  top: 80px;
  margin-top: 25px;
}
.milestone-year-item {
  position: relative;
  margin-bottom: 40px;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Rota-ExtraBold' !important;
  font-weight: bold;
  color: #aaa;
  transition: color 0.3s, font-size 0.3s;
}
.milestone-year-item::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #aaa;
  position: absolute;
  right: -21.6px;
  margin-bottom: -30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  transition: background-color 0.3s, width 0.3s, height 0.3s;
}
.milestone-year-item.active {
  color: #CD5D27;
  font-size: 1.5em;
  font-family: 'Rota-ExtraBold';
  font-weight: bold;
}
.milestone-year-item.active::before {
  background-color: #CD5D27;
}
.milestone-timeline::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 100%;
  background-color: #ddd;
  right: -17px;
  top: -17px;
}
.milestone-content-container {
  margin-left: 110px;
  width: calc(100% - 200px);
  max-width: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
  max-height: 320px;
  margin-top: 34.5px;
}
.milestone-content {
  display: none;
  background-color: #CD5D27;
  padding: 20px;
  border-radius: 5px;
  color: white;
}
.milestone-content.active {
  flex-direction: column;
  align-items: center;
  display: flex;
  height: 100%;
  max-height: 320px;
  overflow: auto;
  row-gap: 1em;
}
.milestone-nested {
  display: flex;
  align-items: center;
}
.milestone-img-container {
  flex: 0 0 100px;
  margin-right: 20px;
  background-color: white;
}
.milestone-img-container img {
  width: 100px;
  height: auto;
  border-radius: 5px;
}
.milestone-nested-desc {
  flex: 1;
  font-size: 0.8em;
  letter-spacing: 1px;
}
.company-history-section {
  margin-bottom: 55px;
  margin-top: 1.5em;
}


/* NEWS & ARTICLE SECTION MULTIPLE*/
.content-news {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 20px;
  width: 100%;
  margin-top: 8em;
  margin-bottom: 2.5em;
}
.news-page {
  display: flex;
  flex-direction: column;
  width: 47%;
}
.news-wrap {
  margin-bottom: 20px;
  padding: 10px;
}
.news-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.1s ease;
}
.news-wrap img:hover {
  transform: scale(1.1);
}
.news-wrap h2 {
  font-size: 1.1em;
  color: #CD5D27;
  margin: 10px 0 3px;
  font-weight: bold;
  max-width: 500px;
}
.news-wrap a,
.news-wrap a:hover,
.news-wrap a:focus,
.news-wrap a:active {
  text-decoration: none;
}
.news-image {
  background-color: #333;
  max-width: 500px;
  height: 280px;
  overflow: hidden;
}
.news-date {
  font-size: 0.8em;
  color: #777;
  margin-top: 0px;
}
.new-news {
  max-width: 400px;
  padding: 10px;
}
.news-news-content {
  padding: 15px;
  border: 2px solid #a39b9b;
}
.new-news h2 {
  font-size: 1.2em;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
  letter-spacing: 2px;
}
.new-news a {
  text-decoration: none;
  color: inherit;
}
.new-news-title {
  font-size: 0.8em;
  color: #555;
  margin-bottom: 5px;
  letter-spacing: 0.9px;
  line-height: 17px;
  padding-left: 2.5em;
  position: relative;
  display: block;
}
.new-news-title:hover {
  color: #CD5D27;
}
.tag-underline {
  text-decoration: none;
}
.new-news-title::before {
  content: attr(data-index) " ";
  color: #555;
  margin-left: -2.5em;
  margin-right: 10px;
  position: absolute;
}

/* Pagination Styles */
.paginationjs-theme-yellow .paginationjs-pages {
  text-align: center;
}
.paginationjs {
  margin-left: 35%;
}
.paginationjs-theme-yellow .paginationjs-pages li {
  display: inline-block;
  margin: 0 5px;
}
.paginationjs .paginationjs-pages li:first-child, .paginationjs .paginationjs-pages li:first-child>a {
  border-radius: 0;
  font-size: 0;
  display: none;
}
.paginationjs .paginationjs-pages li {
  float: left;
  border: none;
}
.paginationjs.paginationjs-theme-yellow .paginationjs-pages li.active>a {
  background: #CD5D27;
  color: #fff;
  border-radius: 50%;
  height: 0.7rem;
  width: 0.7rem;
}
.paginationjs.paginationjs-theme-yellow .paginationjs-pages li {
  border-color: #ec971f;
  border: none;
}
.paginationjs .paginationjs-pages li>a {
  min-width: 0;
}
.paginationjs-theme-yellow .paginationjs-pages li>a {
  width: 0.7rem;
  height: 0.7rem;
  line-height: 30px;
  border-radius: 50% !important; 
  background-color: #000000; 
  color: #fff;
  display: block;
  text-align: center;
  font-size: 0;
  text-decoration: none;
}
.paginationjs-theme-yellow .paginationjs-pages li.active>a {
  background-color: #ffcc00;
  color: #333;
}
.paginationjs-theme-yellow .paginationjs-prev,
.paginationjs-theme-yellow .paginationjs-next {
  display: inline-block; 
  margin: 0 10px;
}
.paginationjs-theme-yellow .paginationjs-prev>a,
.paginationjs-theme-yellow .paginationjs-next>a {
  background-color: #000; 
  color: #fff; 
  border-radius: 50%;
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  text-decoration: none;
}
.paginationjs .paginationjs-nav {
  float: left;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  display: none;
}


/* NEWS & ARTICLE SINGLE */
.news-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 38px;
}
.news-content-related{
  width: 950px;
  height: auto;
  margin-top: 10em;
}
.news-title {
  width: 100%;
  height: auto;
}
.news-title h1 {
  font-size: 1.3em;
  color: #CD5D27;
  font-weight: bold;
  letter-spacing: 1.5px;
}
.news-date-single {
  font-size: 0.9em;
  margin-top: 0.3em;
}
.news-image-single {
  width: 100%;
  height: 25em;
  margin-top: 50px;
}
.news-image-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-content-desc {
  margin-top: 45px;
  font-size: 0.88em;
  letter-spacing: 0.9px;
  line-height: 18px;
}
.news-content-desc p {
  text-align: left;
}
.related-news {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 950px;
  margin-top: 68px;
}
.h2-title-news {
  font-size: 1.05em;
  color: #CD5D27;
  font-weight: bold;
  letter-spacing: 1.5px;
}
.related-news-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6.7%;
}
.related-news-content {
  border: 1px solid #a7a7a7;
  margin-top: 15px;
  width: 100%;
  height: auto;
  display: flex;
  flex-basis: 28.85%;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.related-news-link {
  text-decoration: none;
  width: 100%;
  color: none;
}
.related-news-image {
  width: 100%;
  height: 170px;
  overflow: hidden;
}
.related-news-image img {
  width: 100%;
  height: 100%;
  transition: transform 0.1s ease;
  object-fit: cover;
}
.related-news-image:hover img {
  transform: scale(1.05);
}
.related-news-title {
  width: 100%;
  height: auto;
  padding: 12px;
  color: #808285;
  font-size: 0.65em;
  display: flex;
  align-items: center;
  font-family: 'Rota-Extralight';
}
.news-back {
  margin-top: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.news-back-button {
  display: flex; 
  text-decoration: none;
}
.back-button {
  height: 16px;
  width: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 0, 0);
}
.back-button:hover {
  background-color: #CD5D27;
}
.back-button h2 {
  font-weight: bold;
  color: white;
}
.icon {
  display: flex;
  color: white;
  font-size: 1.4em;
  margin-top: 21%;
}
.back {
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: rgb(0, 0, 0);
  font-size: 0.7em;
}


/* PRODUCT MULTIPLE */
img.lazy {
  background-image: url('/themes/mcgroup/img/spinner.gif');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.dropdown-container {
  display: none;
}
.category-name h3 {
  font-size: 0.8em;
  display: inline-block;
  color: #747474;
  margin-bottom: 0.7rem;
  font-family: "Rota-ExtraLight";
}
.category-all-product {
  font-size: 0.8em;
  display: inline-block;
  color: #797777;
  margin-bottom: 0.7rem;
  font-family: "Rota-ExtraLight";
  text-decoration: none;
  font-weight: bold;
}
.category-name a.active h3,
.category-all-product.active {
color: orange;
font-weight: bold;
}

.product-page {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 10.5rem;
  margin-bottom: 3em;
  height: 100%;
  max-height: 480px;
}
.product-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  height: 480px;
  max-height: 480px;
}
.product-title {
  margin-top: 50px;
  width: 150px;
  display: flex;
  justify-content: center;
}
.product-section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: 2rem;
  width: 100%;
  max-width: 1100px;
  height: 100%;
  max-height: 480px;
}
.category-section-product {
  max-width: 12rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.category-section-product h2 {
  color: #CD5D27;
  font-size: 1.5rem;
}
.category-section-product ul {
  margin-top: 1.6rem;
  list-style: none;
}
.category-name-item {
  font-size: 1.5em;
  font-weight: bold;
  color: black;
}
.line-section-item {
  background-color: #dfdfdf;
  width: 97%;
  height: 2px;
  margin-top: 1.8rem;
}
.item-section {
  width: 100%;
  max-width: 55rem;
  overflow: auto;
  border-left: 3px solid #dfdfdf;
  padding-left: 25px;
  overflow-y: scroll;
}
.item-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  position: relative;
  padding: 10px;
  height: max-content;
  margin-top: 2rem;
}
.product-image {
  margin-top: 8px;
  width: 150px;
  height: 160px;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Styling scrollbar */
.item-section::-webkit-scrollbar {
  width: 5px; /* Lebar scrollbar */
}
.item-section::-webkit-scrollbar-track {
  background-color: #dfdfdf; /* Warna latar belakang area scroll */
  padding: 2px; /* Memberi jarak antara scrollbar dan track */
}
.item-section::-webkit-scrollbar-thumb {
  background-color: #949494; /* Warna slider pada scrollbar menjadi hitam */
  border: 1.7px solid transparent; /* Memberi space antara scrollbar dan track */
  background-clip: padding-box; /* Menghindari warna background menutupi border */
}
/* Menghilangkan panah atas dan bawah pada scrollbar */
.item-section::-webkit-scrollbar-button {
  display: none; /* Menyembunyikan panah atas dan bawah */
}
.item-content {
  height: 200px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.product-name {
  font-size: 0.8em;
  font-weight: 600;
  color: #CD5D27;
}
.category-name.active h3, .category-all-product.active {
  color: #CD5D27; /* Warna oranye */
} 
.product-model-no {
  font-size: 0.6em;
  color: #808285;
  display: flex;
  gap: 2.5px;
}


/* PRODUCT SINGLE */
.product-single-page {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 6.8em;
  align-items: center;
}
.product-single-section {
  width: 100%;
  max-width: 63rem;
  margin-top: 3rem;
}
.product-single-video {
  width: 100%;
  height: 31rem;
}
.video-product {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}
/* Styling scrollbar */
.item-section-seri::-webkit-scrollbar {
    width: 5px; /* Lebar scrollbar */
}
.item-section-seri::-webkit-scrollbar-track {
    background-color: #dfdfdf; /* Warna latar belakang area scroll */
    padding: 2px; /* Memberi jarak antara scrollbar dan track */
}
.item-section-seri::-webkit-scrollbar-thumb {
    background-color: #949494; /* Warna slider pada scrollbar menjadi hitam */
    border: 1.7px solid transparent; /* Memberi space antara scrollbar dan track */
    background-clip: padding-box; /* Menghindari warna background menutupi border */
}
/* Menghilangkan panah atas dan bawah pada scrollbar */
.item-section-seri::-webkit-scrollbar-button {
    display: none; /* Menyembunyikan panah atas dan bawah */
}
.product-single-title {
  margin-top: 2rem;
  color: #CD5D27;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 40rem;
  height: 100%;
  max-height: 3rem;
  overflow: auto;
  font-size: 1.4em;
  font-weight: bold;
  letter-spacing: 1.2px;
}
.product-single-desc {
  height: auto;
  font-family: 'Rota';
}
h2.overview {
  margin-top: 3rem;
  font-size: 1.5em;
  color: #CD5D27;
  letter-spacing: 1.7px;
}
.desain {
  display: flex;
  height: 2rem;
  margin-top: 1.8rem;
}
.desain-eksterior {
  background-color: #d3d3d3;
  margin-left: 2.5rem;
  height: 100%;
  width: 100%;
  max-width: 5.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.desain-eksterior h2 {
  font-size: 1.1em;
  color: #898989;
  font-weight: 100;
  letter-spacing: 1.1px;
}
.desain-interior {
  background-color: #d3d3d3;
  margin-left: 1.1rem;
  height: 100%;
  width: 100%;
  max-width: 5.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.desain-interior h2 {
  font-size: 1.1em;
  color: #898989;
  font-weight: 100;
  letter-spacing: 1.1px;
}
.desain-eksterior, .desain-interior {
  text-decoration: none;
}
.desain-eksterior:hover, .desain-interior:hover {
  cursor: pointer;
  background-color: #CD5D27 !important;
}
.desain-eksterior:hover h2, .desain-interior:hover h2 {
  color: white; /* Active color */
  font-weight: bold;
}
.desain-eksterior.active, .desain-interior.active {
  background-color: #CD5D27; /* Active color */
}
.desain-eksterior.active h2, .desain-interior.active h2 {
  color: white; /* Active color */
  font-weight: bold;
}
.desain-eksterior.inactive, .desain-interior.inactive {
  background-color: #e2e2e2;
}
.product-single-image {
  width: 100%;
  height: 100%;
  max-height: 33rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  position: relative;
}
.product-single-images {
width: 44rem;
  height: 33rem;
  position: relative;
}
.product-single-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}
.hidden {
  display: none;
}
.title-box-spec4 {
  display: none;
}
.icon-plus {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 1.5rem;
  color: black;
  font-weight: bold;
}
.icon-interior-1 { top: -97%; left: 47%; }
.icon-interior-2 { top: -98%; left: 81%; }
.icon-interior-3 { top: -30%; left: 57.2%; }
.icon-interior-4 { top: -32%; left: 89.5%; }
.product-single-serial {
  width: 100%;
  max-width: 55rem;
  overflow: auto;
  border-left: 3px solid #dfdfdf;
  padding-left: 25px;
  overflow-y: scroll;
  }
/* Styling scrollbar */
.product-single-serial::-webkit-scrollbar {
  width: 5px; /* Lebar scrollbar */
}
.product-single-serial::-webkit-scrollbar-track {
  background-color: #dfdfdf; /* Warna latar belakang area scroll */
  padding: 2px; /* Memberi jarak antara scrollbar dan track */
}
.product-single-serial::-webkit-scrollbar-thumb {
  background-color: #949494; /* Warna slider pada scrollbar menjadi hitam */
  border: 1.7px solid transparent; /* Memberi space antara scrollbar dan track */
  background-clip: padding-box; /* Menghindari warna background menutupi border */
}
/* Menghilangkan panah atas dan bawah pada scrollbar */
.product-single-serial::-webkit-scrollbar-button {
  display: none; /* Menyembunyikan panah atas dan bawah */
}
.category-name-item {
  font-size: 1.5em;
  font-weight: bold;
  color: black;
}
.item-section-seri {
  margin-top: 2.5rem;
  overflow: auto;
}
.title-model-seri {
  margin-top: 3em;
  color: #CD5D27;
  font-size: 1.4em;
  letter-spacing: 1.5px;
}
.item-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  position: relative;
  padding: 10px;
  max-height: none;
}
.item-content {
  height: 200px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  flex-basis: 25%;
}
.item-container-single.item-container-single {
  display: flex;
  flex-wrap: wrap;
  margin-top: 3em;
  row-gap: 1.5em;
}
.product-name {
    font-size: 0.8em;
    font-weight: 600;
    color: #737272;

}
.product-model-no {
  font-size: 0.6em;
  color: #808285;
}
.product-image {
  margin-top: 8px;
  width: 150px;
  height: 160px;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-modal {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  flex-direction: column;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  padding-top: 60px;
}
.product-modal-content {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  width: 750px;
  height: 350px;
  border: 1px solid white;
}
.modal-spesification {
  background-color: #000000;
  width: 50%;
  height: 100%;
  padding: 3rem 0 0 2rem;
}
h2.modal-title-serial {
  color: #CD5D27;
  font-size: 0.8em;
}
h2#modalTitle {
  color: white;
}
h2#modalSerialNo {
  font-size: 0.8em;
  color: white;
  font-weight: 100;
}
a.fileProductLink {
  text-decoration: none;
  color: #d9d9d9;
  font-weight: 100;
}
.line-product-modal1 {
  background-color: white;
  width: 290px;
  height: 2px;
}
.line-product-modal2 {
  background-color: #CD5D27;
  width: 49px;
  height: 2px;
}
p.modal-title-spesification {
  color: white;
  font-size: 0.7em;
  letter-spacing: 0.2px;
}
.modal-product-catalog {
  width: 290px;
  margin-top: 2.4rem;
  height: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-product-order {
  width: 290px;
  margin-top: 0.3rem;
  height: 20px;
  border: 1px solid #9d9d9d;
  border-radius: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.modal-product-catalog h2, .modal-product-order h2 {
  font-size: 0.7em;
  color: #d9d9d9;
  font-weight: 100;
}
.modal-product-catalog:hover, .modal-product-order:hover {
  background-color: #CD5D27;
  cursor: pointer;
}
.modal-product-catalog:hover h2, .modal-product-order:hover h2 {
  font-weight: bold;
}
.modal-image {
  width: 50%;
  height: 100%;
}
.modal-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal-close-text {
  font-size: 0.5em;
  margin-top: 0.5rem;
  color: #d9d9d9;
  font-style: italic;
}
.modal-close-mobile {
  font-size: 0.5em;
  margin-top: 0.5rem;
  color: #d9d9d9;
  font-style: italic;
  display: none;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.specifications {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 2em;
  gap: 0.2em;
}
.specifications p {
  display: contents;
}
.specifications .label {
  white-space: nowrap;
  font-weight: bold;
  color: white;
  font-size: 0.65em;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
}
.specifications .value {
  padding-left: 1rem;
  color: #e9e9e9;
  font-size: 0.65em;
}
.info-box {
  position: absolute;
  display: none;
  width: 17em;
  margin-top: 10em;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid black;
  border-radius: 5px;
  padding: 0.7em 2em 0.7em 2em;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.info-box-eksterior {
  position: absolute;
  bottom: 100%;
  display: none;
  width: max-content;
  margin-bottom: 0.6em;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid black;
  border-radius: 5px;
  padding: 0.7em 0.8em 0.7em 0.8em;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  z-index: 10;
  gap: 0.5em;
}
.info-box img {
  width: 50%;
  height: auto;
  max-height: 150px;
}
.info-box .info-description {
  color: white;
  font-size: 1em;
  margin-left: 1.5em;
  letter-spacing: 1.4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info-box-eksterior img {
  width: 9em;
  max-height: 150px;
  object-fit: contain;
}
.info-box-eksterior .info-description {
  color: white;
  font-size: 1em;
  letter-spacing: 1.4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info-description h2 {
  font-size: 1.1em;
}
.info-description p {
  font-size: 0.6em;
}
.icon-interior {
  position: relative;
}

.icon-interior:hover .info-box {
  display: flex;
}
.icon-eksterior:hover .info-box-eksterior {
  display: flex;
}
.icon-eksterior {
  display: flex;
}
.icon-interior {
  display: none;
}
.desain-eksterior.active .icon-eksterior {
  display: flex;
}
.desain-interior.active .icon-interior {
  display: block;
}
p.title-box-spec {
  margin-top: 0.4em;
  font-size: 0.5em;
}
p.desc-box-spec {
  font-size: 0.72em;
}
p.desc-box-spec-last {
  font-size: 0.72em;
  margin-top: 0.4em;
}


/* GALLERY & VIDEO SECTION */
.page-gallery-section {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  padding-top: 50px; 
}
.gallery-container {
  max-width: 1150px;
  min-width: 1150px;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  column-gap: 35px;
  margin-top: 6.5em;
}
.gallery-content {
  position: relative;
  flex-basis: 30%;
  margin-bottom: 30px;
  overflow: hidden;
  min-height: 13rem;
}
.gallery-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-content .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.3s ease;
}
.gallery-content:hover .overlay {
  background-color: rgba(0, 0, 0, 0.5); 
}
.gallery-content .gallery-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: #CD5D27;
  color: white;
  font-size: 0.8em;
  overflow: auto;
  text-align: left;
  transition: transform 0.3s ease;
  transform: translateY(100%); 
}
.gallery-content:hover .gallery-title {
  transform: translateY(0); 
}
.video-wrapper {
  position: relative;
  flex-basis: 30%;
  margin-bottom: 30px;
  overflow: hidden;
  min-height: 13rem;
}
.video-wrapper .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.3s ease;
}
.video-wrapper:hover .overlay {
  background-color: rgba(0, 0, 0, 0.5); 
}
.video-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 7px;
  background-color: #CD5D27;
  color: white;
  font-size: 0.8em;
  text-align: left;
  transition: transform 0.3s ease;
  transform: translateY(100%);
}
.video-wrapper:hover .video-title {
  transform: translateY(0);
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; 
}

/* Styles modal video */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
  padding-top: 60px;
}
.modal-content {
  margin: 5% auto;
  padding: 20px;
  width: 80%;
  max-width: 700px;
}
.modal-content iframe {
  width: 100%;
  height: 400px;
}
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}


 /* Contact Page */
 .banner-contact-us {
  width: 100%;
  height: 31rem;
  margin-bottom: 1rem;
  margin-top: 6.2em;
}
.contact-page {
  padding: 3rem 12rem 3rem 12rem;
  display: flex;
  place-content: center;
}
.form-background {
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  gap: 60px;
  width: 500px;
  place-content: center;
}
.banner-contact-us img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.form-section.reveal.fade-left {
  width: 540px;
}
.contact-page .form-section .form-panel {
  position: relative;
  width: 100%;
  margin: 0;
  box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
  padding: 45px 62px 50px 62px;
}
.contact-page .form-section .form-panel .form-label {
  font-size: 0.8em;
  min-width: 4em;
}
.contact-page .form-section .form-panel .form-input input {
  padding: 5px;
  padding-left: 0px;
  border: solid #808285 0px;
  width: 100%;
  color: #808285;
}
.contact-page .form-section .form-panel .form-input input:hover {
  border-bottom: solid #CD5D27 2px;
}
.contact-page .form-section .form-panel .form-input input:focus {
  outline: none;
  border-bottom: solid #CD5D27 2px;
}
.contact-page .form-section .form-panel .form-input select {
  padding: 10px;
  padding-left: 0px;
  background-color: #FFFFFF;
  border: solid #808285 0px;
  border-bottom: solid #D9D9D9 2px;
  width: 100%;
  color: #808285;
}
.contact-page .form-section .form-panel .form-input select:hover {
  border-bottom: solid #CD5D27 2px;
}
.contact-page .form-section .form-panel .form-input select:focus {
  outline: none;
  border-bottom: solid #CD5D27 2px;
}
.contact-page .form-section .form-panel .form-input textarea {
  padding: 10px;
  padding-left: 0px;
  border: solid #808285 0px;
  width: 100%;
  color: #808285;
}
.contact-page .form-section .form-panel .form-input textarea:hover {
  border-bottom: solid #CD5D27 2px;
}
.contact-page .form-section .form-panel .form-input textarea:focus {
  outline: none;
  border-bottom: solid #CD5D27 2px;
}
.contact-page .form-section .form-panel .form-submit a {
color: #838282;
border: 1px solid #a6a6a6;
font-size: 12px;
padding: 6px 20px;
text-decoration: none;
letter-spacing: 0.8px;
}
.contact-page .form-section .form-panel .form-submit a:hover {
  background-color: #CD5D27;
  font-weight: bold;
  color: white;
}
.form-container {
  display: flex;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  border-bottom: 1.5px solid #cfcfcf;
}
.form-message {
  align-items: start;
}
.form-input {
  flex: 1; /* Membiarkan input mengisi sisa ruang */
}
.contact-page .contact-info-header
{
  display: none;
}
.contact-page .contact-info-header h2,
.address-section .contact-info h2 {
  color: #0090D6;
  font-weight: 700;
}
.address-section .contact-info,
.address-section .address-info {
  margin-bottom: 0.7rem;
}
.contact-page .contact-info-header p, .address-section .contact-info p, .address-section .address-info p, .contact-info-first p  {
  color: #808285;
  margin-top: 2rem;
  font-size: 0.78em;
}
.contact-page .contact-info-header h2, .address-section .contact-info h2, .contact-info-first h2  {
  color: #CD5D27;
  font-weight: 700;
  width: 23rem;
  letter-spacing: 1px;
}
h2.headquarters {
  color: black;
  font-weight: bold;
  font-size: 1em;
  font-family: 'Rota-Extrabold';
}
p.representative-office-address {
  margin-top: 0.1rem !important;
}
h2.representative-office {
  color: black;
  font-family: 'Rota-Extrabold';
  font-weight: bold;
  margin-top: 0.7em;
  font-size: 0.98em;
}
.company-contact-address {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 0.6rem;
  font-size: 0.8em;
}
.email-section {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 0.45em;
}
.first-phone-section {
  display: flex;
  align-items: center;
}
span.phone-section-phone {
  margin-left: 0.3rem;
}
.first-phone-section img {
  width: 22px;
  height: 22px;
  background-color: #696969;
}
.second-phone-section img {
  width: 22px;
  height: 22px;
  background-color: #696969;
}
.email-section img {
  width: 23px;
  height: 22px;
  background-color: #696969;
}
.address-map {
  height: 16.5rem;
  width: 100%;
  margin-top: 1.87em;
}
.contact-page .contact-info-header p,
.address-section .contact-info p,
.address-section .address-info p {
  color: #808285;
}
.address-section .address-info h5 {
color: #808285;
font-weight: 100;
font-size: 0.78em;
}
.address-info .phone-section {
  margin-bottom: 7px;
  align-items: center;
}
.address-info .phone-section span,
.address-info .email-section span {
  color: #808285;
}
.second-phone-section {
  display: flex;
  align-items: center;
}
.address-info .phone-section img,
.address-info .email-section img,
.address-info .second-phone-section img {
  background-color: #808285;
}
.recaptcha-wrapper {
  width: 100%;
  display: flex;
  justify-content: start;
}
.recaptcha-wrapper {
  display: flex;
  justify-content: start;
}
.g-recaptcha {
  transform: scale(0.60);
  transform-origin: 0 0;
  margin-top: 1rem;
}
.address-section.reveal.fade-right {
  width: 25rem;
}
.sectoral-content-section .sectoral-contact-label {
  margin-top: 1.5rem;
  font-size: 14px;
  color: #808285;
  font-weight: 700;
}
.contact-section {
  text-align: center;
}
.contact-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-section .icon-social {
  padding-right: 5px;
  padding-left: 5px;
}
.contact-section .icon-social img {
  width: 35px;
  margin-bottom: 1rem;
  background-color: #808285;
  border-radius: 0 7px 0 7px;
  -webkit-border-radius: 0 7px 0 7px;
  -moz-border-radius: 0 7px 0 7px;
  -ms-border-radius: 0 7px 0 7px;
  -o-border-radius: 0 7px 0 7px;
}
.contact-section .icon-social:hover img {
  background-color: #0090D6;
}
.icon-contact {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0.5rem;
}
.content .about-desc {
  padding: 3rem 10rem;
  text-align: justify;
  color: #808285;
  hyphens: auto;
}
.content .about-desc, .content .business-desc {
  padding: 3rem 10rem 2rem 10rem;
  text-align: justify;
  color: #808285;
  hyphens: auto;
}
div.ng-dirty.ng-invalid,
div.ng-touched.ng-invalid,
input.ng-dirty.ng-invalid,
input.ng-touched.ng-invalid,
select.ng-dirty.ng-invalid,
select.ng-touched.ng-invalid,
textarea.ng-dirty.ng-invalid,
textarea.ng-touched.ng-invalid {
  border-color: #d60000;
  background-color: #fde7e7 !important;
  border-width: 1px;
}
.list-shape {
  content: '';
  width: 88%;
  height: .09rem;
  background-color: #808285;
  display: block;
  margin: 0 auto;
  text-align: center;
}
#snackbar,
#snackbar-exist,
#snackbar-contact,
#snackbar-career {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  color: white;
  z-index: 9999;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
#snackbar.show,
#snackbar-exist.show,
#snackbar-contact.show,
#snackbar-career.show {
  visibility: visible;
  opacity: 1;
}
#snackbar img,
#snackbar-exist img,
#snackbar-contact img,
#snackbar-career img {
  width: 300px;
  margin-bottom: 30px;
}
#snackbar h2,
#snackbar-exist h2,
#snackbar-contact h2,
#snackbar-career h2 {
  font-size: 24px;
  margin-bottom: 30px;
  color: #ffffff;
  font-weight: 700;
}
#snackbar p,
#snackbar-contact p,
#snackbar-career p {
  font-size: 16px;
  margin-bottom: 0;
}
#snackbar small,
#snackbar-exist small,
#snackbar-contact small,
#snackbar-career small {
  margin-top: 30px;
  font-style: italic;
  font-size: 14px;
}
.network-point-section {
  height: max-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 2em;
}
.network-point-title {
  color: #CD5D27;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 1.8em;
  font-weight: bold;
}
.network-point-container {
  height: max-content;
  width: 80%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2em;
}
.network-point-content {
  display: flex;
  flex-direction: column;
  min-height: 13em;
  width: auto;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
.network-point-header {
  display: flex;
  flex-basis: 20%;
  justify-content: center;
  align-items: center;
  background-color: #CD5D27;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.network-point-header-title {
  color: white;
  font-size: 1em;
  font-weight: bold;
}
.network-point-body {
  padding: 25px 25px 25px 20px;
}

/* FOOTER */
.footer-lines {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.footer-line {
  height: 0.1em;
  width: 80%;
  background-color: #d1d3d6;
}
.list-shape{ 
  content: '';
  width: 88%;
  height: .1rem;
  background-color: #808285;
  display: block;
  margin: 0 auto;
  text-align: center;
  opacity: 0.5;
}
.footer-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.footer-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  color: #808285;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  width: 80%;
}
.footer-item-logo {
  display: flex;
}
.footer-item:nth-child(2) {
  margin-left: -3em;
  width: 15em;
}
.footer-item:nth-child(5) {
  width: max-content;
  margin-right: -1em;
}
.footer-item:nth-child(3) {
  margin-left: 2em;
}
.footer-item:nth-child(4) {
  margin-left: 2em;
}
.footer-item {
  padding: 10px;
}
.footer-section .footer-item span.logo-footer {
  text-align: center !important;
}
.footer-section .footer-item h3, p, a, form {
  text-align: left !important;
}
.footer-section .footer-item h3 {
  padding-bottom: 0.3rem;
  color: #1E1E1E;
  font-weight: bold;
  font-size: 13px;
  font-family:Arial, Helvetica, sans-serif;
}
.footer-section .footer-item p {
  font-size: 12px;
  font-family:Arial, Helvetica, sans-serif;
  line-height: normal;
}
.footer-section .footer-item form.input-newsletter {
  text-align: left;
  font-size: 12px;
}
.footer-section .footer-item form a {
  border: 0.1em solid #908f8fed;
  padding: 0.51em 0.95em 0.31em 0.95em;
  font-size: 9.5px;
  text-decoration: none;
  margin-left: 0.6em;
  border-radius: 1.5px;
  color: #000;
}
.footer-section .footer-item form a:hover {
  background-color: #CD5D27;
  font-weight: bold;
  color: white;
}
.footer-section .footer-item ul li {
  text-align: left;
}
.footer-section .footer-item .social-media {
  display: flex;
  list-style: none;
  gap:0.5rem;
  padding-top: 0.6rem;
}
.footer-section .footer-item .icon-social img {
  background-color: #808285;
  width: 20px;
}
.footer-section .footer-item .icon-social:hover img {
  background-color: #CD5D27;
  width: 20px;
}
h3.representative-office {
  margin-top: 1em;
}
/* Centering the items in the second row within the second and third columns */
.footer-item:nth-child(6) {
  grid-column: 2 / span 1;
}
.company-information {
  list-style: none;
  text-align: left;
  line-height: 1em;
}
.company-information li a {
  text-decoration: none;
  font-size: 12px;
  color: #808285;
}
.footer-sub {
 background-color: #000;
 color: white;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 1.5em;
}
.footer-sub-text{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
p.year-footer-sub {
  font-size: 0.6em;
}
p.T1 {
  font-size: 0.6em;
  font-weight: bold;
  margin-left: 0.27em;
}
p.T2 {
  font-size: 0.6em;
  margin-left: 0.27em;
}
p.T3 {
  margin-top: -0.18em;
}
.T3-link {
  text-decoration: none;
  font-size: 0.6em;
  font-weight: bold;
  margin-left: 0.27em;
  color: white;
}
.scroll-to-top {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  right: 5rem;
  bottom: 2rem;
  height: 2rem;
  width: 2em;
  background-color: #CD5D27;
  border-radius: 50%;
}
.scroll-to-top a {
  color: white;
  line-height: 3.1rem;
  text-align: center;
  font-size: 22px;
  font-weight: 100;
}
input.input-newsletter.ng-pristine.ng-untouched.ng-empty.ng-valid-email.ng-invalid.ng-invalid-required {
  font-size: 0.6em;
  padding: 0.2em;
  width: 15em;
}
div.ng-dirty.ng-invalid, div.ng-touched.ng-invalid, input.ng-dirty.ng-invalid, input.ng-touched.ng-invalid, 
select.ng-dirty.ng-invalid, select.ng-touched.ng-invalid, textarea.ng-dirty.ng-invalid, textarea.ng-touched.ng-invalid {
  border: 0.1em solid #090909ed;
  padding: 0.31em 0.95em 0.31em 0.95em;
  opacity: 0.5;
  font-size: 9.5px;
  text-decoration: none;
  margin-left: 0.15em;
  border-radius: 1.5px;
  color: #000;
}
input[type="email" i] {
  border: 0.1em solid #090909ed;
  padding: 0.31em 0.95em 0.31em 0.95em;
  opacity: 0.5;
  font-size: 9.5px;
  text-decoration: none;
  margin-left: 0.15em;
  border-radius: 1.5px;
  color: #000;
}


/* PAGE SEARCH SECTION */
.search-banner {
  width: 100%;
  height: auto;
  margin-top: 6.2em;
}
.search-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-search-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.page-search-title1 {
  display: flex;
  margin-top: 3em;
  justify-content: center;
  align-items: center;
}
h1.page-search-title {
  font-weight: 100;
  color: #7d7d7d;
  font-size: 1.8em;
}
h1.page-search-keyword {
  margin-left: 0.4em;
  color: #CD5D27;
  font-size: 1.7em;
  font-weight: bold;
}
.page-search-container {
  width: 66em;
  padding: 1em 1em 0 1em;
  margin-top: 3em;
}
.search-items {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  row-gap: 1.6em;
  margin-bottom: 2em;
}
.search-items a {
  display: block;
  text-decoration: none;
  overflow: hidden;
  height: auto;
}
.page-search-img {
  height: 15em;
}
.page-search-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.search-content-container {
  padding-top: 0.4em;
}
.search-content-product {
  padding-top: 0.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #CD5D27;
}
.search-desc {
  font-size: 0.75em;
  color: #555;
}
h1.title-news-related {
  font-size: 1.4em;
  color: black;
  font-weight: bold;
  font-family: rota-extrabold;
  margin-bottom: 0.5em;
  letter-spacing: 1px;
}
.page-search-product {
  height: 15em;
}
.page-search-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}





/* REPONSIVE BREAKPOINT */
@media screen and (max-width: 1024px) {

/* NAVBAR */
li.navbar-item {
  justify-content: center;
  align-items: center;
  display: flex;
}
nav ul {
  height: 100%;
}
nav ul li a {
  height: 100%;
  padding-right: 2rem;
  padding-left: 2rem;
  padding-top: 0.70rem;
}
.navbar-item.active a {
  font-weight: bold;
  font-family: 'Rota-ExtraBold';
}


/* PAGE-HOME */
.slick-track {
  height: 90vh;
}
.slider li img {
  object-fit: inherit;
}
.about-section, .map-section{
  width: 85%;
}
.map-section, .galery-content {
  margin-top: -3em;
}
.map-content, .map-desc, .map-image {
  width: 100%;
}
.map-image {
  margin-top: -3em;
}


/* TENTANG KAMI */
.banner-about-section, .page-about-section, .page-about-goal {
  width: 85%;
}
.banner-about-banner img {
  object-fit: inherit;
}
.page-about-desc {
  width: 90%;
}
.page-about-desc {
  padding-top: 0;
}
.company-history-section {
  width: 85%;
  margin-left: 4em;
}


/* PRODUCT */
.product-container, .product-single-section {
  width: 85%;
}


/* MEDIA */
.line .category:first-child {
  margin-left: -560px;
}
.gallery-container {
  max-width: none;
  min-width: 0;
  width: 85%;
}


/* CONTACT US */
.contact-page {
  width: 100%;
  padding: 3rem 0 3rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3em;
}
.form-background {
  gap: 34px;
  width: 820px;
}
.banner-contact-us {
  margin-top: 6.1em;
}
.contact-page .form-section .form-panel {
  padding: 3rem 3rem 3rem 3rem;
}
.network-point-title {
  font-size: 1.6em;
  font-family: 'Rota-ExtraBold';
}
.form-section.reveal.fade-left {
  width: 100%;
}
.address-section.reveal.fade-right {
  width: 99%;
}
.address-map {
  height: 16.4rem;
}


/* FOOTER */
.footer-line {
  width: 85%;
}
.footer-section {
  padding: 20px 30px 20px 0px;
}
.scroll-to-top {
  right: 2rem;
}
.footer-container {
  width: 88%;
}
.footer-item:nth-child(3) {
  margin-left: 0.5em;
  width: 156px;
}
.footer-item:nth-child(2) {
  margin-left: -2em;
  width: 15em;
}

}

/* ukuran tablet */
@media screen and (max-width:768px) {

  .nav-section {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    background-color: #CD5D27;
}
nav {
  display: flex;
  position: relative;
  background-color: #CD5D27;
  justify-content: end;
  height: 40px;
  width: 100%;
  color: white;
  align-items: center;
}
  nav ul {
    padding-left: 0;
    display: none;
}
nav ul li a {
  font-size: 1em;
  width: 100%;
  display: flex;
  padding-left: 2em;
}
nav ul li a:hover{
  background-color: white;
  color: #CD5D27;
  width: 100%;
  font-weight: bold;
}
li.navbar-item.active {
  width: 100%;
}
.line-section {
  height: 6px;
  z-index: 2;
}
.navbar-item.active a {
  background-color: #fff;
  color: #CD5D27;
  width: 100%;
  height: 3em;
  display: flex;
  font-size: 1em;
  padding-left: 2em;
  align-items: center;
  font-weight: bold;
}
nav ul.slide {
  display: flex;
  margin-top: 5.8em;
  height: 100%;
  padding-bottom: 1em;
  background-color: #2b2a2a;
  gap: 0.5em;
}
.background-nav {
  width: 100%;
  background-color: #CD5D27;
  height: max-content;
  display: block !important;
}
li.navbar-item {
  width: 100%;
}
.lang-section {
  margin-right: 2rem !important;
}
.menu-toggle {
  display: flex;
  position: absolute;
  z-index: 1001;
  align-items: end;
  margin-right: 4em;
}
.main-page {
  margin-top: 2.7rem;
}
  .search {
    display: none;
    width: 100%;
}
.logo-section {
  height: 3em !important;
}
.logo-section .logo img {
  width: 6em !important;
  height: 100%;
  object-fit: contain;
  margin-left: 1em;
}
.logo-section .logo {
  padding-left: 2.4rem !important;
}
.search-section {
  display: block !important;
  width: 100% !important;
  gap: 0 !important;
  margin-left: 2em;
}
.input-search {
  width: 100%;
}
.lang-section {
  width: 6.5em !important;
  padding-left: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.input-search:focus {
  width: 100% !important;
}
.search {
  display: none;
}
dir.icon-search-header {
  display: flex;
  width: 6.8em;
  margin-left: 26.7em;
}










  .slick-dots {
    position: absolute;
    bottom: 10%;
    left: 15%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 60px;
    height: 1.5px;
}
section#content-section {
  height: 20em;
}
  .slick-list {
    height: 100%;
}
.slider {
  height: 100%;
}
.slick-track {
  height: 100%;
}
.about-section {
  width: 85%;
  margin-top: 3.9em;
}
.about-image {
  height: 13em;
}
.about-image img {
  object-fit: cover;
}
.home-about-title h2 {
  font-size: 1.5em;
}
.home-about-desc {
  font-size: 0.9em;
  line-height: 15px;
}
.home-about-btn {
  margin-top: 0.6em;
}
.map-section {
  max-width: 85%;
  margin-top: 1.5em;
}
.map-content {
  width: 100%;
}
.map-title h2 {
  font-size: 1.5em;
}
.map-desc {
  font-size: 0.9em;
  line-height: 15px;
  width: 95%;
}
.map-image {
  width: 100%;
  height: 300px;
}
.about-content {
  height: auto;
  margin-left: 1.5em;
}
.galery-section {
  margin-top: 1.2em;
  margin-bottom: 0;
  height: auto;
}
.galery-content {
  margin-bottom: 0;
  height: auto;
}
.h2-galery {
  font-size: 1.6em;
}
.galery-image {
  height: auto;
}
.galery-image1 {
  height: auto;
}
.galery-image img {
  object-fit: contain;
}
.galery-image2 {
  height: auto;
}
.galery-image img {
  object-fit: contain;
}


/* ABOUT US */
.banner-about-section {
  width: 85%;
  height: auto;
  margin-top: 2.5em;
  padding: 0;
}
.banner-about-banner {
  width: 100%;
}
.banner-about-banner img {
  object-fit: contain;
}
.page-about-section {
  width: 85%;
  padding: 10px 0;
}
.page-about-vision, .page-about-mision {
  gap: 2em;
}
.page-about-mision-content, .page-about-vision-content {
  flex-wrap: wrap-reverse;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.page-about-goal {
  width: 85%;
}
.company-history-section {
  width: 85%;
}
.milestone-timeline {
  left: 3em;
  top: 81px;
}
.milestone-content-container {
  margin-left: 140px;
}


/* ARTICLE & NEWS SECTION */
.content-news {
  padding: 45px;
  width: 100%;
  margin-top: 7em;
  gap: 1em;
}
.news-page {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.new-news {
  width: 50%;
  padding: 10px;
}
.news-image {
  width: 100%;
}

/* ARTICLES & NEWS SECTION SINGLE */
.related-news-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: start;
  gap: 13px;
}
.related-news-content {
  border: 1px solid #a7a7a7;
  margin-top: 13px;
  width: 0;
  flex-basis: calc(48.4% - 2px);
  box-sizing: border-box;
  height: auto;
}
.news-content-related {
  width: 85%;
  height: auto;
  margin-top: 90px;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  margin-top: 8em;
}
.news-title {
  width: auto;
  height: auto;
}
.news-title h1 {
  font-size:1.6em;
  letter-spacing: 1px;
}
.related-news-image {
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.news-date-single {
  font-size: 0.8em;
  margin-top: 1px;
}
.news-image-single {
  width: 100%;
  height: 20em;
  margin-top: 1.2em;
}
.news-content-desc {
  margin-top: 35px;
  font-size: 1.1em;
}
.related-news {
  margin-top: 45px;
  width: 85%;
}
.h2-title-news {
  font-size: 0.9em;
  letter-spacing: 1px;
}
.related-news-title {
  padding: 8px;
  font-size: 0.7em;
  width: 100%;
}
.news-back {
  margin-top: 19px;
  margin-bottom: 0;
}


/* MEDIA SECTION */
.line .category:first-child {
  margin-left: -360px;
}
.gallery-container {
  max-width: none;
  min-width: 0;
  width: 85%;
}
.gallery-content {
  flex-basis: 29.7%;
}
.video-wrapper {
  flex-basis: 29.7%;
}


/* CONTACT US SECTION */
.banner-contact-us {
  height: 20em;
  margin-top: 5.5em;
}
.banner-contact-us img {
  object-fit: cover;
}
.contact-info
{
    display: none;
}
.contact-page .contact-info-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 1em;
  align-items: center;
}
.contact-page {
  /* padding: 3rem 12rem 3rem 12rem; */
  display: flex;
  place-content: center;
}
.form-background {
  grid-template-columns: repeat(1, 1fr);
  display: grid;
  gap: 17px;
  width: 500px;
  place-content: center;
}
.contact-page .contact-info-header h2 {
  font-weight: bold;
  font-size: 1.5em;
  width: auto;
}
.contact-page .contact-info-header p {
  margin-top: 0;
}
.form-section.reveal.fade-left {
  width: 100%;
}
.form-container {
  border-bottom: 0px;
  padding-top: 1.4em;
margin-bottom: 0;
}
.contact-page .form-section .form-panel .form-label {
  font-size: 1.1em;
  margin-left: 3em;
}
.form-label {
  flex: 0 0 50px; /* Lebar tetap untuk label */
  margin: 0;
  color: #808285;
}
.contact-page .form-section .form-panel {
  padding: 0;
  width: 100%;
}
.form-container.form-message {
  margin-top: 0.8em;
}
.contact-page .form-section .form-panel .form-input textarea {
  padding: 0px;
  border-bottom: 2px solid #bdbdbd !important;
  width: 87%;
}
.recaptcha-wrapper {
  margin-left: 2.49em;
}
.form-submit {
  margin-top: 1em;
  margin-left: 1.2em;
  padding-bottom: 1em;
}
.g-recaptcha {
  transform: scale(0.60);
  margin-top: 1.5rem;
}
.contact-page .form-section .form-panel .form-input input {
  border-bottom: 2px solid #bdbdbd !important;
  border: 0px;
  width: auto;
  width: 87%;
}
form#contactForm {
  padding-top: 1em;
  padding-bottom: 1em;
}
.contact-page .form-section .form-panel .form-submit a {
  color: #838282;
  border: 0.2px solid #b0aeae;
  font-size: 0.68em;
  padding: 5px 15px 5px 15px;
  text-decoration: none;
  letter-spacing: 0.8px;
  margin-left: 2em;
}
h2.headquarters, h2.representative-office {
  color: #7f7f7f;
  font-size: 1.35em;
  margin-top: 1.5em;
}
.address-section.reveal.fade-right {
  width: 100%;
  margin-bottom: 2em;
  margin-top: 0;
}
.address-section .address-info h5 {
color: #808285;
font-size: 1.1em;
}
.company-contact-address {
  font-size: 1.1em;
}
.contact-page .contact-info-header p, .address-section .contact-info p, .address-section .address-info p {
  font-size: 1.1em;
}
.second-phone-section {
  display: flex;
  align-items: center;
}
.email-section {
  display: flex;
  align-items: center;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}
.first-phone-section img {
  width: 22px !important;
  height: 22px;
  background-color: #696969;
}
.email-section img {
  width: 23px !important;
  height: 22px;
  background-color: #696969;
}
.second-phone-section img{
  width: 22px;
  height: 22px;
  background-color: #696969;
}
span.phone-section-phone {
  margin-left: 0.3rem;
  padding-top: 2px;
}
.address-map {
  margin-top: 1.5em;
}
#snackbar, #snackbar-exist, #snackbar-contact, #snackbar-career {
  padding: 0 2.5rem;
}
#snackbar h2, #snackbar-exist h2, #snackbar-contact h2, #snackbar-career h2 {
  font-size: 15px;
}
#snackbar p, #snackbar-contact p, #snackbar-career p {
  font-size: 12px;
}
#snackbar small, #snackbar-exist small, #snackbar-contact small, #snackbar-career small {
  font-size: 11px;
}
#snackbar img, #snackbar-exist img, #snackbar-contact img, #snackbar-career img {
  width: 300px;
  margin-bottom: 20px;
}
.network-point-section {
  margin-top: -27px;
}
.network-point-header {
  flex-basis: 61px;
}


/* MULTIPLE PRODUCT */
.product-container {
  width: 85%;
}
.item-container {
  max-height: none;
  margin-bottom: 1em;
}


/* PRODUCT SINGLE */
.product-single-section {
  width: 80% !important;
  max-width: none !important;
  margin-top: 1.5rem !important;
}
.product-single-video {
  height: 10rem !important;
}
.product-single-title {
  font-size: 1em !important;
}
h2.overview {
  margin-top: 2rem !important;
  font-size: 1em !important;
  color: #CD5D27 !important;
  letter-spacing: 1.7px !important;
}
.desain {
  display: flex !important;
  height: 1.4rem !important;
  margin-top: 1rem !important;
}
.desain-eksterior {
  background-color: #d3d3d3 !important;
  margin-left: 0 !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 4rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.desain-eksterior h2 {
  font-size: 0.7em !important;
}
.desain-interior {
  margin-left: 1rem !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 4rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.desain-interior h2 {
  font-size: 0.7em !important;
}
.product-single-images {
  width: 22rem !important;
  height: 13rem !important;
  position: relative !important;
  overflow: hidden;
  overflow-x: auto !important;
}
.product-single-image {
  width: 100% !important;
  height: max-content !important;
  max-height: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 1rem !important;
  position: relative !important;
}
.interior-images {
  width: 135% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: relative !important;
}
.back {
  margin-bottom: 3em !important;
  margin-top: 0.1em !important;
}
.icon-plus {
  width: 1rem !important;
  height: 1rem !important;
}
.title-model-seri {
  margin-top: 0 !important;
  font-size: 0.9em  !important; 
}
.product-image {
  margin-top: 8px !important;
  width: 85px !important;
  height: 70px !important;
}
.item-container-single {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  position: relative !important;
  padding: 10px !important;
  height: max-content !important;
  max-height: 448px !important;
}
.item-content {
  height: 130px !important;
}
.item-section-seri {
  margin-top: 3em !important;
  overflow: auto !important;
  height: 20em;
}
.desain-eksterior.active, .desain-interior.active {
  background-color: #CD5D27 !important;
}
.product-model-no {
  font-size: 0.6em;
  color: #808285;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.icon-interior-1 { top: -99.8% !important; left: 65% !important; }
.icon-interior-2 { top: -102% !important; left: 108% !important; }
.icon-interior-3 { top: -35% !important; left: 77% !important; }
.icon-interior-4 { top: -36% !important; left: 119% !important; }



.icon-interior:hover .info-box,
.icon-eksterior:hover .info-box-eksterior {
  display: none;
}

.info-box,
.info-box-eksterior {
  display: none;
}

.info-box.show,
.info-box-eksterior.show {
  display: flex;
}
.info-box-eksterior {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  flex-direction: column !important;
  padding: 1em !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  border: none !important;
  border-radius: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important; /* Pastikan modal berada di atas elemen lain */
}

.info-box-eksterior img {
  width: 80% !important;
  max-height: none !important;
  height: 50% !important;
}
.info-box-eksterior .info-description {
  margin-left: 0 !important;
  align-items: center !important;
  font-size: 1.2em !important;
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
}
.info-box {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  flex-direction: column !important;
  padding: 1em !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  border: none !important;
  border-radius: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important; /* Pastikan modal berada di atas elemen lain */
}

.info-box img {
  width: 80% !important;
  max-height: none !important;
  height: 50% !important;
}
.info-box .info-description {
  margin-left: 0 !important;
  align-items: center !important;
  font-size: 1.2em !important;
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
}
.modal-close-mobile {
  display: block !important;
}


.product-modal-content {
  flex-direction: column-reverse;
  column-gap: 10px;
  width: 300px;
  height: max-content;
}
.modal-spesification {
  width: 100%;
  height: 50%;
  padding: 1rem 1rem 1rem 1rem;
}
.modal-image {
  width: 100%;
  height: 50%;
}
h2.modal-title-serial {
  font-size: 0.7em;
}
h2#modalSerialNo {
  font-size: 0.65em;
}
.line-product-modal1 {
  width: 266px;
  margin-top: 1.2em;
}
.modal-product-catalog {
  width: 266px;
  margin-top: 2rem;
}
.modal-product-order {
  width: 266px;
}
.product-modal {
  padding-top: 20px;
}







/* PAGE SEARCH SECTION */
.page-search-title1 {
  margin-top: 1.8em;
}
h1.page-search-title {
  font-size: 1em;
}
h1.page-search-keyword {
  font-size: 1em;
}
h1.title-news-related {
  font-size: 0.9em;
}
.page-search-container {
  width: 90%;
  padding: 1em 1em 0 1em;
  margin-bottom: 2em;
  margin-top: 1em;
}
.page-search-img {
  height: 10em;
}
.search-title {
  font-size: 0.8em;
}
.search-desc {
  font-size: 0.6em;
}




.footer-line {
  height: 0.2em;
  width: 85%;
}
.footer-item:nth-child(2) {
  margin-left: 6px;
  width: 9em;
}
.footer-item:nth-child(4) {
  margin-left: -10px;
}
.footer-item:nth-child(3) {
  margin-left: 9px;
  width: 126px;
}

}

/* ukuran mobile */
@media screen and (max-width: 576px) {
nav {
  justify-content: flex-end;
  padding-right: 2em;
}
nav ul {
  position: fixed;
  padding-left: 5px;
  right: 0;
  top: 0;
  flex-direction: column;
  background-color: chocolate;
  height: 100vh;
  align-items: flex-start;
  justify-content: stretch;
  gap: 2em;
  display: none;
  transition: all 1s; 
  z-index: 1000; 
}
.menu-toggle {
  display: flex;
  position: absolute;
  z-index: 1001;
  align-items: end;
  margin-right: 1em;
}
.line-section {
  height: 5px;
  z-index: 2;
}
nav ul.slide {
  display: flex;
}
.navbar-item.active a:after {
  display: none;
}
.footer {
  grid-template-columns: 1fr;
}
.footer-section .footer-item p {
  width: 130%;
}
.footer-section {
  width: 100%;
  padding: 0;
}
.footer-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-right: -5px;
}
.footer-item:nth-child(2) {
  margin-left: 0em;
  margin-top: -0.7em;
}
.footer-item:nth-child(3) {
  margin-left: 0em;
}
.footer-item:nth-child(4) {
  margin-left: 0em;
}
.footer-item:nth-child(5) {
  margin-right: 0;
  order: 6;
}
.footer-item-logo {
  padding: 0 10px 0px 10.4px;
  margin-left: -0.9em;
}
h3.representative-office {
  margin-top: 2.5em;
}
.address-section.reveal.fade-right {
  width: 100%;
}
.form-section.reveal.fade-left {
  width: 100%;
}
.contact-page {
  margin-top: -44px;
  gap: 2em; 
}
h2.headquarters, h2.representative-office {
  font-size: 1em;
}
.address-section .address-info h5 {
  font-size: 1em;
}
.address-section .address-info p {
  font-size: 1em;
}
.form-background {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  width: 80%;
}
.first-phone-section img {
  width: 22px !important;
  height: 22px;
  background-color: #696969;
}
.email-section img {
  width: 23px !important;
  height: 22px;
  background-color: #696969;
}
.second-phone-section img{
  width: 22px;
  height: 22px;
  background-color: #696969;
}
.network-point-section {
  margin-top: -25px;
}
.network-point-container {
  width: 80%;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 2em;
}
.network-point-content {
  min-height: 9em;
}
.network-point-title {
  margin-top: 0em;
  font-size: 1em;
  font-family: 'Rota-ExtraBold';
}
.network-point-header-title {
  font-size: 0.8em;
}
.network-point-body {
  font-size: 0.8em;
}

/* PAGE-HOME */
/* Banner */
section#content-section {
  height: 20rem;
}
.slider {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  height: 100%;
  padding: 0;
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slider li {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.slider li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.slick-dots {
  position: absolute;
  bottom: 30%;
  left: 10%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 60px;
  height: 2px;
}

/* About */
.about-section {
  flex-direction: column;
  max-width: 320px;
  display: block;
  justify-content: left;
  align-items: left;
  width: 100%;
  height: auto;
}
.map-section {
  max-width: 320px;
  height: auto;
  display: block; 
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  margin-top: 15px;
}
.galery-section {
  width: 100%;
  max-width: 700px;
  display: flex; 
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin: 0 auto;
}
.galery-content {
  width: auto;
  display: flex; 
  flex-direction: column;
  align-items: center;
}
.about-image {
  max-width: 900px;
  width: 100%; 
  height: auto; 
  margin-top: 0; 
  margin-bottom: 10px; 
}
.about-image img {
  width: 100%; 
  height: auto; 
}
.about-content {
  width: 100%; 
  display: block;
  max-width: 500px !important;
  height: auto; 
  margin-left: 0; 
  margin-top: 10px; 
  padding: 0; 
}
.home-about-title {
  display: flex;
  align-items: left;
  padding-left: 0;
  margin-top: 20px;
}
.home-about-title h2{
  font-size: 1.2em;
  letter-spacing: 1px;
  align-items: left !important;

}
.home-about-desc {
  width: 100%; 
  max-width: 320px;
  padding-top: 4px;
  padding-left: 0;
  padding-right: 0;
  font-size: 0.9em;
  letter-spacing: 0.3px;
  line-height: 17px;
  text-align: left;
}
.home-about-btn {
  padding: 0;
  margin-top: 0; 
  margin-left: 0; 
}
.about-image img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.map-content {
  width: auto;
  max-width: auto;
  height: auto;
  max-height: auto; 
  display: flex;
  flex-direction: column;
  align-items: center;
}
.map-title {
  height: auto;
  margin: 0;
  padding: 0;
}
.map-title h2{
  width: auto;
  font-size: 1.2em;
  letter-spacing: 1px;
  margin-top: 4px;
  height: auto;
}
.map-desc {
  width: 100%; 
  max-width: 320px;
  margin: 0;
  padding-top: 4px !important;
  padding: 0;
  font-size: 0.9em;
  letter-spacing: 0.3px;
  line-height: 17px;
  text-align: center;
}
.map-image {
  width: 100%;
  max-width: 320px;
  max-height: 150px;
  margin-top: 5px;
  margin: 0;
  padding: 0 !important;
  overflow: auto; 
  position: relative;
}
.map-image {
  touch-action: pan-x pan-y; 
}
.map-image img {
  width: 180%;
  height: 180%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 0);
}
.galery-image {
  width: auto;
  height: 800px;
  margin: 0;
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  align-items: center;
  padding-top: 20px;
  gap: 1.6px;
}
.galery-title{
  width: auto;
  height: auto;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-top: 15px;
}
.galery-image1 {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.galery-image2 {
  width: auto;
  height: 100%;
  overflow: hidden; 
}
.h2-galery {
  color: #CD5D27;
  font-size: 1.2em;
  letter-spacing: 1px;
}


/* PAGE-ABOUT */
/* Banner */
.banner-about-section {
  max-width: 1630px;
  height: 150px;
  margin-top: 0px !important;
}
.banner-about-banner {
  max-width: 320px !important;
  height: 130px;
  margin-top: 60px;
}

/* About Section*/
.page-about-section {
  width: 100%;
  max-width: 1630px;
}
.page-about-title-us {
  width: 100%;
  max-width: 600px;
  margin-top: 35px;
}
.page-about-title-us h2 {
  font-size: 1.2em;
}
.page-about-desc {
  width: 100%;
  max-width: 320px !important;
  margin-top: 5px !important;
  padding: 0 !important;
}
.page-about-desc .desc-content {
  width: 100%;
}
.page-about-desc .desc-content p {
  margin: 0;
  font-size: 0.9em;
  line-height: 17px;
  letter-spacing: 0.2px;
  text-align: left !important;
}

/* Goal Section */
.page-about-goal {
  width: 100%;
}
.page-about-title-goal {
  max-width: 320px;
  margin-top: 20px;
}
.page-about-title-goal h2 {
  font-size: 1.2em;
}
.page-about-vision {
  max-width: 320px;
  flex-direction: column;
  align-items: center;
  padding-top: 0 !important;
  gap: 0;
}
.page-about-vision-image {
  max-width: 150px;
  min-height: auto;
  margin-right: 0;
}
.page-about-vision-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-about-vision-content {
  margin-left: 0 !important;
  max-width: 320px;
  min-height: auto;
  justify-content: center;
  align-items: center;
}
.page-about-vision-title {
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  margin-left: 0 !important;
}
.page-about-vision-title h2 {
  font-size: 1.2em;
}
.page-about-vision-desc {
  max-width: 320px !important;
  margin-left: 0;
  padding-left: 20px;
  font-size: 0.8em;
  line-height: 15px;
  letter-spacing: 0.9px;
  text-align: left !important;
  padding-right: 40px;
  padding-left: 10px;
}
.page-about-mision {
  max-width: 320px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0;
  padding-top: 0;
}
.page-about-mision-image {
  max-width: 150px;
  min-height: auto;
  margin-right: 0;
}
.page-about-mision-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-about-mision-content {
  margin-left: 0 !important;
  max-width: 320px;
  justify-content: center;
  align-items: center;
}
.page-about-mision-title {
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  margin-top: 20px !important;
  margin-left: 0 !important;
}
.page-about-mision-title h2 {
  font-size: 1.2em;
}
.page-about-mision-desc {
  max-width: 320px !important;
  min-height: auto;
  margin-left: 0;
  padding-left: 20px;
  font-size: 0.8em;
  line-height: 15px;
  letter-spacing: 0.9px;
  text-align: left !important;
  padding-left: 10px;
}

}

/* ukuran android */
@media screen and (max-width:425px) {
  nav ul {
    padding-left: 0;
  }
  nav ul li a {
    font-size: 1em;
    width: 100%;
    display: flex;
    padding-left: 2em;
  }
  nav ul li a:hover{
    background-color: white;
    color: #CD5D27;
    width: 100%;
    font-weight: bold;
  }
  li.navbar-item.active {
    width: 100%;
  }
  .line-section {
    height: 6px;
    z-index: 2;
  }
  .navbar-item.active a {
    background-color: #fff;
    color: #CD5D27;
    width: 100%;
    height: 3em;
    display: flex;
    font-size: 1em;
    padding-left: 2em;
    align-items: center;
    font-weight: bold;
  }
  nav ul.slide {
    display: flex;
    margin-top: 5.8em;
    height: 100%;
    padding-bottom: 1em;
    background-color: #2b2a2a;
    gap: 0.5em;
  }
  .background-nav {
    width: 100%;
    background-color: #CD5D27;
    height: max-content;
    display: block !important;
  }
  li.navbar-item {
    width: 100%;
  }
  .lang-section {
    margin-right: 2rem !important;
  }
  .menu-toggle {
    display: flex;
    z-index: 1001;
    align-items: end;
    margin-right: 1em;
  }
  .main-page {
    margin-top: 2.7rem;
  }
  .search {
    display: none;
    width: 100%;
  }
  .logo-section {
    height: 3em !important;
  }
  .logo-section .logo img {
    width: 6em !important;
    height: 100%;
    object-fit: contain;
  }
  .logo-section .logo {
    padding-left: 2.4rem !important;
  }
  .search-section {
    display: block !important;
    width: 100% !important;
    gap: 0 !important;
    margin-left: 1em;
  }
  .input-search {
    width: 100%;
  }
  .lang-section {
    width: 6.5em !important;
    padding-left: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .input-search:focus {
    width: 100% !important;
  }
  .search {
    display: none;
  }
  dir.icon-search-header {
    display: flex;
    margin-left: 9.4em;
  }
  .slick-dots {
    position: absolute;
    bottom: 10%;
    left: 15%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 60px;
    height: 1.5px;
  }
  section#content-section {
    height: auto;
  }
    .slick-list {
      height: auto;
  }
  .slider {
    height: auto;
  }
  .about-section {
    max-width: 20em;
    margin-top: 3.9em;
  }
  .about-image {
    height: 15em;
  }
  .about-image img {
    object-fit: cover;
  }
  .home-about-title h2 {
    font-size: 0.9em;
  }
  .home-about-desc {
    font-size: 0.7em;
    line-height: 15px;
  }
  .home-about-btn {
    margin-top: 0.6em;
  }
  .map-section {
    max-width: 20em;
  }
  .map-content {
    width: 100%;
  }
  .map-title h2 {
    font-size: 0.9em;
  }
  .map-desc {
    font-size: 0.7em;
    line-height: 15px;
  }
  .galery-section {
    margin-top: 4.3em;
    margin-bottom: 0;
  }
  .galery-content {
    margin-bottom: 2em;
  }
  .galery-image {
    gap: 0;
  }
  .galery-image img {
    object-fit: cover;
  }
  
  
  /* ABOUT US */
  .banner-about-section {
    max-width: 20em;
    margin-top: 2.5em !important;
    width: 80%;
  }
  .page-about-section {
    width: 17.5em;
    padding: 0;
    margin-top: 1em;
    width: 80%;
  }
  .page-about-title-us h2 {
    font-size: 0.9em;
    letter-spacing: 1px;
  }
  .page-about-desc .desc-content p {
    font-size: 0.7em;
    line-height: 15px;
  }
  .page-about-goal {
    max-width: 80%;
  }
  .page-about-vision-content, .page-about-mision-content {
    gap: 0.4em;
    padding-bottom: 0.2em;
  }
  .page-about-title-goal h2 {
    font-size: 0.9em;
  }
  .page-about-vision-image, .page-about-mision-image {
    max-width: 120px;
    height: 6em;
  }
  .page-about-mision {
    gap: 0;
    margin-top: 1em;
    padding-top: 10px !important;
  }
  .page-about-vision-title h2, .page-about-mision-title h2 {
    font-size: 0.9em;
  }
  .page-about-vision-desc, .page-about-mision-desc {
    font-size: 0.7em;
    line-height: 14px;
    padding-left: 3em;
    padding-right: 1.5em;
  }
  .milestone-section {
    padding: 0;
  }
  .company-history-section {
    margin-bottom: -1em;
    width: 17.5em;
    margin-right: 5em;
  }
  .milestone-title {
    font-size: 0.9em;
    margin-top: 2em;
    letter-spacing: 0.7px;
  }
  .milestone-timeline {
    left: -1.2em;
    top: 65px;
    margin-top: 0;
  }
  .milestone-year-item.active {
    font-size: 0.8em;
  }
  .milestone-timeline::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 119%;
    background-color: #ddd;
    right: -17px;
    top: -26px;
  }
  .milestone-year-item.active::before {
    background-color: #CD5D27;
  }
  .milestone-year-item {
    font-size: 0.7em;
  }
  .milestone-content {
    display: none;
    margin-bottom: 0;
    background-color: #CD5D27;
    padding: 8px;
    border-radius: 0;
    color: white;
    margin-left: 40px;
  }
  .milestone-year-item::before {
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #aaa;
    position: absolute;
    right: -21px;
    margin-bottom: -30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .milestone-content-container {
    margin-left: 0.4em;
    width: 19.3em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    height: 310px;
    max-height: 310px;
    overflow: hidden;
    padding: 0 !important;
  }
  .milestone-content.active {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    max-height: 320px;
    height: auto;
    overflow: auto;
  }
  .milestone-nested {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    max-height: 310px;
    padding: 0;
    height: auto;
  }
  .milestone-nested-desc {
    flex: 1;
    font-size: 0.7em;
    display: block;
    letter-spacing: 1px;
    max-height: 310px;
    height: auto;
  }
  .milestone-img-container {
    flex: 0 0 10px;
    margin-right: 13px;
    background-color: white;
  }
  .milestone-img-container img {
    width: 3em;
    height: auto;
    border-radius: 5px;
  }
  
  
  /* ARTICLE & NEWS SECTION */
  .content-news {
    flex-direction: column;
    margin-top: 5em;
    align-items: center;
    margin-bottom: 0;
  }
  .news-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20.3em;
    order: 2;
    margin-top: em;
    padding: 0.7em;
  }
  .news-image {
    width: 100% !important;
    height: 10em !important;
  }
  .news-wrap {
    margin-bottom: 20px;
    padding: 0.1em 0.1em 0.1em 0.1em;
    border: 1px solid #2e2e2e;
  }
  .news-news-content {
    padding: 7px;
    border: 1px solid #2e2e2e;
  }
  .news-wrap h2 {
    width: 100% !important;
    font-size: 0.9em;
    margin-left: 0.7em;
    padding-right: 7px;
  }
  .new-news {
    width: 20.3em;
  }
  .new-news h2 {
    font-size: 1em;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
    letter-spacing: 2px;
  }
  .new-news-title {
    font-size: 0.8em;
    color: #555;
    margin-bottom: 5px;
    letter-spacing: 0.7px;
    line-height: 17px;
    padding-left: 2.5em;
    position: relative;
    display: block;
  }
  .news-date {
    font-size: 0.7em;
    margin-top: 1px;
    margin-left: 0.8em;
  }
  .news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .paginationjs {
    margin-left: 0;
  }
  
  
  /* ARTICLES & NEWS SECTION SINGLE */
  .related-news-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: start;
    gap: 13px;
  }
  .related-news-content {
    border: 1px solid #a7a7a7;
    margin-top: 13px;
    width: 0;
    flex-basis: calc(48.4% - 2px);
    box-sizing: border-box;
    height: auto;
  }
  .news-content-related {
    width: 80%;
    height: auto;
    margin-top: 90px;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    margin-top: 8em;
  }
  .news-title {
    width: auto;
    height: auto;
  }
  .news-title h1 {
    font-size: 0.9em;
    letter-spacing: 1px;
  }
  .related-news-image {
    width: 100%;
    height: 100px;
    overflow: hidden;
  }
  .news-date-single {
    font-size: 0.7em;
    margin-top: 1px;
  }
  .news-image-single {
    width: 100%;
    height: 10em;
    margin-top: 1.2em;
  }
  .news-content-desc {
    margin-top: 35px;
    font-size: 0.85em;
  }
  .related-news {
    margin-top: 45px;
    width: 80%;
  }
  .h2-title-news {
    font-size: 0.9em;
    letter-spacing: 1px;
  }
  .related-news-title {
    padding: 8px;
    font-size: 0.7em;
    width: 100%;
  }
  .news-back {
    margin-top: 19px;
    margin-bottom: 0;
  }
  
  
  /* MEDIA SECTION */
  .category {
    height: 37px;
    width: 70px;
    font-size: 0.8em;
  }
  .line .category:first-child {
    margin-left: -150px !important;
  }
  .page-gallery-section {
    margin-top: 0;
  }
  .gallery-container {
    min-width: 0;
    margin-top: 5em;
    justify-content: center;
  }
  .gallery-content {
    flex-basis: 80%;
  }
  .video-wrapper {
    flex-basis: 80%;
  }
  .paginationjs {
    margin-top: 0;
  }
  
  
  /* CONTACT US SECTION */
  .banner-contact-us {
    height: 9em;
    margin-top: 5.4em;
  }
  .banner-contact-us img {
    object-fit: cover;
  }
  .contact-info
  {
      display: none;
  }
  .address-section.reveal.fade-right {
    width: 100%;
  }
  .form-section.reveal.fade-left {
    width: 100%;
  }
  .contact-page {
    margin-top: -44px;
    gap: 2em; 
  }
  .form-background {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    width: 80%;
  }
  .first-phone-section img {
    width: 22px !important;
    height: 22px;
    background-color: #696969;
  }
  .email-section img {
    width: 23px !important;
    height: 22px;
    background-color: #696969;
  }
  .second-phone-section img{
    width: 22px;
    height: 22px;
    background-color: #696969;
  }
  .contact-page .contact-info-header {
    display: flex;
    margin-left: 0;
    margin-left: 1.25em;
    flex-direction: column;
    align-items: start;
    margin-top: 1em;
    width: 80%;
  }
  .contact-page .contact-info-header h2 {
    font-weight: bold;
    font-size: 0.9em;
    width: auto;
  }
  .contact-page .contact-info-header p {
    margin-top: 0.2em;
  }
  .form-container {
    border-bottom: 0px;
    padding-top: 0.8em;
  margin-bottom: 0;
  }
  .contact-page .form-section .form-panel .form-label {
    font-size: 0.8em;
    margin-left: 3em;
  }
  .form-label {
    flex: 0 0 50px; /* Lebar tetap untuk label */
    margin: 0;
    color: #808285;
  }
  .contact-page .form-section .form-panel {
    padding: 0;
    width: 100%;
  }
  .form-container.form-message {
    margin-top: 0.8em;
  }
  .contact-page .form-section .form-panel .form-input textarea {
    padding: 0px;
    border-bottom: 2px solid #bdbdbd !important;
    width: 14em;
    margin-left: 1em;
  }
  .recaptcha-wrapper {
    margin-left: 2.49em;
  }
  .form-submit {
    margin-top: -1em;
    margin-left: 1.2em;
    padding-bottom: 1em;
  }
  .g-recaptcha {
    transform: scale(0.50);
    margin-top: 1.5rem;
  }
  .contact-page .form-section .form-panel .form-input input {
    border-bottom: 2px solid #bdbdbd !important;
    border: 0px;
    width: auto;
    margin-left: 1em;
    width: 14em;
  }
  .contact-page .form-section .form-panel .form-submit a {
    color: #838282;
    border: 0.2px solid #b0aeae;
    font-size: 0.68em;
    padding: 3px 10px 1px 10px;
    text-decoration: none;
    letter-spacing: 0.8px;
    margin-left: 2em;
  }
  h2.headquarters, h2.representative-office {
    color: #7f7f7f;
    font-size: 0.9em;
    margin-top: 1.5em;
  }
  .address-section .address-info h5 {
    color: #808285;
    font-size: 0.78em;
  }
  .contact-page .contact-info-header p, .address-section .contact-info p, .address-section .address-info p {
    font-size: 0.78em;
  }
  input[type="email" i] {
    opacity: 1;
    font-size: 0.84em;
    margin-left: 0;
  }
  span.phone-section-phone {
    margin-left: 0.3rem;
    padding-top: 2px;
    font-size: 0.7em;
  }
  .address-map {
    margin-top: 1.5em;
  }
  #snackbar, #snackbar-exist, #snackbar-contact, #snackbar-career {
    padding: 0 2.5rem;
  }
  #snackbar h2, #snackbar-exist h2, #snackbar-contact h2, #snackbar-career h2 {
    font-size: 15px;
  }
  #snackbar p, #snackbar-contact p, #snackbar-career p {
    font-size: 12px;
  }
  #snackbar small, #snackbar-exist small, #snackbar-contact small, #snackbar-career small {
    font-size: 11px;
  }
  #snackbar img, #snackbar-exist img, #snackbar-contact img, #snackbar-career img {
    width: 300px;
    margin-bottom: 20px;
  }
  input.ng-pristine.ng-empty.ng-valid-email.ng-invalid.ng-invalid-required.ng-touched {
    width: 17.5em;
  }
  input.ng-pristine.ng-empty.ng-invalid.ng-invalid-required.ng-valid-minlength.ng-touched {
    width: 17.5em;
  }
  textarea.ng-pristine.ng-empty.ng-invalid.ng-invalid-required.ng-touched {
    width: 17.5em;
  }
  .network-point-section {
    margin-top: -25px;
  }
  .network-point-container {
    width: 80%;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 2em;
  }
  .network-point-header {
    flex-basis: 37px;
  }
  .network-point-content {
    min-height: 9em;
  }
  .network-point-title {
    margin-top: 0em;
    font-size: 1.1em;
    font-family: 'Rota-ExtraBold';
  }
  .network-point-header-title {
    font-size: 0.8em;
  }
  .network-point-body {
    font-size: 0.8em;
  }
  
  /* MULTIPLE PRODUCT */
  .category-list, .category-all-product {
    display: none;
  }
  .category-all-product {
    margin-bottom: 0;
  }
  .category-name.active h3, .category-all-product.active {
    display: none;
  }
  .dropdown-container {
    display: block;
    margin-left: 2em;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 1;
    font-size: 0.6em;
    background-color: white;
  }
  a.category-dropdown-product {
    text-decoration: none;
    color: #CD5D27;
    border: 1px solid black;
    padding: 6px 11px 4px 11px;
    font-weight: bold;
    font-size: 0.6em;
    min-width: 9.6em;
    width: 100%;
    display: block;
  }
  .dropdown-content a {
    display: block;
    padding: 7px 0 4px 7px;
    width: 9.6em;
    text-decoration: none;
    color: #504e4e;
    border: 1px solid #5e5e5e;
  }
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  .plus {
    margin-top: 0.3em;
  }
  .category-section-product h2 {
    color: #CD5D27;
    font-size: 1rem;
    display: flex;
    align-items: center;
    margin-top: 0;
    height: max-content;
  }
  .product-page {
    margin-top: 4.5rem;
    margin-bottom: 1em;
  }
  .product-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
  }
  .product-section {
    flex-direction: column;
    width: 80%;
    max-width: none;
    flex-direction: column;
    width: 100%;
    max-width: none;
    display: flex;
    justify-content: flex-start;
  }
  .category-section-product {
    max-width: none;
    overflow: hidden;
    flex-direction: row;
    height: 5.5em;
    max-height: 15em;
    align-items: start;
    margin-top: 4em;
  }
  .item-section {
    width: 100%;
    height: 100%;
    max-width: none;
    overflow: auto;
    border-left: none;
    padding-bottom: 0;
    padding-left: 0;
    overflow-y: scroll;
    margin-top: 0;
  }
  .item-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
    padding: 0;
    height: max-content;
    margin-top: 1em;
    margin-bottom: 1.5em;
  }
  .item-content {
    height: 140px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
  }
  .category-name-item {
    font-size: 1em;
  }
  .line-section-item {
    margin-top: 1rem;
  }
  .product-image {
    margin-top: 8px;
    width: 75px;
    height: 80px;
  }
  
  
  /* PRODUCT SINGLE */
  .product-single-section {
    width: 80% !important;
    max-width: none !important;
    margin-top: 1.5rem !important;
  }
  .product-single-video {
    height: 10rem !important;
  }
  .product-single-title {
    font-size: 1em !important;
  }
  h2.overview {
    margin-top: 2rem !important;
    font-size: 1em !important;
    color: #CD5D27 !important;
    letter-spacing: 1.7px !important;
  }
  .desain {
    display: flex !important;
    height: 1.4rem !important;
    margin-top: 1rem !important;
  }
  .desain-eksterior {
    background-color: #d3d3d3 !important;
    margin-left: 0 !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 4rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .desain-eksterior h2 {
    font-size: 0.7em !important;
  }
  .desain-interior {
    margin-left: 1rem !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 4rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .desain-interior h2 {
    font-size: 0.7em !important;
  }
  .product-single-images {
    width: 22rem !important;
    height: 16rem !important;
    position: relative !important;
    overflow: hidden;
    overflow-x: auto !important;
  }
  .product-single-image {
    width: 100% !important;
    height: max-content !important;
    max-height: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 1rem !important;
    position: relative !important;
  }
  .interior-images {
    width: 135% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: relative !important;
  }
  .back {
    margin-bottom: 3em !important;
    margin-top: 0.1em !important;
  }
  .icon-plus {
    width: 1rem !important;
    height: 1rem !important;
  }
  .title-model-seri {
    margin-top: 0 !important;
    font-size: 0.9em  !important; 
  }
  .product-image {
    margin-top: 8px !important;
    width: 85px !important;
    height: 70px !important;
  }
  .item-container-single {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    position: relative !important;
    padding: 10px !important;
    height: max-content !important;
    max-height: 448px !important;
  }
  .item-content {
    height: 130px !important;
  }
  .item-section-seri {
    margin-top: 3em !important;
    overflow: auto !important;
    height: 20em;
  }
  .desain-eksterior.active, .desain-interior.active {
    background-color: #CD5D27 !important;
  }
  .product-model-no {
    font-size: 0.6em;
    color: #808285;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .icon-interior-1 { top: -99.8% !important; left: 65% !important; }
  .icon-interior-2 { top: -102% !important; left: 108% !important; }
  .icon-interior-3 { top: -35% !important; left: 77% !important; }
  .icon-interior-4 { top: -36% !important; left: 119% !important; }
  .icon-interior:hover .info-box,
  .icon-eksterior:hover .info-box-eksterior {
    display: none;
  }
  .info-box,
  .info-box-eksterior {
    display: none;
  }
  .info-box.show,
  .info-box-eksterior.show {
    display: flex;
  }
  .info-box-eksterior {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    flex-direction: column !important;
    padding: 1em !important;
    background-color: rgb(0 0 0 / 89%) !important;
    border: none !important;
    border-radius: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important; /* Pastikan modal berada di atas elemen lain */
  }
  .info-box-eksterior img {
    width: 80% !important;
    max-height: none !important;
    height: 50% !important;
  }
  .info-box-eksterior .info-description {
    margin-left: 0 !important;
    align-items: center !important;
    font-size: 1.2em !important;
    text-align: center !important;
    width: 80% !important;
    height: auto !important;
    margin-bottom: 0.5em;
  }
  .container-box-eksterior {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    column-gap: 1.5em;
    row-gap: 0.4em;
  }
  .info-box {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    flex-direction: column !important;
    padding: 1em !important;
    background-color: rgb(0 0 0 / 89%) !important;
    border: none !important;
    border-radius: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important; /* Pastikan modal berada di atas elemen lain */
    gap: 1em;
  }
  .info-box img {
    width: 80% !important;
    max-height: none !important;
    height: 40% !important;
  }
  .info-box .info-description {
    margin-left: 0 !important;
    align-items: center !important;
    font-size: 1.2em !important;
    text-align: center !important;
    width: 100% !important;
    height: auto !important;
  }
  .title-box1, .title-box2, .title-box3, .title-box4 {
    display: flex;
    flex-direction: column;
    row-gap: 0.1em;
  }
  p.desc-box-spec-last {
    margin-top: 0 !important;
  }
  .desc-box-spec, .desc-box-spec-last {
    font-size: 0.7em !important;
    font-weight: bold;
    font-family: 'rota-extrabold';
  }
  .title-box-spec {
    font-size: 0.4em !important;
  }
  .info-description h2 {
    font-size: 1em !important;
    font-weight: bold;
    font-family: 'Rota-ExtraBold';
    margin-top: 0.1em;  
  }
  .container-vanguard-desc {
    display: flex;
    column-gap: 0.15em;
  }
  h2.desc-vanguard1, h2.desc-vanguard2 {
    font-size: 0.75em !important;
    font-weight: bold;
    font-family: 'Rota-ExtraBold';
  }
  .title-box-spec4 {
    display: block !important;
    font-size: 0.4em !important;
  }
  .modal-close-mobile {
    display: block !important;
  }
  .product-modal-content {
    flex-direction: column-reverse;
    column-gap: 10px;
    width: 300px;
    height: max-content;
  }
  .modal-spesification {
    width: 100%;
    height: 50%;
    padding: 1rem 1rem 1rem 1rem;
  }
  .modal-image {
    width: 100%;
    height: 50%;
  }
  h2.modal-title-serial {
    font-size: 0.7em;
  }
  h2#modalSerialNo {
    font-size: 0.65em;
  }
  .line-product-modal1 {
    width: 266px;
    margin-top: 1.2em;
  }
  .modal-product-catalog {
    width: 266px;
    margin-top: 2rem;
  }
  .modal-product-order {
    width: 266px;
  }
  .product-modal {
    padding-top: 20px;
  }
  
  
  /* PAGE SEARCH SECTION */
  .page-search-title1 {
    margin-top: 1.8em;
  }
  h1.page-search-title {
    font-size: 1em;
  }
  h1.page-search-keyword {
    font-size: 1em;
  }
  h1.title-news-related {
    font-size: 0.9em;
  }
  .page-search-container {
    width: 90%;
    padding: 1em 1em 0 1em;
    margin-bottom: 2em;
    margin-top: 1em;
  }
  h3.representative-office {
    margin-top: 1.4em;
  }
  .page-search-img {
    height: 10em;
  }
  .search-title {
    font-size: 0.8em;
  }
  .search-desc {
    font-size: 0.6em;
  }
  .footer-lines {
    margin-top: 0;
  }
  .footer-line {
    height: 0.2em;
    width: 80%;
  }
  .footer-section .footer-item p {
    width: 130%;
  }
  .footer-section {
    width: 100%;
    padding: 0;
  }
  .footer-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-right: -5px;
  }
  .footer-item:nth-child(2) {
    margin-left: 0em;
    margin-top: -0.7em;
    width: 250px;
  }
  .footer-item:nth-child(3) {
    margin-left: 0em;
    width: 210px;
  }
  .footer-item:nth-child(4) {
    margin-left: 0em;
  }
  .footer-item:nth-child(5) {
    margin-right: 0;
    order: 6;
  }
  .footer-item-logo {
    padding: 0 10px 0px 25.5px;
  }
  .logo-footer {
    width: 90px;
  }
  .footer-item {
    padding: 0 10px 0px 25px;
  }
  .scroll-to-top {
    right: 2rem;
  }
  }

/* ukuran android */
@media screen and (max-width:414px) {

.lang-section {
  margin-left: 1.35em;
}
dir.icon-search-header {
  margin-right: -1.5em;
  margin-left: 8.9em;
}
dir.icon-search-header img {
  width: 60%;
}
.galery-section {
  margin-top: 4.3em;
}
.menu-toggle {
  margin-right: 0.9em;
}
.page-about-mision {
  padding: 10px;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  padding-top: 10px !important;
}
.company-history-section {
  margin-bottom: -1em;
  width: 17.5em;
  margin-right: 4.7em;
}
.milestone-content-container {
  width: 19em;
}
.milestone-title {
  margin-left: 2em;
}
.address-section.reveal.fade-right {
  width: 100%;
}
.form-section.reveal.fade-left {
  width: 100%;
}
.contact-page {
  margin-top: -44px;
}
.form-background {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  width: 80%;
}
.first-phone-section img {
  width: 22px !important;
  height: 22px;
  background-color: #696969;
}
.email-section img {
  width: 23px !important;
  height: 22px;
  background-color: #696969;
}
.second-phone-section img{
  width: 22px;
  height: 22px;
  background-color: #696969;
}
.contact-page .contact-info-header {
  margin-left: 4px;
}
.news-container {
  margin-bottom: 10px;
}
.modal-image {
  height: 15em;
}
.modal-spesification {
  height: max-content;
}
section.content-news {
  width: 100%;
}
.news-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20.3em;
  order: 2;
  margin-top: em;
  padding: 0.7em;
}
.milestone-year-item.active {
  font-size: 0.9em;
}
.footer-section .footer-item p {
  width: 130%;
}
.footer-section {
  width: 100%;
  padding: 0;
}
.footer-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-right: 6px;
}
.footer-item:nth-child(2) {
  margin-left: 0em;
  margin-top: -0.7em;
}
.footer-item:nth-child(3) {
  margin-left: 0em;
}
.footer-item:nth-child(4) {
  margin-left: 0em;
}
.footer-item:nth-child(5) {
  margin-right: 0;
  order: 6;
}
.footer-item-logo {
  padding: 0 10px 0px 24px;
}
input.ng-pristine.ng-empty.ng-valid-email.ng-invalid.ng-invalid-required.ng-touched {
  width: 17.5em;
}
input.ng-pristine.ng-empty.ng-invalid.ng-invalid-required.ng-valid-minlength.ng-touched {
  width: 17.5em;
}
textarea.ng-pristine.ng-empty.ng-invalid.ng-invalid-required.ng-touched {
  width: 17.5em;
}
.network-point-section {
  margin-top: -25px;
}
.network-point-container {
  width: 80%;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 2em;
}
.network-point-content {
  min-height: 9em;
}
.network-point-title {
  margin-top: 0em;
  font-size: 1em;
  font-family: 'Rota-ExtraBold';
}
.network-point-header-title {
  font-size: 0.8em;
}
.network-point-body {
  font-size: 0.8em;
}
}

/* ukuran android */
@media screen and (max-width:390px) {


nav ul {
  padding-left: 0;
}
nav ul li a {
  font-size: 1em;
  width: 100%;
  display: flex;
  padding-left: 2em;
}
nav ul li a:hover{
  background-color: white;
  color: #CD5D27;
  width: 100%;
  font-weight: bold;
}
li.navbar-item.active {
  width: 100%;
}
.line-section {
  height: 6px;
  z-index: 2;
}
.navbar-item.active a {
  background-color: #fff;
  color: #CD5D27;
  width: 100%;
  height: 3em;
  display: flex;
  font-size: 1em;
  padding-left: 2em;
  align-items: center;
  font-weight: bold;
}
nav ul.slide {
  display: flex;
  margin-top: 5.8em;
  height: 100%;
  padding-bottom: 1em;
  background-color: #2b2a2a;
  gap: 0.5em;
}
.background-nav {
  width: 100%;
  background-color: #CD5D27;
  height: max-content;
  display: block !important;
}
li.navbar-item {
  width: 100%;
}
.lang-section {
  margin-right: 2rem !important;
}
.menu-toggle {
  display: flex;
  z-index: 1001;
  align-items: end;
}
.main-page {
  margin-top: 2.7rem;
}
  .search {
    display: none;
    width: 100%;
}
.logo-section {
  height: 3em !important;
}
.logo-section .logo img {
  width: 6em !important;
  height: 100%;
  object-fit: contain;
}
.logo-section .logo {
  padding-left: 2.4rem !important;
}
.search-section {
  display: block !important;
  width: 100% !important;
  gap: 0 !important;
  margin-left: 1em;
}
.input-search {
  width: 100%;
}
.lang-section {
  width: 6.5em !important;
  padding-left: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.input-search:focus {
  width: 100% !important;
}
.search {
  display: none;
}
dir.icon-search-header {
  display: flex;
  margin-left: 7.7em;
}
.slick-dots {
  position: absolute;
  bottom: 10%;
  left: 15%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 60px;
  height: 1.5px;
}
section#content-section {
  height: auto;
}
  .slick-list {
    height: auto;
}
.slider {
  height: auto;
}
.about-section {
  max-width: 20em;
  margin-top: 3.9em;
}
.about-image {
  height: 15em;
}
.about-image img {
  object-fit: cover;
}
.home-about-title h2 {
  font-size: 0.9em;
}
.home-about-desc {
  font-size: 0.7em;
  line-height: 15px;
}
.home-about-btn {
  margin-top: 0.6em;
}
.map-section {
  max-width: 20em;
}
.map-content {
  width: 100%;
}
.map-title h2 {
  font-size: 0.9em;
}
.map-desc {
  font-size: 0.7em;
  line-height: 15px;
}
.map-image {
  margin-top: 1em;
}
.galery-section {
  margin-top: 4em;
  margin-bottom: 1em;
}
.galery-content {
  margin-bottom: 1em;
}


/* ABOUT US */
.banner-about-section {
  max-width: none;
  margin-top: 2.5em !important;
  width: 100%;
}
.banner-about-banner {
  max-width: none;
  width: 80%;
}
.page-about-section {
  width: 100%;
  padding: 0;
  margin-top: 1em;
}
.page-about-title-us {
  width: 80%;
  max-width: 600px;
  margin-top: 35px;
}
.page-about-desc {
  width: 80%;
  max-width: none;
}
.page-about-title-us h2 {
  font-size: 0.9em;
  letter-spacing: 1px;
}
.page-about-desc .desc-content p {
  font-size: 0.7em;
  line-height: 15px;
}
.page-about-goal {
  max-width: 100%;
}
.page-about-title-goal h2 {
  font-size: 0.9em;
}
.page-about-vision {
  max-width: none;
  width: 82%;
}
.page-about-vision-image {
  max-width: 120px;
}
.page-about-mision {
  margin-top: 1em;
  width: 80%;
  padding-top: 10px !important;
}
.page-about-mision-image {
  max-width: 120px;
}
.page-about-vision-title h2, .page-about-mision-title h2 {
    font-size: 0.9em;
}
.page-about-vision-desc, .page-about-mision-desc {
  font-size: 0.7em;
  line-height: 14px;
}
.milestone-section {
  padding: 0;
}
.company-history-section {
  margin-bottom: -1em;
  width: 17.5em;
  margin-left: 1.5em;
}
.milestone-title {
  font-size: 0.9em;
  margin-top: 2em;
  letter-spacing: 0.7px;
}
.milestone-timeline {
  left: 0;
  top: 65px;
  margin-top: 0;
}
.milestone-year-item.active {
  font-size: 0.9em;
}
.milestone-timeline::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 118%;
  background-color: #ddd;
  right: -17px;
  top: -28px;
}
.milestone-year-item.active::before {
  background-color: #CD5D27;
}
.milestone-year-item {
  font-size: 0.7em;
  transition: color 0.3s, font-size 0.3s;
}
.milestone-content {
  display: none;
  margin-bottom: 0;
  background-color: #CD5D27;
  padding: 8px;
  border-radius: 0;
  color: white;
  margin-left: 40px;
}
.milestone-year-item::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #aaa;
  position: absolute;
  right: -21px;
  margin-bottom: -30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  transition: background-color 0.3s, width 0.3s, height 0.3s;
}
.milestone-content-container {
  margin-left: 1.5em;
  width: 18.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  height: 310px;
  max-height: 310px;
  overflow: hidden;
  padding: 0 !important;
}
.milestone-content.active {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  max-height: 320px;
  height: auto;
  overflow: auto;
}
.milestone-nested {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  max-height: 310px;
  padding: 0;
  height: auto;
}
.milestone-nested-desc {
  flex: 1;
  font-size: 0.7em;
  display: block;
  letter-spacing: 1px;
  max-height: 310px;
  height: auto;
}
.milestone-img-container {
  flex: 0 0 10px;
  margin-right: 13px;
  background-color: white;
}
.milestone-img-container img {
  width: 3em;
  height: auto;
  border-radius: 5px;
}


/* ARTICLE & NEWS SECTION */
.content-news {
  flex-direction: column;
  margin-top: 4.5em;
  align-items: center;
  margin-bottom: 0;
}
.news-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20.3em;
  order: 2;
  margin-top: em;
  padding: 0.7em;
}
.news-image {
  width: 100% !important;
  height: 10em !important;
}
.news-wrap {
  margin-bottom: 20px;
  padding: 0.1em 0.1em 0.1em 0.1em;
  border: 1px solid #2e2e2e;
}
.news-news-content {
  padding: 7px;
  border: 1px solid #2e2e2e;
}
.news-wrap h2 {
  width: 100% !important;
  font-size: 0.9em;
  margin-left: 0.7em;
  padding-right: 7px;
}
.new-news h2 {
  font-size: 1em;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
  letter-spacing: 2px;
}
.new-news-title {
  font-size: 0.8em;
  color: #555;
  margin-bottom: 5px;
  letter-spacing: 0.7px;
  line-height: 17px;
  padding-left: 2.5em;
  position: relative;
  display: block;
}
.news-date {
  font-size: 0.7em;
  margin-top: 1px;
  margin-left: 0.8em;
}
.news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.paginationjs {
  margin-left: 0;
}


/* ARTICLES & NEWS SECTION SINGLE */
.related-news-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: start;
  gap: 13px;
}
.related-news-content {
  border: 1px solid #a7a7a7;
  margin-top: 13px;
  width: 0;
  flex-basis: calc(48.4% - 2px);
  box-sizing: border-box;
  height: auto;
}
.news-content-related {
  width: 80%;
  height: auto;
  margin-top: 90px;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  margin-top: 8em;
}
.news-title {
  width: auto;
  height: auto;
}
.news-title h1 {
  font-size: 0.9em;
  letter-spacing: 1px;
}
.related-news-image {
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.news-date-single {
  font-size: 0.7em;
  margin-top: 1px;
}
.news-image-single {
  width: 100%;
  height: 10em;
  margin-top: 1.2em;
}
.news-content-desc {
  margin-top: 35px;
  font-size: 0.85em;
}
.related-news {
  margin-top: 45px;
  width: 80%;
}
.h2-title-news {
  font-size: 0.9em;
  letter-spacing: 1px;
}
.related-news-title {
  padding: 8px;
  font-size: 0.7em;
  width: 100%;
}
.news-back {
  margin-top: 19px;
  margin-bottom: 0;
}


/* MEDIA SECTION */
.category {
  height: 37px;
  width: 70px;
  font-size: 0.8em;
}
.line .category:first-child {
  margin-left: -177px !important;
}
.page-gallery-section {
  margin-top: 0em;
  width: 100%;
}
.gallery-container {
  min-width: 0;
  width: 80%;
}
.gallery-content {
  flex-basis: 100%;
}
.video-wrapper {
  flex-basis: 100%;
}
.paginationjs {
  margin-top: 0;
}


/* CONTACT US SECTION */
.banner-contact-us {
  height: 9em;
  margin-top: 5.5em;
}
.banner-contact-us img {
  object-fit: cover;
}
.contact-info
{
  display: none;
}
.contact-page {
  margin-top: -44px;
}
.form-background {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  width: 85%;
}
.contact-page .contact-info-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 1em;
  margin-left: 11px;
}
.contact-page .contact-info-header h2 {
  font-weight: bold;
  font-size: 0.95em;
  width: auto;
}
.contact-page .contact-info-header p {
  margin-top: 0;
}
.form-container {
  border-bottom: 0px;
  padding-top: 0.8em;
  margin-bottom: 0;
}
.contact-page .form-section .form-panel .form-label {
  font-size: 0.8em;
  margin-left: 3em;
}
.form-label {
  flex: 0 0 50px; /* Lebar tetap untuk label */
  margin: 0;
  color: #808285;
}
.contact-page .form-section .form-panel {
  padding: 0;
  width: 18.7em;
}
.form-container.form-message {
  margin-top: 0.8em;
}
.contact-page .form-section .form-panel .form-input textarea {
  padding: 0px;
  border-bottom: 2px solid #bdbdbd !important;
  width: 12.5em;
}
.recaptcha-wrapper {
  margin-left: 2.49em;
}
.form-submit {
  margin-top: -1em;
  margin-left: 1.2em;
  padding-bottom: 1em;
}
.g-recaptcha {
  transform: scale(0.50);
  margin-top: 1.5rem;
}
.contact-page .form-section .form-panel .form-input input {
  border-bottom: 2px solid #bdbdbd !important;
  border: 0px;
  width: auto;
  width: 12.5em;
}
.contact-page .form-section .form-panel .form-submit a {
  color: #838282;
  border: 0.2px solid #b0aeae;
  font-size: 0.68em;
  padding: 3px 10px 1px 10px;
  text-decoration: none;
  letter-spacing: 0.8px;
  margin-left: 2em;
}
.form-section.reveal.fade-left {
  width: 100%;
  display: flex;
  justify-content: center;
}
h2.headquarters, h2.representative-office {
  color: #7f7f7f;
  font-size: 0.9em;
  margin-top: 1.5em;
}
.address-section.reveal.fade-right {
  width: 18.7em;
  margin-bottom: 2em;
  margin-top: 1em;
}
.address-section .address-info h5 {
  color: #808285;
  font-size: 0.78em;
}
.contact-page .contact-info-header p, .address-section .contact-info p, .address-section .address-info p {
  font-size: 0.78em;
}
.first-phone-section img {
  width: 22px !important;
  height: 22px;
  background-color: #696969;
}
.email-section img {
  width: 23px !important;
  height: 22px;
  background-color: #696969;
}
.second-phone-section img{
  width: 22px;
  height: 22px;
  background-color: #696969;
}
.second-phone-section {
  display: flex;
  align-items: center;
}
.email-section {
  display: flex;
  align-items: center;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}
span.phone-section-phone {
  margin-left: 0.3rem;
  padding-top: 2px;
}
.address-map {
  margin-top: 1.5em;
}
#snackbar, #snackbar-exist, #snackbar-contact, #snackbar-career {
  padding: 0 2.5rem;
}
#snackbar h2, #snackbar-exist h2, #snackbar-contact h2, #snackbar-career h2 {
  font-size: 15px;
}
#snackbar p, #snackbar-contact p, #snackbar-career p {
  font-size: 12px;
}
#snackbar small, #snackbar-exist small, #snackbar-contact small, #snackbar-career small {
  font-size: 11px;
}
#snackbar img, #snackbar-exist img, #snackbar-contact img, #snackbar-career img {
  width: 300px;
  margin-bottom: 20px;
}
input.ng-pristine.ng-empty.ng-valid-email.ng-invalid.ng-invalid-required.ng-touched {
  width: 17.5em;
}
input.ng-pristine.ng-empty.ng-invalid.ng-invalid-required.ng-valid-minlength.ng-touched {
  width: 17.5em;
}
textarea.ng-pristine.ng-empty.ng-invalid.ng-invalid-required.ng-touched {
  width: 17.5em;
}
.network-point-section {
  margin-top: -25px;
}
.network-point-container {
  width: 80%;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 2em;
}
.network-point-content {
  min-height: 9em;
}
.network-point-title {
  margin-top: 0em;
  font-size: 1em;
  font-family: 'Rota-ExtraBold';
}
.network-point-header-title {
  font-size: 0.8em;
}
.network-point-body {
  font-size: 0.8em;
}

/* MULTIPLE PRODUCT */
.category-list, .category-all-product {
  display: none;
}
.dropdown-container {
  display: block;
  margin-left: 2em;
}
.dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  z-index: 1;
  font-size: 0.6em;
}
a.category-dropdown-product {
  text-decoration: none;
  color: #CD5D27;
  border: 1px solid black;
  padding: 5px 14.8px 5px 14.8px;
  font-weight: bold;
  font-size: 0.6em;
}
.dropdown-content a {
  display: block;
  padding: 7px 0 4px 7px;
  width: 9.2em;
  text-decoration: none;
  color: #504e4e;
  border: 1px solid #5e5e5e;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.category-section-product h2 {
  color: #CD5D27;
  font-size: 1rem;
  display: flex;
  align-items: center;
  margin-top: 0.5em;
  height: max-content;
}
.product-page {
  margin-top: 4.5rem;
  margin-bottom: 1em;
}
.product-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.product-section {
  flex-direction: column;
  width: 80%;
  max-width: none;
}
.category-section-product {
  max-width: none;
  overflow: hidden;
  flex-direction: row;
  height: 5em;
  max-height: 10em;
  align-items: center;
  margin-top: 4em;
}
.item-section {
  width: 100%;
  max-width: none;
  overflow: auto;
  border-left: none;
  padding-bottom: 0;
  padding-left: 0;
  overflow-y: scroll;
  margin-top: 2.5em;
}
.item-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  padding: 0;
  height: 448px;
  margin-top: 1em;
  margin-bottom: 8.5em;
}
.item-content {
  height: 140px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.category-name-item {
  font-size: 1em;
}
.line-section-item {
  margin-top: 1rem;
}
.product-image {
  margin-top: 8px;
  width: 75px;
  height: 80px;
}


/* PRODUCT SINGLE */
.product-single-section {
  width: 80% !important;
  max-width: none !important;
  margin-top: 1.5rem !important;
}
.product-single-video {
  height: 10rem !important;
}
.product-single-title {
  font-size: 1em !important;
}
h2.overview {
  margin-top: 2rem !important;
  font-size: 1em !important;
  color: #CD5D27 !important;
  letter-spacing: 1.7px !important;
}
.desain {
  display: flex !important;
  height: 1.4rem !important;
  margin-top: 1rem !important;
}
.desain-eksterior {
  background-color: #d3d3d3 !important;
  margin-left: 0 !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 4rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.desain-eksterior h2 {
  font-size: 0.7em !important;
}
.desain-interior {
  margin-left: 1rem !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 4rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.desain-interior h2 {
  font-size: 0.7em !important;
}
.product-single-images {
  width: 22rem !important;
  height: 13rem !important;
  position: relative !important;
  overflow: hidden;
  overflow-x: auto !important;
}
.product-single-image {
  width: 100% !important;
  height: max-content !important;
  max-height: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 1rem !important;
  position: relative !important;
}
.interior-images {
  width: 135% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: relative !important;
}
.back {
  margin-bottom: 3em !important;
  margin-top: 0.1em !important;
}
.icon-plus {
  width: 1rem !important;
  height: 1rem !important;
}
.title-model-seri {
  margin-top: 0 !important;
  font-size: 0.9em  !important; 
}
.product-image {
  margin-top: 8px !important;
  width: 85px !important;
  height: 70px !important;
}
.item-container-single {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  position: relative !important;
  padding: 10px !important;
  height: max-content !important;
  max-height: 448px !important;
}
.item-content {
  height: 130px !important;
}
.item-section-seri {
  margin-top: 3em !important;
  overflow: auto !important;
  height: 20em;
}
.desain-eksterior.active, .desain-interior.active {
  background-color: #CD5D27 !important;
}
.product-model-no {
  font-size: 0.6em;
  color: #808285;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.icon-interior-1 { top: -99.8% !important; left: 65% !important; }
.icon-interior-2 { top: -102% !important; left: 108% !important; }
.icon-interior-3 { top: -35% !important; left: 77% !important; }
.icon-interior-4 { top: -36% !important; left: 119% !important; }
.icon-interior:hover .info-box,
.icon-eksterior:hover .info-box-eksterior {
  display: none;
}
.info-box,
.info-box-eksterior {
  display: none;
}
.info-box.show,
.info-box-eksterior.show {
  display: flex;
}
.info-box-eksterior {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  flex-direction: column !important;
  padding: 1em !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  border: none !important;
  border-radius: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important; /* Pastikan modal berada di atas elemen lain */
}
.info-box-eksterior img {
  width: 80% !important;
  max-height: none !important;
  height: 50% !important;
}
.info-box-eksterior .info-description {
  margin-left: 0 !important;
  align-items: center !important;
  font-size: 1.2em !important;
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
}
.info-box {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  flex-direction: column !important;
  padding: 1em !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  border: none !important;
  border-radius: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important; /* Pastikan modal berada di atas elemen lain */
}
.info-box img {
  width: 80% !important;
  max-height: none !important;
  height: 50% !important;
}
.info-box .info-description {
  margin-left: 0 !important;
  align-items: center !important;
  font-size: 1.2em !important;
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
}
.modal-close-mobile {
  display: block !important;
}
.product-modal-content {
  flex-direction: column-reverse;
  column-gap: 10px;
  width: 300px;
  height: max-content;
}
.modal-spesification {
  width: 100%;
  height: 50%;
  padding: 1rem 1rem 1rem 1rem;
}
.modal-image {
  width: 100%;
  height: 50%;
}
h2.modal-title-serial {
  font-size: 0.7em;
}
h2#modalSerialNo {
  font-size: 0.65em;
}
.line-product-modal1 {
  width: 266px;
  margin-top: 1.2em;
}
.modal-product-catalog {
  width: 266px;
  margin-top: 2rem;
}
.modal-product-order {
  width: 266px;
}
.product-modal {
  padding-top: 20px;
}


/* PAGE SEARCH SECTION */
.page-search-title1 {
  margin-top: 1.8em;
}
h1.page-search-title {
  font-size: 1em;
}
h1.page-search-keyword {
  font-size: 1em;
}
h1.title-news-related {
  font-size: 0.9em;
}
.page-search-container {
  width: 90%;
  padding: 1em 1em 0 1em;
  margin-bottom: 2em;
  margin-top: 1em;
}
.page-search-img {
  height: 10em;
}
.search-title {
  font-size: 0.8em;
}
.search-desc {
  font-size: 0.6em;
}
.footer-lines {
  margin-top: 0;
}
.footer-line {
  height: 0.2em;
}
.footer-section .footer-item p {
  width: 130%;
}
.footer-section {
  width: 100%;
  padding: 0;
}
.footer-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-right: 8px;
}
.footer-item:nth-child(2) {
  margin-left: 0em;
  margin-top: -0.7em;
}
.footer-item:nth-child(3) {
  margin-left: 0em;
}
.footer-item:nth-child(4) {
  margin-left: 0em;
}
.footer-item:nth-child(5) {
  margin-right: 0;
  order: 6;
}
.footer-item-logo {
  padding: 0 10px 0px 24px;
}
.footer-item {
  padding: 0 10px 10px 10px;
}
.footer-item:nth-child(4) {
  order: 6;
}
.footer-item:nth-child(3) {
  order: 4;
}
.footer-item:nth-child(6) {
  order: 5;
}
.logo-footer {
  width: 90px;
}
.footer-item {
  padding: 0 10px 0px 25px;
}
.footer-item-logo {
  padding: 0 10px 0px 11.5px;
}
.scroll-to-top {
  right: 2rem;
}
}

/* ukuran android */
@media screen and (max-width:360px) {

nav ul {
  padding-left: 0;
}
nav ul li a {
  font-size: 1em;
  width: 100%;
  display: flex;
  padding-left: 2em;
}
nav ul li a:hover{
  background-color: white;
  color: #CD5D27;
  width: 100%;
  font-weight: bold;
}
li.navbar-item.active {
  width: 100%;
}
.line-section {
  height: 6px;
  z-index: 2;
}
.navbar-item.active a {
  background-color: #fff;
  color: #CD5D27;
  width: 100%;
  height: 3em;
  display: flex;
  font-size: 1em;
  padding-left: 2em;
  align-items: center;
  font-weight: bold;
}
nav ul.slide {
  display: flex;
  margin-top: 5.8em;
  height: 100%;
  padding-bottom: 1em;
  background-color: #2b2a2a;
  gap: 0.5em;
}
.background-nav {
  width: 100%;
  background-color: #CD5D27;
  height: max-content;
  display: block !important;
}
li.navbar-item {
  width: 100%;
}
.lang-section {
  margin-right: 2rem !important;
}
.menu-toggle {
  display: flex;
  z-index: 1001;
  align-items: end;
  margin-right: 0.5em;
}
.main-page {
  margin-top: 2.7rem;
}
  .search {
    display: none;
    width: 100%;
}
.logo-section {
  height: 3em !important;
}
.logo-section .logo img {
  width: 6em !important;
  height: 100%;
  object-fit: contain;
}
.logo-section .logo {
  padding-left: 2.4rem !important;
}
.search-section {
  display: block !important;
  width: 100% !important;
  gap: 0 !important;
  margin-left: 1em;
}
.input-search {
  width: 100%;
}
.lang-section {
  width: 6.5em !important;
  padding-left: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.input-search:focus {
  width: 100% !important;
}
.search {
  display: none;
}
dir.icon-search-header {
  display: flex;
  margin-left: 7em;
}
.slick-dots {
  position: absolute;
  bottom: 10%;
  left: 15%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 60px;
  height: 1.5px;
}
section#content-section {
  height: auto;
}
  .slick-list {
    height: auto;
}
.slider {
  height: auto;
}
.about-section {
  max-width: 20em;
  margin-top: 3.9em;
}
.about-image {
  height: 14.5em;
}
.about-image img {
  object-fit: cover;
}
.home-about-title h2 {
  font-size: 0.9em;
}
.home-about-desc {
  font-size: 0.7em;
  line-height: 15px;
}
.home-about-btn {
  margin-top: 0.6em;
}
.map-section {
  max-width: 20em;
}
.map-content {
  width: 100%;
}
.map-title h2 {
  font-size: 0.9em;
}
.map-desc {
  font-size: 0.7em;
  line-height: 15px;
}
.galery-section {
  margin-top: 1.2em;
  margin-bottom: 1em;
}
.galery-content {
  margin-bottom: 1.7em !important;
  margin-top: 0.1em;
}
.galery-image img {
  object-fit: cover !important;
}


/* ABOUT US */
.banner-about-section {
  max-width: none;
  width: 100%;
  margin-top: 2em !important;
}
.page-about-section {
  width: 100%;
  padding: 0;
  margin-top: 1em;
}
.page-about-title-us {
  margin-top: 25px;
}
.page-about-title-us h2 {
  font-size: 0.9em;
  letter-spacing: 1px;
}
.page-about-desc .desc-content p {
  font-size: 0.7em;
  line-height: 15px;
}
.page-about-goal {
  max-width: 100%;
}

.page-about-title-goal h2 {
  font-size: 0.9em;
}
.page-about-vision-image {
  max-width: 120px;
}
.page-about-mision {
  margin-top: 0;
  padding-top: 10px !important;
}
.page-about-mision-image {
  max-width: 120px;
}
.page-about-vision-title h2, .page-about-mision-title h2 {
    font-size: 0.9em;
}
.page-about-vision-desc, .page-about-mision-desc {
  font-size: 0.7em;
  line-height: 14px;
}
.milestone-section {
  padding: 0;
}
.company-history-section {
  margin-bottom: -1em;
  width: 100%;
  margin-top: 1em;
  margin-left: 8.5em;
}
.milestone-title {
  font-size: 0.9em;
  margin-top: 2em;
  letter-spacing: 0.7px;
  margin-left: 0;
  margin-right: 3.5em;
}
.milestone-timeline {
  left: 0;
  top: 65px;
  margin-top: 0;
}
.milestone-year-item.active {
  font-size: 0.9em;
}
.milestone-timeline::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 118%;
  background-color: #ddd;
  right: -17px;
  top: -28px;
}
.milestone-year-item.active::before {
  background-color: #CD5D27;
}
.milestone-year-item {
  font-size: 0.7em;
}
.milestone-content {
  display: none;
  margin-bottom: 0;
  background-color: #CD5D27;
  padding: 8px;
  border-radius: 0;
  color: white;
  margin-left: 40px;
}
.milestone-year-item::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #aaa;
  position: absolute;
  right: -21px;
  margin-bottom: -30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.milestone-content-container {
  margin-left: 1.5em;
  width: 16.7em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  height: 310px;
  max-height: 310px;
  overflow: hidden;
  padding: 0 !important;
}
.milestone-content.active {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  max-height: 320px;
  height: auto;
  overflow: auto;
  margin-left: 3em;
}
.milestone-nested {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  max-height: 310px;
  padding: 0;
  height: auto;
}
.milestone-nested-desc {
  flex: 1;
  font-size: 0.7em;
  display: block;
  letter-spacing: 1px;
  max-height: 310px;
  height: auto;
}
.milestone-img-container {
  flex: 0 0 10px;
  margin-right: 13px;
  background-color: white;
}
.milestone-img-container img {
  width: 3em;
  height: auto;
  border-radius: 5px;
}


/* ARTICLE & NEWS SECTION */
.content-news {
  flex-direction: column;
  margin-top: 4.5em !important;
  align-items: center;
  margin-bottom: 0;
}
.news-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20.3em;
  order: 2;
  margin-top: em;
  padding: 0.7em;
}
.news-image {
  width: 100% !important;
  height: 10em !important;
}
.news-wrap {
  margin-bottom: 20px;
  padding: 0.1em 0.1em 0.1em 0.1em;
  border: 1px solid #2e2e2e;
}
.news-news-content {
  padding: 7px;
  border: 1px solid #2e2e2e;
}
.news-wrap h2 {
  width: 100% !important;
  font-size: 0.9em;
  margin-left: 0.7em;
  padding-right: 7px;
}
.new-news {
  width: 20.3em !important;
}
.new-news h2 {
  font-size: 1em;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
  letter-spacing: 2px;
}
.new-news-title {
  font-size: 0.8em;
  color: #555;
  margin-bottom: 5px;
  letter-spacing: 0.7px;
  line-height: 17px;
  padding-left: 2.5em;
  position: relative;
  display: block;
}
.news-date {
  font-size: 0.7em;
  margin-top: 1px;
  margin-left: 0.8em;
}
.news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.paginationjs {
  margin-left: 0;
}


/* ARTICLES & NEWS SECTION SINGLE */
.related-news-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: start;
  gap: 13px;
}
.related-news-content {
  border: 1px solid #a7a7a7;
  margin-top: 13px;
  width: 0;
  flex-basis: calc(48.4% - 2px);
  box-sizing: border-box;
  height: auto;
}
.news-content-related {
  width: 80%;
  height: auto;
  margin-top: 90px;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  margin-top: 8em;
}
.news-title {
  width: auto;
  height: auto;
}
.news-title h1 {
  font-size: 0.9em;
  letter-spacing: 1px;
}
.related-news-image {
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.news-date-single {
  font-size: 0.7em;
  margin-top: 1px;
}
.news-image-single {
  width: 100%;
  height: 10em;
  margin-top: 1.2em;
}
.news-content-desc {
  margin-top: 35px;
  font-size: 0.85em;
}
.related-news {
  margin-top: 45px;
  width: 80%;
}
.h2-title-news {
  font-size: 0.9em;
  letter-spacing: 1px;
}
.related-news-title {
  padding: 8px;
  font-size: 0.7em;
  width: 100%;
}
.news-back {
  margin-top: 28px;
  margin-bottom: 0;
}


/* MEDIA SECTION */
.category {
  height: 37px;
  width: 70px;
  font-size: 0.8em;
}
.line .category:first-child {
  margin-left: -150px !important;
}
.page-gallery-section {
  margin-top: 0 !important; 
}
.page-gallery-section {
  padding-top: 30px !important;
}
.gallery-container {
  min-width: 0;
}
.gallery-content {
  flex-basis: 95% !important;
}
.video-wrapper {
  flex-basis: 95% !important;
}
.paginationjs {
  margin-top: 0;
}


/* CONTACT US SECTION */
.banner-contact-us {
  height: 9em;
  margin-top: 5.5em !important;
}
.banner-contact-us img {
  object-fit: cover;
}
.contact-info
{
    display: none;
}
.contact-page {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 1em;
}
.contact-page .contact-info-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 1em;
  margin-left: -10px;
}
.contact-page .contact-info-header h2 {
  font-weight: bold;
  font-size: 0.8em;
  width: auto;
}
.contact-page .contact-info-header p {
  margin-top: 0;
}
.form-container {
  border-bottom: 0px;
  padding-top: 0.8em;
margin-bottom: 0;
}
.contact-page .form-section .form-panel .form-label {
  font-size: 0.8em;
  margin-left: 3em;
}
.form-label {
  flex: 0 0 50px; 
  margin: 0;
  color: #808285;
}
.contact-page .form-section .form-panel {
  padding: 0;
  width: 18.7em;
}
.form-container.form-message {
  margin-top: 0.8em;
}
.contact-page .form-section .form-panel .form-input textarea {
  padding: 0px;
  border-bottom: 2px solid #bdbdbd !important;
  width: 12.5em;
}
.recaptcha-wrapper {
  margin-left: 2.49em;
}
.form-submit {
  margin-top: -1em;
  margin-left: 1.2em;
  padding-bottom: 1em;
}
.g-recaptcha {
  transform: scale(0.50);
  margin-top: 1.5rem;
}
.contact-page .form-section .form-panel .form-input input {
  border-bottom: 2px solid #bdbdbd !important;
  border: 0px;
  width: auto;
  width: 12.5em;
}
.contact-page .form-section .form-panel .form-submit a {
  color: #838282;
  border: 0.2px solid #b0aeae;
  font-size: 0.68em;
  padding: 3px 10px 1px 10px;
  text-decoration: none;
  letter-spacing: 0.8px;
  margin-left: 2em;
}
h2.headquarters, h2.representative-office {
  color: #7f7f7f;
  font-size: 0.9em;
  margin-top: 1.5em;
}
.address-section.reveal.fade-right {
  width: 95%;
  margin-bottom: 2em;
  margin-top: 1em;
}
.address-section .address-info h5 {
color: #808285;
font-size: 0.78em;
}
.contact-page .contact-info-header p, .address-section .contact-info p, .address-section .address-info p {
font-size: 0.78em;
}
.second-phone-section img {
  width: 1.25rem;
  height: 1.2rem;
  background-color: #696969;
}
.first-phone-section img {
  width: 1.16px;
  background-color: #696969;
}
.second-phone-section {
  display: flex;
  align-items: center;
}
.email-section {
  display: flex;
  align-items: center;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}
span.phone-section-phone {
  margin-left: 0.3rem;
  padding-top: 2px;
}
.address-map {
  margin-top: 1.5em;
}
#snackbar, #snackbar-exist, #snackbar-contact, #snackbar-career {
  padding: 0 2.5rem;
}
#snackbar h2, #snackbar-exist h2, #snackbar-contact h2, #snackbar-career h2 {
  font-size: 15px;
}
#snackbar p, #snackbar-contact p, #snackbar-career p {
  font-size: 12px;
}
#snackbar small, #snackbar-exist small, #snackbar-contact small, #snackbar-career small {
  font-size: 11px;
}
#snackbar img, #snackbar-exist img, #snackbar-contact img, #snackbar-career img {
  width: 300px;
  margin-bottom: 20px;
}
input.ng-pristine.ng-empty.ng-valid-email.ng-invalid.ng-invalid-required.ng-touched {
  width: 17.5em;
}
input.ng-pristine.ng-empty.ng-invalid.ng-invalid-required.ng-valid-minlength.ng-touched {
  width: 17.5em;
}
textarea.ng-pristine.ng-empty.ng-invalid.ng-invalid-required.ng-touched {
  width: 17.5em;
}
.network-point-section {
  margin-top: 3px;
}
.network-point-container {
  width: 80%;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 2em;
}
.network-point-content {
  min-height: 9em;
}
.network-point-title {
  margin-top: 0em;
  font-size: 1em;
  font-family: 'Rota-ExtraBold';
}
.network-point-header-title {
  font-size: 0.8em;
}
.network-point-body {
  font-size: 0.8em;
}


/* MULTIPLE PRODUCT */
.category-list, .category-all-product {
  display: none;
}
.dropdown-container {
  display: block;
  margin-left: 2em;
}
.dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  z-index: 1;
  font-size: 0.6em;
}
a.category-dropdown-product {
  text-decoration: none;
  color: #CD5D27;
  border: 1px solid black;
  padding: 5px 7px 5px 7px;
  font-weight: bold;
  font-size: 0.6em;
  width: 9.2em;
  min-width: 9.2em;
}
.dropdown-content a {
  display: block;
  padding: 7px 0 4px 7px;
  width: 9.2em;
  text-decoration: none;
  color: #504e4e;
  border: 1px solid #5e5e5e;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.category-section-product h2 {
  color: #CD5D27;
  font-size: 1rem;
  display: flex;
  align-items: center;
  margin-top: 0.5em;
  height: max-content;
}
.product-page {
  margin-top: 4.5rem;
  margin-bottom: 1em;
  width: 100%;
}
.product-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.product-section {
  flex-direction: column;
  width: 80%;
  max-width: none;
}
.category-section-product {
  max-width: none;
  overflow: hidden;
  flex-direction: row;
  height: 5em;
  max-height: 10em;
  align-items: center;
  margin-top: 4em;
}
.item-section {
  width: 100%;
  max-width: none;
  overflow: auto;
  border-left: none;
  padding-bottom: 0;
  padding-left: 0;
  overflow-y: scroll;
  margin-top: 2.5em;
}
.item-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  padding: 0;
  height: auto !important;
  margin-top: 1em;
  margin-bottom: 1em !important;
}
.item-content {
  height: 140px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.category-name-item {
  font-size: 1em;
}
.line-section-item {
  margin-top: 1rem;
}
.product-image {
  margin-top: 8px;
  width: 75px;
  height: 80px;
}


/* PRODUCT SINGLE */
.product-single-section {
  width: 80% !important;
  max-width: none !important;
  margin-top: 1.5rem !important;
}
.product-single-video {
  height: 10rem !important;
}
.product-single-title {
  font-size: 1em !important;
}
h2.overview {
  margin-top: 2rem !important;
  font-size: 1em !important;
  color: #CD5D27 !important;
  letter-spacing: 1.7px !important;
}
.desain {
  display: flex !important;
  height: 1.4rem !important;
  margin-top: 1rem !important;
}
.desain-eksterior {
  background-color: #d3d3d3 !important;
  margin-left: 0 !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 4rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.desain-eksterior h2 {
  font-size: 0.7em !important;
}
.desain-interior {
  margin-left: 1rem !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 4rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.desain-interior h2 {
  font-size: 0.7em !important;
}
.product-single-images {
  width: 22rem !important;
  height: 13rem !important;
  position: relative !important;
  overflow: hidden;
  overflow-x: auto !important;
}
.product-single-image {
  width: 100% !important;
  height: max-content !important;
  max-height: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 1rem !important;
  position: relative !important;
}
.interior-images {
  width: 135% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: relative !important;
}
.back {
  margin-bottom: 3em !important;
  margin-top: 0.1em !important;
}
.icon-plus {
  width: 1rem !important;
  height: 1rem !important;
}
.title-model-seri {
  margin-top: 0 !important;
  font-size: 0.9em  !important; 
}
.product-image {
  margin-top: 8px !important;
  width: 85px !important;
  height: 70px !important;
}
.item-container-single {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  position: relative !important;
  padding: 0 !important;
  height: max-content !important;
  max-height: 448px !important;
}
.item-content {
  height: 130px !important;
}
.item-section-seri {
  margin-top: 3em !important;
  overflow: auto !important;
  height: 20em;
}
.desain-eksterior.active, .desain-interior.active {
  background-color: #CD5D27 !important;
}
.product-model-no {
  font-size: 0.6em;
  color: #808285;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.icon-interior-1 { top: -99.8% !important; left: 65% !important; }
.icon-interior-2 { top: -102% !important; left: 108% !important; }
.icon-interior-3 { top: -35% !important; left: 77% !important; }
.icon-interior-4 { top: -36% !important; left: 119% !important; }
.icon-interior:hover .info-box,
.icon-eksterior:hover .info-box-eksterior {
  display: none;
}
.info-box,
.info-box-eksterior {
  display: none;
}
.info-box.show,
.info-box-eksterior.show {
  display: flex;
}
.info-box-eksterior {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  flex-direction: column !important;
  padding: 1em !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  border: none !important;
  border-radius: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important; 
}
.info-box-eksterior img {
  width: 80% !important;
  max-height: none !important;
  height: 50% !important;
}
.info-box-eksterior .info-description {
  margin-left: 0 !important;
  align-items: center !important;
  font-size: 1.2em !important;
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
}
.info-box {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  flex-direction: column !important;
  padding: 1em !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  border: none !important;
  border-radius: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important; 
}
.info-box img {
  width: 80% !important;
  max-height: none !important;
  height: 50% !important;
}
.info-box .info-description {
  margin-left: 0 !important;
  align-items: center !important;
  font-size: 1.2em !important;
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
}
.modal-close-mobile {
  display: block !important;
}
.product-modal-content {
  flex-direction: column-reverse;
  column-gap: 10px;
  width: 300px;
  height: max-content;
}
.modal-spesification {
  width: 100%;
  height: 50%;
  padding: 1rem 1rem 1rem 1rem;
}
.modal-image {
  width: 100%;
  height: 50%;
}
h2.modal-title-serial {
  font-size: 0.7em;
}
h2#modalSerialNo {
  font-size: 0.65em;
}
.line-product-modal1 {
  width: 266px;
  margin-top: 1.2em;
}
.modal-product-catalog {
  width: 266px;
  margin-top: 2rem;
}
.modal-product-order {
  width: 266px;
}
.product-modal {
  padding-top: 20px;
}


/* PAGE SEARCH SECTION */
.page-search-title1 {
  margin-top: 1.8em;
}
h1.page-search-title {
  font-size: 1em;
}
h1.page-search-keyword {
  font-size: 1em;
}
h1.title-news-related {
  font-size: 0.9em;
}
.page-search-container {
  width: 90%;
  padding: 1em 1em 0 1em;
  margin-bottom: 2em;
  margin-top: 1em;
}
.page-search-img {
  height: 10em;
}
.search-title {
  font-size: 0.8em;
}
.search-desc {
  font-size: 0.6em;
}
.footer-lines {
  margin-top: 0;
}
.footer-line {
  height: 0.2em;
}
.footer-section {
  width: 100%;
  padding: 0;
}
.footer-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-right: 14px;
}
.footer-item:nth-child(2) {
  margin-left: 0em;
  margin-top: -0.7em;
}
.footer-item:nth-child(3) {
  margin-left: 0em;
}
.footer-item:nth-child(4) {
  margin-left: 0em;
}
.footer-item:nth-child(5) {
  margin-right: 0;
  order: 6;
}
.footer-section .footer-item p {
  width: 130%;
}
.footer-item {
  padding: 0 10px 10px 10px;
}
.footer-item:nth-child(4) {
  order: 6;
}
.footer-item:nth-child(3) {
  order: 4;
}
.footer-item:nth-child(6) {
  order: 5;
}
.logo-footer {
  width: 90px;
}
.footer-item {
  padding: 0 10px 0px 25px;
}
.footer-item-logo {
  padding: 0 10px 0px 24px;
}
.scroll-to-top {
  right: 2rem;
}
}