@import url("https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Lexend:wght@100..900&family=Mukta:wght@200;300;400;500;600;700;800&family=PT+Sans+Narrow:wght@400;700&family=Share+Tech&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");

/* 
"Share Tech", sans-serif;
"Karla", sans-serif;
"Titillium Web", sans-serif;
"Lexend", sans-serif;
"Mukta", sans-serif;
"PT Sans Narrow", sans-serif;
*/

:root {
  --base-color: #407709;
  --second-color: #82c11b;
  --third-color: #5f5e64;
  --four-color: #3f78e0;
  --very-light-base-color: #fbeee1;
  --bs-primary-rgb: 18, 127, 74;
  --bs-secondary-rgb: 170, 176, 188;
  --primary-font: "Karla", sans-serif;
  --alt-font: "Karla", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.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),
    var(--second-color),
    var(--base-color)
  ); /* Safari 5.1-6 */
  background: linear-gradient(
    90deg,
    var(--base-color),
    var(--second-color),
    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;
  line-height: 28px !important;
}

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

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

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;
  }
  .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;
  /* Set base background putih agar bagian transparan gradasi mengarah ke putih */
  background-color: #ffffff;
}

/* BACKGROUND IMAGE (DENGAN GRADASI PUDAR ATAS & BAWAH) */
.background-welcome::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../Aset Desain/pakai/bg/4.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  opacity: 0.05;
  /* mix-blend-mode: overlay;  */

  /* 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-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/8.webp");

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

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

.background-rental {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* 🔥 BASE BACKGROUND: Navy Gelap Premium */
  background-color: #060d19;
  color: #ffffff;
}

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

  /* 🔥 OVERLAY DUAL GRADIENT: Gradasi Navy & Kilau Emas diatas Gambar */
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(185, 135, 26, 0.25) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(243, 229, 173, 0.15) 0%,
      transparent 35%
    ),
    linear-gradient(
      180deg,
      rgba(6, 13, 25, 0.85) 0%,
      rgba(10, 25, 47, 0.92) 100%
    ),
    url("../Aset Desain/pakai/bg/7.webp");

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

  /* Menjaga tone gambar tetap hangat dan selaras */
  filter: brightness(0.9) contrast(1.1);

  /* Opacity dibuat 1 karena tingkat kegelapan sudah diatur oleh linear-gradient */
  opacity: 1;

  z-index: -1;
}

/* ==================== ORNAMEN TAMBAHAN (NO BUG) ==================== */
.ornamen-cloud {
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: -5px;
  left: 0;
  /* z-index: 1; */
}
/* ==================== ORNAMEN TAMBAHAN (NO BUG) ==================== */

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

  opacity: 0.07;
  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;
  /* Warna dasar diubah menjadi putih penuh */
  background-color: #ffffff;
}

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

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

.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: url("../Aset Desain/pakai/bg/2.webp") center/contain no-repeat;
}

/* 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.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  z-index: -1;
  opacity: 0.03;
}

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

.background-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      to bottom,
      rgb(255 255 255 / 80%),
      rgb(0 0 0 / 0%) 40%,
      rgb(255 255 255) 95%
    ),
    url("../Aset Desain/pakai/bg/4.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
  opacity: 0.08;
}
/*==========================================================================
* Navbar
==========================================================================*/
/* OPSI 3: KOTAK MINIMALIS (ROUNDED BOX) */
.navbar-nav .nav-link {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  /* padding-left: 14px !important; */
  /* padding-right: 14px !important; */
  border-radius: 8px;
  color: #475569 !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* HOVER STATE */
.navbar-nav .nav-link:hover {
  color: var(--base-color) !important;
  background-color: rgba(241, 245, 249, 0.8);
}

/* ACTIVE STATE */
.navbar-nav .nav-link.active {
  color: var(--base-color) !important;
  font-weight: 600;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.navbar-stick:not(.navbar-dark) {
  background: white;
  /* color: red; */
}

.navbar-stick .nav-link {
  /* color: var(--base-color) !important; */
  color: black !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 */
/* --- OPSI 2: Clean White & Geometric Gold Frame --- */
.welcome-gold-op2 {
  background-color: #ffffff;
}

.welcome-gold-op2 .frame-gold-box {
  position: relative;
  padding: 15px;
}

.welcome-gold-op2 .frame-gold-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border-top: 3px solid #edcc7d;
  border-left: 3px solid #edcc7d;
  z-index: 0;
}

.welcome-gold-op2 .frame-gold-box::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  border-bottom: 3px solid #b9871a;
  border-right: 3px solid #b9871a;
  z-index: 0;
}

.welcome-gold-op2 .badge-gold-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #edcc7d;
  padding: 6px 18px 6px 12px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(185, 135, 26, 0.15);
}

.welcome-gold-op2 .badge-gold-ribbon .icon-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #edcc7d 0%, #b9871a 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.welcome-gold-op2 .underline-gold {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #edcc7d 0%, #b9871a 100%);
  display: block;
  border-radius: 2px;
}

.badge-split {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.badge-split-label {
  background: #212529;
  color: #ffffff;
  padding: 6px 12px;
}

.badge-split-val {
  background: linear-gradient(135deg, #edcc7d 0%, #b9871a 100%);
  color: #ffffff;
  padding: 6px 14px;
}
/* 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  */
/* Reset dasar agar konsisten */
.cta-sidebar-vert * {
  box-sizing: border-box;
}

.cta-sidebar-vert {
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  min-height: 180px;
  position: relative;
  background: #fff;
}

/* Label Samping: Gradasi Gold Solid */
.cta-sidebar-vert-label {
  flex: 0 0 55px;
  background: linear-gradient(
    180deg,
    #bf953f 0%,
    #fcf6ba 25%,
    #b38728 50%,
    #fcf6ba 75%,
    #aa771c 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-weight: 900;
  letter-spacing: 5px;
  font-size: 14px;
  text-transform: uppercase;
  z-index: 2;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.cta-sidebar-vert-main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 40px;
  z-index: 2;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Area Gambar (Desktop) */
.cta-sidebar-vert-img {
  flex: 0 0 45%;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Gradasi Halus Desktop */
.cta-sidebar-vert-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 10%,
    rgba(255, 255, 255, 0.8) 30%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Gaya Tombol Premium Gold */
.cta-sidebar-vert-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Efek Kilau pada Tombol saat Hover */
.cta-sidebar-vert-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transition: all 0.6s;
  z-index: -1;
}

.cta-sidebar-vert-btn:hover::before {
  left: 100%;
}

/* Tombol Telepon: Gold Gelap */
.cta-sv-tel {
  background: linear-gradient(45deg, #aa771c, #bf953f);
  box-shadow: 0 4px 15px rgba(187, 147, 60, 0.3);
}

.cta-sv-tel:hover {
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(187, 147, 60, 0.5);
}

/* Tombol WA: Gold Terang */
.cta-sv-wa {
  background: linear-gradient(45deg, #bf953f, #fcf6ba);
  color: #543c0c !important;
  box-shadow: 0 4px 15px rgba(252, 246, 186, 0.4);
}

.cta-sv-wa:hover {
  color: #543c0c !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(252, 246, 186, 0.6);
}

/* --- RESPONSIVE ADJUSTMENTS --- */

/* Khusus Desktop: Paksa background teks kembali putih polos */
@media (min-width: 992px) {
  .cta-sidebar-vert-main {
    background-image: none !important;
    background-color: #fff !important;
  }
}

/* Khusus Mobile & Tablet: Bikin lebih tinggi & pastikan background gambar tampil */
@media (max-width: 991px) {
  .cta-sidebar-vert {
    min-height: 360px; /* Tinggi disesuaikan agar lebi tinggi dan lega */
  }

  .cta-sidebar-vert-main {
    padding: 45px 24px;
  }

  .cta-sidebar-vert-img {
    display: none;
  }
}

@media (max-width: 576px) {
  .cta-sidebar-vert {
    border-radius: 0; /* Full lebar tanpa sudut rounded di layar HP kecil */
  }

  .cta-sidebar-vert-label {
    display: 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  */
.ft-overlay-glass {
  background: radial-gradient(circle at top center, rgba(14, 46, 29, 0.92) 0%, rgba(3, 16, 9, 0.98) 100%);
  z-index: 1;
}

footer .container {
  z-index: 2;
}

.glass-card-container {
  /* background: rgba(255, 255, 255, 0.03); */
  /* border: 1px solid rgba(74, 222, 128, 0.2); */
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 1rem 20px;
}

.ft-pill-nav {
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 18px;
  border-radius: 50px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s ease;
}

.ft-pill-nav:hover {
  background: #22c55e;
  color: #04140c !important;
  transform: translateY(-2px);
}

.contact-card-full {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 12px;
  padding: 14px 18px;
  transition: border-color 0.3s ease;
}

.contact-card-full:hover {
  border-color: #4ade80;
}

.sosmed-btn-glass {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 50%;
  color: #4ade80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.sosmed-btn-glass:hover {
  background: #22c55e;
  color: #04140c;
  transform: translateY(-3px);
}
/* 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;
  }
}

/* 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: 500;
  font-size: 14px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* kontak  */
.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 */
/* --- Section Background & Glow --- */
.wrapper-stats-gold {
  background-color: #fafafa;
}

.stats-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 200px;
  background: var(--gold-gradient);
  opacity: 0.08;
  filter: blur(100px);
  border-radius: 50%;
  z-index: 0;
}

/* --- Title Component --- */
.text-gold-premium {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

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

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

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

.border-gold-subtle {
  border-color: rgba(212, 175, 55, 0.2) !important;
}

.clip-badge {
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
}

.title-underline-center::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--gold-gradient);
  border-radius: 2px;
}

/* --- Border Di Kanan Item (Responsive Safe) --- */
.stat-item {
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.stat-item:hover {
  background-color: var(--gold-light-bg);
}

/* Garis pembatas halus di sisi kanan */
.has-border-end::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(212, 175, 55, 0.3),
    transparent
  );
}

/* Responsive Border Fixes */
@media (max-width: 991.98px) {
  /* Pada mobile (2 kolom per baris), hapus border kanan pada elemen genap (2, 4) */
  .col-6:nth-child(2n) .has-border-end::after {
    display: none;
  }

  /* Tambahkan garis horizontal antar baris di mobile */
  .col-6:nth-child(-n + 2) .stat-item {
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  }
}
/* statistik  */

/* artikel detail  */
.sticky-share-minimal {
  position: sticky;
  top: 100px;
}
.share-minimal {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 15px;
}
.share-minimal:hover {
  border-color: var(--base-color);
  color: var(--base-color);
  transform: translateY(-3px);
}
.share-minimal-bottom {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f5f5f5;
  color: #555;
  padding: 6px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.share-minimal-bottom:hover {
  background: var(--base-color);
  color: #fff;
}
.related-minimal {
  transition: all 0.3s ease;
}
.related-minimal:hover h6 {
  color: var(--base-color) !important;
}
.related-minimal img {
  transition: transform 0.4s ease;
}
.related-minimal:hover img {
  transform: scale(1.1);
}
.sticky-sidebar-minimal {
  position: sticky;
  top: 100px;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* artikel detail  */

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

/* 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 Detail 2  */
.btn-wa-shine {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.btn-wa-shine .shine-effect-btn {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 30%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(25deg);
  transition: all 0.6s ease;
  pointer-events: none;
}

.btn-wa-shine:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.5);
}

.btn-wa-shine:hover .shine-effect-btn {
  left: 120%;
}

.btn-wa-shine:active {
  transform: translateY(0);
}

.mySwiper-lainnya .swiper-slide {
  display: flex;
  height: auto;
}

/* Mematikan Box-Shadow saat Hover pada Card */
.mySwiper-lainnya .layanan-card-equal-6,
.mySwiper-lainnya .layanan-card-equal-6:hover {
  width: 100%;
  box-shadow: none !important;
  transform: none !important;
}

/* Mengunci area konten agar deskripsi tidak bergerak/terpotong saat Hover */

/* Deskripsi tetap stabil tanpa efek hover */


/* Efek Hover hanya berlaku halus pada Judul */
.mySwiper-lainnya .layanan-card-title {
  transition: color 0.2s ease;
}

.mySwiper-lainnya .layanan-card-title:hover {
  color: #059669;
  /* Sesuaikan warna highlight utama Anda */
}

.cursor-pointer {
  cursor: pointer;
}

.opt5-thumb {
  border-color: transparent !important;
  opacity: 0.5;
  transition: all 0.25s ease;
}

.opt5-thumb.active,
.opt5-thumb:hover {
  border-color: #059669 !important;
  opacity: 1;
}
/* 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  */

/* Kontak Section  */
/* Glassmorphism Background */
.card-glass-gold {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 8px 32px 0 rgba(212, 175, 55, 0.12);
}

/* Soft Border Icon Box */
.icon-box-glass {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #f0cf65;
  color: #b8860b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.contact-item-glass:hover .icon-box-glass {
  background: linear-gradient(135deg, #f0cf65, #b8860b);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3);
}

/* Pill Floating Social Icons */
.social-pill {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fcf6ba, #e2c15d);
  color: #5c4308;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.social-pill:hover {
  transform: scale(1.25) rotate(-2deg);
  color: #000;
  box-shadow: 0 6px 15px rgba(226, 193, 93, 0.5);
}

/* Kontak Section  */

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

.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*/
/* Grid Bento Responsif */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); Default 2 kolom untuk mobile
    gap: 12px;
}

/* Tablet & Desktop Layout */
@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (min-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Kartu Gambar & Ratio */
.bento-card {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
    text-decoration: none;
}

.bento-card picture, 
.bento-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bento-card img {
    aspect-ratio: 1 / 1; /* Membuat gambar berbentuk presisi persegi di mobile */
    transition: transform 0.3s ease;
}

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

.bento-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    z-index: 2;
}

@media (max-width: 576px) {
    .bento-content h3 {
        font-size: 13px !important;
        line-height: 1.3;
    }
}
/* portofolio  */

/* card layanan baru*/

.grid-layanan-6 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Responsive Grid Adjustments */
@media (min-width: 576px) {
  .grid-layanan-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .grid-layanan-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid-layanan-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

.layanan-card-equal-6 > a {
  display: block;
  width: 100%;
  height: 100%; /* atau height sesuai container gambar sebelumnya */
}

/* Jika CSS gambar Anda bergantung pada pembungkus langsung */
.layanan-card-equal-6 a picture,
.layanan-card-equal-6 a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Main Card Container & Hover Lift */
.layanan-card-equal-6 {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 320px;
  background-color: #f1f5f9;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s ease;
}

.layanan-card-equal-6:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
}

/* Smooth Image Scale */
.layanan-card-equal-6 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.layanan-card-equal-6:hover img {
  transform: scale(1.08);
}

/* Notch Content Container with Padding Expansion */
.layanan-card-equal-6 .layanan-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #ffffff;
  padding: 12px 14px;
  border-top-right-radius: 18px;
  max-width: 92%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition:
    background-color 0.3s ease,
    padding 0.3s ease;
}

.layanan-card-equal-6:hover .layanan-card-content {
  background-color: #ffffff;
  /* padding-right: 18px; */
}

/* Title Slide & Color Accent Effect */
.layanan-card-equal-6 .layanan-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
  line-height: 1.2;
  transition:
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom:0px !important;
}

.layanan-card-equal-6:hover .layanan-card-title {
  color: #047857; /* Ubah warna judul saat hover */
  transform: translateX(4px); /* Judul bergeser sedikit ke kanan */
}

/* Description Fade & Slide UP Effect */
.layanan-card-equal-6 .layanan-card-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.3;
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.layanan-card-equal-6:hover .layanan-card-desc {
  color: #334155;
  transform: translateY(-1px);
}

/*end card layanan baru*/

/* card layanan tambahan  */
/* Colors & Utilities */
.text-dark-green {
  color: #064e3b;
}
.text-emerald {
  color: #059669;
}
.title-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sidebar Option 4 Styles */
.opt-sb4-item {
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.opt-sb4-img {
  transition: transform 0.4s ease;
}
.opt-sb4-item:hover {
  transform: translateY(-3px);
  border-color: #059669 !important;
  box-shadow: 0 6px 16px rgba(6, 78, 59, 0.1);
}
.opt-sb4-item:hover .opt-sb4-img {
  transform: scale(1.1);
}
.opt-sb4-item:hover .opt-sb4-title {
  color: #059669 !important;
}

/* Sidebar Default Link & Image Hover */
.opt-img {
  transition: transform 0.4s ease;
}
.opt-title {
  transition: color 0.2s ease;
}
.opt-sidebar-link:hover .opt-img {
  transform: scale(1.1);
}
.opt-sidebar-link:hover .opt-title {
  color: #059669 !important;
}

/* Share Buttons & Card Styles */
.share-grad-card {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border-color: #a7f3d0 !important;
}
.opt-share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s;
}
.opt-share-btn:hover {
  transform: translateY(-2px);
  color: #fff;
}
.opt-square-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.opt-square-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
/* card layanan tambahan  */

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

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

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

/* Card Galeri   */
.bento-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */
  grid-auto-rows: 240px;
  gap: 20px;
}

@media (min-width: 992px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .bento-item:nth-child(4) {
    grid-column: span 2;
  }
}

.bento-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  display: block;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

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

.bento-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  color: #fff;
  transition: transform 0.3s ease;
}

.bento-card:hover img {
  transform: scale(1.07);
}
/* Card Galeri   */

/* Card Artikel  */
/* Card Container */
.card-float-gold {
  background: #ffffff;
  border-radius: 16px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(212, 160, 23, 0.15); /* Ringkasan border tipis gold */
}

.card-float-gold:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(212, 160, 23, 0.2);
  border-color: rgba(212, 160, 23, 0.4);
}

/* Container Gambar */
.card-float-img {
  position: relative;
  height: 210px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.card-float-img img {
  transition: transform 0.6s ease;
}

.card-float-gold:hover .card-float-img img {
  transform: scale(1.08);
}

/* Overlay Gradasi Kuning Gold */
.card-float-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(184, 134, 11, 0.75), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.card-float-gold:hover .card-float-overlay {
  opacity: 1;
}

/* Badge Tanggal */
.card-float-date {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #8b6508;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Tombol Floating Gold */
.card-float-btn {
  position: absolute;
  right: 20px;
  top: 185px; /* Menyilangkan batas gambar dan teks */
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #f39c12 0%, #d4a017 50%, #b8860b 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 3;
  box-shadow: 0 8px 20px rgba(212, 160, 23, 0.45);
  transition: all 0.3s ease;
}

.card-float-gold:hover .card-float-btn {
  background: linear-gradient(135deg, #ffd700 0%, #f39c12 50%, #d4a017 100%);
  transform: scale(1.1) rotate(-45deg);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(212, 160, 23, 0.6);
}

/* Card Body */
.card-float-body {
  padding: 28px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.card-float-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
}

.card-float-title a {
  color: #2b2b2b;
  text-decoration: none;
  transition: color 0.3s ease;
}

.card-float-gold:hover .card-float-title a {
  color: #b8860b;
}

/* Stats View */
.card-float-stats {
  font-size: 12px;
  color: #888;
  border-top: 1px solid #f5efdb;
  padding-top: 12px;
}

.card-float-stats i {
  color: #d4a017;
}
/* 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;
  }
}

/* cta navbar  */
/* --- OPSI 2: Pulsing Badge (Custom Gold Palette) --- */
.btn-wa-gold-pulse {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 20px 6px 8px;
  background: linear-gradient(135deg, #edcc7d 0%, #b9871a 100%);
  border-radius: 50px;
  color: #ffffff !important;
  /* Teks putih tajam di atas warna gold pekat */
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(185, 135, 26, 0.35);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-wa-gold-pulse .icon-badge-pulse {
  position: relative;
  width: 34px;
  height: 34px;
  background: #ffffff;
  color: #b9871a;
  /* Warna ikon menggunakan gold pekat Anda */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Animasi Pulse Ring Warna Gold Highlight (#edcc7d) */
.btn-wa-gold-pulse .icon-badge-pulse::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: rgba(237, 204, 125, 0.9);
  animation: wa-gold-pulse-ring 1.8s infinite;
  z-index: 0;
}

.btn-wa-gold-pulse .icon-badge-pulse i {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

/* Efek Hover */
.btn-wa-gold-pulse:hover {
  background: linear-gradient(135deg, #f2d793 0%, #a07413 100%);
  box-shadow: 0 6px 20px rgba(185, 135, 26, 0.5);
  transform: translateY(-2px);
  color: #ffffff !important;
}

.btn-wa-gold-pulse:hover .icon-badge-pulse i {
  transform: scale(1.15) rotate(-8deg);
}

@keyframes wa-gold-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}
/* cta navbar  */

/* ##MOBILE HP*/
@media only screen and (max-width: 600px) {
  .navbar-nav .nav-link.active{
    background-color: transparent;
  }
  .navbar-nav .nav-link:hover{
    background-color: transparent;
  }
  .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;
  }
  .banner-badge-wrapper {
    margin-top: 40px;
  }
  .cta-sidebar-vert-btn {
    font-size: 10px !important;
  }
  .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;
  }
  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;
  }

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

/* 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 baru  */
.ft-dual-border {
  border-left: 4px solid #10b981;
  position: relative;
}

.ft-dual-border::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(16, 185, 129, 0.4);
}

.ft-grad-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.ft-grad-link:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0%, transparent 100%);
  transform: translateX(6px);
}

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

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

/* 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 jasa  */
.text-dark-green {
  color: #064e3b;
}

.text-emerald {
  color: #059669;
}

.bg-emerald-soft {
  background-color: #ecfdf5;
  width: 32px;
  height: 32px;
}

/* Mengunci Ukuran Gambar Cover */
.card-cover-wrapper {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

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

.opt-cover-3 {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.opt-cover-3:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(6, 78, 59, 0.12) !important;
}

.opt-cover-3:hover .card-cover-img {
  transform: scale(1.08);
}

.opt-cover-3:hover .opt3-arrow-circle {
  background-color: #059669;
}

.opt-cover-3:hover .opt3-arrow-circle i {
  color: #ffffff;
}

.title-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* card jasa  */

/* Card Keunggulan  */

.collage-2img-wrapper {
  position: relative;
  padding: 20px;
  z-index: 1;
}

/* Bingkai Garis offset ke kanan-bawah */
.collage-2img-wrapper::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 40px;
  right: 0;
  border: 3px solid #0d6efd;
  border-radius: 16px;
  opacity: 0.3;
  z-index: -1;
}

.collage-2img-split {
  display: flex;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.split-col-left,
.split-col-right {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .collage-2img-split {
    flex-direction: column;
  }

  .collage-2img-wrapper {
    padding: 10px;
  }
}

.keunggulan-travel {
  background: linear-gradient(180deg, #f8fbff, #ffffff);
}

.divider:after {
  content: "";
  width: 100%;
  height: 2px;
  background: currentColor;
  display: block;
  margin-top: -5px;
}

/* Badge */
.badge-keunggulan {
  display: inline-block;
  padding: 6px 16px;

  /* Gradient kuning gold */
  background: linear-gradient(135deg, #ffd450, #ddbc60);
  color: #000000;

  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;

  letter-spacing: 0.5px;

  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);

  transition: all 0.3s ease;
}

/* Hover effect biar hidup */
.badge-keunggulan:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

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

/* CTA section baru  */
.cta-opt3-sec {
  background: #f4f9f4;
}

.img-stack-opt3 {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  min-height: 350px;
}

.img-stack-opt3 .m-img-main {
  width: 85%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 0;
  box-shadow: -10px 10px 0px #cce3d8;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 1;
  transition: 0.3s;
}

.img-stack-opt3 .m-img-sub1 {
  width: 40%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 5px solid #f4f9f4;
  position: absolute;
  top: -10px;
  right: 0;
  z-index: 2;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}

.img-stack-opt3 .m-img-sub2 {
  width: 35%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 5px solid #f4f9f4;
  position: absolute;
  bottom: 0;
  right: 15%;
  z-index: 2;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}

.img-stack-opt3:hover .m-img-main {
  box-shadow: -15px 15px 0px #a3c9b6;
  transform: translate(5px, -5px);
}

.img-stack-opt3:hover .m-img-sub1 {
  transform: translateY(-10px);
}

.img-stack-opt3:hover .m-img-sub2 {
  transform: translateY(10px);
}

.btn-darkgreen-opt3 {
  background: #1f4e3d;
  color: #fff !important;
  padding: 14px 28px;
  border-radius: 0;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
  border: 1px solid #1f4e3d;
}

.btn-darkgreen-opt3:hover {
  background: transparent;
  color: #1f4e3d !important;
}

/* Penyesuaian Responsif Mobile */
@media (max-width: 991.98px) {
  .img-stack-opt3 {
    max-width: 100%;
    min-height: 260px;
    padding-left: 10px;
  }

  .img-stack-opt3 .m-img-main {
    width: 80%;
    top: 15px;
    left: 10px;
    box-shadow: -6px 6px 0px #cce3d8;
  }

  .img-stack-opt3 .m-img-sub1 {
    width: 38%;
    top: 0;
    right: 5px;
    border-width: 3px;
  }

  .img-stack-opt3 .m-img-sub2 {
    width: 34%;
    bottom: -10px;
    right: 10%;
    border-width: 3px;
  }

  .btn-darkgreen-opt3 {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
  }
}

@media (max-width: 480px) {
  .img-stack-opt3 {
    min-height: 220px;
  }
}
/* CTA Section baru  */

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

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

/* ==========================================
BANNER BADGE & IMAGE SECTION
========================================== */

/* Wrapper Utama Banner */
.banner-badge-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0 auto;
}

/* Gambar Utama */
.banner-badge-wrapper .banner-img {
  display: block;
  width: 100%;
  max-width: 280px;
  /* Batas lebar gambar agar proporsional */
  height: auto;
  object-fit: cover;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hover Efek pada Gambar */
.banner-badge-wrapper:hover .banner-img {
  transform: translateY(-3px);
}

/* Style Dasar Icon Badge (Kiri Atas & Kanan Bawah) */
.banner-badge-icon {
  position: absolute;
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff 0%, #fffdf0 100%);
  color: #b59410;
  /* Warna Emas Premium */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #b59410;
  box-shadow:
    0 8px 20px rgba(181, 148, 16, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

/* Hover Efek Badge Icon */
.banner-badge-icon:hover {
  transform: scale(1.12) rotate(6deg);
  background: linear-gradient(135deg, #b59410 0%, #d4af37 100%);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(181, 148, 16, 0.4);
}

/* Posisi Badge Kiri Atas */
.badge-top-left-crown {
  top: -12px;
  left: -12px;
  animation: badgeFloat 4s ease-in-out infinite alternate;
}

/* Posisi Badge Kanan Bawah */
.badge-bottom-right-award {
  bottom: -12px;
  right: -12px;
  animation: badgeFloat 4s ease-in-out 2s infinite alternate;
}

/* Animasi Floating Halus untuk Badge */
@keyframes badgeFloat {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-6px);
  }
}

/* Adaptif Mobile Screen (< 576px) */
@media (max-width: 575.98px) {
  .banner-badge-icon {
    width: 38px;
    height: 38px;
  }

  .banner-badge-icon i {
    font-size: 13px !important;
  }

  .badge-top-left-crown {
    top: -8px;
    left: -8px;
  }

  .badge-bottom-right-award {
    bottom: -8px;
    right: -8px;
  }
}
/* card keunggulan  */

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

/* Card keunggulan  */
.keunggulan-card-3 {
  transition: all 0.4s ease;
  border: 1px solid #d1fae5;
  background: #ffffff;
}

.keunggulan-card-3:hover {
  background: linear-gradient(135deg, #047857 0%, #064e3b 100%);
  transform: translateY(-5px);
}

.keunggulan-card-3 .title-text {
  transition: color 0.3s ease;
  color: #064e3b;
}

.keunggulan-card-3 .desc-text {
  transition: color 0.3s ease;
  color: #4b5563;
}

.keunggulan-card-3:hover .title-text,
.keunggulan-card-3:hover .desc-text {
  color: #ffffff !important;
}
/* Card Keunggulan  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Card Galeri  */

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

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

/* ========================= */
/* Welcome text */
/* ========================= */

/* ========================= */
/* Welcome text */
/* ========================= */

/* ========================= */
/* Card Rental */
/* ========================= */
.rental-card-opt1 {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* Ornamen Lingkaran Geometris Tipis di Sudut Bawah */
.rental-card-opt1::after {
  content: "";
  position: absolute;
  bottom: -35px;
  right: -35px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px dashed rgba(185, 135, 26, 0.18);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
}

/* ANIMASI HOVER CARD */
.rental-card-opt1:hover {
  transform: translateY(-8px);
  border-color: rgba(185, 135, 26, 0.5);
  box-shadow:
    0 18px 35px rgba(10, 25, 47, 0.1),
    0 0 12px rgba(185, 135, 26, 0.12);
}

.rental-card-opt1:hover::after {
  transform: scale(1.35) rotate(90deg);
  border-color: rgba(185, 135, 26, 0.4);
}

/* CONTAINER GAMBAR */
.rental-card-opt1 .rental-img {
  /* height: 190px; */
  position: relative;
  overflow: hidden;
}

.rental-card-opt1 .rental-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.rental-card-opt1:hover .rental-img img {
  transform: scale(1.08);
}

/* Overlay Pattern Halus di Gambar */
.rental-card-opt1 .rental-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(185, 135, 26, 0.15),
      transparent 50%
    ),
    linear-gradient(to top, rgba(10, 25, 47, 0.2), transparent 60%);
  pointer-events: none;
}

/* AREA INFORMASI DENGAN GRID BACKGROUND */
.rental-card-opt1 .rental-info {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  background-color: #ffffff;
  /* Background Grid Pattern Halus */
  background-image:
    linear-gradient(rgba(10, 25, 47, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 25, 47, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
}

.rental-card-opt1 .rental-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--base-color);
  margin-bottom: 12px;
  transition: all 0.4s ease;
}

.rental-card-opt1:hover .rental-title {
  background: linear-gradient(135deg, #b9871a 0%, #f3e5ad 50%, #b9871a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* BADGE MULAI DARI DI BAWAH (PERSIS DI ATAS HARGA) */
.badge-mulai-dari {
  display: inline-block;
  background: rgba(10, 25, 47, 0.06);
  color: var(--base-color);
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid rgba(10, 25, 47, 0.12);
  margin-bottom: 4px;
  background-size: 200% auto;
  transition: all 0.4s ease;
}

.rental-card-opt1:hover .badge-mulai-dari {
  background-image: linear-gradient(
    135deg,
    #b9871a 0%,
    #f3e5ad 50%,
    #b9871a 100%
  );
  background-position: right center;
  color: var(--base-color);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(185, 135, 26, 0.4);
}

/* HARGA & ADDITIONAL */
.rental-card-opt1 .price-box {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed rgba(203, 213, 225, 0.8);
}

.rental-card-opt1 .rental-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--base-color);
  line-height: 1.2;
}

.rental-card-opt1 .badge-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(185, 135, 26, 0.1);
  color: #b9871a;
  font-size: 8px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 6px;
  border: 1px solid rgba(185, 135, 26, 0.2);
}

/* ===============================================
TOMBOL GRADASI NAVY / GOLD & EFEK SHINE
=============================================== */
.btn-gradasi-navy-gold {
  background: linear-gradient(
    135deg,
    var(--base-color) 0%,
    #1e3a8a 50%,
    #b9871a 100%
  );
  background-size: 200% auto;
  color: #ffffff !important;
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(10, 25, 47, 0.2);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* Efek Shine Sweep saat Hover */
.btn-gradasi-navy-gold::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20px;
  height: 200%;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(30deg);
  transition: all 0.6s ease;
}

.btn-gradasi-navy-gold:hover {
  background-position: right center;
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(185, 135, 26, 0.35);
  color: #ffffff !important;
}

.btn-gradasi-navy-gold:hover::after {
  left: 130%;
}

.btn-gold-slide {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #c59b27 !important;
  text-decoration: none !important;
  border-radius: 50px;
  background: transparent;
  overflow: hidden;
  z-index: 1;
  transition: all 0.4s ease;
  border: 1.5px solid #c59b27;
}

.btn-gold-slide::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #b9871a, #f3e5ad, #b9871a);
  z-index: -1;
  transition: top 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-gold-slide:hover {
  color: var(--base-color) !important;
  border-color: transparent;
  box-shadow: 0 8px 25px rgba(184, 134, 11, 0.4);
  transform: translateY(-3px);
}

.btn-gold-slide:hover::before {
  top: 0;
}

.btn-gold-slide i {
  transition: transform 0.3s ease;
}

.btn-gold-slide:hover i {
  transform: translateX(4px);
}

/* ========================= */
/* Card Rental */
/* ========================= */

/* ===============================================
   card keunggulan
   =============================================== */
.section-keunggulan {
  position: relative;
  padding: 60px 0;
  /* Background subtle gradient navy ke abu terang */
  /* background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); */
  overflow: hidden;
}

/* Pattern Ornamen Transparan di Background */
.section-keunggulan::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(10, 25, 47, 0.05) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
}

/* Glow Emas Halus di Latar Belakang Center */
.section-keunggulan::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(185, 135, 26, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* ===============================================
   ITEM KEUNGGULAN & ANIMASI CARD
   =============================================== */
.feature-item-min {
  position: relative;
  text-align: center;
  padding: 24px 20px;
  height: 100%;
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 1;
}

/* Garis Border Pembatas Antar Kolom (Desktop) */
@media (min-width: 992px) {
  .feature-col-border:not(:last-child) .feature-item-min::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(185, 135, 26, 0.3),
      transparent
    );
    transition: opacity 0.3s ease;
  }
}

/* Wrapper Ikon / Gambar (Perpaduan Navy & Gold Accent) */
.feature-item-min .icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Accent Border Gold + Background Navy Gelap */
  background: var(--base-color);
  border: 2px solid #b9871a;
  box-shadow: 0 6px 15px rgba(10, 25, 47, 0.15);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feature-item-min .icon-wrapper img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  transition: transform 0.4s ease;
}

/* Title & Description */
.feature-item-min .min-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--base-color);
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.feature-item-min .min-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

/* ===============================================
   HOVER STATE ANIMATION
   =============================================== */
.feature-item-min:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(10, 25, 47, 0.06);
}

/* Lingkaran Ikon Berubah Jadi Gradasi Gold saat Hover */
/* Lingkaran Ikon Berubah Jadi Gradasi Gold saat Hover */
.feature-item-min:hover .icon-wrapper {
  background: linear-gradient(135deg, #b9871a 0%, #f3e5ad 50%, #b9871a 100%);
  border-color: #f3e5ad;
  transform: scale(1.08) rotate(4deg);
  box-shadow: 0 8px 20px rgba(185, 135, 26, 0.4);
}

/* UBAH GAMBAR/IKON JADI HITAM / GELAP */
.feature-item-min:hover .icon-wrapper img {
  transform: scale(1.1);
  filter: brightness(0);
  /* Mengubah warna gambar menjadi hitam murni */
}

/* Text Title Berubah Jadi Gradasi Gold */
.feature-item-min:hover .min-title {
  background: linear-gradient(135deg, #b9871a 0%, #f3e5ad 50%, #b9871a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===============================================
   card keunggulan
   =============================================== */

/* ==========================================
Section promo besar
========================================== */
/* --- SCOPED STYLES: OPSI 4 GOLD & NAVY EDITION --- */
.promo-opt-4-gold {
  position: relative;
  padding: 65px 0;
  /* Background Gradasi Navy Mewah */
  background: linear-gradient(135deg, #0a192f 0%, #06101e 50%, #020c1b 100%);
  /* overflow: hidden; */
  color: #ffffff;
  border-top: 1px solid rgba(223, 177, 91, 0.2);
  border-bottom: 1px solid rgba(223, 177, 91, 0.2);
}

/* Ornamen Background Glow Navy */
.promo-opt-4-gold::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(
    circle,
    rgba(13, 110, 253, 0.25) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  pointer-events: none;
  z-index: 1;
}

/* Ornamen Background Glow Gold */
.promo-opt-4-gold::after {
  content: "";
  position: absolute;
  bottom: -20%;
  right: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(223, 177, 91, 0.15) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  pointer-events: none;
  z-index: 1;
}

/* Accent Box dengan Garis Emas di Kiri */
.promo-opt-4-gold .accent-box-gold {
  position: relative;
  border-left: 4px solid #dfb15b;
  padding-left: 22px;
  z-index: 2;
}

/* Sub-Judul dengan Glow Emas */
.promo-opt-4-gold .gold-tag {
  color: #dfb15b;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 8px;
}

/* Tombol Utama Gradasi Gold */
.btn-gold-grad {
  position: relative;
  background: linear-gradient(
    270deg,
    #b38728,
    #dfb15b,
    #fff0b3,
    #dfb15b,
    #b38728
  );
  background-size: 300% 300%;
  color: #0a192f !important;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 6px 20px rgba(223, 177, 91, 0.3);
  transition: all 0.3s ease;
  border: none;
  animation: goldGradientFlow 3s ease infinite;
}

@keyframes goldGradientFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.btn-gold-grad:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(223, 177, 91, 0.5);
  color: #000000 !important;
}

/* Tombol Sekunder Outline Gold & Navy Blur */
.promo-opt-4-gold .btn-navy-outline {
  background: rgba(10, 25, 47, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid #dfb15b;
  color: #dfb15b !important;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}

.promo-opt-4-gold .btn-navy-outline:hover {
  background: rgba(223, 177, 91, 0.15);
  color: #ffffff !important;
  transform: translateY(-3px);
}

/* ganti / tambahkan animasi ini di class .gold-tag */
.promo-opt-4-gold .gold-tag {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 8px;
  /* Shimmer Gradient Text */
  background: linear-gradient(90deg, #dfb15b 0%, #ffffff 50%, #dfb15b 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmerLoop 3s linear infinite;
}

@keyframes goldShimmerLoop {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

/* Memastikan ikon mahkota tetap berwarna emas jika text-fill-color transparan */
.promo-opt-4-gold .gold-tag i {
  -webkit-text-fill-color: #dfb15b;
}
/* ==========================================
       Section promo
========================================== */

/* ==========================================
Card Artikel
========================================== */
:root {
  --c-navy: #0a192f;
  --c-navy-dark: #050d1a;
  --c-gold: #d4a843;
  --c-gold-light: #f3e5ab;
  --c-gold-dark: #b9871a;
}

/* Card Container */
.card-opt-gold {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 3/4;
  background-color: var(--c-navy);
  border: 1px solid rgba(212, 168, 67, 0.2);
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.3s ease;
}

.card-opt-gold:hover {
  border-color: rgba(212, 168, 67, 0.6);
  box-shadow:
    0 12px 30px rgba(10, 25, 47, 0.4),
    0 0 20px rgba(212, 168, 67, 0.25);
  transform: translateY(-4px);
}

/* Wrapper & Animasi Zoom Gambar */
.art-img-wrap {
  overflow: hidden;
  position: relative;
}

.art-img-wrap img {
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  object-fit: cover;
  width: 100%;
  height: 100%;
}

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

/* Overlay Hitam Pekat dari Bawah ke Atas (Bikin Teks Terbaca Sangat Jelas) */
.card-opt-gold .overlay-dark {
  position: absolute;
  inset: 0;
  /* Gradasi dari sangat gelap di bagian bawah (98% opacity) naik ke transparan */
  background: linear-gradient(
    to top,
    rgba(5, 13, 26, 0.98) 0%,
    rgba(5, 13, 26, 0.85) 45%,
    rgba(5, 13, 26, 0.2) 80%,
    transparent 100%
  );
  z-index: 1;
}

/* Overlay Gradasi Gold saat Hover (Muncul Tipis-Tipis Menambah Kesan Luxury) */
.card-opt-gold .overlay-gold {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 13, 26, 0.95) 0%,
    rgba(185, 135, 26, 0.3) 60%,
    rgba(212, 168, 67, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.card-opt-gold:hover .overlay-gold {
  opacity: 1;
}

/* Animasi Shimmer (Kilauan Light Reflecting saat Hover) */
.card-opt-gold .shimmer-effect {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
  transition: left 0.75s ease;
  z-index: 2;
}

.card-opt-gold:hover .shimmer-effect {
  left: 150%;
}

/* Konten Teks & Posisi */
.card-gold-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 22px;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 3;
}

.card-opt-gold:hover .card-gold-content {
  transform: translateY(-4px);
}

/* Badge Gradasi Gold */
.badge-gold-grad {
  background: linear-gradient(
    135deg,
    var(--c-gold) 0%,
    var(--c-gold-light) 100%
  ) !important;
  color: var(--c-navy-dark) !important;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Limit Baris Judul Max 3 Baris & Text Shadow Tambahan */
.title-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Animasi Statistik & Views */
.card-opt-gold .views-stats {
  opacity: 0.85;
  transform: translateY(4px);
  transition: all 0.3s ease;
}

.card-opt-gold:hover .views-stats {
  opacity: 1;
  transform: translateY(0);
}

/* Tombol Aksi Bulat Gradasi Gold */
.gold-action-btn {
  width: 34px;
  height: 34px;
  background: linear-gradient(
    135deg,
    var(--c-gold) 0%,
    var(--c-gold-dark) 100%
  );
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(212, 168, 67, 0.4);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.card-opt-gold:hover .gold-action-btn {
  transform: scale(1.12) translateX(2px);
  background: linear-gradient(
    135deg,
    var(--c-gold-light) 0%,
    var(--c-gold) 100%
  );
  color: var(--c-navy-dark);
}
/* ==========================================
Card Artikel
========================================== */

/* ==========================================
Card Kontak
========================================== */
:root {
  --c-navy: #0a192f;
  --c-gold: #d4a843;
  --c-gold-light: #f3e5ab;
  --c-gold-dark: #b9871a;
}

.badge-gold-pill {
  background: linear-gradient(
    135deg,
    var(--c-gold) 0%,
    var(--c-gold-light) 100%
  );
  color: var(--c-navy);
}

/* Base Card Dynamic Hover */
.card-hover-dynamic {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(212, 168, 67, 0.18) !important;
  background: #ffffff;
  z-index: 1;
}

.card-hover-dynamic h6 {
  font-size: 16px;
  font-weight: 600 !important;
}

/* Background Gradasi Tipis yang Muncul Saat Hover */
.hover-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(212, 168, 67, 0.08) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.card-hover-dynamic:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 30px rgba(212, 168, 67, 0.22) !important;
  border-color: rgba(212, 168, 67, 0.6) !important;
}

.card-hover-dynamic:hover .hover-bg-gradient {
  opacity: 1;
}

/* Icon Kontak Gradasi Gold dengan Animasi Interactive */
.icon-gold-interactive {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--c-gold) 0%,
    var(--c-gold-dark) 100%
  );
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 15px rgba(212, 168, 67, 0.3);
  /* transition: all 0.4s ease; */
  z-index: 2;
  position: relative;
}

.card-hover-dynamic:hover .icon-gold-interactive {
  transform: scale(1.15) rotate(-8deg);
  background: linear-gradient(
    135deg,
    var(--c-gold-light) 0%,
    var(--c-gold) 100%
  );
  color: var(--c-navy);
  box-shadow: 0 10px 22px rgba(212, 168, 67, 0.45);
}

.btn-gold-link {
  color: var(--c-navy);
  transition: color 0.3s ease;
}

.btn-gold-link:hover {
  color: var(--c-gold-dark);
}

.border-gold-subtle {
  border: 1px solid rgba(212, 168, 67, 0.2) !important;
}

.sosmed-gold-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--c-gold) 0%,
    var(--c-gold-dark) 100%
  );
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(212, 168, 67, 0.25);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sosmed-gold-btn:hover {
  transform: translateY(-4px) scale(1.1);
  background: linear-gradient(
    135deg,
    var(--c-gold-light) 0%,
    var(--c-gold) 100%
  );
  color: var(--c-navy);
  box-shadow: 0 8px 18px rgba(212, 168, 67, 0.45);
}

/* ==========================================
Card Kontak
========================================== */

/* ===============================================
   AREA LAYANAN 
   =============================================== */
.area-hybrid-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 12px 40px rgba(10, 25, 47, 0.06);
  border: 1px solid #e2e8f0;
}

/* Container UL */
.area-2d-list ul {
  list-style: none !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important; /* Paksa hilang margin bottom bawaan SCSS */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  /* Row-gap diset 0 agar jarak mengandalkan padding, column-gap 24px */
  gap: 0 24px !important;
  counter-reset: area-hybrid-counter;
}

/* Item LI */
.area-2d-list li {
  position: relative !important;
  /* Padding atas bawah disamakan (12px) agar jarak ke garis benar-benar seimbang */
  padding: 12px 0 12px 36px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0a192f !important;
  border-bottom: 1px solid #e2e8f0 !important; /* Garis bawah per item untuk SEMUA */
  counter-increment: area-hybrid-counter;
  transition: border-color 0.2s ease;
  margin-bottom: 0 !important;
}

.area-2d-list li:hover {
  border-bottom-color: #b9871a;
}

.area-2d-list li::before {
  content: counter(area-hybrid-counter, decimal-leading-zero) ".";
  position: absolute;
  left: 0;
  top: 12px; /* Disamakan dengan padding-top agar sejajar presisi */
  color: #b9871a;
  font-size: 15px;
  font-weight: 800;
}

/* gaya Ornamen Gambar 2A (Border Navy + Floating Badge) */
.area-2a-img-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 360px;
}

.area-2a-img {
  border-radius: 20px;
  width: 100%;
  max-width: 360px;
  object-fit: cover;
  box-shadow: 0 15px 30px rgba(10, 25, 47, 0.12);
  border: 3px solid #0a192f;
}

.area-2a-floating-badge {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #0a192f;
  color: #b9871a;
  border: 2px solid #b9871a;
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.area-2d-list ul li:nth-last-child(-n + 3) {
  border-bottom: none !important;
}
/* ===============================================
   AREA LAYANAN 
   =============================================== */

/* ===============================================
   Statistik
   =============================================== */
/* Container Wrapper */
.stat-img-wrapper-opt3 {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 0 12px 12px 0;
}

/* Ornamen Sudut Background */
.stat-img-wrapper-opt3::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background: #eef4ff;
  border-radius: 24px;
  z-index: -1;
}

/* Gambar Utama */
.stat-img-wrapper-opt3 img {
  width: 100%;
  max-height: 290px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  box-shadow: 0 10px 20px rgba(13, 110, 253, 0.1);
}
/* ===============================================
OPSI 3 - MINIMALIST LINE DIVIDER
=============================================== */
.wrapper-stats-opt3 {
  background: #ffffff;
}

.stat-line-item-opt3 {
  padding: 16px 0;
  border-bottom: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.stat-line-item-opt3:hover {
  padding-left: 10px;
  border-bottom-color: #b9871a;
}

.stat-line-item-opt3 .stat-counter,
.stat-line-item-opt3 .plus-sign {
  transition: color 0.3s ease;
}

.stat-line-item-opt3:hover .stat-counter,
.stat-line-item-opt3:hover .plus-sign {
  color: #b9871a !important;
}

.stat-line-item-opt3:hover .stat-title-text {
  color: #0a192f !important;
}

.stat-img-wrapper-opt3 {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(10, 25, 47, 0.08);
}

.stat-img-wrapper-opt3 img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
/* ===============================================
Statistik
=============================================== */

/* ===============================================
Sosmed
=============================================== */
.sosmed-btn-float {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.sosmed-btn-float::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #f5d77f, #dfb15b);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.sosmed-btn-float:hover {
  color: #f5d77f !important;
  transform: translateY(-4px) scale(1.15);
  text-shadow: 0 0 10px rgba(245, 215, 127, 0.5);
}

.sosmed-btn-float:hover::after {
  width: 100%;
}
/* ===============================================
Sosial Media
=============================================== */