@import url("https://fonts.googleapis.com/css2?family=Allison&family=Ancizar+Sans:ital,wght@0,100..1000;1,100..1000&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Gentium+Book+Plus:ital,wght@0,400;0,700;1,400;1,700&family=Lemonada:wght@300..700&family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=Numans&family=Proza+Libre:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Puritan:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Sulphur+Point:wght@300;400;700&family=Wix+Madefor+Display:wght@400..800&display=swap");

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

:root {
  --base-color: #b9871a;
  --second-color: #edcc7d;
  --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: "DM Sans", sans-serif;
  --alt-font: "DM Sans", 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: 700;
  padding: 0;
  margin: 0;
  margin-bottom: 5px;
  font-size: 25px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ul {
  padding-left: 20px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* MOBILE */
@media (max-width: 768px) {
  .slider-overlap {
    /* margin-top: -75px !important; */
  }
  .carousel-control-prev-icon {
    display: none;
  }
  .carousel-control-next-icon {
    display: none;
  }
  .fs-25 {
    font-size: 20px !important;
  }
  .fs-30 {
    font-size: 22px !important;
  }
  .ornamen-cloud {
    top: 0px !important;
  }
  .art-l7-box {
    padding: 15px !important;
  }
  .flt-modern span {
    display: none;
  }
}
/* END WA/ APPO BTN / SCROLL TOP */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.background-welcome {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* 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/1.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  opacity: 0.1;
  /* 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: Menggunakan warna dasar putih bersih */
  background-color: #ffffff;
}

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

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

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

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

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

  z-index: -1;
}

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

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

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

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

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

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

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

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

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

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

.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--base-color);
  border-radius: 2px;
}
.navbar-stick:not(.navbar-dark) {
  background: white;
  /* color: red; */
}

.navbar-stick .nav-link {
  /* color: var(--base-color) !important; */
  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-grid * {
  box-sizing: border-box;
}

.ft-grid-link {
  transition:
    color 0.2s ease,
    transform 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.ft-grid-link:hover {
  color: #fff !important;
  opacity: 1 !important;
  transform: translateX(3px);
}

.ft-grid-social {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.ft-grid-social:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
}
/* 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: 16px;
}

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  */
/* Styling Ornamen & Frame Gambar Utama */
.hero-img-wrapper {
  position: relative;
  max-width: 380px;
  /* Batasi lebar maksimal agar tidak terlalu besar */
  margin: 0 auto;
  /* Center di tampilan mobile */
}

/* Ornamen Decor Background (Soft Gradient Blob) */
.hero-img-wrapper::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  background: linear-gradient(
    135deg,
    rgba(13, 110, 253, 0.18),
    rgba(102, 16, 242, 0.15)
  );
  border-radius: 1.5rem;
  z-index: 0;
  filter: blur(8px);
  transition: all 0.3s ease;
}

/* Ornamen Aksen Aksesoris Pojok */
.hero-img-wrapper::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  bottom: -15px;
  right: -15px;
  background: radial-gradient(
    circle,
    rgba(13, 110, 253, 0.25) 0%,
    transparent 70%
  );
  border-radius: 50%;
  z-index: 0;
}

.hero-img-wrapper picture,
.hero-img-wrapper img {
  position: relative;
  z-index: 1;
}

/* Hover effect halus pada gambar utama */
.hero-img-wrapper:hover::before {
  transform: scale(1.02);
  background: linear-gradient(
    135deg,
    rgba(13, 110, 253, 0.28),
    rgba(102, 16, 242, 0.22)
  );
}

.btn-gold-sm-4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 8px;
  background: #111827;
  color: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}

.btn-gold-sm-4 .icon-sm-box {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #ffe082, #d4af37, #996515);
  color: #111827;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: transform 0.25s ease;
}

.btn-gold-sm-4 span {
  font-size: 0.825rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fff3c4, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-gold-sm-4:hover {
  border-color: #d4af37;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.22);
  background: #1f2937;
}

.btn-gold-sm-4:hover .icon-sm-box {
  transform: scale(1.08);
}
/* 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 foto*/
.container {
  .main_header {
    padding-top: 10%;
  }

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

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

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

      p {
        opacity: 1;
      }
    }

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

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

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

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

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

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

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

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

      h6 {
        text-transform: uppercase;
      }
    }

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

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

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

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

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

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

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

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

  font-size: 50px;
}

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

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

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

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

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

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

/* card layanan baru*/
@media (min-width: 992px) {
  .col-lg-2-4 {
    flex: 0 0 auto;
    width: 20%;
  }
}

.card-v5 {
  background: rgba(253, 251, 247, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 20px rgba(185, 135, 26, 0.06);
  transition: all 0.3s ease;
}

.card-v5:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(185, 135, 26, 0.18);
  border-color: rgba(185, 135, 26, 0.3);
}

.card-v5 img {
  width: 100%;
  /* height: 140px; */
  object-fit: cover;
  border-radius: 18px 18px 0 0;
}

.card-v5-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(185, 135, 26, 0.4),
    transparent
  );
  margin: 8px 0 12px 0;
}

/* Memastikan teks judul dan deskripsi tidak terpotong atau meluap */
.card-v5-title {
  font-size: 15px;
  font-weight: 700;
  color: #212529;
  margin-bottom: 0.25rem;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.card-v5-desc {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.btn-v5-pill-gold {
  background: #b9871a;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  padding: 7px;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s;
}

.btn-v5-pill-gold:hover {
  background: #d19a21;
  box-shadow: 0 4px 12px rgba(185, 135, 26, 0.35);
}

.btn-v5-pill-outline {
  border: 1px solid #b9871a;
  color: #b9871a !important;
  font-size: 12px;
  font-weight: 600;
  padding: 7px;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s;
}

.btn-v5-pill-outline:hover {
  background: rgba(185, 135, 26, 0.1);
}

.btn-opt-2 {
  display: inline-block;
  color: #212529 !important;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}

.btn-opt-2::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 4px;
  left: 12px;
  background-color: #b9871a;
  transition: width 0.3s ease;
}

.btn-opt-2:hover {
  color: #b9871a !important;
}

.btn-opt-2:hover::after {
  width: calc(100% - 24px);
}
/*end card layanan baru*/

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

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

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

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

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

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

/*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   */
:root {
  --gold-primary: #d4af37;
  --gold-dark: #8c720b;
  --gold-gradient: linear-gradient(
    135deg,
    #fdf3c8 0%,
    #d4af37 50%,
    #b59410 100%
  );
  --gold-overlay: linear-gradient(
    to top,
    rgba(140, 114, 11, 0.95) 0%,
    rgba(212, 175, 55, 0.7) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  --gold-glow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

.text-gold {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.border-gold {
  border-color: var(--gold-primary) !important;
}
/* Hexagon Base Styling (Desktop First/Default) */
.hexagon-wrapper {
  width: 220px;
  height: 250px; /* Diperbaiki sedikit rasionya agar bentuk hexagon simetris */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--gold-gradient);
  padding: 3px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.hexagon-wrapper:hover {
  transform: scale(1.08);
}

.hexagon-inner {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: relative;
  background: #000;
}

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

.hex-overlay {
  position: absolute;
  inset: 0;
  background: rgba(140, 114, 11, 0.85);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hexagon-wrapper:hover .hex-overlay {
  opacity: 1;
}

/* Penyesuaian Khusus Tampilan Mobile (2 Kolom Sebaris) */
@media (max-width: 575.98px) {
  /* Mengatur gap container agar pas di layar kecil */
  .d-flex.gap-3 {
    gap: 0.5rem 0.25rem !important; /* Jarak vertikal & horizontal lebih kecil */
  }

  .hexagon-wrapper {
    /* Menghitung lebar pas untuk 2 kolom presisi di mobile */
    width: calc(50% - 0.5rem);
    height: calc((50vw - 0.5rem) * 1.15); /* Menjaga rasio presisi hexagon */
    max-width: 160px;
    max-height: 184px;
  }

  /* Penyesuaian ukuran teks overlay untuk layar HP */
  .hex-overlay span {
    font-size: 11px !important;
    line-height: 1.2;
  }
}

/* Card Galeri   */

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

/* FIX 1: Paksa Link Pembungkus Gambar Menjadi Full Block & Berada di Atas Base */
.card-float-img a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1; /* Angkat link agar aktif */
}

.card-float-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  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: 2;
  
  /* FIX 2: PENTING! Agar klik kursor tembus melewati overlay ke link gambar */
  pointer-events: none; 
}

.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: 3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  
  /* FIX 3: Agar jika area badge di-klik, tetap membuka artikel */
  pointer-events: none; 
}

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

/* 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  */
/* Background Ornaments / Pattern Mewah */
.bg-ornament-mewah {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;

  /* Warna Dasar Gradient Elegan (Dark Deep Blue / Charcoal) */
  /* background-color: #0b111e; */
  background-image: 
        /* Radial Highlight (Glow) di Tengah */
    radial-gradient(
      circle at 50% 50%,
      rgba(181, 148, 16, 0.15) 0%,
      transparent 70%
    ),
    /* Pola Grid Kotak-Kotak Emas Tipis */
    linear-gradient(to right, rgba(181, 148, 16, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(181, 148, 16, 0.12) 1px, transparent 1px),
    /* Pola Grid Diagonal Halus (Efek Diamond/Kristal) */
    linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.02) 25%,
        transparent 25%,
        transparent 75%,
        rgba(255, 255, 255, 0.02) 75%
      ),
    linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.02) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.02) 75%
    );

  /* Ukuran Grid Kotak-Kotak */
  background-size:
    100% 100%,
    40px 40px,
    40px 40px,
    80px 80px,
    80px 80px;
  background-position:
    center center,
    0 0,
    0 0,
    0 0,
    0 0;
}

/* --- Header Left Styling --- */
.text-gold-premium {
  background: var(--base-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

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

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

.title-underline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--base-color);
  border-radius: 2px;
}

/* Pastikan section memiliki perspective untuk efek 3D */
.wrapper-ornamen-1 {
  perspective: 1000px;
  background-color: #fffffe;
  /* Base background sangat bersih */
}

/* --- Core Card Styling (Premium Look) --- */
.card-keunggulan-premium {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  /* Lebih rounded */
  padding: 10px;
  border: 1px solid rgba(212, 175, 55, 0.08);
  /* Border gold sangat halus */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.3s ease;
  overflow: hidden;
  /* Menjaga glow tetap di dalam */
  z-index: 1;
}

.card-content {
  position: relative;
  z-index: 2;
}

/* --- Icon Styling & Animations --- */
.icon-wrapper {
  position: relative;
  width: 45px;
  height: 45px;
}

.icon-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gold-light);
  /* Warna bg ikon default light gold */
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.15);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
  z-index: 2;
}

.main-icon {
  max-height: 35px;
  transition: transform 0.3s ease;
}

/* Background dekoratif gold di belakang ikon yang membesar saat hover */
.icon-box-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--base-color);
  /* Gunakan warna tema gradasi */
  border-radius: 12px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

/* --- Text Styling --- */
.title-text {
  transition: color 0.3s ease;
}

/* --- Decorative Glow Internal --- */
.card-glow {
  position: absolute;
  width: 100px;
  height: 100px;
  background: var(--gold-primary);
  border-radius: 50%;
  top: -50px;
  right: -50px;
  opacity: 0.05;
  /* Sangat tipis */
  transition: all 0.5s ease;
  z-index: 0;
}

/* --- Right Banner --- */
.banner-img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* =========================================
   EFFECTS ON HOVER
   ========================================= */

/* 1. Efek Angkat & 3D Tilt Halus */
.card-keunggulan-premium:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-1deg);
  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
}

/* 2. Animasi Ikon & Warna */
.card-keunggulan-premium:hover .icon-box {
  background: transparent;
  /* Hilangkan bg putih */
  border-color: transparent;
  transform: scale(1.05);
}

.card-keunggulan-premium:hover .icon-box-bg {
  opacity: 1;
  /* Munculkan warna tema tipis */
  transform: scale(1.2);
  /* Membesar */
  box-shadow: 0 4px 10px rgba(140, 114, 11, 0.2);
}

.card-keunggulan-premium:hover .main-icon {
  transform: scale(1.1) translateY(-2px);
  filter: brightness(0) invert(1);
  /* Membuat ikon dummy placeholder jadi putih saat hover */
}

/* 3. Perubahan Warna Teks */
.card-keunggulan-premium:hover .title-text {
  color: var(--gold-dark) !important;
}

/* 4. Efek Glow Membesar */
.card-keunggulan-premium:hover .card-glow {
  transform: scale(3);
  opacity: 0.08;
}

/* Perbaikan untuk Mobile Scrolling agar shadow tidak terpotong */
@media (max-width: 767.98px) {
  .mobile-scroll-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
    /* Ruang untuk scrollbar/shadow */
    padding-left: 5px;
    padding-right: 5px;
  }

  .mobile-scroll-row .col-md-6 {
    flex: 0 0 85%;
    /* Lebar card di mobile */
    max-width: 85%;
  }
}
/* 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 */
/* ========================= */