@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* 
"Wix Madefor Display", sans-serif; *
"Allison", cursive;
"MuseoModerno", sans-serif;
"Lemonada", cursive; *
"Ancizar Sans", sans-serif; *
"Proza Libre", sans-serif; *
"Puritan", sans-serif;
"Sulphur Point", sans-serif;
"Gentium Book Plus", serif;
"Numans", sans-serif;
"Raleway", sans-serif;
"DM Sans", sans-serif;
*/

:root {
  --base-color: #3189b9;
  --second-color: #1f638a;
  --third-color: #5f5e64;
  --four-color: #3f78e0;
  --very-light-base-color: #fbeee1;
  --bs-primary-rgb: 18, 127, 74;
  --bs-secondary-rgb: 170, 176, 188;
  --primary-font: "Roboto", sans-serif;;
  --alt-font: "Roboto", sans-serif;;
}

.bg-base-color {
  background-color: var(--base-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(--base-color);
}

.bg-top-bar {
  background: #3189b9; /* Fallback */
  background: -webkit-linear-gradient(
    90deg,
    #3189b9,
    #1f638a #3189b9
  ); /* Safari 5.1-6 */
  background: linear-gradient(90deg, #3189b9, #1f638a #3189b9);
}

.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: white;
}

button.hamburger {
  color: black !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--primary-font);
  font-weight: 600;
  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;
}

/* 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) {
  .fs-25 {
    font-size: 20px !important;
  }
  .fs-30 {
    font-size: 22px !important;
  }
  .ornamen-cloud {
    top: 0px !important;
  }
  .art-l7-box {
    padding: 15px !important;
  }
  .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;
}

.custom-shape-divider-bottom-testi {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-testi svg {
  position: relative;
  display: block;
  width: calc(123% + 1.3px);
  height: 52px;
}

.custom-shape-divider-bottom-testi .shape-fill {
  fill: #041c5c;
}

.custom-shape-divider-top-testi {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-testi svg {
  position: relative;
  display: block;
  width: calc(123% + 1.3px);
  height: 52px;
  transform: rotateY(180deg);
}

.custom-shape-divider-top-testi .shape-fill {
  fill: #041c5c;
}

/* 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-welcomeeee {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Grid Garis Raksasa */
.background-welcomeeee::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(49, 137, 185, 0.03) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(49, 137, 185, 0.03) 1.5px, transparent 1.5px);
    background-size: 60px 60px;
    z-index: -2;
    pointer-events: none;
}

/* Sorot Cahaya Biru Lembut Khusus di Sisi Teks (Kiri Tengah) */
.background-welcomeeee::after {
    content: "";
    position: absolute;
    width: 800px;
    height: 600px;
    top: 50%;
    left: -100px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(49, 137, 185, 0.09) 0%, rgba(255,255,255,0) 75%);
    z-index: -1;
    filter: blur(10px);
    pointer-events: none;
}

.background-welcome {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Set base background putih agar bagian transparan gradasi mengarah ke putih */
  background-color: #ffffff;
}

/* BACKGROUND IMAGE (DENGAN MIX-BLEND-MODE) */
.background-welcome::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../Aset Desain/pakai/bg/1.webp");
  background-size: cover;
  background-position: center;
  z-index: -1;
  opacity: 0.2;
  /* mix-blend-mode: overlay;  */
}

.background-lepas-kunci {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Menggunakan base background hitam kehijauan yang sangat pekat */
  background-color: #050d09;
}

.background-lepas-kunci::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* 🔥 FIX OVERLAY SUPER GELAP: Gradasi pekat dari atas sampai bawah */
  background:
    linear-gradient(
      to bottom,
      rgba(5, 13, 9, 0.035) 0%,
      /* Gelap pekat di atas dengan sedikit rona base */ rgba(5, 13, 9, 0.355)
        50%,
      /* Semakin gelap di area tengah teks */ rgba(5, 13, 9, 0.526) 100%
        /* Hampir 100% solid di bawah agar menyatu sempurna dengan section selanjutnya */
    ),
    url("../Aset Desain/pakai/bg/11.webp");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  /* Mengaktifkan kembali filter opsional untuk meredam kecerahan gambar asli jika bawaannya terlalu terang */
  filter: brightness(0.4) contrast(1.1);

  /* Opacity dikurangi sedikit lagi agar gambar .webp di background hanya menjadi tekstur samar yang elegan */
  opacity: 0.4;

  z-index: -1;
}

.background-rental {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* 🔥 BASE BACKGROUND: Menggunakan warna dasar putih bersih */
  background-color: #ffffff;
}

.background-rental::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* 🔥 OVERLAY GRADASI PUTIH: Gradasi transparan halus ke putih solid di bagian bawah */
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.4) 0%,
      /* Tipis di atas agar detail gambar tekstur tetap terlihat */
      rgba(255, 255, 255, 0.7) 50%,
      /* Mulai memutih halus di area tengah untuk keterbacaan konten */
      rgba(255, 255, 255, 0.98) 100%
        /* Hampir putih solid di bawah agar menyatu mulus dengan section berikutnya */
    ),
    url("../Aset Desain/pakai/bg/5.webp");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  /* Menjaga kecerahan dan kontras gambar agar serasi dengan nuansa terang */
  filter: brightness(1.05) contrast(0.95);

  /* 🔥 OPACITY LIGHT MODE: Diatur ke 0.25 agar tekstur gambar .webp tetap samar, bersih, dan elegan */
  opacity: 0.25;

  z-index: -1;
}

/* ==================== ORNAMEN TAMBAHAN (NO BUG) ==================== */

/* 1. Ornamen Circle Dots (Pola Titik-titik Modern di Sisi Kiri) */
.background-rental::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 3%;
  width: 90px;
  height: 120px;
  /* Membuat pola titik-titik simetris menggunakan radial-gradient */
  background-image: radial-gradient(#3b82f6 1.5px, transparent 1.5px);
  background-size: 15px 15px;
  opacity: 0.25;
  z-index: -1;
  pointer-events: none;
}

/* 2. Ornamen Corner Circle Blue (Lingkaran Tipis Biru di Kiri Atas) */
.ornament-circle-blue {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  border: 1.5px solid rgba(59, 130, 246, 0.25);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* 3. Ornamen Corner Circle Red (Lingkaran Tipis Merah di Kanan Bawah) */
.ornament-circle-red {
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 250px;
  height: 250px;
  border: 1.5px solid rgba(239, 68, 68, 0.2);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* Sembunyikan ornamen di layar super kecil jika dirasa terlalu padat (Opsional & Aman) */
@media (max-width: 575.98px) {
  .background-rental::after {
    left: -10px;
    opacity: 0.15;
  }
  .ornament-circle-blue {
    width: 120px;
    height: 120px;
  }
  .ornament-circle-red {
    width: 150px;
    height: 150px;
  }
}

.background-wisata {
  position: relative;
  z-index: 1;
  overflow: visible;
}

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

  /* Gradasi Hitam Arang ke Hitam Pekat */
  background:
    linear-gradient(
      135deg,
      rgba(24, 28, 26, 0.85) 0%,
      /* Hitam dengan sedikit tint hijau abu-abu */ rgba(15, 17, 16, 0.92) 50%,
      /* Dark Charcoal */ rgba(8, 10, 9, 0.99) 100% /* Pure Dark Black */
    ),
    url("../Aset Desain/pakai/bg/5.webp");

  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  opacity: 0.95;
  filter: none;

  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 alur proses  */
.ly-step-list {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Balok Abu-abu Lembut Raksasa di Kiri-Tengah */
.ly-step-list::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -15%;
  width: 45%;
  height: 120%;
  background-color: #f8fafc;
  transform: skewX(-20deg);
  z-index: -2;
  pointer-events: none;
}

/* Balok Aksen Biru Tipis Panjang di Sisi Kanan */
.ly-step-list::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 5%;
  width: 80px;
  height: 140%;
  background: linear-gradient(to bottom, rgba(49, 137, 185, 0.12), rgba(31, 99, 138, 0.02));
  transform: skewX(-20deg);
  z-index: -1;
  pointer-events: none;
}
/* background alur proses  */

/* background layanan  */
.ly-layanan-cine-v2 {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Pola Grid Raksasa di Seluruh Background */
.ly-layanan-cine-v2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Membuat kotak grid ukuran besar 60px x 60px */
  background-image:
      linear-gradient(rgba(49, 137, 185, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(49, 137, 185, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: -2;
  pointer-events: none;
}

/* Efek Sorot Cahaya Lembut di Tengah Atas */
.ly-layanan-cine-v2::after {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(circle, rgba(49, 137, 185, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: -1;
  filter: blur(20px);
  pointer-events: none;
}
/* background layanan  */

.background-keunggulan {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Warna dasar diubah menjadi putih penuh */
  background-color: #ffffff;
}

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

  background: url("../Aset Desain/pakai/bg/7.webp") center/cover no-repeat;
  /* background-attachment: fixed; */
  opacity: 0.2;
  z-index: -2;
}

.background-paket {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Warna dasar diubah menjadi putih penuh */
  background-color: #ffffff;
}

/* BACKGROUND IMAGE (FIXED ABU-ABU) */
.background-paket::before {
  content: "";
  position: absolute;
  inset: 0;

  background: url("../Aset Desain/pakai/bg/6.webp") center/cover no-repeat;
  /* background-attachment: fixed; */
  opacity: 0.08;
  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-destinasi {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #ffffff;
}

/* Gambar Lapisan Bawah */
.background-destinasi::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 1) 100%
    ),
    url("../Aset Desain/pakai/bg/6.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -1;
  opacity: 0.1;
  pointer-events: none;
}

/* Overlay Gradasi Tipis Kiri ke Kanan */
.background-destinasi::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(239, 68, 68, 0.08) 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* ==================== ADDED ORNAMENTS OPSI 3 ==================== */
/* Garis Siku Pojok Kiri Atas (Biru) */
.bt-line-blue {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 60px;
  height: 60px;
  border-top: 2px solid rgba(59, 130, 246, 0.3);
  border-left: 2px solid rgba(59, 130, 246, 0.3);
  z-index: -1;
  pointer-events: none;
}

/* Garis Siku Pojok Kanan Bawah (Merah) */
.bt-line-red {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 60px;
  height: 60px;
  border-bottom: 2px solid rgba(239, 68, 68, 0.3);
  border-right: 2px solid rgba(239, 68, 68, 0.3);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .bt-line-blue {
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
  }
  .bt-line-red {
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }
}

.background-footer {
  position: relative;
  z-index: 1;
  /* overflow: hidden; */
  /* background-color: rgba(255, 255, 255, 0.1); */
}

.background-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;

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

  /* convert image ke grey */
  filter: grayscale(100%);

  z-index: -1;
  opacity: 1;
}
.background-footer::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: #322f30d4;

  z-index: -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
==========================================================================*/
/* Mengubah layout active menjadi bentuk kapsul */
.navbar-nav .nav-link.active {
  color: #ffffff !important; /* Mengubah teks menjadi putih agar kontras dengan background */
  background-color: var(--base-color);
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  border-radius: 30px; /* Membuat sudut membulat sempurna berbentuk kapsul */
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.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;
  }
}

/* ==========================================================================
   DYNAMIC NAVBAR LINK COLOR (NOT-HOME & SCROLLED STATE)
   ========================================================================== */

/* Kondisi Default: Saat di selain halaman home ATAU saat navbar di-scroll */
.navbar.navbar-not-home .navbar-nav .nav-link,
.navbar.navbar-scrolled .navbar-nav .nav-link {
  color: #333333 !important; /* Ubah ke kode warna 'text-base-color' gelap pilihan Anda */
  transition: color 0.3s ease;
}

/* Kondisi Hover: Agar teks tetap menyala biru/warna aksen saat diarahkan kursor */
.navbar.navbar-not-home .navbar-nav .nav-link:hover,
.navbar.navbar-scrolled .navbar-nav .nav-link:hover {
  color: #1f638a !important; 
}

/* Kondisi Aktif: Menu halaman yang sedang dikunjungi tetap berwarna aksen khusus */
.navbar.navbar-not-home .navbar-nav .nav-link.active,
.navbar.navbar-scrolled .navbar-nav .nav-link.active {
  color: white !important; /* Warna aksen aktif */
  font-weight: 600;
}

/* 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  */

/* floatin wa 2  */
.floating-wave-container {
  position: fixed;
  left: 25px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 99999;
}

.wave-btn {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 50px;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.3s ease;
}
.wave-btn:hover {
  transform: scale(1.05);
}

.wave-btn i {
  font-size: 20px;
  margin-right: 10px;
}

/* WhatsApp Wave */
.btn-wave-wa {
  background-color: #25d366;
  animation: pulse-wa-wave 2s infinite;
}

/* Phone Wave */
.btn-wave-call {
  background-color: #007bff;
  animation: pulse-call-wave 2s infinite;
  animation-delay: 1s; /* Diberi jeda agar tidak bersamaan */
}

/* Keyframes Gelombang Menyebar */
@keyframes pulse-wa-wave {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes pulse-call-wave {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

@media (max-width: 768px) {
  .floating-wave-container {
    right: 15px;
    bottom: 15px;
    gap: 10px;
  }
  .wave-btn {
    padding: 10px;
    min-width: 120px;
    max-width: 120px;
    display: flex;
    justify-content: center;
    font-size: 10px;
    min-height: 40px;
    max-height: 40px;
    gap: 10px;
  }
  .wave-btn i {
    margin-right: 0;
    font-size: 16px;
    color: white;
  }
  .wave-btn span {
    /* display: none; */
  } /* Sembunyikan teks di HP */
}
/* floating wa 2  */

/* 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  */
.ft-layout-v3-wrapper {
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}
.ft-layout-v3-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    -45deg,
    rgba(220, 38, 38, 0.85) 0%,
    rgba(30, 41, 59, 0.95) 60%
  );
  z-index: 1;
}
.v3-icon-box {
  width: 50px;
  height: 50px;
  background: #dc2626;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.v3-btn-group {
  position: relative;
  z-index: 2;
}
.btn-v3-wa,
.btn-v3-phone {
  padding: 14px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.btn-v3-wa {
  background: #25d366;
  color: white;
}
.btn-v3-wa:hover {
  background: #1ebd54;
  transform: scale(1.03);
  color: white;
}
.btn-v3-phone {
  background: white;
  color: #1e293b;
}
.btn-v3-phone:hover {
  background: #f8fafc;
  transform: scale(1.03);
  color: #1e293b;
}

/* cta baru  */

/* Footer baru  */
.cta-full-wave {
  margin: 0 !important;
  border: none;
}

.cta-wave-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(28 35 51 / 64%) 0%, #1b2131 100%);
  z-index: 1;
}

.btn-wa-wave {
  background: #25d366;
  color: #ffffff;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn-wa-wave:hover {
  background: #128c7e;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

/* Footer Wave Style (Nempel Tanpa Jeda) */
.ft-wave-style {
  background: #111827;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ornamen Baru: Border Kiri Segar */
.ft-title-accent {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
  margin-bottom: 20px;
  border-left: 3px solid white;
  padding-left: 10px;
}

.quick-links-wave {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quick-links-wave li {
  margin-bottom: 10px;
}

.quick-links-wave a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
  display: inline-block;
}

.quick-links-wave a:hover {
  color: #ffffff;
  transform: translateX(5px);
}

.socmed-icon-wave {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.socmed-icon-wave:hover {
  background: white;
  border-color: white;
  color: #fff;
}

.ft-matrix-layout {
  position: relative;
  z-index: 1;
  overflow: hidden; /* Mengunci ornamen agar tidak bocor keluar dari batas layar smartphone */
  background-color: #0f172a !important;
  margin: 0 !important;
}

/* Mengatur lapisan gambar background footer */
.ft-matrix-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../Aset Desain/pakai/bg/3.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.12 !important;
  filter: brightness(0.5) contrast(1.2) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* ==================== ORNAMEN BACKGROUND FOOTER (NO BUG) ==================== */

/* 1. Ornamen Pola Titik-Titik di Sisi Kiri Tengah */
.ft-matrix-layout::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 2%;
  width: 70px;
  height: 90px;
  /* Membuat pola dots menggunakan radial-gradient transparan */
  background-image: radial-gradient(
    rgba(59, 130, 246, 0.25) 1.5px,
    transparent 1.5px
  );
  background-size: 15px 15px;
  z-index: -1;
  pointer-events: none;
}

/* 2. Ornamen Lingkaran Tipis Biru di Pojok Kanan Atas */
.ft-matrix-layout .footer-circle-blue {
  position: absolute;
  top: -60px;
  right: -40px;
  width: 180px;
  height: 180px;
  border: 1.2px solid rgba(59, 130, 246, 0.2);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* 3. Ornamen Lingkaran Tipis Merah di Pojok Kiri Bawah */
.ft-matrix-layout .footer-circle-red {
  position: absolute;
  bottom: -50px;
  left: -30px;
  width: 160px;
  height: 160px;
  border: 1.2px solid rgba(239, 68, 68, 0.15);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* Pengondisian layar kecil agar tetap rapi di mobile */
@media (max-width: 767.98px) {
  .ft-matrix-layout::after {
    display: none;
  } /* Sembunyikan dots di mobile agar tidak terlalu padat */
  .ft-matrix-layout .footer-circle-blue {
    width: 120px;
    height: 120px;
    top: -30px;
    right: -20px;
  }
  .ft-matrix-layout .footer-circle-red {
    width: 110px;
    height: 110px;
    bottom: -30px;
    left: -20px;
  }
}

.matrix-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #94a3b8;
  margin-bottom: 20px;
}

.matrix-links li {
  margin-bottom: 10px;
}

.matrix-links li:last-child {
  margin-bottom: 0;
}

.matrix-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.2s;
  display: inline-block;
}

.matrix-links a:hover {
  color: white;
  transform: translateX(4px);
}

.matrix-socmed-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 6px 12px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: 0.2s;
}

.matrix-socmed-item:hover {
  background: #ffffff;
  color: #0f172a;
  border-color: #ffffff;
}

.matrix-socmed-item:hover i {
  color: var(--base-color) !important;
}

@media (min-width: 992px) {
  .border-end-lg {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

@media (min-width: 768px) {
  .border-end-md {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* --- OPSI 2 STYLE --- */
.btn-gradient-block-v2 {
  background: linear-gradient(135deg, #1d4ed8, #b91c1c);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 26px;
  border-radius: 6px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  width: 100%;
}

.btn-gradient-block-v2:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-gradient-outline-v2 {
  background: transparent;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 6px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  border: 2px solid #b91c1c;
  /* Border awal merah */
  width: 100%;
}

.btn-gradient-outline-v2:hover {
  transform: scale(1.03);
  background: linear-gradient(135deg, #1d4ed8, #b91c1c);
  border-color: transparent;
}

@media (min-width: 576px) {
  .btn-gradient-block-v2,
  .btn-gradient-outline-v2 {
    width: auto;
  }
}
/* footer baru  */

.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  */

/* step alur proses  */
.paket-section {
  background-color: #f8fafc;
}

.paket-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efek Angkat Kartu Saat Hover */
.paket-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: #cbd5e1;
}

/* ==================== SISI KIRI: GAMBAR PROYEK ==================== */
.paket-img-container {
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

.paket-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.paket-card:hover .paket-img {
  transform: scale(1.06);
}

/* ==================== SISI KANAN: KONTEN DETAIL ==================== */
.paket-content {
  padding: 10px;
}

.paket-badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--base-color);
}

.paket-price-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: -2px;
}

.paket-price {
  font-size: 26px;
  font-weight: 800;
  color: var(--base-color);
}

/* ==================== SCROLLBAR SPEC LIST & GOLD CHECKMARK ==================== */
.paket-spec-list .spec-scroll-container {
  margin: 18px 0 0 0;
  padding-right: 10px;
  max-height: 140px; /* Tinggi ideal agar pas dan simetris dengan layout gambar */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mengatur style UL */
.paket-spec-list ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Mengatur style LI */
.paket-spec-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  white-space: normal;
}

/* Ikon Centang Emas SVG Pure (No Bug) */
.paket-spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007bff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Styling Teks Bold */
.paket-spec-list li strong {
  color: #1e293b;
  font-weight: 700;
}

/* ==================== FIX SUB-LIST KERAMIK (NO BUG CENTANG) ==================== */
.paket-spec-list li ol li::before,
.paket-spec-list li ul li::before {
    content: none !important;
}
.paket-spec-list li ol li,
.paket-spec-list li ul li {
    padding-left: 0 !important;
    margin-bottom: 2px;
    list-style-type: inherit;
}

/* ==================== CUSTOM WEBKIT SCROLLBAR UI ==================== */
.paket-spec-list .spec-scroll-container::-webkit-scrollbar {
  width: 6px;
}
.paket-spec-list .spec-scroll-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}
.paket-spec-list .spec-scroll-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
.paket-spec-list .spec-scroll-container::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

/* ==================== CALL TO ACTION BUTTONS ==================== */
.btn-paket {
  border-radius: 8px;
  font-size: 14px;
  padding: 10px 20px;
  transition: all 0.3s ease;
  border: none;
}

.btn-gold {
  background-color: var(--base-color);
  color: #ffffff !important;
}
.btn-gold:hover {
  background-color: var(--second-color);
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
}

.btn-dark-navy {
  background-color: #0f172a;
  color: #ffffff !important;
}
.btn-dark-navy:hover {
  background-color: #1e293b;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}

/* Responsive Handphone */
@media (max-width: 575.98px) {
  .paket-img-container {
    min-height: 220px;
  }
  .paket-img {
    position: relative;
  }
}

/* ==================== KODE ALUR PROSES (TIMELINE) ==================== */
.ly-step-list .img-stack-wrapper {
  position: relative;
  padding: 30px 30px 50px 10px;
}

/* Ornamen Pola Titik */
.ly-step-list .img-stack-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(#3189b9 20%, transparent 20%);
  background-size: 12px 12px;
  opacity: 0.25;
  z-index: 0;
}

/* Ornamen Lingkaran Gradasi */
.ly-step-list .ornament-circle {
  position: absolute;
  bottom: 10px;
  left: -20px;
  width: 160px;
  height: 160px;
  background: linear-gradient(
    135deg,
    rgba(49, 137, 185, 0.15) 0%,
    rgba(49, 137, 185, 0.02) 100%
  );
  border-radius: 50%;
  z-index: 0;
}

/* Frame Gambar Utama */
.ly-step-list .img-frame-primary {
  width: 82%;
  height: 310px;
  position: relative;
  z-index: 2;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease;
}

/* Frame Gambar Kedua (Menumpuk di Depan) */
.ly-step-list .img-frame-secondary {
  width: 60%;
  height: 200px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border: 5px solid #ffffff;
  transition: transform 0.4s ease;
}

.ly-step-list .img-stack-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover Efek Gambar */
.ly-step-list .img-stack-wrapper:hover .img-frame-primary {
  transform: scale(1.02) translateY(-5px);
}

.ly-step-list .img-stack-wrapper:hover .img-frame-secondary {
  transform: scale(1.05) translate(-5px, -5px);
}

/* ==================== SISI KANAN: SEMANTIC TIMELINE LIST (UL/LI) ==================== */
.ly-step-list .timeline-list {
  list-style: none;
  padding-left: 35px;
  margin: 30px 0 0 0;
  position: relative;
}

/* Garis Vertikal Alur List */
.ly-step-list .timeline-list::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 2px;
  height: calc(100% - 30px);
  background: #e2e8f0;
  z-index: 1;
}

.ly-step-list .step-list-item {
  position: relative;
  padding-bottom: 28px;
  counter-increment: step-counter;
}

.ly-step-list .step-list-item:last-child {
  padding-bottom: 0;
}

/* Bulatan Nomor List */
.ly-step-list .step-number-badge {
  position: absolute;
  left: -35px;
  top: 2px;
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  transition: all 0.3s ease;
}

.ly-step-list .step-number-badge::before {
  content: counter(step-counter, decimal-leading-zero);
}

.ly-step-list .step-content-box {
  padding: 5px 10px;
  transition: transform 0.3s ease;
}

/* ANIMASI HOVER PADA LIST ITEM */
.ly-step-list .step-list-item:hover .step-number-badge {
  background: #3189b9;
  border-color: #3189b9;
  color: #ffffff;
  box-shadow: 0 0 0 5px rgba(49, 137, 185, 0.15);
}

.ly-step-list .step-list-item:hover .step-content-box {
  transform: translateX(6px);
}

.ly-step-list .step-list-item:hover h3 {
  color: #3189b9 !important;
}

/* ==================== CSS TOOLTIP & INTERNAL LIST SUPPORT ==================== */
.ly-step-list .step-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  margin-left: 6px;
  vertical-align: middle;
}

.ly-step-list .step-tooltip-wrapper i {
  color: #94a3b8;
  font-size: 14px;
  transition: color 0.2s;
}

.ly-step-list .step-tooltip-wrapper:hover i {
  color: #3189b9;
}

.ly-step-list .tooltip-popup {
  visibility: hidden;
  width: 260px;
  background-color: #1e293b;
  color: #ffffff;
  text-align: left;
  border-radius: 8px;
  padding: 12px 14px;
  position: absolute;
  z-index: 99;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);
  font-size: 12px;
  line-height: 1.5;
  font-weight: normal;
  white-space: normal;
}

/* Segitiga Tooltip bawah */
.ly-step-list .tooltip-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #1e293b transparent transparent transparent;
}

/* Trigger Hover Tooltip */
.ly-step-list .step-tooltip-wrapper:hover .tooltip-popup {
  visibility: visible;
  opacity: 1;
  bottom: 120%;
}

.ly-step-list .tooltip-popup ul,
.ly-step-list .tooltip-popup ol {
  margin: 5px 0 0 0;
  padding-left: 16px;
}

.ly-step-list .tooltip-popup li {
  margin-bottom: 3px;
  list-style-type: disc;
}

.ly-step-list .tooltip-popup li:last-child {
  margin-bottom: 0;
}


/* ==================== 📱 FIX MOBILE RESPONSIVE (ANTI-OVERWIDTH) ==================== */
@media (max-width: 767.98px) {
  .ly-step-list {
    overflow-x: hidden; /* Garansi mutlak komponen tidak akan melar ke kanan */
  }
  
  .ly-step-list .img-stack-wrapper {
    padding: 20px 15px 40px 10px;
  }

  .ly-step-list .img-frame-primary {
    width: 85%;
    height: 240px; /* Diperkecil agar proporsional di layar HP */
  }

  .ly-step-list .img-frame-secondary {
    width: 55%;
    height: 150px; /* Diperkecil agar proporsional di layar HP */
  }

  /* Amankan posisi ornamen lingkaran agar tidak menusuk keluar layar kiri */
  .ly-step-list .ornament-circle {
    left: 0;
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 575.98px) {
  /* FIX BUG TOOLTIP: Aliran kotak digeser ke kanan agar tidak mentok & tumpah di layar HP */
  .ly-step-list .tooltip-popup {
    right: -30px;
    transform: none;
    width: 270px;
    left: auto;
    bottom: 30px !important;
  }

  /* Sesuaikan posisi lancipan segitiga hitam agar tetap presisi di bawah icon tanda tanya */
  .ly-step-list .tooltip-popup::after {
    right: 30px;
    margin-left: 0;
    left: auto;
  }
}

/* step alur proses  */

/* 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  */

/* badge  */
.wl-badge-rb-v10 {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #ef4444 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* badge  */

/* Page Header  */
.cp-header-v8 {
  padding: 65px 0 65px 0;
  background-color: #060b13;
}
/* Kisi Garis Halus (Tech Grid Overlay) */
.cp-v8-grid {
  position: absolute;
  inset: 0;
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  z-index: 1;
  pointer-events: none;
}
/* Lampu Indikator Berkedip (Pulse Animation) */
.cp-v8-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--base-color);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16, 100, 185, 0.7);
  animation: cpV8Pulse 2s infinite;
}
@keyframes cpV8Pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}
/* 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;
}

/*--------------------------------------------------------------
  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 {
  background: #f1f5f9 !important; /* Background card */
  border: none !important; /* Hapus border bawaan scss */
  position: relative !important;
  padding: 10px 10px 10px 25px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  font-style: italic !important;
  border-radius: 0 12px 12px 0 !important;
  margin: 1.5rem 0 !important;
  overflow: hidden !important;
}

/* Membuat Garis Vertikal Gradasi */
blockquote::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(to bottom, #0d6efd, #dc3545) !important;
}

@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
--------------------------------------------------------------*/
/* --- V6 OPSI 6: BOLD CONSTRUCTION --- */
/* .v6-op6-footer {
  background: #111111;
  color: #e5e7eb;
  padding: 0;
  letter-spacing: 0.5px;
} */

.v6-op6-footer {
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* Menggunakan hitam murni (pitch black) */
    background-color: #000000; 
}

/* BACKGROUND IMAGE (DIBUAT SANGAT TIPIS) */
.v6-op6-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../Aset Desain/pakai/bg/7.webp") center/cover no-repeat;
    /* Mengubah opacity ke 0.05 agar gambar hanya terlihat samar di atas warna hitam pekat */
    opacity: 0.05; 
    z-index: -1;
}

.v6-op6-accent-bar {
  height: 6px;
  /* background: var(--base-color); */
  width: 100%;
}

.v6-op6-container {
  padding: 60px 20px 30px 20px;
  font-family: Arial, sans-serif;
}

.v6-op6-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

@media (max-width: 991px) {
  .v6-op6-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}

.v6-op6-header {
  font-family: Impact, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--base-color);
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.v6-op6-logo-box {
  background: #ffffff;
  padding: 10px;
  display: inline-block;
  margin-bottom: 15px;
  border-radius: 4px;
}

.v6-op6-logo {
  max-width: 140px;
  height: auto;
  display: block;
}

.v6-op6-body-text {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.6;
  margin: 0;
}

.v6-op6-menu-item {
  list-style: none;
  padding: 0;
  margin: 0;
}

.v6-op6-menu-item li {
  margin-bottom: 12px;
  border-left: 3px solid var(--base-color);
  padding-left: 10px;
}

.v6-op6-menu-item a {
  color: #ffffff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: bold;
  text-transform: uppercase;
}

.v6-op6-menu-item a:hover {
  color: var(--base-color);
}

.v6-op6-contact-row {
  font-size: 13.5px;
  margin-bottom: 15px;
  color: #d1d5db;
  line-height: 1.5;
}

.v6-op6-contact-row span {
  color: var(--base-color);
  font-weight: bold;
}

.v6-op6-btn-action {
  background: var(--base-color);
  color: #111111 !important;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
  padding: 12px 20px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.v6-op6-btn-action:hover {
  background: #ffffff;
}

.v6-op6-copy {
  text-align: center;
  font-size: 11px;
  color: #4b5563;
  border-top: 1px solid #222222;
  margin-top: 50px;
  padding-top: 25px;
  text-transform: uppercase;
}

.v6-title-opt8 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.v6-title-opt8::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #488cec 0%, rgba(255, 255, 255, 0) 85%);
}
/*--------------------------------------------------------------
# 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: black;
}

.fab.orange {
  background: #ff9800;
}

.fab.deep-orange {
  background: var(--base-color);
}

.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: 600;
  font-size: 16px;
}

.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  */
.opt1-section {
  position: relative;
  overflow: hidden;
  background-color: #f8f9fa;
  padding: 80px 0;
}

.opt1-ornament {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  background-image: radial-gradient(#0d6efd 2px, transparent 2px);
  background-size: 20px 20px;
  opacity: 0.2;
  z-index: 0;
}

.opt1-card {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid transparent;
  transition: all 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  margin-bottom: 20px;
}

.opt1-card:hover {
  border-left-color: #0d6efd;
  transform: translateX(10px);
  box-shadow: 0 10px 25px rgba(13, 110, 253, 0.15);
}

.opt1-icon {
  width: 50px;
  height: 50px;
  background: #e9ecef;
  color: #0d6efd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: 0.4s;
}

.opt1-card:hover .opt1-icon {
  background: #0d6efd;
  color: #fff;
  transform: rotateY(180deg);
}

.opt1-map-wrapper {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  height: 100%;
  min-height: 400px;
  transition: 0.3s;
}

.opt1-map-wrapper:hover {
  transform: scale(1.02);
}

.opt1-sosmed {
  transition: 0.3s;
  background: #fff;
  border: 1px solid #dee2e6;
}

.opt1-sosmed:hover {
  background: #0d6efd;
  color: #fff !important;
  border-color: #0d6efd;
  transform: translateY(-5px);
}

.crd-opt3 {
  background: transparent;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  transition: 0.3s;
  margin-bottom: 15px;
  position: relative;
  color: var(--base-color);
}

.crd-opt3-icon {
  width: 45px;
  height: 45px;
  background: #f8f9fa;
  color: #343a40;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  min-width: 45px;
  max-width: 45px;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Efek mantul */
}

/* Efek Hover */
.crd-opt3:hover {
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.crd-opt3-icon {
  color: var(--base-color);
}

.crd-opt3:hover .crd-opt3-icon {
  background: var(--base-color);
  /* Ganti warna tema di sini */
  color: #fff !important;
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 5px 15px rgba(32, 80, 201, 0.4);
}

.crd-opt3-icon:hover i {
  color: white !important;
}

.crd-opt3:hover h6 {
  color: var(--base-color) !important;
  transition: 0.3s;
}

/*Kontak Kami*/

.dark-block-section {
  background-color: #f8f9fa;
}

/* Gradasi Premium untuk Card */
.dark-block-card {
  background: linear-gradient(135deg, #1f532f 0%, #0d2a16 100%);
  color: white;
  padding: 60px 50px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(31, 83, 47, 0.2);
}

.dark-img-fit {
  height: 100%;
  min-height: 500px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.link-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
  transition: 0.3s;
  background: rgba(255, 255, 255, 0.02);
}

.link-outline-light:hover {
  background: rgba(
    197,
    151,
    71,
    0.2
  ); /* Sentuhan warna second-color saat hover */
  border-color: #c59747;
  transform: translateY(-3px);
  color: white;
}

.icon-box-dark {
  font-size: 24px;
  margin-right: 15px;
}
/* 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  */
/* Style default card sidebar */
.v14-side-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efek animasi saat card di-hover (sorot) */
.v14-side-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
  border-color: var(
    --base-color
  ) !important; /* Highlight border biru khas bootstrap */
}

/* Animasi zoom halus pada gambar saat card di-hover */
.v14-side-img img {
  transition: transform 0.3s ease;
}
.v14-side-card:hover .v14-side-img img {
  transform: scale(1.08);
}

/* Membatasi teks judul maks 2 baris agar layout rapi */
.v14-side-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}
/* Mengubah warna teks judul saat card di-hover */
.v14-side-card:hover .v14-side-title {
  color: var(--base-color) !important;
}

.v14-stealth-fb,
.v14-stealth-tw,
.v14-stealth-wa {
  transition: all 0.2s ease;
}

.v14-stealth-fb:hover {
  background: #3b5998 !important;
  color: #fff !important;
  border-color: #3b5998 !important;
}

.v14-stealth-tw:hover {
  background: #1da1f2 !important;
  color: #fff !important;
  border-color: #1da1f2 !important;
}

.v14-stealth-wa:hover {
  background: #25d366 !important;
  color: #fff !important;
  border-color: #25d366 !important;
}
/* artikel detail  */

/* tombbol produk lainnya  */
.btn-luxury-shine {
  display: inline-block;
  background: linear-gradient(135deg, #58b800 0%, #3c9112 100%);
  color: white;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(164, 118, 41, 0.25);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
/* Efek Kilatan Cahaya */
.btn-luxury-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}
/* Efek Hover */
.btn-luxury-shine:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(164, 118, 41, 0.4);
}
.btn-luxury-shine:hover::before {
  left: 150%; /* Jalankan kilatan cahaya */
}
/* tombool produk lainnya  */

/* 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) {
  .gambar-banner {
    height: 250px;
  }
}

/* gambar banner  */

.multi-image .swiper-controls {
  display: none;
}

/* 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 */

/* Base Style Judul & Garis Ganda */
.wl-title-v10 {
  font-weight: 800;
  line-height: 1.4;
  margin-top: 6px;
  color: #0f172a;
}

.wl-line-group {
  display: flex;
  gap: 4px;
  margin-top: 12px;
}

.wl-line-1 {
  width: 45px;
  height: 3px;
  background: #096a02;
  border-radius: 2px;
}

.wl-line-2 {
  width: 15px;
  height: 3px;
  background: #0b7a03;
  border-radius: 2px;
}

/* Variasi Badge 1 */
.wl-badge-custom-1 {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--base-color, #c92327);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-left: 3px solid var(--base-color, #c92327);
  padding-left: 10px;
}
/* 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*/
#portofolio {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Teks Raksasa di Latar Belakang */
#portofolio::before {
  content: "PWK";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24vw; /* Mengikuti lebar layar browser */
  font-weight: 900;
  letter-spacing: 10px;
  color: #f1f5f9; /* Abu-abu super tipis */
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.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  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  */

/*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  */
.profile-section-2 {
}
.img-container-rounded {
  position: relative;
  height: 100%;
  min-height: 420px;
  border-radius: 20px;
  overflow: hidden;
}
.img-container-rounded img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Ornamen Kotak Kaca Melayang di atas Gambar */
.glass-location-badge {
  position: absolute;
  bottom: 25px;
  left: 25px;
  right: 25px;
  background: rgba(30, 41, 59, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
}
.list-btn-interactive {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: #1e293b;
  border-left: 4px solid #c59747;
  border-radius: 0 8px 8px 0;
  text-decoration: none;
  transition: all 0.2s ease;
}
.list-btn-interactive:hover {
  background: #243752;
  padding-left: 25px;
}

/* 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*/

/*end card layanan baru*/

/* animasi wwelcome text  */
/* ========================================================
       CSS ANIMATION BASE & STATE (ANTI SHIFTING & ANTI BUG)
       ======================================================== */

/* State Awal Gambar: Tersembunyi, bergeser ke kiri sedikit, dan mengecil */
.wl-anim-fade-right {
  opacity: 0;
  transform: translate3d(-40px, 0, 0) scale(0.95);
  transition:
    opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

/* State Awal Konten Teks: Tersembunyi dan bergeser ke bawah sedikit */
.wl-anim-fade-up {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

/* Class Pemicu (Ditambahkan via JS otomatis saat di-scroll masuk layar) */
.wl-anim-show {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Penyesuaian responsif agar wrapper gambar tidak membatasi animasi */
.wl-v3b-img-wrapper {
  overflow: visible !important;
}
/* animasi welcome text  */

/* animasi rental  */
/* ========================================================
GLOBAL SCROLL ANIMATION SYSTEM (ANTI-BUG & REUSABLE)
======================================================== */

/* Efek 1: Fade Up (Naik perlahan dari bawah) */
.global-animate-up {
  opacity: 0;
  transform: translate3d(0, 35px, 0);
  transition:
    opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

/* Efek 2: Fade Right (Masuk halus dari kiri) */
.global-animate-right {
  opacity: 0;
  transform: translate3d(-35px, 0, 0);
  transition:
    opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

/* Efek 3: Fade Left (Masuk halus dari kanan) */
.global-animate-left {
  opacity: 0;
  transform: translate3d(35px, 0, 0);
  transition:
    opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

/* Class Aktivasi Utama (Dipicu otomatis oleh JavaScript Engine) */
.global-animated-show {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Mengunci ornamen cloud agar aman saat scaling pembungkus */
.background-lepas-kunci {
  position: relative;
}
.ornamen-cloud {
  pointer-events: none;
}
/* animasi rental  */

/* welcome text  */
/* Ornamen Grid Dots Polos Bersih No Bug */
.ornament-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-image: radial-gradient(
    var(--base-color, #cbd5e1) 1.5px,
    transparent 1.5px
  );
  background-size: 15px 15px;
  opacity: 0.05;
  z-index: 1;
  pointer-events: none;
}

/* Badge & Ornamen Garis */
.wl-badge-pill-orange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(234, 88, 12, 0.08);
  color: #ea580c;
  padding: 4px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
}

.wl-stacked-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wl-stacked-lines .line-1 {
  width: 60px;
  height: 3px;
  background: var(--second-color);
  display: block;
  border-radius: 40px;
}

.wl-stacked-lines .line-2 {
  width: 35px;
  height: 2px;
  background: var(--base-color);
  display: block;
  border-radius: 20px;
}
/* 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:100vh !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  */

/*layanan detail */
.tracking-wider { letter-spacing: 2px; }
.text-accent { color: #3189b9; }
.fs-13 { font-size: 13px; }
.z-index-2 { position: relative; z-index: 2; }

/* === CODE ORNAMEN OPSI 3 === */
.ornament-corner-geometry {
    position: absolute;
    right: 2%;
    top: 15%;
    width: 100px;
    height: 100px;
    border-top: 4px solid rgba(49, 137, 185, 0.15);
    border-right: 4px solid rgba(49, 137, 185, 0.15);
    pointer-events: none;
    z-index: 1;
}
/* =========================== */

/* Ornamen Frame Belakang Gambar */
.image-frame-accent {
    padding: 0 15px 15px 0;
}
.image-frame-accent::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 3px solid #3189b9;
    border-radius: 12px;
    z-index: 1;
}
.ly6-img-grid {
    position: relative;
    z-index: 2;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.image-frame-accent:hover .ly6-img-grid {
    transform: translate(10px, 10px);
}

/* Tombol Solid Blok */
.btn-grid-layanan {
    display: inline-flex;
    align-items: center;
    padding: 14px 32px;
    background-color: #1f638a;
    color: #fff !important;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-grid-layanan:hover {
    background-color: #3189b9;
}
/*layanan detail */

/* Slider  */
.slider-overlap {
  margin-top: -75px;
  position: relative;
  z-index: 1;
}
.swiper-slide {
  height: 600px;
  overflow: hidden;
}

/* Image Zoom */
.image-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.image-wrapper img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 12s ease;
  transform: scale(1);
}
.swiper-slide-active .image-wrapper img {
  transform: scale(1.1);
}

/* Overlay & Konten */
/* Overlay Gradasi Putih dari Kiri Atas */
.overlay-gradient-white {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgb(177 171 171) 0%, rgb(0 0 0 / 33%) 50%);
  z-index: 1;
  pointer-events: none;
}

/* Penyesuaian Teks agar terlihat jelas di atas latar putih */
.text-white-shadow {
  color: #1e293b;
  /*text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);*/
}
.text-color-blue {
  color: #2563eb;
} /* Warna kedua untuk sub-judul */

/* Pastikan content box tidak terhalang */

.content-box {
  position: relative;
  z-index: 2;
  height: 100% !important;
  display: flex;
  align-items: center;
}

/* Animasi */
.animate-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease;
}
.swiper-slide-active .animate-item {
  opacity: 1;
  transform: translateY(0);
}
.delay-1 {
  transition-delay: 0.3s;
}
.delay-2 {
  transition-delay: 0.6s;
}

/* Dua Tombol */
.btn-group {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}
/* Styling tombol agar lebih konsisten */
.btn-hero {
  padding: 6px 20px !important;
  border-radius: 5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.4s ease; /* Transisi halus untuk semua efek */
  display: inline-block;
}

/* Efek Tombol Utama (Primary) */
/* Tombol Primary Gradasi */
.btn-primary {
  background: linear-gradient(135deg, var(--base-color), var(--second-color));
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.4s ease;
  display: inline-block;
  text-decoration: none;
}
.btn-primary:hover {
  filter: brightness(1.1); /* Efek lebih terang saat hover */
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(49, 137, 185, 0.4);
  color: #fff !important;
}

/* Tombol Outline Gradasi (Warna Teks & Border) */
.btn-outline {
  border: 2px solid white !important;
  color: white;
  background: transparent;
  padding: 12px 30px;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.4s ease;
  display: inline-block;
  text-decoration: none;
}
.btn-outline:hover {
  background: linear-gradient(135deg, var(--base-color), var(--second-color));
  border-color: var(--base-color) !important;
  color: #fff !important;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(49, 137, 185, 0.2);
}

/* slider hero  */

/* 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-box-opt2 {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}

.galeri-box-opt2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Overlay Gradasi Biru Merah */
.galeri-overlay-opt2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(30, 64, 175, 0.49) 0%,
    rgba(185, 28, 28, 0.49) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.galeri-text-opt2 {
  color: #ffffff;
  transform: scale(0.8);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.galeri-text-opt2 i {
  font-size: 24px;
}

.galeri-text-opt2 h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 5px 0 0 0;
}

/* Hover Effects */
.galeri-box-opt2:hover img {
  transform: scale(1.12) rotate(1deg);
}

.galeri-box-opt2:hover .galeri-overlay-opt2 {
  opacity: 1;
}

.galeri-box-opt2:hover .galeri-text-opt2 {
  transform: scale(1);
}

/* Lightbox Styles */
.lightbox-screen-opt2 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.98);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 20px;
}

.lightbox-screen-opt2 img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 12px;
  object-fit: contain;
}

.close-opt2 {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}
/* 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  */

/* card team building  */
.card-tb-opt1 {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
  transition: 0.3s;
  border: 1px solid #f0f0f0;
}

.card-tb-opt1:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border-color: var(--base-color);
}

.thumb-tb-opt1 {
  height: 230px;
  position: relative;
  overflow: hidden;
}

.thumb-tb-opt1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

.card-tb-opt1:hover .thumb-tb-opt1 img {
  transform: scale(1.1);
}

.price-badge-opt1 {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: #fff;
  color: var(--base-color);
  font-weight: 800;
  padding: 6px 15px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}

.body-tb-opt1 {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.title-wrapper-opt1 {
  border-left: 2px solid var(--base-color);
  padding-left: 15px;
  margin-bottom: 15px;
}

.title-tb-opt1 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 2px;
  line-height: 1.2;
}

.subtitle-tb-opt1 {
  font-size: 12px;
  color: #888;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Accordion Pill Style */
.acc-btn {
  width: 100%;
  border: 1px solid #eee;
  padding: 10px 15px;
  border-radius: 50px;
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
}

.acc-btn:hover {
  background: #e9ecef;
  border-color: #ddd;
}

.acc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.acc-inner {
  padding: 15px 10px;
  line-height: 1.6;
  border-bottom: 1px dashed #eee;
  margin-bottom: 15px;
}

/* Tombol Booking */
.btn-book-tb-opt1 {
  display: block;
  background: #f8f9fa;
  color: var(--base-color);
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid var(--base-color);
  transition: 0.3s;
}

.btn-book-tb-opt1:hover {
  background: var(--base-color);
  color: #fff;
}
/* card team building  */

/* 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  */

/* paket harga  */
.paket-section {
  background-color: #f8fafc;
}

.paket-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efek Angkat Kartu Saat Hover */
.paket-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: #cbd5e1;
}

/* ==================== SISI KIRI: GAMBAR PROYEK ==================== */
.paket-img-container {
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

.paket-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.paket-card:hover .paket-img {
  transform: scale(1.06);
}

/* ==================== SISI KANAN: KONTEN DETAIL ==================== */
.paket-content {
  padding: 28px;
}

.paket-badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--base-color);
}

.paket-price-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: -2px;
}

.paket-price {
  font-size: 26px;
  font-weight: 800;
  color: var(--base-color);
}

/* ==================== SCROLLBAR SPEC LIST & GOLD CHECKMARK ==================== */
.paket-spec-list .spec-scroll-container {
  margin: 18px 0 0 0;
  padding-right: 10px;
  max-height: 140px; /* Tinggi ideal agar pas dan simetris dengan layout gambar */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mengatur style UL */
.paket-spec-list ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Mengatur style LI */
.paket-spec-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  white-space: normal;
}

/* Ikon Centang Emas SVG Pure (No Bug) */
.paket-spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007bff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Styling Teks Bold */
.paket-spec-list li strong {
  color: #1e293b;
  font-weight: 700;
}

/* ==================== AREA CONTAINER SCROLL ==================== */
.paket-spec-list .spec-scroll-container {
  margin: 18px 0 0 0;
  padding-right: 14px; /* Ditambah sedikit agar teks opsi (a,b,c) tidak menempel ke scrollbar */
  max-height: 112px;   
  overflow-y: auto;
  overflow-x: hidden;
  
  /* Fix untuk Firefox: Supaya tidak memunculkan scrollbar bawaan browser yang tebal dan kaku */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* ==================== PREMIUM & MINIMALIST SCROLLBAR UI ==================== */

/* 1. Mengatur Lebar Batang Scrollbar (Dibuat super tipis & sleek) */
.paket-spec-list .spec-scroll-container::-webkit-scrollbar {
  width: 4px; 
}

/* 2. Mengatur Track / Jalur Dudukan Scrollbar */
.paket-spec-list .spec-scroll-container::-webkit-scrollbar-track {
  background: transparent; /* Diubah ke TRANSPARENT total agar garis background abu-abu/hitam yang kaku hilang */
}

/* 3. Mengatur Batang (Thumb) Scrollbar */
.paket-spec-list .spec-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12); /* Menggunakan hitam transparan tipis agar menyatu lembut dengan warna apapun di bawahnya */
  border-radius: 10px;
  transition: background 0.2s ease-in-out;
}

/* 4. Efek Saat Kursor Mendekati / Melakukan Scroll */
.paket-spec-list .spec-scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3); /* Sedikit lebih tegas saat berinteraksi, memberikan UX yang matang */
}

/* ==================== CALL TO ACTION BUTTONS ==================== */
.btn-paket {
  border-radius: 8px;
  font-size: 14px;
  padding: 10px 20px;
  transition: all 0.3s ease;
  border: none;
}

.btn-gold {
  background-color: var(--base-color);
  color: #ffffff !important;
}
.btn-gold:hover {
  background-color: var(--second-color);
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
}

.btn-dark-navy {
  background-color: #0f172a;
  color: #ffffff !important;
}
.btn-dark-navy:hover {
  background-color: #1e293b;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}

/* Responsive Handphone */
@media (max-width: 575.98px) {
  .paket-img-container {
    min-height: 220px;
  }
  .paket-img {
    position: relative;
  }
}

/* ==================== FIX SUB-LIST KERAMIK (NO BUG CENTANG) ==================== */
.paket-spec-list li ol li::before,
.paket-spec-list li ul li::before {
    content: none !important;
}
.paket-spec-list li ol li,
.paket-spec-list li ul li {
    padding-left: 0 !important;
    margin-bottom: 2px;
    list-style-type: inherit;
}

/* paket harga  */

/* portofolio  project*/
/* --- OPSI 4 STYLE --- */
.p-opt4-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
  text-decoration: none !important;
}
.p-opt4-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Blok Teks Informasi */
.p-opt4-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  padding: 16px;
  transform: translateY(35px); /* Menyembunyikan tombol di awal */
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.p-opt4-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.4;
}
.p-opt4-btn {
  font-size: 12px;
  color: var(--base-color);
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
}
/* Hover Interaction */
.p-opt4-card:hover .p-opt4-caption {
  transform: translateY(0); /* Menaikkan panel untuk memunculkan tombol */
}
/* portofolio project  */

/* Card Artikel  */
.blg-opt4-card {
  background: #fff;
  border-radius: 0 0 16px 16px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: 0.4s ease;
  background-color: #ffffff;
}

.blg-opt4-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.blg-opt4-img-wrapper {
  height: 220px;
  overflow: hidden;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
  transition: clip-path 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.blg-opt4-card:hover .blg-opt4-img-wrapper {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.blg-opt4-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

.blg-opt4-card:hover .blg-opt4-img {
  transform: scale(1.1);
}

.blg-opt4-content {
  padding: 25px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blg-opt4-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  font-weight: bold;
  color: #a0a5aa;
  margin-bottom: 10px;
}

.blg-opt4-meta i {
  color: var(--second-color);
}

/* Warna icon merah pink */
.blg-opt4-title {
  font-size: 16px;
  font-weight: 700;
  color: #2b2b2b;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 20px;
}

.blg-opt4-read {
  display: inline-block;
  padding: 8px 0;
  font-size: 13px;
  font-weight: bold;
  color: var(--base-color);
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  width: fit-content;
  transition: 0.3s;
  margin-top: auto;
}

.blg-opt4-card:hover .blg-opt4-read {
  border-bottom-color: var(--base-color);
  letter-spacing: 1px;
}
/* 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  */
.btn-orange-tab {
  transition: all 0.2s ease-in-out;
}
.btn-orange-tab.active {
  background-color: var(--second-color) !important;
  border-color: var(--second-color) !important;
  color: #ffffff !important;
}

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

.wl-tab-scroll-container {
  min-height: 150px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.wl-tab-scroll-container::-webkit-scrollbar {
  width: 4px;
}

.wl-tab-scroll-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}

.wl-tab-scroll-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.wl-tab-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
/* 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) {
    .navbar.navbar-not-home .navbar-nav .nav-link,
    .navbar.navbar-scrolled .navbar-nav .nav-link {
    color:white !important;    
    }
  .wl-btn-gradient-mixed-new3 {
    padding: 5px 11px !important;
    font-size: 13px !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: 110vh !important;
  }
  .swiper-container .swiper img {
    height: 100%;
  }
  .swiper-controls .swiper-navigation .swiper-button.swiper-button-prev {
    display: none;
  }
  .swiper-controls .swiper-navigation .swiper-button.swiper-button-next {
    display: none;
  }
  .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: 100vh !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;
    left:230px;
  }

  .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  */

/* footer  */

/*cta */
/* --- V4 OPSI 1: KINETIC TYPO & BIG LOGO --- */
.v4-cta-opt1 {
    position: relative;
    /*overflow: hidden;*/
    z-index: 1;
    background: #1a1a1a;
    color: #ffffff;
}

/* Potongan gradasi miring di latar belakang teks */
.v4-cta-opt1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 70%, rgba(15, 23, 42, 0) 100%);
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    z-index: 2;
    pointer-events: none;
}

.v4-overlay-opt1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 26, 0.6);
    z-index: 1;
}

.v4-pad-opt1 {
    padding: 90px 20px;
    position: relative;
    z-index: 3;
}

.v4-content-box-opt1 {
    max-width: 750px;
}

.v4-title-opt1 {
    font-size: 26px;
    font-weight: 500;
    /*text-transform: uppercase;*/
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff;
}

.v4-desc-opt1 {
    font-size: 16px;
    color: #e5e5e5;
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Flexbox Group untuk Tombol */
.v4-btn-group-opt1 {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.v4-btn-opt1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Tombol WA (Solid Putih/Terang) */
.btn-wa-opt1 {
    background: #ffffff;
    color: #1a1a1a !important;
}
.btn-wa-opt1:hover {
    background: #3189b9;
    color: #ffffff !important;
}

/* Tombol Telepon (Outline Border) */
.btn-telp-opt1 {
    background: transparent;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}
.btn-telp-opt1:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* Deteksi Layar HP */
@media (max-width: 576px) {
    .v4-cta-opt1::before {
        width: 100%;
        clip-path: none;
        background: rgba(15, 23, 42, 0.85);
    }
    .v4-btn-group-opt1 {
        flex-direction: column;
    }
    .v4-btn-opt1 {
        width: 100%;
    }
    .v4-title-opt1 {
        font-size: 28px;
    }
}

/* Footer Layout: Big Logo Row Block */
.v4-op1-footer {
  background: #111111;
  border-top: 1px solid #262626;
  padding: 60px 20px 30px 20px;
}

.v4-op1-logo-row {
  border-bottom: 1px solid #262626;
  padding-bottom: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.v4-op1-logo-img {
  max-width: 220px;
  height: auto;
  filter: brightness(0) invert(1);
}

.v4-op1-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

@media (max-width: 768px) {
  .v4-op1-footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .v4-op1-title {
    font-size: 28px;
    /* Responsif untuk mobile agar tidak overflow */
  }
}

.v4-op1-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 768px) {
  .v4-op1-nav-links {
    justify-content: center;
  }
}

.v4-op1-nav-links a {
  color: #a3a3a3;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.v4-op1-nav-links a:hover {
  color: #ffffff;
}

.v4-op1-address {
  font-size: 13px;
  color: #737373;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.v4-op1-socmed-gap {
  display: flex;
  gap: 15px;
}

@media (max-width: 768px) {
  .v4-op1-socmed-gap {
    justify-content: center;
  }
}

.v4-op1-socmed-link {
  color: #a3a3a3;
  text-decoration: none;
  font-size: 14px;
}

.v4-op1-socmed-link:hover {
  color: #ffffff;
}

.v4-op1-copy {
  text-align: center;
  font-size: 12px;
  color: #404040;
  border-top: 1px solid #262626;
  margin-top: 40px;
  padding-top: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Styling tambahan untuk memastikan tombol sosmed minimalis berfungsi dengan baik */
.social-minimalist .social-btn-min {
  color: #a3a3a3;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.social-minimalist .social-btn-min:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

.fs-20 {
  font-size: 20px;
}
.v6-sm-opt3-wrap {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

.v6-sm-opt3-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #8a8a8a;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

.v6-sm-opt3-btn:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  border-radius: 8px;
}
/*footer*/

/* footer baru  */
.footer-borderlines {
  background: radial-gradient(
    circle at 0% 0%,
    rgba(85, 254, 0, 0.12) 0%,
    rgba(88, 184, 0, 0.03) 45%,
    #090d14 100%
  );
  background-color: #090d14;
  color: #94a3b8;
  border-top: 1px solid rgba(85, 254, 0, 0.2);
}

.cta-borderlines-box {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 35px 0;
}

.btn-borderlines-wa {
  background-color: #25d366;
  color: #ffffff;
  padding: 12px 30px;
  border-radius: 50px;
  /* Model Kapsul Bulat */
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.btn-borderlines-wa:hover {
  background-color: #1ebd54;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

.title-borderlines {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.social-group-premium {
  display: flex;
  gap: 12px;
}
.social-premium-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Efek Hover */
.social-premium-item:hover {
  background-color: #e0ffc5;
  border-color: #47c55b;
  color: white !important;
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(197, 151, 71, 0.3);
}

.cta-wrapper-pill {
  display: inline-flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 6px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-pill-action {
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.btn-pill-action.phone {
  color: rgba(255, 255, 255, 0.7) !important;
}

.btn-pill-action.phone:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08);
}

.btn-pill-action.wa {
  background-color: #25d366;
  color: #ffffff !important;
}

.btn-pill-action.wa:hover {
  background-color: #1ebd54;
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.4);
}
/* 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: var(--base-color);
  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 rafting serayu  */
.section-rafting {
  background-color: #f9fbfd;
  padding: 80px 0;
}

/* Base Card Design & Theme Variables */
.card-rafting-general {
  --theme-main: #e67e22; /* Default Orange/Menantang */
  --theme-dark: #d35400;

  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #eaeaea;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* Jika Card adalah Unggulan, ubah tema menjadi Merah/Ekstrem */
.card-rafting-general.theme-unggulan {
  --theme-main: #b31212; /* Merah Ekstrem */
  --theme-dark: #8b0000;
}

.card-rafting-general:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
  border-color: #d1d5db;
}

/* Gambar & Overlay */
.img-wrap-general {
  position: relative;
  height: 220px; /* Tinggi gambar disesuaikan */
  overflow: hidden;
}

.img-wrap-general img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card-rafting-general:hover .img-wrap-general img {
  transform: scale(1.05);
}

/* Gradien hitam di bawah gambar untuk teks */
.img-wrap-general::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
  z-index: 1;
}

/* Teks KM di dalam gambar */
.img-text-overlay {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 2;
  color: white;
}

.img-text-overlay .title-general {
  font-size: 28px;
  font-weight: 900;
  margin: 0;
  letter-spacing: 1px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.img-text-overlay .subtitle-general {
  font-size: 14px;
  color: #ffeb3b; /* Kuning emas */
  font-weight: 600;
  margin-top: 2px;
}

/* Badge Rekomendasi/Unggulan (Tengah Atas) */
.badge-popular {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--theme-main);
  color: #ffffff;
  padding: 6px 25px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 10;
  text-transform: uppercase;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Body Konten */
.body-general {
  padding: 20px 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* Bintang & Rating Section */
.rating-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

.rating-section .stars i {
  color: #f39c12;
  font-size: 14px;
  margin: 0 2px;
}

.rating-section .tingkat-text {
  text-align: left;
  line-height: 1.1;
}

.rating-section .tingkat-text span {
  font-size: 9px;
  color: #7f8c8d;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.rating-section .tingkat-text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--theme-main); /* Mengikuti tema merah/oranye */
}

/* Block Harga */
.price-block-wrapper {
  margin-bottom: 20px;
}

.price-general {
  background: var(--theme-main);
  color: #ffffff;
  display: inline-block;
  padding: 8px 30px;
  border-radius: 30px;
  font-size: 1.35rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Box Start & Finish (Sejajar Kiri Kanan) */
.info-box-general {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f1f2f6;
  border-bottom: 1px dashed #dfe4ea;
  padding: 15px 0;
  margin-bottom: 15px;
}

.info-col {
  width: 50%;
  text-align: center;
  padding: 0 5px;
}

.info-col:first-child {
  border-right: 1px solid #f1f2f6;
}

.info-col .label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  color: #57606f;
  margin-bottom: 5px;
}

.info-col .label i {
  color: #2d3436;
  font-size: 12px;
}

.info-col strong {
  font-size: 13px;
  color: #2d3436;
  display: block;
  line-height: 1.3;
}

/* Tombol Booking dengan warna sesuai tema */
.btn-booking-general {
  display: block;
  background: var(--theme-main);
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
  margin-top: 20px;
}

.btn-booking-general:hover {
  background: var(--theme-dark);
  color: #fff;
}

/* Accordion Design Tetap Dipertahankan */
.general-acc-btn {
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #2d3436;
  transition: 0.3s;
}
.general-acc-btn:hover {
  color: var(--theme-main);
}
.general-acc-icon {
  color: #a4b0be;
  font-size: 12px;
  transition: transform 0.3s ease;
}
.general-acc-btn.active .general-acc-icon {
  transform: rotate(180deg);
  color: var(--theme-main);
}
.general-acc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}
.general-acc-inner {
  padding: 10px 0;
  font-size: 13px;
  color: #57606f;
  line-height: 1.6;
  text-align: left;
}

/* Swiper Pagination & Button Customization */
.paketSwiper {
  padding: 15px 15px 50px 15px !important;
}
.swiper-slide {
  height: auto;
}
.swiper-button-next,
.swiper-button-prev {
  background: #fff;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  color: var(--base-color) !important;
}
/* .swiper-button-next { right: -5px !important; } */
/* .swiper-button-prev { left: -5px !important; } */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 14px !important;
  font-weight: bold;
}
@media (max-width: 767px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}
/* card paket rafting serayu  */

/*    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: 100% !important;
  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;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  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) {
    .paket-spec-list .spec-scroll-container{
        max-height:190px;
    }
  .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-v1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Gradasi Biru Premium Kontraktor */
    background: linear-gradient(135deg, #1f638a 0%, #3189b9 50%, #1f638a 100%);
    background-size: 200% auto;
    color: #ffffff !important;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 50px;
    /*border: 2px solid #ffffff;*/
    box-shadow: 0 4px 10px rgba(31, 99, 138, 0.2);
    margin: 6px;
    cursor: pointer;
    transition: all 0.4s ease;
    width: 170px;
    height: 40px;
    box-sizing: border-box;
}

.btn-contact-wa-v1 span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.btn-contact-wa-v1 i {
    font-size: 16px;
    transition: all 0.3s ease;
}

/* --- EFEK KETIKA HOVER --- */
.btn-contact-wa-v1:hover {
    /* Menggeser posisi gradasi */
    background-position: right center; 
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(49, 137, 185, 0.4);
}

.btn-contact-wa-v1:hover i {
    animation: wiggle-v1 0.5s ease-in-out infinite;
}

.btn-contact-wa-v1:active {
    transform: scale(0.95);
}

@keyframes wiggle-v1 {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}
/* 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*/
.kg-capsule-container {
  background: #ffffff;
  border-radius: 100px;
  padding: 20px 40px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.kg-capsule-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 20px;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  color: inherit;
  position: relative;
}

/* Membuat garis pembatas vertikal antar item di desktop */
@media (min-width: 992px) {
  .kg-capsule-col:not(:last-child) .kg-capsule-item::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 15%;
    height: 70%;
    width: 1px;
    background: #f1f5f9;
  }
}

.kg-capsule-img-wrapper {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.kg-capsule-img-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.kg-capsule-text h3 {
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2px 0;
}

.kg-capsule-text .kg-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}

/* Efek Hover ketika disorot */
.kg-capsule-item:hover {
  transform: translateY(-5px);
}

.kg-capsule-item:hover .kg-capsule-img-wrapper {
  transform: scale(1.12);
}

/* Responsif untuk Mobile agar tidak rusak */
@media (max-width: 991px) {
  .kg-capsule-container {
    border-radius: 24px;
    padding: 20px;
  }

  .kg-capsule-item {
    padding: 15px 10px;
    border-bottom: 1px solid #f1f5f9;
  }

  .kg-capsule-col:last-child .kg-capsule-item {
    border-bottom: none;
  }
}

/*Keunggulan*/

/* 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 */

/* galeri baru  */
/* CSS untuk 5 kolom di desktop */
@media (min-width: 992px) {
  .col-custom-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
/* CSS untuk 2 kolom di mobile */
@media (max-width: 575px) {
  .col-custom-5 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.col-custom-5 {
  padding: 5px;
} /* Jarak antar gambar */

.galeri-container {
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}
.galeri-img {
  transition: 0.5s ease;
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(31, 83, 47, 0.5);
  opacity: 0;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.galeri-container:hover .overlay {
  opacity: 1;
}
.galeri-container:hover .galeri-img {
  transform: scale(1.05);
}
/* galeri baru  */

/* 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 */
/* ==================== CORE GRID & LEFT IMAGE WITH ORNAMENTS ==================== */
.ly-kg-opt1 .img-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  align-items: start;
  position: relative;
  padding: 15px; /* Memberi ruang agar ornamen tidak terpotong */
}

/* Ornamen 1: Pola Titik Geometris */
.ly-kg-opt1 .img-ornament-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-image: radial-gradient(#3189b9 20%, transparent 20%);
  background-size: 10px 10px;
  opacity: 0.3;
  z-index: 0;
}

/* Ornamen 2: Bentuk Cairan Abstrak */
.ly-kg-opt1 .img-ornament-shape {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 180px;
  height: 180px;
  background: linear-gradient(
    135deg,
    rgba(49, 137, 185, 0.12) 0%,
    rgba(49, 137, 185, 0.02) 100%
  );
  border-radius: 40% 60% 60% 40% / 30% 30% 70% 70%;
  z-index: 0;
}

.ly-kg-opt1 .img-box-1 {
  transform: translateY(0);
  z-index: 1;
}
.ly-kg-opt1 .img-box-2 {
  transform: translateY(30px);
  z-index: 1;
}

.ly-kg-opt1 .main-img-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  height: 320px;
}
.ly-kg-opt1 .main-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================== POSITIONING NAV BUTTONS LEFT & RIGHT ==================== */
.ly-kg-opt1 .slider-container-wrapper {
  position: relative;
  padding: 0 0px; /* Memberi ruang di kanan-kiri agar tombol tidak menutupi kartu */
}

.ly-kg-opt1 .btn-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #334155;
  z-index: 10;
  border: 1px solid #e2e8f0;
}

.ly-kg-opt1 .nav-prev-1 {
  left: -17px;
}
.ly-kg-opt1 .nav-next-1 {
  right: -17px;
}

.ly-kg-opt1 .btn-nav:hover {
  background: #3189b9;
  color: #ffffff;
  border-color: #3189b9;
  box-shadow: 0 6px 20px rgba(49, 137, 185, 0.25);
}

/* ==================== EQUAL HEIGHT & NEW HOVER ANIMATION ==================== */
.ly-kg-opt1 .swiper-slide {
  height: 100% !important; /* Memaksa swiper agar tinggi slide seragam */
  display: flex;
}

.ly-kg-opt1 .kg-card-slide {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  height: 100%; /* Memaksa kartu mengisi penuh tinggi slide */
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efek Bingkai Garis Tepi Siku saat Hover (Konsep Cetak Biru/Konstruksi) */
.ly-kg-opt1 .kg-card-slide::before,
.ly-kg-opt1 .kg-card-slide::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid #3189b9;
  transition: all 0.4s ease;
  opacity: 0;
}
/* Siku Kiri Atas */
.ly-kg-opt1 .kg-card-slide::before {
  top: 0;
  left: 0;
  border-top-width: 3px;
  border-left-width: 3px;
  border-radius: 16px 0 0 0;
}
/* Siku Kanan Bawah */
.ly-kg-opt1 .kg-card-slide::after {
  bottom: 0;
  right: 0;
  border-bottom-width: 3px;
  border-right-width: 3px;
  border-radius: 0 0 16px 0;
}

/* Desain Kotak Gambar (Dibuat Kecil Presisi) */
.ly-kg-opt1 .slide-img-box {
  width: 55px;
  height: 55px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  transition: all 0.4s ease;
  padding:4px;
}

.ly-kg-opt1 .slide-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ly-kg-opt1 .kg-card-slide h3 {
  transition: color 0.3s ease;
}

/* TRIGGER ANIMASI HOVER KARTU */
.ly-kg-opt1 .kg-card-slide:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
  border-color: transparent;
}

.ly-kg-opt1 .kg-card-slide:hover::before,
.ly-kg-opt1 .kg-card-slide:hover::after {
  width: 25px;
  height: 25px;
  opacity: 1;
}

.ly-kg-opt1 .kg-card-slide:hover .slide-img-box {
  border-color: #3189b9;
  box-shadow: 0 6px 15px rgba(49, 137, 185, 0.2);
}

.ly-kg-opt1 .kg-card-slide:hover .slide-img-box img {
  transform: scale(1.15) rotate(3deg); /* Gambar kecil nge-zoom & miring sedikit */
}

.ly-kg-opt1 .kg-card-slide:hover h3 {
  color: #3189b9 !important;
}
/* 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  */
/* Opsi 1 CSS */
    .btn-ly6-primary {
        background: #3189b9;
        color: #fff;
        border: 1px solid #3189b9;
        transition: all 0.3s ease;
    }

    .btn-ly6-primary:hover {
        background: #1f638a;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(49, 137, 185, 0.3);
    }

    .btn-ly6-outline {
        background: transparent;
        color: #3189b9;
        border: 1px solid #3189b9;
        transition: all 0.3s ease;
    }

    .btn-ly6-outline:hover {
        background: rgba(49, 137, 185, 0.05);
        color: #1f638a;
        border-color: #1f638a;
        transform: translateY(-2px);
    }
.ly6-badge-glass {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(49, 137, 185, 0.3);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #1f638a;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* CSS Judul Opsi 6 */
.ly6-title {
  font-size: 25px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
}

.ly6-italic-text {
  color: #3189b9;
  font-weight: 400;
}

/* Ornamen Gambar Opsi 6 */
.ly6-shadow-layer {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  padding: 10px;
}

.ly6-shadow-layer::after {
  content: "";
  position: absolute;
  top: 15px;
  left: -15px;
  width: 100%;
  height: 100%;
  background: rgba(31, 99, 138, 0.1);
  border-radius: 16px;
  z-index: -2;
}

.ly6-img {
  border-radius: 12px;
}
/* welcome text  */

/* section  */
/* --- CSS Opsi 2 (Prefix: tl-v2-) --- */
.tl-v2-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px;
}
.tl-v2-bar {
  width: 25px;
  height: 2px;
  background-color: #cbd5e1;
}
.tl-v2-badge-text {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* section  */

/* 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-tugu {
  content: "";
  position: absolute;
  width: 19%;
  height: 50%;
  left: -90px;
  opacity: 0.04;
  z-index: -1;
  bottom: 0px;
}

/* 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  */

.ornamen-cloud-wisata {
  position: absolute;
  /* width: 100%; */
  height: 100px;
  bottom: -30px;
  left: 0;
  z-index: -1;
  opacity: 1;
}

/* 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 1  */
.th-header-opt7 {
  background-size: cover;
  background-position: center;
  position: relative;
}
.th-header-opt7::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
@media (min-width: 992px) {
  .border-lg-start {
    border-left: 1px solid !important;
  }
}
/* page header 1  */

/* page header  */
/* --- CSS Kustom Opsi 5 (Prefix: page-header-v5-) --- */
.page-header-v5-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding: 90px 0;
}

/* Masking overlay gradasi gelap pekat dari kiri ke kanan */
.page-header-v5-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgb(0 7 25 / 95%) 0%,
    rgb(6 22 63 / 70%) 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
  z-index: 1;
}

.page-header-v5-bg .container {
  position: relative;
  z-index: 2;
}

/* Kotak Berbingkai Garis Kiri */
.page-header-v5-box {
  border-left: 4px solid #908d83;
  padding-left: 24px;
}
/* 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;
  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  */

/*btn floating */
/* Styling Utama Tombol WhatsApp Bulat */
.button-wa-pulse {
    position: fixed;
    bottom: 30px; 
    left: 30px;  
    width: 65px;
    height: 65px;
    background-color: #25d366; 
    color: #ffffff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: transform 0.3s ease, background-color 0.3s ease;
    
    /* Menjalankan animasi lingkaran memancar */
    animation: waPulseShadow 2s infinite; 
}

/* TARGET IKON: Animasi Berputar Kiri-Kanan */
.button-wa-pulse i {
    font-size: 32px; 
    display: inline-block; /* PENTING: Tanpa ini, icon jenis inline tidak akan bisa berputar/rotate */
    transform-origin: center; /* Titik poros putaran tepat di tengah-tengah ikon */
    
    /* Menjalankan animasi bergoyang kiri-kanan secara terus menerus */
    animation: waIconWiggle 2s infinite ease-in-out; 
}

/* Efek Hover saat Kursor di Atas Tombol */
.button-wa-pulse:hover {
    transform: scale(1.08);
    background-color: #1cbd55;
}

/* === ANIMASI 1: Denyut Bayangan (Pulse) === */
@keyframes waPulseShadow {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); 
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* === ANIMASI 2: Putar Kiri Kanan (Wiggle dengan Jeda Diam) === */
@keyframes waIconWiggle {
    0%, 100% { transform: rotate(0deg); }
    8% { transform: rotate(-15deg); }  /* Putar kiri */
    16% { transform: rotate(12deg); }   /* Balas putar kanan */
    24% { transform: rotate(-12deg); }  /* Balas putar kiri lagi */
    32% { transform: rotate(10deg); }   /* Balas putar kanan lagi */
    40% { transform: rotate(0deg); }    /* Kembali normal dan diam dari menit ke-40% s.d 100% */
}

/* Responsif Layar HP */
@media (max-width: 576px) {
    .button-wa-pulse {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }
    .button-wa-pulse i {
        font-size: 28px;
    }
}
/*btn floatin */

/* 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  */

/* highlight Destinasi  */
/* CSS MARQUEE & CARD SYSTEM OPTION 2 */
.wl-marquee-wrapper {
  position: relative;
  width: 100%;
}

/* Ornamen Masking Gradasi + Efek Blur Ringan di Sisi Kiri & Kanan */
.wl-marquee-fade-left,
.wl-marquee-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(1px);
}

.wl-marquee-fade-left {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.wl-marquee-fade-right {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.wl-marquee-track {
  overflow: hidden;
  display: flex;
  user-select: none;
  width: 100%;
}

.wl-marquee-content {
  display: flex;
  flex-shrink: 0;
  gap: 24px;
  padding: 15px 0;
}

.track-to-left .wl-marquee-content {
  animation: scrollLeft 135s linear infinite;
}

.track-to-right .wl-marquee-content {
  animation: scrollRight 105s linear infinite;
}

.wl-marquee-track:hover .wl-marquee-content {
  animation-play-state: paused !important;
}

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

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

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

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

/* Card Styling Modern + Animasi Hover */
.wl-marquee-card-opt2 {
  display: flex;
  flex-direction: column;
  width: 250px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 10px;
  text-decoration: none;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

/* Animasi Saat Card Dihover */
.wl-marquee-card-opt2:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: #3b82f6;
  box-shadow: 0 20px 30px -10px rgba(59, 130, 246, 0.2);
}

.wl-img-container {
  width: 100%;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.wl-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Layer Overlay Gradasi Merah & Biru */
.wl-img-overlay-rb {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.4) 0%,
    rgba(59, 130, 246, 0.4) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* Efek Muncul Saat Card Di-Hover */
.wl-marquee-card-opt2:hover .wl-img-overlay-rb {
  opacity: 1;
  /* Overlay gradasi muncul */
}

.wl-marquee-card-opt2:hover .wl-img-container img {
  transform: scale(1.1) rotate(1deg);
  /* Gambar sedikit membesar & miring */
}

.wl-info-box {
  padding: 12px 4px 4px 4px;
  position: relative;
  z-index: 2;
}

.fs-11 {
  font-size: 11px;
}

.bg-warning-subtle {
  background-color: #fffbeb !important;
}

.border-warning-subtle {
  border-color: #fde68a !important;
}
/* highlight  */

/* rental lepas kunci  */
/* ==========================================================================
Opsi 2: Block Glassmorphism Accent (Unique Prefix: rk3-)
========================================================================== */
.rk3-card {
  transition:
    transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
    box-shadow 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rk3-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-5px);
}

.rk3-card .rk3-img-box {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  /* overflow: hidden; */
  background-color: #fdfdfd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rk3-card .rk3-img-box img {
  transition: transform 0.5s ease;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden;
  will-change: transform;
}

.rk3-card:hover .rk3-img-box img {
  /* transform: scale(1.03); */
}

.rk3-price-box {
  background-color: #e3e4e68b;
  padding: 10px 14px;
  border-radius: 8px;
  width: 100%;
}

.rk3-btn-action {
  color: #0d235c;
  transition: opacity 0.2s ease;
}

.rk3-card:hover .rk3-btn-action {
  opacity: 0.8;
}

.rk3-card:hover .badge-seat {
  background: #32485e !important;
  color: white !important;
}

/* --- Opsi 3: Elegant Capsule --- */
.rk-btn-capsule {
  color: #0d235c;
  border: 2px solid #0d235c;
  padding: 10px 24px;
  border-radius: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: transparent;
  transition: all 0.3s ease;
}

.rk-btn-capsule .rk-arrow {
  transition: transform 0.3s ease;
}

/* Trigger saat di-hover */
.rk-card-elegant:hover .rk-btn-capsule,
.rk-btn-capsule:hover {
  background-color: #0d235c;
  color: #ffffff !important;
}

.rk-card-elegant:hover .rk-btn-capsule .rk-arrow,
.rk-btn-capsule:hover .rk-arrow {
  transform: translateX(4px);
}
.rk-btn-capsule i {
  color: #0d235c;
}
.rk-btn-capsule:hover i {
  color: white;
}
/* rental lepas kunci  */

/* 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);
}

/*portofolio detail */
/* --- OPSI 5 CSS (FIXED & ENHANCED) --- */
.op5-glow-card { 
    border-radius: 16px; 
    overflow: hidden; 
    background: #fff; 
    border: 1px solid rgba(0,0,0,0.06); 
}

/* Galeri Card & Smooth Zoom Image */
.op5-gallery-card { 
    position: relative; 
    overflow: hidden; 
    border-radius: 12px; 
}
.op5-gallery-card img {
    transition: transform 0.4s ease;
}

/* Hover Overlay Mask */
.op5-gradient-mask { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%); 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    display: flex; 
    align-items: flex-end; 
    padding: 15px; 
    z-index: 2;
}

.op5-text-lift { 
    color: #fff; 
    font-size: 13px; 
    transform: translateY(10px); 
    transition: transform 0.3s ease; 
    font-weight: bold;
}

/* Trigger Hover Galeri */
.op5-gallery-card:hover img {
    transform: scale(1.06);
}
.op5-gallery-card:hover .op5-gradient-mask { 
    opacity: 1; 
}
.op5-gallery-card:hover .op5-text-lift { 
    transform: translateY(0); 
}

/* Sidebar List Item Hover */
.group-item-op5 {
    transition: all 0.2s ease;
}
.group-item-op5:hover span {
    color: #1f638a !important;
}

/* Kunci Judul Sidebar Maksimal 2 Baris */
.op5-title-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.4;
}
/*portofolio detail */

/* Responsif Mobile */
@media (max-width: 576px) {
  .py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .btn-pill-custom {
    width: 100%;
    padding: 10px 20px;
  }
  
  .ly-kg-opt1 .nav-prev-1 {
    left: -15px;
    }
    .ly-kg-opt1 .nav-next-1 {
      right: -15px;
    }
}
/* btn cta */

/* CTA section baru  */
.cta-split-opt {
  background: #000;
  border-radius: 0;
}
.cta-image-side {
  min-height: 400px;
  background-size: cover;
  background-position: center;
}
.cta-text-side {
  padding: 80px 50px;
  background: #f8f9fa;
}
.btn-karcher {
  background: #000;
  color: var(--second-color);
  padding: 14px 35px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  transition: 0.3s;
  text-decoration: none;
  display: inline-block;
}
.btn-karcher:hover {
  background: #333;
  color: var(--second-color);
}
/* CTA Section baru  */

/* card artikel  */
.blg-card-v2 {
  border-color: #f1f5f9 !important;
  transition: all 0.3s ease;
}

.blg-img-frame {
  height: 170px;
}

.blg-img-frame img {
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Lapisan Overlay Gradasi di Atas Gambar (Default Agak Transparan) */
.blg-img-frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.2) 0%,
    rgba(239, 68, 68, 0.2) 100%
  );
  z-index: 1;
  transition: opacity 0.4s ease;
}

.blg-meta-block-wrapper {
  margin-top: -15px;
  position: relative;
  z-index: 3;
}

/* Background Badge Overlap Solid Gradasi (Bebas Blur, Teks Sangat Jelas) */
.bg-gradasi-biru-merah {
  background: linear-gradient(90deg, #3b82f6 0%, #ef4444 100%) !important;
  border: none !important;
}

.bg-gradasi-biru-merah span,
.bg-gradasi-biru-merah i {
  display: inline-block;
}

/* Potong Judul Maksimal 2 Baris Konstan */
.text-truncate-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  height: 39px;
}

.blg-action-v2 {
  transition: all 0.3s ease;
  border-color: #334155 !important;
}

/* Hover Effects */
.blg-layout-opt2:hover .blg-card-v2 {
  border-color: #3b82f6 !important;
  box-shadow: 0 12px 25px rgba(59, 130, 246, 0.1) !important;
  transform: translateY(-4px);
}

/* Efek Zoom Gambar saat Hover */
.blg-layout-opt2:hover .blg-img-frame img {
  transform: scale(1.06);
}

/* Overlay Gradasi Gambar Menjadi Lebih Pekat Saat Hover */
.blg-layout-opt2:hover .blg-img-frame::after {
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.35) 0%,
    rgba(239, 68, 68, 0.35) 100%
  );
}

.blg-layout-opt2:hover .blg-action-v2 {
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}

.btn-artikel-premium-3 {
  display: inline-block;
  padding: 11px 26px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff !important;
  background: linear-gradient(90deg, #3b82f6 0%, #ef4444 100%);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
}

.btn-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-content-wrapper i {
  font-size: 11px;
  line-height: 0;
  transition: transform 0.3s ease;
}

/* Hover Effect */
.btn-artikel-premium-3:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
}
.btn-premium-3:hover i {
  transform: translateX(3px);
}
/* 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  */

.gslide-image img {
  max-height: 80vh;
}

/* 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  */

/* card keunggulan  */
.grid-corporate-container {
}

.item-corporate-advantage {
  position: relative;
  padding: 30px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

@media (min-width: 992px) {
  .item-corporate-advantage:not(:nth-child(3n)) {
    border-right: 1px solid #f0f0f0;
  }
  .item-corporate-advantage:nth-last-child(-n + 3) {
    border-bottom: none;
  }
}

.item-corporate-advantage:hover {
  background-color: #fafdf8;
}

/* Bingkai Kotak Presisi dengan Padding */
.icon-corporate-wrap {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: transparent;
  border: 1px solid #e2e8f0; /* Garis tipis luar */
  overflow: hidden; /* Agar background setengah hijau tidak keluar dari bingkai */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* BARU: Ornamen Background Hijau Tipis Setengah di Bagian Bawah */
.icon-corporate-wrap::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Mengatur tinggi hanya setengah container */
  background-color: rgba(88, 184, 0, 0.05); /* Warna hijau tipis/soft */
  z-index: -1;
  transition: all 0.3s ease;
}

/* Efek Hover: Kotak luar menyusut pas membungkus ikon & berubah warna tegas */
.item-corporate-advantage:hover .icon-corporate-wrap {
  border-color: #58b800;
  background-color: #ffffff;
  border-radius: 8px; /* Mengubah sudut tajam menjadi melengkung saat aktif */
  box-shadow: 0 4px 12px rgba(88, 184, 0, 0.1);
}

/* Saat di-hover, background setengah hijau berubah sedikit lebih tegas */
.item-corporate-advantage:hover .icon-corporate-wrap::before {
  background-color: rgba(85, 254, 0, 0.1);
  height: 55%; /* Sedikit naik memberikan efek transisi dinamis */
}

/* MODIFIKASI: Mengubah Gambar Ikon Menjadi Gradasi Menggunakan Masking */
.icon-corporate-wrap picture,
.icon-corporate-wrap img {
  width: 50px;
  height: 50px;
  display: block;
}

.icon-corporate-wrap img {
  object-fit: contain;
  transition:
    transform 0.3s ease,
    background 0.3s ease;

  /* Menggunakan gambar source sebagai topeng mask */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  /* Menerapkan suntikan gradasi warna target */
  background: linear-gradient(135deg, #58b800 0%, #55fe00 100%);
}

/* Menerapkan sistem mask dinamis lewat selector atribut src */
.icon-corporate-wrap img[src^="images/keunggulan/"] {
  /* Mencocokkan mask secara otomatis ke file gambar aslinya */
  -webkit-mask-image: inherit;
  mask-image: inherit;
}

/* Animasi Gambar: Efek rotasi presisi ringan / scale */
.item-corporate-advantage:hover .icon-corporate-wrap img {
  transform: scale(1.1);
  /* Variasi gradasi memutar sedikit saat di-hover agar lebih hidup */
  background: linear-gradient(135deg, #55fe00 0%, #58b800 100%);
}

.corporate-content {
  position: relative;
  z-index: 1;
}
/* card keunggulan  */

/* card full height */
.card-layanan {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* gambar fix ratio */
.card-layanan-img {
  width: 100%;
  /* aspect-ratio: 4/3; biar semua sama */
  overflow: hidden;
}

.card-layanan-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* body fleksibel */
.card-layanan-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

/* tombol selalu di bawah */
.card-layanan-body .d-flex {
  margin-top: auto;
}

/* batasi deskripsi biar rata */
.card-layanan-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* maksimal 3 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-opt3 {
  padding: 80px 0;
  background: #0f172a;
  color: #fff;
  overflow: hidden;
}

.hero-opt3 .hero-img {
  border-radius: 20px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.btn-hero-wa {
  background: #3b82f6;
  color: #fff;
  border-radius: 50px;
  padding: 12px 30px;
  font-weight: bold;
  transition: 0.3s;
  display: inline-block;
}

.btn-hero-wa:hover {
  background: var(--base-color);
  color: #fff;
  transform: translateY(-3px);
}

.content-floating {
  background: #fff;
  border-radius: 20px;
  padding: 50px;
  margin-top: -60px;
  position: relative;
  z-index: 5;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  line-height: 1.8;
  color: #475569;
}

/* 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  */
/* Sistem Grid Presisi Kelipatan 5 */
.grid-produk-5 .col-produk {
  flex: 0 0 20% !important;
  max-width: 20% !important;
  width: 20% !important;
}

/* Responsif Pintar untuk Gadget/Layar Kecil */
@media (max-width: 1199.98px) {
  .grid-produk-5 .col-produk {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
}
@media (max-width: 991.98px) {
  .grid-produk-5 .col-produk {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
  }
}
@media (max-width: 767.98px) {
  .grid-produk-5 .col-produk {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* Base Setup Card Thiamplast */
.card-thiam {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #ededed;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.01);
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.3s ease;
}

/* Hover State untuk Struktur Luar Card */
.card-thiam:hover {
  border-color: #198754;
  box-shadow: 0 12px 30px rgba(25, 135, 84, 0.08);
  transform: translateY(-6px);
}

/* Bingkai Gambar Kotak Sempurna */
.img-wrap-thiam {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
  background-color: #fafafa;
}

/* Set Transisi Gambar Internal Secara Terpisah */
.img-wrap-thiam img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cocok untuk katalog brosur agar penuh & rapi */
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Kunci Perbaikan Bug Hover Gambar: Zoom in halus di dalam frame tanpa meluber keluar */
.card-thiam:hover .img-wrap-thiam img {
  transform: scale(1.08);
}

/* Custom Button Styles */
.btn-thiam-outline {
  border: 1px solid #e2e8f0;
  color: #4a5568;
  background: #ffffff;
  transition: all 0.2s ease;
}
.btn-thiam-outline:hover {
  background: #f7fafc;
  border-color: #cbd5e0;
  color: #1a202c;
}
.btn-thiam-success {
  background-color: #198754;
  border: 1px solid #198754;
  color: #ffffff;
  transition: all 0.2s ease;
}
.btn-thiam-success:hover {
  background-color: #157347;
  border-color: #146c43;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(25, 135, 84, 0.2);
}
/* 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;
  }
}

/* UTIL */
.text-base-color {
  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  */
.wl-rental-card-new3 {
  position: relative;
  z-index: 1;
  padding: 10px;
  /* Mengatur transisi untuk transformasi card saat di-hover */
  transition:
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s ease;
  background-color: #ffffff; /* Warna dasar kartu */
}

/* Membuat lapisan gambar background agar tidak merusak kecerahan konten teks/gambar mobil */
.wl-rental-card-new3::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../Aset Desain/pakai/bg/2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 🔥 DEFAULT: Opacity background gambar diset 0.2 */
  opacity: 0.2;
  z-index: -1;
  /* Efek transisi halus saat background berubah warna ketika di-hover */
  transition:
    background 0.3s ease,
    opacity 0.3s ease;
}

/* Efek Hover pada Card */
.wl-rental-card-new3:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.15); /* Bayangan biru tipis yang elegan */
}

/* 🔥 HOVER: Mengubah lapisan background menjadi warna biru tipis/solid yang menyatu rapi */
.wl-rental-card-new3:hover::before {
  /* 🔥 GABUNG JADI 1: Overlay gradasi biru mewah di atas gambar 2.webp */
  background:
    linear-gradient(rgba(37, 99, 235, 0.5), rgba(29, 78, 216, 0.45)),
    url("../Aset Desain/pakai/bg/2.webp") center / cover no-repeat;

  opacity: 1; /* Menaikkan opacity lapisan menjadi penuh agar warna birunya keluar sempurna */
}

/* Mengubah warna teks judul kartu menjadi putih secara otomatis saat card di-hover biru */
.wl-rental-card-new3:hover h3,
.wl-rental-card-new3:hover .small {
  color: #ffffff !important;
}

/* Mengubah ikon dot kapasitas menjadi putih/terang saat di-hover */
.wl-rental-card-new3:hover .wl-icon-dot {
  color: #38bdf8 !important;
}
.wl-car-img-new3 {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 10px;
}
.wl-icon-dot {
  transition: color 0.3s ease;
}

/* Efek Hover Card */
.wl-rental-card-new3:hover {
  /* transform: translateY(-5px); */
}

/* Hanya gambar yang bergeser & membesar secara aman di dalam container-nya sendiri */
.wl-rental-card-new3:hover .wl-car-img-new3 {
  /* transform: translateY(4px) scale(1.02); */
  border-radius: 10px 10px;
}

/* Ketika card di-hover, warna icon dots otomatis berubah menjadi merah */
.wl-rental-card-new3:hover .wl-icon-dot {
  color: #c92327 !important;
}

/* Tombol Gradasi Mixed Premium */
.wl-btn-gradient-mixed-new3 {
  display: block;
  background: linear-gradient(135deg, #0284c7 0%, #0284c7 50%, #c92327 100%);
  background-size: 200% auto;
  color: #ffffff !important;
  text-decoration: none;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding: 8px 15px;
  border-radius: 4px;
  transition: all 0.4s ease;
}
.wl-btn-gradient-mixed-new3:hover {
  background-position: right center;
}
/* 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  */
/* ==========================================================================
   LY-LAYANAN CINE V2 - STRETCHED LINK METHOD (BOTH CLICKABLE SECURED)
   ========================================================================== */

/* Container Utama Card */
.ly-layanan-cine-v2 .cine-card {
  background: #0b0f19;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  margin-bottom: 30px;
  height: 380px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}

/* Gambar Latar Belakang */
.ly-layanan-cine-v2 .cine-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease, opacity 0.7s ease;
}

/* Overlay Gradasi Kegelapan Pelindung Teks */
.ly-layanan-cine-v2 .cine-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 15, 25, 0.95) 0%,
    rgba(11, 15, 25, 0.35) 45%,
    transparent 100%
  );
  z-index: 2;
  transition: background 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bingkai Ornamen */
.ly-layanan-cine-v2 .cine-ornament {
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  z-index: 4;
  pointer-events: none;
  transition: inset 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s ease;
}

.ly-layanan-cine-v2 .cine-ornament::before,
.ly-layanan-cine-v2 .cine-ornament::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #3189b9;
  border-style: solid;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ly-layanan-cine-v2 .cine-ornament::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.ly-layanan-cine-v2 .cine-ornament::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* Kontainer Konten Teks */
.ly-layanan-cine-v2 .cine-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 32px 25px;
  z-index: 5;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Judul Layanan & Teknik Stretched Link */
.ly-layanan-cine-v2 .cine-title {
  font-size: 16px !important;
  font-weight: 400 !important;
  margin: 0;
  padding: 0 5px;
  letter-spacing: 0.5px;
  z-index: 6;
}

.ly-layanan-cine-v2 .cine-card-target {
  color: #ffffff !important;
  text-decoration: none !important;
  display: block;
}

/* Trik Utama: Mengisi seluruh ruang card kosong agar bisa mendeteksi klik Judul SEO */
.ly-layanan-cine-v2 .cine-card-target::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* Berada di dasar ruang klik konten */
}

/* Deskripsi Singkat */
.ly-layanan-cine-v2 .cine-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  line-height: 1.5;
  transform: translateY(15px);
  z-index: 6;
  transition: max-height 0.6s ease, opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Area Tombol Aksi */
.ly-layanan-cine-v2 .cine-action-btns {
  width: 100%;
  display: flex;
  justify-content: center;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(20px);
  /* WAJIB: z-index dinaikkan lebih tinggi dari stretched-link agar klik tombol terpisah aktif */
  position: relative;
  z-index: 10 !important; 
  transition: max-height 0.6s ease, opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Desain Tombol Detail Jasa */
.ly-layanan-cine-v2 .btn-cine-detail {
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  color: #1f638a !important;
  border: none;
  width: 85%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.ly-layanan-cine-v2 .btn-cine-detail:hover {
  background: #3189b9;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   HOVER ACTIONS & RE-STYLED SUBTLE GRADIENT
   ========================================================================== */

.ly-layanan-cine-v2 .cine-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(11, 15, 25, 0.15);
}

.ly-layanan-cine-v2 .cine-card:hover .cine-img {
  transform: scale(1.06);
  filter: blur(1px);
  opacity: 0.5;
}

/* Overlay Hover Tipis Transparan Gradasi dari Bawah Terang ke Atas */
.ly-layanan-cine-v2 .cine-card:hover::before {
  background: linear-gradient(
    to top,
    rgba(11, 23, 42, 0.95) 0%,
    rgba(31, 99, 138, 0.45) 55%,
    rgba(31, 99, 138, 0.05) 100%
  );
}

.ly-layanan-cine-v2 .cine-card:hover .cine-ornament {
  inset: 22px;
  border-color: rgba(255, 255, 255, 0.25);
}

.ly-layanan-cine-v2 .cine-card:hover .cine-desc {
  opacity: 1;
  transform: translateY(0);
  max-height: 90px;
  margin-top: 12px;
}

.ly-layanan-cine-v2 .cine-card:hover .cine-action-btns {
  opacity: 1;
  transform: translateY(0);
  max-height: 50px;
  margin-top: 18px;
}
/* card layanan  */

/* detail produk  */
/* Kontainer Gambar Utama */
.det-img-container {
  overflow: hidden;
  /* Menggunakan cubic-bezier agar akselerasi melayang terasa halus dan sinematik */
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform; /* Mengoptimalkan rendering browser */
}

/* State Hover Kontainer Gambar */
.det-img-container:hover {
  transform: translateY(
    -8px
  ); /* Sedikit dinaikkan agar efek melayang lebih terasa */
  box-shadow: 0 20px 40px rgba(25, 135, 84, 0.12) !important; /* Soft green-dark shadow */
}

/* WAJIB ADA: State Dasar Gambar agar pas kursor keluar (mouse leave) animasinya tetap smooth */
#mainProductImg {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* State Hover Gambar Internal (Efek Zoom-In Halus) */
.det-img-container:hover #mainProductImg {
  transform: scale(
    1.05
  ); /* Skala 1.05 memberikan efek zoom yang pas dan tenang */
}

/* Variasi Teks */
.tracking-wider {
  letter-spacing: 1.5px;
}

.product-description-box p {
  margin-bottom: 1rem;
}

/* Tombol WhatsApp (Awal) */
.btn-wa-detail {
  background-color: #198754;
  border: 1px solid #198754;
  box-shadow: 0 4px 14px rgba(25, 135, 84, 0.25);
  /* Transisi disamakan menggunakan cubic-bezier agar serempak smooth-nya */
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease,
    box-shadow 0.4s ease;
}

/* Tombol WhatsApp Hover */
.btn-wa-detail:hover {
  background-color: #157347;
  border-color: #146c43;
  transform: translateY(-3px); /* Naik tipis mengikuti irama kontainer gambar */
  box-shadow: 0 8px 24px rgba(25, 135, 84, 0.35);
  color: #fff;
}
/* detail produk  */

/* detail artikel  */
.art-l7-bg {
  background-color: #f1f5f9;
}

.art-l7-box {
  background: #ffffff;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* FIX & STYLING BLOCKQUOTE DI DALAM ARTIKEL */
.art-l7-box blockquote {
  background-color: #f8fafc !important;
  border-left: 2px solid grey !important; /* Warna aksen hijau */
  padding: 20px 25px !important;
  margin: 25px 0 !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #475569 !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

.art-l7-box blockquote p {
  margin-bottom: 0 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #475569 !important;
}

.art-l7-meta-badge {
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 15px;
  border: 1px solid #e2e8f0;
}

.art-l7-share-bar {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.art-l7-side-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.art-l7-img-wrapper {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.art-l7-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art-l7-title {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: color 0.2s;
}

.art-l7-title:hover {
  color: #58b800;
}

.art-l7-promo-box {
  background: #fffbeb;
  border: 1px dashed #fcd34d;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin-top: 30px;
}
/* detail artikel  */

/* =========================
      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  */
.section-welcome-modern-3 {
  /* background-color: #111827; */
  position: relative;
}

.double-frame-wrapper {
  position: relative;
  padding: 15px;
  display: inline-block;
  width: 100%;
  z-index: 1;
}

/* ornamen cloud  */
.ornamen-cloud {
  content: "";
  position: absolute;
  width: 100%;
  /* height: 100%; */
  bottom: -25px;
  left: 0;

  /* 🔥 FIX FLIP VERTIKAL: Membalik elemen atas ke bawah */
  /* transform: scaleY(-1); */

  /* Memastikan origin pembalikan berada di tengah elemen */
  transform-origin: center;
}
/* ornamen cloud  */

/* ornamen-prambanan  */

/* ornamen prambanan  */

/* Ornamen Bingkai Luar Putus-putus */
.double-frame-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px dashed var(--base-color);
  opacity: 0.4;
  border-radius: 16px;
  z-index: -1;
}

.img-frame-inner {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid var(--base-color);
  /* Bingkai dalam emas padat */
  padding: 5px;
  background-color: #111827;
}

/* Badge Sudut Minimalis Kotak */
.sharp-minimal-badge {
  background-color: #c59747;
  color: #111827;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
}
.badge-double-line {
  /* color: #ffffff; */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 4px;
  border-top: 1px solid var(--base-color);
  border-bottom: 1px solid var(--base-color);
  display: inline-block;
  line-height: 1;
}
/* Welcome  */

/* Card Galeri  */
/* NAV BUTTON */
.galeri-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.galeri-nav button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 0.3s;
}

.galeri-nav button:hover {
  background: #dc3545;
  color: #fff;
}

/* PROGRESS BAR */
.galeri-progress {
  width: 100%;
  height: 4px;
  background: #eee;
  border-radius: 10px;
  margin-top: 20px;
  overflow: hidden;
}

.galeri-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, white, white);
  transition: width 0.3s ease;
}
/* CARD */
.card-galeri {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
}

/* IMAGE */
.card-galeri img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: 0.6s;
}

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

/* OVERLAY */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-galeri:hover .overlay {
  opacity: 1;
}

/* CONTENT */
.overlay-content {
  text-align: center;
  transform: scale(0.8);
  transition: 0.3s;
}

.card-galeri:hover .overlay-content {
  transform: scale(1);
}

/* ICON */
.overlay-content::before {
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: block;
  font-size: 24px;
  color: #fff;
  margin-bottom: 10px;
}

/* TEXT */
.overlay-content h5 {
  color: #fff;
  font-weight: 700;
}

.overlay-content span {
  color: #ddd;
  font-size: 13px;
}

/* 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);
}

.navbar-stick:not(.navbar-dark) a.nav-link{
    color:var(--base-color);
}

.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;
}