@import url("https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,100..900;1,100..900&family=Noto+Sans+Brahmi&family=Noto+Sans+JP:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Sora:wght@100..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");

/* 
"Noto Sans Brahmi", sans-serif;
"Noto Sans JP", sans-serif;
"Work Sans", sans-serif;
"Georama", sans-serif;
"Sora", sans-serif;
"Plus Jakarta Sans", sans-serif;
*/

:root {
  --base-color: #1baada;
  --second-color: #1466b9;
  --third-color: #d2bb0a;
  --four-color: #3f78e0;
  --very-light-base-color: #fbeee1;
  --bs-primary-rgb: 18, 127, 74;
  --bs-secondary-rgb: 170, 176, 188;
  --primary-font: "Plus Jakarta Sans", sans-serif;
  --alt-font: "Plus Jakarta Sans", 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);
}

.offcanvas-footer {
  padding: 1.5rem;
}

.bg-top-bar {
  background: var(--base-color);
  background: -webkit-linear-gradient(
    90deg,
    var(--base-color),
    #002684,
    var(--base-color)
  );
  background: linear-gradient(
    90deg,
    var(--base-color),
    #002684,
    var(--base-color)
  );
}

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

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

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

.nav-link {
  color: white;
}

button.hamburger {
  color: var(--base-color) !important;
}

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

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

/* 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;
  /* overflow-x: hidden; */
}

/* 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;
  font-weight: 400;
}

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) {
  .slider-overlap {
    /* margin-top: -75px !important; */
  }
  .carousel-control-prev-icon {
    display: none;
  }
  .carousel-control-next-icon {
    display: none;
  }
  .fs-25 {
    font-size: 18px !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-welcome {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Base background putih */
  background-color: #ffffff;
}

/* Layer 1: Background Image Watermark (Pudar Atas & Bawah) */
.background-welcome::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../Aset Desain/pakai/bg/15.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -2;
  opacity: 0.1;

  /* Masking gradasi pudar atas dan bawah */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
}

.background-welcome::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Kiri putih solid (100% opacity) -> makin ke kanan makin tipis (transparan) */
  background: linear-gradient(
    to left,
    #ffffff 0%,
    /* Kiri penuh warna putih */ rgba(255, 255, 255, 0.85) 35%,
    /* Putih agak transparan */ rgba(255, 255, 255, 0.2) 70%,
    /* Putih semakin transparan */ rgba(255, 255, 255, 0) 100%
      /* Paling kanan transparan sempurna */
  );
  z-index: -1;
  pointer-events: none;
}

/* Layer 2: Gradasi dari Kiri (Putih) ke Kanan (Transparan) */

.background-step-custom-1 {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Margin menyisakan space ~2.5 - 4 cm kanan kiri di desktop */
  width: calc(100% - 6rem);
  margin: 0 auto;
  border-radius: 10px;
  /* Gradasi dasar Biru ke Hijau */
  background: linear-gradient(135deg, #e0f2fe 0%, #d1fae5 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.background-step-custom-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../Aset Desain/pakai/bg/9.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* Gambar dibuat tipis (opacity rendah) */
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .background-step-custom-1 {
    width: calc(100% - 2rem); /* Penyesuaian jarak di tampilan HP */
  }
}

/* .background-rental {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #f2cacd;
} */

.background-rental {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #f8fafc; /* Latar dasar abu-abu netral */
}

/* Layer 1: Gambar Background Abu-abu & Gradasi Putih Memudar */
.background-rental::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* MULTIPLE BACKGROUND:
     Layer Top : Gradasi memutih ke bawah
     Layer Bottom: Gambar Tekstur .webp
  */
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.65) 0%,
      /* Menjaga tekstur tetap samar */ rgba(255, 255, 255, 0.88) 50%,
      /* Memutih halus di tengah */ #ffffff 100%
        /* Putih solid di bagian bawah */
    ),
    url("../Aset Desain/pakai/bg/7.webp");

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

  /* Filter gambar abu-abu & tipis */
  filter: grayscale(100%) brightness(1.08) contrast(0.9);
  opacity: 1;
  z-index: -2;
}

/* 🔥 Layer 2: Overlay Warna Pink Soft (#f2cacd) */
.background-rental::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Overlay warna #f2cacd yang memudar halus ke putih di bawah */
  background: linear-gradient(
    to bottom,
    rgb(242 202 205) 0%,
    /* Warna #f2cacd tipis & lembut */ rgba(242, 202, 205, 0.15) 50%,
    /* Transisi halus */ transparent 100%
      /* Membiarkan putih solid dari ::before yang tampil */
  );

  pointer-events: none;
  z-index: -1;
}

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

/* 1. Ornamen Circle Dots (Pola Titik-titik Modern di Sisi Kiri) */

/* 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-layanan {
  position: relative;
  z-index: 1;
  overflow: visible;
  /* Pastikan elemen utama punya background putih agar efek memudarnya terlihat sempurna */
  background-color: #ffffff;
}

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

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

  opacity: 0.3;
  filter: none;
  z-index: -1;

  /* 
     EFEK GRADASI MEMUDAR (ATAS & BAWAH):
     0%   = Transparan total di paling atas (mengikuti bg putih elemen utama)
     15%  = Gambar muncul penuh hingga area tengah (85%)
     100% = Transparan total di paling bawah (mengikuti bg putih elemen utama)
  */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}

.background-wisata {
  position: relative;
  z-index: 1;
  overflow: visible;
  /* Pastikan elemen utama punya background putih agar efek memudarnya terlihat sempurna */
  background-color: #ffffff;
}

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

  background: url("../Aset Desain/pakai/bg/2.webp");
  background-size: cover;
  background-position: top;
  /* background-attachment: fixed; */

  opacity: 0.1;
  filter: none;
  z-index: -1;

  /* EFEK GRADASI MEMUDAR KE PUTIH (KE BAWAH) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

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

/* step background alur proses  */
.step-container-responsive {
  position: relative;
}

/* ---------------------------------------------------
 1. LAYAR MOBILE (< 768px):
    - Ikon di SISI KIRI, Teks di KANAN
    - Line Dash Vertikal Lurus di SISI KIRI
--------------------------------------------------- */
@media (max-width: 767.98px) {
  .step-container-responsive::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 62px; /* Presisi di tengah ikon ukuran 85px (42.5px) */
    width: 2px;
    border-left: 2px dashed #0284c7;
    opacity: 0.35;
    z-index: 0;
  }

  .step-card-clean {
    flex-direction: row !important; /* Susunan menyamping di mobile */
    text-align: left !important;
    align-items: flex-start !important;
  }

  .step-card-clean .icon-wrapper-7 {
    flex-shrink: 0; /* Agar lingkaran tidak megecil */
    margin-bottom: 0 !important;
    margin-right: 15px;
  }

  .step-card-clean .title-box-7 {
    justify-content: flex-start !important;
    height: auto !important;
  }

  .step-card-clean .desc-box-7 {
    height: auto !important;
    -webkit-line-clamp: unset !important; /* Deskripsi penuh di mobile */
  }
}

/* ---------------------------------------------------
 2. LAYAR DESKTOP (>= 768px):
    - Tampilan Zig-zag Naik-Turun
    - Line Dash Horizontal
--------------------------------------------------- */
@media (min-width: 768px) {
  .step-container-responsive::before {
    content: "";
    position: absolute;
    top: 72px;
    left: 10%;
    right: 10%;
    height: 2px;
    border-top: 2px dashed #0284c7;
    opacity: 0.35;
    z-index: 0;
  }

  /* Zig-zag Naik Turun */
  .step-col-responsive:nth-child(even) {
    /* margin-top: 35px; */
  }

  .step-card-clean .title-box-7 {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-card-clean .desc-box-7 {
    height: 54px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------------------------------------------------
 3. STYLE BASE & ANIMASI (100% TIDAK DIUBAH)
--------------------------------------------------- */
.step-card-clean {
  transition: all 0.4s ease;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.step-card-clean:hover {
  transform: translateY(-8px);
}

.step-card-clean .icon-wrapper-7 {
  width: 85px;
  height: 85px;
  background: #ffffff; /* Latar putih menutup garis dash di belakangnya */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.12);
}

.step-card-clean .badge-num-7 {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #0284c7, #10b981);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -2px;
  right: -6px;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
  border: 2px solid #ffffff;
  animation: pulse-7 2s ease-in-out infinite;
  z-index: 3;
}

@keyframes pulse-7 {
  0%,
  100% {
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
  }
  50% {
    box-shadow: 0 4px 22px rgba(2, 132, 199, 0.55);
  }
}

.step-card-clean:hover .badge-num-7 {
  animation-play-state: paused;
  transform: scale(1.1);
}

.step-card-clean .icon-wrapper-7::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #0284c7;
  border-right-color: #10b981;
  opacity: 0;
  transition: all 0.5s ease;
}

.step-card-clean:hover .icon-wrapper-7::after {
  opacity: 1;
  transform: rotate(360deg);
}

.step-card-clean:hover .icon-wrapper-7 {
  transform: scale(1.1);
  box-shadow: 0 15px 40px rgba(2, 132, 199, 0.2);
}

.step-card-clean .icon-wrapper-7 img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  transition: all 0.4s ease;
}

.step-card-clean:hover .icon-wrapper-7 img {
  transform: scale(1.1) rotate(-10deg);
}
/* step background alur proses  */

/* step loker  */
.step-row-6 {
  background: #ffffff;
  border-radius: 20px;
  padding: 0 20px 16px;
  text-align: center;
  height: 100%;
  border: 1px solid #e2e8f0;
  transition: all 0.4s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.step-row-6::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #fd6b01, transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.step-row-6:hover::before {
  opacity: 1;
}

.step-row-6:hover {
  box-shadow: 0 20px 50px rgba(253, 107, 1, 0.15);
  transform: translateY(-8px);
}

.step-row-6 .float-img {
  width: 60px;
  height: 60px;
  padding: 4px;
  border-radius: 20px;
  overflow: hidden;
  margin: -30px auto 12px;
  background: #ffffff;
  border: 4px solid #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}

.step-row-6:hover .float-img {
  box-shadow: 0 15px 40px rgba(253, 107, 1, 0.3);
  transform: scale(1.05);
  border-color: #fd6b01;
}

.step-row-6 .float-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.step-row-6 .step-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.step-row-6 .step-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Lingkaran Angka Nomor Urut */
.step-row-6 .arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff1eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto auto 0 auto;
  color: #fd6b01;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.step-row-6:hover .arrow-circle {
  background: #fd6b01;
  color: #ffffff;
  transform: scale(1.1);
}
/* step loker  */

/* 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;
  background-color: #ffffff;
}

/* Layer 1: Background Image (Sisi Atas) */
.background-keunggulan::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../Aset Desain/pakai/bg/10.webp") center/cover no-repeat;
  opacity: 0.2;
  /* Masking agar gambar memudar dari atas ke arah bawah */

  z-index: -2;
}

/* Layer 2: Base Color Gradient 300px (Sisi Bawah ke Atas) */
.background-keunggulan::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  /* Gradasi dari transparan di atas ke base color (#0045af) penuh di bawah */
  /* background: linear-gradient(to top, #0046af87 0%, rgba(0, 69, 175, 0.15) 70%, transparent 100%); */
  z-index: -1;
  pointer-events: none;
}

.background-project {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Warna dasar diubah menjadi putih penuh */
  background-color: rgba(0, 0, 255, 0.082);
}

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

  /* background: url("../Aset Desain/pakai/bg/6.webp") center/cover no-repeat; */
  /* background-attachment: fixed; */
  background-color: var(--base-color);
  height: 300px;
  opacity: 0.8;
  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%,
    var(--base-color) 25%,
    #ddbc60 50%,
    #ffd450 55%,
    #ddbc60 60%,
    var(--base-color) 85%,
    #000000 100%
  );
}

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

/* Gambar Lapisan Bawah (Dengan Overlay Putih Tipis) */
.background-produk::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Lapisan overlay putih (88% pekat) di atas gambar background */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.938) 0%,
      rgba(255, 255, 255, 0.953) 70%,
      rgba(255, 255, 255, 1) 100%
    ),
    url("../Aset Desain/pakai/bg/2.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -1;
  pointer-events: none;
}

/* Overlay Gradasi Tipis Kiri ke Kanan (Opsional Accent) */
/* .background-produk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.05) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(239, 68, 68, 0.04) 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;
  }
}

/* CONTAINER UTAMA FOOTER */
.background-cta {
  position: relative;
  z-index: 1;
  
}

/* Layer 1: Gambar Background 12.webp (Tipis Transparan) */
.background-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../Aset Desain/pakai/bg/12.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.2;
  z-index: -2;
  pointer-events: none;
}

/* Layer 2: Overlay Gradasi Murni Putih (Tengah Pekat -> Kiri/Kanan Tipis Transparan) */
.background-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.6) 60%,
    rgba(255, 255, 255, 0.15) 100%
  );
  z-index: -1;
  pointer-events: none;
}

.background-footer {
  position: relative;
  z-index: 1;
  overflow: hidden; /* Mencegah bug overflow/scrollbar */
}

/* Layer 1: Gambar Background (Dibuat Lebih Tipis) */
.background-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../Aset Desain/pakai/bg/3.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.35; /* Gambar diperthin / ditipiskan */
  z-index: -2;
  pointer-events: none;
}

/* Layer 2: Overlay 1 Warna Biru Pekat (Semakin Ke Atas Semakin Pekat) */
.background-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Menggunakan 1 warna biru (#0a192f) dari transparan -> pekat ke atas */
  background: linear-gradient(
    to top,
    rgba(14, 74, 163, 0.786) 0%,
    /* Bawah: Tipis / Transparan */ rgba(3, 48, 114, 0.88) 100%
      /* Atas: Biru Pekat */
  );
  z-index: -1;
  pointer-events: none;
}

/* 🔥 Layer 2: Overlay Gradasi Merah Mewah (Dark Crimson to Deep Wine) */
/* .background-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #de5003e8 0%, #f8820ce0 50%, #e6840c 100%);
  z-index: -1;
  pointer-events: none;
} */
.background-galeri {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* BACKGROUND GAMBAR HITAM PUTIH (GRAYSCALE) */
.background-galeri::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../Aset Desain/pakai/bg/16.webp") center/cover no-repeat;
  filter: grayscale(100%);
  /* Mirror horizontal (kiri ke kanan) */
  transform: scaleX(-1);
  opacity: 0.2;
  z-index: -2;
}

/* OVERLAY GRADASI PUTIH (Atas, Bawah, dan Kanan makin putih) */
.background-galeri::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Kombinasi gradasi horizontal (Kiri -> Kanan) dan vertikal (Tengah -> Atas/Bawah) */
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.98) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.95) 100%
    );
  background-blend-mode: screen; /* Menggabungkan kedua gradasi secara halus */
  border-radius: inherit;
  z-index: -1;
}

/* KONTEN TETAP DI ATAS */
.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;
  opacity: 0.09;
  background: url("../Aset Desain/pakai/bg/7.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-cta1 {
  position: relative;
  z-index: 1;
  /* overflow: hidden; */
  background-color: #ffffff;
}

/* Layer 1: Gambar Background 8.webp & Gradasi Memutih ke Bawah */
.background-cta1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to top,
      #ffffff 0%,
      /* Solid putih di bagian bawah */ rgba(255, 255, 255, 0.6) 50%,
      /* Transisi memudar di tengah */ rgba(255, 255, 255, 0.1) 100%
        /* Tipis di atas agar tekstur terlihat */
    ),
    url("../Aset Desain/pakai/bg/9.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  z-index: -2;
  opacity: 0.1;
  pointer-events: none;
}

/* 🔥 Layer 2: Overlay Warna Abu-abu Soft yang Memudar */

/*==========================================================================
* Navbar
==========================================================================*/
/* Mengubah layout active menjadi bentuk kapsul */
.navbar-nav .nav-link {
  position: relative;
  transition: color 0.3s ease;
  padding-bottom: 18px !important;
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--base-color);
  border-radius: 2px;
  transition:
    width 0.3s ease,
    left 0.3s ease;
}

/* Garis otomatis muncul saat hover atau active */
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 80%;
  left: 10%;
}

.navbar-nav .nav-link.active {
  color: var(--base-color) !important;
  font-weight: 600;
}
.navbar-stick:not(.navbar-dark) {
  background: white;
  /* color: red; */
}

.navbar-stick .nav-link {
  color: var(--base-color) !important;
}

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

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

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

/* Welcome Text */
.cursor-l3 {
  animation: blink 0.7s infinite;
  color: var(--second-color);
  font-weight: bold;
}
.floating-img-7 {
  animation: floatSmooth7 4s ease-in-out infinite;
}

@keyframes floatSmooth7 {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-16px);
  }
}
.floating-img-4 {
  animation: floatSmooth4 3.8s ease-in-out infinite;
}

@keyframes floatSmooth4 {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

.welcome-line-accent {
  position: absolute;
  top: 10%;
  left: -15px;
  width: 6px;
  height: 80%;
  background: var(--base-color);
  border-radius: 4px;
  z-index: 3;
}

.welcome-border-box {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 60%;
  height: 60%;
  border-top: 2px solid #2d6a4f;
  border-right: 2px solid #2d6a4f;
  opacity: 0.4;
  z-index: 0;
}

/* Membatasi ukuran maksimal & menjaga aspek rasio foto agar utuh (tidak terpotong) */
.welcome-img-container {
  max-width: 450px;
  /* Atur batas lebar maks di sini */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.welcome-img-container img {
  width: 100%;
  height: auto;
  /* Memastikan rasio asli terjaga & tidak terpotong */
  object-fit: contain;
  display: block;
}
/* welcome text  */

/* Floating WA */
.wa-circle-wrapper {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 99999;
}

.wa-circle-btn {
  position: relative;
  width: 58px;
  height: 58px;
  background: #25d366;
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
}

.wa-circle-btn i {
  font-size: 32px;
}

.wa-circle-btn:hover {
  transform: scale(1.1);
  background: #20ba5a;
  color: #ffffff !important;
}

/* Radar Pulse Loops */
.wa-circle-wrapper::after,
.wa-circle-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #25d366;
  z-index: -1;
  opacity: 0.6;
}

.wa-circle-wrapper::before {
  animation: wa-radar 2s infinite ease-out;
}

.wa-circle-wrapper::after {
  animation: wa-radar 2s infinite ease-out 0.6s;
}

/* Red Badge Notif */
.wa-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

@keyframes wa-radar {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
/* floating wa  */

/* floating wa baru  */
:root {
  --wa-color: #25d366;
  --call-color: var(--base-color);
}

.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) {
  .background-cta {
    padding-top: 35px;
    padding-bottom: 35px;
  }
  .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: 130px;
    max-width: 130px;
    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  */
/* Animasi Gambar Floating Smooth */
@keyframes ctaFloatNavy {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.img-floating-navy {
    animation: ctaFloatNavy 3.5s ease-in-out infinite;
}

/* Animasi Tombol Shine Sweep */
.btn-blue-shine {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    color: #ffffff !important;
    border: none;
    transition: all 0.3s ease;
}

.btn-blue-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-25deg);
    transition: none;
}

.btn-blue-shine:hover::before {
    left: 150%;
    transition: left 0.75s ease-in-out;
}

.btn-blue-shine:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4) !important;
}

.btn-outline-light-custom {
    background-color: transparent;
    color: var(--base-color) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-outline-light-custom:hover {
    background-color: var(--base-color);
    color: white !important;
    border-color: var(--base-color);
    transform: scale(1.03);
}

.btn-outline-light-custom:hover i {
    color: white !important;
}
/* cta baru  */

.btn-berita-lainnya {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1b4332;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 24px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  box-shadow: 0 4px 10px rgba(27, 67, 50, 0.15);
}

.btn-berita-lainnya:hover {
  background-color: var(--base-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(45, 106, 121, 0.2);
}

.btn-berita-lainnya:active {
  transform: translateY(0);
}

/* Footer baru  */
/* Styling Judul Kolom dengan Aksen Garis Biru */
.footer-heading-v16 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  position: relative;
  display: inline-block;
}
.footer-heading-v16::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  background: #38bdf8;
  border-radius: 2px;
  margin-top: 6px;
}

/* Hover Effect Kontak Simple Seragam Warna Biru */
.contact-simple-item {
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  transition: all 0.25s ease;
}
.contact-simple-item:hover {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.08);
  transform: translateX(4px);
}
.contact-icon-blue {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.contact-simple-item:hover .contact-icon-blue {
  background: #0284c7;
  color: #ffffff;
}

/* Hover Effect Badge Sosial Media Warna Biru */
.sosmed-badge-blue {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  transition: all 0.3s ease;
}
.sosmed-badge-blue:hover {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}
/* 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 Project  */
.dot-pattern-bg {
  position: relative;
  padding: 20px;
}
.dot-pattern-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(#0f172a 2px, transparent 2px);
  background-size: 14px 14px;
  opacity: 0.25;
  z-index: 0;
}
.btn-wa-glow {
  background: var(--base-color);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  transition: all 0.3s ease;
}
.btn-wa-glow:hover {
  background: #0039a2;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(37, 211, 102, 0.45);
}
/* Detail Project  */

/* step alur proses  */
/* Option 3: Connected Horizontal Flow */
.step-flow-card {
  background: #ffffff;
  border: 2px solid #f1f5f9;
  border-radius: 18px;
  padding: 24px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.step-flow-card:hover {
  border-color: #fd6b01;
  box-shadow: 0 10px 25px rgba(253, 107, 1, 0.1);
  transform: scale(1.02);
}

.step-flow-card .flow-circle-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #1e293b;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(30, 41, 59, 0.2);
}

.step-flow-card:hover .flow-circle-num {
  background: #fd6b01;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(253, 107, 1, 0.3);
}

.step-flow-card .flow-img-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  overflow: hidden;
  background: #f8fafc;
  flex-shrink: 0;
}

.step-flow-card .flow-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-flow-card .flow-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
}

.step-flow-card .flow-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* step alur proses  */

/* 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: 165px 0 115px 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: var(--base-color) !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,
    var(--base-color),
    var(--base-color)
  ) !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;
  background-color: #000000;
}

/* BACKGROUND IMAGE (FIXED ABU-ABU) */
.v6-op6-footer::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;
}

.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: 190px;
  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);
}

/* btn navbar  */
.wa-biru-5 {
  display: inline-flex;
  align-items: stretch;
  border-radius: 50px;
  overflow: hidden;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.wa-biru-5:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.25);
}
.wa-left-5 {
  background: var(--base-color);
  color: white;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  font-size: 16px;
  transition: all 0.3s ease;
}
.wa-biru-5:hover .wa-left-5 {
  background: var(--base-color);
}
.wa-right-5 {
  background: var(--second-color);
  color: #1e293b;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}
.wa-biru-5:hover .wa-right-5 {
  background: #eed306;
  padding-right: 24px;
  color: black;
}
/* btn navbar  */

/* welcome text  */
.arrow-slide {
  display: inline-block;
  transition: all 0.3s ease;
  font-size: 12px;
  opacity: 1;
}

.btn-trans-yellow:hover .arrow-slide {
  transform: translateX(6px);
  opacity: 0.8;
}
.btn-side-v1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  min-width: 120px;
}

/* Tombol 1: Solid Navy */
.btn-solid-navy {
  background: var(--base-color, #1e3a8a);
  color: #ffffff;
  box-shadow: 0 4px 14px
    color-mix(in srgb, var(--base-color, #1e3a8a) 30%, transparent);
}

.btn-solid-navy:hover {
  color: #ffffff;
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Tombol 2: Transparent Yellow Border */
.btn-trans-yellow {
  /* background: transparent; */
  color: #1e293b;
  /* box-shadow: inset 0 0 0 2px var(--second-color, #f1c40f); */
}

.btn-trans-yellow:hover {
  background: transparent;
  color: #0f172a;
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 2px var(--second-color, #f1c40f),
    0 6px 16px rgba(241, 196, 15, 0.3);
}
/* welcome text  */

/* tomboml unit lainnya  */
.btn-unit-lainnya {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  color: #212529;
  /* Warna teks gelap */
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

/* Membuat garis dari tengah */
.btn-unit-lainnya::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0%;
  height: 2px;
  background-color: var(--base-color);
  /* Warna garis merah/aksen */
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
}

.btn-unit-lainnya .arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Efek Hover */
.btn-unit-lainnya:hover {
  color: var(--base-color);
  /* Teks ikut berubah warna */
}

.btn-unit-lainnya:hover::after {
  width: 100%;
}

.btn-unit-lainnya:hover .arrow {
  transform: translateX(8px);
}
/* tombol unit lainya  */

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.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  */
.pro-info-bar-v1 {
  background: white;
  padding: 10px 0;
}
.pro-info-item-v1 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-right: 1px solid var(--base-color);
  position: relative;
}
.pro-info-item-v1:last-child {
  border-right: none;
}
.pro-info-item-v1:hover {
  background: #fafbfc;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.pro-info-icon-circle-v1 {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: var(--base-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(231, 225, 60, 0.3);
}
.pro-info-item-v1:hover .pro-info-icon-circle-v1 {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 6px 18px rgba(208, 231, 60, 0.4);
}
.pro-info-label-v1 {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1.5px;
  margin-bottom: 3px;
}
.pro-info-value-v1 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
}
.pro-follow-bar-v1 {
  background: white;
  padding: 20px 0;
  border-top: 1px solid var(--base-color);
}
.pro-follow-icon-v1 {
  color: var(--base-color);
  font-size: 18px;
}
.pro-sosmed-v1 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--base-color);
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.35s ease;
  font-size: 15px;
}
.pro-sosmed-v1:hover {
  background: var(--base-color);
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(217, 231, 60, 0.3);
  border-radius: 50%;
}
@media (max-width: 768px) {
  .pro-info-item-v1 {
    border-right: none;
    border-bottom: 1px solid var(--base-color);
  }
}
/*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  */

/* statistik */
/* ORNAMEN & FRAME GAMBAR */
.img-wrapper-opt7 {
  position: relative;
  padding: 10px;
}

/* Pattern Ornamen Dot Grid di Belakang Gambar */
.img-wrapper-opt7::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(#0284c7 2px, transparent 2px);
  background-size: 12px 12px;
  opacity: 0.25;
  z-index: 0;
}

.img-container-opt7 {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  height: 310px;
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.08);
}

/* Floating Badge di Atas Gambar */
.badge-float-opt7 {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(2, 132, 199, 0.2);
  z-index: 2;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* CONTAINER & ITEM STATISTIK */
.stat-card-opt7 {
  padding: 8px 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s ease;
}

.stat-card-opt7:hover {
  transform: translateY(-2px);
}

.stat-num-opt7 {
  font-size: 28px;
  /* Ukuran angka dibuat lebih compact/kecil */
  font-weight: 800;
  background: linear-gradient(135deg, #0284c7, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

/* GARIS PEMBATAS ANTAR KOLOM */
.border-stat-item {
  border-right: 1px dashed #cbd5e1;
}

/* Hilangkan border kanan pada item ke-2 & ke-4 di Mobile, dan item terakhir di Desktop */
@media (max-width: 767.98px) {
  .col-6:nth-child(2n) .border-stat-item {
    border-right: none;
  }

  .col-6:nth-child(1),
  .col-6:nth-child(2) {
    border-bottom: 1px dashed #cbd5e1;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
}

@media (min-width: 768px) {
  .col-md-3:last-child .border-stat-item {
    border-right: none;
  }
}
/* statistik  */

/* artikel detail  */
.share-btn-5 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--base-color);
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s ease;
}
.share-btn-5:hover {
  background: #3498db;
  color: white;
}
.sidebar-d5-item {
  transition: all 0.2s ease;
}
.sidebar-d5-item:hover {
  background: #f8f9fb;
  margin-left: -5px;
  margin-right: -5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 6px;
}
.sidebar-d5-item:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !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) {
  .py-5 {
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
  }
  .gambar-banner {
    height: 250px;
  }
}

/* gambar banner  */

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

/* card keunggulan  */
.section-why-grid-v2 {
  background-color: #f1f5f9;
  background-image: radial-gradient(
    rgba(16, 185, 129, 0.08) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}

.card-pill-v2 {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.3s ease;
}

.card-pill-v2:hover {
  background: #ffffff;
  transform: translateY(-4px);
  border-color: #10b981;
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.1) !important;
}

.icon-box-v2 {
  width: 52px;
  height: 52px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.card-pill-v2:hover .icon-box-v2 {
  transform: scale(1.08);
  background: #dcfce7;
}
/* card keunggulan  */

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

/* project terbaru  */
/* STYLE OPSI 1 */
.card-layout-x1 {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--base-color);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-layout-x1:hover {
  transform: translateY(-6px);
  border-color: var(--base-color);
  box-shadow: 0 20px 35px rgba(13, 110, 253, 0.08);
}

.img-x1 {
  height: 195px;
  overflow: hidden;
  position: relative;
}

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

.card-layout-x1:hover .img-x1 img {
  transform: scale(1.08);
}

/* LAYOUT TOMBOL SPLIT MODEREN */
.btn-x1-group {
  display: flex;
  width: 100%;
  border-top: 1px solid var(--base-color);
}

.btn-x1-detail,
.btn-x1-hubungi {
  flex: 1;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-x1-detail {
  background: #ffffff;
  color: #0f172a;
}

.card-layout-x1:hover .btn-x1-detail {
  background: white;
  color: var(--base-color);
}

.btn-x1-hubungi {
  background: var(--base-color);
  color: white;
  border-left: 1px solid var(--base-color);
}

.btn-x1-hubungi:hover {
  background: darkblue;
  color: #ffffff;
}

/* PENGUNCI TINGGI ELEMEN TEKS */
.clamp-title-x1 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 48px;
}

.clamp-desc-x1 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  min-height: 63px;
}
/* project terbaru  */

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

/* FAQ  */
.faq-search-6 .search-box {
  position: relative;
  margin-bottom: 25px;
}

.faq-search-6 .search-box input {
  width: 100%;
  padding: 14px 20px 14px 50px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.faq-search-6 .search-box input:focus {
  border-color: #fd6b01;
}

.faq-search-6 .search-box .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
}

.faq-search-6 .faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-search-6 .faq-item.active {
  border-color: #fd6b01;
  box-shadow: 0 5px 20px rgba(253, 107, 1, 0.08);
}

.faq-search-6 .faq-header {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}

.faq-search-6 .faq-header .badge-cat {
  background: #f1f5f9;
  color: #64748b;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  transition: all 0.3s;
}

.faq-search-6 .faq-item.active .faq-header .badge-cat {
  background: #fd6b01;
  color: #fff;
}

.faq-search-6 .faq-header .faq-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  flex-grow: 1;
}

.faq-search-6 .faq-header .chevron {
  color: #94a3b8;
  transition: transform 0.4s ease;
  font-size: 12px;
}

.faq-search-6 .faq-item.active .faq-header .chevron {
  transform: rotate(180deg);
  color: #fd6b01;
}

.faq-search-6 .faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.faq-search-6 .faq-item.active .faq-body {
  max-height: 250px;
}

.faq-search-6 .faq-body .faq-content {
  padding: 0 20px 18px 20px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.8;
  border-top: 1px solid #f1f5f9;
  margin: 0 20px;
}
/* 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: var(--base-color); /* 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;
}

/* Tombol Trigger (Gradasi Oranye) */
.btn-syarat-gradient {
  background: linear-gradient(135deg, #fd6b01 0%, #ea580c 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(253, 107, 1, 0.3);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.btn-syarat-gradient:hover {
  color: #ffffff;
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(253, 107, 1, 0.45);
}

/* Styling Modal (Glassmorphism & Soft Shadow) */
.modal-syarat .modal-content {
  border-radius: 20px;
  border: none;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.modal-syarat .modal-header {
  background: #fafafa;
  border-bottom: 1px solid #f1f5f9;
  padding: 18px 24px;
}

.modal-syarat .modal-body {
  padding: 24px;
  color: #334155;
  font-size: 14px;
  line-height: 1.6;
}

.modal-syarat .btn-close-custom {
  background-color: #000000;
  color: #ffffff;
  border-radius: 8px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  transition: background 0.2s ease;
}

.modal-syarat .btn-close-custom:hover {
  background-color: #fd6b01;
  color: #ffffff;
}
/* card layanan baru*/

/*end card layanan baru*/

.carousel-control-prev-icon {
  display: none;
}
.carousel-control-next-icon {
  display: none;
}

.carousel-control-prev {
  display: none;
}

.carousel-control-next {
  display: none;
}

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

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

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

/* 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: auto !important; */
  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  */

/* Slider  overlap */
.slider-overlap {
  /* margin-top: -68px; */
  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%;
  object-fit: cover;
  transition: transform 12s ease;
  transform: scale(1);
}
.swiper-slide-active .image-wrapper img {
  transform: scale(1.1);
}

/* Overlay & Konten */
.overlay-gradient-white {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgb(255 255 255) 0%,
    rgb(255 255 255 / 50%) 70%
  );
  z-index: 1;
  pointer-events: none;
}

/* Penyesuaian Teks agar terlihat jelas */
.text-white-shadow {
  color: #1e293b;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}
.text-color-blue {
  color: #2563eb;
}

/* Pastikan content box tidak terhalang */
.content-box {
  position: relative;
  z-index: 2;
  height: 600px;
  display: flex;
  align-items: center;
}

/* Animasi Inti (Hanya berlaku untuk Judul & Deskripsi) */
.animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.swiper-slide-active .animate-scale {
  opacity: 1;
  transform: scale(1);
}

.delay-1 {
  transition-delay: 0.3s;
}
.delay-2 {
  transition-delay: 0.6s;
}

/* Dua Tombol (Statis Tanpa Transisi Masuk) */
.btn-group {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.btn-hero {
  padding: 6px 20px !important;
  border-radius: 5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.4s ease;
  display: inline-block;
}

/* Tombol Gradasi Hijau dengan Efek Hover Outline */
.btn-grad-green-primary {
  background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
  color: #ffffff !important;
  border: 2px solid transparent !important;
  box-shadow: 0 4px 15px rgba(21, 128, 61, 0.3);
}

.btn-grad-green-primary:hover {
  background: transparent !important;
  border-color: #22c55e !important;
  color: #22c55e !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

/* Tombol Outline Hijau yang Mengisi Gradasi saat Hover */
.btn-grad-green-outline {
  border: 2px solid #15803d !important;
  color: #ffffff !important;
  background: transparent !important;
}

.btn-grad-green-outline:hover {
  background: linear-gradient(135deg, #15803d 0%, #22c55e 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(21, 128, 61, 0.4);
}

/* 1. Efek Zoom Latar Belakang */
@keyframes infiniteZoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
.swiper-slide-active .img-zoom-loop {
  animation: infiniteZoom 20s ease-in-out infinite;
}

/* 2. Overlay Gradasi Hijau-Hitam */
.overlay-gradient-green-black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(16, 44, 31, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.text-light-shadow {
  color: #ffffff;
  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
}

/* Opsi 3: Minimalist Modern Line */
.badge-line {
  position: relative;
}
.badge-line::before,
.badge-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}
.badge-line::before {
  left: -40px;
}
.badge-line::after {
  right: -40px;
}

/* Background Highlight Miring */
.bg-dynamic-slash {
  position: relative;
  z-index: 1;
  padding: 2px 12px;
  color: #ffffff !important;
  display: inline-block;
}
.bg-dynamic-slash::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
  z-index: -1;
  transform: skewX(-12deg);
  border-radius: 4px;
}
/* slider overlap hero  */

/* galeri slide  */
.galeri-overlay {
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  height: 280px;
  /* Tinggi seragam untuk keindahan slider */
}

.galeri-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.galeri-overlay:hover img {
  transform: scale(1.08);
}

.galeri-overlay .overlay-content {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  transform: translateY(20px);
}

.galeri-overlay:hover .overlay-content {
  opacity: 1;
  transform: translateY(0);
}

/* Kustomisasi tombol navigasi Swiper agar serasi */
.swiper-button-next,
.swiper-button-prev {
  color: #ffffff !important;
  background: rgba(45, 106, 79, 0.8);
  /* Warna tema hijau desa */
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 16px !important;
  font-weight: bold;
}

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

/* our client klien */
.marquee-container-2b {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 20px 0;
}

.marquee-track-2b {
  display: flex;
  width: max-content;
  animation: marquee-scroll-2b 30s linear infinite;
}

.marquee-container-2b:hover .marquee-track-2b {
  animation-play-state: paused;
}

@keyframes marquee-scroll-2b {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.client-item-2b {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  margin: 0 12px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 50px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  transition: all 0.4s ease;
  flex-shrink: 0;
}

.client-item-2b picture {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.client-item-2b img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.7);
  transition: all 0.4s ease;
}

.client-item-2b:hover {
  transform: translateY(-5px);
  border-color: #10b981;
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.2);
}

.client-item-2b:hover img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.15);
}

.client-item-2b h3 {
  color: #475569;
  transition: color 0.3s ease;
}

.client-item-2b:hover h3 {
  color: #0f172a;
}
/* our client  */

/* Card Galeri marquee  */
/* CSS Opsi 1A: Split Left Text + Marquee Right (Blue Shine Effect) */
:root {
  --blue-accent: #0d6efd;
  --blue-glow: rgba(13, 110, 253, 0.25);
}

.galeri-split-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.galeri-split-left {
  flex: 1 1 120px;
}

.galeri-split-right {
  flex: 2 1 480px;
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  padding: 10px 0;
}

/* Mask Gradient Kiri Kanan */
.galeri-split-right::before,
.galeri-split-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.galeri-split-right::before {
  left: 0;
  background: linear-gradient(to right, #f8f9fa, transparent);
}

.galeri-split-right::after {
  right: 0;
  background: linear-gradient(to left, #f8f9fa, transparent);
}

.galeri-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: galeriScrollRight 25s linear infinite;
}

.galeri-marquee-track:hover {
  animation-play-state: paused;
}

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

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

.galeri-slide-card {
  width: 220px;
  aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s ease;
}

.galeri-slide-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --- ANIMASI BLUE SHINE EFFECT --- */
.galeri-slide-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(13, 110, 253, 0.4),
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transform: skewX(-25deg);
  z-index: 2;
  pointer-events: none;
  transition: none;
}

.galeri-slide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px var(--blue-glow);
}

.galeri-slide-card:hover img {
  transform: scale(1.08);
}

.galeri-slide-card:hover::before {
  left: 150%;
  transition: left 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.galeri-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 110, 253, 0.85) 0%,
    transparent 70%
  );
  opacity: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  z-index: 1;
  transition: opacity 0.4s ease;
}

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

/* Lightbox Modal Base */
.galeri-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  padding: 20px;
}

.galeri-lightbox-modal.active {
  opacity: 1;
  visibility: visible;
}

.galeri-lightbox-content {
  max-width: 900px;
  width: 100%;
  text-align: center;
  position: relative;
}

.galeri-lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 12px;
  object-fit: contain;
}

.galeri-lightbox-caption {
  color: #fff;
  margin-top: 15px;
  font-size: 16px;
  font-weight: 600;
}

.galeri-lightbox-close {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  font-weight: bold;
  line-height: 1;
}
/* 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  */
.card-artikel-v4 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  transition: all 0.3s ease;
}

.card-artikel-v4 .img-section {
  position: relative;
  width: 100%;
  height: 185px;
  overflow: hidden;
}

.card-artikel-v4 .img-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card-artikel-v4 .content-section {
  position: relative;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.card-artikel-v4 .category-badge {
  position: absolute;
  top: -12px;
  left: 16px;
  background: #2563eb;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.card-artikel-v4 h5 {
  font-size: 14px;
  color: #1e293b;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.card-artikel-v4 .stats {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #64748b;
  border-top: 1px dashed #e2e8f0;
  padding-top: 10px;
}

.card-artikel-v4:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
  border-color: #bfdbfe;
}

.card-artikel-v4:hover h5 {
  color: #2563eb;
}

.card-artikel-v4:hover .category-badge {
  transform: scale(1.05);
  background: #1d4ed8;
}

.card-artikel-v4:hover .img-section img {
  transform: scale(1.08);
}
/* 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  */
.testi-card-brutal {
  background: #ffffff;
  border: 3px solid #0f172a;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 5px 5px 0px #0f172a;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.testi-card-brutal:hover {
  transform: translate(-4px, -4px);
  box-shadow: 9px 9px 0px #fd6b01;
  border-color: #0f172a;
}

.testi-brutal-badge {
  background: #fd6b01;
  color: #ffffff;
  border: 2px solid #0f172a;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.testi-brutal-avatar {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 2px solid #0f172a;
  overflow: hidden;
}
/* 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  */

/* cta navbar  */
.btn-wa-opt2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #000000 !important;
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 6px;
}

.btn-wa-opt2 .icon-badge {
  background: var(--second-color);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* Garis Dasar (Hitam) */
.btn-wa-opt2::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--base-color);
}

/* Garis Merah Aksi */
.btn-wa-opt2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30%;
  height: 2px;
  background: var(--second-color);
  transition: all 0.3s ease;
}

.btn-wa-opt2:hover::after {
  width: 100%;
  background: var(--second-color);
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.5);
}
/* cta navbar  */

/* ##MOBILE HP*/
@media only screen and (max-width: 600px) {
  .navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
    left: 12rem !important;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--primary-font);
    font-weight: 700;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
    font-size: 20px;
  }
  .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;
  }
  .navbar-nav .nav-link:hover::after,
  .navbar-nav .nav-link.active::after {
    display: none;
  }
  a.nav-link {
    font-size: 14px;
    padding: 0px !important;
  }
  .overlap-text-card {
    padding: 0 !important;
    box-shadow: none !important;
    margin-top: 30px;
  }
  .overlap-image-wrapper {
    box-shadow: none !important;
  }
  .keunggulan-overlap-wrapper {
    margin-top: -200px !important;
  }
  .title-split {
    font-size: 25px !important;
  }
  .cta-layout-2 {
    padding: 0;
  }
  .cta-floating-card {
    padding: 10px;
  }
  .btn-cta-green {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
  }
  .bg-cta {
    /* height: 440px !important; */
  }
  .swiper-hero {
    height: 100vh !important;
  }
  .swiper-container .swiper img {
    height: 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;
  }

  .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  */
/* --- V4 OPSI 1: KINETIC TYPO & BIG LOGO --- */
.accent-blue {
  color: #38bdf8;
}

.footer-slate-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.2s ease;
}

.footer-slate-link:hover {
  color: #38bdf8 !important;
  padding-left: 3px;
}

.contact-icon-box {
  width: 28px;
  height: 28px;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.v4-op1-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 65%; /* Menguasai 65% area kiri tempat teks berada */
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.9) 60%,
    rgba(15, 23, 42, 0) 100%
  );
  /* Potongan miring dari atas kanan ke kiri bawah */
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
  z-index: 2;
  pointer-events: none;
}

/* --- WAJIB ADA: Base Layering agar Teks Tetap di Depan --- */
.v4-op1-section {
  position: relative;
  /* overflow: hidden; */
  z-index: 1;
}
.v4-op1-overlay {
  z-index: 2;
}
.v4-op1-cta-pad {
  position: relative;
  z-index: 4; /* Menaikkan konten teks di atas semua ornamen */
}
.v4-op1-section {
  background: var(--base-color);
  color: #ffffff;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
}

.v4-op1-cta-pad {
  padding: 80px 20px;
  position: relative;
  z-index: 2;
}

/* Overlay untuk memastikan teks tetap terbaca jika gambar background terlalu terang */
.v4-op1-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 26, 26, 0.75);
  /* Sesuaikan tingkat kegelapan di sini */
  z-index: 1;
}

.v4-op1-title {
  font-size: 36px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #ffffff;
}

.v4-op1-desc {
  font-size: 16px;
  color: #e5e5e5;
  /* Ditingkatkan dari #a3a3a3 agar lebih kontras di atas background */
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 700px;
}

.v4-op1-btn {
  background: #ffffff;
  color: var(--base-color) !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 32px;
  border-radius: 0px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.v4-op1-btn:hover {
  background: #a3a3a3;
  color: var(--base-color) !important;
}

/* 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-orange-v6 .link-pill {
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 14px;
  border-radius: 20px;
  color: #ffffff;
  transition: all 0.3s ease;
}

.footer-orange-v6 .link-pill:hover {
  background: #ffffff;
  color: #dd6b20 !important;
}

/* Style Kontak dari Opsi 1 */
.footer-orange-v6 .icon-box-v1 {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.footer-orange-v6 .contact-item-v1:hover .icon-box-v1 {
  background: #ffffff;
  color: #dd6b20;
  transform: translateY(-2px);
}

.footer-orange-v6 .nav-link-v6 {
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.2s ease;
}

.footer-orange-v6 .nav-link-v6:hover {
  color: #ffffff !important;
  padding-left: 4px;
}
/* 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: var(--second-color);
  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: 100vh !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) {
  .hero-title {
    font-size: 32px;
  }

  .hero-desc {
    font-size: 15px;
  }

  .btn-hero {
    padding: 6px 12px;
    font-size: 12px;
  }

  .btn-hero i {
    font-size: 12px;
  }

  .overlay-adventure-left {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.9)
    );
  }
}

/* Pastikan content memenuhi layar agar bisa centering */
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Wajib 100% untuk align-items-center */
  z-index: 5;
}

.content-box {
  /* Mencegah teks terlalu mepet ke atas/bawah pada mobile */
  padding-top: 20px;
  padding-bottom: 20px;
}

.border-primary-custom {
  border-color: #256eb5 !important;
  /* Gunakan palet biru Anda */
}

/* Overlay agar gambar tidak menutupi teks */
.overlay-adventure-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
  z-index: 2;
}

/* Animasi Slide dari Kiri */
.animate-item {
  opacity: 0;
  transform: translateX(-40px);
  /* Efek muncul dari arah kiri */
  transition: all 0.8s ease-out;
}

.swiper-slide-active .animate-item {
  opacity: 1;
  transform: translateX(0);
}

/* Slider Gambar  */

/* Btn Slider  */
.btn-slider-1 {
  background-color: transparent;
  color: white;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid white;
}

.btn-slider-1:hover {
  background-color: var(--base-color);
  color: white;
}

.btn-slider-2 {
  background-color: var(--base-color);
  color: white;
  padding: 10px;
  border: 2px solid white;
  border-radius: 8px;
}

.btn-slider-2:hover {
  background-color: transparent;
  color: white;
}

/* btn Slider  */

/* btn custom  */
/* Styling Utama Tombol */
.btn-contact-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--base-color);
  color: #ffffff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 50px;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 3px var(--base-color);
  margin: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 170px;
  height: 40px;
}

/* Styling Teks */
.btn-contact-wa span {
  font-size: 12px; /* Ukuran font diperkecil */
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Styling Ikon WhatsApp */
.btn-contact-wa i {
  font-size: 16px; /* Ukuran ikon diperkecil */
  color: #ffffff;
  transition: all 0.3s ease;
}

/* --- BAGIAN ANIMASI --- */

/* Hover (Mengambang ringan) */
.btn-contact-wa:hover {
  transform: translateY(-2px) scale(1.02);
  /* Shadow luar disesuaikan dengan ukuran border baru */
  box-shadow:
    0 0 0 3px #fff,
    0 6px 12px rgba(130, 75, 154, 0.35);
}

/* Active (Saat diklik) */
.btn-contact-wa:active {
  transform: scale(0.95);
  box-shadow:
    0 0 0 3px #824b9a,
    0 3px 6px rgba(130, 75, 154, 0.25);
}

/* Animasi untuk ikon bergoyang */
@keyframes wiggle-icon {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-12deg);
  }
  50% {
    transform: rotate(12deg);
  }
  75% {
    transform: rotate(-12deg);
  }
}

/* Menerapkan animasi goyang pada ikon HANYA saat tombol di-hover */
.btn-contact-wa:hover i {
  animation: wiggle-icon 0.6s ease-in-out infinite;
}

/* btn custom  */

/* Btn Custom 1  */
.btn-custom-1 {
  background-color: transparent;
  padding: 6px 20px;
  color: var(--base-color);
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid var(--base-color);
  font-size: 18px;
}

.btn-custom-1:hover {
  background-color: var(--base-color);
  padding: 6px 20px;
  color: white;
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid var(--base-color);
  font-size: 18px;
}
/* Btn Custom 1 */

/* Btn Custom 2  */
.btn-custom-2 {
  background-color: var(--base-color);
  padding: 6px 10px;
  color: white;
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid var(--base-color);
  font-size: 18px;
}

.btn-custom-2:hover {
  background-color: transparent;
  padding: 6px 10px;
  color: var(--base-color);
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid var(--base-color);
  font-size: 18px;
}

/* Btn Custom 2 */

/* Card Testimoni  */

/* CARD */
/* SECTION BACKGROUND */
.title-style-5 {
  max-width: 700px;
}

.title-style-5 h2 {
  font-size: 38px;
  font-weight: 700;
}

.title-style-5 p {
  color: #666;
  margin-top: 10px;
}
.testi-section {
  background: #f7f7f7;
  position: relative;
}

.title-badge-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.title-badge-text {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(90deg, var(--base-color), var(--second-color));
  border-radius: 50px;
  line-height: 1;
  white-space: nowrap;
}

.title-badge-line-right {
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, var(--second-color));
  display: block;
}

/* title nama web  */

/* teks */
.section-title-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c89116;
  margin: 0;
}

.line-top {
  width: 2px;
  height: 25px;
  background: #e91e63;
  margin: 0 auto 10px;
}

/* CARD */
.testimonial-card {
  background: #fff;
  padding: 40px 50px;
  border-radius: 6px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* STYLE OPSI 6 */
.btn-project-lainnya {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
  text-uppercase: uppercase;
  letter-spacing: 1.5px;
  position: relative;
  transition: color 0.3s ease;
}

.btn-project-lainnya::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  background: #0f172a;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-project-lainnya:hover {
  color: var(--base-color);
}

.btn-project-lainnya:hover::after {
  background: var(--base-color);
  transform: translateX(-50%) scaleX(1);
}

/* 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: var(--base-color);
  }
}

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

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

.gslide-description.description-bottom {
  display: none;
}
.zoomable {
  max-width: 80% !important;
}

/* galeri baru  */
/* CSS Marquee Infinite */
.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 15px 0;
}
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #f8fafc, transparent);
}
.marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #f8fafc, transparent);
}
.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
}
.marquee-track-left {
  animation: marqueeLeft 30s linear infinite;
}
.marquee-track-right {
  animation: marqueeRight 30s linear infinite;
}
.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

/* Animasi Hover Item Kartu Galeri */
.marquee-item {
  width: 300px;
  height: 200px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: #1e293b;
}
.marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
.marquee-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
  z-index: 3;
}
.marquee-item:hover img {
  transform: scale(1.1);
  opacity: 0.85;
}

/* Overlay Caption & Icon Zoom saat Hover */
.marquee-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.85), transparent 70%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.marquee-item:hover .marquee-item-overlay {
  opacity: 1;
}
.marquee-item-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  white-space: normal;
  word-break: break-word;
  transform: translateY(10px);
  transition: transform 0.3s ease;
}
.marquee-item:hover .marquee-item-title {
  transform: translateY(0);
}
.zoom-icon-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.6);
  transition: transform 0.3s ease;
}
.marquee-item:hover .zoom-icon-badge {
  transform: scale(1);
}

@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes marqueeRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Lightbox Styles */
.galeri-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.galeri-lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.galeri-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  text-align: center;
}
.galeri-lightbox-content img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}
.galeri-lightbox-caption {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin-top: 15px;
}
.galeri-lightbox-close {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #ffffff;
  font-size: 32px;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}
.galeri-lightbox-close:hover {
  color: #fd6b01;
  transform: scale(1.15);
}
/* galeri baru  */

/* Card Keunggulan  */
/* Helper Base */
.pointer-events-none {
  pointer-events: none !important;
}

.section-ornament-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

/* Grid Latar Belakang */
.ornament-tech-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 110, 253, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(13, 110, 253, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Aksen Sudut Left & Right */
.ornament-corner-accent-left {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  border-top: 2px solid rgba(13, 110, 253, 0.18);
  border-left: 2px solid rgba(13, 110, 253, 0.18);
  z-index: 2;
}

.ornament-corner-accent-right {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  border-bottom: 2px solid rgba(13, 110, 253, 0.18);
  border-right: 2px solid rgba(13, 110, 253, 0.18);
  z-index: 2;
}

/* ==========================================================================
GRADASI MEMUDAR KE PUTIH (TOP & BOTTOM FADE)
========================================================================== */
.ornament-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 3;
}

.ornament-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 3;
}
/* Styling Utama Card */
/* =======================================
   SPLIT CARD & HEADER BASE STYLES
======================================= */
.split-card {
  border: 1px solid #fee2e2;
  border-radius: 20px;
  overflow: visible !important;
  background-color: #ffffff;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.03);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* Header Card Melengkung */
.split-header {
  height: 80px;
  background: #fff5f5;
  border-top-left-radius: 19px;
  border-top-right-radius: 19px;
  border-bottom-left-radius: 50% 20px;
  border-bottom-right-radius: 50% 20px;
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

/* SVG Watermark Teks Melengkung */
.header-watermark-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.header-watermark-text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  fill: rgba(220, 38, 38, 0.1);
  transition: fill 0.3s ease;
}

/* =======================================
   DEFAULT STATE: SOLID COLOR
======================================= */

/* Lingkaran Ikon Default (Merah Solid) */
.split-header .icon-wrapper {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  background-color: #dc2626; /* Merah Solid */
  border: 3px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
  z-index: 10;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* Gambar Ikon Default (Menjadi Putih) */
.split-header .icon-wrapper img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Agar gambar ikon menjadi putih bersih */
  transition: filter 0.3s ease;
}

/* Spasi Atas Body */
.split-body {
  padding-top: 42px !important;
}

/* =======================================
   HOVER STATE: SOFT COLOR
======================================= */

.split-card:hover {
  transform: translateY(-4px);
  border-color: #fca5a5;
  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.12);
}

.split-card:hover .split-header {
  background-color: #ffeef0;
}

/* Teks melengkung sedikit lebih jelas saat hover */
.split-card:hover .header-watermark-text {
  fill: rgba(220, 38, 38, 0.22);
}

/* Hover Lingkaran Ikon (Merah Soft / Krim) */
.split-card:hover .icon-wrapper {
  background-color: #ffebe0 !important; /* Warna Soft */
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.15);
  transform: translateX(-50%) scale(1.08);
}

/* Hover Gambar Ikon (Kembali ke Warna Asli) */
.split-card:hover .icon-wrapper img {
  filter: none; /* Kembali ke warna asli ikon */
}
/* CARD Keunggulan */

/* btn navbar  */
.btn-wa-split {
  display: inline-flex;
  align-items: center;
  background: var(--base-color);
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  padding: 4px;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-wa-split .icon-box {
  width: 32px;
  height: 32px;
  background: #032c6e;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.4s ease;
}

.btn-wa-split .text-box {
  padding: 0 14px 0 10px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  transition: color 0.3s ease;
}

.btn-wa-split:hover {
  background: var(--second-color);
  border-color: #25d366;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}

.btn-wa-split:hover .icon-box {
  background: #ffffff;
  color: #25d366;
  transform: rotate(360deg);
}

.btn-wa-split:hover .text-box {
  color: #ffffff;
}
/* btn navbar  */

/* ornamen rental  */
.ornamen-rental {
  position: absolute;
  /* bottom: 0; */
  /* left: 0; */
  width: 100%;
  /* max-height: 220px; */
  object-fit: contain;
  object-position: bottom left;
  z-index: 1;
  pointer-events: none;
  left: -10px;
  bottom: -20px;
}
/* ornamen-rental  */

/* ==================== 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 25px; /* 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: 0;
}
.ly-kg-opt1 .nav-next-1 {
  right: 0;
}

.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: auto; /* 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: var(--second-color);
  font-weight: 500;
}

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

.tour-title-5 span {
  color: #1b4332;
}

.btn-tour-5 {
  background-color: var(--base-color);
  color: #fff;
  transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-tour-5:hover {
  background-color: darkblue;
  color: #fff;
}

.btn-outline-tour-5 {
  border: 1.5px solid var(--base-color);
  color: var(--base-color);
  background: transparent;
  transition: all 0.3s ease;
}

.btn-outline-tour-5:hover {
  background-color: #eff7f4;
  color: #1b4332;
}

.card-overlay-section {
  position: relative;
  padding: 80px 0;
}

.bg-image-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  z-index: 1;
}

.bg-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px 0 0 16px;
}

.floating-card {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  padding: 40px;
}

@media (max-width: 991px) {
  .bg-image-container {
    width: 100%;
    height: 300px;
    position: relative;
    border-radius: 16px;
    margin-bottom: 20px;
  }

  .bg-image-container img {
    border-radius: 16px;
  }

  .card-overlay-section {
    padding: 40px 0;
  }

  .floating-card {
    padding: 30px 20px;
  }
}
/* 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: 0px;
  opacity: 0.2;
  /* Animasi floating */
  animation: floatUpDown 4s ease-in-out infinite;
  pointer-events: none; /* Mencegah ornamen mengganggu klik elemen di bawahnya */
}

@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px); /* Jarak bergerak ke atas */
  }
  100% {
    transform: translateY(0);
  }
}

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

.card-bg-rental::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background-image: radial-gradient(rgba(0, 160, 233, 0.35) 1px, transparent 1px);
  background-size: 10px 10px;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
  pointer-events: none;
}

.bg-ornamen-rental {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Blueprint Line Matrix */
.bg-ornamen-rental::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 160, 233, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 160, 233, 0.08) 1px, transparent 1px),
    linear-gradient(to right, rgba(212, 175, 55, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212, 175, 55, 0.12) 1px, transparent 1px);
  background-size:
    20px 20px,
    20px 20px,
    100px 100px,
    100px 100px;
  mask-image: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 0) 85%
  );
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 0) 85%
  );
  z-index: -1;
  pointer-events: none;
}

/* Linear Top Border Glow */
.bg-ornamen-rental::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.5),
    rgba(0, 160, 233, 0.5),
    transparent
  );
  z-index: -1;
  pointer-events: none;
}
.ornamen-card-rental {
  position: absolute;
  content: "";
  bottom: -20px;
  width: 100% !important;
  left: 0;
  height: 100px !important;
}

/* card wisata detail  */
/* ===== SIDEBAR STICKY ===== */

.ckeditor-html-wrapper table {
  width: 100% !important;
  margin: 15px 0;
  border-collapse: collapse;
  border: 1px solid #eef2f5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  overflow: hidden;
}

.ckeditor-html-wrapper th {
  background-color: rgba(25, 135, 84, 0.1) !important;
  color: #198754 !important;
  font-weight: bold;
  padding: 12px;
  border: 1px solid #dee2e6;
  text-align: center;
}

.ckeditor-html-wrapper td {
  padding: 12px;
  border: 1px solid #efefef;
  text-align: center;
  color: #6c757d;
}

.ckeditor-html-wrapper tr:hover {
  background-color: #f8fafc;
}

@media (max-width: 768px) {
  .ckeditor-html-wrapper table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.sidebar-sticky {
  position: sticky;
  top: 100px;
}

/* card step pemesanan */
.bg-ornamen-step {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Grid Fokus Tengah */
.bg-ornamen-step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background-image:
    radial-gradient(rgba(0, 160, 233, 0.15) 1px, transparent 1px),
    radial-gradient(rgba(212, 175, 55, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position:
    0 0,
    12px 12px;
  mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 0) 70%
  );
  -webkit-mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: -1;
  pointer-events: none;
}

/* Ambient Radial Glow */
.bg-ornamen-step::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 175, 55, 0.08) 0%,
    rgba(0, 160, 233, 0.05) 50%,
    transparent 75%
  );
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

/* Reset & Custom Variables */
:root {
  --step-primary: #0d6efd;
  --step-secondary: #0a58ca;
  --step-bg: #ffffff;
}

.step-node-section {
  position: relative;
  overflow: hidden;
}

.step-node-wrapper {
  position: relative;
}

/* ==========================================
   DESKTOP STYLES (NO CHANGE)
   ========================================== */
@media (min-width: 992px) {
  .step-node-row {
    position: relative;
  }

  /* Garis menyambung dari item 1 ke 2 */
  .step-node-box:nth-child(1)::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
      100deg,
      var(--step-primary) 0,
      var(--step-primary) 8px,
      transparent 8px,
      transparent 16px
    );
    z-index: 1;
    transform: rotate(13deg);
    transform-origin: left center;
    pointer-events: none;
    opacity: 0.5;
  }

  /* Garis menyambung dari item 2 ke 3 */
  .step-node-box:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 45px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
      80deg,
      var(--step-primary) 0,
      var(--step-primary) 8px,
      transparent 8px,
      transparent 16px
    );
    z-index: 1;
    transform: rotate(-13deg);
    transform-origin: left center;
    pointer-events: none;
    opacity: 0.5;
  }

  /* Garis menyambung dari item 3 ke 4 */
  .step-node-box:nth-child(3)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
      100deg,
      var(--step-primary) 0,
      var(--step-primary) 8px,
      transparent 8px,
      transparent 16px
    );
    z-index: 1;
    transform: rotate(12deg);
    transform-origin: left center;
    pointer-events: none;
    opacity: 0.5;
  }

  /* Layout Naik-Turun Selang-Seling (Desktop Only) */
  .step-node-box:nth-child(odd) {
    transform: translateY(-28px);
  }

  .step-node-box:nth-child(even) {
    transform: translateY(28px);
  }

  /* Hover Desktop */
  .step-node-box:nth-child(odd):hover {
    transform: translateY(-36px);
  }

  .step-node-box:nth-child(even):hover {
    transform: translateY(20px);
  }
}

/* ==========================================
   MOBILE STYLES (RATA KIRI & ICON DI KIRI)
   ========================================== */
@media (max-width: 991.98px) {
  .step-node-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .step-node-box {
    display: flex !important;
    align-items: flex-start;
    text-align: left !important;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 100%;
    position: relative;
  }

  /* Lingkaran Icon di Kiri */
  .step-node-circle {
    margin: 0 16px 0 0 !important;
    flex-shrink: 0;
    width: 65px;
    height: 65px;
  }

  .step-node-circle img {
    max-height: 48px;
  }

  /* Garis Penghubung Vertikal Lurus di Kiri (Menghubungkan antar lingkaran) */
  .step-node-box:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 65px; /* Tepat di bawah lingkaran icon */
    left: 50px; /* Tepat di titik tengah lingkaran icon */
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(
      180deg,
      var(--step-primary) 0,
      var(--step-primary) 6px,
      transparent 6px,
      transparent 12px
    );
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
  }

  .step-node-box:last-child {
    margin-bottom: 0;
  }

  .step-node-box:hover {
    transform: translateX(5px);
  }

  /* Penyesuaian kontainer teks mobile */
  .step-node-box > .px-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-grow: 1;
  }
}

/* ==========================================
   COMMON STYLES
   ========================================== */
/* Container Item Step */
.step-node-box {
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Lingkaran Icon */
.step-node-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--step-bg);
  border: 3px solid var(--step-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.12);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Ornamen Background Glow */
.step-node-circle::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: rgba(13, 110, 253, 0.1);
  z-index: -1;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s ease;
}

/* Fitur Gambar / Icon */
.step-node-circle img {
  max-height: 65px;
  width: auto;
  object-fit: contain;
  transition:
    transform 0.4s ease,
    filter 0.3s ease;
}

/* Badge Nomor Urut */
.step-node-number {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  background: linear-gradient(
    135deg,
    var(--step-primary),
    var(--step-secondary)
  );
  color: #ffffff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 3;
  transition: transform 0.3s ease;
}

/* Style Teks Judul */
.step-node-title {
  transition: color 0.3s ease;
}

/* Hover Global */
.step-node-box:hover .step-node-circle {
  background: var(--step-primary);
  border-color: var(--step-primary);
  box-shadow: 0 12px 25px rgba(13, 110, 253, 0.3);
}

.step-node-box:hover .step-node-circle::before {
  opacity: 1;
  transform: scale(1.15);
}

.step-node-box:hover .step-node-circle img {
  transform: scale(1.1);
  filter: brightness(0) invert(1);
}

.step-node-box:hover .step-node-number {
  transform: scale(1.15);
  background: #ffffff;
  color: var(--step-primary);
  border-color: var(--step-primary);
}

.step-node-box:hover .step-node-title {
  color: var(--step-primary) !important;
}
/* card step pemesanan  */

/* ===== CARD PAKET LAIN ===== */
.card-paket-lain {
  display: block;
  margin-bottom: 20px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

/* IMAGE WRAPPER */
.card-paket-img {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* IMAGE */
.card-paket-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

/* OVERLAY */
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

/* Card Testimoni  */

.section-testimoni {
  margin-bottom: -150px;
}
.title-testimoni {
  margin-top: -150px;
}
/* ===== TESTIMONI MODERN ===== */

/* Card Testimoni  */
.swiper-testimoni {
  padding-bottom: 50px !important;
}

.bubble-card {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 25px;
  position: relative;
  margin-bottom: 25px;
}

.bubble-card::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 40px;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f8f9fa transparent transparent transparent;
}

.avatar-bubble {
  width: 55px;
  height: 55px;
  object-fit: cover;
}
/* Card testimoni  */

/* TITLE */
.card-title {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  z-index: 2;
}

/* HOVER EFFECT */
.card-paket-lain:hover .card-overlay {
  background: linear-gradient(
    to top,
    rgba(21, 105, 180, 0.85) 0%,
    rgba(21, 105, 180, 0.5) 50%,
    rgba(21, 105, 180, 0.1) 100%
  );
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .sidebar-sticky {
    position: relative;
    top: auto;
  }
}

.title-border {
  position: relative;
  /* display: inline-block; */
  padding-bottom: 10px;
}

.title-border::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: var(--third-color); /* kuning */
  border-radius: 4px;
}

/* ===== CARD SIDEBAR BOX ===== */
.card-sidebar {
  background: #ffffff;
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Card wisata detail  */

/* ===== CONTACT PREMIUM SECTION ===== */
/* ===== CONTACT V2 ===== */
/* ===== CONTACT V5 (NO IMAGE CLEAN UI) ===== */

.contact-modern-v5 {
  background: #f8fafc;
}

/* TITLE */

.contact-title-v5 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #0b1c2d;
}

.contact-desc-v5 {
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
}

/* CONTACT GRID */

.contact-box-wrapper-v5 {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* CARD */

.contact-box-v5 {
  width: 260px;

  background: #fff;
  padding: 30px;

  border-radius: 16px;
  text-align: center;

  text-decoration: none;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  transition: 0.35s;
}

.contact-box-v5:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* ICON */

.icon-v5 {
  width: 60px;
  height: 60px;

  margin: 0 auto 15px;

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

  border-radius: 50%;

  font-size: 22px;
  color: #fff;
}

.icon-v5.whatsapp {
  background: #25d366;
}

.icon-v5.phone {
  background: #0b1c2d;
}

/* TEXT */

.contact-box-v5 h4 {
  font-size: 16px;
  margin-bottom: 5px;
  color: #0b1c2d;
}

.contact-box-v5 p {
  font-weight: 600;
  margin: 0;
  color: #333;
}

/* ADDRESS */

.address-box-v5 {
  background: #fff;
  padding: 25px;
  border-radius: 14px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.address-box-v5 h4 {
  margin-bottom: 8px;
}

.address-box-v5 p {
  color: #666;
  margin: 0;
}

/* SOCIAL */

.social-v5 a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef3ff;
  margin: 0 5px;
  color: var(--base-color);
  transition: 0.3s;
}

.social-v5 a:hover {
  background: var(--base-color);
  color: #fff;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .contact-title-v5 {
    font-size: 26px;
  }
}

/* card wisata  */

/* Slider Card Wisata  */
/* WRAPPER */
.slider-wrapper {
  overflow: hidden;
  position: relative;
}

/* TRACK */
.slider-track {
  display: flex;
  gap: 16px;
  transition: transform 0.4s ease;
}

/* ITEM */
.slider-track > div {
  min-width: 25%;
}

/* BUTTON */
.slider-btn {
  border: none;
  background: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin-left: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.slider-btn:hover {
  background: #f1f1f1;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .slider-track > div {
    min-width: 50%;
  }
}

@media (max-width: 576px) {
  .slider-track > div {
    min-width: 80%;
  }
}

/* Slider Card wisata  */

/* Card Wisata  */
.tour-card {
  background: #fff;
  border-radius: 1.2rem;
  /* overflow: hidden tetap penting untuk image zoom */
  overflow: hidden;
  transition: 0.4s;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.tour-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.tour-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

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

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

.badge-kategori {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #469773;
  color: #fff;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 12px;
  z-index: 2;
}

.tour-content {
  padding: 16px;
  /* Memberikan ruang antar konten agar rapi */
}

.tour-content h3 {
  font-size: 16px; /* Disamakan dengan class di HTML */
  font-weight: 700;
  margin-bottom: 8px;
  /* Limit judul maksimal 2 baris agar tetap rapi (opsional) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price {
  font-size: 14px;
  margin-bottom: 6px;
}

.price strong {
  color: #469773;
}

.rating {
  color: gold;
  font-size: 14px;
  margin-bottom: 15px; /* Sedikit ditambah agar tidak terlalu mepet tombol */
}

.tour-action {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Agar teks Detail dan Button sejajar horizontal */
}

.btn-detail {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 14px;
}

.btn-book {
  background: #469773;
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.btn-book:hover {
  background: #367c5e;
  box-shadow: 0 4px 12px rgba(70, 151, 115, 0.3);
}
/* card wisata  */

/* Card Paket Wisata  */
/* ===== CARD WISATA ===== */

.line-kategori {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: #2c3e50; /* warna teks kategori, sesuaikan */
  position: relative;
  padding-left: 12px; /* ruang untuk garis */
  margin-bottom: 8px;
}

.line-kategori::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; /* ketebalan garis */
  height: 16px; /* panjang garis */
  background-color: #e67e22; /* warna garis, sesuaikan */
  border-radius: 2px; /* opsional, buat ujung garis agak membulat */
}

.unit-box {
  background: #f9f9f9;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px;
}

.unit-header {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: #5b6475;
  padding: 12px 10px;
  background: #fafafa;
}

.unit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.unit-item {
  padding: 12px 14px;
  border-top: 1px solid #e3e3e3;
}

.unit-item:nth-child(odd) {
  border-right: 1px solid #e3e3e3;
}

.unit-nama {
  font-size: 12px;
  color: #5b6475;
  margin-bottom: 4px;
  line-height: 1.4;
}

.unit-harga {
  font-size: 12px;
  font-weight: 700;
  color: #d09316;
  line-height: 1.4;
}

.facility-wrapper {
  background: #fbfcfe;
  padding: 12px;
  border-radius: 12px;
  /* height: 100%; */
  border: 1px solid #f0f2f5;
}

.label-badge {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.list-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tag Style */
.item-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Warna Khusus Include */
.item-tag.include {
  color: #2d3436;
}
.item-tag.include i {
  color: #28a745; /* Hijau */
  margin-top: 3px;
}

/* Warna Khusus Exclude */
.item-tag.exclude {
  color: #636e72;
}
.item-tag.exclude i {
  color: var(--base-color); /* 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: var(--second-color);
  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: var(--base-color);
  top: 10%;
}

.section-custom::before {
  left: 0;
}

.section-custom::after {
  right: 0;
}

/* badge */
.badge-title {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--base-color);
  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: var(--base-color);
  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  */
.btn-cta-blue {
  background-color: var(--base-color);
  transition: all 0.25s ease;
}

.btn-cta-blue:hover {
  background-color: var(--base-color);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 69, 175, 0.25);
}
/* 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  */
/* Style Opsi 1 - Floating Overlap */
.card-overlap-wrapper {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.card-overlap-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 30px rgba(15, 23, 42, 0.1) !important;
}

.art-img-overlap {
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease;
}

.card-overlap-wrapper:hover .art-img-overlap img {
  transform: scale(1.08);
}

.art-img-overlap img {
  transition: transform 0.5s ease;
}

.overlap-navy-footer {
  background: var(--base-color); /* Navy Solid */
  border-radius: 6px;
  padding: 10px 14px;
  color: #cbd5e1;
  font-size: 11px;
  margin-top: 15px;
}

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

/* galeri  */
.gallery-card {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

/* Animasi Zoom Gambar pada Grid */
.gallery-card img {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

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

/* Efek Gradasi Grid saat Hover */
.gallery-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.2) 60%,
    transparent 100%
  );
  transition: background 0.4s ease;
}

.gallery-card:hover .gallery-overlay {
  background: linear-gradient(
    to top,
    rgb(54 82 192 / 90%) 0%,
    rgba(0, 0, 0, 0.4) 70%,
    transparent 100%
  );
}

/* FIX TOTAL LIGHTBOX: Tanpa Scroll, Tombol Close Terkunci */
#galleryModal {
  padding-right: 0 !important;
}

#galleryModal .modal-dialog {
  max-width: 100% !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

#galleryModal .modal-content {
  height: 100vh !important;
  width: 100vw !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#galleryModal .modal-body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pastikan gambar pas di layar (Maksimal 75% tinggi layar agar teks muat) */
.lightbox-img-wrapper {
  max-width: 90%;
  max-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img-wrapper img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
}

/* Hilangkan semua outline/garis biru bawaan browser */
#galleryModal,
#modalGalleryCarousel,
.carousel-item,
.carousel-control-prev,
.carousel-control-next {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* TOMBOL CLOSE KUSTOM: Dijamin Kelihatan & Berfungsi Maksimal */
.btn-custom-close {
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 9999 !important;
  /* Di lapisan paling atas */
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-custom-close:hover {
  background: rgba(255, 255, 255, 0.4);
  border-color: #ffffff;
  transform: scale(1.05);
}
/* galeri  */

/* =========================
   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: var(--base-color);
}
.harga-asli {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.badge-diskon {
  background: var(--base-color);
  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  */
.keunggulan-4 {
  position: relative;
  padding: 24px 12px;
  text-align: center;
  height: 100%;
  transition: transform 0.3s ease;
}

/* Pemisah Garis Vertikal Tipis */
.keunggulan-4::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 0;
  width: 1px;
  height: 60%;
  background: linear-gradient(180deg, transparent, #e2e8f0, transparent);
}

/* Hapus garis vertikal pada kolom paling akhir di layar Desktop */
@media (min-width: 992px) {
  .col-lg-2:last-child .keunggulan-4::after {
    display: none;
  }
}

.keunggulan-4:hover {
  transform: translateY(-6px);
}

/* Container Icon / Gambar */
.keunggulan-4 .icon-bg {
  width: 65px;
  height: 65px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7ed, #fffbeb);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Background Animation saat Hover */
.keunggulan-4 .icon-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fd6b01, #f97316);
  transition: left 0.4s ease;
  z-index: -1;
}

.keunggulan-4:hover .icon-bg::before {
  left: 0;
}

/* Sizing & Filter Putih pada Gambar saat Hover */
.keunggulan-4 .icon-bg picture,
.keunggulan-4 .icon-bg img {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  object-fit: contain;
  transition:
    filter 0.3s ease,
    transform 0.3s ease;
}

/* Filter Efek Putih Bersih saat Hover */
.keunggulan-4:hover .icon-bg img {
  filter: brightness(0) invert(1);
  transform: scale(1.05);
}

/* Typography */
.keunggulan-4 .title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  line-height: 1.3;
}

.keunggulan-4 .desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Penyesuaian Mobile & Tablet */
@media (max-width: 991px) {
  .keunggulan-4::after {
    display: none;
  }

  .keunggulan-4 {
    padding: 16px 8px;
  }
}
/* card keunggulan  */

/* layanan  */
/* =======================================
   STICKY MANAGEMENT (DESKTOP ONLY)
   ======================================= */
@media (min-width: 992px) {
  .sticky-column {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    z-index: 10;
  }
}

/* =======================================
   KIRI: OPSI B (2 GAMBAR VERTIKAL SPLIT)
   ======================================= */
.collage-2img-wrapper {
  width: 100%;
  height: 440px;
}

.collage-2img-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  height: 100%;
}

.split-col-left {
  border-radius: 12px;
  overflow: hidden;
  height: 90%;
  align-self: flex-start;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.split-col-right {
  border-radius: 12px;
  overflow: hidden;
  height: 90%;
  align-self: flex-end;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.collage-2img-split img {
  transition: transform 0.5s ease;
}

.collage-2img-split div:hover img {
  transform: scale(1.08);
}

/* =======================================
   KANAN: FOREACH NEUMORPHIC ACCENT CARDS
   ======================================= */
.accent-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.accent-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  background-color: var(--base-color);
  border-radius: 0 4px 4px 0;
  transition: height 0.3s ease;
}

.accent-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.04);
  border-color: rgba(13, 110, 253, 0.15);
}

.accent-card:hover::before {
  height: 60%;
}

.round-avatar {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.accent-card:hover .round-avatar {
  background: var(--base-color);
}

.accent-card:hover .round-avatar img {
  filter: brightness(0) invert(1);
}
/* layanan  */

/* Galeri Minimalis */
.gal-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.galeri-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1/1;
}

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

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

.galeri-item:hover img {
  transform: scale(1.1);
}

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

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

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

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

/* galeeri Detail  */

.btn-berlangganan {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, #c89b3c, #e3b54b);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-berlangganan:hover {
  background: linear-gradient(135deg, #000, #c89b3c);
  color: #fff;
  transform: translateY(-2px);
}

/* Card Paket Wisata  */

/* produk detail  */
/* OPSI 1: SHIMMER LIGHT SWEEP */
.btn-shimmer-wa {
  position: relative;
  background-color: #25d366;
  color: #ffffff;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.btn-shimmer-wa::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(30deg);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  animation: shimmer-sweep 3s infinite;
}

.btn-shimmer-wa:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(37, 211, 102, 0.35);
  background-color: red;
}

@keyframes shimmer-sweep {
  0% {
    left: -60%;
  }

  30% {
    left: 140%;
  }

  100% {
    left: 140%;
  }
}

.btn-fill-phone {
  background-color: transparent;
  color: #212529;
  border: 2px solid #212529;
  transition: all 0.3s ease;
}

.btn-fill-phone:hover {
  background-color: #212529;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(33, 37, 41, 0.2);
}
/* produk detail  */

/* card produk  */
.ripple-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;
}

.ripple-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.ripple-img {
  position: relative;
  overflow: hidden;
  height: 200px;
}

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

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

.ripple-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
}

.ripple-card:hover .ripple-effect {
  width: 500px;
  height: 500px;
}

.ripple-info {
  padding: 15px;
}

.ripple-cat {
  font-size: 11px;
  color: var(--second-color);
  font-weight: 600;
  text-transform: uppercase;
}

.ripple-info h3 {
  font-size: 15px;
  /* margin: 6px 0 0; */
  margin-bottom: 0px !important;
  margin: 0px;
  padding: 0px;
  color: #333;
  font-weight: 700;
  line-height: 1.3;
}

.btn-underline-sweep {
  display: inline-block;
  padding: 10px 5px;
  color: #333;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  transition: all 0.3s ease;
  border-bottom: 2px solid #ccc;
}

.btn-underline-sweep::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--second-color);
  transition: width 0.4s ease;
}

.btn-underline-sweep:hover {
  color: var(--second-color);
}

.btn-underline-sweep:hover::after {
  width: 100%;
}
/* 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  */
.text-blue {
  color: var(--base-color);
}

.card-anim-3 {
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  border: 1px solid #e0f2fe;
}

.card-anim-3:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(2, 132, 199, 0.12);
  border-color: var(--base-color);
}

.ca3-img-wrap {
  /* height: 130px; */
  border-radius: 12px;
  background: #f8fafc;
}

.ca3-img {
  transition: transform 0.4s ease;
}

.card-anim-3:hover .ca3-img {
  transform: scale(1.06);
}

/* Animasi Judul Opsi 3 (Scale / Zoom) */
.ca3-title {
  transition:
    transform 0.3s ease,
    color 0.3s ease;
  transform-origin: center;
}

.card-anim-3:hover .ca3-title {
  transform: scale(1.04);
  color: var(--base-color) !important;
}

.ca3-btn {
  background: #ffe8e8;
  color: var(--base-color);
  border-radius: 10px;
  transition: 0.3s ease;
}

.card-anim-3:hover .ca3-btn {
  background: var(--base-color);
  color: #ffffff;
}
/* card unit rental  */

/* potensi desa  */

.transition-smooth {
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-white {
  background-color: #ffffff;
  color: #212529;
}

.btn-white:hover {
  background-color: #f8f9fa;
  color: #000000;
}

/* --- Penambahan Gradasi Gambar Baru --- */
.image-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* CSS OPSI 4: Minimalist Elegant Line (Slight Hover Shadow) */
.stack-line-card {
  position: relative;
  border-radius: 16px;
  padding: 16px;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  background-color: #ffffff; /* Warna dasar card jika overlay transparan */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s ease;
}

/* Base background layer */
.stack-line-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(45, 106, 79, 0.8), rgba(11, 26, 19, 0.85)),
    url("../Aset Desain/pakai/bg/11.webp") center/cover no-repeat;
  opacity: 0.1;
  z-index: -1;
  /* Animasi transisi khusus untuk property transform dan opacity background */
  transition:
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s ease;
}

/* KEADAAN HOVER */
.stack-line-card:hover {
  transform: translateY(-5px); /* Kartu sedikit terangkat */
  box-shadow: 0 12px 30px rgba(45, 106, 79, 0.15); /* Bayangan hijau lembut */
}

/* ==========================================================================
   CSS HOVER STATE EFFECT (MULUS & BERSAMAAN)
   ========================================================================== */

/* 1. Efek Transisi Dasar untuk Judul & Paragraf */
.stack-line-card .text-title,
.stack-line-card p {
  transition:
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 2. Saat Card di-hover: Judul (h4) otomatis berubah menjadi Putih Bersih */
.stack-line-card:hover .text-title {
  color: #ffffff !important;
}

/* 3. Saat Card di-hover: Paragraf (p) menjadi Putih dengan ketebalan tipis (0.7) */
.stack-line-card:hover p {
  color: #ffffff !important;
  opacity: 0.7 !important;
}

/* 4. Tambahan: Mengubah Tombol menjadi Putih saat Card di-hover agar estetik */
.stack-line-card:hover .btn-outline-dark {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1);
}

.stack-line-card:hover::before {
  opacity: 0.2; /* Latar belakang lebih jelas */
  transform: scale(
    1.12
  ); /* Efek gambar background membesar/zoom di dalam card */
}

/* Efek Hover opsional agar kartu terasa lebih hidup saat disentuh */
.stack-line-card:hover::before {
  opacity: 0.95; /* Overlay sedikit lebih jelas saat di-hover */
}

.stack-line-card .text-title {
  color: #212529;
}

.stack-line-card:hover {
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  /* Box shadow halus tanpa merusak jarak grid */
}

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

.stack-line-card:hover .text-title {
  color: var(--base-color);
}

.stack-line-card:hover .btn-outline-dark {
  background-color: var(--base-color);
  border-color: var(--base-color);
  color: #ffffff;
}

/* CSS Tambahan Opsi Lainnya Tetap Dipertahankan Dibawah Ini */
.overlay-reveal-card .overlay-mask {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
}

.overlay-reveal-card .dynamic-text,
.overlay-reveal-card .dynamic-button {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.3s ease,
    max-height 0.4s ease;
}

.overlay-reveal-card:hover .img-bg {
  transform: scale(1.08);
}

.overlay-reveal-card:hover .dynamic-text {
  opacity: 1;
  max-height: 60px;
}

.overlay-reveal-card:hover .dynamic-button {
  opacity: 1;
  max-height: 40px;
}

.overlay-glass-card .glass-box {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

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

.overlay-glass-card:hover .glass-box {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(45, 106, 79, 0.4);
}

.stack-solid-card {
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.stack-solid-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.stack-solid-card:hover .img-zoom {
  transform: scale(1.06);
}

.stack-solid-card .icon-shift {
  transition: transform 0.3s ease;
}

.stack-solid-card:hover .icon-shift {
  transform: translateX(4px);
}
/* potensi desa  */

/* Card Rental  */
/* Styling Tombol Filter */
.btn-filter {
  border: 1px solid #0d6efd;
  color: #0d6efd;
  background-color: #ffffff;
  padding: 6px 18px;
  font-weight: 500;
  font-size: 13px;
  border-radius: 50rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.btn-filter:hover,
.btn-filter.active {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

/* Handling Transisi Filter Tanpa Bug */
.filter-item {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  opacity: 1;
  transform: scale(1);
}

.filter-item.d-none-filter {
  display: none !important;
}

.filter-item.fade-out {
  opacity: 0;
  transform: scale(0.95);
}

/* Card Hover Effect */
.rental-card {
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease-in-out !important;
}

.rental-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

.rental-card .img-fluid {
  transition: transform 0.5s ease-in-out;
}

.rental-card:hover .img-fluid {
  transform: scale(1.05);
}

/* Header Judul - Style Flat / Line Divider (Tanpa Box Rounded) */
.title-card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 0 10px 0;
  position: relative;
}

.title-card h3 {
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

/* Animasi Line Underline */
.title-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #0d6efd, #00a0e9);
  transition:
    width 0.35s ease,
    left 0.35s ease;
  border-radius: 2px;
}

.badge-transmisi {
  transition: all 0.3s ease;
}

/* Hover State untuk Judul */
.rental-card:hover .title-card::after {
  width: 100%;
  left: 0;
}

.rental-card:hover .title-card h3 {
  color: #0d6efd !important;
  transform: translateY(-2px);
}

.rental-card:hover .title-card .badge-transmisi {
  background-color: rgba(13, 110, 253, 0.1) !important;
  color: #0d6efd !important;
  border-color: rgba(13, 110, 253, 0.3) !important;
}

/* Styling & Animasi Tombol Booking */
.btn-booking {
  background: linear-gradient(180deg, #00a2e8 0%, #0080d0 45%, #0056b3 100%) !important;
  color: #ffffff !important;
  border: 1px solid #00a2e8 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  border-width: 1px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.rental-card:hover .btn-booking {
  background: transparent !important;
  color: #0080d0 !important;
  border-color: #0080d0 !important;
  box-shadow: 0 4px 14px rgba(0, 128, 208, 0.25);
  transform: translateY(-2px);
}
.rental-card:hover .btn-booking i {
  animation: bounceWa 0.6s ease infinite alternate;
}

@keyframes bounceWa {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-3px);
  }
}
/* 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  */
.card-solid-3 {
  border: 2px solid #ff5722;
  border-radius: 14px;
  background: #ffffff;
}

.card-solid-3 table {
  width: 100%;
  font-size: 12px;
  text-align: center;
}

.card-solid-3 table th {
  background-color: #ff5722;
  color: #ffffff;
  padding: 6px;
}

.card-solid-3 table td {
  padding: 6px;
  border: 1px solid #ffd0c2;
}

.card-solid-3 ul {
  padding-left: 18px;
  font-size: 13px;
  margin-bottom: 0;
}

.btn-arrow-4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: transparent;
  color: var(--base-color);
  border: 2px solid var(--base-color);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-arrow-4 i {
  font-size: 11px;
  transition: transform 0.3s ease;
}

.btn-arrow-4:hover {
  background-color: var(--base-color);
  color: #ffffff;
  border-color: var(--base-color);
}

.btn-arrow-4:hover i {
  transform: rotate(-45deg) scale(1.1);
}

.feature-inline-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-inline-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.feature-inline-title {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0;
  line-height: 1.2;
}
/* 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: var(--base-color);
}

.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  */
.card-bubble-v2 {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px 20px 25px;
  text-align: center;
  cursor: pointer;
  position: relative;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Layer Ambient Gradient Full Card */
.card-bubble-v2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(231, 76, 60, 0.08) 0%,
    transparent 50%,
    rgba(231, 76, 60, 0.08) 100%
  );
  opacity: 0.6;
  transition: all 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.card-bubble-v2:hover::before {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(231, 76, 60, 0.15) 0%,
    transparent 40%,
    rgba(231, 76, 60, 0.15) 100%
  );
}

.bubble-icon-v2,
.bubble-title-v2,
.card-bubble-v2 > div {
  position: relative;
  z-index: 1;
}

.bubble-icon-v2 {
  width: 85px;
  height: 85px;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff5f5;
  border-radius: 50%;
  border: 3px solid var(--second-color);
  box-shadow: 0 5px 15px rgba(231, 76, 60, 0.15);
  transition: all 0.4s ease;
  flex-shrink: 0;
}

.card-bubble-v2:hover .bubble-icon-v2 {
  background: var(--second-color);
  border-color: #c0392b;
  box-shadow: 0 8px 20px rgba(231, 76, 60, 0.3);
  transform: scale(1.05);
}

.bubble-icon-v2 img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
}

.card-bubble-v2:hover .bubble-icon-v2 img {
  filter: brightness(0) invert(1);
  transform: scale(1.2);
}

.bubble-title-v2 {
  display: inline-block;
  padding: 4px 10px;
  background: white;
  border: 2px solid var(--second-color);
  border-radius: 25px;
  font-size: 14px;
  font-weight: 700;
  color: var(--second-color);
  margin-bottom: 15px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.card-bubble-v2:hover .bubble-title-v2 {
  background: var(--second-color);
  color: white;
}

.card-bubble-v2 p {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.5;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

/* CSS khusus untuk mengaktifkan horizontal slide di Mobile tanpa merusak Desktop */
@media (max-width: 991.98px) {
  .mobile-scroll-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth; /* Memastikan gerakan slide otomatis halus */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    scroll-padding-left: 0.75rem;
  }

  .mobile-scroll-row > [class*="col-"] {
    flex: 0 0 82% !important; /* Card berikutnya mengintip */
    max-width: 82% !important;
    scroll-snap-align: start;
  }

  /* Sembunyikan scrollbar */
  .mobile-scroll-row::-webkit-scrollbar {
    display: none;
  }
  .mobile-scroll-row {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
/* 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  */
.section-hero-banner {
  background-color: var(--base-color);
  border-radius: 30px 30px 30px 30px;
  /* Sudut melengkung besar */
  padding: 35px 30px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  margin-top: 35px;
  /* Menyesuaikan alignment dengan gambar overlap di kanan */
}

/* Badge Pill di Atas Judul */
.badge-pill-group {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  padding: 4px 6px;
  border-radius: 50px;
  width: fit-content;
}

.badge-pill-active {
  background-color: #ffffff;
  color: var(--base-color);
  font-weight: 700;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 50px;
}

.badge-pill-text {
  color: #ffffff;
  font-size: 12px;
  padding: 0 10px;
  font-weight: 600;
}

/* Rental Card di Kanan */
.rental-card-hero {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-bottom: 4px solid var(--base-color);
  border-radius: 16px;
  padding: 16px 12px 14px 12px;
  margin-top: 35px;
  /* Space untuk gambar overlap */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.rental-card-hero:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.rental-img-hero {
  margin-top: -45px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.12));
}

/* Tombol Booking */
.btn-rental-hero {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--base-color);
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.btn-rental-hero::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(30deg);
  transition: all 0.6s ease;
}

.btn-rental-hero:hover::after {
  left: 130%;
}

.btn-rental-hero:hover {
  color: #ffffff;
  background-color: var(--second-color);
}

.btn-rental-hero i {
  font-size: 10px;
  transition: transform 0.3s ease;
}

.btn-rental-hero:hover i {
  transform: translateX(3px);
}

.rental-card-g3 {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  padding: 12px 10px;
  margin-top: 35px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.rental-img-g3 {
  margin-top: -45px;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.12));
}

/* Tombol Gradasi Kuning Emas Ke Oranye */
.btn-rental-g3 {
  background: linear-gradient(135deg, #ff8c00 0%, #e65100 100%);
  color: #ffffff;
  border-radius: 50px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: block;
  box-shadow: 0 4px 10px rgba(230, 81, 0, 0.25);
  transition: transform 0.2s ease;
}

.btn-rental-g3:hover {
  transform: scale(1.02);
  color: #ffffff;
}

/* 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  */
/* ============================================================
   BASE SETUP SECTION (Memastikan ornamen tidak bocor & konten di atasnya)
   ============================================================ */
.welcome-grid-icons {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.welcome-grid-icons .container {
  position: relative;
  z-index: 2; /* Memastikan isi teks & gambar tetap di atas background */
}

/* ============================================================
   OPSI 1: Tech Blueprint Grid (Grid Presisi Seluruh Section)
   ============================================================ */
.welcome-grid-icons.opsi-1 {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(rgba(220, 53, 69, 0.05) 0.5px, transparent 0.5px),
    linear-gradient(90deg, rgba(220, 53, 69, 0.05) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  background-position: center center;
}

/* ============================================================
   OPSI 3: Hexagon Mesh (Pola Segi 6 / Sarang Lebah Digital)
   ============================================================ */
.welcome-grid-icons.opsi-3 {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(
      circle at 100% 100%,
      rgba(220, 53, 69, 0.06) 0,
      transparent 20%
    ),
    radial-gradient(
      circle at 0% 0%,
      rgba(220, 53, 69, 0.06) 0,
      transparent 20%
    ),
    repeating-linear-gradient(
      60deg,
      rgba(220, 53, 69, 0.03) 0,
      rgba(220, 53, 69, 0.03) 1px,
      transparent 0,
      transparent 14px
    ),
    repeating-linear-gradient(
      120deg,
      rgba(220, 53, 69, 0.03) 0,
      rgba(220, 53, 69, 0.03) 1px,
      transparent 0,
      transparent 14px
    );
}
.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 */
.gallery-opt2-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease;
  cursor: pointer;
}

.gallery-opt2-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(52, 152, 219, 0.18);
}

.gallery-opt2-item img {
  transition: transform 0.5s ease;
}

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

.gallery-opt2-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(52, 152, 219, 0.75),
    rgba(52, 152, 219, 0.1),
    transparent
  );
  padding: 20px 14px 14px;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.gallery-opt2-item:hover .gallery-opt2-overlay {
  transform: translateY(0);
}

.gallery-opt2-content {
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gallery-opt2-content i {
  font-size: 14px;
}

/* 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: var(--base-color);
}

/* 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: var(--base-color);
  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: var(--base-color);
  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  */
/* Helper Utilities */
.object-fit-cover {
  object-fit: cover !important;
}
.fs-12 {
  font-size: 12px !important;
}
.fs-18 {
  font-size: 18px !important;
}

/* Kunci Utama Pembatas 2 Baris Otomatis (...) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Batasi maksimal 2 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4; /* Menjaga jarak antar baris tetap proporsional */
  height: 2.8em; /* Mengunci tinggi wadah teks (1.4 x 2 baris) agar layout tidak bergeser */
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Batasi maksimal 2 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4; /* Menjaga jarak antar baris tetap proporsional */
  height: 3.8em; /* Mengunci tinggi wadah teks (1.4 x 2 baris) agar layout tidak bergeser */
}

/* Opsi 1 Core Styles */
.card-wisata-overlay .img-target {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.card-wisata-overlay .content-wrapper {
  height: 80%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    transparent 100%
  );
  z-index: 2;
}
.card-wisata-overlay .btn-wisata-selengkapnya {
  transition: all 0.3s ease !important;
}

/* Desktop Hover Effects */
@media (min-width: 992px) {
  .card-wisata-overlay .btn-wisata-selengkapnya {
    opacity: 0;
    transform: translateY(10px);
  }
  .card-wisata-overlay:hover .img-target {
    transform: scale(1.08);
  }
  .card-wisata-overlay:hover .content-wrapper {
    background: linear-gradient(
      to top,
      rgba(45, 106, 79, 0.95) 0%,
      rgba(0, 0, 0, 0.4) 75%,
      transparent 100%
    );
  }
  .card-wisata-overlay:hover .btn-wisata-selengkapnya {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Fallback: Fitur selalu aktif dan muncul di layar sentuh */
@media (max-width: 991.98px) {
  .card-wisata-overlay .btn-wisata-selengkapnya {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* Bullet Active Style */
.swiper-pagination-opsi1 .swiper-pagination-bullet-active {
  background: var(--base-color) !important;
  width: 18px;
  border-radius: 4px;
  transition: width 0.3s ease;
}
/* card wisata  */

/* ============================================================
BASE SETUP SECTION (Memastikan ornamen tidak bocor & z-index aman)
============================================================ */
.wrapper[class*="wrapper-ornamen-"] {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.wrapper[class*="wrapper-ornamen-"] .container {
  position: relative;
  z-index: 2; /* Menjaga teks, card, & slide tetap di atas background */
}

/* ============================================================
OPSI 1: Blueprint Tech Grid (Grid Modern & Clean)
============================================================ */
.wrapper.wrapper-ornamen-1 {
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(220, 53, 69, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 53, 69, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center center;
}

/* 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: var(--base-color); */
}

.keunggulan-card-modern:hover .icon-modern img {
  /* filter: brightness(0) invert(1); */
}

.keunggulan-card-modern:hover h5 {
  color: var(--base-color);
}

/* Card Keunggulan  */

.bg-navbar {
  /* background-color: white; */
}

.navbar-stick:not(.navbar-dark) {
  background-color: white;
  backdrop-filter: blur(200px);
  -webkit-backdrop-filter: blur(100px);
}

.sec-title__title > span.underline-effect {
  position: relative;
  /* color: var(--main-color); */
  overflow: hidden;
}
.sec-title__title > span.underline-effect::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  content: "";
  animation: widths 3s linear infinite;
  background-color: var(--base-color);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 229 7" xmlns="http://www.w3.org/2000/svg"><path d="M229 2.67187C228.139 2.92187 227.429 2.96484 226.707 2.95703C222.57 2.91015 218.428 2.83984 214.291 2.80468C211.131 2.77734 207.866 2.55468 204.835 2.83984C199.487 3.34374 194.151 2.95703 188.826 3.09374C182.696 3.24999 176.505 3.19531 170.336 3.16015C164.983 3.1289 159.63 2.92578 154.26 3.05078C152.173 3.09765 150.057 2.87109 147.969 3.02343C144.893 3.24999 141.839 3.21093 138.774 3.0039C137.375 2.91015 136.042 3.14843 134.67 3.20312C131.039 3.35156 127.402 3.37109 123.765 3.41015C123.126 3.41796 122.432 3.44531 121.855 3.56249C119.8 3.97265 117.59 4.15624 115.441 4.15234C111.782 4.14843 108.234 4.55078 104.558 4.52734C98.3223 4.48437 92.0754 4.74218 85.8342 4.72656C79.8317 4.71484 73.8292 4.67187 67.8267 4.71484C65.5501 4.73046 63.279 4.76953 61.019 4.88281C60.2916 4.91796 59.5587 4.98437 58.8368 4.95703C54.0115 4.78906 49.3028 5.25781 44.5385 5.46484C40.2629 5.64843 35.9929 5.88671 31.7062 6.03515C26.4478 6.21484 21.206 6.53124 15.992 6.89453C11.6886 7.19531 7.57959 6.80468 3.46502 6.36718C1.94913 6.20703 0.072307 4.93749 0.00567426 4.21484C-0.0609585 3.49609 0.577605 3.12499 2.15458 2.95703C6.19141 2.51953 10.356 2.49999 14.4317 2.13281C23.366 1.32421 32.4003 0.816401 41.4901 0.558588C48.6253 0.355463 55.7662 0.273432 62.9181 0.285151C68.4375 0.292963 73.9624 0.164057 79.4763 0.226557C85.4066 0.292963 91.3258 0.164057 97.2506 0.164057C106.585 0.164057 115.924 0.0117134 125.259 0.00390089C133.382 -0.0039116 141.506 0.0742134 149.624 0.281245C164.394 0.660151 179.187 0.886713 193.94 1.38671C204.074 1.73046 214.219 1.96484 224.352 2.28515C225.868 2.32812 227.329 2.48046 229 2.67187Z"/></svg>');
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 229 7" xmlns="http://www.w3.org/2000/svg"><path d="M229 2.67187C228.139 2.92187 227.429 2.96484 226.707 2.95703C222.57 2.91015 218.428 2.83984 214.291 2.80468C211.131 2.77734 207.866 2.55468 204.835 2.83984C199.487 3.34374 194.151 2.95703 188.826 3.09374C182.696 3.24999 176.505 3.19531 170.336 3.16015C164.983 3.1289 159.63 2.92578 154.26 3.05078C152.173 3.09765 150.057 2.87109 147.969 3.02343C144.893 3.24999 141.839 3.21093 138.774 3.0039C137.375 2.91015 136.042 3.14843 134.67 3.20312C131.039 3.35156 127.402 3.37109 123.765 3.41015C123.126 3.41796 122.432 3.44531 121.855 3.56249C119.8 3.97265 117.59 4.15624 115.441 4.15234C111.782 4.14843 108.234 4.55078 104.558 4.52734C98.3223 4.48437 92.0754 4.74218 85.8342 4.72656C79.8317 4.71484 73.8292 4.67187 67.8267 4.71484C65.5501 4.73046 63.279 4.76953 61.019 4.88281C60.2916 4.91796 59.5587 4.98437 58.8368 4.95703C54.0115 4.78906 49.3028 5.25781 44.5385 5.46484C40.2629 5.64843 35.9929 5.88671 31.7062 6.03515C26.4478 6.21484 21.206 6.53124 15.992 6.89453C11.6886 7.19531 7.57959 6.80468 3.46502 6.36718C1.94913 6.20703 0.072307 4.93749 0.00567426 4.21484C-0.0609585 3.49609 0.577605 3.12499 2.15458 2.95703C6.19141 2.51953 10.356 2.49999 14.4317 2.13281C23.366 1.32421 32.4003 0.816401 41.4901 0.558588C48.6253 0.355463 55.7662 0.273432 62.9181 0.285151C68.4375 0.292963 73.9624 0.164057 79.4763 0.226557C85.4066 0.292963 91.3258 0.164057 97.2506 0.164057C106.585 0.164057 115.924 0.0117134 125.259 0.00390089C133.382 -0.0039116 141.506 0.0742134 149.624 0.281245C164.394 0.660151 179.187 0.886713 193.94 1.38671C204.074 1.73046 214.219 1.96484 224.352 2.28515C225.868 2.32812 227.329 2.48046 229 2.67187Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left bottom;
  mask-position: left bottom;
  -webkit-mask-size: cover;
  mask-size: cover;
}

@-webkit-keyframes widths {
  0% {
    width: 0%;
  }
  50% {
    width: 97%;
    left: 0;
  }
  100% {
    width: 0;
  }
}

@keyframes widths {
  0% {
    width: 0%;
  }
  50% {
    width: 97%;
    left: 0;
  }
  100% {
    width: 0;
  }
}

.sec-title__tagline__left-border {
  width: 25px;
  height: 12px;
  display: inline-block;
  border: 1px solid var(--base-color);
  border-radius: 100px;
  position: relative;
  top: 0;
  margin-right: 10px;
  overflow: hidden;
}
.sec-title__tagline__left-border::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 18px;
  height: 100%;
  background-color: var(--base-color);
  border-radius: 100px;
  content: "";
  animation: zumpXX 2s linear infinite;
}
@keyframes zumpXX {
  0%,
  100% {
    left: -20%;
  }
  50% {
    left: 50%;
  }
}

.isotope-filter {
  text-align: left;
  background: white;
  padding: 15px;
  width: 39%;
  border-radius: 15px;
}
.kategori-tabs {
  display: inline-flex;
  gap: 12px;
  border-radius: 12px;
}

.kategori-tabs .tab {
  border: none;
  background: transparent;
  padding: 14px 16px;
  border-radius: 10px;
  color: #6c757d;
  font-weight: 500;
  /* cursor: pointer; */
  transition: all 0.3s ease;
}

.kategori-tabs .tab.active {
  background: #ffffff;
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.kategori-tabs-mobile .tab {
  border: none;
  background: transparent;
  padding: 13px 17px;
  border-radius: 10px;
  color: #6c757d;
  font-weight: 500;
  /* cursor: pointer; */
  transition: all 0.3s ease;
}

.kategori-tabs-mobile .tab.active {
  background: #ffffff;
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  background: white;
  /* max-height: 450px;
  min-height: 450px; */
}

/* Core styles/functionality */
.tab {
  position: relative;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
  max-height: 10rem;
  overflow: auto;
}

/* Visual styles */
.accordion {
  color: var(--theme);
  /* border: 2px solid; */
  border-radius: 0.5rem;
  overflow: hidden;
}
.tab__label,
.tab__close {
  display: flex;
  color: var(--base-color);
  background: var(--theme);
  cursor: pointer;
}
.tab__label {
  justify-content: space-between;
  padding: 1rem;
}
.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}
.tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
.tab__content p {
  margin: 0;
  padding: 1rem;
}
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
.accordion--radio {
  --theme: var(--secondary);
}

/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce 0.5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(0.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-0.25rem);
  }
}

.nav-tabs {
  background: white;
  padding: 10px;
  width: 31%;
  border-radius: 15px;
}

.nav-tabs-mobile {
  background: white;
  padding: 10px;
  justify-content: center;
  /* width: 31%; */
  border-radius: 15px;
}

/* sosmed  */

/* Style & Animasi Tombol Sosmed */
    .sosmed-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: rgba(13, 110, 253, 0.08);
        color: var(--bs-primary, #0d6efd);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 1px solid rgba(13, 110, 253, 0.15);
    }

    .sosmed-btn:hover {
        background-color: var(--bs-primary, #0d6efd);
        color: #ffffff;
        transform: translateY(-4px) scale(1.15) rotate(6deg);
        box-shadow: 0 6px 15px rgba(13, 110, 253, 0.3);
        border-color: var(--bs-primary, #0d6efd);
    }


.sosmed-opt1 {
  width: 42px;
  height: 42px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #495057;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sosmed-opt1:hover {
  background-color: #198754;
  border-color: #198754;
  color: #ffffff !important;
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(25, 135, 84, 0.25);
}
/* sosmed  */

.sosmed-color {
  color: var(--base-color) !important;
}

html {
  scroll-behavior: smooth;
}

.bg-stats {
  background-color: #1a371ccc;
  padding: 15px;
  border-radius: 15px;
}