@font-face {
    font-family: 'Gotham-book';
    src: url('assets/fonts/Gotham-Book.woff2') format('woff2'),
         url('assets/fonts/Gotham-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Gotham-book', sans-serif;
}

        .wa-float {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #25D366;
            color: #fff;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            text-align: center;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            transition: transform 0.3s;
        }

        .wa-float:hover {
            transform: scale(1.1);
        }

        .wa-float img {
            width: 35px;
            margin-top: 12px;
        }

        .wa-tooltip {
            position: absolute;
            top: -35px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .wa-float:hover .wa-tooltip {
            opacity: 1;
        }
        
.navbar {
    padding: 1rem 0;
}

.logo {
    max-height: 30px;
}

/* Melebarkan container navbar agar lebih ke kiri */
.navbar .container {
    max-width: 100%;
    padding-left: 50px; /* Menambah padding kiri agar lebih dekat ke tepi */
    padding-right: 50px; /* Menambah padding kanan untuk keseimbangan */
}

.navbar-nav {
    margin-left: 20px; /* Adjust this value to move the menu closer to the logo */
}

.navbar-light .navbar-nav .nav-link {
    color: black;
    font-size: 14px;
    margin-left: 15px;
}

.nav-link:hover {
    color: red;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa;
    color: red;
}

/* Ensure sub-menu is displayed on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: flex; /* Ensure the sub-menu is displayed as flex to make it horizontal */
}

/* Base dropdown menu styling */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    will-change: transform;
    margin-top: 0;
    border: none; /* Remove border */
    background-clip: padding-box;
    z-index: 1000;
    flex-direction: row; /* Ensure the sub-menu is horizontal */
    box-shadow: none; /* Remove box shadow */
    padding: 0; /* Remove default padding */
    border-radius: 0; 	
}

.dropdown-menu .dropdown-sub {
    font-weight: bold;
    font-size: 15px;
    width: 250px; /* Set fixed width */
    white-space: nowrap; /* Ensure the items do not wrap to the next line */
    padding-left: 25px; /* Add left padding */
}

/* Sub-menu items are bold, have padding, and set font size */
.dropdown-menu .dropdown-item {
    font-weight: bold;
    font-size: 15px;
    width: 250px; /* Set fixed width */
    white-space: nowrap; /* Ensure the items do not wrap to the next line */
    padding-left: 25px; /* Add left padding */
}

/* Ensure each dropdown-submenu container is displayed as a column */
.dropdown-submenu {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Sub-sub-menu styling */
.dropdown-submenu .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* Position it below the sub-menu item */
    left: 0;
    margin-left: 0;
    margin-top: 0;
    flex-direction: column; /* Ensure the sub-sub-menu is vertical */
    box-shadow: none; /* Remove box shadow */
    padding: 0; /* Remove default padding */
    min-width: 100%; /* Ensure the width adapts to the parent width */
}

.dropdown-submenu .dropdown-sub {
    font-weight: Bold;
    font-size: 14px;
    color : #212529;
    white-space: nowrap; /* Ensure the items do not wrap to the next line */
    padding-left: 25px; /* Add left padding */
}

/* Sub-sub-menu items are normal weight and have padding */
.dropdown-submenu .dropdown-item {
    font-weight: normal;
    font-size: 14px;
    white-space: nowrap; /* Ensure the items do not wrap to the next line */
    padding-left: 25px; /* Add left padding */
}

/* Display sub-sub-menu on hover */
.dropdown-submenu:hover .dropdown-menu {
    display: block;
}

/* Ensure dropdown-menu is not displayed by default */
.navbar-nav > li > .dropdown-menu {
    display: none;
}

/* Display sub-menu on hover */
.navbar-nav > li:hover > .dropdown-menu {
    display: flex; /* Ensure the sub-menu is displayed as flex on hover */
}

/* Styling for hovered dropdown items */
.dropdown-menu > .dropdown-item:hover {
    background-color: #f8f9fa;
    color: red;
}

/* Styling for hovered dropdown items */
.dropdown-menu > .dropdown-sub:hover {
    background-color: #f8f9fa;
    color: black;
}

/* Styling for hovered nav items */
.navbar-nav .nav-item:hover > .nav-link {
    color: red;
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba%280, 0, 0, 0.5%29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
}

.navbar-toggler.active .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba%280, 0, 0, 0.5%29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M7 7l16 16M7 23L23 7"/%3E%3C/svg%3E');
}

/* CSS untuk semua layar */
#hero-carousel .carousel-item {
    height: auto; /* Menyesuaikan tinggi carousel dengan gambar */
}

#hero-carousel .carousel-item img {
    width: 100%;
    object-fit: cover;
}

#hero-carousel {
    position: relative;
    z-index: 0;
}

#hero-carousel .carousel-indicators li {
    background-color: black;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

#hero-carousel .carousel-indicators .active {
    background-color: red;
    width: 30px;
    border-radius: 5px;
}

#hero-carousel .carousel-item {
    height: 500px;
}

#hero-carousel .carousel-item img {
    height: 100%;
    object-fit: cover;
}

/* Menghapus jarak antar section */
#product-slider {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

/* Menghapus jarak antar slider items dan mengatur lebar */
.slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%; /* Pastikan slider selebar section hero */
}

.slider {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.slider-item {
    min-width: 25%;
    box-sizing: border-box;
    padding: 0; /* Menghapus jarak antar slider items */
    position: relative;
}

.slider-item img {
    width: 100%;
    height: 500px; /* Tinggi gambar di mode desktop */
    object-fit: cover;
    border-radius: 0; /* Menghapus border radius jika ada */}

.slider-item .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

.prev,
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Footer Section */
.bg-custom {
  background-color: #f8f9fa;
  padding-top: 10px;
}

.location {
    margin: 5px 0;
    padding: 20px;
}

.headloc{
    margin-left: 35px;
	font-size: 18px;
	font-weight: bold;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.col-1-4 {
    width: 25%; /* Kolom 1 menjadi 25% */
	padding-left: 30px;
    padding-right: 20px;
}

.col-3-4 {
    width: 75%; /* Kolom 2 menjadi 75% */
    padding-left: 20px;
	padding-right: 30px;
}

.location-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.search-container {
    display: flex;
    align-items: center;
}

.search-container .location-input {
    width: 250px; /* Atur lebar text box menjadi 250px */
    margin-right: 10px; /* Jarak antara text box dan tombol */
	height: 45px; /* Atur tinggi input text */
    box-sizing: border-box; /* Menghindari penambahan padding/border ke ukuran total */
}

.search-btn {
    background-color: rgb(253, 80, 0); /* Warna background tombol */
    color: white; /* Warna teks tombol */
    border: none; /* Menghapus border default tombol */
    padding: 10px 20px; /* Padding dalam tombol */
    height: 40px; /* Set tinggi tombol sama dengan input text */
    cursor: pointer; /* Tampilkan kursor pointer saat hover */
    font-size: 14px; /* Ukuran font tombol, sesuaikan jika perlu */
    border-radius: 5px; /* Opsional: sudut border melengkung */
    display: flex; /* Menggunakan flex untuk menjaga ukuran tinggi tombol */
    align-items: center; /* Vertikal align center */
    justify-content: center; /* Horizontal align center */
    opacity: var(--tw-bg-opacity, 1); /* Menggunakan variabel untuk opacity */
}

.search-container .search-btn:hover {
    background-color: rgb(194, 65, 12); /* Warna background tombol saat hover */
    opacity: var(--tw-bg-opacity, 1); /* Menjaga opacity saat hover */
}

.address-box .row {
    background-color: #f0f0f0; /* Warna background abu-abu */
    border: 1px solid #ccc; /* Border 1px */
    padding: 20px; /* Padding 20px untuk kiri, kanan, atas */
    margin-bottom: 20px; /* Jarak antar baris */
    border-radius: 5px; /* Opsional: sudut border melengkung */
    /* display: flex;
    /* flex-wrap: wrap;  Membungkus elemen ke baris berikutnya jika diperlukan */
}

.address-box .address-item {
    flex: 1 1 100%; /* Membuat elemen address-item memenuhi lebar baris */
    font-size: 13px; /* Ukuran font 13px */
    margin-bottom: 5px; /* Jarak antar item di dalam row */
}

.address-box .address-item.bold {
    font-weight: bold; /* Bold untuk baris pertama dan kedua */
}

/* Styling untuk ikon peta */
.map-icon {
    float: right; /* Mengatur posisi ikon peta ke kanan */
    font-size: 16px; /* Ukuran ikon */
    color: #333; /* Warna ikon peta */
    margin-left: 10px; /* Jarak antara teks dan ikon */
}

.map-icon:hover {
    color: red; /* Mengubah warna ikon peta saat di-hover */
}

#map {
    width: 100%;
    height: 720px;
    background-color: #e0e0e0; /* Placeholder color before Google Map loads */
}


.footer-info p.title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 2px;
}

.footer-headings {
  font-size: 15px;
  font-weight: bold;
}

.footer-link {
      color: #000;
      text-decoration: none;
      display: block; /* Ensure the links are block elements */
      margin-bottom: 0px; /* Add margin-bottom to create space between footer links */
      font-size: 14px;
    }

.footer-link:hover {
  color: red;
}

footer img {
  /* max-width: 200px; */
}

footer .btn {
  margin-right: 5px;
}

/* Wrapper hero section */
.hero-about {
    position: relative;
    width: calc(100% - 40px); /* Lebar dikurangi total margin kiri dan kanan */
    height: 550px; /* Adjust height to fit more closely with the image ratio */
    margin: 0 20px; /* Margin kiri dan kanan sebesar 30px */
    overflow: hidden;
}


/* Gaya umum untuk hero image */
.hero-image {
    width: 100%;
    height: 100%;
    background-size: contain; /* Adjust to fit the whole image */
    background-position: center; 
    background-repeat: no-repeat;
    position: relative; 
}

/* Gambar spesifik untuk halaman 1 */
.page-about .hero-image {
    background-image: url('assets/img/hero-about1.jpg'); /* Gambar untuk halaman 1 */
}

/* Gambar spesifik untuk halaman 2 */
.page-prd .hero-image {
    background-image: url('assets/img/product.jpg'); /* Gambar untuk halaman 2 */
}

.page-wall .hero-image {
    background-image: url('assets/img/wallpanel1.jpg'); /* Gambar untuk halaman 2 */
}

.page-premier .hero-image {
    background-image: url('assets/img/premier.jpg'); /* Gambar untuk halaman 2 */
}

.page-luxure .hero-image {
    background-image: url('assets/img/luxure.jpg'); /* Gambar untuk halaman 2 */
}

.page-dluxure .hero-image {
    background-image: url('assets/img/daikenluxure.jpg'); /* Gambar untuk halaman 2 */
}

/* Styling untuk text yang ada di atas hero image */
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}

.hero-text h1 {
    font-size: 48px;
    margin: 0;
}

.hero-text p {
    font-size: 18px;
    margin-top: 10px;
}

/* Section Description */
.description {
    margin: 10px 40px 0 40px; /* Margin atas 10px, kiri-kanan 20px */
    padding: 0 50px;  /* Padding atas dan bawah 0, kiri dan kanan 20px */
}

.description-content h2 {
    font-size: 25px;
    color: #249BBB; /* Warna biru muda untuk judul */
    margin-bottom: 10px;
	text-align: center;
}

.description-content p {
    font-size: 16px;
    color: black;
    line-height: 1.5; /* Jarak antar baris teks */
	text-align: justify;
}

.about-section {
    padding: 30px; /* Optional: Menambahkan padding di section */
}

.about-img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    cursor: pointer;
}

#zoom-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 998;
}

.zoomed {
            position: relative;
            z-index: 1001;
            touch-action: none; /* Disable default touch actions */
            transform-origin: left center; /* Zoom towards the right */
}

/* Section Subproduct */
.subproduct-section {
    padding: 5px;
	justify-content: space-between; /* Berikan jarak antara kolom */
    flex-wrap: wrap; /* Pastikan elemen tidak melanggar batas dan tetap dalam satu baris */

}

/* Gaya untuk header di atas setiap kolom */
.subproduct-header {
    background-color: #330; /* Warna abu-abu gelap */
    color: white;          /* Huruf berwarna putih */
    padding: 10px;
    text-align: center;
    font-size: 11px;
    margin-bottom: 15px;    /* Jarak antara header dan konten di bawahnya */
    border-radius: 0px;     /* Sedikit melengkung pada sudut */
}


/* Unik untuk section subproduct */
.subproduct-row {
    display: flex;
    flex-wrap: wrap; /* Flexbox untuk tata letak */
    margin-bottom: 5px;
}

.subproduct-col {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
}

.product-img {
    width: 100%;
    height: auto; /* Menjaga proporsi gambar */
	padding-right:5px;
}

.caption {
    text-align: justify;
    font-size: 12px;
    margin-top: 5px;
	padding:0px 5px;
}

/* Flexbox untuk menempatkan caption dan gambar dalam kolom dengan lebar 50% */
.image-caption-wrapper {
    display: flex;
    justify-content: space-between; /* Atur jarak antar kolom */
    width: 100%;
}

.caption-col {
    width: 50%; /* Masing-masing kolom mengambil lebar 50% */
}

.image-col {
    width: 50%; /* Masing-masing kolom mengambil lebar 50% */
}

.subproduct-caption {
    font-size: 12px;
    text-align: justify;
    padding-right: 10px;
	padding-left: 5px;
	margin-bottom: 0px;
	
}

.subproduct-note {
    font-size: 10px; /* Ukuran lebih kecil */
    font-style: italic; /* Italic untuk teks dengan tanda * */
    margin-top: 1px; /* Jarak antara teks biasa dengan teks bertanda * */
	padding-left:3px;
	padding-right:3px;
}

/* Flexbox untuk col-wrapper */
.custom-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap; /* Membuat kolom tetap berada dalam satu baris */
}

/* Setiap kolom (col-wrapper) mengambil lebar yang sama (1/3 dari lebar kontainer) */
.col-wrapper {
    flex: 1 1 30%; /* Mengambil 30% lebar untuk setiap kolom (agar totalnya jadi 3 kolom) */
    box-sizing: border-box;
    padding: 2px;
}

/* Flexbox untuk gambar dan caption dalam satu kolom */
.col-wrapper {
    display: flex;
    align-items: flex-start; /* Vertikal align di atas (top) */
    justify-content: space-between;
}

/* Kolom gambar mengambil 20% dari lebar total */
.image-col-1 {
    flex: 0 0 40%; /* Lebar kolom gambar 20% */
    padding-right: 2px; /* Jarak antara gambar dan teks */
    box-sizing: border-box;
}

/* Kolom caption mengambil 80% dari lebar total */
.caption-col-1 {
    flex: 0 0 60%; /* Lebar kolom caption 80% */
}

/* Gaya gambar untuk menyesuaikan lebar kolom */
.image-col-1 img {
    width: 100%; /* Gambar memenuhi lebar kolom */
    height: auto; /* Menjaga proporsi gambar */
}

/* Gaya untuk teks caption */
.subproduct-caption-1 {
    font-size: 10px;
    line-height: 1.5;
    text-align: left;
    margin: 0; /* Hapus margin bawah jika diperlukan */
}

/* style untuk baris 3 kol 2 product-img*/
/* Setiap kolom memiliki lebar yang sama */
.col-wrapper-2 {
    flex: 1 1 30%; /* Setiap kolom mengambil 30% lebar (untuk total 3 kolom dengan jarak antar kolom) */
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column; /* Baris caption dan gambar dalam satu kolom */
    align-items: center; /* Pusatkan konten dalam kolom */
}

/* Gaya untuk caption */
.caption-col-2 {
    margin-bottom: 10px; /* Jarak antara caption dan gambar */
}

.subproduct-caption-2 {
    font-size: 14px;
    text-align: center; /* Agar caption berada di tengah */
}

/* Gaya untuk gambar */
.image-col-2 img {
    width: 100%;
    height: auto;
}

.image-col-3 img {
    flex: 1 1 50%;  /* Setiap kolom gambar mengambil 50% dari lebar total */
    padding: 10px;  /* Jarak antar gambar */
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
}

.headcapt {
	font-size: 14px;
    text-align: center; /* Agar caption berada di tengah */
}
/* end style baris 3 kol 2 */

.row {
    margin-bottom: 20px; /* Memberikan jarak antar baris */
}

/* Mengatur ukuran logo lainnya di footer */
.footer-logo{
    max-height: 40px;
    /* max-width: 200px; Ubah ukuran sesuai kebutuhan */
    height: auto;
    margin-bottom: 10px;
}

/* Mengatur ukuran logo lainnya di footer */
.footer-contact{
    /* max-height: 30px; */
    width: 300px; /* Ubah ukuran sesuai kebutuhan */
    height: auto;
    margin-bottom: 10px;
}
/* Mengatur ukuran logo marketplace di footer */
.marketplace-logos{
    /* max-height: 30px; */
    width: 150px; /* Ubah ukuran sesuai kebutuhan */
    height: auto;
    margin-right: 10px; /* Memberikan jarak antara logo */
}

/* Menyusun logo marketplace di dalam footer */
.footer .marketplace-logos {
    display: flex;
    align-items: center;
    justify-content: center; /* Rata tengah pada kolom */
}

.footer .marketplace-logos p {
    margin: 0;
    margin-right: 10px; /* Jarak antara teks dan logo */
}

.footer-contact p,
.footer-info p {
    margin: 0;
}

.text-center {
    text-align: center !important;
}

.footer-menu p {
    margin-bottom:0px;
}  

.footer-column {
      margin-bottom: 10px; /* Add margin-bottom to create space between columns */
}

/* Container for the event columns */
.event-row {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row */
    justify-content: space-between; /* Optional: Add space between the columns */
    margin-bottom: 5px;
}

/* Kolom event */
.event-col {
    flex: 1 1 48%; /* Setiap kolom mengambil hampir 50% lebar dengan sedikit margin */
    box-sizing: border-box;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 5px; /* Add margin between rows */
}

/* YouTube video container */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    width: 100%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid #A9A9A9; /* Sesuaikan warna dan ketebalan bingkai */
}

/* Event title */
.event-title {
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

/* Event description */
.event-description {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

@media (min-width: 992px) {
    #navbarNavMobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .d-lg-none {
        display: none !important; /* Menyembunyikan menu ponsel pada layar besar */
    }
    
    .d-lg-flex {
        display: flex !important; /* Menampilkan menu desktop pada layar besar */
    }
}

@media (max-width: 767.98px) {
    .nav-link {
        font-size: 12px;
        margin-left: 10px;
    }

    .navbar .container {
        padding-left: 10px; /* Mengurangi padding kiri pada mode ponsel */
        padding-right: 10px; /* Mengurangi padding kanan pada mode ponsel */
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        z-index: 1111;
    }

    .navbar-toggler {
        position: relative;
        z-index: 2;
    }
    
    .logo {
        max-height: 40px;
    }

    #hero-carousel .carousel-item img {
      height: 100%;
      object-fit: cover;
    }

    #hero-carousel .carousel-item img {
      height: 100%;
      object-fit: cover;
    }

    #hero-carousel .carousel-item {
       height: 100%;
    }

    .slider {
        flex-direction: column;
    }

    .slider-item {
        min-width: 100%;
    }

    .slider-item img {
        height: auto; /* Menyesuaikan tinggi gambar di mode ponsel */
    }
	
    .row {
        flex-direction: column;
    }

    .col-3-4 {
        order: -1; /* Pindahkan map ke atas */
        width: 100%; /* Lebar 100% untuk map */
        padding: 0; /* Hilangkan padding pada layar kecil */
    }

    .col-1-4 {
        width: 100%; /* Address-box penuh lebar layar */
        padding: 0; /* Hilangkan padding pada layar kecil */
    }

    #map {
        height: 400px;
    }	

  .footer-heading {
    font-size: 12px;
  }

  .footer-link {
    font-size: 12px;
  }

  .footer-logo {
    max-width: 200px;
  }

  .marketplace-logos {
    max-width: 160px;
  }

  .footer-contact{
    max-width: 250px;
  }

  footer img {
    max-width: 80px;
  }

  footer .btn {
    margin-right: 2px;
  }
 
  .footer-column {
      margin-bottom: 10px; /* Add margin-bottom to create space between columns */
  }
            
  .justify-center {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
  }

  .justify-center img {
      margin: 0.5rem;
  }
  
    #hero-img {
        content: url('assets/img/vhero-about.jpg'); /* Ganti gambar untuk ponsel */
        object-fit: cover; /* Memastikan gambar tidak terdistorsi */
    }
  
    #hero-img {
        content: url('assets/img/vhero-about.jpg'); /* Ganti gambar untuk ponsel */
		height: 850px; /* Tentukan tinggi gambar di mode ponsel */
        object-fit: cover; /* Memastikan gambar tidak terdistorsi */
    }
    
      .hero-about {
        margin: 0 20px !important; /* Tambahkan !important */
        width: calc(100% - 40px) !important; /* Tambahkan !important */
        height: 100vh; /* Set height to 100% of the viewport height */
        overflow: hidden; /* Hide any overflow content */
    }
    
    .hero-image {
        background-size: cover; /* Ensure the image covers the container */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent the image from repeating */
        width: 100%; /* Ensure the image width is 100% */
        height: 100%; /* Ensure the image height is 100% */
    }
    
    .page-about .hero-image {
        background-image: url('assets/img/vhero-about.jpg'); /* Gambar untuk ponsel di halaman 1 */
    }
	
    .page-prd .hero-image {
        background-image: url('assets/img/vhero-prd.jpg'); /* Gambar untuk ponsel di halaman 2 */
    }

    .page-wall .hero-image {
        background-image: url('assets/img/vhero-wallpanel.jpg'); /* Gambar untuk ponsel di halaman 2 */
    }
	
	.page-premier .hero-image {
        background-image: url('assets/img/vhero-premier.jpg'); /* Gambar untuk ponsel di halaman 2 */
    }
    
    .page-luxure .hero-image {
        background-image: url('assets/img/vhero-luxure.jpg'); /* Gambar untuk ponsel di halaman 2 */
    }
    
    .page-dluxure .hero-image {
        background-image: url('assets/img/vhero_daikenluxure.jpg'); /* Gambar untuk ponsel di halaman 2 */
    }
	
    
   .subproduct-row {
        flex-direction: column; /* Kolom kedua pindah di bawah kolom pertama */
    }

    .subproduct-col {
        width: 100%; /* Setiap kolom menggunakan 100% lebar layar pada ponsel */
    }
	
	    /* Atur ulang urutan elemen */
    .subproduct-col:nth-child(1) {
        order: 1; /* Baris 1 Kolom 1 */
    }
    .subproduct-col:nth-child(3) {
        order: 2; /* Baris 2 Kolom 1 */
    }
    .subproduct-col:nth-child(2) {
        order: 3; /* Baris 1 Kolom 2 */
    }
    .subproduct-col:nth-child(4) {
        order: 4; /* Baris 2 Kolom 2 */
    }
    .custom-row {
        flex-direction: column; /* Pada layar kecil, ubah layout menjadi vertikal */
    }

    .col-wrapper {
        flex: 1 1 100%; /* Setiap kolom mengambil lebar penuh di layar kecil */
    }

    .image-col-1 img {
        width: 100%; /* Gambar tetap menyesuaikan lebar penuh pada layar kecil */
    }
	
	.caption-col-1 {
        width: 100%; /* Caption mengambil 100% lebar di mode ponsel */
    }
    
  /* Section Description */
    .description {
    margin: 5px 5px 0 5px; /* Margin atas 10px, kiri-kanan 5px */
    padding: 0 50px;  /* Padding atas dan bawah 0, kiri dan kanan 20px */
}

 .description-content p {
    font-size: 12px;
}
  
  .hero-about {
        margin: 0 5px; /* Margin kiri dan kanan sebesar 5px */
        width: calc(100% - 10px); /* Lebar dikurangi total margin kiri dan kanan untuk mode ponsel */
    }
  
    
  .zoomed {
    transform: scale(4.0);
    z-index: 999;
    position: relative; /* Pastikan gambar tetap berada di atas overlay */
	transform-origin: left; /* Zoom membesar ke arah kanan */
 }
 
 .event-col {
        flex: 1 1 100%; /* Kolom mengambil lebar penuh pada layar kecil */
        margin-bottom: 20px;
    }
}