@import url("https://fonts.googleapis.com/css2?family=Anek+Telugu:wght@100..800&family=Annapurna+SIL:wght@400;700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Questrial&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

/* 
"Red Hat Display", sans-serif;
"Annapurna SIL", serif;
"Anek Telugu", sans-serif;
"Rubik", sans-serif;
"Merriweather", serif;
"Questrial", sans-serif;
"Noto Serif", serif;
*/

:root {
  --base-color: #0045af;
  --second-color: #f5d809;
  --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: "Rubik", sans-serif;
  --alt-font: "Rubik", sans-serif;
}

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

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

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

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

.bg-top-bar {
  background: var(--base-color); /* Fallback */
  background: -webkit-linear-gradient(
    90deg,
    var(--base-color),
    #002684,
    var(--base-color)
  ); /* Safari 5.1-6 */
  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: 500;
  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: 20px !important;
  }
  .fs-30 {
    font-size: 22px !important;
  }
  .ornamen-cloud {
    top: 0px !important;
  }
  .art-l7-box {
    padding: 15px !important;
  }
  .flt-modern span {
    display: none;
  }
}
/* END WA/ APPO BTN / SCROLL TOP */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.background-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.05;

  /* 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-statistik {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* background-color: #c0fcde; */
}

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

  /* Overlay putih tipis transparan mengalir ke bawah */
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.931) 0%,
      rgba(255, 255, 255, 0.905) 50%,
      rgba(255, 255, 255, 0.65) 100%
    ),
    url("../Aset Desain/pakai/bg/3.webp");

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

  /* Opacity disesuaikan agar gambar latar belakang tetap terlihat lembut */
  opacity: 0.7;
  z-index: -1;
}

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

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

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

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

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

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

  z-index: -1;
}

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

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

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

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

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

.background-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/4.webp");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */

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

/* background alur proses  */
.ly-step-list {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

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

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

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

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

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

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

/* Layer 1: Background Image (Sisi Atas) */
.background-keunggulan::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../Aset Desain/pakai/bg/6.webp") center/cover no-repeat;
  opacity: 0.2;
  /* Masking agar gambar memudar dari atas ke arah bawah */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%);
  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-footer {
  position: relative;
  z-index: 1;
  overflow: hidden; /* Mencegah background meluap keluar */
}

/* BACKGROUND IMAGE (WEBPI GREYSCALE) */
.background-footer::before {
  content: "";
  position: absolute;
  inset: 0; /* Shortcut untuk top:0, right:0, bottom:0, left:0 */
  background: url("../Aset Desain/pakai/bg/4.webp") center/cover no-repeat;
  filter: grayscale(100%);
  z-index: -2;
  opacity: 1;
}

/* OVERLAY NAVY GRADIENT (Pekat di Kiri -> Semakin Tipis ke Kanan) */
.background-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Warna Navy #03143e pekat (95% opacity) di kiri ke transparan (20% opacity) di kanan */
  background: linear-gradient(
    90deg,
    rgb(3, 20, 62) 0%,
    rgba(3, 20, 62, 0.922) 50%,
    rgba(3, 20, 62, 0.879) 100%
  );
  z-index: -1;
}

.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/12.webp") center/cover no-repeat;
  filter: grayscale(100%); /* Membuat gambar background jadi Hitam-Putih */
  opacity: 0.6;
  z-index: -2;
}

/* OVERLAY PUTIH SOFT UNIFORM */
.background-galeri::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  border-radius: inherit; /* Menyesuaikan rounded-2 kontainer */
  z-index: -1;
}

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

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

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

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

  z-index: -1;
}  */

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

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

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

/*==========================================================================
* Navbar
==========================================================================*/
/* Mengubah layout active menjadi bentuk kapsul */
.navbar-nav .nav-link.active {
  color: var(--base-color) !important;
  font-weight: 600;
  position: relative;
}

.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--base-color);
  border-radius: 2px;
}
.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 */

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

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

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

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

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

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

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

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

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

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

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

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

/* floating wa baru  */

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

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

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

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

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

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

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

@media (max-width: 768px) {
  .floating-wave-container {
    right: 15px;
    bottom: 15px;
    gap: 10px;
  }
  .wave-btn {
    padding: 10px;
    min-width: 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  */
.cta-section-bg {
  position: relative;
  /* Background gambar dinamis via PHP ditaruh di tag section */
  
    cover no-repeat;
  /* overflow: hidden; */
  background-attachment: fixed;
}

/* Overlay Gradasi Biru ke Kuning memenuhi seluruh section */
.cta-section-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.94) 0%,
    rgba(30, 58, 138, 0.88) 55%,
    rgba(245, 158, 11, 0.35) 100%
  );
  z-index: 1;
}

.cta-simple-3 {
  position: relative;
  z-index: 2;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 45px 40px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.dot-blue {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #3b82f6;
  border-radius: 50%;
  margin-right: 8px;
  animation: pulse-dot 2s ease-in-out infinite;
}

.dot-yellow {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #f59e0b;
  border-radius: 50%;
  margin-right: 8px;
  animation: pulse-dot 2s ease-in-out infinite 0.5s;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.btn-blue-3 {
  background: #3b82f6;
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  color: #ffffff;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.btn-blue-3:hover {
  background: #2563eb;
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}

.btn-yellow-3 {
  background: #f59e0b;
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  color: #0f172a;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-yellow-3:hover {
  background: #fbbf24;
  transform: translateY(-2px);
  color: #0f172a;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.btn-shine {
  position: relative;
  overflow: hidden !important;
  /* Mencegah efek shine keluar dari border tombol */
  z-index: 1;
  transition: all 0.3s ease;
}

/* Elemen efek kilat (shine) */
.btn-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
  transition: none;
  z-index: 2;
}

/* Animasi jalan saat di-hover */
.btn-shine:hover::before {
  left: 140%;
  transition: left 0.65s ease-in-out;
}

/* Efek tombol sedikit terangkat saat hover */
.btn-shine:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Gradasi Kuning */
.btn-yellow-gradient {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: #000000 !important;
  border: none;
}

/* Gradasi Biru */
.btn-blue-gradient {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: #ffffff !important;
  border: none;
}

/* 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  */
.footer-grid-pattern {
  position: relative;
  background: linear-gradient(135deg, #011954 0%, var(--base-color) 100%);
  padding: 60px 0 30px;
  border-top: 3px solid #f59e0b;
  overflow: hidden;
}

/* Layer Grid dengan Overlay Pudar */
.footer-grid-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 35px 35px;
  
  /* Gradasi radial: grid hanya terlihat samar di tengah, memudar ke tepi */
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  
  pointer-events: none;
}

.footer-grid-pattern .ck-heading {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-grid-pattern .ck-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 3px;
  background: #f59e0b;
  border-radius: 2px;
}

.footer-grid-pattern .ck-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.25s ease;
  display: block;
  padding: 5px 0;
}

.footer-grid-pattern .ck-link:hover {
  color: #fbbf24;
  padding-left: 8px;
}

.footer-grid-pattern .ck-link i {
  margin-right: 8px;
  font-size: 11px;
  color: #f59e0b;
  opacity: 0.7;
}

.footer-grid-pattern .ck-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  padding: 8px 0;
  transition: all 0.25s ease;
  text-decoration: none;
}

.footer-grid-pattern .ck-contact:last-child {
  border-bottom: none;
}

.footer-grid-pattern .ck-contact:hover {
  color: #fbbf24;
}

.footer-grid-pattern .ck-contact .ck-icon {
  width: 36px;
  height: 36px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  font-size: 15px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.footer-grid-pattern .ck-contact:hover .ck-icon {
  background: #f59e0b;
  color: #0d172a;
  transform: scale(1.05);
}

.footer-grid-pattern .ck-social {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.footer-grid-pattern .ck-social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
}

.footer-grid-pattern .ck-social a:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #0d172a;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.25);
}

.footer-grid-pattern .ck-logo {
  max-height: 48px;
  object-fit: contain;
  margin-bottom: 12px;
}

.footer-grid-pattern .ck-desc {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1.8;
}

.footer-grid-pattern .ck-divider {
  border-color: rgba(255, 255, 255, 0.08);
  margin: 32px 0 20px;
}
/* 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  */
.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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .ly-step-list .img-stack-wrapper {
    padding: 20px 15px 40px 10px;
  }

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

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

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

@media (max-width: 575.98px) {
  /* FIX BUG TOOLTIP: Aliran kotak digeser ke kanan agar tidak mentok & tumpah di layar HP */
  .ly-step-list .tooltip-popup {
    left: -15px;
    transform: none;
    width: 240px; /* Ukuran pas untuk layar handphone */
  }

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

/* step alur proses  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cs-flex {
  display: flex;
}

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

label {
  margin-bottom: 12px;
}

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

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

/* Scroll */

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

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

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

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

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

/*--------------------------------------------------------------
# Footer Section
--------------------------------------------------------------*/
/* --- V6 OPSI 6: BOLD CONSTRUCTION --- */
/* .v6-op6-footer {
  background: #111111;
  color: #e5e7eb;
  padding: 0;
  letter-spacing: 0.5px;
} */

.v6-op6-footer {
  position: relative;
  z-index: 1;
  overflow: hidden;
  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: 400;
  font-size: 14px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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



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

a.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 #f1f5f9;
  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 #f1f5f9;
}
.pro-follow-icon-v1 {
  color: var(--base-color);
  font-size: 18px;
}
.pro-sosmed-v1 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f1f5f9;
  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 #f1f5f9;
  }
}
/*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 */
.opt5-circle {
  position: absolute;
  top: 50%;
  right: -2%;
  transform: translateY(-50%);
  width: 450px;
  height: 450px;
  background-image: radial-gradient(
    rgba(var(--bs-primary-rgb), 0.2) 1.5px,
    transparent 1.5px
  );
  background-size: 20px 20px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.opt5-stat-wrap {
  background: #f8f9fa;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 3px solid #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
  transition: 0.3s;
}

.opt5-stat-wrap:hover {
  background: var(--bs-primary);
}

.opt5-stat-wrap:hover h3,
.opt5-stat-wrap:hover small {
  color: #fff !important;
}
/* statistik  */

/* artikel detail  */
.share-btn-5 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  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) {
  .gambar-banner {
    height: 250px;
  }
}

/* gambar banner  */

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

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

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

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

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

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

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

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

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

/* card kelebihan  */

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

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

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

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

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

/* layanan tambahan  */

/* 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 #f1f5f9;
  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: #0d6efd;
  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 #f1f5f9;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Accordion Faq  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon2 img {
  width: 70%;
}

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

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

/*Portofolio*/
#portofolio {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

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

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

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

/*layanan*/

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

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

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

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

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

/* Card Paket  */

/*end layanan*/

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

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

/* Kontak Section  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      p {
        opacity: 1;
      }
    }

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

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

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

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

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

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

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

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

      h6 {
        text-transform: uppercase;
      }
    }

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

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

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

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

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

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

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

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

  font-size: 50px;
}

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

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

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

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

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

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

/* card layanan baru*/

/*end card layanan baru*/

.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-wrapper {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Container Baris Bergerak */
.marquee-container {
  display: flex;
  width: max-content;
  gap: 15px;
}

/* Animasi Jalur 1: Kiri ke Kanan */
.marquee-left-to-right {
  animation: scrollLTR 55s linear infinite;
}

/* Animasi Jalur 2: Kanan ke Kiri */
.marquee-right-to-left {
  animation: scrollRTL 75s linear infinite;
}

/* Berhenti/Jeda Saat Di-hover */
.marquee-wrapper:hover .marquee-container {
  animation-play-state: paused;
}

/* Desain Kotak Logo (Ukuran Konsisten & Presisi) */
.client-logo-card {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  padding: 12px 18px; /* Padding ditingkatkan agar logo tidak menempel ke tepi */
  width: 150px; /* Ukuran FIXED konsisten */
  height: 80px; /* Ukuran FIXED konsisten */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0.85;
  box-sizing: border-box;

  /* STATUS AWAL: Bar Atas Warna Abu-Abu */
  border-top: 3.5px solid #e0e0e0;
  transition: all 0.3s ease-in-out;
}

/* EFEK HOVER */
.client-logo-card:hover {
  opacity: 1;
  border-top-color: #1a76c3;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* PERBAIKAN: Memastikan elemen Picture & Img terkunci rapat di dalam kotak */
.client-logo-card picture {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-logo-card img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important; /* Mencegah gambar melar / gepeng */
  height: auto !important; /* Menjaga aspek rasio asli logo */
  object-fit: contain !important;
}

/* Keyframes Pergerakan Loop Smooth */
@keyframes scrollLTR {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

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

section.our-client {
  position: relative !important;
  z-index: 1 !important;
}

/* Garis Gradasi Atas */
section.our-client::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(13, 110, 253, 0.25),
    transparent
  );
  z-index: 0;
  pointer-events: none;
}

/* Garis Gradasi Bawah */
section.our-client::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(108, 117, 125, 0.2),
    transparent
  );
  z-index: 0;
  pointer-events: none;
}

section.our-client .container {
  position: relative;
  z-index: 2;
}
/* our client  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Galeri  */
.galeri-box-opt2 {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Slider  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  opacity: 0;
  transition: 0.35s;
}

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

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

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

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

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

/* galeri masonry  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==================== AREA CONTAINER SCROLL ==================== */
.paket-spec-list .spec-scroll-container {
  margin: 18px 0 0 0;
  padding-right: 14px; /* Ditambah sedikit agar teks opsi (a,b,c) tidak menempel ke scrollbar */
  max-height: 112px;
  overflow-y: auto;
  overflow-x: hidden;

  /* Fix untuk Firefox: Supaya tidak memunculkan scrollbar bawaan browser yang tebal dan kaku */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

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

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

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

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

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

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

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

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

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

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

/* paket harga  */

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

/* Card Artikel  */
.overlay-img-wrap-3 {
  position: relative;
  height: 350px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
}
.overlay-img-wrap-3:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16);
}
.overlay-img-wrap-3 img {
  transition: transform 0.6s ease;
}
.overlay-img-wrap-3:hover img {
  transform: scale(1.1);
}
.overlay-dark-3 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
}
.overlay-content-3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 25px 20px;
  z-index: 2;
  transform: translateY(0);
  transition: transform 0.4s ease;
}
.overlay-img-wrap-3:hover .overlay-content-3 {
  transform: translateY(5px);
}
.overlay-category-3 {
  display: inline-block;
  background: var(--base-color);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.overlay-title-3 {
  color: white;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.overlay-info-row-3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
}
/* Card Artikel  */

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

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

/* FAQ Accordion  */

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

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

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

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

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

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

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

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

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

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

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

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

/* testimoni  */
.btn-orange-tab {
  transition: all 0.2s ease-in-out;
}
.btn-orange-tab.active {
  background-color: var(--second-color) !important;
  border-color: var(--second-color) !important;
  color: #ffffff !important;
}

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

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

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

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

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

.wl-tab-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
/* Testimoni  */

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

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

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

/* 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;
  }
  a.nav-link {
    font-size: 14px;
  }
  .overlap-text-card {
    padding: 0 !important;
    box-shadow: none !important;
    margin-top: 30px;
  }
  .overlap-image-wrapper {
    box-shadow: none !important;
  }
  .keunggulan-overlap-wrapper {
    margin-top: -200px !important;
  }
  .title-split {
    font-size: 25px !important;
  }
  .cta-layout-2 {
    padding: 0;
  }
  .cta-floating-card {
    padding: 10px;
  }
  .btn-cta-green {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
  }
  .bg-cta {
    /* height: 440px !important; */
  }
  .swiper-hero {
    height: 100vh !important;
  }
  .swiper-container .swiper img {
    height: 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-borderlines {
  background: radial-gradient(
    circle at 0% 0%,
    rgba(85, 254, 0, 0.12) 0%,
    rgba(88, 184, 0, 0.03) 45%,
    #090d14 100%
  );
  background-color: #090d14;
  color: #94a3b8;
  border-top: 1px solid rgba(85, 254, 0, 0.2);
}

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

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

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

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

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

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

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

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

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

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

.btn-pill-action.wa:hover {
  background-color: #1ebd54;
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.4);
}
/* footer baru  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.social-icons a {
  color: var(--second-color);
  text-decoration: none;
  margin-right: 1rem;
  font-size: 1.2rem;
}

/* Simple social icons using Unicode */
.social-icons a::before {
  margin-right: 0.5rem;
}

.social-icons a[href*="twitter"]::before {
  content: "🐦";
}
.social-icons a[href*="instagram"]::before {
  content: "📸";
}
.social-icons a[href*="facebook"]::before {
  content: "📘";
}

@media (max-width: 768px) {
  .footer-links {
    flex-direction: column;
    gap: 1rem;
  }
}

#type1 {
  /*background-color:#42a5f5;
  padding-bottom: 50px;*/
}
.btn-1 {
  text-align: center;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #33bbfb0f;
  cursor: pointer;
  background-color: #0039a2;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  color: white;
  margin: 0 20px;
  border-radius: 30px;
}

.btn-1:before {
  content: "";
  position: absolute;
  height: 150px;
  width: 50px;
  background: #009bff;
  left: -55px;
  top: -40px;
  transform: rotate(37deg);
  transition: all 0.3s;
  opacity: 0.5;
}

.btn-1:hover:before {
  left: 95%;
}

/*kontak kami*/
.background {
  height: 100%;
  width: 100%;
  position: relative;
  color: white;
}

.content {
  position: absolute;
  z-index: 2;
  /* left: 50px; */
  /* max-width: 600px; */
  /* padding: 40px; */
  display: flex;
  flex-direction: column;
  justify-content: left;
}

.content h1 {
  font-size: 30px;
  margin-bottom: 20px;
}

.content div {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 30px;
  max-width: 800px;
}

.animated-zoom {
  animation: animatedBackground 7s linear infinite alternate;
}
@keyframes animatedBackground {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

.overlay {
  /* background-color: rgba(0, 0, 0, 0.6); */
  /* height: 100%;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

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

.info-boxes {
  flex: 1 1 45%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.info-box {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 1rem;
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
  position: relative;
}

.info-box:hover {
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}
.info-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: white;
  transition: width 0.3s ease;
}

.info-box:hover::after {
  width: 100%;
}

.info-box h4 {
  margin-bottom: 0.5rem;
  color: var(--base-color);
  font-size: 18px;
  font-weight: 400;
}

.info-box p,
.info-box a {
  font-size: 14px;
  color: #ddd;
  text-decoration: none;
  font-weight: 400;
}

@media (max-width: 768px) {
  .form-container {
    flex-direction: column;
  }

  .info-boxes {
    grid-template-columns: 1fr;
  }
}

/*home*/

/* paket rafting serayu  */
.section-rafting {
  background-color: #f9fbfd;
  padding: 80px 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rating-section .stars i {
  color: 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: #0d6efd;
}

.btn-project-lainnya:hover::after {
  background: #0d6efd;
  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: #f1f5f9;
  }
}

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

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

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

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

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

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

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

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

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

/*Keunggulan*/

/* sosmed footer */

textarea {
  resize: none;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  white-space: nowrap;
}

.svg-inline--fa {
  vertical-align: -0.2em;
}

.rounded-social-buttons {
  /* text-align: center; */
}

.rounded-social-buttons .social-button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 0.125rem solid transparent;
  padding: 0;
  text-decoration: none;
  text-align: center;
  color: #fefefe;
  font-size: 1.5625rem;
  font-weight: normal;
  /* line-height: 2em; */
  border-radius: 1.6875rem;
  transition: all 0.5s ease;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 20px;
}

.rounded-social-buttons .social-button:hover,
.rounded-social-buttons .social-button:focus {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

.rounded-social-buttons .fa-twitter,
.fa-facebook-f,
.fa-linkedin,
.fa-tiktok,
.fa-youtube,
.fa-instagram {
  font-size: 25px;
}

.rounded-social-buttons .social-button.facebook {
  background: #3b5998;
}

.rounded-social-buttons .social-button.facebook:hover,
.rounded-social-buttons .social-button.facebook:focus {
  color: #3b5998;
  background: #fefefe;
  border-color: #3b5998;
}

.rounded-social-buttons .social-button.twitter {
  background: #55acee;
}

.rounded-social-buttons .social-button.twitter:hover,
.rounded-social-buttons .social-button.twitter:focus {
  color: #55acee;
  background: #fefefe;
  border-color: #55acee;
}

.rounded-social-buttons .social-button.linkedin {
  background: #007bb5;
}

.rounded-social-buttons .social-button.linkedin:hover,
.rounded-social-buttons .social-button.linkedin:focus {
  color: #007bb5;
  background: #fefefe;
  border-color: #007bb5;
}

.rounded-social-buttons .social-button.tiktok {
  background: #000000;
}

.rounded-social-buttons .social-button.tiktok:hover,
.rounded-social-buttons .social-button.tiktok:focus {
  color: #000000;
  background: #fefefe;
  border-color: #000000;
}

.rounded-social-buttons .social-button.youtube {
  background: #bb0000;
}

.rounded-social-buttons .social-button.youtube:hover,
.rounded-social-buttons .social-button.youtube:focus {
  color: #bb0000;
  background: #fefefe;
  border-color: #bb0000;
}

.rounded-social-buttons .social-button.instagram {
  background: #125688;
}

.rounded-social-buttons .social-button.instagram:hover,
.rounded-social-buttons .social-button.instagram:focus {
  color: #125688;
  background: #fefefe;
  border-color: #125688;
}
/* sosmed footer */

.rounded-title {
  background-color: #9eebff;
  color: white;
  font-weight: bold;
  background: radial-gradient(circle at 10% 50%, #00c6ff, #0072ff);
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.dots {
  margin-right: 8px;
  color: #16161675;
  font-size: 18px;
  line-height: 0;
}

.header-corner {
  position: absolute !important;
  right: 0px;
  left: auto;
  bottom: 0;
  /* height: 300px; */
  width: auto !important;
  z-index: 10;
}

.image-wrapper {
  height: 200px;
}

/* Galeri */

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

/* galeri baru  */
.gallery-minimal-card {
  position: relative;
  height: 260px;
  overflow: hidden;
  border-radius: 8px;
  display: block;
}
.gallery-minimal-img {
  width: 100%;
  height: 100%;
}
.gallery-minimal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.5s ease,
    filter 0.5s ease;
  filter: brightness(0.9);
}
.gallery-minimal-card:hover .gallery-minimal-img img {
  transform: scale(1.12);
  filter: brightness(0.5);
}
.gallery-minimal-overlay {
  position: absolute;
  inset: 20px;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}
.gallery-minimal-card:hover .gallery-minimal-overlay {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.8);
  inset: 15px;
}
.gallery-minimal-plus {
  width: 45px;
  height: 45px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.gallery-minimal-card:hover .gallery-minimal-plus {
  transform: scale(1);
}
/* galeri baru  */

/* Card Keunggulan  */
.map-marker-card {
  background: white;
  border-radius: 16px;
  padding: 60px 20px 30px 20px;
  text-align: center;
  height: 100%;
  position: relative;
  /* margin-top: 30px; */
  /* Space untuk pin yang menonjol keluar */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

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

/* Membentuk Kotak Menjadi Pin Peta (Tetesan air terbalik) */
.map-pin-shape {
  width: 70px;
  height: 70px;
  position: absolute;
  top: -35px;
  left: 50%;
  margin-left: -35px;
  border-radius: 50% 50% 50% 0;
  /* Bentuk Pin */
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease;
}

.map-marker-card:hover .map-pin-shape {
  transform: rotate(-45deg) translateY(-10px) translateX(10px);
}

/* Pembungkus Ikon (Harus diputar balik agar gambar tidak miring) */
.map-pin-inner {
  transform: rotate(45deg);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-pin-inner img {
  width: 50px;
  height: 5 0px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Bayangan 3D di bawah pin */
.map-pin-shadow {
  width: 40px;
  height: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s ease;
}

.map-marker-card:hover .map-pin-shadow {
  width: 20px;
  opacity: 0.3;
}

/* CSS Mobile Slide Snap */
    @media (max-width: 767.98px) {
        .keunggulan-mobile-scroll {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 20px;
            /* Space untuk shadow pin agar tidak terpotong */
            margin-right: -0.75rem;
            margin-left: -0.75rem;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        .keunggulan-mobile-scroll::-webkit-scrollbar {
            display: none;
            /* Sembunyikan scrollbar agar tampilan clean */
        }

        .keunggulan-item {
            flex: 0 0 82% !important;
            /* Lebar kartu di mobile (tampak mengintip kartu berikutnya) */
            max-width: 82% !important;
            scroll-snap-align: center;
        }
    }

/* CARD Keunggulan */



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

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

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

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

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

/* ==================== POSITIONING NAV BUTTONS LEFT & RIGHT ==================== */
.ly-kg-opt1 .slider-container-wrapper {
  position: relative;
  padding: 0 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: 30px;
  opacity: 0.05;
}

/* ornamen galeri  */

/* ornamen card layanan  */
.ornamen-card-layanan {
  position: absolute;
  /* width: 100%; */
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: -1;
  opacity: 0.1;
}
/* ornamen card layanan  */

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

/* ornamne page header  */
.custom-shape-divider-bottom-page-header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  z-index: 2;
}

.custom-shape-divider-bottom-page-header svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 24px;
}

.custom-shape-divider-bottom-page-header .shape-fill {
  fill: #ffffff;
}

/* ornamen page header  */

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

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

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

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

/* Kotak Berbingkai Garis Kiri */
.page-header-v5-box {
  border-left: 4px solid #908d83;
  padding-left: 24px;
}
/* page Header  */

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

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

.custom-shape-divider-bottom-galeri .shape-fill {
  fill: #ffffff;
}

/* ornamen galeri  */

/* ornamen footer  cta */
.custom-shape-divider-bottom-footer {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

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

.custom-shape-divider-bottom-footer .shape-fill {
  fill: #1569b4;
}

/* ornamen cta */

/* .ornamen-tugu {
  position: absolute;
  height: 100%;
  width: 500px;
  left: 0;
  bottom: 0;
  opacity: 0.15;
  object-fit: cover;
} */

.ornamen-quote {
  position: absolute;
  width: 70px !important;
  height: 70px !important;
  opacity: 0.04;
  right: 0;
  top: -30px;
}

/* Ornamen card rental  */
.ornamen-card-rental {
  position: absolute;
  content: "";
  bottom: -20px;
  width: 100% !important;
  left: 0;
  height: 100px !important;
}

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

.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 PAKET LAIN ===== */
.card-paket-lain {
  display: block;
  margin-bottom: 20px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

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

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

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

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

/* Card Testimoni  */

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

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

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

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

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

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

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

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

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

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

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

/* Card wisata detail  */

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

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

/* TITLE */

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

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

/* CONTACT GRID */

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

/* CARD */

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

  background: #fff;
  padding: 30px;

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

  text-decoration: none;

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

  transition: 0.35s;
}

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

/* ICON */

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

  margin: 0 auto 15px;

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

  border-radius: 50%;

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

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

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

/* TEXT */

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

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

/* ADDRESS */

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

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

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

/* SOCIAL */

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

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

/* RESPONSIVE */

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

/* card wisata  */

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

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

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

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

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

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

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

/* Slider Card wisata  */

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

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

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

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

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

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

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

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

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

.price strong {
  color: #469773;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Warna Khusus Exclude */
.item-tag.exclude {
  color: #636e72;
}
.item-tag.exclude i {
  color: #dc3545; /* Merah */
  margin-top: 3px;
}

/* Garis pembatas tipis jika ingin lebih rapi */
.facility-wrapper:hover {
  border-color: #dee2e6;
  background: #fff;
  transition: 0.3s;
}

/* CSS Opsi 1 */
.price-container-modern {
  /* background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); */
  border-radius: 12px;
  /* border: 1px solid #edf2f7; */
}

.price-label-top {
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.currency-symbol {
  font-size: 14px;
  margin-bottom: 8px;
}

.price-amount {
  font-size: 26px;
  /* Ukuran harga yang menonjol */
  font-weight: 800;
  color: var(--second-color);
  /* Biru Primer Bootstrap */
  letter-spacing: -0.5px;
}

.price-divider-custom {
  width: 40px;
  height: 3px;
  background: var(--base-color);
  border-radius: 10px;
  opacity: 0.3;
}

/* CSS Opsi 2 */
.price-badge-wrapper {
  background: #ffffff;
  border-left: 4px solid var(--base-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  border-radius: 8px;
}

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

.fw-extrabold {
  font-weight: 800;
}

/* Container Box */
.start-point-box {
  background: #f8faff;
  border: 1px dashed var(--second-color); /* Garis putus-putus untuk kesan peta/tiket */
  border-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
}

.start-point-box:hover {
  background: #fff;
  border: 1px;
  border-style: solid;
  border-color: var(--base-color);
  box-shadow: 0 5px 15px rgba(13, 110, 253, 0.05);
}

/* Dekorasi Icon Point */
.icon-point-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
}

.dot-main {
  width: 12px;
  height: 12px;
  background-color: var(--base-color);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--base-color);
  z-index: 2;
}

.line-path {
  width: 2px;
  height: 25px;
  background: linear-gradient(
    180deg,
    var(--base-color) 0%,
    rgba(13, 110, 253, 0) 100%
  );
  margin-top: -2px;
}

/* Typography */
.label-start {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #a0aec0;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.location-name {
  line-height: 1.4;
}

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

/* Animasi sederhana pada ikon marker */
.fa-map-marker-alt {
  /* animation: bounce 2s infinite; */
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-1.5px);
  }
}

/* Tip: Pastikan font "Inter" atau "Poppins" terpasang untuk hasil maksimal */

.card-wisata {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-wisata:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

/* IMAGE */
.card-wisata-image {
  position: relative;
  overflow: hidden;
}

.card-wisata-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: 0.4s ease;
}

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

/* BADGE */
.badge-blog {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #4f7cff;
  color: #fff;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 30px;
  font-weight: 500;
  z-index: 2;
}

/* BODY */
.card-wisata-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* TITLE */
.card-wisata-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.4;
  color: #222;
}

/* META */
.card-wisata-meta {
  font-size: 13px;
  color: #777;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* BUTTON */
.btn-baca {
  margin-top: auto;
  text-align: center;
  background: #eef2ff;
  color: #4f7cff;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-baca:hover {
  background: #4f7cff;
  color: #fff;
}

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

/* FIX CARD HEIGHT */
/* .row > [class*="col-"] {
  display: flex;
} */

.card-wisata {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.card-wisata > .p-1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ACCORDION */
.custom-accordion .accordion-item {
  border: none;
  margin-bottom: 8px;
  border-radius: 10px;
  overflow: hidden;
}

.custom-accordion .accordion-button {
  font-size: 13px;
  font-weight: 600;
  background: #f8fafc;
  box-shadow: none;
}

.custom-accordion .accordion-button:not(.collapsed) {
  background: #eef2ff;
  color: var(--base-color);
}

.custom-accordion .accordion-body {
  background: #ffffff;
  padding: 10px 12px;
}

/* LIST JADI HORIZONTAL */
.list-items-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* STYLE TAG JADI BADGE */
.item-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* INCLUDE */
.item-tag.include {
  background: #eafaf1;
  color: #27ae60;
  border: 1px solid #d4efdf;
}

/* EXCLUDE */
.item-tag.exclude {
  background: #fdecea;
  color: 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: #dc3545;
  top: 10%;
}

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

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

/* badge */
.badge-title {
  font-size: 13px;
  letter-spacing: 2px;
  color: #dc3545;
  text-transform: uppercase;
}

/* title */
.section-custom h1 {
  font-weight: 800;
  margin-top: 10px;
}

/* desc */
.section-custom div {
  color: #666;
}

.badge-title {
  position: relative;
  display: inline-block;
}

.badge-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: #dc3545;
  transition: 0.4s;
  transform: translateX(-50%);
}

.badge-title:hover::after {
  width: 100%;
}

.badge-title {
  position: relative;
  transition: 0.3s;
}

.badge-title:hover {
  text-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
}
/* Section Custom  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Card Paket Wisata  */

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

.custom-shape-divider-bottom-card-rental svg {
  position: relative;
  display: block;
  width: 100%;
  height: 206px;
}

.custom-shape-divider-bottom-card-rental .shape-fill {
  fill: #1569b417;
} */

/* ornamen card rental */

/* Card Paket Wisat  */
/* wrapper supaya ada jarak */
.paket-wrapper {
  margin-top: 20px;
}

/* card utama */
/* CARD paket Wisata*/
.card-paket-wisata {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: 0.35s;

  display: flex;
  flex-direction: column;
  height: 100%;
}

/* hover */
.card-paket-wisata:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* gambar */
.card-img {
  /* aspect-ratio:4/3; */
  object-fit: cover;
  width: 100%;
}

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

/* deskripsi biar tinggi stabil */
.destinasi-wrapper {
  min-height: 120px;
}

/* price selalu di bawah */
.price-wrapper {
  margin-top: auto;
  text-align: center;
}

/* label */
.price-label {
  font-size: 14px;
  color: #777;
  display: block;
  margin-bottom: 5px;
}

/* harga */
.price-value {
  font-size: 20px;
  font-weight: 600;
  color: #ff6b00;
}

/* tombol */
/* BUTTON WHATSAPP MODERN */

.btn-wa-modern {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 5px 10px;
  border-radius: 50px;
  background: var(--base-color);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: 0.35s;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* ICON */

.wa-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--base-color);
  font-size: 20px;
  transition: 0.35s;
}

/* TEXT */

.wa-text {
  position: relative;
  z-index: 2;
}

/* HOVER EFFECT */

/* .btn-wa-modern:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: #1b67b0;
  transition: 0.4s;
  z-index: 1;
} */

.btn-wa-modern:hover:before {
  width: 100%;
}

.btn-wa-modern:hover {
  transform: translateY(-3px);
  color: #fff;
}

.btn-wa-modern:hover .wa-icon {
  transform: rotate(10deg) scale(1.1);
  z-index: 3;
}
/* Card Paket Wisat  */

/* button */
.btn-wrapper {
  text-align: center;
  margin-top: 10px;
}

/* btn cta  */
/* Base Style Button Pill */
.btn-pill-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 50px;
  /* Membuat bentuk pill sempurna */
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  letter-spacing: 0.5px;
}

/* Variasi Warna Kuning (Gold Gradient) */
.btn-pill-yellow {
  background: linear-gradient(135deg, #ffd450 0%, #ddbc60 100%);
  color: #000000;
  box-shadow: 0 4px 15px rgba(221, 188, 96, 0.3);
}

.btn-pill-yellow:hover {
  background: linear-gradient(135deg, #ddbc60 0%, #ffd450 100%);
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(221, 188, 96, 0.4);
}

/* Variasi Warna Hitam */
.btn-pill-black {
  background-color: #000000;
  color: #ffd450;
  /* Teks kuning agar kontras */
  border: 2px solid #ffd450;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-pill-black:hover {
  background-color: #ffd450;
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 212, 80, 0.3);
}

/* Animasi Ikon saat Hover */
.btn-pill-custom i {
  transition: transform 0.3s ease;
}

.btn-pill-custom:hover i {
  transform: scale(1.2);
}

/* Responsif Mobile */
@media (max-width: 576px) {
  .py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .btn-pill-custom {
    width: 100%;
    padding: 10px 20px;
  }
}
/* 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: #dc3545;
}
.harga-asli {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.badge-diskon {
  background: #dc3545;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.btn-beli-buku {
  background: linear-gradient(135deg, #0b1a5d, #0928af);
  color: #fff !important;
  padding: 6px 15px;
  font-size: 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
/* Card Buku & Kategori  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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: #0d6efd;
  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: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.accent-card:hover .round-avatar {
  background: #0d6efd;
}

.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  */
/* CSS Opsi 2 */
.letter-spacing-2 {
  letter-spacing: 2px;
}

.card-premium {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: 0.3s;
}

.card-premium:hover {
  border-color: #212529;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.premium-img-box {
  /* padding: 20px; */
  /* height: 200px; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px dashed #e0e0e0;
}

.premium-img-box img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.premium-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f5f5f5;
}

.premium-list li:last-child {
  border-bottom: none;
}

.premium-actions {
  border-top: 1px solid #e0e0e0;
}

.btn-half {
  width: 50%;
  text-align: center;
  padding: 14px 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}

.btn-dark-outline {
  background: #fff;
  color: #212529;
  border-right: 1px solid #e0e0e0;
}

.btn-dark-outline:hover {
  background: #f8f9fa;
  color: #000;
}

.btn-dark-solid {
  background: #212529;
  color: #fff;
}

.btn-dark-solid:hover {
  background: #000;
  color: #fff;
}

/* card unit rental  */

/* 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  */
.col-lg-2-4 {
  flex: 0 0 auto;
  width: 20%;
}

@media (max-width: 991px) {
  .col-lg-2-4 {
    width: 33.333%;
  }
}

@media (max-width: 767px) {
  .col-lg-2-4 {
    width: 50%;
  }
}

.rental-e5 {
  background: white;
  border-radius: 16px;
  padding: 16px 12px 18px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.35s ease;
  height: 100%;
  border-bottom: 3px solid transparent;
}

.rental-e5:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 35px rgba(52, 152, 219, 0.12);
  /* border-bottom-color: var(--second-color); */
}

.rental-img-e5 {
  /* height: 140px; */
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 10px;
  aspect-ratio: 1/1;
}

.rental-img-e5 img {
  transition: transform 0.5s ease;
}

.rental-e5:hover .rental-img-e5 img {
  transform: scale(1.08);
}

.rental-price-big-e5 {
  margin-bottom: 12px;
  font-size: 16px;
}

.rental-btn-e5 {
  display: block;
  background: var(--base-color);
  color: white;
  padding: 7px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.rental-btn-e5:hover {
  background: var(--second-color);
  color: #1e293b;
  letter-spacing: 1px;
}

.btn-sm-3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--base-color);
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

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

.btn-sm-3:hover::after {
  width: 100%;
}

.btn-sm-3:hover {
  color: #2980b9;
  gap: 10px;
}

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

.btn-sm-3:hover i {
  transform: translateX(4px);
}

/* Style dasar teks judul & underline */
.title-hover-effect {
  background: linear-gradient(135deg, #0284c7, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.underline-accent {
  height: 3px;
  background: linear-gradient(90deg, #0284c7, #7c3aed);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
  border-radius: 2px;
}

/* Aktifkan efek underline saat card (.rental-e5) di-hover */
.rental-e5:hover .underline-accent {
  transform: scaleX(1);
}
/* 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 BASE STYLE ==================== */
.ly-layanan-cine-v2 .cine-card {
  background: #0b0f19;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  margin-bottom: 30px;
  height: 360px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.ly-layanan-cine-v2 .cine-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Latar Belakang Gradasi Sinematik */
.ly-layanan-cine-v2 .cine-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(15 23 42 / 22%) 20%,
    rgb(0 0 0 / 20%)
  );
  z-index: 2;
  transition: background 0.4s ease;
}

/* Container Konten */
.ly-layanan-cine-v2 .cine-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 25px;
  z-index: 3;
}

/* ==================== ORNAMEN BINGKAI ==================== */
.ly-layanan-cine-v2 .cine-ornament {
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  z-index: 2;
  pointer-events: none;
  transition: all 0.5s ease;
}

.ly-layanan-cine-v2 .cine-ornament::before,
.ly-layanan-cine-v2 .cine-ornament::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #3189b9;
  border-style: solid;
  transition: all 0.5s ease;
}

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

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

/* ==================== ELEMEN TEKS & DESKRIPSI ==================== */
.ly-layanan-cine-v2 .cine-desc {
  font-size: 13px;
  color: #cbd5e1;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s ease;
  max-height: 0;
  overflow: hidden;
  line-height: 1.5;
}

/* ==================== TOMBOL AKSI (OPSI 1) ==================== */
.ly-layanan-cine-v2 .cine-action-btns {
  display: flex;
  gap: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(20px);
  transition:
    max-height 0.4s ease,
    opacity 0.4s ease,
    transform 0.4s ease,
    margin 0.4s ease;
  width: 100%;
  justify-content: center;
}

.ly-layanan-cine-v2 .cine-action-btns a {
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.ly-layanan-cine-v2 .btn-cine-detail {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.ly-layanan-cine-v2 .btn-cine-wa {
  background: #25d366;
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}

/* ==================== HOVER INTERACTION STYLES ==================== */
.ly-layanan-cine-v2 .cine-card:hover .cine-img {
  transform: scale(1.06);
  filter: blur(2px);
  opacity: 0.45;
}

.ly-layanan-cine-v2 .cine-card:hover::before {
  background: rgb(0 38 130 / 85%);
}

/* Pergerakan Ornamen Mengkerut ke Dalam */
.ly-layanan-cine-v2 .cine-card:hover .cine-ornament {
  inset: 22px;
  border-color: rgba(49, 137, 185, 0.35);
}

.ly-layanan-cine-v2 .cine-card:hover .cine-ornament::before {
  top: -2px;
  left: -2px;
}

.ly-layanan-cine-v2 .cine-card:hover .cine-ornament::after {
  bottom: -2px;
  right: -2px;
}

/* Ekspansi Konten & Tombol saat Hover */
.ly-layanan-cine-v2 .cine-card:hover .cine-desc {
  opacity: 1;
  transform: translateY(0);
  max-height: 80px;
  margin-top: 12px;
}

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

/* State Hover pada Masing-masing Tombol */
.ly-layanan-cine-v2 .btn-cine-detail:hover {
  background: #ffffff;
  color: #0f172a;
  border-color: #ffffff;
}

.ly-layanan-cine-v2 .btn-cine-wa:hover {
  background: #20ba5a;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(37, 211, 102, 0.35);
  color: #ffffff;
}
/* card layanan  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================
      TOMBOL DETAIL
      ========================= */
.btn-detail-layanan {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(90deg, var(--base-color), var(--second-color));
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
}

.btn-detail-layanan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
  color: #fff;
}

/* Ikon Panah Bulat di dalam Tombol */
.btn-arrow {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  transition: all 0.3s ease;
  margin-right: -5px; /* Menarik ikon sedikit ke kanan agar balance */
}

/* Panah bergeser saat tombol di-hover */
.btn-detail-layanan:hover .btn-arrow {
  transform: translateX(4px);
  background: #ffffff;
  color: var(--base-color);
}

/* wrapper */
.cta-layanan {
  position: relative;
}

/* text */
.cta-text {
  font-size: 16px;
  color: var(--base-color);
  font-weight: 600;
}

/* button */
.btn-lainnya-modern {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 22px;

  /* background: linear-gradient(135deg, var(--base-color), var(--second-color)); */
  background-color: transparent;
  color: white;
  font-size: 14px;
  font-weight: 600;

  border-radius: 50px;
  text-decoration: none;
  border: 2px solid white;
  position: relative;
  overflow: hidden;
  transition: 0.35s;
}

/* icon */
.btn-lainnya-modern i {
  transition: 0.3s;
}

/* efek glow halus */
.btn-lainnya-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  transition: 0.3s;
}

/* hover */
.btn-lainnya-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  color: var(--base-color);
}

.btn-lainnya-modern:hover::before {
  opacity: 1;
}

.btn-lainnya-modern:hover i {
  transform: translateX(6px);
}
/* Card layanan  */

.judul-artikel {
  position: relative;
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  color: #1c1c1c;
  margin-bottom: 1rem;
}

.judul-artikel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px; /* jarak antara teks dan garis */
  width: 100%;
  height: 2px;
  /* opacity: 30%; */
  background-color: var(--second-color); /* biru */
  border-radius: 2px;
}

.service-section {
  display: flex;
  gap: 24px;
  justify-content: center;
  padding: 40px;
  background-color: #f9f9f9;
}

.card-lay {
  /* width: 300px; */
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-lay img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.card-content {
  /* padding: 20px; */
  text-align: center;
}

.card-content h3 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.1rem;
}

.card-content p {
  color: #666;
  font-size: 0.95rem;
}

.card-footer {
  border-top: 1px solid #eee;
  text-align: center;
  padding: 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #cc8800;
  cursor: pointer;
}

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

/* Card tengah dengan latar khusus */
.card-lay.highlighted {
  background-color: #bb8645;
  color: white;
}

.card-lay:hover .card-footer {
  background-color: var(--base-color);
  color: white;
}
.card-lay:hover .link-layanan {
  color: white;
}
.card-lay.highlighted .card-lay-content p,
.card-lay.highlighted .card-lay-content h3,
.card-lay.highlighted .card-lay-footer {
  color: white;
}

.card-lay.highlighted .card-lay-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.judul-layanan {
  color: #000;
}
.card-lay:hover .judul-layanan {
  color: var(--base-color) !important;
}

/* Point Welcome text  */

.point-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 25px;
  margin-top: 20px;
}

.point-item {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #1f2937;
  position: relative;
  transition: all 0.3s ease;
}

.point-item i {
  color: var(--base-color);
  margin-right: 8px;
  font-size: 14px;
}

.point-item:hover {
  transform: translateX(5px);
  color: var(--base-color);
}

.point-badge-wrapper {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.point-badge {
  padding: 6px 16px;
  border-radius: 50px;
  background: rgba(13, 110, 253, 0.1);
  color: var(--base-color);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.point-badge:hover {
  background: var(--base-color);
  color: white;
  transform: translateY(-3px);
}

.point-box-wrapper {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.point-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  font-weight: 500;
}

.point-box i {
  background: linear-gradient(135deg, #1e88e5, #0d47a1);
  color: white;
  font-size: 12px;
  padding: 8px;
  border-radius: 50%;
}

.point-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(13, 71, 161, 0.15);
}

/* Point Welcome Text  */

.divider-title {
  content: "";
  height: 30px;
  width: 2px;
  background-color: grey;
  /* padding: 10px; */
}

.contact-label {
  text-decoration: underline;
  text-decoration-color: var(--second-color); /* Warna garis merah */
  text-decoration-thickness: 2px; /* Ketebalan garis, bisa disesuaikan */
  text-underline-offset: 5px; /* Jarak antara teks dan garis */
}

.contact-card {
  width: 100%;
  background-color: #ffffff; /* Latar belakang putih untuk kartu */
  border-radius: 12px; /* Sudut membulat */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Efek bayangan */
  padding: 20px;
  display: flex; /* Menggunakan flexbox untuk ikon dan teks */
  align-items: center; /* Mensejajarkan ikon dan teks secara vertikal */
  gap: 15px; /* Jarak antara ikon dan teks */
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out; /* Efek transisi saat hover */
  /* cursor: pointer; Menunjukkan bahwa kartu bisa diinteraksi */
}

.contact-card:hover {
  transform: translateY(-3px); /* Sedikit naik saat hover */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); /* Bayangan lebih intens saat hover */
}

.icon-kontak {
  min-width: 40px;
  max-width: 40px;
  background: var(--base-color);
  color: var(--second-color);
  font-size: 28px;
  display: flex !important;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  min-height: 40px;
  max-height: 40px;
  align-items: center;
}

.highlight-text {
  position: relative; /* Penting untuk pseudo-elemen ::after */
  display: inline-block; /* Agar lebar garis sesuai teks */
}

/* Garis bergerak */
.highlight-text::after {
  content: "";
  position: absolute;
  left: 0;
  /* text-align: center; */
  bottom: 20px; /* Posisi di bawah teks */

  width: 150px; /* Lebar garis yang bergerak, sesuaikan jika perlu */
  height: 2px; /* Tinggi garis */
  background: linear-gradient(
    to right,
    #0e67d2,
    #02b7f7
  ); /* Gradien warna garis */
}

/* Card keunggulan  */
.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  */
/* .card-elegant {
  border: 2px solid #000;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.elegant-header {
  background: #000;
}
.elegant-img-box {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-box-elegant {
  border: 1px solid #ffd450;
  border-radius: 12px;
  background: #fffbef;
}

.btn-full-booking {
  display: block;
  width: 100%;
  background: #ffd450;
  color: #000;
  text-align: center;
  padding: 12px;
  font-weight: 800;
  text-decoration: none;
  border-top: 1px solid #000;
}

.btn-full-detail {
  display: block;
  width: 100%;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 8px;
  font-size: 12px;
  text-decoration: none;
} */

/* card rental baru  */

/* Card Highlight  */
.highlight-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 25px;
}

.highlight-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
}

/* Image */
.highlight-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

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

/* Overlay */
.highlight-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2));
  transition: background 0.4s ease;
}

/* Content wrapper */
.highlight-content {
  position: absolute;
  left: 0;
  bottom: -30px;
  width: 100%;
  padding: 0 25px;
  color: #fff;
  z-index: 2;
}

/* Judul default */
.highlight-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  transition: transform 0.4s ease;
}

/* Deskripsi default hidden */
.highlight-desc {
  font-size: 16px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

/* Hover effect */
.highlight-card:hover .highlight-title {
  transform: translateY(-25px);
}

.highlight-card:hover .highlight-desc {
  opacity: 0.8;
  transform: translateY(-23px);
  font-size: 16px;
}

/* Arrow */
.highlight-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 2;
  transition: all 0.3s ease;
}

.highlight-card:hover .highlight-arrow {
  background: white;
  color: black;
}

/* Grid Position */
.highlight-card:nth-child(1) {
  grid-row: 1 / 3;
}

.highlight-card:nth-child(4) {
  grid-column: 2 / 2;
}

/* Responsive */
@media (max-width: 992px) {
  .highlight-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .highlight-card {
    height: 250px;
  }

  .highlight-card:nth-child(1),
  .highlight-card:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Card Highlight  */

/* Card Visi Misi  */

.card-misi {
  background: #f7b21e11;
  border-radius: 5px;
  padding: 10px;
  transition: all 0.35s ease;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.card-visi {
  background: #1a371c0e;
  border-radius: 5px;
  padding: 10px;
  transition: all 0.35s ease;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

/* Hover effect */
.card-visi:hover,
.card-misi:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Title */
.card-visi h3,
.card-misi h3 {
  font-weight: 600;
  margin-bottom: 12px;
}

/* Text */
.card-visi div,
.card-misi div {
  color: #555;
  line-height: 1.7;
}

.card-visi::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: var(--base-color);
  left: 0;
  top: 0;
  border-radius: 10px;
}

.card-misi::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: var(--second-color);
  left: 0;
  top: 0;
  border-radius: 10px;
}

/* Card Visi Misi  */

/* Welcome  */
/* ============================================================
   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: #dc3545;
}

/* SIDEBAR */
.sidebar-kategori {
  position: sticky;
  top: 100px;
  z-index: 10;

  background: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* SCROLL BAR */
.sidebar-kategori::-webkit-scrollbar {
  width: 4px;
}

.sidebar-kategori::-webkit-scrollbar-thumb {
  background: #dc3545;
  border-radius: 10px;
}

/* LIST */
.list-kategori {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-kategori li {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 5px;
  transition: 0.3s;
}

.list-kategori li:hover {
  background: #f1f1f1;
}

.list-kategori li.active {
  background: #dc3545;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

/* CARD */
.card-wisata {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
  height: 100%;
}

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

.card-wisata img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* RESPONSIVE SPACING */
@media (min-width: 768px) {
  .col-md-3 {
    padding-right: 20px;
  }

  .col-md-9 {
    padding-left: 20px;
  }
}

/* ANIMATION BASE */
.wisata-item {
  opacity: 1;
  transform: scale(1);
  transition: all 0.4s ease;
}

/* HIDE ANIMATION */
.wisata-item.hide {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

/* SHOW ANIMATION */
.wisata-item.show {
  opacity: 1;
  transform: scale(1);
}

/* GRID SMOOTH */
.wisata-list {
  transition: all 0.3s ease;
}

/* card wisata kategori  */

/* card wisata  */
/* 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: #dc3545; */
}

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

.keunggulan-card-modern:hover h5 {
  color: #dc3545;
}

/* Card Keunggulan  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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