:root {
  --color-menu-overlay: white;
  --bg-menu: #00f8f8;
  --color-menu-text: #000;
  --color-divider: #000000;
  --menu-line: #97fcea;
  --menu-bg: #7e7e7e;
  --main-cyan: #58c4b1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
nav {
    position: fixed;
    width: 100%;
    height: 80px; /* Fixed height for better control */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4) 10%,
      rgba(0, 0, 0, 0)
    );
    top: 0;
    left: 0;
    z-index: 1000;
    padding-left: 15px;
    padding-right: 15px;
  }
  
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.menu-open-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 35px;
  height: 25px;
  cursor: pointer;
  opacity: 0; /* Sembunyikan elemen secara default */
  transition: opacity 0.3s ease; /* Tambahkan transisi untuk efek halus */
  margin-right: 85px;
  pointer-events: auto;
}

.menu-open-btn.visible {
  opacity: 1; /* Tampilkan elemen saat kelas 'visible' ditambahkan */
  z-index: 1001;
}

.menu-open-btn:hover .menu-line::before {
  left: 0; /* Pindahkan garis tambahan ke dalam elemen saat hover */
  width: 100%;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.menu-line {
  width: 100%;

  height: 1.5px;
  background-color: white;
  position: relative; /* Penting untuk positioning pseudo-elemen */
  overflow: hidden; /* Mencegah pseudo-elemen meluap */
}

.menu-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* Mulai dari luar elemen */
  width: 100%;
  height: 100%;
  background-color: cyan; /* Warna garis tambahan */
  transition: left 0.3s ease;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
/* Styling menu-open-btn */
.logo-lux {
  height: auto;
  width: 150px;
  position: absolute; 
  /* Posisikan absolut relatif terhadap nav */
  left: 20px; /* Jarak dari kiri nav */
  top: 50%; /* Pusatkan vertikal */
  transform: translateY(-50%); /* Penyesuaian untuk pemusatan vertikal */
  pointer-events: auto;
  /* z-index: 1001; */
   /* Pastikan di atas elemen lain jika perlu */
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.logo {
    display: flex;
    justify-content: center; /* Center its children horizontally */
    align-items: center; /* Center its children vertically */
    position: relative; /* Needed for absolute positioning of logo-image */
    flex-grow: 1; /* Allow .logo to take available space between logo-lux and contact buttons */
  }
  /* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.menu-tabs {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 10px;
  justify-content: center; /* Center the li items */
  align-items: center;
  opacity: 1;
  transition: opacity 0.3s ease;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 2px rgba(0, 255, 255, 0.2);
  animation: glowBorder 4s infinite ease-in-out;
  z-index: 1002;
}

/* Pastikan opacity tetap 1 untuk konten tab */
.menu-tabs li {
  padding: 0 10px; /* Adjust spacing between tabs */
}

.menu-tabs a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 5px 10px;
  transition: color 0.3s ease;
}

.menu-tabs a:hover {
  color: cyan;
}

/* Saat scroll, fade logo masuk dan tab keluar */
.logo--scrolled .menu-tabs {
  opacity: 0;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.logo--scrolled .logo-image {
  opacity: 1;
}

.logo-image {
  width: 50px;
  height: 50px;
  background-image: url("../asset/images/logo-lux-aeternam.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.contact-us-btn-header,
.contact-us-btn-header-logo {
  padding: 10px 15px;
  border: 1px solid var(--menu-line);
  border-radius: 10px;
  background: linear-gradient(
      180deg,
      rgba(151, 252, 234, 0) 0%,
      rgba(151, 252, 234, 0.42) 100%
    ),
    rgba(151, 252, 234, 0.24);
  box-shadow: inset 0 0 12px rgba(151, 252, 234, 0.44);
  z-index: 1001;
  color: white;
  width: 112px;
  
}

.contact-us-btn-header:hover {
  background: linear-gradient(
      180deg,
      rgba(151, 252, 234, 0.2) 0%,
      rgba(151, 252, 234, 0.62) 100%
    ),
    rgba(151, 252, 234, 0.44);
  box-shadow: inset 0 0 15px rgba(151, 252, 234, 0.64);
  border-color: #97fcea; /* Opsi: bisa juga membuat border lebih terang */
}

.contact-us-btn-header-logo:hover {
  background: linear-gradient(
      180deg,
      rgba(151, 252, 234, 0.2) 0%,
      rgba(151, 252, 234, 0.62) 100%
    ),
    rgba(151, 252, 234, 0.44);
  box-shadow: inset 0 0 15px rgba(151, 252, 234, 0.64);
  border-color: #97fcea; /* Opsi: bisa juga membuat border lebih terang */
}

.contact-us-btn-header-logo ion-icon {
  font-size: 24px; /* Sesuaikan ukuran ikon di sini */
  vertical-align: middle; /* Memastikan ikon sejajar secara vertikal */
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/

.containermenu {
  width: 30%; /* Adjust as needed */
  height: 100%;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* Allows clicks to pass through initially */
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/

.menu-overlay {
  width: 100%;
  padding: 2em;
  background: var(--color-menu-overlay);
  border-radius: 6px;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  margin: 20px;
  height: 96vh;
  display: none;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.menu-nav {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1em;
  color: var(--color-menu-text);
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.menu-close-btn {
  cursor: pointer;
}

.menu-close-btn:hover {
  color: var(--main-cyan);
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.menu-cols {
  display: flex;
}

.menu-cols > div {
  flex: 1;
  padding: 4em 0;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.menu-link {
  position: relative;
  width: 100%;
}

.menu-link a {
  font-size: 30px;
  display: flex; /* Menggunakan Flexbox */
  align-items: center; /* Mengatur item secara vertikal di tengah */
  /* gap: 30px;  */
  /* Memberikan jarak 30px antar elemen flex (span) */
  text-decoration: none; /* Menghilangkan garis bawah default link */
  color: var(--color-menu-text); /* Pastikan warna teks tetap */
  /* margin-bottom: 20px; */
}

.menu-link span {
  width: 40px;
}

.menu-link a p {
  color: black;
}

.menu-link:hover:after {
  width: 100%;
}

.menu-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--bg-menu);
  transition: 0.5s;
  z-index: -1;
}

.menu-link:hover:before {
  width: 100%;
}

.menu-link:hover a p {
  color: white;
}

.menu-link span {
  width: 40px;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.menu-line-divider {
  width: 100%; /* Membuat garis sepanjang kontainer */
  height: 1px; /* Ketebalan garis */
  background-color: grey; /* Warna garis (sesuaikan sesuai kebutuhan) */
  margin-top: 0;
  margin-bottom: 20px;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
/* .has-submenu {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
} */
.has-submenu {
    position: relative; /* Keep this for future potential use or specific styling, but no longer for submenu absolute positioning */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
   /* Add some space below this item for general layout */
    /* Remove flex-wrap: wrap; if it's there to keep link and button on one line */
  }



.has-submenu:hover .submenu a:hover {
  /* Warna latar belakang saat hover */
  color: var(--bg-menu); /* Warna teks saat hover */
}
.has-submenu > a {
    flex-grow: 1; /* Allows the link to take available space */
    margin-right: 10px; /* Add some space between the link and button */
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.btn-what-we-do {
  position: relative;
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin-right: 10px;
  background-color: transparent;
  color: var(--color-menu-text);
  border: 1px solid var(--color-menu-text);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
}

.btn-what-we-do.active {
  transform: rotate(450deg);
  border-color: var(--main-cyan);
  color: var(--main-cyan);
}

.btn-what-we-do:hover {
  border-color: white;
  color: white;
  background-color: rgba(0, 188, 212, 0.1); /* Subtle background on hover */
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.submenu {
    max-height: 0;
    overflow: hidden;
    /* REMOVE these lines from .submenu */
    /* position: relative; */
    /* width: 100%; */ /* Will naturally take 100% width of parent if not absolute */
    /* z-index: 999999999; */ /* Not needed if not absolutely positioned for overlay */
  
    /* KEEP these lines */
    background: rgba(255, 255, 255, 1);
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    box-sizing: border-box;
  
    /* NEW: Add these to control placement within its parent */
    display: block; /* Ensure it behaves as a block element */
    clear: both; /* Ensures it starts on a new line after the button and link */
    width: 100%; /* Make it take full width of its parent (.has-submenu) */
  }

.submenu.active {
    max-height: 300px; 
   /* Atur ke tinggi yang cukup untuk semua item submenu Anda. Sesuaikan jika perlu. */
  opacity: 1; /* Submenu menjadi terlihat penuh */
  /* display: block; tidak lagi diperlukan karena max-height yang mengontrol visibilitas */
}

.submenu a {
  display: block;
  padding: 10px 20px;
  /* text-decoration: none; */
  color: black; /* Mengubah warna teks menjadi putih agar kontras dengan latar belakang merah tua */
  /* Anda sebelumnya menggunakan #333, yang mungkin sulit dibaca */
}

.submenu a:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Efek hover yang lembut */
  /* color: var(--main-cyan); /* Atau warna lain sesuai keinginan */
  color: var(
    --main-cyan,
    #00bcd4
  ); 
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.menu-item {
  transition: transform 0.3s ease;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.menu-footer {
  display: flex;
  justify-content: center; /* Pusatkan tombol secara horizontal */
  color: var(--color-menu-text);
  bottom: 0;
  /* position: absolute; */
  width: 100%; /* Pastikan footer memenuhi lebar menu-overlay */
  /* padding: 1em 2em;  */
  /* Tambahkan padding agar konten tidak menempel di tepi */
  box-sizing: border-box; /* Pastikan padding disertakan dalam lebar */
}

.menu-footer-copy {
  display: flex;
  justify-content: space-between;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/

.btn-contact-us {
  position: relative;
  border: 1px solid var(--color-menu-text);
  width: 100%; /* Tombol memenuhi lebar footer */
  padding: 1.25em 2.5em;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  text-align: center; /* Pusatkan teks di dalam tombol */
  box-sizing: border-box; /* Pastikan padding disertakan dalam lebar */
}

.btn-contact-us:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-menu-text);
  transition: 0.33 all;
  z-index: -1;
}

.btn-contact-us:hover a {
  color: var(--color-menu-overlay);
}

.btn-contact-us:hover:before {
  width: 100%;
}
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/
.blurred {
  filter: blur(5px); /* Sesuaikan nilai blur sesuai keinginan */
  pointer-events: none; /* Mencegah interaksi dengan elemen yang diblur */
}

.blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  backdrop-filter: blur(5px);
}

.blurred {
    filter: blur(5px);
  }
/* 
------------------------------------------------------
------------------------------------------------------ 
------------------------------------------------------ 
*/

@keyframes glowBorder {
  0% {
    box-shadow: 0 0 3px rgba(0, 255, 255, 0.1), 0 0 6px rgba(0, 255, 255, 0.05),
      0 0 9px rgba(0, 255, 255, 0.02);
  }
  50% {
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.15), 0 0 9px rgba(0, 255, 255, 0.1),
      0 0 12px rgba(0, 255, 255, 0.05);
  }
  100% {
    box-shadow: 0 0 3px rgba(0, 255, 255, 0.1), 0 0 6px rgba(0, 255, 255, 0.05),
      0 0 9px rgba(0, 255, 255, 0.02);
  }
}

/* -------------- */

/* Styling blurred untuk body saat menu terbuka */

@media (max-width: 1024px) {
  .menu-link a{
    font-size: 24px;
  }



}


/* @media (max-width: 900px) {
  .menu-overlay {
    height: 100vh;
    width: 40vh;
  }

  .menu-cols {
    display: block;
  }

  .menu-link a {
    font-size: 30px;
  }
} */

@media (min-width: 1024px) {
  /* Targeting larger desktops */
  /* Styles that apply to desktops in general, including 1920px */
  /* .weare h2 {
      font-size: 3rem;
    }
  
    .divisi-button-book {
      padding: 1rem 2rem;
      font-size: 1rem;
    } */
  /* 
    .logo{
        margin-left: -400px;
        display: flex;
    } */

  .contact-us-btn-header-logo {
    display: none;
  }
}

@media (max-width: 425px) {
  /* Targeting larger desktops */
  .menu-tabs {
    display: none;
  }

  .logo-lux {
    display: none;
  }

  .menu-open-btn {
    opacity: 1 !important; /* Override scroll-based visibility */
    margin-right: 65px;
  }

  .logo-image {
    opacity: 1 !important; /* Override scroll-based visibility */
  }
  /* 
      .menu-overlay{
        width: 0%;
        height: 120vh;
  overflow-x: hidden;
      } */

  .logo {
    margin-left: -40px;
    display: flex;
  }

  .menu-link a {
    font-size: 20px;
  }

  .contact-us-btn-header {
    display: none;
  }

  .contact-us-btn-header-logo {
    width: auto;
  }
  
  .containermenu {
    width: 70%; /* Adjust as needed */
  }

  /* nav {
        width: 50%;
    } */
  /*   
    .menu-tabs{
      display: none;
    } */
}