/* No additional CSS required for the basic responsive behavior */

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media screen and (max-width: 767px) {

/* ====================================================================================================
============ RESPONSIVE MENU FOR HEADER NAVBAR | ALL PAGES ============================================
==================================================================================================== */

  #menu {
    width: 100vw; /* Lebar penuh layar */
    padding: 20px; /* Kurangi padding untuk ruang yang lebih baik */
    padding-top: 70px; /* Kurangi padding top sesuai kebutuhan */
  }

  #menuToggle {
    top: 20px; /* Kurangi jarak dari atas */
    right: 20px; /* Kurangi jarak dari kanan */
  }

/* ====================================================================================================
============ TENTANG KAMI | index.html ================================================================
==================================================================================================== */

  .intro-text {
    font-size: 16px;
  }

/* ====================================================================================================
============ PRODUK SECTION | index.html ==============================================================
==================================================================================================== */

  .produk-section .row > div {
    margin-bottom: 1rem; /* Optional: Adds spacing between items when stacked */
  }

/* ====================================================================================================
============ IKLAN POPUP | index.html =================================================================
==================================================================================================== */

  .popup-container {
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow-y: auto; /* Ensure overflow is active if content exceeds viewport */
    justify-content: flex-start;
    box-sizing: border-box;
  }

  .popup-box {
    width: 100%; /* Full width for smaller screens */
    max-width: none; /* Remove max-width constraint */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: visible;
    height: max-content;
  }

  .popup-content form button {
    background-color: #ef3340;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 16px;
    width: 100%;
  }

  .popup-content {
    width: 100%;
    padding: 40px; /* Consistent padding for content spacing */
  }

  .dialog-close-button-1 {
    display: block; /* Show close button 1 */
  }

  .dialog-close-button-2 {
    display: none; /* Hide close button 2 */
  }
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media screen and (min-width: 768px) {

/* ====================================================================================================
============ FASILITAS SECTION | PERUMAHAN PAGES ======================================================
==================================================================================================== */

  .fasilitas-box {
    flex: 0 0 250px;
  }

/* ====================================================================================================
============ IKLAN POPUP | index.html =================================================================
==================================================================================================== */

  .popup-container {
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow-y: auto; /* Pastikan overflow aktif jika konten melebihi viewport */
    justify-content: flex-start;
    box-sizing: border-box;
  }

  .popup-box {
    width: 100%;
    max-width: 720px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: visible;
  }

  .popup-content form button {
    background-color: #ef3340;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 16px;
    width: 100%;
  }

  .popup-content {
    width: 100%;
    padding: 40px; /* Padding konsisten untuk jarak konten */
  }

  .dialog-close-button-1 {
    display: block; /* Tampilkan tombol tutup 1 */
  }

  .dialog-close-button-2 {
    display: none; /* Sembunyikan tombol tutup 2 */
  }
}

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

/* ====================================================================================================
============ CONTACT SECTION | index.html =============================================================
==================================================================================================== */

  .btn-section-contact {
    justify-content: flex-start !important; /* Align ke start pada layar kecil */
  }

  #contact .col-md-6 {
    margin-bottom: 35px;
  }

  #contact .row {
    display: flex;
    flex-direction: column;
  }
}

/* Media query untuk layar dengan lebar maksimum 991px */
@media screen and (max-width: 992px) {

/* ====================================================================================================
============ PRODUK SECTION | index.html ==============================================================
==================================================================================================== */

  .row.g-0 {
    margin: 0;
    padding: 0;
  }

  .col-3.p-0 {
    padding: 0;
    width: 1000px; /* Set width of column */
    margin: 0 auto; /* Center column */
  }

  .produk-section .row {
    flex-direction: column;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .produk-section .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }

  .produk-box {
    margin-left: auto;
    margin-right: auto;
    max-height: 250px;
    width: 100%;
  }

  .produk-box img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    display: block;
  }

  .col-3 .p-0 {
    width: 1000px;
  }

  #produk {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px; /* Sesuaikan dengan lebar maksimum yang diinginkan */
  }

/* ====================================================================================================
============ VISI & MISI | about.html =================================================================
==================================================================================================== */ 

  #vision-mission .vision-mission-item {
    flex-direction: column; /* Move text below image */
  }
  
  #vision-mission .image {
    flex: 0 0 100%; /* Full width image */
    margin-right: 0 !important; /* Remove right margin */
  }

  #vision-mission .image img {
    width: 100%; /* Ensure image fills the container */
    border-radius: 0; /* Optionally remove border-radius for full effect */
  }

  #vision-mission .content {
    margin-top: 20px; /* Add space between image and text */
  }

  .vision-mission-item .image {
    display: none;
  }
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media screen and (min-width: 992px) {

/* ====================================================================================================
============ IKLAN POPUP | index.html =================================================================
==================================================================================================== */

  .popup-container {
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow-y: auto; /* Pastikan overflow aktif jika konten melebihi viewport */
    justify-content: flex-start;
    box-sizing: border-box;
  }

  .popup-box {
    width: 100%;
    max-width: 720px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: visible;
  }

  .popup-content form button {
    background-color: #ef3340;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 16px;
    width: 100%;
  }

  .popup-content {
    width: 100%;
    padding: 40px; /* Padding konsisten untuk jarak konten */
  }

  .dialog-close-button-1 {
    display: block; /* Tampilkan tombol tutup 1 */
  }

  .dialog-close-button-2 {
    display: none; /* Sembunyikan tombol tutup 2 */
  }
}

/* Responsive Adjustments for screen width below 1024px and height below 600px */
@media screen and (min-width: 1400px) {

/* ====================================================================================================
============ IKLAN POPUP | index.html =================================================================
==================================================================================================== */

  .popup-container {
    flex-direction: row;
    height: 100vh;
    width: 100%;
    justify-content: center; /* Center vertically */
    box-sizing: border-box;
    padding: 60px 0; /* Margin from top and bottom of the viewport */
    overflow: hidden; /* Prevent scrolling within the popup */
  }

  .popup-box {
    width: 100%;
    max-width: 720px; /* Default max-width */
    /* Center horizontally */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .popup-content form button {
    background-color: #ef3340;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px; /* Default padding */
    font-size: 16px; /* Default font size */
    width: 100%;
  }

  .popup-content {
    width: 100%;
    padding: 40px; /* Default padding */
  }

  .dialog-close-button-1 {
    display: none; /* Show close button 1 */
  }

  .dialog-close-button-2 {
    display: block; /* Hide close button 2 */
  }

/* ====================================================================================================
============ FASILITAS SECTION | NLD 1.html, NLD 2.html, NLD 3.html ===================================
==================================================================================================== */

  #responsiveProgressBarKiano {
    display: none;
  }
}

/* CSS untuk tampilan responsif */
@media screen and (max-width: 576px) {

/* ====================================================================================================
============ FASILITAS SECTION | NLD 1.html, NLD 2.html, NLD 3.html ===================================
==================================================================================================== */

  .fasilitas-box img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }

  .img-fluid {
    max-width: 100%;
  }

  img, svg {
    vertical-align: middle;
  }

/* ====================================================================================================
============ TIPE RUMAH SECTION | PERUMAHAN PAGES =====================================================
==================================================================================================== */

  #responsiveProgressBar {
    display: none;
  }

/* ====================================================================================================
============ FOOTER ===================================================================================
==================================================================================================== */

  .footer .container {
      display: flex;
      flex-direction: column;
  }

  .footer .row > div {
      flex: none;
      width: 100%;
      order: initial; /* Urutan default */
  }

  .footer .social-media {
      order: 1;
  }

  .footer .company-info {
      order: 2;
  }

  .footer .links, .footer .services, .footer .support {
      order: 3;
  }
}

@media screen and (max-width: 575.98px) {

/* ====================================================================================================
============ FASILITAS SECTION | NLD 1.html, NLD 2.html, NLD 3.html ===================================
==================================================================================================== */

  .mt-0 {
    margin-top: 0 !important;
  }

  .fasilitas-box {
    flex: 0 0 100%; /* Pastikan elemen memenuhi 100% lebar kontainernya */
    height: 100%; /* Pastikan elemen memenuhi tinggi kontainernya */
    scroll-snap-align: start;
    position: relative; /* Untuk menempatkan elemen di dalam box secara benar */
  }

  .fasilitas-box img {
    width: 100%; /* Gambar akan memenuhi lebar fasilitas-box */
    height: 100%; /* Gambar juga akan memenuhi tinggi fasilitas-box */
    object-fit: cover; /* Gambar akan diatur untuk menyesuaikan area tanpa mengubah proporsi */
  }

  .svg-wrapper {
    position: absolute;
    top: 55%; /* Posisi dari atas */
    left: 50%; /* Posisi horizontal di tengah */
    transform: translateX(-50%); /* Memastikan SVG berada tepat di tengah */
    z-index: 10; /* Tetap di atas elemen lainnya */
    width: 100%; /* Opsional, sesuaikan dengan ukuran kontainer */
    text-align: center; /* Pastikan svg berada di tengah dalam wrapper */
  }

.text-fasilitas {
    position: absolute;
    bottom: 10px; /* Posisi teks di bagian bawah */
    left: 50%; /* Posisi horizontal di tengah */
    transform: translateX(-50%); /* Memastikan teks tepat di tengah */
    z-index: 9; /* Pastikan teks berada di bawah SVG */
    color: white;
    font-size: 16px;
    text-align: center;
    width: 100%; /* Memastikan teks mengambil lebar penuh */
  }

  .col-3.fasilitas-box {
    padding: 0;
    width: auto;
    margin: 0 auto;
  }

  /* Hide progress bar by default */
  #responsiveProgressBarKiano {
    display: none;
  }

/* ====================================================================================================
============ FASILITAS SECTION, BERITA SECTION | index.html ===========================================
====== TIPE RUMAH SECTION, FASILITAS SECTION, BERITA SECTION, CONTACT SECTION | PERUMAHAN PAGES =======
============ FASILITAS SECTION | TIPE RUMAH PAGES =====================================================
============ PENGHARGAAN & PENCAPAIAN | about.html ====================================================
==================================================================================================== */

  .custom-heading {
    text-align: center;
    font-size: 20px;
  }

/* ====================================================================================================
============ FASILITAS SECTION | index.html ===========================================================
==================================================================================================== */

  .large-font {
    font-size: 20px;
  }

/* ====================================================================================================
============ FASILITAS SECTION, TIPE RUMAH SECTION | PERUMAHAN PAGES ==================================
==================================================================================================== */

  .scroll-container {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  
/* ====================================================================================================
============ TIPE RUMAH SECTION | PERUMAHAN PAGES, TIPE RUMAH PAGES ===================================
==================================================================================================== */ 

  .card {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .section-gap {
    padding: 20px; /* Adjust the padding as needed */
  }

  /* Text adjustments */
  .vision-mission-title, .achievement-title {
    font-size: 18px; /* Adjust font size for titles */
    margin-left: 0; /* Remove extra margins on smaller screens */
  }

  .vision-mission-text, .achievement-subtitle {
    font-size: 14px; /* Adjust font size for text */
  }

  /* Adjust layout for vision & mission section */
  .vision-mission-item {
    flex-direction: column; /* Stack the image and content vertically */
  }
}

@media only screen and (max-width: 412px) {
  #about {
    margin-bottom: 1rem;
  }
  #produk {
    margin-top: 0.5rem;
  }
  
/* ====================================================================================================
============ BERITA SECTION | index.html, PERUMAHAN PAGES =============================================
==================================================================================================== */

  .custom-image {
    height: 300px; /* Sesuaikan dengan ukuran yang diinginkan */
    object-fit: cover; /* Menjaga proporsi gambar */
  }

/* ====================================================================================================
============ HERO SECTION - GAMBAR | PERUMAHAN PAGES, TIPE RUMAH PAGES, about.html ====================
==================================================================================================== */

  #hero-produk {
    padding: 0; /* Menghapus padding di kiri dan kanan */
    margin: 1px auto 20px; /* Jarak dari atas (untuk header), auto untuk center, dan bawah untuk menghindari tabrakan */
  }

  #hero-image-produk {
    width: 100%; /* Pastikan gambar memenuhi layar penuh */
    height: auto; /* Menjaga rasio gambar */
    margin-top: 0; /* Hapus margin top agar gambar sepenuhnya sesuai dengan layar */
    border-radius: 0; /* Hilangkan border-radius pada layar kecil */
  }

/* ====================================================================================================
============ HERO SECTION - GAMBAR | PERUMAHAN PAGES, TIPE RUMAH PAGES ================================
==================================================================================================== */

  .image-container-produk {
    width: 100%; /* Pastikan lebar gambar menutupi layar penuh */
    height: auto; /* Agar tinggi menyesuaikan secara proporsional */
    padding-top: 0; /* Menghapus padding di bagian atas untuk layar kecil */
    clip-path: none; /* Menghapus clip-path agar tidak memotong gambar */
    padding-top: 80px;
  }

/* ====================================================================================================
============ TIPE RUMAH SECTION | PERUMAHAN PAGES, TIPE RUMAH PAGES ===================================
==================================================================================================== */

  .card-img-top {
    max-height: 300px; /* Sesuaikan tinggi sesuai kebutuhan */
    object-fit: cover; /* Memastikan gambar tetap proporsional */
  }

  .card p {
    font-size: 16px; /* Ukuran teks yang lebih kecil */
  }

  .btn-type {
    font-size: 8px; /* Ukuran font tombol lebih kecil */
    padding: 3px 6px !important; /* Kurangi padding tombol */
  }

  .custom-btn-detail {
    font-size: 6px; /* Ukuran font lebih kecil */
    padding: 2px 4px !important; /* Kurangi padding tombol "Detail" lebih lanjut */
    width: 90px !important; /* Kurangi lebar tombol */
  }

  h3.custom-heading {
    text-align: left;
  } 

  h2.custom-heading {
    font-size: 20px; /* Perkecil judul */
  }

  #type {
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

/* ====================================================================================================
============ FASILITAS SECTION | index.html ===========================================================
==================================================================================================== */  

  .large-font {
    font-size: 20px;
  }

  .section-gap {
    padding: 20px 0; /* Kurangi padding pada section */
  }

  #fasilitas, #news {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

/* ====================================================================================================
============ BERITA SECTION | index.html, PERUMAHAN PAGES =============================================
==================================================================================================== */

  .custom-btn-berita {
    width: 160px !important; /* Mengurangi ukuran lebar tombol */
    height: 35px !important; /* Mengurangi ukuran tinggi tombol */
    padding: 3px 8px !important; /* Mengurangi padding tombol */
  }
}

@media (max-width: 992px) {
  .more-text {
    font-size: 45px !important; /* Kurangi ukuran font lebih kecil untuk layar 992px ke bawah */
    letter-spacing: -2px !important; /* Sesuaikan jarak antar huruf */
  }

  /* Atur ulang lebar box untuk screen dengan lebar 991px atau lebih kecil */
  #info-boxes .col-md-4 {
    flex: 0 0 48%; /* Fasilitas dan Rumah Tipe menempati 48% lebar kolom */
    max-width: 48%;
  }

  #info-boxes .flex-grow-1 {
    flex: 0 0 43%; /* Rumah Tipe lebih kecil (40% lebar kolom) */
    max-width: 43%;
  }

  /* Spesifikasi Hunian box tetap 100% width */
  #info-boxes .spesifikasi-hunian {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Kurangi jarak antar box */
  #info-boxes .ms-4 .row .col-md-12 {
    margin-bottom: 8px; /* Kurangi margin bawah antar box */
  }

  /* Pastikan Booking Box berada di bawah Rumah Tipe */
  #info-boxes .ms-4 .row {
    flex-direction: column;
  }

  #info-boxes .ms-4 .row .col-md-12:last-child {
    margin-top: 8px; /* Kurangi jarak antara box Rumah Tipe dan Booking */
  }
}

/* Media Query untuk layar dengan lebar 1199px atau lebih kecil */
@media (max-width: 1200px) {
  .more-text {
    font-size: 65px; /* Kurangi ukuran font untuk layar lebih kecil */
    letter-spacing: -5px; /* Sesuaikan jarak antar huruf */
  }
}

/* Media Query untuk layar dengan lebar 767px atau lebih kecil */
@media (max-width: 768px) {
  .more-text {
    font-size: 55px !important; /* Ukuran font yang lebih besar untuk layar 767px ke bawah */
    letter-spacing: -2px !important; /* Sesuaikan jarak antar huruf */
  }

  /* Fasilitas box tetap 100% width */
  #info-boxes .col-md-4 {
    flex: 0 0 100%; /* Fasilitas box 100% lebar */
    max-width: 100%;
  }

  /* Atur Rumah Tipe dan Booking box bersebelahan tanpa gap */
  #info-boxes .flex-grow-1 {
    flex: 0 0 100% !important; /* Set to 100% width */
    max-width: 100% !important; /* Ensure no max width limit */
    margin: 0; /* Remove margin */
    padding: 0; /* Remove padding */
  }

  #info-boxes .col-md-12 {
    flex: 0 0 100%; /* 100% width */
    max-width: 100%;
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove padding */
    margin-left: 0; /* Remove left margin */
  }

  .info-box {
    margin: 0; /* Ensure no margin on the info box */
    padding: 0; /* Remove padding if needed */
  }

  #info-boxes .row {
    margin: 0; /* Remove row margin */
    gap: 0; /* Remove gaps */
  }

  #info-boxes > div > div:nth-child(1) > div.col-md-4.mb-4 {
    margin-bottom: 0 !important;
  }

  #info-boxes > div > div:nth-child(1) > div.ms-4.flex-grow-1 {
    margin-left: 0 !important;
    width: auto !important;
  }

  #info-boxes > div > div:nth-child(1) > div.ms-4.flex-grow-1 > div > div.col-md-12.mb-4 > div {
    margin-bottom: 0 !important;
  }

  #info-boxes > div > div:nth-child(2) > div {
    margin-bottom: 0 !important;
  }

  .custom-heading-type {
    text-align: center;
  }
}

@media screen and (max-width: 576px) {
  #info-boxes > div {
    margin: 0 20px; /* Adjust the value as needed */
  }
}

@media screen and (max-width: 413px) {
  #info-boxes > div {
    margin: 0; /* Adjust the value as needed */
  }
}

.more-image {
  position: relative;
  display: inline-block;
}

.darkened-image {
  width: 100%;
  height: auto;
  filter: brightness(50%); /* Untuk membuat gambar lebih gelap */
}

.more-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 95px; /* Ukuran font default */
  color: white;
  font-family: "Poppins", sans-serif;
  letter-spacing: -10px; /* Mengurangi jarak antar huruf */
  max-width: 376px; /* Lebar maksimum 376px */
  width: 100%; /* Lebar responsif */
  text-align: center; /* Pusatkan teks */
}

/* Media Query untuk layar dengan lebar 1199px atau lebih kecil */
@media (max-width: 1199px) {
  .more-text {
    font-size: 65px; /* Ukuran font untuk layar 1199px ke bawah */
    letter-spacing: -5px; /* Sesuaikan jarak antar huruf */
  }
}

/* Media Query untuk layar dengan lebar 992px atau lebih kecil */
@media (max-width: 992px) {
  .more-text {
    font-size: 45px; /* Ukuran font untuk layar 992px ke bawah */
    letter-spacing: -2px; /* Sesuaikan jarak antar huruf */
  }
}

/* Media Query untuk layar dengan lebar 767px atau lebih kecil */
@media (max-width: 767px) {
  .more-text {
    font-size: 55px; /* Ukuran font yang lebih besar untuk layar 767px ke bawah */
    letter-spacing: -2px; /* Sesuaikan jarak antar huruf */
  }
}

@media screen and (max-width: 768px) {
  #contact {
    margin-bottom: 0;
  }
}

/* ====================================================================================================
============ CHATTBOT TEMPALTE ========================================================================
==================================================================================================== */

/* Responsive adjustments */
@media (max-width: 576px) {
  #chatbot-container {
    bottom: 90px;
    right: 15px;
  }
  
  .chat-bubble {
    width: 50px;
    height: 50px;
  }
  
  .chat-box {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    border-radius: 0;
    z-index: 10001;
    display: none; /* Tetap hidden secara default */
    flex-direction: column;
    padding-bottom: 60px !important; /* Space for navigation */
  }

  .chat-header {
    padding: 15px;
    height: 60px;
    flex-shrink: 0; /* Pastikan header tidak menyusut */
  }

  .chat-title h5 {
    font-size: 18px; /* Ukuran font diperbesar */
  }

  .chat-title p {
    font-size: 12px;
  }

  .chat-close-btn {
    font-size: 20px; /* Ukuran tombol close diperbesar */
    padding: 5px;
    z-index: 10002; /* Pastikan tombol close di atas semua elemen */
  }

  .chat-body {
    flex: 1; /* Ambil sisa ruang yang tersedia */
    padding: 15px !important;
    padding-bottom: 120px !important; /* Make space for input and navigation */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow-y: auto;
  }

  .message-form-container {
    position: fixed !important;
    bottom: 5px !important; /* Adjust this value based on your navigation height */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 10px 15px !important;
    background: white !important;
    border-top: 1px solid #e0e0e0 !important;
    z-index: 10002 !important; /* Ensure it's above other elements */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1) !important;
  }
  
  .message-input-group {
    flex: 1;
  }

  .message-input-group textarea {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  /* Make textarea more compact */
  #user-message {
    min-height: 40px !important;
    max-height: 80px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
  }

  /* Make send button more compact */
  .send-message-btn {
    padding: 8px 15px !important;
    height: 40px !important;
    font-size: 14px !important;
  }

  /* Sembunyikan tooltip di mobile */
  .chat-tooltip {
    display: none !important;
  }
  
  .whatsapp-float {
    bottom: 20px;
    right: 15px;
    width: 50px;
    height: 50px;
  }
}

/* For keyboard appearance */
@media (max-height: 500px) {
  .message-form-container {
    bottom: 0 !important;
    transform: translateY(0) !important;
  }
  
  .chat-body {
    padding-bottom: 80px !important;
  }
}

/* Animation for keyboard appearance */
@keyframes slideUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.keyboard-open .message-form-container {
  animation: slideUp 0.3s forwards;
}