@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100..900&family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Signika:wght@300..700&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap");

/* 
"Outfit", sans-serif;
"Barlow Condensed", sans-serif;
"Saira Condensed", sans-serif;
"Sofia Sans", sans-serif;
"Signika", sans-serif;
*/

:root {
  --base-color: #ea881c;
  --second-color: #e36012;
  --third-color: #000000;
  --text-color: #473604;
  --very-light-base-color: #fbeee1;
  --bs-primary-rgb: 18, 127, 74;
  --bs-secondary-rgb: 170, 176, 188;
  --primary-font: "Signika", sans-serif;
  --alt-font: "Signika", sans-serif;
}

.bg-base-color {
  background: linear-gradient(
    135deg,
    #fcce46 0%,
    var(--base-color) 45% /* var(--second-color) 100% */
  );
}

.bg-base-color-top-bar {
  background: linear-gradient(
    135deg,
    #ba9411 0%,
    #e2b829 45% /* var(--second-color) 100% */
  );
}
.bg-base-gradient-diagonal {
  background: linear-gradient(135deg, var(--base-color), var(--second-color));
}

.bg-very-light-base-color {
  background-color: var(--very-light-base-color);
}

.bg-second-color {
  background-color: var(--second-color);
  /* background-color: #11aed6; */
}

.text-base-color {
  color: var(--text-color);
}

.text-second-color {
  color: var(--second-color);
}

.text-third-color {
  color: var(--third-color);
}

.btn-primary.btn-expand {
  color: var(--base-color);
}
.btn-primary.btn-expand:before {
  background-color: var(--base-color);
}

.nav-link {
  color: var(--third-color);
}

button.hamburger {
  color: black !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--primary-font);
  font-weight: 500;
  padding: 0;
  margin: 0;
  margin-bottom: 5px;
}

.dropdown-item:hover {
  color: var(--base-color);
}

/* Khusus untuk tampilan mobile (Offcanvas) */
@media (max-width: 991px) {
  /* Memaksa kontainer menu tetap di atas, bukan di tengah */
  .offcanvas-body {
    justify-content: flex-start !important;
    
    display: flex !important;
    flex-direction: column !important;
  }

  /* Memastikan list menu tidak bergeser saat konten di bawahnya terbuka */
  .navbar-nav {
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  /* Mengunci posisi dropdown agar tidak mendorong elemen ke atas */
  .dropdown-menu {
    position: static !important;
    transform: none !important;
    margin-top: 10px !important;
    background: transparent !important;
    border: 0 !important;
  }
  .dropdown-item {
    font-weight: 600;
    letter-spacing: -0.01rem;
    font-size: 12px;
    color: white;
    opacity: 0.7;
  }
}

.nav-link.dropdown-toggle.dropdown-toggle-split.btn-toggle-kategori {
  padding: 0;
  margin: 0;
  right: 10px !important;
  /* position: relative; */
  top: 0px !important;
}

/* Memberikan shadow tipis pada gambar bendera */
.lang-select img {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 2px; /* Sedikit lengkungan agar lebih halus */
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05); /* Border sangat tipis agar warna putih bendera tidak mati */
}

/* Efek saat bendera di-hover */
.lang-select:hover img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  opacity: 0.8;
}

/* Membuat separator "|" lebih rapi */
.text-muted {
  font-size: 14px;
  opacity: 0.5;
  margin-top: -2px; /* Penyesuaian posisi vertikal */
}

/* Menghilangkan banner Google Translate */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

/* Menghilangkan padding top pada body yang otomatis muncul */
body {
  top: 0px !important;
}

/* Menghilangkan tooltip saat hover teks yang diterjemahkan (opsional) */
.goog-te-balloon-frame {
  display: none !important;
}

/* Menghilangkan garis bawah pada teks yang diterjemahkan */
font {
  background-color: transparent !important;
  box-shadow: none !important;
}

.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none !important;
}

/*--------------------------------------------------------------
# Font
--------------------------------------------------------------*/
.primary-font {
  font-family: var(--primary-font);
}

.alt-font {
  font-family: var(--alt-font);
}

div {
  font-family: var(--primary-font);
}

.br-0 {
  border-radius: none !important;
}

/* Font weight */
.fw-100 {
  font-weight: 100 !important;
}

.fw-200 {
  font-weight: 200 !important;
}

.fw-300 {
  font-weight: 300 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.fw-900 {
  font-weight: 900 !important;
}

div {
  font-family: var(--primary-font);
  font-size: 14px;
}

ul {
  padding-left: 20px;
}

/*==========================================================================
* Button CSS
==========================================================================*/
.btn-base-color {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--base-color);
  --bs-btn-border-color: var(--base-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--base-color);
  --bs-btn-hover-border-color: var(--base-color);
  --bs-btn-focus-shadow-rgb: 92, 140, 229;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--base-color);
  --bs-btn-active-border-color: var(--base-color);
  --bs-btn-active-shadow: 0rem 0.25rem 0.75rem rgba(30, 34, 40, 0.15);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--base-color);
  --bs-btn-disabled-border-color: var(--base-color);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--base-color);
  --bs-btn-border-color: var(--base-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--base-color);
  --bs-btn-hover-border-color: var(--base-color);
  --bs-btn-focus-shadow-rgb: 92, 140, 229;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--base-color);
  --bs-btn-active-border-color: var(--base-color);
  --bs-btn-active-shadow: 0rem 0.25rem 0.75rem rgba(30, 34, 40, 0.15);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--base-color);
  --bs-btn-disabled-border-color: var(--base-color);
}

.build_button {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 3;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: 0.4s;
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  color: white;
  background: var(--base-color);
  border-radius: 50px 50px 50px 50px;
  padding: 8px 8px 8px 30px;
  gap: 20px;
  &::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 100%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--second-color);
    transform-origin: 100% 50%;
    transform: scale3d(1, 2, 1);
    transition:
      transform 0.4s,
      opacity 0.4s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
  }
  i {
    position: relative;
    z-index: 2;
    transition: 0.4s;
    color: white;
    background: #017eb9;
    font-size: 26px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px 50px 50px 50px;
  }
  &:hover {
    color: white;
    i {
      color: var(--second-color);
      background: white;
      transform: rotate(45deg);
    }
    &::before {
      transform: scale3d(10, 9, 1);
      transform-origin: 110% 55%;
    }
  }
}

.build_button-wa {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 3;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: 0.4s;
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  color: var(--base-color);
  background: var(--bs-white);
  border-radius: 50px 50px 50px 50px;
  padding: 8px 8px 8px 30px;
  gap: 20px;
  &::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 100%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--base-color);
    transform-origin: 100% 50%;
    transform: scale3d(1, 2, 1);
    transition:
      transform 0.4s,
      opacity 0.4s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
  }
  i {
    position: relative;
    z-index: 2;
    transition: 0.4s;
    color: white;
    background: #017eb9;
    font-size: 26px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px 50px 50px 50px;
  }
  &:hover {
    color: white;
    i {
      color: var(--second-color);
      background: white;
      transform: rotate(45deg);
    }
    &::before {
      transform: scale3d(10, 9, 1);
      transform-origin: 110% 55%;
    }
  }
}

.build_button-detail {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 3;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: 0.4s;
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  color: white;
  background: var(--base-color);
  border-radius: 50px 50px 50px 50px;
  padding: 8px 8px 8px 30px;
  gap: 20px;
  &::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 100%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--second-color);
    transform-origin: 100% 50%;
    transform: scale3d(1, 2, 1);
    transition:
      transform 0.4s,
      opacity 0.4s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
  }
  i {
    position: relative;
    z-index: 2;
    transition: 0.4s;
    color: white;
    background: #017eb9;
    font-size: 17px;
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px 50px 50px 50px;
  }
  &:hover {
    color: white;
    i {
      color: var(--second-color);
      background: white;
      transform: rotate(45deg);
    }
    &::before {
      transform: scale3d(10, 9, 1);
      transform-origin: 110% 55%;
    }
  }
}

/* BASE */
.flt-modern {
  position: fixed;
  left: 20px;
  display: flex;
  align-items: center;
  border-radius: 50px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  z-index: 999;
  overflow: hidden;
  transition: 0.4s;
}

/* POSITION */
.call-btn {
  bottom: 100px;
}
.wa-modern {
  bottom: 40px;
}

/* LINK */
.flt-modern a {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  padding: 10px 14px;
}

.btn.btn-outline-dark.rounded-pill:hover i{
  color: white !important;
}

/* ICON */
.flt-modern i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--base-color);
  transition: 0.3s;
}

/* TEXT */
.flt-modern span {
  margin-left: 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s;
  font-size: 14px;
}

/* HOVER EFFECT */
.flt-modern:hover span {
  opacity: 1;
  transform: translateX(0);
}

.flt-modern:hover {
  padding-right: 15px;
}

/* WA COLOR */
.wa-modern i {
  background: #25d366;
}

/* CALL COLOR */
.call-btn i {
  background: var(--second-color);
}

/* 🔥 ANIMASI MASUK */
.flt-modern {
  animation: slideInLeft 0.6s ease forwards;
}

/* DELAY */
.call-btn {
  animation-delay: 0.2s;
}
.wa-modern {
  animation-delay: 0.4s;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-80px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 🔥 ANIMASI FLOAT (NAIK TURUN HALUS) */
.wa-modern {
  animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* 🔥 HOVER SCALE */
.flt-modern:hover i {
  transform: scale(1.1);
}

/* MOBILE */
@media (max-width: 768px) {
  .flt-modern span {
    display: none;
  }
}
/* END WA/ APPO BTN / SCROLL TOP */

.btn-group-very-sm > .btn,
.btn-very-sm {
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 0.7rem;
  --bs-btn-border-radius: 0.4rem;
}

.btn-group-very-sm > .btn-icon.btn,
.btn-icon.btn-very-sm {
  padding-top: 5px;
  padding-bottom: 5px;
}

.btn-group-very-sm > .btn-icon.btn i,
.btn-icon.btn-very-sm i {
  font-size: 0.8rem;
}

/*==========================================================================
* Background Section
==========================================================================*/

.background-soft {
  background-color: #ddbc60;
}
.background-kategori {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #f8f9fa; /* Warna dasar light agar tirai putih terlihat */
  padding-top: 50px;
}

/* Ornamen Tirai Kiri */
.background-kategori::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px; /* Atur tinggi tirai */
  background: #418c6a03;
  z-index: 1;
  clip-path: polygon(0 0, 40% 0, 0 80%); /* Bentuk tirai kiri */
}

/* Ornamen Tirai Kanan */
.background-kategori::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 150px;
  background: #418c6a03;
  z-index: 1;
  clip-path: polygon(100% 0, 60% 0, 100% 80%); /* Bentuk tirai kanan */
}

/* Layer Background Gambar (Bertumpuk di bawah tirai) */
.bg-image-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: url("../Aset Desain/pakai/bg/6.webp"); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1; /* Di bawah konten utama */
  opacity: 0.06;
}

/* .background-welcome {
  position: relative;
  z-index: 1;
  overflow: hidden;

}

.background-welcome::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../Aset Desain/pakai/bg/7.webp");
  background-size: cover;
  z-index: -1;
  opacity: 1; 
  mix-blend-mode: overlay; 
} */
.background-welcome {
  position: relative;
  z-index: 1;
  background-color: #ffffff; /* Pastikan background dasar putih */
}

.background-welcome::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  
  background: url("../Aset Desain/pakai/bg/5.webp");
  background-size: cover;
  background-position: center;
  
  z-index: -1; 
  opacity: 0.15; /* Sedikit dinaikkan karena tertutup gradasi */
  mix-blend-mode: multiply; /* Berubah ke multiply agar menyatu dengan putih */

  /* EFEK GRADASI: Kiri Putih - Tengah Terang - Kanan Putih */
  /* Menggunakan Mask Image (Modern & Clean) */
  -webkit-mask-image: linear-gradient(to right, 
      transparent 0%, 
      black 20%, 
      black 80%, 
      transparent 100%
  );
  mask-image: linear-gradient(to right, 
      transparent 0%, 
      black 20%, 
      black 80%, 
      transparent 100%
  );
}

.background-layanan {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Warna dasar gelap agar saat loading tidak putih silau */
  background-color: #000000; 
}

/* Lapisan 1: Gambar Background (Paling Bawah) */
.background-layanan::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  background-image: url("../Aset Desain/pakai/bg/7.webp");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  /* Membuat gambar menyatu dengan warna gelap */
  filter: grayscale(100%) brightness(0.4);
  opacity: 0.5;

  z-index: -2;
}

/* Lapisan 2: Overlay Gradasi Gold & Black (Bertumpuk di Atas) */
.background-layanan::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  /* Gradasi Mewah: Hitam ke Emas Gelap ke Hitam Lagi */
  /* Sudut 135deg memberikan kesan kilauan diagonal yang lebih natural */
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(212, 175, 55, 0.2) 50%, 
    rgba(0, 0, 0, 0.95) 100%
  );

  /* Menambahkan efek pencahayaan ekstra */
  mix-blend-mode: multiply; 
  z-index: -1;
}

/* Opsional: Styling teks agar otomatis kontras */


.background-layanan .text-gold {
  color: #d4af37 !important;
}
.background-wisata {
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* background image */
.background-wisata::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgb(255, 255, 255) 0%,
      rgba(255, 255, 255, 0.363) 40%,
      rgb(255, 255, 255) 100%
    ),
    url("../Aset Desain/pakai/bg/1.webp");

  /* background-repeat: no-repeat; */
  background-size: contain;
  background-position: center;

  opacity: 0.5;
  filter: grayscale(100%); /* ini bikin jadi abu-abu */

  z-index: -1;
}

/* gradient dari bawah ke atas */
/* .background-keunggulan::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: url("../Aset Desain/pakai/bg/7.webp");
  background-repeat: no-repeat;
  z-index: -1;
} */

.background-keunggulan {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* background-color: #0b1c2d; */
}

/* BACKGROUND IMAGE */
.background-keunggulan::before {
  content: "";
  position: absolute;
  inset: 0;

  background: url("../Aset Desain/pakai/bg/11.webp") center/cover no-repeat;
  background-attachment: fixed;
opacity: 0.09;
  /* filter: grayscale(100%) brightness(1.1); */
  z-index: -2;
}


.background-wisata1 {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Gradasi multi-titik untuk efek pantulan logam */
  background: linear-gradient(
    -45deg,
    #000000 0%,
    #1a1a1a 25%,
    #ddbc60 50%,
    #ffd450 55%,
    #ddbc60 60%,
    #1a1a1a 85%,
    #000000 100%
  );
}

.background-testimoni {
  position: relative;
  z-index: 1;
  overflow: visible;
  background-color: #ffffff;
}

/* Gambar Lapisan Bawah (Gambar 15) */
.background-testimoni::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 1) 100%
    ), */
    url("../Aset Desain/pakai/bg/6.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 1; /* Sedikit lebih transparan untuk lapisan bawah */
  z-index: -1; /* Berada paling bawah */
}

/* Gambar Lapisan Atas (Gambar 4) */
.background-testimonia::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9) 0%,
      transparent 50%,
      rgba(255, 255, 255, 0.9) 100%
    ),
    url("../Aset Desain/pakai/bg/4.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: -1; /* Berada di atas gambar 15, tapi di bawah konten */

  /* Opsional: Memberikan efek percampuran warna yang estetik */
  mix-blend-mode: multiply;
}

.background-footer {
  position: relative;
  z-index: 1;
  /* Pastikan konten di dalamnya berwarna terang agar kontras */
  color: #ffffff; 
}

.background-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0; /* Tambahkan left agar presisi */
  right: 0;
  bottom: 0; /* Gunakan bottom agar full tanpa perlu height: 100% */
  width: 100%;
  height: 100%;

  background-image: url("../Aset Desain/pakai/bg/12.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  z-index: -1;
  opacity: 1;
}

.background-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  
  /* GRADASI: Atas pekat, Bawah tipis */
  /* to bottom berarti arah gradasinya ke bawah */
  /* Warna pertama (atas): Hitam Pekat (#000000) */
  /* Warna kedua (bawah): Hitam Transparan / Tipis (rgba(0,0,0,0.2)) */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgb(50 47 48 / 92%) 50%, rgb(50 47 48 / 88%) 100%);
  z-index: -1;
  opacity: 1;
}

.background-galeri {
  position: relative;
  z-index: 1;
  overflow: hidden;

  background: url("../Aset Desain/pakai/bg/12.webp") center/cover no-repeat;
  /* filter: grayscale(100%); */
}

/* 🔥 OVERLAY PUTIH (biar background lebih soft) */
.background-galeri::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(255, 255, 255, 0.95); /* atur opacity di sini */
  z-index: 0;
}

/* 🔴 SHAPE / WARNA BAWAH */
.background-galeri::before {
  content: "";
  position: absolute;
  top: 38%;
  right: 0;
  width: 100%;
  height: 45%;

  background: #dc0d0a29;

  z-index: 1;
  opacity: 1;
}

/* ✅ BIAR KONTEN TETAP DI ATAS SEMUA */
.background-galeri > * {
  position: relative;
  z-index: 2;
}

/* .background-testimoni {
  position: relative;
  z-index: 1;
  overflow: hidden;
} */

/* BACKGROUND IMAGE */
/* .background-testimoni::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../Aset Desain/pakai/bg/5.webp") center/cover no-repeat;
  z-index: -2;
} */

/* 🔥 OVERLAY HITAM */
/* .background-testimoni::after {
  content: "";
  position: absolute;
  inset: 0;

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

  z-index: -1;
}  */

/* BIAR KONTEN DI ATAS */
/* .background-testimoni > * {
  position: relative;
  z-index: 1;
} */

.background-cta {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.background-cta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(to top, rgb(255 255 255), rgb(0 0 0 / 0%)),
    url("../Aset Desain/pakai/bg/2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  z-index: -1;
  opacity: 0.03;
}

/*==========================================================================
* Navbar
==========================================================================*/
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  /* color: var(--base-color); */
  color:#cda51c;
}

.navbar-stick:not(.navbar-dark) {
  background: white;
}

.nav-link:focus,
.nav-link:hover {
  color: var(--base-color);
}

.navbar-text a,
.navbar-text a:focus,
.navbar-text a:hover {
  color: var(--base-color);
}

@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-brand {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Welcome Text */
.bg-dot.primary {
  background-image: radial-gradient(var(--base-color) 2px, transparent 2.5px);
}

/* Floating WA */

/* floating wa baru  */
:root {
  --wa-color: #25d366;
  --call-color: #dc3545;
}

.contact-hub-visible {
  position: fixed;
  left: 20px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
  font-family: "Poppins", sans-serif;
}

.hub-item-v {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 5px 8px 5px 5px; /* Padding kanan lebih lebar untuk teks */
  border-radius: 50px;
  text-decoration: none !important;
  color: #333 !important;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  animation: floatAnim 3s ease-in-out infinite; /* Animasi melayang */
}

/* Variasi Animasi Delay agar tidak barengan */
.hub-call-v {
  animation-delay: 1.5s;
}

.hub-icon-v {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  flex-shrink: 0;
}

.hub-wa-v .hub-icon-v {
  background: var(--wa-color);
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}
.hub-call-v .hub-icon-v {
  background: var(--call-color);
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}

.hub-label-v {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
}

.hub-title-v {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  display: block;
}

.hub-desc-v {
  font-size: 10px;
  color: #777;
  display: block;
}

/* Hover Effect */
.hub-item-v:hover {
  transform: scale(1.05) translateX(5px);
  background: #fafafa;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Keyframes Melayang */
/* @keyframes floatAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
} */

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .contact-hub-visible {
    left: 15px;
    bottom: 20px;
    gap: 8px;
  }
  .hub-item-v {
    padding: 6px 12px 6px 6px;
  }
  .hub-icon-v {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
  .hub-title-v {
    font-size: 11px;
  }
  .hub-desc-v {
    display: none;
  } /* Sembunyikan deskripsi kecil di HP agar tidak penuh */
}

/* floating wa baru  */

/* Navbar */
/* .nav-link {
    color: var(--bs-blue);
} */

/* CKE Editor*/
.description-list a {
  color: var(--main-color);
}

.description-list ul li {
  list-style: initial;
}

.description-list p strong {
  color: var(--black);
}

.description-list hr {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.header-title p strong {
  /* font-style: italic; */
  text-decoration: underline;
}

/* CTA Baru  */

.cta-glass-section {
  padding: 80px 0;
  background: #fcfcfc;
}

.cta-glass-card {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  padding: 60px;
  background: #000; /* Fallback */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.cta-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transition: 0.6s;
}

.cta-glass-card:hover .cta-card-bg {
  transform: scale(1.05);
}

.cta-glass-content {
  position: relative;
  z-index: 3;
}

.cta-badge {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  color: #fff;
  padding: 6px 15px;
  border-radius: 50px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  margin-bottom: 20px;
}

.cta-title {
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 15px;
  line-height: 1.2;
}

.cta-desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  max-width: 600px;
}

.btn-cta-white {
  background: #ffffff;
  color: #000 !important;
  padding: 15px 35px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cta-white:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
  background: #f0f0f0;
}

/* Dekorasi Animasi Cahaya */
.light-blob {
  position: absolute;
  width: 200px;
  height: 200px;
  background: var(--base-color, #007bff);
  filter: blur(80px);
  bottom: -50px;
  right: -50px;
  opacity: 0.6;
  z-index: 1;
}

@media (max-width: 768px) {
  .cta-glass-card {
    padding: 40px 25px;
  }
  .cta-title {
    font-size: 28px;
  }
}

/* CTA Baru  */

/* CTA  */
/* ===== CTA PREMIUM V2 STYLING ===== */
.cta-premium-v2 {
  padding: 120px 0;
  min-height: 500px;
  display: flex;
  align-items: center;
}

/* Overlay dari kiri (gelap) ke kanan (transparan) */
.cta-overlay-v2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(11, 28, 45, 0.95) 0%,
    rgba(11, 28, 45, 0.7) 40%,
    rgba(11, 28, 45, 0) 100%
  );
  z-index: 1;
}

.z-3 {
  z-index: 3;
}

/* Content Area */
.cta-content-v2 {
  padding: 20px 0;
}

.cta-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
  font-size: 14px;
  font-weight: 600;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Judul & Deskripsi */
.cta-premium-v2 h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Tombol Modern Booking */
.btn-modern-booking {
  display: inline-flex;
  align-items: center;
  background: #ff6d00; /* Warna Oranye Premium */
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  padding: 4px 4px 4px 25px; /* Padding kiri lebih besar */
  font-weight: 700;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 10px 25px rgba(255, 109, 0, 0.3);
  letter-spacing: 1px;
}

.btn-modern-booking .btn-text {
  margin-right: 15px;
}

.btn-modern-booking .btn-icon {
  width: 45px;
  height: 45px;
  background: #fff;
  color: #ff6d00;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
}

.btn-modern-booking:hover {
  background: #0b1c2d; /* Berubah jadi navy saat hover */
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.btn-modern-booking:hover .btn-icon {
  transform: rotate(360deg);
  background: #ff6d00;
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .cta-premium-v2 {
    padding: 80px 0;
    text-align: center;
  }
  .cta-overlay-v2 {
    background: rgba(11, 28, 45, 0.85); /* Full overlay di mobile */
  }
  .btn-modern-booking {
    margin: 0 auto;
  }
}

/* CTA MODERN */

.cta-modern {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 0;
  overflow: hidden;
}

.cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(11, 28, 45, 0.92),
    rgba(11, 28, 45, 0.75)
  );
}

/* BOX */

.cta-modern-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 50px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
}

/* TITLE */

.cta-modern-title {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}

/* DESC */

.cta-modern-desc {
  color: #e5e5e5;
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  max-width: 600px;
}

/* BUTTON */

.cta-modern-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--base-color);
  color: #fff;
  padding: 15px 28px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.35s;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.cta-modern-btn i {
  font-size: 18px;
}

.cta-modern-btn:hover {
  transform: translateY(-4px);
  background: #256eb5;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* RESPONSIVE */

@media (max-width: 991px) {
  .cta-modern-title {
    font-size: 28px;
  }

  .cta-modern-box {
    padding: 35px;
    text-align: center;
  }
}

/* CTA  */

.desc-cta p {
  margin-bottom: 0px;
}

/* Artikel */
article .artikel:hover .card-body a.btn-outline-primary {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

.truncate-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-text p {
  line-height: 1.6;
}

/* Detail Buku  */
.book-header-box {
  background: #1f2937;
  color: white;
  padding: 60px 0;
  margin-bottom: -50px;
}

.book-meta-card {
  background: white;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  padding: 35px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.badge-isbn {
  background: #f0f9ff;
  color: #0369a1;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid #e0f2fe;
}

/* Sticky Behavior */
.sticky-top-card {
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
  z-index: 10;
}

/* Marketplace Buttons Styling */
.btn-market {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 5px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  transition: all 0.3s ease;
  text-transform: uppercase;
  border-radius: 12px;
  text-decoration: none;
}

.btn-market:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  filter: brightness(1.1);
}

.btn-market i {
  font-size: 16px;
}

/* Brand Colors */
.bg-wa {
  background: var(--base-color);
  color: white !important;
}

.bg-shopee {
  background: transparent;
  color: #ef4444;
  border: 2px solid #ef4444;
}

.bg-tokopedia {
  background: transparent;
  color: #03ac0e;
  border: 2px solid #03ac0e;
}

.bg-tiktok {
  background: transparent;
  color: #000000;
  border: 2px solid #000000;
}

.price-text {
  color: var(--base-color, #ef4444);
  font-weight: 700;
}

.btn-market img {
  display: inline-block;
  margin-right: 6px;
}

/* Detail Buku  */

/* Kirim Naskah  */
/* Sticky Container Styling */
.sticky-step-container {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  z-index: 10;
}

.header-step-title {
  border-left: 4px solid var(--base-color, #ff8520);
  padding-left: 15px;
  margin-bottom: 20px;
}

/* Step Card Styling */
.step-item-card {
  background: #ffffff;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  border: 1px solid #f1f5f9;
  position: relative;
  overflow: hidden;
  align-items: flex-start !important;
}

.step-item-card:hover {
  transform: translateX(10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border-color: var(--base-color, #ff8520);
}

.step-number {
  font-size: 40px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.05);
  position: absolute;
  top: 10px;
  right: 20px;
  line-height: 1;
}

.step-icon-wrapper {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 12px;
  margin-right: 20px;
  transition: 0.3s;
}

.step-item-card:hover .step-icon-wrapper {
  background: var(--base-color, #ff8520);
}

.step-icon-wrapper img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transition: 0.3s;
}

.step-item-card:hover .step-icon-wrapper img {
  filter: brightness(0) invert(1);
}

.step-title {
  font-weight: 700;
  margin-bottom: 5px;
  color: #1e293b;
}

/* Deskripsi Limit Logic */
.step-desc-limit {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.step-desc.expanded {
  display: block !important;
  -webkit-line-clamp: unset !important;
}

.step-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  transition: all 0.5s ease;
}

.btn-read-more {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--base-color, #ff8520);
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
}

.btn-read-more:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .sticky-step-container {
    position: relative;
    top: 0;
    margin-bottom: 40px;
  }
}
/* Kirim Naskah  */

/* Page Header  */
/* =========================
HEADER SPLIT MODERN
========================= */
/* Wrapper Utama dengan Background Abu-abu Tipis */
.breadcrumb-container {
  background-color: #f5f5f5;
  /* Warna abu-abu tipis profesional */
  border-bottom: 1px solid #eeeeee;
}

/* Styling List Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  padding: 0;
  background: transparent;
}

/* Kustomisasi Ikon Pemisah (Angle Right) */
.breadcrumb-item + .breadcrumb-item::before {
  content: "\f105";
  /* FontAwesome Angle Right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #bbbbbb;
  font-size: 11px;
  padding-right: 0.75rem;
}

/* Link Home / Non-Active */
.breadcrumb-item a {
  color: #777777;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
  color: var(--base-color) !important;
  transform: translateX(2px);
  /* Efek geser kecil saat hover */
}

/* Teks Halaman Aktif */
.breadcrumb-item.active {
  color: var(--base-color);
  /* Menyesuaikan warna brand Karcher */
  font-size: 13.5px;
  font-weight: 600;
}

/* Responsif Mobile */
@media (max-width: 768px) {
  .breadcrumb-container {
    padding: 8px 0;
  }

  .breadcrumb-item {
    font-size: 12px;
  }
}
/* Page header  */

/* header page */
.image-wrapper-header.bg-overlay:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  /* z-index: 1; */
  /* border-radius:20px; */
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgb(16 26 37), rgb(0 0 0 / 32%));
}

.image-wrapper.bg-overlay:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* border-radius: 20px; */
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgb(35, 35, 36), rgb(0 0 0 / 32%));
}

/* Rental mobil */
.rental-mobil:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-blue-rgb), var(--bs-bg-opacity)) !important;
}

.rental-mobil:hover .card-body a.btn-blue {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--bs-navy) !important;
}

.rental-mobil:hover .card-body h2 a,
.rental-mobil:hover .card-body h3,
.rental-mobil:hover .card-body h3 span {
  color: #fff !important;
}

/* Paket Wisata */
.start-badge {
  background-color: var(--third-color);
  padding: 4px 10px;
  border-radius: 30px;
  color: rgb(54, 54, 54);
  font-size: 12px;
}

.destinasi-scroll {
  max-height: 120px;
  overflow-y: auto;
  padding-right: 5px;
}

/* hilangkan bullet bawaan */
.destinasi-scroll ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* item list */
.destinasi-scroll li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-size: 14px;
  color: #555;
}

/* icon payung */
.destinasi-scroll li::before {
  content: "\f5ca";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--base-color);
  font-size: 13px;
}

/* custom scrollbar */
.destinasi-scroll::-webkit-scrollbar {
  width: 5px;
}

.destinasi-scroll::-webkit-scrollbar-thumb {
  background: var(--base-color);
  border-radius: 10px;
}

.destinasi-scroll::-webkit-scrollbar-track {
  background: #f2f2f2;
}
.paket-wisata:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-blue-rgb), var(--bs-bg-opacity)) !important;
}

.paket-wisata:hover .card-body .destination {
  background-color: #558df3 !important;
  color: #fff !important;
}

.paket-wisata:hover .card-body a.btn-blue {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--bs-navy) !important;
}

.paket-wisata:hover .card-body h2 a {
  color: #fff !important;
}

.paket-wisata:hover .card-body h3 span {
  color: #fff !important;
}

.paket-wisata:hover .card-body h3 {
  color: #fff !important;
}

/*--------------------------------------------------------------
  02. Colors & Variables
----------------------------------------------------------------*/
:root {
  --themecolor: #ff7b29;
  --themecolor_secondary: #f16319;
  --theme_black: #06082d;
  --theme_white: #ffffff;
  --themecolor_bg: #f16319;
  --third_bg: #ff4a37;
  --theme_bg_primary: #f8f8f8;
  --theme_bg_secondary: #101010;
  --theme_bg_dark: #06082d;
  --main-header-border-color: #ececec;
  --theme_dark_border: #373747;
  --theme_light_border: #ececec;
  --theme_light_heading_text: #101010;
  --theme_dark_heading_text: #101010;
  --theme_light_body_text: #373747;
  --theme_dark_body_text: #c1c1c1;
  --theme-light-heading-1-font-color: #06082d;
  --theme-light-heading-2-font-color: #06082d;
  --theme-light-heading-3-font-color: #06082d;
  --theme-light-heading-4-font-color: #06082d;
  --theme-light-heading-5-font-color: #06082d;
  --theme-light-heading-6-font-color: #06082d;
  --theme-light-paragraph-font-color: #373747;
  --theme-light-main-nav-font-color: #373747;
  --theme-light-span-font-color: #373747;
  --theme-light-i-font-color: #373747;
  --theme-light-body-font-color: #373747;
  --theme-light-link-text-font-color: #373747;
  --theme-light-button-font-color: #373747;
  --theme-light-blockquote-font-color: #373747;
  --theme-light-li-font-color: #373747;
  --theme-dark-heading-1-font-color: #ffffff;
  --theme-dark-heading-2-font-color: #ffffff;
  --theme-dark-heading-3-font-color: #ffffff;
  --theme-dark-heading-4-font-color: #ffffff;
  --theme-dark-heading-5-font-color: #ffffff;
  --theme-dark-heading-6-font-color: #ffffff;
  --theme-dark-paragraph-font-color: #ffffff;
  --theme-dark-main-nav-font-color: #ffffff;
  --theme-dark-span-font-color: #ffffff;
  --theme-dark-i-font-color: #ffffff;
  --theme-dark-body-font-color: #ffffff;
  --theme-dark-link-text-font-color: #ffffff;
  --theme-dark-button-font-color: #ffffff;
  --theme-dark-blockquote-font-color: #ffffff;
  --theme-dark-li-font-color: #ffffff;
}

/*--------------------------------------------------------------
  03. Common Settings
----------------------------------------------------------------*/
:root {
  --theme-transition: all 0.4s ease;
  --header-height: 100px;
  --offcanvas-toggle-bg: #f8f8f8;
  --offcanvas-toggle-Padding: 30px;
  --offcanvas-toggle-color: #010101;
  --button-background-color: #ff4a37;
  --button-text-color: #ffffff;
  --button-padding: 16px 32px;
  --button-gap: 10px;
  --button-border-radious: 0px;
  --button-border: 0px;
  --social-icon-gap: 5px;
  --social-icon-padding: 12px 15px 10px 15px;
  --social-icon-color: #010101;
  --social-icon-bg-color: #f8f8f8;
  --social-icon-bg-hover-color: #ff4a37;
  --social-icon-color: #010101;
  --social-icon-hover-color: #ffffff;
  --social-darktheme-icon-bg-color: #373747;
}

/* Text Underline Animation */
.cs-text_b_line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cs-text_b_line i {
  color: var(--base-color);
  line-height: 0px;
}

.cs-text_b_line span {
  display: inline-block;
  position: relative;
  color: var(--theme_black);
}

.cs-text_b_line.cs_white_color span {
  color: var(--theme_white);
}

.cs-text_b_line.cs_white_color i {
  color: var(--theme_white);
}

.cs-text_b_line span:before {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s ease-out;
}

.cs-text_b_line:hover span::before {
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/*--------------------------------------------------------------
  22. Project Case study
----------------------------------------------------------------*/
.project-masonry {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-masonry .cs-project-item {
  overflow: hidden;
  transition: transform 0.3s;
}
.project-masonry .cs-project-item .cs-project-item-content-in {
  position: relative;
}
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data {
  position: absolute;
  width: 90%;
  height: 90%;
  padding: 40px;
  bottom: 5%;
  top: 5%;
  right: 5%;
  left: 5%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 0.4s ease-in-out;
  color: var(--theme_white);
}
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data
  .tag-item {
  margin-bottom: 15px;
}
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data
  h4,
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data
  h5 {
  color: var(--theme_white);
  margin-bottom: 10px;
  transition: var(--theme-transition);
  transform-origin: left;
}
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data
  h4:hover,
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data
  h5:hover {
  transition: var(--theme-transition);
  transform: scaleX(0.95);
  font-weight: 400;
}
.project-masonry
  .cs-project-item
  .cs-project-item-content-in:hover
  .project-meta-data {
  opacity: 1;
}
.project-masonry .cs-project-item img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 1400px) {
  .project-masonry .tag-item {
    display: none;
  }
  .project-masonry
    .cs-project-item
    .cs-project-item-content-in:hover
    .project-meta-data {
    width: 100%;
    height: 100%;
    padding: 30px;
    bottom: 50px;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme_black);
  }
}
@media screen and (max-width: 1199px) {
  .projects-list .project-item .project-item-in img {
    width: 100vw;
  }
  .project-masonry {
    display: flex;
    flex-wrap: wrap;
    max-width: 960px;
    margin: auto;
  }
  .project-masonry .cs-project-item.first {
    width: 50%;
  }
  .project-masonry .cs-project-item.first .cs-project-item-content-in img {
    height: 450px;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .project-masonry .cs-project-item.second {
    width: 50%;
  }
  .project-masonry .cs-project-item.second .cs-project-item-content-in img {
    height: 450px;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .project-masonry .cs-project-item.third {
    display: flex;
    width: 100%;
  }
  .project-masonry .cs-project-item.third .cs-project-item-content-in img {
    height: 400px;
    -o-object-fit: cover;
    object-fit: cover;
  }
}
@media screen and (max-width: 700px) {
  .project-masonry .cs-project-item.first {
    width: 100%;
  }
  .project-masonry .cs-project-item.first .cs-project-item-content-in img {
    max-height: 350px;
  }
  .project-masonry .cs-project-item.second {
    width: 100%;
  }
  .project-masonry .cs-project-item.second .cs-project-item-content-in img {
    max-height: 350px;
  }
  .project-masonry .cs-project-item.third {
    width: 100%;
  }
  .project-masonry .cs-project-item.third .cs-project-item-content-in img {
    max-height: 350px;
  }
}
.cs-border-pr {
  height: 100%;
  width: 1px;
  background-color: var(--base-color);
  margin: auto;
}

.process-item {
  padding: 40px;
  background: var(--theme_bg_primary);
  border-left: 3px solid var(--base-color);
}

.p-info-item {
  margin-bottom: 15px;
}
.p-info-item p {
  margin: 0px;
}
.p-info-item h6 {
  font-size: 18px;
}

.project-info {
  border-left: 1px solid var(--theme_white);
  padding-left: 20px;
}

.wcu-item {
  padding: 50px;
}

.project-item {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}
.project-item .project-item-in {
  position: relative;
  overflow: hidden;
}
.project-item .project-item-in img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
}
.project-item .tag-item {
  margin-bottom: 15px;
  opacity: 0.8;
}
.project-item .tag-item:hover {
  opacity: 1;
}
.project-item h5,
.project-item h4 {
  transition: var(--theme-transition);
  margin-bottom: 10px;
}
.project-item h5:hover,
.project-item h4:hover {
  color: var(--base-color);
  transition: var(--theme-transition);
}
.project-item .project-item-text {
  position: absolute;
  bottom: 0%;
  left: 30%;
  transform: translate(0%, 0%) scale(0.9);
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transition: var(--theme-transition);
  width: 90%;
  background: var(--theme_white);
}
.project-item:hover .project-item-in img {
  transform: scale(1.1);
}
.project-item:hover .project-item-text {
  transform: translate(-10%, -20%) scale(1);
  opacity: 1;
  visibility: visible;
}
.project-item:hover .project-item-text .cs-text_b_line i {
  transform: translateX(5px);
}
@media screen and (max-width: 500px) {
  .project-item:hover .project-item-text {
    transform: translate(0%, -5%) scale(1);
  }
}

@media screen and (max-width: 991px) {
  .project-item .project-item-text {
    width: 100%;
    padding: 25px;
    left: 0px !important;
    bottom: 0px;
  }
  .project-item:hover .project-item-text {
    transform: translate(0%, -5%) scale(1);
    bottom: 0px;
  }
}

/*--------------------------------------------------------------
  22. Service / Keunggulan
----------------------------------------------------------------*/
.single-service-one {
  background: #1e1e20;
  padding: 40px;
  border-radius: 10px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-service-one {
    padding: 20px;
  }
}
@media only screen and (max-width: 575px) {
  .single-service-one {
    padding: 15px;
  }
}
.single-service-one .water-mark {
  color: #28282e;
  position: absolute;
  right: 40px;
  top: 75px;
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 700;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-service-one .water-mark {
    font-size: 24px;
  }
}
@media only screen and (max-width: 479px) {
  .single-service-one .water-mark {
    display: none;
  }
}
.single-service-one .icon {
  height: 99px;
  width: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141416;
  margin-bottom: 40px;
  border-radius: 10px;
  transition: 0.3s;
}
.single-service-one .inner {
  background: #141416;
  padding: 30px;
  border-radius: 10px;
}
.single-service-one .inner .title {
  margin-bottom: 16px;
  font-size: 22px;
}
.single-service-one .inner p {
  color: #7c7c84;
  margin-bottom: 16px;
  font-size: 15px;
}
.single-service-one .inner a.read-more-narrow {
  color: #f84e1d;
}
.single-service-one:hover .icon {
  background: #f84e1d;
}

.swiper-area-wrapper {
  position: relative;
}
.swiper-area-wrapper .swiper-button-next,
.swiper-area-wrapper .swiper-button-prev {
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e1e20;
  border: 1px solid #34343a;
  border-radius: 10px;
  transition: 0.3s;
}
.swiper-area-wrapper .swiper-button-next::after,
.swiper-area-wrapper .swiper-button-prev::after {
  display: none;
}
.swiper-area-wrapper .swiper-button-next i,
.swiper-area-wrapper .swiper-button-prev i {
  color: #fff;
}
.swiper-area-wrapper .swiper-button-next:hover,
.swiper-area-wrapper .swiper-button-prev:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.swiper-area-wrapper .swiper-button-next {
  right: -100px;
  left: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .swiper-area-wrapper .swiper-button-next {
    right: -27px;
  }
}
.swiper-area-wrapper .swiper-button-prev {
  left: -100px;
  right: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .swiper-area-wrapper .swiper-button-prev {
    left: -27px;
  }
}

.mySwiper-service-one {
  position: relative;
}

.marque-area-wrapper {
  width: 130%;
}
.marque-area-wrapper span {
  font-size: 180px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #1b1b1e;
}

.title-wrapper-left span.pre {
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
}
.title-wrapper-left .title {
  color: #141416;
  font-size: 44px;
  margin-top: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .title-wrapper-left .title {
    font-size: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .title-wrapper-left .title {
    font-size: 28px;
  }
}
@media only screen and (max-width: 575px) {
  .title-wrapper-left .title {
    font-size: 26px;
  }
  .title-wrapper-left .title br {
    display: none;
  }
}

.single-choose-us-one {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}
@media only screen and (max-width: 575px) {
  .single-choose-us-one {
    flex-direction: column;
    align-items: flex-start;
  }
}
.single-choose-us-one:last-child {
  margin-bottom: 0;
}
.single-choose-us-one .icon {
  height: 90px;
  min-width: 90px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.single-choose-us-one .icon span {
  position: absolute;
  height: 30px;
  width: 30px;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e4ded8;
  box-shadow: 0px 4px 29px rgba(57, 46, 35, 0.18);
  color: #f84e1d;
  font-weight: 600;
}
.single-choose-us-one .title {
  color: #141416;
  font-size: 22px;
  margin-bottom: 10px;
}
.single-choose-us-one p.disc {
  color: #7c7c84;
}

.service-single-wrapper {
  padding: 50px;
  background: #fff;
  border-radius: 10px;
}
@media only screen and (max-width: 991px) {
  .service-single-wrapper {
    padding: 25px;
  }
}
.service-single-wrapper .icon {
  height: 90px;
  background: #efebe7;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}
.service-single-wrapper .title {
  color: #141416;
  font-size: 22px;
  margin-top: 33px;
  margin-bottom: 15px;
}
.service-single-wrapper p.disc {
  margin-bottom: 30px;
}

.tab-area-service-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
@media only screen and (max-width: 991px) {
  .tab-area-service-button {
    justify-content: flex-start;
    gap: 10px;
  }
}
.tab-area-service-button li.nav-item {
  width: max-content;
  flex-basis: 24.5%;
  margin: 0;
}
@media only screen and (max-width: 991px) {
  .tab-area-service-button li.nav-item {
    flex-basis: 21.5%;
  }
}
.tab-area-service-button li.nav-item button.nav-link {
  background: #ffffff;
  height: 80px;
  display: block;
  width: 100%;
  font-weight: 600;
  color: #141416;
  border: none;
  box-shadow: none;
  font-size: 20px;
}
@media only screen and (max-width: 991px) {
  .tab-area-service-button li.nav-item button.nav-link {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .tab-area-service-button li.nav-item button.nav-link {
    height: 64px;
    font-size: 16px;
  }
}
.tab-area-service-button li.nav-item button.nav-link:hover {
  border: none;
  box-shadow: none;
}
.tab-area-service-button li.nav-item button.nav-link.active {
  background: #f84e1d;
  color: #fff;
}

.service-content-inner-wrapper {
  background-image: url(../images/service/02.webp);
  padding: 80px;
  border-radius: 0 0 10px 10px;
}
@media only screen and (max-width: 575px) {
  .service-content-inner-wrapper {
    padding: 30px;
  }
}
.service-content-inner-wrapper .inner {
  max-width: 63%;
}
@media only screen and (max-width: 991px) {
  .service-content-inner-wrapper .inner {
    max-width: 100%;
  }
}
.service-content-inner-wrapper .inner .title {
  font-size: 30px;
}
@media only screen and (max-width: 575px) {
  .service-content-inner-wrapper .inner .title {
    font-size: 22px;
  }
}
.service-content-inner-wrapper .inner p.disc {
  color: #7c7c84;
  margin-bottom: 28px;
}
.service-content-inner-wrapper .inner .wrapper-check-area-start {
  max-width: 400px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 45px;
  row-gap: 15px;
}
.service-content-inner-wrapper .inner .wrapper-check-area-start .single {
  display: flex;
  align-items: center;
  gap: 15px;
}
.service-content-inner-wrapper .inner .wrapper-check-area-start .single p {
  color: #ffffff;
  margin: 0;
  font-size: 16px;
}
.service-content-inner-wrapper .inner .wrapper-check-area-start .single i {
  font-size: 18px;
  color: var(--color-primary);
}
.service-content-inner-wrapper .inner .rts-btn {
  margin-top: 35px;
}
.service-content-inner-wrapper .inner .rts-btn::after {
  background: #fff;
}
.service-content-inner-wrapper .inner .rts-btn:hover {
  color: var(--color-primary);
}

.cta-wrapper-inner .rts-btn::after {
  background: #141416;
}

.container-1730 {
  max-width: 1730px;
  margin: auto;
}

.service-bg_image-3 {
  border-radius: 10px;
  height: 300px;
  /* background-image: url(../../../images/lain-lain/bg-keunggulan.webp); */
  background:
    linear-gradient(to bottom, rgb(47 57 90 / 88%), rgb(46 55 89 / 88%)),
    url("../../../images/lain-lain/bg-keunggulan.webp");
}

.mt-dec--130 {
  margin-top: -130px;
}

.single-service-area-3 {
  padding: 30px;
  position: relative;
  background: #fff;
  overflow: hidden;
  display: block;
  border-radius: 10px;
  height: 100%;
}
.single-service-area-3 .icon {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 0 0 10px 0;
  height: 105px;
  width: 105px;
  background: var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.single-service-area-3 .icon img {
  width: 60% !important;
}

.single-service-area-3 span.number {
  position: absolute;
  color: #efebe7;
  right: 20px;
  top: 0px;
  font-size: 70px;
  font-weight: 700;
  font-family: var(--font-secondary);
}
.single-service-area-3 .title {
  margin-top: 100px;
  color: #141416;
  font-size: 22px;
  margin-bottom: 10px;
  transition: 0.3s;
}
.single-service-area-3 .title:hover {
  color: var(--base-color);
}
.single-service-area-3 p.disc {
  margin-bottom: 10px;
  font-size: 15px;
  color: #7c7c84;
}
.single-service-area-3 .read-more-btn {
  color: var(--color-primary);
  font-weight: 600;
  max-width: max-content;
}
.single-service-area-3 .read-more-btn i {
  transition: 0.3s;
}
.single-service-area-3 .read-more-btn:hover i {
  margin-left: 5px;
}

.title-center-wrapper-4 {
  text-align: center;
}
.title-center-wrapper-4 .title {
  font-size: 44px;
  line-height: 1.2;
}
@media only screen and (max-width: 992px) {
  .service-bg_image-3 {
    height: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .title-center-wrapper-4 .title {
    font-size: 32px;
  }

  .single-service-area-3 .icon {
    height: 86px;
    width: 86px;
  }

  .single-service-area-3 .title {
    margin-top: 75px;
  }
}
@media only screen and (max-width: 479px) {
  .title-center-wrapper-4 .title {
    font-size: 26px;
  }
}

.single-service-style-4 {
  background: #141416;
  border-radius: 10px;
  overflow: hidden;
}
.single-service-style-4 .top {
  padding: 40px;
}
@media only screen and (max-width: 479px) {
  .single-service-style-4 .top {
    padding: 25px;
  }
}
.single-service-style-4 .top .icon {
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e1e20;
  border: 1px solid #2e2e31;
  border-radius: 5px;
  margin-bottom: 26px;
}
.single-service-style-4 .top .title {
  margin-bottom: 7px;
}
.single-service-style-4 .top p.disc {
  color: #7c7c84;
  margin-bottom: 0;
}
.single-service-style-4 .thumbnail {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
  border-radius: 10px;
}
.single-service-style-4 .thumbnail::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  bottom: 0;
  background: var(--color-primary);
  z-index: 0;
  transition: 0.3s;
}
.single-service-style-4 .thumbnail .hidden-content {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: max-content;
  transform: translate(-50%, -50%) scale(0);
  z-index: 1;
  transition: 0.3s;
}
.single-service-style-4 .thumbnail .hidden-content .rts-btn {
  height: 45px;
}
.single-service-style-4 .thumbnail .hidden-content .rts-btn::after {
  background: #141416;
}
.single-service-style-4:hover .thumbnail::after {
  height: 100%;
}
.single-service-style-4:hover .hidden-content {
  transform: translate(-50%, -50%) scale(1);
}

.rts-service-area-five {
  background: #1b1b1e;
}

.wrapper-column-service-area {
  height: 100%;
}

.service-main-wrapper-5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
  .service-main-wrapper-5 {
    flex-wrap: wrap;
    justify-content: center;
  }
  .service-main-wrapper-5 > div {
    flex-basis: 50%;
  }
}
@media only screen and (max-width: 767px) {
  .service-main-wrapper-5 {
    flex-wrap: wrap;
    justify-content: center;
  }
  .service-main-wrapper-5 > div {
    flex-basis: 100%;
  }
}

.single-service-area-five {
  padding: 60px;
  width: 540px;
  border: 1px solid #2e2e31;
  height: 50%;
  height: 354px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .single-service-area-five {
    width: 440px;
  }
}
@media only screen and (max-width: 1199px) {
  .single-service-area-five {
    flex-basis: 100%;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .single-service-area-five {
    padding: 40px;
  }
}
.single-service-area-five:hover::after {
  opacity: 0.2;
}
.single-service-area-five:hover .icon-area::after {
  background: rgb(248, 78, 29);
}
.single-service-area-five::after {
  content: "";
  position: absolute;
  width: 87px;
  height: 87px;
  left: 70px;
  top: 70px;
  background: #f84e1d;
  mix-blend-mode: normal;
  opacity: 0.2;
  filter: blur(30px);
  z-index: -1;
  transition: 0.3s;
  opacity: 0;
}
.single-service-area-five.bottom-border-none {
  border-bottom: none;
}
.single-service-area-five .icon-area {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}
.single-service-area-five .icon-area::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  left: -15px;
  top: -22px;
  background: rgba(248, 78, 29, 0.1);
  border-radius: 5px;
  z-index: -1;
  transition: 0.3s;
}
.single-service-area-five .icon-area .icon {
  width: 87px;
  height: 87px;
  background: #141416;
  border: 1px solid #2e2e31;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-service-area-five .icon-area p {
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  color: #28282e;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .single-service-area-five .icon-area p {
    font-size: 36px;
  }
}
@media only screen and (max-width: 575px) {
  .single-service-area-five .icon-area p {
    font-size: 22px;
  }
}
.single-service-area-five a .title {
  color: #fff;
  font-size: 22px;
  margin-bottom: 12px;
  transition: 0.3s;
}
.single-service-area-five a:hover .title {
  color: var(--color-primary);
}
.single-service-area-five p.disc {
  color: #7c7c84;
  margin-bottom: 25px;
}
.single-service-area-five a.read-more {
  color: var(--color-primary);
  font-weight: 600;
}

.service-wrapper-bg-mid-5 {
  background-image: url(../images/service/07.webp);
  width: 100%;
  height: 709px;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 575px) {
  .service-wrapper-bg-mid-5 {
    height: 500px;
  }
}

.service-inner-title-wrapper-five {
  text-align: center;
  max-width: 529px;
  margin: auto;
}
.service-inner-title-wrapper-five span.pre {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-primary);
}
.service-inner-title-wrapper-five .title {
  text-transform: uppercase;
  font-size: 44px;
  margin-top: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .service-inner-title-wrapper-five .title {
    font-size: 24px;
  }
}
@media only screen and (max-width: 1199px) {
  .service-inner-title-wrapper-five .title {
    text-transform: uppercase;
    font-size: 28px;
    margin-top: 10px;
    line-height: 1.4;
  }
}
.service-inner-title-wrapper-five .rts-btn {
  margin: auto;
}
.service-inner-title-wrapper-five p.disc {
  font-size: 18px;
  color: #7c7c84;
  line-height: 1.6;
}

.single-service-area-inner {
  overflow: hidden;
  border-radius: 10px;
  display: block;
}
.single-service-area-inner .thumbnail {
  display: block;
  overflow: hidden;
}
.single-service-area-inner .thumbnail img {
  transition: 0.3s;
}
.single-service-area-inner .innr {
  padding: 30px;
  background: #fff;
}
.single-service-area-inner .innr .title {
  color: var(--color-title);
  transition: 0.3s;
  margin-bottom: 14px;
}
.single-service-area-inner .innr .title:hover {
  color: var(--color-primary);
}
.single-service-area-inner .innr p.disc {
  font-size: 16px;
  margin-bottom: 20px;
}
.single-service-area-inner .innr .check-wrapper .single {
  display: flex;
  align-items: center;
  gap: 13px;
}
.single-service-area-inner .innr .check-wrapper .single i {
  color: var(--color-title);
}
.single-service-area-inner .innr .check-wrapper .single p {
  margin-bottom: 0;
  color: var(--color-title);
  font-weight: 500;
}
.single-service-area-inner .innr a.btn {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-title);
  transition: 0.3s;
  font-size: 18px;
  max-width: max-content;
  padding: 0;
  margin: 0;
  margin-top: 25px;
}
.single-service-area-inner .innr a.btn:hover {
  color: var(--color-primary);
  gap: 15px;
}
.single-service-area-inner:hover .thumbnail img {
  transform: scale(1.05);
}

.service-main-wrapper-tabs {
  border-radius: 15px;
  overflow: hidden;
  display: block;
  background: #fff;
}
.service-main-wrapper-tabs .nav {
  display: flex;
  align-items: center;
  background: #fff;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #d9d9d9;
}
.service-main-wrapper-tabs .nav li {
  margin: 0;
  padding: 0;
  border: none !important;
}
.service-main-wrapper-tabs .nav li button {
  padding: 21px 25px;
  border-color: transparent !important;
  text-transform: uppercase;
  font-weight: 500;
  color: #141416;
  font-size: 18px;
}
@media only screen and (max-width: 575px) {
  .service-main-wrapper-tabs .nav li button {
    padding: 10px;
  }
}
.service-main-wrapper-tabs .nav li button.active {
  background-color: transparent;
  color: var(--color-primary);
}
.service-main-wrapper-tabs .tab-content .inner-wrapper-tab-service-wrapper {
  padding: 40px;
}
@media only screen and (max-width: 575px) {
  .service-main-wrapper-tabs .tab-content .inner-wrapper-tab-service-wrapper {
    padding: 20px;
  }
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 35px;
}
@media only screen and (max-width: 575px) {
  .service-main-wrapper-tabs
    .tab-content
    .inner-wrapper-tab-service-wrapper
    .single {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single:last-child {
  margin-bottom: 0;
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single
  .icon {
  height: 50px;
  min-width: 50px;
  background: #f6f2f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single
  .icon
  i {
  color: var(--color-primary);
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single
  .inner-content {
  font-size: 18px;
}
@media only screen and (max-width: 575px) {
  .service-main-wrapper-tabs
    .tab-content
    .inner-wrapper-tab-service-wrapper
    .single
    .inner-content {
    font-size: 16px;
  }
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single
  .inner-content
  b {
  color: #141416;
}

.service-details-inner-area-wrapper {
  margin-top: 30px;
}
.service-details-inner-area-wrapper .title {
  color: var(--color-title);
  font-size: 40px;
}

.call-to-action-area-service {
  height: 393px;
  background-image: url(../images/cta/03.webp);
  border-radius: 15px;
  display: flex;
  align-items: center;
  padding-left: 100px;
}
@media only screen and (max-width: 767px) {
  .call-to-action-area-service {
    height: auto;
    padding: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .call-to-action-area-service {
    padding: 25px;
  }
}
.call-to-action-area-service .inner {
  max-width: 60%;
}
@media only screen and (max-width: 767px) {
  .call-to-action-area-service .inner {
    max-width: 100%;
  }
}
.call-to-action-area-service .inner .title {
  font-size: 40px;
}
@media only screen and (max-width: 767px) {
  .call-to-action-area-service .inner .title {
    font-size: 32px;
  }
}
.call-to-action-area-service .inner p.disc {
  color: #ffffff;
}

/*--------------------------------------------------------------
  16. Services Style
----------------------------------------------------------------*/
.services-wrapper .service-item {
  position: relative;
  cursor: pointer;
}
.services-wrapper .service-item .services-content {
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--theme_light_border);
  position: relative;
}
.services-wrapper .service-item .services-content .the-plus {
  color: var(--base-color);
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: var(--theme-transition);
}
.services-wrapper .service-item .services-content .the-srv-title {
  padding-left: 15px;
}
.services-wrapper .service-item .services-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var(--base-color);
  transition: width 0.5s ease;
  opacity: 0.5;
}
.services-wrapper .service-item:hover .services-content::after {
  width: 100%;
}
.services-wrapper .service-item:hover .the-plus {
  background-color: var(--base-color);
  color: var(--theme_white);
  filter: drop-shadow(4px 4px 4px rgba(20, 118, 216, 0.25));
}
.services-wrapper .service-item:hover .srv-the-hover {
  opacity: 1;
  transform: translateY(0);
}
.services-wrapper .service-item:hover .srv-img img {
  transform: scale(1.1) rotate(3deg);
  filter: brightness(0.8) saturate(1.2);
}
.services-wrapper .service-item .srv-img {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.services-wrapper .service-item .srv-img img {
  display: block;
  width: 100%;
  height: auto;
  transition:
    transform 0.6s ease,
    filter 0.6s ease;
}
.services-wrapper .service-item .srv-the-hover {
  text-align: right;
  /* max-width: 285px; */
  position: absolute;
  right: 20px;
  left: 20px;
  bottom: 90px;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.services-wrapper .service-item .srv-the-hover p {
  background-color: var(--theme_white);
  padding: 20px;
  border-right: 3px solid var(--base-color);
}

@media screen and (max-width: 1199px) {
  .widget-sidebar {
    margin-top: 50px;
  }
}
@media screen and (max-width: 767px) {
  .service-item {
    max-width: 26.875rem;
    margin: auto;
  }
}
.cs-border-icon {
  background: var(--base-color);
  border-radius: 150px;
  display: inline-block;
  height: 70px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.cs-border-icon img {
  position: absolute;
}

.process-item p {
  margin: 0px;
}

.srv-pagination {
  text-align: center;
}
.srv-pagination .swiper-pagination-bullet {
  background: var(--base-color);
  opacity: 0.2;
}
.srv-pagination .swiper-pagination-bullet-active {
  background: var(--base-color);
  opacity: 1;
}

.service-slider {
  overflow: hidden;
}

.service-slider .swiper-slide {
  width: auto;
}

/* title  */
.text-main {
  color: var(--base-color);
}

.text-accent {
  color: var(--second-color);
}

/* title  */

/*--------------------------------------------------------------
  09. General
----------------------------------------------------------------*/
.background-parallax {
  position: relative;
  overflow: hidden;
}
.background-parallax .parallax-image {
  top: 0;
  left: 0;
}
.background-parallax .parallax-image img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.background-parallax .content-for-parallax {
  position: relative;
  z-index: 2;
}

.max-height-750 {
  max-height: 750px;
}

.cs-hover-card-anim {
  position: relative;
  overflow: hidden;
  transition: background-image var(--theme-transition);
}
.cs-hover-card-anim:hover {
  background-color: var(--theme_bg_primary);
  transition: background-image var(--theme-transition);
}
.cs-hover-card-anim .content-for-top {
  position: relative;
  z-index: 10;
  transition: var(--theme-transition);
}

.magic {
  position: absolute;
  z-index: 0;
  transition: var(--theme-transition);
  opacity: 1;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.cs-hover-card-anim[data-ser="hover-reveal"]:hover .magic {
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.animate-img-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.animate-img-wrap .reveal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme_bg_primary);
  z-index: 9;
}
.animate-img-wrap .the-animated-image {
  -o-object-fit: cover;
  object-fit: cover;
  transform: scale(1.1);
}

.opacity05 {
  opacity: 0.5;
}

.opacity02 {
  opacity: 0.2;
}

.opacity01 {
  opacity: 0.1;
}

.cs-animated-text {
  position: relative;
  text-transform: uppercase;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

.swiper-button-next ::after {
  display: none !important;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}
.theme-border-wrap {
  position: relative;
}
.theme-border-wrap .b-top-left {
  position: absolute;
  top: 0;
  left: 0;
  transition: var(--theme-transition);
  z-index: 20;
}
.theme-border-wrap .b-top-right {
  position: absolute;
  top: 0;
  right: 0;
  transition: var(--theme-transition);
  z-index: 20;
}
.theme-border-wrap .b-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  transition: var(--theme-transition);
  z-index: 20;
}
.theme-border-wrap .b-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  transition: var(--theme-transition);
  z-index: 20;
}
.theme-border-wrap:hover .b-top-left {
  top: 20px;
  left: 20px;
  transition: var(--theme-transition);
  opacity: 0.3;
}
.theme-border-wrap:hover .b-top-right {
  top: 20px;
  right: 20px;
  transition: var(--theme-transition);
  opacity: 0.3;
}
.theme-border-wrap:hover .b-bottom-right {
  bottom: 20px;
  right: 20px;
  transition: var(--theme-transition);
  opacity: 0.3;
}
.theme-border-wrap:hover .b-bottom-left {
  bottom: 20px;
  left: 20px;
  transition: var(--theme-transition);
  opacity: 0.3;
}

.theme-dark.theme-border-wrap .horizontal,
.theme-dark.theme-border-wrap .verticle {
  background: var(--themecolor_secondary);
}

@keyframes horizontal-grow {
  0% {
    width: 0;
  }
  100% {
    width: 50px;
  }
}
@keyframes vertical-grow {
  0% {
    height: 0;
  }
  100% {
    height: 50px;
  }
}
.horizontal {
  width: 50px;
  height: 1px;
  background: var(--base-color);
  animation: horizontal-grow 0.5s ease-out forwards;
}

.verticle {
  width: 1px;
  height: 50px;
  background: var(--base-color);
  animation: vertical-grow 0.5s ease-out forwards;
}

.lg-gutter-control {
  margin-bottom: -30px;
}

.flex-end {
  align-items: flex-end;
}

.flex-start {
  align-items: flex-start;
}

blockquote {
  padding: 50px;
  font-size: 26px;
  line-height: 140%;
  background: var(--theme_bg_primary);
}

@media screen and (min-width: 1400px) {
  .stickysec-wrap {
    position: relative;
  }
  .stickysec-wrap .sticky-box {
    float: right;
    width: 415px;
  }
  .stickysec-wrap .sticky-box .sticky-box-child {
    display: block;
    width: 415px;
  }
  .stickysec-wrap .fixed-position {
    position: fixed;
    top: 30px;
    width: 415px;
  }
  .stickysec-wrap .absolute-position {
    position: absolute;
    bottom: 25px;
    width: 415px;
  }
}
.cs-heading-with-animation {
  position: relative;
}
.cs-heading-with-animation .cs-heading {
  z-index: 2;
}
.cs-heading-with-animation.text-center {
  text-align: center !important;
  display: flex;
  justify-content: center;
}

.cs-animated-text {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  opacity: 0.08;
}

.cs-w-full {
  width: 100%;
}

.cs-constr-arrow-wrap .constr-arrow-in {
  display: flex;
  gap: 15px;
}
.cs-constr-arrow-wrap .constr-arrow-in i {
  font-size: 20px;
  line-height: 0px;
}
.cs-constr-arrow-wrap .constr-arrow-in .constr-nvigate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
}
.cs-constr-arrow-wrap .constr-arrow-in .cs-arrow-left {
  transform: rotate(-180deg);
}

.cs-max-width-200 {
  max-width: 200px;
}

.max-width-800 {
  max-width: 800px;
}

.max-width-700 {
  max-width: 700px;
}

.max-width-600 {
  max-width: 600px;
}

.max-width-1120 {
  max-width: 1120px;
}

.max-width-740 {
  max-width: 740px;
}

hr {
  margin: 0;
  padding: 0;
  border: none;
  /*border-top: 1px solid #f2f1ff;*/
}

.jcb {
  justify-content: space-between;
}

.mp-0 {
  margin: 0px;
  padding: 0px;
}

.cs_bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.cs_vertical_middle {
  display: flex;
  align-items: center;
  min-height: 100%;
}

.cs_vertical_middle_in {
  flex: none;
  width: 100%;
}

.cs-flex {
  display: flex;
}

.cs_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

label {
  margin-bottom: 12px;
}

@media screen and (max-width: 991px) {
  .cs_column_reverse_lg {
    flex-direction: column-reverse;
  }
  .cs_row_gap_150 > div {
    margin-bottom: -30px;
  }
}
.cs_toggle {
  position: relative;
  font-size: 18px;
  cursor: pointer;
  z-index: 10000;
}
.cs_toggle .setting_mode {
  position: fixed;
  right: 0;
  top: 40%;
  -webkit-transition: all 0.2s;
  transform: translateY(-50%);
  transition: all 0.2s;
}
.cs_toggle .setting_mode button {
  border: none;
  background-color: #2b2b2f;
  padding: 10px;
}
.cs_toggle .setting_mode button img {
  width: 100%;
  height: 30px;
}
.cs_toggle .setting_mode #clecel {
  display: none;
}
.cs_toggle .cs_mode_btn {
  position: fixed;
  right: -120px;
  top: 40%;
  transform: translateY(-50%);
  transition: all 0.3s;
  mix-blend-mode: exclusion;
}
.cs_toggle .cs_mode_btn button {
  border: none;
  background-color: #2b2b2f;
  color: rgba(143, 143, 143, 0.9333333333);
  padding: 10px;
}
.cs_toggle .cs_mode_btn .active {
  color: #fff;
}

.cs-container-border {
  margin: auto;
  height: 1px;
  background: var(--theme_light_border);
}

/* Scroll */

::-webkit-scrollbar {
  width: 5px;
  background: var(--theme_black);
  opacity: 0.2;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

::-webkit-scrollbar-track {
  box-shadow: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

::-webkit-scrollbar-thumb {
  background: var(--base-color);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--base-color);
  -webkit-transition: all 0.4s ease-in-out !important;
  transition: all 0.4s ease-in-out !important;
}

.cs-icon20-0 {
  font-size: 20px;
  line-height: 0px;
}

/*--------------------------------------------------------------
# Footer Section
--------------------------------------------------------------*/
.footer-floating-style {
  background-color: #1e2228;
  color: #a0a5b0;
  margin-top: 80px;
  /* Jarak untuk kotak melayang */
}

.floating-cta-card {
  background: linear-gradient(135deg, var(--base-color));
  border-radius: 20px;
  padding: 40px;
  color: white;
  transform: translateY(-60px);
  box-shadow: 0 20px 40px rgba(2, 97, 86, 0.2);
  margin-bottom: -20px;
}

/* Link Styling */
.f-link-hover {
  color: #a0a5b0;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  font-size: 14px;
}

.f-link-hover:hover {
  color: #ffffff;
  padding-left: 8px; /* Animasi geser ke kanan */
}

.f-link-hover i {
  font-size: 10px;
  margin-right: 8px;
  opacity: 1;
  transition: 0.3s;
}

.f-link-hover:hover i {
  opacity: 1;
}

/* Social Media Button Styling */
.social-wrapper {
  display: flex;
  gap: 12px;
}

.social-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.social-btn:hover {
  background: var(--base-color); /* Warna brand utama */
  color: #fff !important;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(2, 85, 62, 0.3);
  border-color: transparent;
}
.social-btn:hover i {
  color: white !important;
}

.bg-icon-kontak {
  min-width: 35px;
  max-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*--------------------------------------------------------------
# Services Four
--------------------------------------------------------------*/
.services-four {
  position: relative;
  display: block;
  padding: 120px 0 90px;
  z-index: 1;
}

.services-four__single {
  position: relative;
  display: block;
  margin-bottom: 30px;
}

.services-four__img {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
}

.services-four__img::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(var(--elitecons-black-rgb), 0.3);
  position: absolute;
  bottom: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  z-index: 1;
}

.services-four__single:hover .services-four__img::after {
  visibility: visible;
  opacity: 1;
}

.services-four__img img {
  width: 100%;
  transform: scale(1);
  transition: all 0.4s ease-in-out;
  object-fit: cover;
}

.services-four__single:hover .services-four__img img {
  transform: scale(1.1);
}

.services-four__content {
  position: relative;
  display: block;
  background-color: var(--bs-white);
  border-bottom: 2px solid var(--base-color);
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.05);
  margin: -60px 20px 0;
  padding: 32px 30px 30px;
  z-index: 3;
  height: 300px;
}

.services-four__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 26px;
}

.services-four__title a {
  color: var(--elitecons-black);
}

.services-four__title a:hover {
  color: var(--elitecons-base);
}

.services-four__text {
  margin-top: 6px;
  margin-bottom: 33px;
}

.services-four__btn-box {
  position: relative;
  display: block;
}

.services-four__btn {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.services-four__btn span {
  font-size: 14px;
}

.services-four__btn:hover {
  color: var(--elitecons-black);
}

/*--------------------------------------------------------------
# Share Button
--------------------------------------------------------------*/

.fabs {
  bottom: 160px;
  position: fixed;
  /* margin: 1em; */
  z-index: 100;
  left: 20px;
}

.fab {
  display: block;
  /* width: 45px;
  height: 45px; */
  border-radius: 50%;
  text-align: center;
  color: var(--base-color);
  /* margin: 20px auto 0; */
  /* box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18),0px 4px 12px -7px rgba(0, 0, 0, 0.15); */
  cursor: pointer;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
  position: relative;
}

.fab > i {
  font-size: 28px;
  line-height: 60px;
  transition: all 0.2s ease-in-out;
  transition-delay: 2s;
}

.fab.red {
  background: #f44336;
}

.fab.pink {
  background: #e91e63;
}

.fab.purple {
  background: #9c27b0;
}

.fab.deep-purple {
  background: #673ab7;
}

.fab.indigo {
  background: #3f51b5;
}

.fab.blue {
  background: #2196f3;
}

.fab.light-blue {
  background: #03a9f4;
}

.fab.cyan {
  background: #00bcd4;
}

.fab.teal {
  background: #009688;
}

.fab.green {
  background: #4caf50;
}

.fab.light-green {
  background: #8bc34a;
}

.fab.lime {
  background: #cddc39;
}

.fab.yellow {
  background: #ffeb3b;
}

.fab.amber {
  background: #ffc107;
}

.fab.orange {
  background: #ff9800;
}

.fab.deep-orange {
  background: #ff5722;
}

.fab.brown {
  background: #795548;
}

.fab.grey {
  background: #9e9e9e;
}

.fab.blue-grey {
  background: #607d8b;
}

.fab:active,
.fab:focus,
.fab:hover {
  /* box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); */
}

.fab:not(:last-child) {
  /* width: 16px;
  height: 36px;
  margin: 20px auto 0; */
  opacity: 1;
}

.fab:not(:last-child) > i {
  font-size: 18px;
  line-height: 40px;
  transition: all 0.3s ease-in-out;
}

.fabs:hover .fab:not(:last-child) {
  opacity: 1;
  width: 20px;
  height: 10px;
  margin: 5px auto 0;
}

.fab:nth-last-child(1) {
  -webkit-transition-delay: 25ms;
  transition-delay: 25ms;
}

.fab:not(:last-child):nth-last-child(2) {
  -webkit-transition-delay: 20ms;
  transition-delay: 20ms;
}

.fab:not(:last-child):nth-last-child(3) {
  -webkit-transition-delay: 40ms;
  transition-delay: 40ms;
}

.fab:not(:last-child):nth-last-child(4) {
  -webkit-transition-delay: 60ms;
  transition-delay: 60ms;
}

.fab:not(:last-child):nth-last-child(5) {
  -webkit-transition-delay: 80ms;
  transition-delay: 80ms;
}

[tooltip]:before {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: #585858;
  color: #fff;
  content: attr(tooltip);
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  padding: 5px 7px;
  margin-right: 10px;
  position: absolute;
  left: 120%;
  bottom: 5%;
  white-space: nowrap;
}

[tooltip]:hover:before,
[tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}

/*==================================*/
.navbar .navbar-nav .nav-link::before {
  /*  content: '• • •';*/
  /*  content: '______';*/
  position: absolute;
  bottom: 15px;
  left: 50%;
  font-size: 14px;
  color: var(--second-color);
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: translateX(-50%);
  white-space: nowrap;
}
.navbar .navbar-nav .nav-link:hover::before {
  opacity: 1;
}
a.nav-link {
  position: relative;
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 14px;
}

.btn-paket {
  border: 1px solid;
  padding: 5px 20px 5px 20px;
  width: 100%;
  height: auto;
}

.btn1 {
  background: transparent;
  border: 1px solid var(--base-color);
  padding: 10px;
  border-radius: 10px;
  color: var(--base-color);
}

.brk-btn {
  position: relative;
  background: none;
  color: #062b91;
  text-transform: uppercase;
  text-decoration: none;
  border: 0.2em solid #062b91;
  padding: 0.5em 1em;
  width: 75%;
  background-color: #062b91;
  border-radius: 15px;
  &::before {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: #fe6601;
    height: 0.3em;
    right: 20%;
    top: -0.21em;
    transform: skewX(-45deg);
    -webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: #fe6601;
    height: 0.3em;
    left: 20%;
    bottom: -0.25em;
    transform: skewX(45deg);
    -webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  }
  &:hover {
    &::before {
      right: 80%;
    }
    &::after {
      left: 80%;
    }
  }
}

a.button-arrow {
  border: 1px solid white;
  color: #3f3f3f;
  display: inline-block;
  font-size: 14px;
  /*    font-weight: bold;*/
  line-height: 24px;
  margin: auto;
  padding: 12px 32px 12px 82px;
  position: relative;
  text-decoration: none;
  background-color: #062b91;
  border-radius: 25px;
}

a .label,
a .icon-arrow {
  backface-visibility: hidden;
  transform: translateZ(0);
  perspective: 1000;
}

a .label {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
  /*    color: #fe6601;*/
  color: white;
}

a .icon-arrow {
  fill: #fe6601;
  height: 45px;
  top: -1px;
  transition:
    transform 0.5s cubic-bezier(0.86, 0, 0.07, 1),
    opacity 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  width: 30px;
}

a .icon-arrow.before {
  left: 32px;
  margin-right: 15px;
  position: absolute;
  transform-origin: left center;
}

a .icon-arrow.after {
  margin-left: 15px;
  opacity: 0;
  position: absolute;
  right: 32px;
  transform: translateX(75%) scaleX(0.1);
  transform-origin: right center;
}

a:hover .label {
  transform: translateX(-52px);
}

a:hover .icon-arrow.before {
  opacity: 0;
  transform: translateX(-75%) scaleX(0.1);
}

a:hover .icon-arrow.after {
  opacity: 1;
  transform: translateX(0) scaleX(1);
}

a:active {
  border-color: #fd6154;
  color: #fd6154;
}

a:active .icon-arrow {
  fill: #fd6154;
}

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

a.button-arrow {
  border: 1px solid white;
  color: #3f3f3f;
  display: inline-block;
  font-size: 14px;
  /*    font-weight: bold;*/
  line-height: 24px;
  margin: auto;
  padding: 12px 32px 12px 82px;
  position: relative;
  text-decoration: none;
  background-color: #062b91;
  border-radius: 25px;
}

a .label,
a .icon-wa {
  backface-visibility: hidden;
  transform: translateZ(0);
  perspective: 1000;
}

a .label {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
  /*    color: #fe6601;*/
  color: white;
}

a .icon-wa {
  fill: #fe6601;
  /*    height: 10px;*/
  top: -50px;
  transition:
    transform 0.5s cubic-bezier(0.86, 0, 0.07, 1),
    opacity 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  width: 30px;
}

a .icon-wa.before {
  left: 32px;
  margin-right: 15px;
  position: absolute;
  transform-origin: left center;
}

a .icon-wa.after {
  margin-left: 15px;
  opacity: 0;
  position: absolute;
  right: 32px;
  transform: translateX(75%) scaleX(0.1);
  transform-origin: right center;
}

a:hover .label {
  transform: translateX(-52px);
}

a:hover .icon-wa.before {
  opacity: 0;
  transform: translateX(-75%) scaleX(0.1);
}

a:hover .icon-wa.after {
  opacity: 1;
  transform: translateX(0) scaleX(1);
}

a:active {
  border-color: #fd6154;
  color: #fd6154;
}

a:active .icon-wa {
  fill: #fd6154;
}

/*Kontak Kami*/
.contact-opt-3 {
  background-color: #f4f4f4;
}

.contact-opt-3 .c-dark-container {
  background: #1a1a1a;
}

.contact-opt-3 .c-bg-image {
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

.contact-opt-3 .c-dark-bg {
  background-color: #1a1a1a;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-opt-3 .tracking-wider {
  letter-spacing: 2px;
}

.contact-opt-3 .c-timeline {
  border-left: 1px solid rgba(255, 191, 0, 0.3);
  margin-left: 10px;
  padding-left: 20px;
  position: relative;
}

.contact-opt-3 .c-time-item {
  position: relative;
}

.contact-opt-3 .c-gold-dot {
  position: absolute;
  left: -26px;
  top: 0;
  width: 12px;
  height: 12px;
  background: #ffbf00;
  border-radius: 50%;
  border: 3px solid #1a1a1a;
  box-shadow: 0 0 0 2px rgba(255, 191, 0, 0.3);
}

.contact-opt-3 .c-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.contact-opt-3 .c-social-btn:hover {
  background: #ffbf00;
  border-color: #ffbf00;
  color: #111;
  transform: translateY(-3px);
}

/* Kontak Kami  */

@media (min-width: 992px) {
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-primary);
}

/* layanan tambahan  */

/* kontak  */
.contact-line-item {
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.contact-line-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Efek Tumpukan Gambar */
.img-stack-container {
  position: relative;
  padding: 20px;
}
.img-stack-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  bottom: 40px;
  background: var(--base-color);
  border-radius: 20px;
  transform: rotate(-4deg);
  z-index: 0;
  opacity: 0.15;
}
.img-stack-main {
  position: relative;
  z-index: 1;
  border: 10px solid #fff;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transform: rotate(2deg);
  transition: transform 0.4s ease;
}
.img-stack-container:hover .img-stack-main {
  transform: rotate(0deg) scale(1.02);
}

/* kontak  */

/* artikel detail  */
.opt3-box {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 30px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
}
.opt3-title {
  font-size: 2rem;
  font-weight: 700;
}
.opt3-btn-share {
  display: block;
  text-align: left;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
  border: 1px solid #e5e7eb;
  color: #4b5563;
}
.opt3-btn-share:hover {
  background-color: #f8f9fa;
  color: var(--base-color);
  border-color: var(--base-color);
}

/* artikel detail  */

/* produk kategori  */
.swiper-kategori {
  padding: 20px 10px 50px 10px;
}

.kategori-card {
  transition: all 0.3s ease;
  border: 1px solid #f1f1f1;
  overflow: hidden;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kategori-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--base-color);
}

.kategori-img {
  max-height: 280px; /* Sesuaikan ukuran gambar kategori */
  width: auto;
  object-fit: contain;
}

/* Navigasi Kustom */
.custom-nav {
  width: 40px !important;
  height: 40px !important;
  background: #fff !important;
  border-radius: 50%;
  color: var(--base-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.custom-nav:after {
  font-size: 16px !important;
  font-weight: bold;
}

.custom-nav:hover {
  background: var(--base-color) !important;
  color: #fff !important;
}

.swiper-pagination-bullet-active {
  background: var(--base-color) !important;
}

/* produk kategori  */

/* gambar banner  */
.gambar-banner {
  height: 600px;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay agar gambar lebih dramatis */
.gambar-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.5)
  );
}

/* Animasi halus saat halaman dibuka */
.gambar-banner {
  animation: fadeInBanner 1.5s ease-in-out;
}

@keyframes fadeInBanner {
  from {
    opacity: 0;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* Responsif untuk Mobile */
@media (max-width: 768px) {
  .cta-gold-box {
    padding:20px !important;
  }
  .gambar-banner {
    height: 250px;
  }
}

/* gambar banner  */

.swiper-controls {
  display: none;
}

/* Default untuk Mobile (Layar di bawah 992px) */
.custom-padding-responsive {
    padding: 0 !important;
}

/* Khusus untuk Desktop (Layar 992px ke atas) */
@media (min-width: 992px) {
    .custom-padding-responsive {
        /* Sesuaikan kembali dengan nilai p-lg-6 Anda (sekitar 4rem - 5rem) */
        padding: 1.5rem !important; 
    }
}

/* Pastikan background tetap rapi */


/* card kelebihan  */
/* Base Card Style */
.card-modern-clean {
  /* Menggunakan cubic-bezier untuk gerakan yang lebih organik/mahal */
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  will-change: transform, box-shadow;
  background: #ffffff;
}

.img-wrapper-clean {
  /* height: 180px; */
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  /* Sesuai rounded-3 */
}

.img-wrapper-clean img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* Menambahkan transisi pada gambar agar zoom terasa smooth */
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
}

.content-text h3 {
  /* Transisi warna judul agar tidak langsung berubah */
  transition: color 0.3s ease;
}

/* Efek Hover Smooth */
.card-modern-clean:hover {
  /* Gerakan mengangkat sedikit lebih halus */
  transform: translateY(-8px);
  /* Shadow yang lebih dalam dan menyebar saat diangkat */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

.card-modern-clean:hover img {
  /* Zoom sedikit untuk efek depth */
  transform: scale(1.08);
}

.card-modern-clean:hover h3 {
  /* Warna berubah mengikuti base color */
  color: var(--base-color) !important;
}

/* Tambahan: Menghilangkan flicker pada beberapa browser mobile */
.card-modern-clean,
.card-modern-clean * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* card kelebihan  */

/* Transisi dasar untuk card */
.card.shadow-lg {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 15px; /* Opsional: agar lebih smooth */
}

/* Efek saat card di-hover */
.card.shadow-lg:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

/* Styling Ikon/Gambar */
.card-body img.icon-svg {
  transition: all 0.4s ease-in-out;
  display: inline-block;
  width: 50px; /* Sesuaikan ukuran ikon Anda */
  height: auto;
}

/* Animasi Ikon saat Card di-hover */
.card.shadow-lg:hover img.icon-svg {
  transform: scale(1.2); /* Membesar */
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}

/* Perbaikan minor untuk layout deskripsi */
.card-body .text-muted {
  font-size: 14px;
  line-height: 1.6;
}

/* layanan tambahan  */

/* Layanan Detail 2  */

/* ===== DETAIL HERO V2 ===== */

.detail-hero-v2 {
  position: relative;
  height: 100vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* BACKGROUND */

.detail-bg-v2 {
  position: absolute;
  inset: 0;
}

.detail-bg-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OVERLAY */

.detail-overlay-v2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 28, 45, 0.6),
    rgba(11, 28, 45, 0.9)
  );
}

/* CONTENT */

.detail-content-v2 {
  max-width: 750px;
  margin: auto;
  color: #fff;
  z-index: 2;
}

/* BADGE */

.badge-detail-v2 {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 12px;
  margin-bottom: 15px;
}

/* TITLE */

.detail-content-v2 h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
}

/* DESC */

.desc-v2 {
  font-size: 16px;
  opacity: 0.9;
  line-height: 1.8;
  margin-bottom: 30px;
}

/* ACTION */

.action-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* BUTTON */

.btn-wa-v2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 24px;

  background: linear-gradient(90deg, var(--base-color), var(--second-color));
  color: #fff;

  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;

  transition: 0.3s;
}

.btn-wa-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* SHARE */

.share-v2 {
  display: flex;
  gap: 10px;
}

.share-v2 a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: 0.3s;
}

.share-v2 a:hover {
  background: var(--base-color);
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .detail-content-v2 h1 {
    font-size: 28px;
  }

  .detail-hero-v2 {
    height: auto;
    padding: 80px 0;
  }
}
/* Layanan Detail 2  */

/* Detail artikel  */
.split-header-opt2 {
  padding: 50px 0;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 40px;
}
.split-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-right: 30px;
}
.meta-tags-opt2 span {
  background: #fff;
  padding: 5px 15px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  border: 1px solid #ddd;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.split-img-opt2 {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  object-fit: cover;
}

.sidebar-widget-opt2 {
  background: #fff;
  border-radius: 15px;
  padding: 25px;
  border: 1px solid #e9ecef;
  margin-bottom: 30px;
}
.sidebar-widget-opt2 h4 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--base-color);
  padding-bottom: 10px;
  margin-bottom: 20px;
  display: inline-block;
}

.list-popular-opt2 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list-popular-opt2 li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 15px;
}
.list-popular-opt2 li:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.list-popular-opt2 img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 15px;
}
.list-popular-opt2 .post-info h6 {
  font-size: 14px;
  margin-bottom: 5px;
  line-height: 1.4;
}
.list-popular-opt2 .post-info span {
  font-size: 11px;
  color: #888;
}

.social-float-opt2 {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}
.social-float-opt2 a {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  transition: 0.3s;
}
.social-float-opt2 a:hover {
  background: var(--base-color);
  color: #fff;
}

/* Detail Aritkel  */

/* Accordion faq  */
/* 1. PERBAIKAN STICKY */
/* Kita menggunakan class bawaan Bootstrap 'sticky-lg-top' atau custom CSS di bawah ini */
@media (min-width: 992px) {
  .sticky-faq-container {
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* Jarak dari atas layar */
    z-index: 10;
  }
}

/* Pastikan Parent Row tidak memiliki overflow hidden */
.faq-modern .row {
  overflow: visible !important;
}

/* 2. STYLE ACCORDION (Tetap sesuai desain Anda) */
.accordion-modern-style {
  --faq-accent: var(--second-color, var(--base-color));
  --faq-bg: #ffffff;
  --faq-radius: 16px;
}

.accordion-item-modern {
  background: var(--faq-bg);
  border-radius: var(--faq-radius) !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}

.accordion-item-modern:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border-color: var(--faq-accent);
}

.faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 24px;
  background: none;
  border: none;
  text-align: left;
  gap: 15px;
  outline: none !important;
}

.faq-indicator {
  width: 4px;
  height: 20px;
  background: #e0e0e0;
  border-radius: 10px;
  transition: 0.3s;
}

.faq-title-text {
  flex-grow: 1;
  font-weight: 500;
  color: #2d3436;
  font-size: 17px;
  transition: 0.3s;
}

.icon-state {
  font-size: 14px;
  color: #b0b0b0;
  transition: 0.3s;
}

.faq-btn:not(.collapsed) .faq-indicator {
  background: var(--faq-accent);
  height: 25px;
}

.faq-btn:not(.collapsed) .faq-title-text {
  color: var(--faq-accent);
}

.faq-btn:not(.collapsed) .icon-state {
  transform: rotate(135deg);
  color: var(--faq-accent);
}

.faq-content-body {
  padding: 0 24px 24px 43px;
}

.content-inner {
  color: #636e72;
  line-height: 1.8;
  font-size: 15px;
  border-top: 1px dashed #f0f0f0;
  padding-top: 15px;
}

/* Utility tambahan */
.fs-25 {
  font-size: 25px;
}
.fs-14 {
  font-size: 14px;
}
/* .primary-font { font-family: 'Poppins', sans-serif; } Sesuaikan font Anda */

@media (max-width: 991px) {
  .faq-btn {
    padding: 20px;
  }
  .faq-content-body {
    padding: 0 20px 20px 38px;
  }
}

.btn-faq {
  background-color: var(--second-color);
  color: black;
  padding: 4px 15px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: inline-block;
  user-select: none;
}

.btn-faq:hover {
  background-color: #e0c850; /* sedikit lebih terang dari var(--second-color), sesuaikan */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

.btn-faq:active {
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Accordion Faq  */

/* Layout Detail Split */
.detail-split-container {
  margin-bottom: 5rem;
}

.detail-visual {
  /* position: sticky; */
  top: 6rem;
}

.image-mask {
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.image-mask img {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.image-mask:hover img {
  transform: scale(1.05);
}

.content-header .badge-cat {
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  padding: 5px 15px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.content-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 15px;
}

.content-desc {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

/* CTA & Social Section */
.action-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 25px 0;
  margin: 30px 0;
}

.btn-wa-main {
  background: var(--second-color);
  color: white;
  border-radius: 50px;
  padding: 12px 30px;
  font-weight: 600;
  transition: 0.3s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-wa-main:hover {
  background: var(--base-color);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
}

.share-minimal {
  display: flex;
  gap: 10px;
}

.share-minimal a {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: 0.3s;
  font-size: 16px;
  text-decoration: none !important;
}

.share-minimal a:hover {
  background: var(--bs-primary);
  color: white;
  transform: scale(1.1);
}

/* Slider Paket Lainnya */
.other-package-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  transition: 0.4s;
  height: 100%;
  display: block;
  text-decoration: none !important;
  color: inherit;
}

.other-package-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05);
}

.other-package-card .img-box {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.other-package-card .info-box {
  padding: 20px;
}

.other-package-card h5 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 5px;
  transition: 0.3s;
}

.other-package-card:hover h5 {
  color: var(--bs-primary);
}

@media (max-width: 991px) {
  .content-title {
    font-size: 30px;
  }

  .detail-visual {
    position: relative;
    top: 0;
    margin-bottom: 30px;
  }
}
/* Layanan Detail  */

.icon2 img {
  width: 70%;
}

.text h4 {
  margin: 0;
  color: #062b91;
  font-size: 17px;
  font-weight: 500;
}

.text p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

/*Portofolio*/
.img-urun-container {
  margin: 5px;
  color: white;
  display: flex;
  flex-wrap: wrap;
}
.img-urun-container div {
  flex-grow: 1;
  height: 200px;
  margin: 5px;
  padding: 0px;
  border-radius: 5px;
  overflow: hidden;
}
.img-urun-container img {
  border-radius: 5px;
  object-fit: cover;
  object-position: center;
  width: 100%;
  margin: 0px;
  height: 200px;
  filter: brightness(40%);
  transition: 0.5s;
}
.img-urun-container div:hover img {
  transition: 0.5s 0.4s;
  filter: brightness(100%);
  transform: scale(1.5);
}
.img-urun-container h2,
.img-urun-container p,
.img-urun-container a {
  z-index: 10;
}
.img-urun-container h2 {
  position: absolute;
  margin-top: 65px;
  margin-left: 20px;
  color: white;
  font-size: 20px;
}
.img-urun-container p {
  position: absolute;
  margin-top: 120px;
  margin-left: 20px;
  font-size: 15px;
}
.img-urun-container a {
  font-size: 16px;
  position: absolute;
  margin-top: 150px;
  margin-left: 20px;
  text-decoration: none;
  padding: 7px;
  border-radius: 5px;
  color: white;
  border: 2px solid white;
  transition: 0.3s;
}

.img-urun-container a:hover {
  background: #fff;
  color: #000;
}

/*layanan*/
.card-wrapper {
  margin-bottom: 30px;
}
.card-image .card .card-img-wrapper {
  height: 100%;
}
.card-image .card .card-body {
  display: none;
}
.card-image-title-description .card .card-img-wrapper {
  max-height: 160px;
}
.card-image-title-description .card {
  position: relative;
  min-height: 300px;
}
.card-image-title-description .card .card-body {
  height: auto;
  position: relative;
  top: 0;
  margin-bottom: -70px;
}
.card-image-title-description .card:hover .card-body {
  /*  top: -70px;*/
}
.card-image-title-description .card .card-body .card-title {
  margin-bottom: 0.75rem;
}

.bg-subscribe {
  background:
    linear-gradient(rgb(102, 43, 129, 0.2), rgb(102, 43, 129, 0.2)),
    url("../Aset Desain/pakai/bg/subscribe-background.webp") no-repeat center
      center;
  border-radius: 15px;
}

.card-subscribe {
  background: #fff;
  border-radius: 12px;
  /* padding: 30px 20px; */
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* no shadow default */
}

.card-subscribe:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.card {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 10px;
}
.card:hover {
  background-color: #1a371c12;
  /* opacity: 0.03; */
  /* border: 1px solid var(--base-color);  */
  /* box-shadow: 8px 12px 31px -10px #ab98ab; */
}

/* CARD  Paket*/
.card-paket {
  background: #fff;
  padding: 12px;
  border-radius: 16px;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
}

/* Hover naik dikit (opsional) */
.card-paket:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
}

/* WRAPPER IMAGE */
.card-paket .img-wrapper {
  overflow: hidden;
  border-radius: 12px;
}

/* IMAGE */
.card-paket img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s ease;
  will-change: transform;
}

/* ZOOM SAAT HOVER */
.card-paket:hover img {
  transform: scale(1.08);
}

/* Card Paket  */

.card-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
  overflow: hidden;
}
.card-img-wrapper img {
  transition: 1.5s ease;
}
.card:hover .card-img-wrapper img {
  transform: scale(1.15);
}
.card-body .card-title {
  /*  margin-bottom: calc(50% + 20px);*/
  transition: 1.5s ease;
  text-align: center;
  margin-top: -20px;
  margin-bottom: 30px;
}
.card:hover .card-body .card-title {
  margin-bottom: 0.75rem;
}

.card-body {
  /* position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  background-color: #fff;
  transition: 1.5s ease; */
}
.card-content {
  left: 0;
  right: 0;
  /* overflow: hidden; */
  width: 100%;
  height: auto;
  transition: 1.5s ease;
}
.card:hover .card-body {
  height: 100%;
}
.card:hover .card-content {
  bottom: 0;
}

.card-title {
  font-size: 14px;
}
/*end layanan*/

.gradient-text-5 {
  background: linear-gradient(90deg, #000000 0%, #ddbc60 50%, #ffd450 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Kontak Section  */
.min-contact-1 {
  padding: 80px 0;
  background-color: #ffffff;
}
.min-title-1 {
  font-size: 2.5rem;
  font-weight: 400;
  color: #111;
  letter-spacing: -1px;
  margin-bottom: 10px;
}
.min-desc-1 {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 40px;
  font-weight: 300;
  line-height: 1.6;
}

.min-item-1 {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}
.min-item-1:hover {
  padding-left: 10px;
  border-bottom-color: #111;
  color: #111;
}

.min-item-1 i {
  font-size: 20px;
  margin-right: 20px;
  color: #111;
  width: 30px;
  text-align: center;
}
.min-item-1 .min-text h5 {
  margin: 0 0 5px 0;
  font-size: 20px;
  font-weight: 600;
  color: #111;
}
.min-item-1 .min-text p {
  margin: 0;
  font-size: 16px;
  color: #666;
}

.min-social-1 {
  margin-top: 30px;
  display: flex;
  gap: 15px;
}
.min-social-1 a {
  width: 45px;
  height: 45px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.2rem;
}
.min-social-1 a:hover {
  border-color: #111;
  background: #111;
  color: #fff;
}

.min-img-wrapper img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  aspect-ratio: 4/5;
}

/* Kontak Section  */

.orang-2-pakai-kontak {
  position: absolute;
  width: 20%;
  /*  right: 10px;*/
  left: 0;
  bottom: -170px;
  opacity: 0.2;
  animation: gerak 2s infinite alternate ease-in-out;
}

.orang-1-pakai {
  position: absolute;
  width: 20%;
  right: 10px;
  opacity: 0.2;
  animation: gerak 2s infinite alternate ease-in-out;
}

.orang-2-pakai {
  position: absolute;
  width: 20%;
  right: 10px;
  left: 0;
  opacity: 0.2;
  animation: gerak 2s infinite alternate ease-in-out;
}

ul.layanan {
  padding-left: 0;
  margin-bottom: 0;
}
ul.kontak {
  padding-left: 0;
  margin-bottom: 0;
}
.link-column ul li {
  font-size: 12px !important;
}

.logo-blur-pakai {
  position: absolute;
  width: 30%;
  top: -70px;
  right: 0;
  z-index: -1;
  opacity: 0.09;
  animation: gerak 2s infinite alternate ease-in-out;
}

.line-circle {
  position: absolute;
  width: 50%;
  top: 40;
  left: 0px;
  transform: scaleX(-1);
  z-index: 0;
  opacity: 0.3;
  animation: gerak 2s infinite alternate ease-in-out;
}
.corner-circle {
  position: absolute;
  width: 30%;
  top: 0;
  left: 0px;
  /* transform: scaleX(-1); */
  z-index: 0;
  opacity: 0.05;
  /* animation: gerak 2s infinite alternate ease-in-out; */
}

.line-cross {
  position: absolute;
  width: 30%;
  top: 0;
  left: -50px;
  transform: scaleX(-1);
  z-index: -1;
  opacity: 0.07;
  animation: gerak 2s infinite alternate ease-in-out;
}

.cable-atas-cross {
  position: absolute;
  width: 30%;
  bottom: 0px;
  right: 0;
  transform: scaleX(1);
  z-index: -1;
  opacity: 0.07;
  /* filter: brightness(1.2) sepia(1) saturate(5000%) hue-rotate(180deg); */
  animation: gerak 2s infinite alternate ease-in-out;
}

.cable-bawah-cross {
  position: absolute;
  width: 30%;
  /*  top: 0;*/
  bottom: -80px;
  /*  left: -50px;*/
  z-index: -1;
  opacity: 0.5;
  animation: gerak 2s infinite alternate ease-in-out;
}

.line-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0px;
  left: 0;
  right: 0;
  z-index: -1;
  opacity: 0.5;
  animation: zoomInOut 2s ease-in-out infinite;
  text-align: center;
}

@keyframes gerak {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(30px);
  }
}

@keyframes zoomInOut {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.visi-box {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.visi-box:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.misi-box {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.misi-box:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

/*Portofolio foto*/
.container {
  .main_header {
    padding-top: 10%;
  }

  .main_header__title {
    position: relative;
    height: 50px;
    vertical-align: baseline;
    color: #369593;
    text-transform: uppercase;
    font-size: 1.5em;
    margin-left: 1%;
  }
  .container__title {
    position: relative;
    height: 30px;
    vertical-align: baseline;
    font-size: 0.9em;
    font-weight: 400;
    color: #f6f6f6;
    text-transform: uppercase;
    border-bottom: 1px solid #f9f9f9;
  }

  /*    //gallery boxs*/
  .box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
  }
  .box {
    position: relative;
    height: 200px;
    border-radius: 8px;
    margin-bottom: 7%;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    a:hover .box__title {
      height: 35%;
      transition: 1s;

      p {
        opacity: 1;
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }

    .box__title {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 25%;
      background-color: #f6f6f6;
      border-radius: 0 0 8px 8px;
      vertical-align: middle;
      transition: 0.5s;
      transition-timing-function: ease-out;

      p {
        opacity: 0;
        text-align: center;
        color: #062b91;
        font-size: 0.8em;
        margin: 0;
        transition-delay: 0.2s;
        transition: 0.2s;
        transition-timing-function: ease-out;
      }

      h6 {
        text-align: center;
        color: black;
        text-transform: uppercase;
        margin: 7% 0 0 0;
        font-size: 0.9em;
      }
    }
  }

  /*    //add new box*/
  .add_box {
    @extend.box;
    background-color: #f9f9f9;

    a {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    svg {
      display: block;
      margin: auto;
      margin-top: 23.5%;
      transition: 0.3s;
      transition-timing-function: ease-out;
    }

    .add_box__title {
      position: absolute;
      width: 100%;
      text-align: center;
      color: #bababa;
      top: 60%;

      h6 {
        text-transform: uppercase;
      }
    }

    a:hover svg {
      margin-top: 21.5%;
    }
  }
}

/*Lightbox foto preview layanan*/
.lightboxpreview {
  transition: all 0.3s linear;
  padding-top: 60%;
  cursor: pointer;
  background-size: cover;
}

.lightbox-content {
  max-height: 75vh;
  height: 75vh;
  width: 100%;
  max-width: 1000px;
}

.lightbox-close {
  cursor: pointer;
  margin-left: auto;
  position: absolute;
  right: -30px;
  top: -30px;
  color: white;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.modal_inner_image {
  min-height: 400px;
  z-index: 1000;
}
.modal-content {
  width: 100%;
}

.modalscale {
  transform: scale(0);
  opacity: 0;
}

.lightbox-container,
.lightbox-btn,
.lightbox-image-wrapper,
.lightbox-enabled {
  transition: all 0.4s ease-in-out;
}
.lightbox_img_wrap {
  padding-top: 65%;
  position: relative;
  overflow: hidden;
}
.lightbox-enabled:hover {
  transform: scale(1.1);
}
.lightbox-enabled {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
  cursor: pointer;
}

.lightbox-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}

.lightbox-container.active {
  opacity: 1;
  pointer-events: all;
}
.lightbox-image-wrapper {
  display: flex;
  transform: scale(0);
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
  position: relative;
}
.lightbox-container.active .lightbox-image-wrapper {
  transform: scale(1);
}
.lightbox-btn,
#close {
  color: white;
  z-index: 9999999;
  cursor: pointer;
  position: absolute;

  font-size: 50px;
}

.lightbox-btn:focus {
  outline: none;
}

.left {
  left: 50px;
}
.right {
  right: 50px;
}
#close {
  top: 50px;
  right: 50px;
}

.lightbox-image {
  width: 100%;
  -webkit-box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.19);
  box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.19);
  max-height: 95vh;
  object-fit: cover;
}

@keyframes slideleft {
  33% {
    transform: translateX(-300px);
    opacity: 0;
  }
  66% {
    transform: translateX(300px);
    opacity: 0;
  }
}

.slideleft {
  animation-name: slideleft;
  animation-duration: 0.5s;
  animation-timing-function: ease;
}
@keyframes slideright {
  33% {
    transform: translateX(300px);
    opacity: 0;
  }
  66% {
    transform: translateX(-300px);
    opacity: 0;
  }
}

.slideright {
  animation-name: slideright;
  animation-duration: 0.5s;
  animation-timing-function: ease;
}

/* card layanan baru*/
.card-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  /* padding: 10px; */
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-icon,
.card-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

.card h3 {
  font-size: 18px;
  margin-bottom: 5px;
  color: #1a1a1a;
}

.card p {
  font-size: 14px;
  color: #777;
}

/*end card layanan baru*/

/* welcome text  */
.badge-floating {
  display: inline-block;
  padding: 4px 12px;
  background: var(--base-color);
  /* Menggunakan Navy Blue dari koleksi Anda */
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
  position: relative;
}

.badge-floating::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 15px;
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: var(--base-color) transparent transparent;
}

.btn-modern-primary {
  background: var(--base-color);
  color: white;
  padding: 12px 25px;
  border-radius: 50px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 600;
  transition: 0.3s all ease;
}

.btn-modern-primary:hover {
  transform: scale(1.05);
  background: var(--second-color);
  color: white;
}

.link-explore {
  display: inline-flex; /* Menggunakan inline-flex agar lebar sesuai konten */
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.explore-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--base-color);
  font-size: 14px; /* Sedikit disesuaikan agar ikon pas di tengah */
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* Animasi naik turun pada icon saat hover */
.link-explore:hover .explore-circle i {
  animation: arrow-bounce 0.8s infinite alternate ease-in-out;
}

.link-explore:hover .explore-circle {
  background: var(--base-color);
  color: white;
  box-shadow: 0 4px 12px rgba(70, 151, 115, 0.3); /* Efek shadow halus */
}

/* Teks hover effect */
.link-explore:hover span {
  color: var(--base-color) !important;
}

/* Keyframes untuk gerakan naik turun */
@keyframes arrow-bounce {
  0% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(3px);
  }
}

/* Opsional: Menghilangkan outline biru saat di-klik */
.link-explore:focus {
  outline: none;
}

.vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  margin: 0;
  font-size: 1.2rem;
  opacity: 0.9;
}

.border-start-md {
  border-left: 1.5px solid #eee;
}

.badge-soft {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(70, 151, 115, 0.1);
  /* Sesuai base-color */
  color: var(--base-color);
  border-radius: 50px;
  font-weight: 600;
  font-size: 13px;
  text-uppercase: uppercase;
  letter-spacing: 1px;
}

.img-frame-accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 80%;
  border: 8px solid rgba(70, 151, 115, 0.1);
  border-radius: 20px;
  z-index: 0;
}

@media (max-width: 768px) {
  .border-start-md {
    border: none;
    padding-left: 0 !important;
  }
}
/* welcome text  */

/*icon share button*/

.thing2 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  float: left;
  height: 48px;
  line-height: 48px;
  border-radius: 3px;
  margin-top: 10px;
  clear: both;
  float: right;
}
.thing2:after {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  content: "";
}
.thing2:active:after {
  height: 0;
  z-index: -1;
  opacity: 0;
}
.thing2__text {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: #4a524c;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.thing2__content {
  position: relative;
  height: inherit;
}
.thing2__content:after,
.thing2__content:before {
  content: "";
  display: none;
  height: 100%;
  position: absolute;
  width: 6px;
  z-index: -1;
}
.thing2__content:after {
  left: -6px;
}
.thing2__content:before {
  right: -6px;
}
.thing2__content:hover {
  z-index: 1000;
}
.thing2__content:hover:after,
.thing2__content:hover:before {
  display: block;
}
.thing2__content:hover .thing2__text {
  transition: 0s all ease-out;
  transition-delay: 0s;
  opacity: 0;
  z-index: -1;
}
.thing2__content:hover .thing2__social {
  width: 48px;
  border-radius: 3px;
  margin-left: 6px;
}
.thing2__content:hover .thing2__social--first {
  margin-left: 0;
}
.thing2__content:hover .thing2__social:after {
  opacity: 1;
}
.thing2__content:hover .thing2__social--facebook {
  background-color: #496094;
}
.thing2__content:hover .thing2__social--twitter {
  background-color: #4ac4f3;
}
.thing2__content:hover .thing2__social--linkedin {
  background-color: #2388d6;
}
.thing2__content:hover .thing2__social--google {
  background-color: #da4835;
}
.thing2__social {
  position: relative;
  display: block;
  height: 48px;
  width: 26.6666666667px;
  float: left;
  color: white;
  background-color: #4a524c;
  transition: all 0.15s ease-out;
}
.thing2__social--first {
  border-radius: 3px 0 0 3px;
}
.thing2__social--last {
  border-radius: 0 3px 3px 0;
}
.thing2__social:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: FontAwesome;
  text-align: center;
  font-size: 20px;
  line-height: 48px;
  content: "";
  opacity: 0;
  transition: 0.15s all ease-out;
}
.thing2__social--facebook:after {
  content: "";
}
.thing2__social--twitter:after {
  content: "";
}
.thing2__social--linkedin:after {
  content: "";
}
.thing2__social--google:after {
  content: "";
}
.thing2__text {
  color: white;
  font-weight: bold;
  font-size: 18px;
}

.swiper-hero,
.swiper-hero .swiper-slide {
  /* height: auto !important; */
  height: 600px !important;
}

.jdl-layanan {
  font-size: 14px;
}
.card-icon {
  width: 50% !important;
}
.logo-layanan {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

.judul-kontak::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 2px;
  margin-top: 20px;
  background-color: #fe6601;
}

.video-icon i {
  margin: 0;
}

.navbar-expand-lg.navbar-light
  .dropdown:not(.dropdown-submenu)
  > .dropdown-toggle:after {
  display: none;
}
.dropdown-menu {
  width: 200%;
}

.layanan-mobile {
  display: none;
}

.desc-keunggulan-mobile {
  display: none;
}

/* Title web  */
.title-web {
  position: relative;
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  padding: 0 20px;
  letter-spacing: 1px;
}

/* Garis kiri */
.title-web::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 30px;
  height: 2px;
  background: var(--base-color);
  transform: translateY(-50%);
  border-radius: 5px;
}

/* Garis kanan */
.title-web::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  width: 30px;
  height: 2px;
  background: var(--base-color);
  transform: translateY(-50%);
  border-radius: 5px;
}

/* Title web  */

/* Slider  */
.swiper-slide {
  position: relative;
  overflow: hidden;
}

.swiper-slide .content {
  position: absolute;
  top: 80%;
  left: 35%;
  transform: translate(-50%, -50%);
  z-index: 5;
  max-width: 800px;
  width: 100%;
  padding: 0 15px;
}

/* Default (hidden) */
/* .swiper-slide .content span,
.swiper-slide .content h1,
.swiper-slide .content div {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: all 1.1s ease;
} */

/* Active slide */
.swiper-slide-active .content span {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.2s;
}

.swiper-slide-active .content h1 {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.4s;
}

.swiper-slide-active .content div {
  opacity: 1;
  /* transform: translateY(0) scale(1); */
  transition-delay: 0.6s;
}

/* .swiper-slide-active .content .btn-slider-1,
.swiper-slide-active .content .btn-slider-2 {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.8s;
} */

img.img-layanan {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 10s ease;
  border-radius: 10px;
}

/* Zoom hanya pada slide aktif slider gambar */
.swiper-slide-active img {
  /* transform: scale(1.1); */
}

.swiper-slide img {
  object-position: top center;
}

/* Card Galeri marquee  */
/* MARQUEE */
.marquee {
  overflow: hidden;
  position: relative;
}

/* track */
.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
}

/* arah animasi (LEBIH LAMBAT) */
.marquee-left {
  animation: scrollLeft 60s linear infinite;
}

.marquee-right {
  animation: scrollRight 60s linear infinite;
}

/* PAUSE SAAT HOVER */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* animasi */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* ITEM */
.marquee-item {
  width: 220px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
  pointer-events: none;
  /* penting biar klik ke parent */
}

/* overlay */
.marquee-item .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  transition: 0.3s;
}

/* hover */
.marquee-item:hover img {
  transform: scale(1.08);
}

.marquee-item:hover .overlay {
  opacity: 1;
}

/* LIGHTBOX */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}
/* Card Galeri marquee  */

/* Galeri  */
.galeri-grid-section {
  background: #070f18;
}

/* GRID */

.galeri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 200px;
  grid-gap: 18px;
}

/* ITEM */

.grid-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* RANDOM HEIGHT */

.grid-item:nth-child(2) {
  grid-row: span 2;
}

.grid-item:nth-child(5) {
  grid-row: span 2;
}

.grid-item:nth-child(7) {
  grid-row: span 2;
}

/* IMAGE */

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

/* OVERLAY */

.grid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.35s;
}

.grid-overlay i {
  color: #fff;
  font-size: 22px;
}

/* HOVER */

.grid-item:hover img {
  transform: scale(1.08);
}

.grid-item:hover .grid-overlay {
  opacity: 1;
}

/* Galeri  */

/* Marque Galeri  */
/* MARQUEE */
.marquee {
  overflow: hidden;
  position: relative;
}

/* track */
.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
}

/* arah animasi (LEBIH LAMBAT) */
.marquee-left {
  animation: scrollLeft 60s linear infinite;
}

.marquee-right {
  animation: scrollRight 60s linear infinite;
}

/* PAUSE SAAT HOVER */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* animasi */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* ITEM */
.marquee-item {
  width: 220px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
  pointer-events: none;
  /* penting biar klik ke parent */
}

/* overlay */
.marquee-item .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  transition: 0.3s;
}

/* hover */
.marquee-item:hover img {
  transform: scale(1.08);
}

.marquee-item:hover .overlay {
  opacity: 1;
}

/* LIGHTBOX */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}
/* Marque Galeri  */

/* Slider  */

/* Galeri Masonry  */
/* === MASONRY GRID === */
/* GRID UTAMA */
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 15px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .mosaic-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 576px) {
  .mosaic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ITEM */
.mosaic-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mosaic-item:hover img {
  transform: scale(1.08);
}

/* overlay dengan icon FA */
.mosaic-item .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mosaic-item:hover .overlay {
  opacity: 1;
}

.mosaic-item .overlay i {
  color: #fff;
  font-size: 2rem; /* sesuaikan ukuran */
}

/* Gambar besar atas */
.item-0 {
  grid-column: span 2;
  grid-row: span 2;
}

/* Medium */
.item-1 {
  grid-column: span 2;
  grid-row: span 1;
}

.item-2 {
  grid-column: span 1;
  grid-row: span 1;
}

/* Tinggi */
.item-3,
.item-4,
.item-5 {
  grid-column: span 1;
  grid-row: span 2;
}

/* Kecil bawah */
.item-6,
.item-7,
.item-8 {
  grid-column: span 1;
  grid-row: span 1;
}

/* Tinggi */
.item-9,
.item-10,
.item-11 {
  grid-column: span 1;
  grid-row: span 2;
}

.ml-2 {
  margin-left: 10px;
}
.mr-2 {
  margin-right: 10px;
}

/* GRID */
.gallery-card {
  display: block;
  width: 100%;
}

/* IMAGE WRAPPER */
.gallery-img {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* IMAGE */
.gallery-img img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.45s ease;
}

/* HOVER ZOOM */
.gallery-card:hover img {
  transform: scale(1.08);
}

/* OVERLAY */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: 0.35s;
}

/* SHOW OVERLAY */
.gallery-card:hover .gallery-overlay {
  opacity: 1;
}

/* ICON */
.gallery-overlay i {
  color: #fff;
  font-size: 26px;
  transform: scale(0.8);
  transition: 0.3s;
}

.gallery-card:hover .gallery-overlay i {
  transform: scale(1);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .gallery-img img {
    height: 200px;
  }
}

@media (max-width: 576px) {
  .gallery-img img {
    height: 160px;
  }
}

/* galeri masonry  */

/* Card Artikel  */
.card-royal {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 0;
  /* Boxy look lebih terlihat premium untuk fashion */
  transition: all 0.4s ease;
}

.royal-img-box {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.royal-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s ease;
}

.royal-date {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #fff;
  padding: 6px 10px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.royal-content {
  padding: 25px;
  text-align: center;
}

.royal-meta {
  font-size: 10px;
  text-transform: uppercase;
  color: #a67c00;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.royal-title {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 15px;
}

.royal-text {
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}

.btn-royal-link {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 2px solid #ffbf00;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

/* Hover Effect */
.card-royal:hover {
  border-color: #ffbf00;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.card-royal:hover .royal-img-box img {
  transform: scale(1.1);
}

.btn-royal-link:hover {
  letter-spacing: 2px;
  color: #a67c00;
}

/* Card Artikel  */

@media only screen and (min-width: 768px) {
  .overlap-grid-2 .item:nth-child(2) {
    width: 55%;
    margin-top: 25%;
    right: 0px;
    z-index: 4;
    position: absolute;
  }
  .overlap-grid-2 .item:nth-child(1) {
    width: 80%;
    margin-top: 0;
    margin-left: 10%;
    z-index: 3;
  }

  .overlap-grid-2.about .item:nth-child(2) {
    width: 55%;
    margin-top: 45%;
    right: 0px;
    z-index: 4;
    position: absolute;
  }
  .overlap-grid-2.about .item:nth-child(1) {
    width: 80%;
    margin-top: 0;
    margin-left: 10%;
    z-index: 3;
  }
}

/* FAQ Accordion  */

.faq-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.faq-item {
  border-radius: 12px;
  border: 1px solid #eee;
  background: #fff;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
}

/* hover */
.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* question */
.faq-question {
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s;
}

/* arrow */
.faq-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  transition: 0.3s;
}

/* answer */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}

.faq-content {
  padding: 0 20px 20px 20px;
  color: #666;
  line-height: 1.7;
  font-size: 15px;
}

/* active state */
.faq-item.active {
  border-color: var(--second-color);
  background: linear-gradient(180deg, #fff, #faf7f0);
}

.faq-item.active .faq-question {
  color: var(--second-color);
}

.faq-item.active .faq-arrow {
  background: var(--second-color);
  color: #fff;
  transform: rotate(180deg);
}

.faq-item.active .faq-answer {
  max-height: 300px;
}

.faq-bottom {
  margin-top: auto;
  padding: 25px;
  border-radius: 12px;
  background: #f8f8f8;
}
/* FAQ Accordion  */

/* testimoni  */
.wrapper-testi {
  background-color: #fcfcfc;
}

.testi-slider-container {
  position: relative;
  width: 100%;
  /* Efek Gradasi Putih di Kanan dan Kiri */
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.marquee-wrapper {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 20px;
}

.marquee-content {
  display: flex;
  flex-shrink: 0;
  gap: 20px;
  min-width: 100%;
  animation: scroll-left 40s linear infinite;
}

/* Pause saat di hover */
.marquee-wrapper:hover .marquee-content {
  animation-play-state: paused;
}

.marquee-reverse {
  animation: scroll-right 40s linear infinite;
}

/* Animasi Gerak */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 10px));
  }
}

@keyframes scroll-right {
  from {
    transform: translateX(calc(-50% - 10px));
  }

  to {
    transform: translateX(0);
  }
}

/* Styling Card Testimoni */
.testi-card {
  background: #fff;
  width: 350px;
  padding: 30px;
  border-radius: 15px;
  border: 1px solid #eee;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.testi-card:hover {
  border-color: var(--base-color);
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.testi-icon {
  color: var(--base-color);
  font-size: 24px;
  margin-bottom: 15px;
  opacity: 0.5;
}

.testi-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  height: 70px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 20px;
  font-style: italic;
}

.testi-user {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #f5f5f5;
  padding-top: 15px;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 700;
  color: #333;
  font-size: 14px;
}

.user-origin {
  font-size: 12px;
  color: var(--base-color);
  font-weight: 600;
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .shadow-2xl{
        box-shadow:none !important;
    }
  .testi-card {
    width: 280px;
    padding: 20px;
  }

  .marquee-content {
    animation-duration: 25s;
  }
}
/* Testimoni  */

/* Blog Text  */
.floating-footer-text {
  font-size: clamp(40px, 10vw, 100px);
  font-weight: 800;
  text-align: center;
  opacity: 0.09;
  background: linear-gradient(to bottom, #000, transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulseText 5s ease-in-out infinite;
  pointer-events: none;
  position: absolute;
  display: flex;
  justify-content: center;
  left: 15%;
  margin-top: -30px;
  z-index: 2;
}

@keyframes pulseText {
  0%,
  100% {
    opacity: 0.04;
    transform: translateY(0);
  }

  50% {
    opacity: 0.08;
    transform: translateY(-10px);
  }
}
/* Blog text  */

/* ##MOBILE HP*/
@media only screen and (max-width: 600px) {
  .c-social-btn:hover i{
    color: white !important;
  }
  section.header-split .content-box {
    left: 0px;
  }
  .floating-footer-text {
    font-size: 35px !important;
    left: 20px !important;
    margin-top: 30px !important;
  }
  .category-overlay .meta {
    font-size: 10px !important;
  }
  .content-box {
    left: 30px;
    position: relative;
  }
  .nav-link.dropdown-toggle.dropdown-toggle-split.btn-toggle-kategori {
    right: -160px !important;
    top: -17px !important;
  }
  .kategori-tag {
    font-size: 7px !important;
    font-weight: 500;
  }
  .step-item-card {
    flex-direction: column;
  }
  a.nav-link {
    font-size: 14px;
  }
  .overlap-text-card {
    padding: 0 !important;
    box-shadow: none !important;
    margin-top: 30px;
  }
  .overlap-image-wrapper {
    box-shadow: none !important;
  }
  .keunggulan-overlap-wrapper {
    margin-top: -200px !important;
  }
  .title-split {
    font-size: 25px !important;
  }
  .cta-layout-2 {
    padding: 0;
  }
  .cta-floating-card {
    padding: 10px;
  }
  .btn-cta-green {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
  }
  .bg-cta {
    /* height: 440px !important; */
  }
  .swiper-hero {
    height: 100vh !important;
  }
  .swiper-container .swiper img {
    /* height: 100vh; */
  }
  .content {
    top: 250px;
    padding: 5px !important;
    /* left: 30px !important; */
  }

  .bg-stats {
    border-radius: 0px !important;
    margin-top: -40px;
  }

  .card-subscribe {
    width: 80%;
  }
  .bg-subscribe {
    background-size: cover;
  }
  .image-wrapper {
    height: 300px !important;
  }

  .flex-mobile {
    flex-direction: column !important;
  }

  .desc-keunggulan-desktop {
    display: none;
  }
  .desc-keunggulan-mobile {
    display: block;
  }

  .layanan-desktop {
    display: none;
  }
  .layanan-mobile {
    display: block;
  }
  .icon1 {
    width: 20%;
  }
  .icon2 {
    /*    width: 20%;*/
    width: 110px;
    height: 60px;
    background-color: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* BOX SHADOW */
  }
  img.icon2 {
    /*    width: 100%;*/
  }
  .orang-2-pakai-kontak {
    display: none;
  }

  .pricing .plan {
    width: 100% !important;
    margin-top: 60px !important;
  }
  .card-icon {
    width: 50%;
  }
  .swiper-slide {
    background-size: cover;
    width: 100%;
  }

  .swiper-hero,
  .swiper-hero .swiper-slide {
    /* height: 150px !important; */
    width: 100% !important;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .card-icon {
    width: 50% !important;
  }

  .jdl-layanan {
    font-size: 14px;
  }
  .logo-mobile {
    left: 160px !important;
  }
  .navbar-expand-lg.navbar-light
    .dropdown:not(.dropdown-submenu)
    > .dropdown-toggle:after {
    display: flex;
  }

  .submenu-icon-content {
    width: 100%;
    color: white;
  }
  .navbar .navbar-nav .nav-link::before {
    display: none;
  }
  .dropdown-menu {
    width: 100%;
  }
}

.icon-highlight {
  position: absolute;
  width: 10%;
  left: 0;
  opacity: 0.5;
  animation: moveLeftRight 2s infinite ease-in-out;
}

.icon-highlight-mirror {
  position: absolute;
  width: 10%;
  right: 0;
  opacity: 0.5;
  transform: scaleX(-1);
  animation: moveRightLeft 2s infinite ease-in-out;
}

@keyframes moveLeftRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes moveRightLeft {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0);
  }
}

/* hero section  */
.hero-opt6 {
  padding: 80px 0;
  background-color: #dc0d0a0a;
  overflow: hidden;
}

/* CARD */
.overlap-text-card {
  background: #ffffff;
  padding: 50px 40px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 5;
  margin-right: -80px;
}

/* IMAGE */
.overlap-img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 20px;
}

/* ========================= */
/* 📱 MOBILE RESPONSIVE */
/* ========================= */
@media (max-width: 991px) {
  .hero-opt6 {
    padding: 10px 0;
  }

  /* TEXT CARD */
  .overlap-text-card {
    margin-right: 0;
    margin-bottom: -60px; /* overlap ke bawah (lebih smooth) */
    padding: 25px 20px;
    border-radius: 16px;
    text-align: center; /* optional biar rapi */
  }

  /* IMAGE */
  .overlap-img {
    height: 250px;
    border-radius: 16px;
  }

  /* GARIS */
  .overlap-text-card div[style*="width: 300px"] {
    margin-left: auto;
    margin-right: auto;
    width: 120px !important;
  }

  /* BUTTON FULL */
  .overlap-text-card .btn {
    width: 100%;
    padding: 10px;
  }

  /* ICON */
  .overlap-text-card i {
    font-size: 20px;
  }
}
/* hero section  */

/* --- CONTACT MODERN STYLE --- */
.contact-modern-section {
  padding: 100px 0;
  background: #ffffff;
}

.fw-800 {
  font-weight: 800;
}
.tracking-wider {
  letter-spacing: 2px;
}

/* Contact Card Item */
.contact-card-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #9700370d;
  border-radius: 18px;
  border: 1px solid #f1f5f9;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-card-item:hover {
  background: #ffffff;
  transform: translateX(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px dashed #dc0d0a87 !important ;
}

.item-icon {
  width: 55px;
  height: 55px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 20px;
  transition: 0.3s;
  min-width: 55px;
  max-width: 55px;
}

.wa-color {
  background: #dc0d0a21;
  color: white;
}
.phone-color {
  background: #dc0d0a21;
  color: white;
}
.email-color {
  background: #dc0d0a21;
  color: white;
}
.map-color {
  background: #dc0d0a21;
  color: white;
}

.item-text small {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.item-text h5,
.item-text span {
  margin-bottom: 0;
  font-weight: 700;
  color: #1e293b;
  font-size: 1.1rem;
}

.item-text a {
  text-decoration: none;
  color: inherit;
}

/* Social Pill */
.social-modern-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-pill {
  padding: 8px 18px;
  background: #797c7f14;
  border-radius: 50px;
  color: #475569;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
}

.social-pill:hover {
  background: #1e293b;
  color: #fff;
  transform: translateY(-3px);
}

/* Map Container */
.map-container-premium {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
  /* height: 100%; */
  line-height: 0;
}

.map-overlay-badge {
  position: absolute;
  top: 25px;
  left: 25px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 12px 20px;
  border-radius: 12px;
  z-index: 10;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.pulse-red {
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(239, 68, 68, 0.4);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@media (max-width: 991px) {
  .contact-modern-section {
    padding: 60px 0;
  }
  .map-container-premium {
    height: 400px;
    margin-top: 40px;
  }
}

/*footer*/

/* footer baru  */
.footer-opt3 {
  background:
    linear-gradient(
      to bottom,
      rgb(15, 23, 42) 0%,
      /* atas lebih gelap */ rgba(15, 23, 42, 0.896) 30%,
      rgba(15, 23, 42, 0.944) 60%,
      rgba(15, 23, 42, 0.827) 100% /* bawah lebih transparan */
    ),
    url("../Aset Desain/pakai/bg/10.webp") center/cover no-repeat;

  color: #94a3b8;
  padding-top: 80px;
}

.footer-opt3 .nav-inline a {
  color: #e2e8f0;
  text-decoration: none;
  margin: 0 15px;
  font-weight: 500;
  transition: 0.3s;
  display: inline-block;
  margin-bottom: 10px;
}

.footer-opt3 .nav-inline a:hover {
  color: var(--second-color);
}

.footer-opt3 .contact-badges {
  margin-top: 30px;
}

.footer-opt3 .contact-badges a {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  border-radius: 50px;
  padding: 8px 20px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin: 5px;
  transition: 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-opt3 .contact-badges a:hover {
  background: var(--second-color);
  color: #fff;
  border-color: var(--second-color);
}

.footer-opt3 .contact-badges i {
  margin-right: 8px;
}

.social-opt3 {
  margin-top: 40px;
}

.social-opt3 a {
  display: inline-flex;
  width: 45px;
  height: 45px;
  background: transparent;
  color: #94a3b8;
  border: 2px solid #334155;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  transition: 0.3s;
  font-size: 1.2rem;
  text-decoration: none;
}

.social-opt3 a:hover {
  border-color: var(--second-color);
  color: var(--second-color);
  transform: scale(1.1);
}

.footer-bottom-opt3 {
  padding: 25px 0;
  margin-top: 60px;
  border-top: 1px solid #1e293b;
  text-align: center;
  font-size: 0.9rem;
}
/* footer baru  */

/* .footer-gradient {
  position: relative;
  background: linear-gradient(to right, #4a81de 0%, #2466ca 50%, #0449a7 100%), url('../../Aset Desain/pakai/bg/7.webp');
  overflow: hidden;
} */

.footer-gradient {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(74, 129, 222, 0.95) 0%,
      rgba(36, 102, 202, 0.95) 50%,
      rgba(4, 73, 167, 0.95) 100%
    ),
    url("../Aset Desain/pakai/bg/7.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

footer {
  /*  background: linear-gradient(to right, #4b01b0, #6a00ff);*/
  background: #4382aa;
  color: #fff;
  /* padding: 2rem 1rem 1rem; */
  position: relative;
  /* border-radius: 50px 50px 0px 0px; */
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.footer-about {
  flex: 1 1 250px;
}

.footer-about h3 {
  margin-bottom: 1rem;
  color: #00ffc3;
}

.footer-about p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.footer-links {
  display: flex;
  flex: 2 1 600px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.link-column {
  min-width: 120px;
}

.link-column h4 {
  color: white;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.link-column ul {
  list-style: none;
}

.link-column ul li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  /* margin-top: 2rem; */
  padding-top: 1rem;
  padding-bottom: 2px;
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.social-icons a {
  color: var(--second-color);
  text-decoration: none;
  margin-right: 1rem;
  font-size: 1.2rem;
}

/* Simple social icons using Unicode */
.social-icons a::before {
  margin-right: 0.5rem;
}

.social-icons a[href*="twitter"]::before {
  content: "🐦";
}
.social-icons a[href*="instagram"]::before {
  content: "📸";
}
.social-icons a[href*="facebook"]::before {
  content: "📘";
}

@media (max-width: 768px) {
  .footer-links {
    flex-direction: column;
    gap: 1rem;
  }
}

#type1 {
  /*background-color:#42a5f5;
  padding-bottom: 50px;*/
}
.btn-1 {
  text-align: center;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #33bbfb0f;
  cursor: pointer;
  background-color: #0039a2;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  color: white;
  margin: 0 20px;
  border-radius: 30px;
}

.btn-1:before {
  content: "";
  position: absolute;
  height: 150px;
  width: 50px;
  background: #009bff;
  left: -55px;
  top: -40px;
  transform: rotate(37deg);
  transition: all 0.3s;
  opacity: 0.5;
}

.btn-1:hover:before {
  left: 95%;
}

/*kontak kami*/
.background {
  height: 100%;
  width: 100%;
  position: relative;
  color: white;
}

.content {
  position: absolute;
  z-index: 2;
  /* left: 50px; */
  /* max-width: 600px; */
  /* padding: 40px; */
  display: flex;
  flex-direction: column;
  justify-content: left;
}

.content h1 {
  font-size: 30px;
  margin-bottom: 20px;
}

.content div {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 30px;
  max-width: 800px;
}

.animated-zoom {
  animation: animatedBackground 7s linear infinite alternate;
}
@keyframes animatedBackground {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

.overlay {
  /* background-color: rgba(0, 0, 0, 0.6); */
  /* height: 100%;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.form-container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.info-boxes {
  flex: 1 1 45%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.info-box {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 1rem;
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
  position: relative;
}

.info-box:hover {
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}
.info-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: white;
  transition: width 0.3s ease;
}

.info-box:hover::after {
  width: 100%;
}

.info-box h4 {
  margin-bottom: 0.5rem;
  color: #ff5722;
  font-size: 18px;
  font-weight: 400;
}

.info-box p,
.info-box a {
  font-size: 14px;
  color: #ddd;
  text-decoration: none;
  font-weight: 400;
}

@media (max-width: 768px) {
  .form-container {
    flex-direction: column;
  }

  .info-boxes {
    grid-template-columns: 1fr;
  }
}

/*home*/

/*    Paket Harga*/
.pricing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .plan {
    background-color: #fff;
    margin: 12px;
    border-radius: 5px;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
    width: 30%;
    box-shadow: 10px 10px 50px -28px rgba(0, 0, 0, 0.37);
    padding-top: 10px;
    padding-bottom: 10px;

    h2 {
      font-size: 22px;
      margin-bottom: 12px;
    }

    .price {
      margin-bottom: 1rem;
      font-size: 17px;
    }

    ul.features {
      list-style-type: none;
      text-align: left;
      font-size: 14px;
      padding: 0;
      li {
        margin: 8px;
        display: flex;
        align-items: baseline;
        .fas {
          margin-right: 4px;
        }
        .fa-check-circle {
          color: #6ab04c;
        }
        .fa-times-circle {
          color: #eb4d4b;
        }
      }
    }

    &.popular {
      border: 2px solid #fe6601;
      position: relative;
      transform: scale(1.08);

      span.most {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fe6601;
        color: #fff;
        padding: 4px 20px;
        font-size: 14px;
        border-radius: 5px;
      }
    }

    &:hover {
      box-shadow: 5px 7px 67px -28px rgba(0, 0, 0, 0.37);
    }
  }
}

.paket-lain {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: all 0.3s ease;
  background: linear-gradient(
    143deg,
    rgba(6, 43, 145, 0.34) 25%,
    rgba(251, 100, 4, 0.46) 83%
  );
  border-radius: 15px;
}

.paket-lain:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
  /*  border-bottom: 3px solid #002f87; /* biru navy */
}

.swiper {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.btn-cta {
  background: var(--second-color);
  border-radius: 35px;
  width: 20%;
  border: 1px solid white;
  color: white;
  padding: 15px 20px;
}

.btn-cta:hover {
  background: var(--third-color);
  color: var(--base-color);
  font-weight: 600;
}

/* Slider Gambar  */
/* Container Dasar */
.swiper-hero {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: #000;
}

/* Background & Animasi Zoom */
.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animated-zoom {
  transform: scale(1);
  transition: transform 12s linear;
}

.swiper-slide-active .animated-zoom {
  transform: scale(1.18);
}

/* Overlay Adventure: Hijau Tua Ke Hitam Transparan */
.overlay-adventure-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(10, 40, 10, 0.95) 0%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 0.2) 100%
  );
  z-index: 2;
}

/* Content Positioning (Center-Left) */
.content {
  position: relative;
  height: 100vh;
  z-index: 3;
}

.border-primary-custom {
  border-color: #256eb5 !important;
  /* Warna biru sesuai palette Anda */
}

/* Tipografi */
.brand-tag {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

.hero-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 54px;
  line-height: 1.1;
  text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.4);
}

.hero-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 1.6;
  max-width: 580px;
}

/* Button Hero */
.btn-hero {
  padding: 14px 30px;
  border-radius: 8px; /* Sudut sedikit lebih lembut */
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Jarak antara ikon dan teks */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efek pegas saat hover */
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: none;
  cursor: pointer;
}

/* Efek Kilau (Shine Effect) saat Hover */
.btn-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: all 0.6s;
  z-index: -1;
}

.btn-hero:hover::before {
  left: 100%;
}

/* Button Tour (Base Color) */
.btn-tour {
  background-color: transparent;
  color: white;
  box-shadow: 0 4px 15px rgba(70, 151, 115, 0.3);
  border: 2px solid;
}

.btn-tour:hover {
  background-color: #3a7e60; /* Sedikit lebih gelap saat hover */
  box-shadow: 0 8px 25px rgba(70, 151, 115, 0.5);
  color: white !important;
}

/* Button WhatsApp (Branding Color) */
.btn-wa {
  background-color: var(--base-color);
  color: white;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btn-wa:hover {
  background-color: var(--second-color);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
  color: white !important;
}

/* Global Hover State */
.btn-hero:hover {
  transform: translateY(-5px) scale(1.02);
  color: var(--white);
}

.btn-hero:active {
  transform: translateY(-2px) scale(0.98);
}

/* Tipografi & Ikon */
.btn-hero i {
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .btn-hero {
    padding: 6px 14px;
    font-size: 14px;
    width: 100%; /* Tombol full width di mobile agar lebih mudah ditekan */
  }
}

/* Animasi Slide-In From Left */
.animate-item {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.swiper-slide-active .animate-item {
  opacity: 1;
  transform: translateX(0);
}

.delay-1 {
  transition-delay: 0.3s;
}

.delay-2 {
  transition-delay: 0.5s;
}

.delay-3 {
  transition-delay: 0.7s;
}

/* Responsive Mobile */
@media (max-width: 768px) {
  .hero-title {
    font-size: 32px;
  }

  .hero-desc {
    font-size: 15px;
  }

  .btn-hero {
    padding: 6px 12px;
    font-size: 12px;
  }

  .btn-hero i {
    font-size: 12px;
  }

  .overlay-adventure-left {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.9)
    );
  }
}

/* Pastikan content memenuhi layar agar bisa centering */
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Wajib 100% untuk align-items-center */
  z-index: 5;
}

.content-box {
  /* Mencegah teks terlalu mepet ke atas/bawah pada mobile */
  padding-top: 20px;
  padding-bottom: 20px;
}

.border-primary-custom {
  border-color: #256eb5 !important;
  /* Gunakan palet biru Anda */
}

/* Overlay agar gambar tidak menutupi teks */
.overlay-adventure-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
  z-index: 2;
}

/* Animasi Slide dari Kiri */
.animate-item {
  opacity: 0;
  transform: translateX(-40px);
  /* Efek muncul dari arah kiri */
  transition: all 0.8s ease-out;
}

.swiper-slide-active .animate-item {
  opacity: 1;
  transform: translateX(0);
}

/* Slider Gambar  */

/* Btn Slider  */
.btn-slider-1 {
  background-color: transparent;
  color: white;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid white;
}

.btn-slider-1:hover {
  background-color: var(--base-color);
  color: white;
}

.btn-slider-2 {
  background-color: var(--base-color);
  color: white;
  padding: 10px;
  border: 2px solid white;
  border-radius: 8px;
}

.btn-slider-2:hover {
  background-color: transparent;
  color: white;
}

/* btn Slider  */

/* btn custom  */
/* Styling Utama Tombol */
.btn-contact-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--base-color);
  color: #ffffff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 50px;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 3px var(--base-color);
  margin: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 170px;
  height: 40px;
}

/* Styling Teks */
.btn-contact-wa span {
  font-size: 12px; /* Ukuran font diperkecil */
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Styling Ikon WhatsApp */
.btn-contact-wa i {
  font-size: 16px; /* Ukuran ikon diperkecil */
  color: #ffffff;
  transition: all 0.3s ease;
}

/* --- BAGIAN ANIMASI --- */

/* Hover (Mengambang ringan) */
.btn-contact-wa:hover {
  transform: translateY(-2px) scale(1.02);
  /* Shadow luar disesuaikan dengan ukuran border baru */
  box-shadow:
    0 0 0 3px #fff,
    0 6px 12px rgba(130, 75, 154, 0.35);
}

/* Active (Saat diklik) */
.btn-contact-wa:active {
  transform: scale(0.95);
  box-shadow:
    0 0 0 3px #824b9a,
    0 3px 6px rgba(130, 75, 154, 0.25);
}

/* Animasi untuk ikon bergoyang */
@keyframes wiggle-icon {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-12deg);
  }
  50% {
    transform: rotate(12deg);
  }
  75% {
    transform: rotate(-12deg);
  }
}

/* Menerapkan animasi goyang pada ikon HANYA saat tombol di-hover */
.btn-contact-wa:hover i {
  animation: wiggle-icon 0.6s ease-in-out infinite;
}

/* btn custom  */

/* Btn Custom 1  */
.btn-custom-1 {
  background-color: transparent;
  padding: 6px 20px;
  color: var(--base-color);
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid var(--base-color);
  font-size: 18px;
}

.btn-custom-1:hover {
  background-color: var(--base-color);
  padding: 6px 20px;
  color: white;
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid var(--base-color);
  font-size: 18px;
}
/* Btn Custom 1 */

/* Btn Custom 2  */
.btn-custom-2 {
  background-color: var(--base-color);
  padding: 6px 10px;
  color: white;
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid var(--base-color);
  font-size: 18px;
}

.btn-custom-2:hover {
  background-color: transparent;
  padding: 6px 10px;
  color: var(--base-color);
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid var(--base-color);
  font-size: 18px;
}

/* Btn Custom 2 */

/* Card Testimoni  */

/* CARD */
/* SECTION BACKGROUND */
.title-style-5 {
  max-width: 700px;
}

.title-style-5 h2 {
  font-size: 38px;
  font-weight: 700;
}

.title-style-5 p {
  color: #666;
  margin-top: 10px;
}
.testi-section {
  background: #f7f7f7;
  position: relative;
}

.title-badge-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.title-badge-text {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(90deg, var(--base-color), var(--second-color));
  border-radius: 50px;
  line-height: 1;
  white-space: nowrap;
}

.title-badge-line-right {
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, var(--second-color));
  display: block;
}

/* title nama web  */

/* teks */
.section-title-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c89116;
  margin: 0;
}

.line-top {
  width: 2px;
  height: 25px;
  background: #e91e63;
  margin: 0 auto 10px;
}

/* CARD */
.testimonial-card {
  background: #fff;
  padding: 40px 50px;
  border-radius: 6px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* Rating */
.rating {
  display: flex;
  gap: 5px;
}

.rating i {
  font-size: 14px;
  color: #ddd;
}

.rating i.active {
  color: #ff2d55;
}

/* Text */
.testimonial-text {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

/* Name */
.testimonial-name {
  font-weight: 600;
  font-size: 14px;
  color: #222;
}

/* Big Quote */
.big-quote {
  position: absolute;
  right: 30px;
  bottom: -10px;
  font-size: 80px;
  color: #ff2d55;
  font-weight: bold;
  line-height: 1;
}

/* Swiper buttons */
.swiper-button-prev,
.swiper-button-next {
  color: #999;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  color: #000;
}

/* Center slide scale effect */
/* .swiper-slide {
  opacity: 0.4;
  transform: scale(0.9);
  transition: all 0.4s ease;
}

.swiper-slide-active {
  opacity: 1;
  transform: scale(1);
} */

/* Card testimoni  */

.product-card {
  /*    width: 300px;*/
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: left;
  transition: transform 0.6s ease;
  box-shadow: 0.3s ease;
}

.product-card:hover {
  transform: translateY(-10px);
  /*  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);*/
}

.image-container {
  position: relative;
}

.image-container img {
  width: 100%;
  border-radius: 15px;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.favorite-star {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  color: #000;
}

.product-info h2 {
  margin: 15px 0 10px;
  font-size: 24px;
}

.product-info p {
  font-size: 14px;
  color: #555;
}

.tags {
  margin: 10px 0;
}

.tag {
  cursor: pointer;
  display: inline-block;
  background-color: orange;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 12px;
  margin-right: 5px;
}
/* .tag:hover {
  background-color: greenyellow;
} */
.price-order {
  display: flex;
  /*    justify-content: space-between;*/
  align-items: center;
  margin-top: 15px;
  justify-content: center;
}

.price {
  font-size: 24px;
  font-weight: bold;
}

.order-button {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
}

.order-button:hover {
  background-color: #444;
  color: greenyellow;
}
.favorite-star {
  cursor: pointer;
}
.favorite-star.active {
  color: gold;
}
.product-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

.custom-btn {
  padding: 10px 10px;
  color: #fff;
  border-radius: 15px;
  font-weight: 400;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow:
    inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1),
    4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
}

/* Btn Rental  */
.btn-rental {
  /* background-color: var(--base-color); */
  border: 2px solid var(--base-color);
  border-radius: 9px;
  padding: 5px 10px;
  color: var(--base-color);
  text-align: center;
}
.btn-rental i {
  background-color: var(--second-color);
  padding: 5px;
  border-radius: 4px;
  color: white;
}

.btn-rental:hover {
  background: linear-gradient(135deg, #000000, #c89b3c);
  color: #ffffff;
  border: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.btn-rental:hover i {
  background-color: transparent;
}

/* Btn Rental */

/* 14 */
.btn-14 {
  background: #0039a2;
  border: none;
  z-index: 1;
}
.btn-14:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 15px;
  background-color: #0039a2;
  background-image: linear-gradient(315deg, #0039a2 0%, #009bff 74%);
  box-shadow:
    inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5) 7px 7px 20px 0px
      rgba(0, 0, 0, 0.1),
    4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.btn-14:hover {
  color: white;
}
.btn-14:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-14:active {
  top: 2px;
}

.btn-3 {
  /*  letter-spacing: 0.05rem;*/
  position: relative;
  background: #0039a2;
  padding: 10px 10px;
  color: #401aff;
  width: 30%;
  overflow: hidden;
  transition: 0.3s ease-in-out;
  border-radius: 0.3rem;
  border: none;
  z-index: 1;
  color: white;
  box-shadow:
    0 19px 38px rgba(0, 0, 0, 0.3),
    0 15px 12px rgba(0, 0, 0, 0.22);
}
.btn-3:hover {
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.19),
    0 6px 6px rgba(0, 0, 0, 0.23);
  transform: scale(0.95);
}

/*Keunggulan*/

/*Keunggulan*/

/* sosmed footer  */

/* Container styling */
.social-minimalist {
    padding: 10px 0;
}

/* Base button styling */
.social-btn-min {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05); /* Background transparan gelap */
    color: #d4af37; /* Warna Emas Utama */
    border: 1px solid rgba(212, 175, 55, 0.2); /* Border emas tipis */
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

/* Icon size adjustment */
.social-btn-min i {
    line-height: 0;
    transition: transform 0.4s ease;
}

/* Hover Effects */
.social-btn-min:hover {
    background: #d4af37; /* Background berubah jadi emas solid */
    color: #000; /* Icon berubah jadi hitam saat emas solid */
    transform: translateY(-5px); /* Efek melayang ke atas */
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3); /* Glow emas */
    border-color: #d4af37;
}

/* Icon animation on hover */
.social-btn-min:hover i {
    transform: scale(1.1);
}

/* Efek Riak (Optional - untuk kesan lebih premium) */
.social-btn-min::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: all 0.3s;
    transform: scale(0.5);
}

.social-btn-min:active::after {
    opacity: 1;
    transform: scale(1);
}
/* sosmed footer  */

/* sosmed footer */

textarea {
  resize: none;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  white-space: nowrap;
}

.svg-inline--fa {
  vertical-align: -0.2em;
}

.rounded-social-buttons {
  /* text-align: center; */
}

.rounded-social-buttons .social-button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 0.125rem solid transparent;
  padding: 0;
  text-decoration: none;
  text-align: center;
  color: #fefefe;
  font-size: 1.5625rem;
  font-weight: normal;
  /* line-height: 2em; */
  border-radius: 1.6875rem;
  transition: all 0.5s ease;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 20px;
}

.rounded-social-buttons .social-button:hover,
.rounded-social-buttons .social-button:focus {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

.rounded-social-buttons .fa-twitter,
.fa-facebook-f,
.fa-linkedin,
.fa-tiktok,
.fa-youtube,
.fa-instagram {
  font-size: 25px;
}

.rounded-social-buttons .social-button.facebook {
  background: #3b5998;
}

.rounded-social-buttons .social-button.facebook:hover,
.rounded-social-buttons .social-button.facebook:focus {
  color: #3b5998;
  background: #fefefe;
  border-color: #3b5998;
}

.rounded-social-buttons .social-button.twitter {
  background: #55acee;
}

.rounded-social-buttons .social-button.twitter:hover,
.rounded-social-buttons .social-button.twitter:focus {
  color: #55acee;
  background: #fefefe;
  border-color: #55acee;
}

.rounded-social-buttons .social-button.linkedin {
  background: #007bb5;
}

.rounded-social-buttons .social-button.linkedin:hover,
.rounded-social-buttons .social-button.linkedin:focus {
  color: #007bb5;
  background: #fefefe;
  border-color: #007bb5;
}

.rounded-social-buttons .social-button.tiktok {
  background: #000000;
}

.rounded-social-buttons .social-button.tiktok:hover,
.rounded-social-buttons .social-button.tiktok:focus {
  color: #000000;
  background: #fefefe;
  border-color: #000000;
}

.rounded-social-buttons .social-button.youtube {
  background: #bb0000;
}

.rounded-social-buttons .social-button.youtube:hover,
.rounded-social-buttons .social-button.youtube:focus {
  color: #bb0000;
  background: #fefefe;
  border-color: #bb0000;
}

.rounded-social-buttons .social-button.instagram {
  background: #125688;
}

.rounded-social-buttons .social-button.instagram:hover,
.rounded-social-buttons .social-button.instagram:focus {
  color: #125688;
  background: #fefefe;
  border-color: #125688;
}
/* sosmed footer */

.rounded-title {
  background-color: #9eebff;
  color: white;
  font-weight: bold;
  background: radial-gradient(circle at 10% 50%, #00c6ff, #0072ff);
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.dots {
  margin-right: 8px;
  color: #16161675;
  font-size: 18px;
  line-height: 0;
}

.header-corner {
  position: absolute !important;
  right: 0px;
  left: auto;
  bottom: 0;
  /* height: 300px; */
  width: auto !important;
  z-index: 10;
}

.image-wrapper {
  height: 200px;
}

/* Galeri */

/* Card Keunggulan  */

.keunggulan-travel {
  background: linear-gradient(180deg, #f8fbff, #ffffff);
}

.divider:after {
  content: "";
  width: 100%;
  height: 2px;
  background: currentColor;
  display: block;
  margin-top: -5px;
}

/* Badge */
.badge-keunggulan {
  display: inline-block;
  padding: 6px 16px;

  /* Gradient kuning gold */
  background: linear-gradient(135deg, #ffd450, #ddbc60);
  color: #000000;

  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;

  letter-spacing: 0.5px;

  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);

  transition: all 0.3s ease;
}

/* Hover effect biar hidup */
.badge-keunggulan:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

/* Card */
/* WRAPPER biar badge bisa absolute rapi */
.wrap-card {
  position: relative;
  padding-bottom: 30px;
}

/* CARD Keunggulan */

.card-vertical-accent {
  background: #fff;
  border-radius: 0 15px 15px 0;
  position: relative;
  height: 100%;
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}
.accent-sidebar {
  width: 5px;
  background: var(--base-color);
  height: 70px;
  transition: width 0.3s ease;
  top: 23%;
  position: relative;
  border-radius: 50px;
}
.card-vertical-accent:hover {
  box-shadow: 20px 20px 60px #d9d9d9;
}
.card-vertical-accent:hover .accent-sidebar {
  width: 15px; /* Garis menebal saat hover */
}

/* Card Keunggulan  */

.single_portfolio_work {
  position: relative;
  overflow: hidden;
}

.portfolio_work_box {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 0px;
  transition:
    transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1),
    box-shadow 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
}

.portfolio_work_box::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85%;
  display: block;
  z-index: 1;
  content: "";
  background: linear-gradient(
    to bottom,
    rgba(15, 15, 15, 0),
    rgba(15, 15, 15, 0.75) 100%
  );
  transition: opacity 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
  cursor: pointer;
}

.portfolio_work_box::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  content: "";
  background: linear-gradient(to bottom, rgb(0 0 0 / 40%), #11aed6 100%);
  transition: opacity 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
  cursor: pointer;
  opacity: 0;
}

.box_thumbnail_inner {
  position: relative;
}

.portfolio_work_box .box_thumbnail_inner .thumbnail {
  display: block;
  position: relative;
}

.img_hover_link {
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0;
  height: 100%;
  width: 100%;
  line-height: 60px;
  transform: translateY(-20px);
  transition:
    opacity 0.18s cubic-bezier(0.05, 0.2, 0.1, 1),
    transform 0.18s cubic-bezier(0.05, 0.2, 0.1, 1);
  text-overflow: ellipsis;
  overflow: hidden;
  z-index: 99;
}

.img_hover_link a {
  position: relative;
  display: block;
  top: 45px;
  color: white;
  height: 50px;
  font-size: 20px;
  width: 50px;
  line-height: 50px;
  margin-left: 30px;
  text-align: center;
  border-radius: 10px;
  background: #11aed6;
  transform: translateX(0px);
  transition: all 0.35s ease-in-out;
  z-index: 3;
}

.single_portfolio_work:hover .img_hover_link {
  opacity: 1;
  transform: translateY(0px);
  transition:
    opacity 0.18s cubic-bezier(0.05, 0.2, 0.1, 1),
    transform 0.18s cubic-bezier(0.05, 0.2, 0.1, 1);
}

.portfolio_work_box .box_thumbnail_inner .thumbnail img {
  transition:
    transform 1s ease,
    opacity 0.5s ease 0.25s;
  border-radius: 0px;
  width: 100%;
}

.portfolio_work_content {
  position: relative;
}

.portfolio_work_content .portfolio_work_inner {
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 30px 30px 20px;
  z-index: 999;
  width: 100%;
  transform: translateX(-50%);
}

.portfolio_work_content .portfolio_work_inner .portfolio_work_heading {
  transition:
    cubic-bezier(0.05, 0.2, 0.1, 1),
    transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
}

.portfolio_work_content .portfolio_work_inner .portfolio_work_heading span {
  margin: -5px;
  margin-bottom: 5px;
}

.portfolio_work_content .portfolio_work_inner .portfolio_work_heading span a {
  color: #ffffff;
  display: inline-block;
  margin: 5px;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.portfolio_work_content .portfolio_work_inner .portfolio_work_heading h4 {
  color: #ffffff;
  font-size: 30px;
}

.portfolio_work_content .portfolio_work_inner .portfolio_work_heading h4 a {
  color: #ffffff;
  /* text-decoration: none; */
}

.portfolio_work_content .portfolio_work_inner .paragraph {
  opacity: 0;
  position: absolute;
  bottom: 10px;
  transform: translateY(20px);
  line-height: 1.5em;
  max-width: 80%;
  transition:
    cubic-bezier(0.05, 0.2, 0.1, 1),
    transform 0.18s cubic-bezier(0.05, 0.2, 0.1, 1);
  height: 62px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.portfolio_work_content .portfolio_work_inner .paragraph p {
  color: #fff;
  opacity: 0.9;
  margin-bottom: 0;
  font-size: 16px;
}

.single_portfolio_work .portfolio_work_box:hover {
  box-shadow: 0 25px 55px rgb(253 71 102 / 22%);
}

.single_portfolio_work .portfolio_work_box:hover::before {
  opacity: 0;
}

.single_portfolio_work .portfolio_work_box:hover::after {
  opacity: 1;
}

.single_portfolio_work:hover .box_thumbnail_inner img {
  transform: scale(1.1);
  transition: all 9s cubic-bezier(0.1, 0.2, 7, 1);
}

.single_portfolio_work:hover .portfolio_work_inner .portfolio_work_heading {
  transform: translateY(-60px);
  transition:
    cubic-bezier(0.05, 0.2, 0.1, 1),
    transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
}

.single_portfolio_work:hover .portfolio_work_inner .paragraph {
  transform: translateY(0);
  opacity: 1;
  transition:
    cubic-bezier(0.05, 0.2, 0.1, 1) 0.15s,
    transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1) 0.15s;
}

/* Kontak */
.contact-card {
  background-color: white;
  border-radius: 10px;
  padding: 15px 20px;
  margin-bottom: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-icon {
  font-size: 24px;
  color: #00bcd4;
  /* soft blue */
}

.contact-info {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 13px;
  color: #555;
}

.value {
  font-size: 15px;
  font-weight: 400;
  color: #11aed6;
}
.kontak {
  border-radius: 30px;
}

.alt-font ol li {
  font-size: 14px;
}

/* tentang kami */
.service-card {
  position: relative;
  background-color: white;
  border-radius: 10px;
  padding: 20px 20px 10px 80px;
  max-width: 500px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* bayangan bawah */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* bayangan saat hover */
}

.icon-circle {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 60px;
  height: 60px;
  /* background-color: #d9f0f5; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.icon-circle img {
  width: 50px;
  height: 50px;
  padding: 3px;
  background-color: white;
  border-radius: 50%;
}

.title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.description {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* effect-1 styles */
.effect.effect-1 {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* bayangan bawah */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.effect.effect-1:before {
  content: "➔";
  font-family: FontAwesome;
  font-size: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  top: 0;
  opacity: 0;
  height: 100%;
  width: 40px;
  transition: all 0.2s linear 0s;
}

.effect.effect-1:hover {
  text-indent: -20px;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* bayangan saat hover */
}

.effect.effect-1:hover:before {
  opacity: 1;
  text-indent: 0px;
}

.effect.effect-2 {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* bayangan bawah */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.effect.effect-2:before {
  content: "\f232";
  font-family: FontAwesome;
  font-size: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  top: 0;
  opacity: 0;
  height: 100%;
  width: 40px;
  transition: all 0.2s linear 0s;
}

.effect.effect-2:hover {
  text-indent: -20px;
}

.effect.effect-2:hover:before {
  opacity: 1;
  text-indent: 0px;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* bayangan saat hover */
}

.effect {
  text-align: center;
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  text-transform: capitalize;
  background-color: #11aed6;
  font-family: "Roboto", sans-serif;
  /* put your font-family */
  font-size: 14px;
  padding: 10px 0px;
  width: 150px;
  border-radius: 6px;
  overflow: hidden;
}

mark {
  background-color: #11aed6 !important;
  color: white;
}

/* welcome text  */
.opt2-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 3rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  /* margin-left: -50px; */
  /* Membuat overlap ke kiri */
  position: relative;
  z-index: 2;
}

.opt2-img {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  object-fit: cover;
  height: 100%;
  transition: transform 0.5s ease;
}

.opt2-img:hover {
  transform: scale(1.02);
}

/* Mengatur ulang margin di layar HP agar tidak berantakan */
@media (max-width: 991px) {
  .opt2-card {
    margin-left: 0;
    margin-top: -30px;
    padding: 2rem;
  }
}

/* welcome text  */

/* layanan utama  */

/* Kontainer utama kolom */
.process-wrapper.line .col {
  position: relative;
  text-align: left;
  z-index: 1;
}

/* Pembungkus konten yang akan bergerak saat hover */
.process-item-content {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  z-index: 2; /* Di atas garis */
}

/* Efek angkat konten saja (Garis tidak ikut) */
.process-wrapper.line .col:hover .process-item-content {
  transform: translateY(-10px);
}

/* Efek Icon Lingkaran */
.process-wrapper.line .icon {
  transition: all 0.3s ease;
  background-color: #f0f2f5; /* Warna awal btn-soft-primary */
  border: none;
}

/* Hover: Background Icon jadi Biru */
.process-wrapper.line .col:hover .icon {
  background-color: var(--base-color) !important;
  box-shadow: 0 8px 15px rgba(var(--bs-primary-rgb), 0.25);
}

/* Efek Gambar: Awalnya abu-abu, saat hover jadi PUTIH */
.process-wrapper.line .col img {
  transition: all 0.3s ease;
  filter: grayscale(1) brightness(0.5); /* Awalnya redup/abu */
}

.process-wrapper.line .col:hover img {
  /* Filter untuk mengubah gambar hitam/warna menjadi PUTIH bersih */
  filter: brightness(0) invert(1);
}

/* Garis Penghubung (Tetap Diam) */

/* layanan utama  */

.custom-shape-divider-bottom-welcome {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-welcome svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 44px;
}

.custom-shape-divider-bottom-welcome .shape-fill {
  fill: #00407c;
}

/* Icon Title  */
.title-badge-pro-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  background: #e9f1fb;
  padding: 6px 16px 6px 6px;
  border-radius: 50px;
  border: 2px solid #cfe0f5;
}

/* ICON BULAT */
.icon-title {
  width: 18px;
  height: 18px;
  min-width: 18px;

  background: #2f5fa7;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;

  /* 🔥 shadow biar naik */
  box-shadow: 0 4px 10px rgba(47, 95, 167, 0.3);
}

/* ICON */
.icon-title i {
  color: #fff;
  font-size: 9px;
  line-height: 1;
  /* transform: translateX(1px); */
}

/* TEXT */
.badge-text {
  font-size: 12px;
  font-weight: 600;
  color: #2f5fa7;
  letter-spacing: 0.5px;
}
/* icon title  */

.custom-shape-divider-bottom-rental {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-rental svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 61px;
}

.custom-shape-divider-bottom-rental .shape-fill {
  fill: #ffffff;
}

/* ornamen Keunggulan  */
.custom-shape-divider-top-keunggulan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-keunggulan svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 53px;
}

.custom-shape-divider-top-keunggulan .shape-fill {
  fill: #256eb517;
}

.custom-shape-divider-bottom-keunggulan {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  margin-bottom: -2px;
}

.custom-shape-divider-bottom-keunggulan svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 53px;
}

.custom-shape-divider-bottom-keunggulan .shape-fill {
  fill: #256eb517;
}

.ornamen-welcome {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  z-index: 0;
}

.ornamen-blog-bunga {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 0;
  top: 0;
  opacity: 0.2;
  z-index: 0;
}

.ornamen-blog {
  position: absolute;
  width: 400px;
  height: 100%;
  right: -200px;
  opacity: 0.06;
  z-index: 1;
  top: -210px;
}

/* Ornamen-keunggulan */
.ornamen-keunggulan {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 0;
  top: 30px;
  opacity: 0.1; /* Sesuaikan base opacity-nya */

  /* Efek memudar ke atas (Semakin ke atas semakin transparan) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );

  /* Tambahan agar gambar tidak terpotong kasar */
  pointer-events: none;
  z-index: 0;
}

.ornamen-buku {
  position: absolute;
  width: 300px;
  height: 300px;
  right: -100px;
  top: 0px;
  opacity: 0.05;
  object-fit: contain;
}

/* ornamen galeri  */
.ornamen-galeri {
  position: absolute;
  width: 300px;
  height: 300px;
  right: 0;
  top: 30px;
  opacity: 0.05;
}

/* ornamen galeri  */

/* ornamen card layanan  */
.ornamen-card-layanan {
  position: absolute;
  /* width: 100%; */
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: -1;
  opacity: 0.1;
}
/* ornamen card layanan  */

/* ornamne page header  */
.custom-shape-divider-bottom-page-header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  z-index: 2;
}

.custom-shape-divider-bottom-page-header svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 24px;
}

.custom-shape-divider-bottom-page-header .shape-fill {
  fill: #ffffff;
}

/* ornamen page header  */

/* page header  */
/* CSS UNTUK LOGO DI TENGAH */
.min-vh-75 { min-height: 45vh !important; }
.text-gold { color: #d4af37; }
.border-gold { border-color: #d4af37 !important; }
.vr { width: 1px; height: 40px; }
/* page Header  */

/* Ornamen galeri  */
.custom-shape-divider-bottom-galeri {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-galeri svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 78px;
}

.custom-shape-divider-bottom-galeri .shape-fill {
  fill: #ffffff;
}

/* ornamen galeri  */

/* ornamen footer  cta */
.custom-shape-divider-bottom-footer {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-footer svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 41px;
}

.custom-shape-divider-bottom-footer .shape-fill {
  fill: #1569b4;
}

/* ornamen cta */

.ornamen-tugu {
  position: absolute;
  height: 100%;
  width: 500px;
  left: 0;
  bottom: 0;
  /* z-index: -1; */
  opacity: 0.15;
  object-fit: cover;
}

.ornamen-quote {
  position: absolute;
  width: 70px !important;
  height: 70px !important;
  opacity: 0.04;
  right: 0;
  top: -30px;
}

/* Ornamen card rental  */
.ornamen-card-rental {
  position: absolute;
  content: "";
  bottom: -20px;
  width: 100% !important;
  left: 0;
  height: 100px !important;
}

/* card wisata detail  */
/* ===== SIDEBAR STICKY ===== */
.sidebar-sticky {
  position: sticky;
  top: 100px;
}

/* ===== CARD PAKET LAIN ===== */
.card-paket-lain {
  display: block;
  margin-bottom: 20px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

/* IMAGE WRAPPER */
.card-paket-img {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* IMAGE */
.card-paket-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* HOVER ZOOM */
.card-paket-lain:hover img {
  transform: scale(1.08);
}

/* OVERLAY */
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

/* Card Testimoni  */

.section-testimoni {
  margin-bottom: -150px;
}
.title-testimoni {
  margin-top: -150px;
}
/* ===== TESTIMONI MODERN ===== */

/* Card Testimoni  */
.swiper-testimoni {
  padding-bottom: 50px !important;
}

.bubble-card {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 25px;
  position: relative;
  margin-bottom: 25px;
}

.bubble-card::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 40px;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f8f9fa transparent transparent transparent;
}

.avatar-bubble {
  width: 55px;
  height: 55px;
  object-fit: cover;
}
/* Card testimoni  */

/* TITLE */
.card-title {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  z-index: 2;
}

/* HOVER EFFECT */
.card-paket-lain:hover .card-overlay {
  background: linear-gradient(
    to top,
    rgba(21, 105, 180, 0.85) 0%,
    rgba(21, 105, 180, 0.5) 50%,
    rgba(21, 105, 180, 0.1) 100%
  );
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .sidebar-sticky {
    position: relative;
    top: auto;
  }
}

.title-border {
  position: relative;
  /* display: inline-block; */
  padding-bottom: 10px;
}

.title-border::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: var(--third-color); /* kuning */
  border-radius: 4px;
}

/* ===== CARD SIDEBAR BOX ===== */
.card-sidebar {
  background: #ffffff;
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Card wisata detail  */

/* ===== CONTACT PREMIUM SECTION ===== */
/* ===== CONTACT V2 ===== */
/* ===== CONTACT V5 (NO IMAGE CLEAN UI) ===== */

.contact-modern-v5 {
  background: #f8fafc;
}

/* TITLE */

.contact-title-v5 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #0b1c2d;
}

.contact-desc-v5 {
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
}

/* CONTACT GRID */

.contact-box-wrapper-v5 {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* CARD */

.contact-box-v5 {
  width: 260px;

  background: #fff;
  padding: 30px;

  border-radius: 16px;
  text-align: center;

  text-decoration: none;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  transition: 0.35s;
}

.contact-box-v5:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* ICON */

.icon-v5 {
  width: 60px;
  height: 60px;

  margin: 0 auto 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 22px;
  color: #fff;
}

.icon-v5.whatsapp {
  background: #25d366;
}

.icon-v5.phone {
  background: #0b1c2d;
}

/* TEXT */

.contact-box-v5 h4 {
  font-size: 16px;
  margin-bottom: 5px;
  color: #0b1c2d;
}

.contact-box-v5 p {
  font-weight: 600;
  margin: 0;
  color: #333;
}

/* ADDRESS */

.address-box-v5 {
  background: #fff;
  padding: 25px;
  border-radius: 14px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.address-box-v5 h4 {
  margin-bottom: 8px;
}

.address-box-v5 p {
  color: #666;
  margin: 0;
}

/* SOCIAL */

.social-v5 a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef3ff;
  margin: 0 5px;
  color: var(--base-color);
  transition: 0.3s;
}

.social-v5 a:hover {
  background: var(--base-color);
  color: #fff;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .contact-title-v5 {
    font-size: 26px;
  }
}

/* card wisata  */

/* Slider Card Wisata  */
/* WRAPPER */
.slider-wrapper {
  overflow: hidden;
  position: relative;
}

/* TRACK */
.slider-track {
  display: flex;
  gap: 16px;
  transition: transform 0.4s ease;
}

/* ITEM */
.slider-track > div {
  min-width: 25%;
}

/* BUTTON */
.slider-btn {
  border: none;
  background: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin-left: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.slider-btn:hover {
  background: #f1f1f1;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .slider-track > div {
    min-width: 50%;
  }
}

@media (max-width: 576px) {
  .slider-track > div {
    min-width: 80%;
  }
}

/* Slider Card wisata  */

/* Card Wisata  */
.tour-card {
  background: #fff;
  border-radius: 1.2rem;
  /* overflow: hidden tetap penting untuk image zoom */
  overflow: hidden;
  transition: 0.4s;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.tour-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.tour-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.tour-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s;
}

.tour-card:hover img {
  transform: scale(1.1);
}

.badge-kategori {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #469773;
  color: #fff;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 12px;
  z-index: 2;
}

.tour-content {
  padding: 16px;
  /* Memberikan ruang antar konten agar rapi */
}

.tour-content h3 {
  font-size: 16px; /* Disamakan dengan class di HTML */
  font-weight: 700;
  margin-bottom: 8px;
  /* Limit judul maksimal 2 baris agar tetap rapi (opsional) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price {
  font-size: 14px;
  margin-bottom: 6px;
}

.price strong {
  color: #469773;
}

.rating {
  color: gold;
  font-size: 14px;
  margin-bottom: 15px; /* Sedikit ditambah agar tidak terlalu mepet tombol */
}

.tour-action {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Agar teks Detail dan Button sejajar horizontal */
}

.btn-detail {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 14px;
}

.btn-book {
  background: #469773;
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.btn-book:hover {
  background: #367c5e;
  box-shadow: 0 4px 12px rgba(70, 151, 115, 0.3);
}
/* card wisata  */

/* Card Paket Wisata  */
/* ===== CARD WISATA ===== */

.line-kategori {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: #2c3e50; /* warna teks kategori, sesuaikan */
  position: relative;
  padding-left: 12px; /* ruang untuk garis */
  margin-bottom: 8px;
}

.line-kategori::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; /* ketebalan garis */
  height: 16px; /* panjang garis */
  background-color: #e67e22; /* warna garis, sesuaikan */
  border-radius: 2px; /* opsional, buat ujung garis agak membulat */
}

.unit-box {
  background: #f9f9f9;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px;
}

.unit-header {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: #5b6475;
  padding: 12px 10px;
  background: #fafafa;
}

.unit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.unit-item {
  padding: 12px 14px;
  border-top: 1px solid #e3e3e3;
}

.unit-item:nth-child(odd) {
  border-right: 1px solid #e3e3e3;
}

.unit-nama {
  font-size: 12px;
  color: #5b6475;
  margin-bottom: 4px;
  line-height: 1.4;
}

.unit-harga {
  font-size: 12px;
  font-weight: 700;
  color: #d09316;
  line-height: 1.4;
}

.facility-wrapper {
  background: #fbfcfe;
  padding: 12px;
  border-radius: 12px;
  /* height: 100%; */
  border: 1px solid #f0f2f5;
}

.label-badge {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.list-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tag Style */
.item-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Warna Khusus Include */
.item-tag.include {
  color: #2d3436;
}
.item-tag.include i {
  color: #28a745; /* Hijau */
  margin-top: 3px;
}

/* Warna Khusus Exclude */
.item-tag.exclude {
  color: #636e72;
}
.item-tag.exclude i {
  color: #dc3545; /* Merah */
  margin-top: 3px;
}

/* Garis pembatas tipis jika ingin lebih rapi */
.facility-wrapper:hover {
  border-color: #dee2e6;
  background: #fff;
  transition: 0.3s;
}

/* CSS Opsi 1 */
.price-container-modern {
  /* background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); */
  border-radius: 12px;
  /* border: 1px solid #edf2f7; */
}

.price-label-top {
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.currency-symbol {
  font-size: 14px;
  margin-bottom: 8px;
}

.price-amount {
  font-size: 26px;
  /* Ukuran harga yang menonjol */
  font-weight: 800;
  color: var(--second-color);
  /* Biru Primer Bootstrap */
  letter-spacing: -0.5px;
}

.price-divider-custom {
  width: 40px;
  height: 3px;
  background: var(--base-color);
  border-radius: 10px;
  opacity: 0.3;
}

/* CSS Opsi 2 */
.price-badge-wrapper {
  background: #ffffff;
  border-left: 4px solid var(--base-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  border-radius: 8px;
}

.fs-12 {
  font-size: 12px;
}

.fw-extrabold {
  font-weight: 800;
}

/* Container Box */
.start-point-box {
  background: #f8faff;
  border: 1px dashed var(--second-color); /* Garis putus-putus untuk kesan peta/tiket */
  border-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
}

.start-point-box:hover {
  background: #fff;
  border: 1px;
  border-style: solid;
  border-color: var(--base-color);
  box-shadow: 0 5px 15px rgba(13, 110, 253, 0.05);
}

/* Dekorasi Icon Point */
.icon-point-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
}

.dot-main {
  width: 12px;
  height: 12px;
  background-color: var(--base-color);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--base-color);
  z-index: 2;
}

.line-path {
  width: 2px;
  height: 25px;
  background: linear-gradient(
    180deg,
    var(--base-color) 0%,
    rgba(13, 110, 253, 0) 100%
  );
  margin-top: -2px;
}

/* Typography */
.label-start {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #a0aec0;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.location-name {
  line-height: 1.4;
}

.fs-14 {
  font-size: 14px;
}

/* Animasi sederhana pada ikon marker */
.fa-map-marker-alt {
  /* animation: bounce 2s infinite; */
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-1.5px);
  }
}

/* Tip: Pastikan font "Inter" atau "Poppins" terpasang untuk hasil maksimal */

.card-wisata {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-wisata:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

/* IMAGE */
.card-wisata-image {
  position: relative;
  overflow: hidden;
}

.card-wisata-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: 0.4s ease;
}

.card-wisata:hover .card-wisata-image img {
  transform: scale(1.05);
}

/* BADGE */
.badge-blog {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #4f7cff;
  color: #fff;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 30px;
  font-weight: 500;
  z-index: 2;
}

/* BODY */
.card-wisata-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* TITLE */
.card-wisata-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.4;
  color: #222;
}

/* META */
.card-wisata-meta {
  font-size: 13px;
  color: #777;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* BUTTON */
.btn-baca {
  margin-top: auto;
  text-align: center;
  background: #eef2ff;
  color: #4f7cff;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-baca:hover {
  background: #4f7cff;
  color: #fff;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .card-wisata-image img {
    height: 200px;
  }
}

/* FIX CARD HEIGHT */
/* .row > [class*="col-"] {
  display: flex;
} */

.card-wisata {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.card-wisata > .p-1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ACCORDION */
.custom-accordion .accordion-item {
  border: none;
  margin-bottom: 8px;
  border-radius: 10px;
  overflow: hidden;
}

.custom-accordion .accordion-button {
  font-size: 13px;
  font-weight: 600;
  background: #f8fafc;
  box-shadow: none;
}

.custom-accordion .accordion-button:not(.collapsed) {
  background: #eef2ff;
  color: var(--base-color);
}

.custom-accordion .accordion-body {
  background: #ffffff;
  padding: 10px 12px;
}

/* LIST JADI HORIZONTAL */
.list-items-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* STYLE TAG JADI BADGE */
.item-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* INCLUDE */
.item-tag.include {
  background: #eafaf1;
  color: #27ae60;
  border: 1px solid #d4efdf;
}

/* EXCLUDE */
.item-tag.exclude {
  background: #fdecea;
  color: #e74c3c;
  border: 1px solid #f5c6cb;
}

/* ICON */
.item-tag i {
  font-size: 11px;
}

/* =========================
   FIX CARD TINGGI SAMA
========================= */

/* kolom jadi flex */
/* .row > [class*="col-"] {
  display: flex;
} */

/* card full height */
.card-wisata {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* isi card stretch */
.card-wisata > .p-1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* dorong harga ke bawah */
.price-container-modern {
  margin-top: auto;
}

/* WRAPPER */
.btn-group-wisata {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* =========================
   BUTTON UMUM
========================= */
.btn-more-wisata,
.btn-book-wisata {
  flex: 1;
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  /* width: 100%; */
  justify-content: center;
  align-items: center;
}

/* =========================
   OUTLINE (LIHAT)
========================= */
.btn-more-wisata {
  background: transparent;
  color: #000000;
  border: 2px solid #ddbc60;
}

.btn-more-wisata:hover {
  background: #ffd450;
  color: #000;
  border-color: #ffd450;
  transform: translateY(-2px);
}

/* =========================
   GRADIENT (BOOKING)
========================= */
.btn-book-wisata {
  background: linear-gradient(135deg, #ffd450, #ddbc60);
  color: #000000;
  border: none;
  box-shadow: 0 4px 12px rgba(221, 188, 96, 0.4);
}

.btn-book-wisata:hover {
  background: linear-gradient(135deg, #ddbc60, #ffd450);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(221, 188, 96, 0.6);
}

/* ACTIVE CLICK */
.btn-book-wisata:active,
.btn-more-wisata:active {
  transform: scale(0.97);
}

/* Section Custom  */
.section-custom {
  background: #fff;
  padding: 90px 0;
  position: relative;
}

/* garis kiri kanan */
.section-custom::before,
.section-custom::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 2px;
  background: #dc3545;
  top: 10%;
}

.section-custom::before {
  left: 0;
}

.section-custom::after {
  right: 0;
}

/* badge */
.badge-title {
  font-size: 13px;
  letter-spacing: 2px;
  color: #dc3545;
  text-transform: uppercase;
}

/* title */
.section-custom h1 {
  font-weight: 800;
  margin-top: 10px;
}

/* desc */
.section-custom div {
  color: #666;
}

.badge-title {
  position: relative;
  display: inline-block;
}

.badge-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: #dc3545;
  transition: 0.4s;
  transform: translateX(-50%);
}

.badge-title:hover::after {
  width: 100%;
}

.badge-title {
  position: relative;
  transition: 0.3s;
}

.badge-title:hover {
  text-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
}
/* Section Custom  */

/* Card Paket Wisata  */

/* .custom-shape-divider-bottom-card-rental {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-card-rental svg {
  position: relative;
  display: block;
  width: 100%;
  height: 206px;
}

.custom-shape-divider-bottom-card-rental .shape-fill {
  fill: #1569b417;
} */

/* ornamen card rental */

/* Card Paket Wisat  */
/* wrapper supaya ada jarak */
.paket-wrapper {
  margin-top: 20px;
}

/* card utama */
/* CARD paket Wisata*/
.card-paket-wisata {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: 0.35s;

  display: flex;
  flex-direction: column;
  height: 100%;
}

/* hover */
.card-paket-wisata:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* gambar */
.card-img {
  /* aspect-ratio:4/3; */
  object-fit: cover;
  width: 100%;
}

/* body */
.card-body-custom {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* deskripsi biar tinggi stabil */
.destinasi-wrapper {
  min-height: 120px;
}

/* price selalu di bawah */
.price-wrapper {
  margin-top: auto;
  text-align: center;
}

/* label */
.price-label {
  font-size: 14px;
  color: #777;
  display: block;
  margin-bottom: 5px;
}

/* harga */
.price-value {
  font-size: 20px;
  font-weight: 600;
  color: #ff6b00;
}

/* tombol */
/* BUTTON WHATSAPP MODERN */

.btn-wa-modern {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 5px 10px;
  border-radius: 50px;
  background: var(--base-color);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: 0.35s;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* ICON */

.wa-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--base-color);
  font-size: 20px;
  transition: 0.35s;
}

/* TEXT */

.wa-text {
  position: relative;
  z-index: 2;
}

/* HOVER EFFECT */

/* .btn-wa-modern:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: #1b67b0;
  transition: 0.4s;
  z-index: 1;
} */

.btn-wa-modern:hover:before {
  width: 100%;
}

.btn-wa-modern:hover {
  transform: translateY(-3px);
  color: #fff;
}

.btn-wa-modern:hover .wa-icon {
  transform: rotate(10deg) scale(1.1);
  z-index: 3;
}
/* Card Paket Wisat  */

/* button */
.btn-wrapper {
  text-align: center;
  margin-top: 10px;
}

/* btn cta  */
/* Base Style Button Pill */
.btn-pill-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 50px;
  /* Membuat bentuk pill sempurna */
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  letter-spacing: 0.5px;
}

/* Variasi Warna Kuning (Gold Gradient) */
.btn-pill-yellow {
  background: linear-gradient(135deg, #ffd450 0%, #ddbc60 100%);
  color: #000000;
  box-shadow: 0 4px 15px rgba(221, 188, 96, 0.3);
}

.btn-pill-yellow:hover {
  background: linear-gradient(135deg, #ddbc60 0%, #ffd450 100%);
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(221, 188, 96, 0.4);
}

/* Variasi Warna Hitam */
.btn-pill-black {
  background-color: #000000;
  color: #ffd450;
  /* Teks kuning agar kontras */
  border: 2px solid #ffd450;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-pill-black:hover {
  background-color: #ffd450;
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 212, 80, 0.3);
}

/* Animasi Ikon saat Hover */
.btn-pill-custom i {
  transition: transform 0.3s ease;
}

.btn-pill-custom:hover i {
  transform: scale(1.2);
}

/* Responsif Mobile */
@media (max-width: 576px) {
  .btn-pill-custom {
    width: 100%;
    padding: 10px 20px;
  }
}
/* btn cta */



/* CTA section baru  */
.cta-gold-box {
  padding: 50px;
  border-radius: 30px;
  box-shadow: 0 20px 40px rgba(227, 96, 18, 0.2);
  position: relative;
  overflow: hidden;
  /* Tambahkan z-index agar konten teks tetap di depan */
  z-index: 1;
}

/* Overlay Hitam Tipis */
.cta-gold-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  
  /* Background hitam dengan opacity 40% (tipis) */
  background: rgba(0, 0, 0, 0.4);
  
  /* Memastikan overlay berada di belakang teks tapi di depan gambar background */
  z-index: -1;
}

/* Memastikan teks tetap kontras (Putih) */
.cta-gold-box h1, 
.cta-gold-box h2, 
.cta-gold-box p, 
.cta-gold-box span {
  color: #ffffff;
  position: relative;
}

.btn-cta-dark {
  display: inline-block;
  background: #000;
  color: #fff !important;
  padding: 15px 35px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-cta-dark:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
/* CTA Section baru  */

/* card artikel  */
.card-blog-opt2 {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  /* Tinggi seragam */
  display: block;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  text-decoration: none !important;
}

.card-blog-opt2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  aspect-ratio: 1/1;
}

/* Gradasi hitam agar teks terbaca */
.blog-overlay-opt2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0.8) 90%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 25px;
  z-index: 2;
}

.card-blog-opt2:hover img {
  transform: scale(1.1);
}

.blog-date-badge2 {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: bold;
  line-height: 1.1;
  z-index: 3;
}

.blog-date-badge2 span.day {
  font-size: 1.2rem;
  display: block;
}

.blog-date-badge2 span.month {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--second-color, #28a745);
}

.blog-title-opt2 {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
  transition: 0.3s;
}

.card-blog-opt2:hover .blog-title-opt2 {
  color: #feced2;
}

.blog-meta-opt2 {
  color: #cbd5e1;
  font-size: 0.85rem;
}

/* card artikel  */

/* CTA Section  */

.cta-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(11, 28, 45, 0.85) 0%,
    rgba(11, 28, 45, 0.7) 50%,
    rgba(11, 28, 45, 0.9) 100%
  );

  z-index: 1;
}

/* pastikan konten di atas overlay */
.cta-floating .container {
  position: relative;
  z-index: 2;
}

.cta-floating {
  background: #f5f7fa;
}

.cta-floating-box {
  background: #fff;
  padding: 50px 30px;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  max-width: 700px;
  margin: auto;
}

.cta-floating-box h2 {
  margin-bottom: 10px;
}

.cta-floating-box p {
  color: #666;
  margin-bottom: 20px;
}

/* Cta Section  */

/* Galeri Detail  */

/* =========================
   SAMAKAN TINGGI CARD SWIPER
   ========================= */

/* slide jadi flex */
.mySwiper-lainnya .swiper-slide {
  display: flex;
  height: auto;
}

/* Card Buku & Kategori */
.filter-tab {
  display: inline-flex;
  gap: 30px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

/* BUTTON */
.filter-btn {
  background: none;
  border: none;
  font-weight: 500;
  font-size: 15px;
  color: #888;
  padding: 5px 0;
  position: relative;
  transition: 0.3s;
}

/* HOVER */
.filter-btn:hover {
  color: var(--base-color);
}

/* ACTIVE */
.filter-btn.active {
  color: var(--base-color);
}

/* UNDERLINE ANIMATION */
.filter-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 0%;
  height: 2px;
  background: var(--base-color);
  transition: 0.3s;
}

.filter-btn.active::after {
  width: 100%;
}

/* SMOOTH GRID */
.grid-buku {
  transition: all 0.4s ease;
}

/* CARD (fix konsisten) */
/* CARD */
/* Container Card Utama */
.card-buku-modern {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease;
  height: 100%; /* Wajib */
  display: flex;
  flex-direction: column; /* Biar isi konten bisa main mt-auto */
}

.card-buku-modern:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Tinggi Gambar Terkunci - Mengatasi Gambar beda ukuran */
.buku-cover-wrapper {
  position: relative;
  overflow: hidden;
  height: 280px; /* Atur tinggi cover di sini */
  background: #f8f9fa;
}

.img-buku {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Gambar akan terpotong rapi, tidak gepeng */
  transition: 0.5s ease;
}

/* Judul dibatasi 2 baris agar card tidak naik turun */
.judul-buku {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 45px; /* Tinggi judul dikunci */
  line-height: 1.5;
}

/* Badge Kategori */
/* .badge-kategori {
  background: rgba(13, 110, 253, 0.1);
  color: var(--base-color);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  text-transform: uppercase;
} */

/* HR Modern */
.divider-modern {
  border: none;
  height: 1px;
  margin: 10px 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.1),
    transparent
  );
}

/* Overlay & Tombol */
.buku-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 26, 93, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.3s;
}

.buku-cover-wrapper:hover .buku-overlay {
  opacity: 1;
}
.buku-cover-wrapper:hover .img-buku {
  transform: scale(1.1);
}

.harga-diskon {
  font-size: 15px;
  font-weight: 700;
  color: #dc3545;
}
.harga-asli {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.badge-diskon {
  background: #dc3545;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.btn-beli-buku {
  background: linear-gradient(135deg, #0b1a5d, #0928af);
  color: #fff !important;
  padding: 6px 15px;
  font-size: 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
/* Card Buku & Kategori  */

/* keunggulan  */
.card-keunggulan {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transition: 0.4s ease;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff, rgba(255, 191, 0, 0.05));

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
/* GARIS ANIMASI */
.card-keunggulan::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;

  background: linear-gradient(90deg, var(--base-color), var(--second-color));

  transition: 0.4s ease;
}

.card-keunggulan:hover::after {
  width: 100%;
}

/* HOVER CARD */
.card-keunggulan:hover {
  transform: translateY(-8px);
}

/* POSISI NAIK TURUN TETAP */
.card-up {
  margin-top: -30px;
}

.card-down {
  margin-top: 30px;
}

/* AGAR HOVER TIDAK MERUSAK POSISI */
.card-up:hover {
  transform: translateY(-8px);
}

.card-down:hover {
  transform: translateY(-8px);
}

/* RESPONSIVE MOBILE */
@media (max-width: 991px) {
  .card-up,
  .card-down {
    margin-top: 0;
  }
}

/* keunggulan  */

/* card Layanan */
.card-layanan::after,
.card-layanan::before {
  pointer-events: none;
}
.card-layanan {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  background: #000; /* Menghindari gap putih saat transisi */
}

.card-layanan picture {
  display: block;
  width: 100%;
  overflow: hidden;
}

.card-layanan img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. Gradasi Hitam Bawah ke Atas (Sebelum Hover) */
.card-layanan::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 35%,
    transparent 100%
  );
  z-index: 1;
  transition: opacity 0.4s ease;
}

/* 2. Overlay Seluruh Card (Muncul Saat Hover) */
.card-layanan::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35); /* Hitam transparan merata */
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Kontainer Konten */
.card-layanan-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 25px;
  z-index: 3;
  /* Teks didorong ke bawah saat normal */
  transform: translateY(65px);
  transition: transform 0.4s ease-out;
}

.card-layanan-title {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.card-layanan-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 50px;
  height: 1px;
  background: #fff;
  transition: width 0.4s ease;
}

.btn-hubungi-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #a67c00;
  color: black !important;
  text-decoration: none;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 4px;
  margin-top: 15px;
  transition:
    opacity 0.3s ease,
    background 0.3s ease;
  opacity: 0;
}

.btn-hubungi-card i {
  margin-left: 10px;
  color: black;
  font-weight: 500;
}

/* --- Efek Hover --- */

/* Gambar Zoom */
.card-layanan:hover img {
  transform: scale(1.1);
}

/* Overlay Seluruh Card Muncul */
.card-layanan:hover::before {
  opacity: 1;
}

/* Konten Naik ke Atas */
.card-layanan:hover .card-layanan-content {
  transform: translateY(0);
}

/* Garis Judul Memanjang */
.card-layanan:hover .card-layanan-title::after {
  width: 100%;
}

/* Tombol Muncul & Gradient */
.card-layanan:hover .btn-hubungi-card {
  opacity: 1;
  background: linear-gradient(135deg, #fcce46 0%, var(--base-color) 45%);
}

.btn-layanan-lainnya {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 15px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 50px; /* Pill style */
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 70%;
  /* Warna Dasar Emas */
  background: linear-gradient(135deg, #ffbf00 0%, #e36012 100%);
  color: #fff !important;
  border: none;
  box-shadow: 0 4px 15px rgba(227, 96, 18, 0.3);
}

/* Efek Kilauan (Shine Animation) */
.btn-layanan-lainnya::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: all 0.6s;
  z-index: -1;
}

/* Efek Hover */
.btn-layanan-lainnya:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(227, 96, 18, 0.5);
  color: #fff !important;
}

.btn-layanan-lainnya:hover::before {
  left: 100%; /* Kilauan lewat saat di-hover */
}

/* Icon Spacing */
.btn-layanan-lainnya i {
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.btn-layanan-lainnya:hover i {
  transform: translateX(5px); /* Panah bergerak sedikit ke kanan */
}

/* Container penengah (opsional) */
.text-center-btn {
  text-align: center;
  margin-top: 40px;
}

/* Card Layanan  */

/* Galeri Minimalis */
.gal-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.galeri-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1/1;
}

.galeri-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

.galeri-item .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: 0.3s;
}

.galeri-item:hover img {
  transform: scale(1.1);
}

.galeri-item:hover .overlay {
  opacity: 1;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  object-fit: contain;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

/* galeeri Detail  */

.btn-berlangganan {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, #c89b3c, #e3b54b);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-berlangganan:hover {
  background: linear-gradient(135deg, #000, #c89b3c);
  color: #fff;
  transform: translateY(-2px);
}

/* Card Paket Wisata  */

/* card produk  */
.card-premium {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 15px;
  padding: 15px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.card-premium:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.07);
  border-color: var(--second-color);
}

.img-box {
  background: #fdfdfd;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-box img {
  transition: 0.5s;
  height: 160px;
  object-fit: contain;
}

.card-premium:hover .img-box img {
  transform: scale(1.1);
}

/* Kategori Style: Accent Line */
.kategori-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: #888;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.kategori-tag::before {
  content: "";
  width: 15px;
  height: 2px;
  background: var(--second-color); /* Garis aksen kuning khas Karcher */
  display: inline-block;
}

.btn-detail {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  padding: 7px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: 0.3s;
  flex: 1;
  text-align: center;
  line-height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-detail:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* .btn-book {
  font-size: 14px;
  font-weight: 700;
  background: var(--second-color);
  color: #000;
  text-decoration: none;
  padding: 7px 15px;
  border-radius: 8px;
  transition: 0.3s;
  flex: 1.5;
  text-align: center;
  line-height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
} */

.btn-book:hover {
  background: #333;
  color: var(--second-color);
}
.btn-book:hover i {
  color: var(--second-color);
}

/* card produk  */

/* Card Kategori wisata  */
/* CARD BASE (dipakai semua mode) */
.category-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  transition: all 0.4s ease;
  height: 100%;
}

/* GRID MODE (biar rapi) */
.row .category-card {
  aspect-ratio: 4/3;
}

/* MASONRY CORE */
.masonry {
  column-count: 4;
  column-gap: 1rem;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* VARIASI HEIGHT (hanya masonry) */
.masonry-item:nth-child(4n) .category-card {
  aspect-ratio: 3/4;
}

.masonry-item:nth-child(4n + 1) .category-card {
  aspect-ratio: 4/3;
}

.masonry-item:nth-child(4n + 2) .category-card {
  aspect-ratio: 1/1;
}

.masonry-item:nth-child(4n + 3) .category-card {
  aspect-ratio: 9/16;
}

/* IMAGE */
.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

/* OVERLAY */
.category-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

.category-overlay h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.category-overlay .meta {
  font-size: 13px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* HOVER */
.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.category-card:hover img {
  transform: scale(1.1);
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .masonry {
    column-count: 3;
  }
}

@media (max-width: 768px) {
  .masonry {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .masonry {
    column-count: 1;
  }
}

/* badge  */
.badge-luxury-minimal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 12px;
  background: #fff;
  color: #d4a017;
  border: 1px solid #f3d37a;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

/* badge  */

/* UTIL */
.text-base-color2 {
  color: var(--base-color);
}

.fw-800 {
  font-weight: 800;
}

/* card kategori  */

.btn-more-package {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 7px 18px;
  border-radius: 999px;

  background: var(--second-color);
  color: #fff;
  text-decoration: none;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;

  border: 2px solid var(--second-color);
  transition: all 0.35s ease;

  box-shadow: 0 8px 20px rgba(70, 151, 115, 0.25);
}

/* ICON */
.btn-more-package i {
  font-size: 18px;
  transition: transform 0.35s ease;
}

/* HOVER */
.btn-more-package:hover {
  background: #3e403e;
  border-color: #3e403e;
  color: #fff;

  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(62, 64, 62, 0.3);
}

/* ICON ANIMATION */
.btn-more-package:hover i {
  transform: translateX(6px) rotate(45deg);
}

/* ACTIVE (klik) */
.btn-more-package:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

/* FOCUS */
.btn-more-package:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(70, 151, 115, 0.2);
}

/* Card unit rental  */
/* CSS Opsi 2 */
.letter-spacing-2 {
  letter-spacing: 2px;
}

.card-premium {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: 0.3s;
}

.card-premium:hover {
  border-color: #212529;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.premium-img-box {
  /* padding: 20px; */
  /* height: 200px; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px dashed #e0e0e0;
}

.premium-img-box img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.premium-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f5f5f5;
}

.premium-list li:last-child {
  border-bottom: none;
}

.premium-actions {
  border-top: 1px solid #e0e0e0;
}

.btn-half {
  width: 50%;
  text-align: center;
  padding: 14px 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}

.btn-dark-outline {
  background: #fff;
  color: #212529;
  border-right: 1px solid #e0e0e0;
}

.btn-dark-outline:hover {
  background: #f8f9fa;
  color: #000;
}

.btn-dark-solid {
  background: #212529;
  color: #fff;
}

.btn-dark-solid:hover {
  background: #000;
  color: #fff;
}

/* card unit rental  */

/* Card Rental  */
/* ===== CARD RENTAL MODERN ===== */

.card-sewa-opt1 {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Animasi standar */
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease;
}
/* Efek Hover Card (Glow & Lift) */
.card-sewa-opt1:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(225, 29, 72, 0.15); /* Shadow kemerahan */
  border-color: #fca5a5;
}
.card-sewa-opt1 .img-wrapper {
  /* height: 230px; */
  overflow: hidden;
}
.card-sewa-opt1 .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card-sewa-opt1:hover .img-wrapper img {
  transform: scale(1.08);
}
.card-sewa-opt1 .body-content {
  padding: 20px;
  flex-grow: 1;
}
.card-sewa-opt1 .title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px 0;
}
.card-sewa-opt1 .spec-row {
  display: flex;
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 8px;
}
.card-sewa-opt1 .spec-row strong {
  min-width: 90px;
  color: #374151;
}
.card-sewa-opt1 .footer-area {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  margin-top: auto;
  display: flex;
  flex-direction: column;
}
.card-sewa-opt1 .price-box {
  padding: 15px 20px;
  text-align: center;
}
.card-sewa-opt1 .price-val {
  font-size: 22px;
  font-weight: 800;
  color: #e11d48;
  line-height: 1.2;
}
.card-sewa-opt1 .price-note {
  font-size: 12px;
  color: #6b7280;
  display: block;
}
/* Tombol Full Width */
.card-sewa-opt1 .btn-book {
  background: #e11d48;
  color: #fff;
  text-align: center;
  padding: 12px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  transition: background 0.3s;
}
.card-sewa-opt1 .btn-book:hover {
  background: #be123c; /* Warna lebih gelap saat tombol dihover */
}
/* card rental  */

.card-smooth {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.line-card {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.line-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 20;
  width: 0%;
  height: 3px;
  background-color: #11aed6;
  transition: width 0.5s ease;
}

.line-card:hover::after {
  width: 100%;
}

.btn-close:before {
  display: none;
}

.stats-section {
  background: #0e67d208;
  padding: 60px 20px;
  text-align: center;
  font-family: "Poppins", sans-serif;
}

/* Card Layanan  */
/* supaya kolom mengikuti tinggi card */
/* .row.g-4 > [class*="col-"] {
  display: flex;
} */

/* =========================
   STYLING KARTU LAYANAN
   ========================= */

/* Card Layanan  */
/* supaya kolom mengikuti tinggi card */
/* .row.g-4 > [class*="col-"] {
  display: flex;
} */

/* =========================
      STYLING KARTU LAYANAN
      ========================= */

/* Base Card */
.card-layanan {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08); /* Border awal dibuat sedikit terlihat */
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 2;
  overflow: hidden; /* Penting agar efek animasi tidak keluar dari border-radius */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animasi membal halus */
}

/* Animasi Ekstra: Garis Bawah yang Melesat (Border Bottom Animation) */
/* .card-layanan::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, var(--base-color), var(--second-color));
  transition: width 0.4s ease-in-out;
  z-index: 10;
} */

/* Efek Hover Utama pada Kartu */
.card-layanan:hover {
  transform: translateY(-8px); /* Kartu terangkat ke atas */
  box-shadow: 0 15px 35px rgba(13, 110, 253, 0.1); /* Bayangan soft menyala sesuai warna tema */
  border-color: var(--base-color); /* Seluruh border berubah warna */
}

/* Saat di-hover, garis bawah akan memanjang jadi 100% */
.card-layanan:hover::after {
  width: 100%;
}

/* =========================
      BAGIAN GAMBAR KARTU
      ========================= */
.card-layanan-img {
  width: 100%;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  position: relative;
}

.card-layanan-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  aspect-ratio: 1/1;
}

/* Zoom In & Rotate Gambar saat kartu di-hover */
.card-layanan:hover .card-layanan-img img {
  /* transform: scale(1.08) rotate(1deg);  */
  transform: scale(1.03);
}

/* =========================
      BAGIAN BODY (TEKS & TOMBOL)
      ========================= */
.card-layanan-body {
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  flex: 1; /* Penting! Memaksa body mengisi sisa ruang kosong */
  background-color: #ffffff;
  border-radius: 0 0 16px 16px;
  position: relative;
  z-index: 2;
}

.card-layanan-body p {
  font-size: 14px;
  line-height: 1.6;
}

/* =========================
      TOMBOL DETAIL
      ========================= */
.btn-detail-layanan {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(90deg, var(--base-color), var(--second-color));
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
}

.btn-detail-layanan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
  color: #fff;
}

/* Ikon Panah Bulat di dalam Tombol */
.btn-arrow {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  transition: all 0.3s ease;
  margin-right: -5px; /* Menarik ikon sedikit ke kanan agar balance */
}

/* Panah bergeser saat tombol di-hover */
.btn-detail-layanan:hover .btn-arrow {
  transform: translateX(4px);
  background: #ffffff;
  color: var(--base-color);
}

/* wrapper */
.cta-layanan {
  position: relative;
}

/* text */
.cta-text {
  font-size: 16px;
  color: var(--base-color);
  font-weight: 600;
}

/* button */
.btn-lainnya-modern {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 22px;

  /* background: linear-gradient(135deg, var(--base-color), var(--second-color)); */
  background-color: transparent;
  color: white;
  font-size: 14px;
  font-weight: 600;

  border-radius: 50px;
  text-decoration: none;
  border: 2px solid white;
  position: relative;
  overflow: hidden;
  transition: 0.35s;
}

/* icon */
.btn-lainnya-modern i {
  transition: 0.3s;
}

/* efek glow halus */
.btn-lainnya-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  transition: 0.3s;
}

/* hover */
.btn-lainnya-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  color: var(--base-color);
}

.btn-lainnya-modern:hover::before {
  opacity: 1;
}

.btn-lainnya-modern:hover i {
  transform: translateX(6px);
}
/* Card layanan  */

.judul-artikel {
  position: relative;
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  color: #1c1c1c;
  margin-bottom: 1rem;
}

.judul-artikel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px; /* jarak antara teks dan garis */
  width: 100%;
  height: 2px;
  /* opacity: 30%; */
  background-color: var(--second-color); /* biru */
  border-radius: 2px;
}

.service-section {
  display: flex;
  gap: 24px;
  justify-content: center;
  padding: 40px;
  background-color: #f9f9f9;
}

.card-lay {
  /* width: 300px; */
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-lay img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.card-content {
  /* padding: 20px; */
  text-align: center;
}

.card-content h3 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.1rem;
}

.card-content p {
  color: #666;
  font-size: 0.95rem;
}

.card-footer {
  border-top: 1px solid #eee;
  text-align: center;
  padding: 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #cc8800;
  cursor: pointer;
}

.card-lay:hover {
  transform: translateY(-6px);
}

/* Card tengah dengan latar khusus */
.card-lay.highlighted {
  background-color: #bb8645;
  color: white;
}

.card-lay:hover .card-footer {
  background-color: var(--base-color);
  color: white;
}
.card-lay:hover .link-layanan {
  color: white;
}
.card-lay.highlighted .card-lay-content p,
.card-lay.highlighted .card-lay-content h3,
.card-lay.highlighted .card-lay-footer {
  color: white;
}

.card-lay.highlighted .card-lay-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.judul-layanan {
  color: #000;
}
.card-lay:hover .judul-layanan {
  color: var(--base-color) !important;
}

/* Point Welcome text  */

.point-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 25px;
  margin-top: 20px;
}

.point-item {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #1f2937;
  position: relative;
  transition: all 0.3s ease;
}

.point-item i {
  color: var(--base-color);
  margin-right: 8px;
  font-size: 14px;
}

.point-item:hover {
  transform: translateX(5px);
  color: var(--base-color);
}

.point-badge-wrapper {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.point-badge {
  padding: 6px 16px;
  border-radius: 50px;
  background: rgba(13, 110, 253, 0.1);
  color: var(--base-color);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.point-badge:hover {
  background: var(--base-color);
  color: white;
  transform: translateY(-3px);
}

.point-box-wrapper {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.point-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  font-weight: 500;
}

.point-box i {
  background: linear-gradient(135deg, #1e88e5, #0d47a1);
  color: white;
  font-size: 12px;
  padding: 8px;
  border-radius: 50%;
}

.point-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(13, 71, 161, 0.15);
}

/* Point Welcome Text  */

.divider-title {
  content: "";
  height: 30px;
  width: 2px;
  background-color: grey;
  /* padding: 10px; */
}

.contact-label {
  text-decoration: underline;
  text-decoration-color: var(--second-color); /* Warna garis merah */
  text-decoration-thickness: 2px; /* Ketebalan garis, bisa disesuaikan */
  text-underline-offset: 5px; /* Jarak antara teks dan garis */
}

.contact-card {
  width: 100%;
  background-color: #ffffff; /* Latar belakang putih untuk kartu */
  border-radius: 12px; /* Sudut membulat */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Efek bayangan */
  padding: 20px;
  display: flex; /* Menggunakan flexbox untuk ikon dan teks */
  align-items: center; /* Mensejajarkan ikon dan teks secara vertikal */
  gap: 15px; /* Jarak antara ikon dan teks */
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out; /* Efek transisi saat hover */
  /* cursor: pointer; Menunjukkan bahwa kartu bisa diinteraksi */
}

.contact-card:hover {
  transform: translateY(-3px); /* Sedikit naik saat hover */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); /* Bayangan lebih intens saat hover */
}

.icon-kontak {
  min-width: 40px;
  max-width: 40px;
  background: var(--base-color);
  color: var(--second-color);
  font-size: 28px;
  display: flex !important;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  min-height: 40px;
  max-height: 40px;
  align-items: center;
}

.highlight-text {
  position: relative; /* Penting untuk pseudo-elemen ::after */
  display: inline-block; /* Agar lebar garis sesuai teks */
}

/* Garis bergerak */
.highlight-text::after {
  content: "";
  position: absolute;
  left: 0;
  /* text-align: center; */
  bottom: 20px; /* Posisi di bawah teks */

  width: 150px; /* Lebar garis yang bergerak, sesuaikan jika perlu */
  height: 2px; /* Tinggi garis */
  background: linear-gradient(
    to right,
    #0e67d2,
    #02b7f7
  ); /* Gradien warna garis */
}

/* Card keunggulan  */
/* Background Section Menggunakan Gradien Halus */
.section-keunggulan-floating {
  background: linear-gradient(135deg, #f8fcfd 0%, #f1f4f9 100%);
  overflow: hidden;
}

/* Badge Desain Kapsul */

/* =========================================
   STYLING KARTU FLOATING
   ========================================= */

.card-floating {
  background: #ffffff;
  border-radius: 24px;
  position: relative;
  /* Margin top diberikan ruang agar ikon setengah lingkaran di atas tidak terpotong */
  margin-top: 35px;
  padding: 45px 10px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.02);
  transition: all 0.4s ease;
  z-index: 1;
}

/* Efek Hover Kartu Utama */
.card-floating:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(13, 110, 253, 0.08); /* Bayangan membesar & berwarna */
  border-color: rgba(13, 110, 253, 0.15);
}

/* Ikon Melayang di Tengah Atas */
.floating-icon-wrapper {
  position: absolute;
  top: -40px; /* Menarik ikon 40px ke atas keluar dari kartu */
  left: 50%;
  transform: translateX(-50%); /* Posisi tepat di tengah */
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  /* Animasi Bouncy (Membal) saat kursor diarahkan */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 2;
}

.floating-icon-wrapper img {
  width: 55px;
  height: 55px;
  object-fit: contain;
  transition: all 0.4s ease;
}

/* Efek Hover pada Ikon (Ikon membal ke atas sedikit) */
.card-floating:hover .floating-icon-wrapper {
  transform: translateX(-50%) translateY(-10px);
  box-shadow: 0 12px 30px rgba(13, 110, 253, 0.2);
}

.card-floating:hover .floating-icon-wrapper img {
  transform: scale(1.15) rotate(5deg); /* Ikon membesar & miring sedikit */
}

/* =========================================
   STYLING ANGKA WATERMARK (01, 02, 03)
   ========================================= */

.watermark-number {
  position: absolute;
  bottom: -10px;
  right: -0px;
  font-size: 70px; /* Ukuran angka besar */
  font-weight: 800;
  font-family: Arial, sans-serif;
  color: rgba(0, 0, 0, 0.03); /* Warna abu-abu transparan (hampir pudar) */
  z-index: 0;
  transition: all 0.5s ease;
  pointer-events: none; /* Agar tidak bisa di-klik/blok oleh user */
}

/* Efek Hover pada Angka: Angka membesar dan berubah warna menjadi warna tema */
.card-floating:hover .watermark-number {
  color: rgba(13, 110, 253, 0.06);
  transform: scale(1.1) translate(-5px, 5px);
}

/* Supaya teks tidak tertimpa oleh angka watermark */
.card-floating-body {
  position: relative;
  z-index: 1;
}

.card-floating-body p {
  font-size: 15px;
  line-height: 1.7;
}

/* Card Keunggulan  */

/* Card Artikel  */
.dark-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-card-image {
  position: relative;
  height: 200px;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
}

.dark-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 100%
  );
}

.dark-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.dark-card:hover {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-more-blog {
  display: inline-flex;
  align-items: center;

  padding: 7px 16px;
  border-radius: 999px;

  background: rgba(70, 151, 115, 0.1);
  color: #469773;
  text-decoration: none;

  font-size: 14px;
  font-weight: 600;

  border: 1px solid rgba(70, 151, 115, 0.3);
  backdrop-filter: blur(6px);

  transition: all 0.3s ease;
}

.btn-more-blog:hover {
  background: #469773;
  color: #fff;
}
/* Card Artikel  */

/* Card Rental baru  */
.card-elegant {
  border: 2px solid #000;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.elegant-header {
  background: #000;
}
.elegant-img-box {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-box-elegant {
  border: 1px solid #ffd450;
  border-radius: 12px;
  background: #fffbef;
}

.btn-full-booking {
  display: block;
  width: 100%;
  background: #ffd450;
  color: #000;
  text-align: center;
  padding: 12px;
  font-weight: 800;
  text-decoration: none;
  border-top: 1px solid #000;
}

.btn-full-detail {
  display: block;
  width: 100%;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 8px;
  font-size: 12px;
  text-decoration: none;
}

/* card rental baru  */

/* Card Highlight  */
.highlight-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 25px;
}

.highlight-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
}

/* Image */
.highlight-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.highlight-card:hover img {
  transform: scale(1.08);
}

/* Overlay */
.highlight-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2));
  transition: background 0.4s ease;
}

/* Content wrapper */
.highlight-content {
  position: absolute;
  left: 0;
  bottom: -30px;
  width: 100%;
  padding: 0 25px;
  color: #fff;
  z-index: 2;
}

/* Judul default */
.highlight-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  transition: transform 0.4s ease;
}

/* Deskripsi default hidden */
.highlight-desc {
  font-size: 16px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

/* Hover effect */
.highlight-card:hover .highlight-title {
  transform: translateY(-25px);
}

.highlight-card:hover .highlight-desc {
  opacity: 0.8;
  transform: translateY(-23px);
  font-size: 16px;
}

/* Arrow */
.highlight-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 2;
  transition: all 0.3s ease;
}

.highlight-card:hover .highlight-arrow {
  background: white;
  color: black;
}

/* Grid Position */
.highlight-card:nth-child(1) {
  grid-row: 1 / 3;
}

.highlight-card:nth-child(4) {
  grid-column: 2 / 2;
}

/* Responsive */
@media (max-width: 992px) {
  .highlight-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .highlight-card {
    height: 250px;
  }

  .highlight-card:nth-child(1),
  .highlight-card:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Card Highlight  */

/* Card Visi Misi  */

.card-misi {
  background: #f7b21e11;
  border-radius: 5px;
  padding: 10px;
  transition: all 0.35s ease;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.card-visi {
  background: #1a371c0e;
  border-radius: 5px;
  padding: 10px;
  transition: all 0.35s ease;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

/* Hover effect */
.card-visi:hover,
.card-misi:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Title */
.card-visi h3,
.card-misi h3 {
  font-weight: 600;
  margin-bottom: 12px;
}

/* Text */
.card-visi div,
.card-misi div {
  color: #555;
  line-height: 1.7;
}

.card-visi::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: var(--base-color);
  left: 0;
  top: 0;
  border-radius: 10px;
}

.card-misi::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: var(--second-color);
  left: 0;
  top: 0;
  border-radius: 10px;
}

/* Card Visi Misi  */

/* Welcome  */
/* Custom CSS khusus section ini */
.overlap-section {
  /* padding-top: 5rem; */
  padding-bottom: 5rem;
}

.overlap-image-wrapper {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.overlap-text-card {
  background:
    url("../Aset desain/pakai/bg/2.webp"),
    white no-repeat;
  background-size: contain;
  padding: 3rem;
  border-radius: 1rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* OVERLAY PUTIH */
.overlap-text-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8); /* tingkat transparansi bisa diubah */
  z-index: 0;
}

/* BIAR KONTEN DI ATAS OVERLAY */
.overlap-text-card > * {
  position: relative;
  z-index: 1;
}

/* Efek menumpuk hanya di layar besar (Desktop) */
@media (min-width: 992px) {
  .overlap-text-card {
    margin-left: -80px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

/* Welcome  */

/* Card Galeri  */

.galeri-modern {
  text-decoration: none !important;
  display: block;
}

.modern-card {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* Efek Kilauan (Shine Effect) */
.modern-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: none;
  z-index: 2;
}

.modern-card:hover::before {
  left: 150%;
  transition: all 0.7s;
}

.modern-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-info {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  transition: 0.4s ease;
  z-index: 3;
}

.modern-info span {
  color: #ffbf00;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}

.modern-info h6 {
  color: #fff;
  margin: 0;
  font-size: 15px;
}

/* Hover Logic */
.galeri-modern:hover img {
  transform: scale(1.15);
}

.galeri-modern:hover .modern-info {
  bottom: 0;
}

/* Penyesuaian collapse agar grid tidak berantakan */
#more-gallery.show {
  display: flex !important;
}

.btn-galeri-lainnya {
  background-color: transparent;
  padding: 8px 15px;
  color: var(--second-color);
  border-radius: 10px;
  border: 2px solid;
}

/* Card Galeri  */

/* Card Wisata Kategori  */
/* EMPTY STATE */
.wisata-empty {
  padding: 40px 0;
}

.empty-box {
  background: #fff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  display: inline-block;
}

.empty-box i {
  font-size: 30px;
  color: #dc3545;
}

/* SIDEBAR */
.sidebar-kategori {
  position: sticky;
  top: 100px;
  z-index: 10;

  background: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* SCROLL BAR */
.sidebar-kategori::-webkit-scrollbar {
  width: 4px;
}

.sidebar-kategori::-webkit-scrollbar-thumb {
  background: #dc3545;
  border-radius: 10px;
}

/* LIST */
.list-kategori {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-kategori li {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 5px;
  transition: 0.3s;
}

.list-kategori li:hover {
  background: #f1f1f1;
}

.list-kategori li.active {
  background: #dc3545;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

/* CARD */
.card-wisata {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
  height: 100%;
}

.card-wisata:hover {
  transform: translateY(-6px);
}

.card-wisata img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* RESPONSIVE SPACING */
@media (min-width: 768px) {
  .col-md-3 {
    padding-right: 20px;
  }

  .col-md-9 {
    padding-left: 20px;
  }
}

/* ANIMATION BASE */
.wisata-item {
  opacity: 1;
  transform: scale(1);
  transition: all 0.4s ease;
}

/* HIDE ANIMATION */
.wisata-item.hide {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

/* SHOW ANIMATION */
.wisata-item.show {
  opacity: 1;
  transform: scale(1);
}

/* GRID SMOOTH */
.wisata-list {
  transition: all 0.3s ease;
}

/* card wisata kategori  */

/* card wisata  */
.modern-tour-card {
  transition: 0.3s;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06) !important;

  height: 100%;
  display: flex;
  flex-direction: column;
}

.modern-tour-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

/* IMAGE */
.tour-main-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: 0.5s;
}

/* CONTENT FLEX */
.modern-tour-card .p-4 {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* DESTINASI SCROLL */
.destinasi-scroll {
  max-height: 300px;
  overflow-y: auto;
  font-size: 14px;
  color: #555;
  padding-right: 5px;
}

/* SCROLLBAR BIAR HALUS */
.destinasi-scroll::-webkit-scrollbar {
  width: 4px;
}
.destinasi-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

/* BAGIAN BAWAH (PRICE + BUTTON) DIDORONG KE BAWAH */
.bottom-area {
  margin-top: auto;
}

/* BADGE */
.badge-category-top {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #fff;
  padding: 5px 15px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  color: var(--main-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* BUTTON */
.btn-book-now {
  background: #000;
  color: #fff;
  padding: 8px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: 0.3s;
}

.btn-book-now:hover {
  background: var(--base-color);
  color: #fff;
}

/* FEATURE BADGE */
.badge-feature {
  background-color: #ffe5e4;
  color: #4a5568;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  transition: 0.3s;
}

.badge-feature i {
  color: var(--base-color);
  font-size: 10px;
}

.badge-feature:hover {
  background-color: var(--base-color);
  color: #fff;
}

.badge-feature:hover i {
  color: #fff;
}

.destinasi-scroll {
  max-height: 100px;
  overflow-y: auto;
  padding-right: 5px;
}

/* Scrollbar biar lebih halus */
.destinasi-scroll::-webkit-scrollbar {
  width: 4px;
}
.destinasi-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
/* card wisata  */

/* Card Keunggulaan  */
/* Container Overlap */
.keunggulan-card-modern {
  background: #fff;
  padding: 25px;
  border-radius: 16px;
  position: relative;
  transition: 0.3s;
  height: 100%;
  border: 1px solid #eee;
}

.keunggulan-card-modern:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  border-color: transparent;
}

/* ICON */
.icon-modern {
  width: 100px;
  /* height: 1px; */
  border-radius: 12px;
  background: rgba(220, 53, 69, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.icon-modern img {
  width: 50px;
}

/* NUMBER */
.number-modern {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.1);
}

/* HOVER EFFECT */
.keunggulan-card-modern:hover .icon-modern {
  /* background: #dc3545; */
}

.keunggulan-card-modern:hover .icon-modern img {
  /* filter: brightness(0) invert(1); */
}

.keunggulan-card-modern:hover h5 {
  color: #dc3545;
}

/* Card Keunggulan  */

.bg-navbar {
  background-color: white;
}

.navbar-stick:not(.navbar-dark) {
  background-color: white;
  backdrop-filter: blur(200px);
  -webkit-backdrop-filter: blur(100px);
}

.sec-title__title > span.underline-effect {
  position: relative;
  /* color: var(--main-color); */
  overflow: hidden;
}
.sec-title__title > span.underline-effect::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  content: "";
  animation: widths 3s linear infinite;
  background-color: var(--base-color);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 229 7" xmlns="http://www.w3.org/2000/svg"><path d="M229 2.67187C228.139 2.92187 227.429 2.96484 226.707 2.95703C222.57 2.91015 218.428 2.83984 214.291 2.80468C211.131 2.77734 207.866 2.55468 204.835 2.83984C199.487 3.34374 194.151 2.95703 188.826 3.09374C182.696 3.24999 176.505 3.19531 170.336 3.16015C164.983 3.1289 159.63 2.92578 154.26 3.05078C152.173 3.09765 150.057 2.87109 147.969 3.02343C144.893 3.24999 141.839 3.21093 138.774 3.0039C137.375 2.91015 136.042 3.14843 134.67 3.20312C131.039 3.35156 127.402 3.37109 123.765 3.41015C123.126 3.41796 122.432 3.44531 121.855 3.56249C119.8 3.97265 117.59 4.15624 115.441 4.15234C111.782 4.14843 108.234 4.55078 104.558 4.52734C98.3223 4.48437 92.0754 4.74218 85.8342 4.72656C79.8317 4.71484 73.8292 4.67187 67.8267 4.71484C65.5501 4.73046 63.279 4.76953 61.019 4.88281C60.2916 4.91796 59.5587 4.98437 58.8368 4.95703C54.0115 4.78906 49.3028 5.25781 44.5385 5.46484C40.2629 5.64843 35.9929 5.88671 31.7062 6.03515C26.4478 6.21484 21.206 6.53124 15.992 6.89453C11.6886 7.19531 7.57959 6.80468 3.46502 6.36718C1.94913 6.20703 0.072307 4.93749 0.00567426 4.21484C-0.0609585 3.49609 0.577605 3.12499 2.15458 2.95703C6.19141 2.51953 10.356 2.49999 14.4317 2.13281C23.366 1.32421 32.4003 0.816401 41.4901 0.558588C48.6253 0.355463 55.7662 0.273432 62.9181 0.285151C68.4375 0.292963 73.9624 0.164057 79.4763 0.226557C85.4066 0.292963 91.3258 0.164057 97.2506 0.164057C106.585 0.164057 115.924 0.0117134 125.259 0.00390089C133.382 -0.0039116 141.506 0.0742134 149.624 0.281245C164.394 0.660151 179.187 0.886713 193.94 1.38671C204.074 1.73046 214.219 1.96484 224.352 2.28515C225.868 2.32812 227.329 2.48046 229 2.67187Z"/></svg>');
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 229 7" xmlns="http://www.w3.org/2000/svg"><path d="M229 2.67187C228.139 2.92187 227.429 2.96484 226.707 2.95703C222.57 2.91015 218.428 2.83984 214.291 2.80468C211.131 2.77734 207.866 2.55468 204.835 2.83984C199.487 3.34374 194.151 2.95703 188.826 3.09374C182.696 3.24999 176.505 3.19531 170.336 3.16015C164.983 3.1289 159.63 2.92578 154.26 3.05078C152.173 3.09765 150.057 2.87109 147.969 3.02343C144.893 3.24999 141.839 3.21093 138.774 3.0039C137.375 2.91015 136.042 3.14843 134.67 3.20312C131.039 3.35156 127.402 3.37109 123.765 3.41015C123.126 3.41796 122.432 3.44531 121.855 3.56249C119.8 3.97265 117.59 4.15624 115.441 4.15234C111.782 4.14843 108.234 4.55078 104.558 4.52734C98.3223 4.48437 92.0754 4.74218 85.8342 4.72656C79.8317 4.71484 73.8292 4.67187 67.8267 4.71484C65.5501 4.73046 63.279 4.76953 61.019 4.88281C60.2916 4.91796 59.5587 4.98437 58.8368 4.95703C54.0115 4.78906 49.3028 5.25781 44.5385 5.46484C40.2629 5.64843 35.9929 5.88671 31.7062 6.03515C26.4478 6.21484 21.206 6.53124 15.992 6.89453C11.6886 7.19531 7.57959 6.80468 3.46502 6.36718C1.94913 6.20703 0.072307 4.93749 0.00567426 4.21484C-0.0609585 3.49609 0.577605 3.12499 2.15458 2.95703C6.19141 2.51953 10.356 2.49999 14.4317 2.13281C23.366 1.32421 32.4003 0.816401 41.4901 0.558588C48.6253 0.355463 55.7662 0.273432 62.9181 0.285151C68.4375 0.292963 73.9624 0.164057 79.4763 0.226557C85.4066 0.292963 91.3258 0.164057 97.2506 0.164057C106.585 0.164057 115.924 0.0117134 125.259 0.00390089C133.382 -0.0039116 141.506 0.0742134 149.624 0.281245C164.394 0.660151 179.187 0.886713 193.94 1.38671C204.074 1.73046 214.219 1.96484 224.352 2.28515C225.868 2.32812 227.329 2.48046 229 2.67187Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left bottom;
  mask-position: left bottom;
  -webkit-mask-size: cover;
  mask-size: cover;
}

@-webkit-keyframes widths {
  0% {
    width: 0%;
  }
  50% {
    width: 97%;
    left: 0;
  }
  100% {
    width: 0;
  }
}

@keyframes widths {
  0% {
    width: 0%;
  }
  50% {
    width: 97%;
    left: 0;
  }
  100% {
    width: 0;
  }
}

.sec-title__tagline__left-border {
  width: 25px;
  height: 12px;
  display: inline-block;
  border: 1px solid var(--base-color);
  border-radius: 100px;
  position: relative;
  top: 0;
  margin-right: 10px;
  overflow: hidden;
}
.sec-title__tagline__left-border::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 18px;
  height: 100%;
  background-color: var(--base-color);
  border-radius: 100px;
  content: "";
  animation: zumpXX 2s linear infinite;
}
@keyframes zumpXX {
  0%,
  100% {
    left: -20%;
  }
  50% {
    left: 50%;
  }
}

.isotope-filter {
  text-align: left;
  background: white;
  padding: 15px;
  width: 39%;
  border-radius: 15px;
}
.kategori-tabs {
  display: inline-flex;
  gap: 12px;
  border-radius: 12px;
}

.kategori-tabs .tab {
  border: none;
  background: transparent;
  padding: 14px 16px;
  border-radius: 10px;
  color: #6c757d;
  font-weight: 500;
  /* cursor: pointer; */
  transition: all 0.3s ease;
}

.kategori-tabs .tab.active {
  background: #ffffff;
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.kategori-tabs-mobile .tab {
  border: none;
  background: transparent;
  padding: 13px 17px;
  border-radius: 10px;
  color: #6c757d;
  font-weight: 500;
  /* cursor: pointer; */
  transition: all 0.3s ease;
}

.kategori-tabs-mobile .tab.active {
  background: #ffffff;
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  background: white;
  /* max-height: 450px;
  min-height: 450px; */
}

/* Core styles/functionality */
.tab {
  position: relative;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
  max-height: 10rem;
  overflow: auto;
}

/* Visual styles */
.accordion {
  color: var(--theme);
  /* border: 2px solid; */
  border-radius: 0.5rem;
  overflow: hidden;
}
.tab__label,
.tab__close {
  display: flex;
  color: var(--base-color);
  background: var(--theme);
  cursor: pointer;
}
.tab__label {
  justify-content: space-between;
  padding: 1rem;
}
.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}
.tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
.tab__content p {
  margin: 0;
  padding: 1rem;
}
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
.accordion--radio {
  --theme: var(--secondary);
}

/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce 0.5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(0.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-0.25rem);
  }
}

.nav-tabs {
  background: white;
  padding: 10px;
  width: 31%;
  border-radius: 15px;
}

.nav-tabs-mobile {
  background: white;
  padding: 10px;
  justify-content: center;
  /* width: 31%; */
  border-radius: 15px;
}

.sosmed-color {
  color: var(--base-color) !important;
}

html {
  scroll-behavior: smooth;
}

.bg-stats {
  background-color: #1a371ccc;
  padding: 15px;
  border-radius: 15px;
}