/* 1. Deklarasi Local Fonts (@font-face) */
@font-face {
  font-family: "Bahasa Indonesia";
  src: url("../Aset Desain/pakai/font/bahasa_indonesia/Bahasa Indonesia.otf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Bahasa Indonesia";
  src: url("../Aset Desain/pakai/font/bahasa_indonesia/Bahasa Indonesia-Bold.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Bahasa Indonesia";
  src: url("../Aset Desain/pakai/font/bahasa_indonesia/Bahasa Indonesia-Italic.otf")
    format("opentype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Bahasa Indonesia";
  src: url("../Aset Desain/pakai/font/bahasa_indonesia/Bahasa Indonesia-Bold-Italic.otf")
    format("opentype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Bahasa Indonesia";
  src: url("../Aset Desain/pakai/font/bahasa_indonesia/Bahasa Indonesia-Light.otf")
    format("opentype");
  font-weight: 300;
  font-style: normal;
}

/* 2. Deklarasi Root Variables */
:root {
  --base-color: #ed3237;
  --second-color: #e5bc51;
  --third-color: #5f5e64;
  --four-color: #3f78e0;
  --very-light-base-color: #fbeee1;
  --bs-primary-rgb: 18, 127, 74;
  --bs-secondary-rgb: 170, 176, 188;

  /* Gunakan Font Lokal */
  --primary-font: "Bahasa Indonesia", sans-serif;
  --alt-font: "Bahasa Indonesia", sans-serif;
}

/* 3. Terapkan pada Body atau Element */
body {
  font-family: var(--primary-font);
}
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(--base-color),
    var(--base-color)
  ); /* Safari 5.1-6 */
  background: linear-gradient(
    90deg,
    var(--base-color),
    var(--base-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: 30px;
  letter-spacing: 0.5px;
}

div {
  font-family: var(--primary-font);
  font-size: 22px;
  font-weight: 500;
  line-height: 23px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ul {
  padding-left: 20px;
}

/*==========================================================================
* Dropdown
==========================================================================*/
/* Base Styles */
.custom-nav-item .arrow-icon {
  font-size: 12px;
  transition: transform 0.3s ease;
}

/* Rotasi panah saat collapse mobile dibuka */
a[aria-expanded="true"] .arrow-icon {
  transform: rotate(180deg);
}

.custom-nav-item .dropdown-toggle::after {
  display: none !important;
}

/* ==========================================
   STYLING KHUSUS MOBILE (< 992px)
   ========================================== */
@media (max-width: 991.98px) {
  .custom-nav-item {
    width: 100%;
    position: relative;
  }

  /* Tampilkan dropdown secara vertikal melipat ke bawah saat collapse aktif */
  .custom-nav-item .custom-collapse.show .dropdown-menu {
    display: block !important;
    position: static !important;
    float: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 15px !important;
  }
}

/* ==========================================
   STYLING KHUSUS DESKTOP (>= 992px)
   ========================================== */
@media (min-width: 992px) {
  .custom-nav-item {
    position: relative;
  }

  /* Sembunyikan ikon panah khusus di desktop */
  .custom-nav-item .arrow-icon {
    display: none !important;
  }

  /* Buka wrapper collapse agar tidak membungkus/menyembunyikan menu */
  .custom-nav-item .custom-collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  /* Sembunyikan dropdown-menu secara default di desktop */
  .custom-nav-item .custom-collapse .dropdown-menu {
    /* display: none !important; */
    position: absolute !important;
    top: 100%;
    left: 0;
    margin-top: 0;
    z-index: 1050;
  }

  /* Tampilkan dropdown-menu saat parent li di-hover */
  .custom-nav-item:hover .custom-collapse .dropdown-menu {
    display: block !important;
  }
}
/*==========================================================================
* Dropdown
==========================================================================*/

/*==========================================================================
* 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) {
    .badge-asymmetric-radius
    {
        display: inline-block;
        padding: 0px 10px !important;
        font-size: 10px !important;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #555;
        background: #fafafa;
        border: 1px solid #e8e8e8;
        border-radius: 20px 4px 20px 4px;
        transition: all 0.3s ease;
    }
  .slider-overlap {
    /* margin-top: -75px !important; */
  }
  .navbar-nav .nav-link.active {
    border: none !important;
    box-shadow: none !important;
    color: var(--second-color) !important;
  }
  .carousel-control-prev-icon {
    display: none;
  }
  .carousel-control-next-icon {
    display: none;
  }
  .fs-25 {
    font-size: 20px !important;
  }
  .fs-30 {
    font-size: 22px !important;
  }
  .art-l7-box {
    padding: 15px !important;
  }
  .flt-modern span {
    display: none;
  }
}
/* END WA/ APPO BTN / SCROLL TOP */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  z-index: -1;
}

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

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

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

  background: url("../Aset Desain/pakai/bg/1.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;
}

/* RED BANNER DI TENGAH SECTION */
.background-keunggulan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 70%;
  transform: translateY(-70%); /* Menempatkan presisi tegak lurus di tengah */
  height: 200px; /* Tinggi banner merah */
  
  /* Gradient Merah menyesuaikan tema website */
  background: linear-gradient(135deg, #af0516 0%, #74020b 100%);
  
  z-index: -1; /* Berada tepat di belakang konten card & gambar */
  pointer-events: none;
}

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

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

  /* background: url("../Aset Desain/pakai/bg/6.webp") center/cover no-repeat; */
  /* background-attachment: fixed; */
  background-color: var(--base-color);
  height: 300px;
  opacity: 0.8;
  z-index: -2;
}

.background-wisata1 {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Gradasi multi-titik untuk efek pantulan logam */
  background: linear-gradient(
    -45deg,
    #000000 0%,
    var(--base-color) 25%,
    #ddbc60 50%,
    #ffd450 55%,
    #ddbc60 60%,
    var(--base-color) 85%,
    #000000 100%
  );
}

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

/* Gambar Lapisan Bawah (Dengan Overlay Putih Tipis) */
.background-produk::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Lapisan overlay putih (88% pekat) di atas gambar background */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.938) 0%,
      rgba(255, 255, 255, 0.953) 70%,
      rgba(255, 255, 255, 1) 100%
    ),
    url("../Aset Desain/pakai/bg/7.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-color: #590000;
}

/* 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/2.webp") center/cover no-repeat;
  /* filter: grayscale(100%); */
  z-index: -2;
  opacity: 0.4;
}



.background-galeri {
  position: relative;
  z-index: 1;
  overflow: hidden; /* Mencegah background meluap keluar */
  /* background-color: #7d7d7d; */
}

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


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

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

.background-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      to bottom,
      rgb(255 255 255 / 80%),
      rgb(0 0 0 / 0%) 40%,
      rgb(255 255 255) 95%
    ),
    url("../Aset Desain/pakai/bg/4.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
  opacity: 0.08;
} */
/*==========================================================================
* Navbar
==========================================================================*/
.navbar-nav .nav-link {
  padding: 8px 14px !important;
  border-top: 3px solid transparent;
  color: var(--third-color);
  transition: all 0.25s ease;
}

.navbar-nav .nav-link:hover {
  color: var(--base-color) !important;
  /* border-top-color: var(--very-light-base-color); */
  /* background-color: #f8fafc; */
}

.navbar-nav .nav-link.active {
  color: var(--base-color) !important;
  border-top-color: var(--base-color);
  /* background-color: var(--very-light-base-color); */
  font-weight: 700;
}

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

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

/* Mengubah gambar ikon Shopee menjadi putih bersih */
.wave-btn .icon-shopee {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Trik CSS untuk mengubah gambar jadi putih */
}

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

/* Shopee Wave - Warna Oranye Shopee (#EE4D2D) */
.btn-wave-shopee {
  background-color: #ee4d2d;
  animation: pulse-shopee-wave 2s infinite;
  animation-delay: 0.5s;
}

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

/* Gelombang Oranye Shopee */
@keyframes pulse-shopee-wave {
  0% { box-shadow: 0 0 0 0 rgba(238, 77, 45, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(238, 77, 45, 0); }
  100% { box-shadow: 0 0 0 0 rgba(238, 77, 45, 0); }
}

@media (max-width: 768px) {
  .floating-wave-container {
    right: 15px;
    bottom: 15px;
    gap: 10px;
  }
  .wave-btn {
    padding: 10px;
    min-width: 150px;
    max-width: 150px;
    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 .icon-shopee {
    margin-right: 0;
    width: 16px;
    height: 16px;
  }
}
/* 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  */
.style-cta-option-2 {
  background: #fff5f5;
  border-top: 1px solid #fecaca;
  border-bottom: 1px solid #fecaca;
}

/* CSS Pure Dot Matrix Pattern */
.bg-dot-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(220, 38, 38, 0.12) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 1;
}

.red-blur-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 250px;
  background: rgba(254, 202, 202, 0.4);
  filter: blur(100px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

@media (min-width: 992px) {
  .border-start-red-custom {
      border-left: 3px solid #fca5a5;
  }
}

/* Element Standard */
.cta-img-rose {
  padding: 6px;
  background: transparent;
  border: 0px solid #fca5a5;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.12);
}

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

.img-float-smooth {
  animation: floatSmooth 4.5s ease-in-out infinite;
  will-change: transform;
}

.badge-double-line-red {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.badge-double-line-red::before,
.badge-double-line-red::after {
  content: '';
  width: 25px;
  height: 1px;
  background: #bc0819;
}

.badge-double-line-red .badge-text {
  font-size: 12px;
  font-weight: 600;
  color: #bc0819;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.badge-double-line-red i {
  color: #bc0819;
  font-size: 13px;
}

.style-cta-buttons {
  width: fit-content;
  max-width: 480px;
}

/* Penyesuaian Responsif Mobile */
@media (max-width: 575.98px) {
  .style-cta-buttons {
      width: 100%;
  }
  
  .style-cta-buttons .btn {
      font-size: 13px !important; /* Ukuran font disesuaikan agar tidak meluap di layar sangat kecil */
      padding: 8px 10px !important;
      white-space: nowrap;
  }
  
  .style-cta-buttons .btn i {
      font-size: 14px !important;
  }
}

.btn-rose-wa {
  background-color: #dc2626;
  color: #ffffff;
  font-weight: 600;
  padding: 7px 20px;
  border: 1px solid #dc2626;
  transition: all 0.3s ease;
}

.btn-rose-wa:hover {
  background-color: #b91c1c;
  color: #ffffff;
  border-color: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);
}

.btn-rose-call {
  background-color: #ffffff;
  color: #991b1b;
  border: 1.5px solid #991b1b;
  font-weight: 600;
  padding: 7px 20px;
  transition: all 0.3s ease;
}

.btn-rose-call:hover {
  background-color: #991b1b;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(153, 27, 27, 0.2);
}
/* 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  */
/* Reset & Base Header Styles */
.bg-header-base {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #ffffff;
}

.pointer-events-none {
  pointer-events: none;
}

/* Text Gradient Gold */
.text-gold-grad {
  background: linear-gradient(135deg, #f5d77f 0%, #d4af37 50%, #875c0f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Breadcrumb Styling */
.breadcrumb-dark {
  background: rgba(8, 10, 11, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.3);
}
.breadcrumb-dark .breadcrumb-item a {
  color: #d1d5db;
  transition: color 0.2s ease;
}
.breadcrumb-dark .breadcrumb-item a:hover {
  color: #f1c40f;
}
.breadcrumb-dark .breadcrumb-item.active {
  color: #f5d77f;
}
.breadcrumb-dark .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(212, 175, 55, 0.5);
}

/* Custom Overlay Styles */
.overlay-gradient-dark {
  background: linear-gradient(
    180deg,
    rgba(8, 10, 11, 0.85) 0%,
    rgba(8, 10, 11, 0.95) 100%
  );
}
.overlay-radial-gold {
  background: radial-gradient(
    circle at center,
    rgba(8, 10, 11, 0.75) 0%,
    rgba(8, 10, 11, 0.96) 100%
  );
}
.overlay-side-dark {
  background: linear-gradient(
    90deg,
    rgba(8, 10, 11, 0.95) 0%,
    rgba(8, 10, 11, 0.6) 100%
  );
}

/* Grid Pattern Ornament */
.ornament-grid-gold {
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.05) 1px, transparent 1px);
  background-size: 35px 35px;
}
/* Page header  */

/* page header layanan  */
:root {
  /* Palette Gold Lebih Gelap & Mewah */
  --gold-primary: #9b722b;
  --gold-light: #c5a059;
  --gold-dark: #6e4e13;
  --gold-gradient: linear-gradient(
    135deg,
    #8a6223 0%,
    #c5a059 40%,
    #8a6223 70%,
    #5c3e0a 100%
  );
}

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

/* Floating Animation */
@keyframes floatSmooth {
  0% {
    transform: translateY(0px);
  }

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

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

.img-floating {
  animation: floatSmooth 4s ease-in-out infinite;
}
/* page header layanan  */

/* 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: 26px;
  color: var(--base-color) !important;
  letter-spacing: 0.7;
}

/* Efek Hover saat di-arahkan kursor */
a.nav-link:hover {
  color: #ec0910;
  /* font-weight: 400; */
}

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-card-badge {
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-color: #f1f5f9 !important;
    background: #ffffff;
    z-index: 1;
}

/* Ornamen Corner Glow */
.contact-card-badge::before {
    content: "";
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, rgba(220, 53, 69, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    transition: all 0.35s ease;
    z-index: -1;
}

.icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fff0f1;
    color: #dc3545;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-badge i {
    transition: transform 0.35s ease;
}

/* Hover Animation */
.contact-card-badge:hover {
    border-color: #dc3545 !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(220, 53, 69, 0.12);
}

.contact-card-badge:hover::before {
    transform: scale(1.8);
    background: radial-gradient(circle, rgba(220, 53, 69, 0.22) 0%, transparent 70%);
}

.contact-card-badge:hover .icon-badge {
    background-color: #dc3545;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.contact-card-badge:hover .icon-badge i {
    transform: rotate(15deg) scale(1.1);
}

/* Penyesuaian Responsif Mobile */
@media (max-width: 575.98px) {
    .contact-card-badge {
        padding: 12px 8px !important;
    }
    .contact-card-badge a, 
    .contact-card-badge span {
        font-size: 13px !important;
    }
    .icon-badge {
        width: 38px;
        height: 38px;
    }
    .icon-badge i {
        font-size: 15px !important;
    }
}
/* 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*/

/* card layanan  */
/* Base Reset & Helper Utility */
/* Palette Gold Gelap & Mewah */
:root {
  --gold-primary: #9b722b;
  --gold-gradient: linear-gradient(
    135deg,
    #e2a849 0%,
    #c5a059 40%,
    #de9216 70%,
    #d49933 100%
  );
  --gold-soft-bg: rgba(206, 144, 38, 0.08);
}

/* OPSI 1: Badge dengan Border Line Emas Gradasi + Background Soft */
.badge-opt-f {
  display: inline-block;
  padding: 6px 16px;
  font-size: 0.825rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50rem;
  background: var(--gold-soft-bg);
  border: 1px solid transparent;
  /* Membuat border menggunakan gradasi emas */
  border-image: var(--gold-gradient) 1;
  /* Teks dengan gradasi emas */
  background-image: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* OPSI 2: Pill Badge dengan Solid Line Emas Gelap & Glowing Line */
.badge-opt-f-2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid var(--gold-primary);
  color: var(--gold-primary);
  box-shadow: 0 2px 8px rgba(155, 114, 43, 0.15);
}

/* OPSI 3: Gold Line Accent dengan Underline Gradasi */
.badge-opt-f-3 {
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge-opt-f-3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-gradient);
  border-radius: 2px;
}
.transition-all {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.fs-13 {
  font-size: 0.8125rem;
}

/* Tombol Gradient Gold Universal */
.btn-gold-grad {
  background: linear-gradient(135deg, #f39c12 0%, #d4af37 50%, #f1c40f 100%);
  background-size: 200% auto;
  color: #000 !important;
  border: none !important;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-gold-grad:hover {
  background-position: right center;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}

/* Base Card Dark */
.card-dark-base {
  background: #010101;
  color: #fff;
  border-radius: 16px;
  border: 1px solid #22252a;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.card-dark-base .img-wrap {
  /* aspect-ratio: 4/3; */
  overflow: hidden;
  position: relative;
}

.card-dark-base .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.5s ease,
    opacity 0.3s ease;
}

.card-dark-base:hover .img-wrap img {
  transform: scale(1.06);
  opacity: 0.9;
}

/* Common Card Title Box */
.card-dark-base .card-title-style {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
}

.card-dark-base:hover {
  border-color: #e67e22;
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(230, 126, 34, 0.15);
}
/* card layanan  */

.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: 100% !important;
}

.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 Container */
.article-card-5 {
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: all 0.4s ease;
  height: 100%;
  border: 1px solid #e0e0e0;
}

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

/* Image Styling */
.article-card-5 .img-wrap {
  height: 180px;
  overflow: hidden;
  position: relative;
}

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

.article-card-5:hover .img-wrap img {
  transform: scale(1.1);
}

/* Card Body & Content */
.article-card-5 .card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-card-5 .meta-info {
  color: #b9871a;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-card-5 h5 {
  color: #0a0a0a;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 15px;
  flex: 1;
}

/* Gold Gradient Button with Shimmer Animation */
.article-card-5 .btn-gold-grad {
  background: linear-gradient(135deg, #b9871a 0%, #f5d77f 50%, #b9871a 100%);
  background-size: 200% auto;
  color: #0a0a0a;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  border: none;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(185, 135, 26, 0.2);
}

.article-card-5:hover .btn-gold-grad {
  background-position: right center;
  color: #000000;
  box-shadow: 0 6px 15px rgba(185, 135, 26, 0.4);
}

.article-card-5 .btn-gold-grad i {
  transition: transform 0.3s ease;
}

.article-card-5:hover .btn-gold-grad i {
  transform: translateX(4px);
}
/* 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  */
.btn-wa-gold-pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 6px;
  border-radius: 50px;
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 14px;
  color: #fcf6ba !important;
  background: #0d0d0d;
  border: 1px solid #aa771c;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.btn-wa-gold-pulse .icon-badge-pulse {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #bf953f, #fcf6ba, #aa771c);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  animation: pulse-badge 1.8s infinite;
}

.btn-wa-gold-pulse:hover {
  border-color: #fcf6ba;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
}

@keyframes pulse-badge {
  0% {
    box-shadow: 0 0 0 0 rgba(253, 246, 186, 0.8);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(253, 246, 186, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(253, 246, 186, 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: 18px;
  }
  .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: 200px !important;*/
  }
  .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  */

/* card informasi  */
.info-timeline-wrapper {
  position: relative;
  padding-left: 2rem;
  border-left: 3px solid #c5a059;
}

.info-timeline-pin {
  position: absolute;
  top: 0;
  left: -15px;
  width: 28px;
  height: 28px;
  background: #8a6223;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  box-shadow: 0 0 0 4px rgba(138, 98, 35, 0.15);
}

.badge-gold-solid-2 {
  background: linear-gradient(
    135deg,
    #bf953f 0%,
    #fcf6ba 25%,
    #b38728 50%,
    #fbf5b7 75%,
    #aa771c 100%
  );
  color: #000000;
  border-radius: 50rem;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
/* card informasi  */

/* footer baru  */
.footer-dark-luxe {
  background-color: #080a0b;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.footer-overlay-gradient {
  background: linear-gradient(
    180deg,
    rgba(8, 10, 11, 0.48) 0%,
    rgba(8, 10, 11, 0.58) 100%
  );
}

.text-gold-luxe {
  background: linear-gradient(135deg, #f5d77f 0%, #dfb15b 50%, #b38728 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hover Links */
.ft-link-luxe {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-block;
}

.ft-link-luxe:hover {
  color: #f5d77f !important;
  transform: translateX(4px);
}

/* Social Icon Floating Buttons */
.sosmed-btn-float {
  width: 38px;
  height: 38px;
  background: rgba(223, 177, 91, 0.1);
  border: 1px solid rgba(223, 177, 91, 0.3);
  color: #f5d77f;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.sosmed-btn-float:hover {
  background: #dfb15b;
  color: #0a192f;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(223, 177, 91, 0.4);
}

/* Glassmorphism Card (Option 3) */
.footer-glass-card {
  background: rgba(10, 25, 47, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(223, 177, 91, 0.25);
  border-radius: 16px;
}
/* footer baru  */

/*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: 34px;
  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: 880px;
}

/* 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  */
/* Base CTA Overlay & Background */
.cta-luxe-wrapper {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* overflow: hidden; */
}

.cta-overlay-dark {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(8, 10, 11, 0.95) 0%,
    rgba(10, 25, 47, 0.85) 50%,
    rgba(8, 10, 11, 0.92) 100%
  );
  z-index: 1;
}

.cta-overlay-side {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 10, 11, 0.98) 0%,
    rgba(10, 25, 47, 0.85) 50%,
    rgba(8, 10, 11, 0.6) 100%
  );
  z-index: 1;
}

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

/* Typography & Utility Colors */
.text-gold-gradient {
  background: linear-gradient(135deg, #f5d77f 0%, #dfb15b 50%, #b38728 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.border-gold-accent {
  border-left: 4px solid #dfb15b !important;
}

/* Buttons Custom */
.btn-gold-solid {
  background: linear-gradient(135deg, #f5d77f 0%, #dfb15b 50%, #b38728 100%);
  color: #0a192f !important;
  font-weight: 700;
  padding: 12px 26px;
  border: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(223, 177, 91, 0.3);
  transition: all 0.3s ease;
}

.btn-gold-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(223, 177, 91, 0.5);
  color: #000 !important;
}

.btn-dark-outline-gold {
  background: rgba(10, 25, 47, 0.6);
  color: #ffffff !important;
  font-weight: 600;
  padding: 11px 24px;
  border: 1px solid rgba(223, 177, 91, 0.6);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.btn-dark-outline-gold:hover {
  background: #dfb15b;
  color: #0a192f !important;
  border-color: #dfb15b;
  transform: translateY(-2px);
}

/* Glassmorphism Card Wrapper */
.glass-cta-card {
  background: rgba(8, 10, 11, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(223, 177, 91, 0.25);
  border-radius: 16px;
}
/* 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 */
/* ========================= */
.badge-tiny-stars {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.badge-tiny-stars .badge-text {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #555;
}

.badge-tiny-stars .star-icon {
  color: #bc0819;
  font-size: 10px;
  animation: star-twinkle 1.5s infinite;
}

.badge-tiny-stars .star-icon:nth-child(2) {
  animation-delay: 0.5s;
  font-size: 14px;
}

.badge-tiny-stars .star-icon:nth-child(4) {
  animation-delay: 0.5s;
  font-size: 14px;
}

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

  50% {
    opacity: 0.3;
    transform: scale(0.7);
  }
}

.badge-tiny-stars:hover .badge-text {
  color: #bc0819;
}

/* Offset Backdrop Presisi di Belakang Gambar */
.offset-solid-bg {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #bc0819 0%, #e63b3b 100%);
  border-radius: 16px;
  z-index: 0;
  opacity: 0.9;
}

.floating-sparkle {
  position: absolute;
  color: #f3e5ab;
  font-size: 20px;
  z-index: 3;
  animation: sparkleFloat 3s ease-in-out infinite alternate;
}

.spark-1 {
  top: -12px;
  right: -10px;
}

.spark-2 {
  bottom: -10px;
  left: -10px;
  animation-delay: 1.5s;
}

@keyframes sparkleFloat {
  0% {
    transform: scale(0.8) translateY(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.3) translateY(-6px);
    opacity: 1;
  }
}

.float-img-single {
  animation: floatSmooth 4.5s ease-in-out infinite;
  will-change: transform;
}

.float-ornament-bg {
  animation: floatOrnament 6s ease-in-out infinite;
  will-change: transform;
}

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

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

@keyframes floatOrnament {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-6px) rotate(2deg);
  }
}

/* Section Base with Smooth Fade-to-White */
.welcome-section {
    position: relative; /* Penting untuk pseudo-element ::before dan ::after */
    background-color: #ffffff;
    background-image: 
        /* Layer 1: Overlay Gradasi ke Putih (Top-to-Bottom) */
        linear-gradient(to bottom, rgba(255, 253, 253, 0) 0%, rgba(255, 255, 255, 0.3) 95%, #ffffff 100%),
        /* Layer 2: Soft Red Radial Glow (Dipusatkan di Atas) */
        radial-gradient(circle at 50% 20%, rgba(200, 0, 0, 0.08) 0%, transparent 60%),
        /* Layer 3 & 4: Pattern Grid Emas (Fade Out di Bawah) */
        repeating-linear-gradient(45deg, rgba(185, 135, 26, 0.05) 0, rgba(185, 135, 26, 0.05) 1px, transparent 0, transparent 20px),
        repeating-linear-gradient(-45deg, rgba(185, 135, 26, 0.05) 0, rgba(185, 135, 26, 0.05) 1px, transparent 0, transparent 20px);
}

/* Ornamen Corner Framing */
.welcome-section::before {
    content: "✦";
    position: absolute;
    top: 20px;
    left: 30px;
    font-size: 32px;
    color: rgba(185, 135, 26, 0.35); /* Disesuaikan agar kontras di latar terang */
    text-shadow: 0 0 10px rgba(185, 135, 26, 0.2);
    pointer-events: none;
    z-index: 0;
}

/* Glow Halus di Bagian Tengah */
.welcome-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 150px;
    background: radial-gradient(ellipse at center, rgba(200, 0, 0, 0.05) 0%, transparent 70%);
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
}
/* ========================= */
/* Welcome text */
/* ========================= */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===============================================
   card keunggulan
   =============================================== */
.split-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.split-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

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

.split-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.split-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.split-content h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 2px !important;
  color: #1e293b;
  padding: 0;
  margin: 0;
}

.split-content div {
  font-size: 16px;
  color: #64748b;
  line-height: 18px;
}

.showcase-img {
  max-height: 420px;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.1));
}

/* Penyesuaian Tampilan Desktop (Kiri Rata Kanan, Kanan Rata Kiri) */
@media (min-width: 992px) {
  .split-wrapper.left-side .split-card {
    flex-direction: row-reverse;
    text-align: right;
  }
}
/* ===============================================
   card keunggulan
   =============================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* slider gambar  */
/* 1. CONTAINER FIXED & PREVENT OVERFLOW */
.swiper-hero,
.swiper-hero .swiper,
.swiper-hero .swiper-wrapper,
.hero-slide-item {
  width: 100%;
   height: 100vh; 
  /*min-height: 520px;*/
  position: relative;
  overflow: hidden;
}

/* 2. BACKGROUND IMAGE & SMOOTH ZOOM LOOP ANIMATION */
.bg-img-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.bg-img-cover {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  will-change: transform;
}

/* Animasi Zoom In-Out Loop Smooth untuk Slide Aktif */
.swiper-slide-active .bg-img-cover {
  animation: smoothZoomLoop 16s ease-in-out infinite alternate;
}

@keyframes smoothZoomLoop {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.12);
  }
}

/* 3. OVERLAY GRADIENT */
.hero-overlay-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.05) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* 4. CONTENT LAYOUT & TYPOGRAPHY FIX */
.hero-content-left {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  max-width: 820px;
  width: 85%;
  z-index: 2;
  color: #fff;
  box-sizing: border-box;
}

.hero-badge-minimal {
  display: inline-block;
  position: relative;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 6px;
}

.hero-badge-minimal::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 2px;
  background: linear-gradient(90deg, #e52d27, transparent);
}

/* Fix Line-Height agar tidak terpotong / ada area hitam saat browser di-zoom */
.hero-title {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  /* margin-bottom: 10px; */
}

.hero-desc {
  font-size: 1.2rem;
  line-height: 25px;
  color: #e2e8f0;
  margin-bottom: 28px;
}

.hero-desc p {
  margin-bottom: 0;
  line-height: 1.6;
}

/* 5. BUTTONS */
.hero-btn-group {
  display: flex;
  gap: 14px;
  align-items: center;
}

.btn-red-grad {
  background: linear-gradient(135deg, #e52d27 0%, #b31217 100%);
  color: #fff !important;
  padding: 13px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(229, 45, 39, 0.4);
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-red-grad:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(229, 45, 39, 0.6);
}

.btn-glass-light {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-glass-light:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #fff;
  transform: translateY(-2px);
}

/* 6. FADE IN ANIMATION FOR TEXT */
.swiper-slide-active .hero-content-left {
  animation: fadeInLeft 0.8s ease forwards;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate(-30px, -50%);
  }

  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* 7. RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .hero-content-left {
    left: 5%;
    width: 90%;
  }

  .hero-title {
    font-size: 22px;
    /*line-height: 1.3;*/
    padding:0;
    margin:0;
  }

  .hero-desc {
    font-size: 16px;
    line-height: 1.5;
    padding:0;
    margin:0;
  }

  .hero-btn-group {
    flex-direction: column;
  }

  .btn-red-grad,
  .btn-glass-light {
    width: 100%;
    text-align: center;
  }
}

.hero-btn-group {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: center;
  gap: 12px;
}

/* Tombol 1: Red Flame */
.btn-flame-grad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 15px;
  border-radius: 30px;
  background: linear-gradient(135deg, #ff0844 0%, #7f1212 100%);
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 8, 68, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.7px;
}

.btn-flame-grad:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(255, 8, 68, 0.45);
}

.btn-flame-grad i {
  transition: transform 0.3s ease;
}

.btn-flame-grad:hover i {
  transform: translateX(4px);
}

/* Tombol 2: Glass WA */
.btn-glass-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: 0.7px;
}

.btn-glass-wa:hover {
  background: #7f1212;
  border-color: #7f1212;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(211, 37, 37, 0.35);
}

@media (max-width: 575.98px) {
  .hero-btn-group {
    width: 100%;
  }

  .btn-flame-grad,
  .btn-glass-wa {
    width: 100%;
  }
}

.badge-asymmetric-radius {
  display: inline-block;
  padding: 2px 14px;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #555;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 20px 4px 20px 4px;
  transition: all 0.3s ease;
}

.badge-asymmetric-radius:hover {
  border-radius: 4px 20px 4px 20px;
  border-color: #bc0819;
  color: #bc0819;
  background: #fef5f5;
}
/* slider gambar  */

/* ===============================================
Card Produk
=============================================== */
.product-slider-container {
  position: relative;
  padding: 0 15px;
}

@media (max-width: 576px) {
  .product-slider-container {
    padding: 0 !important;
  }
}

.product-swiper {
  overflow: hidden;
  padding: 5px 5px 15px;
}

.product-swiper .swiper-slide {
  height: auto;
}

.product-card {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

.product-card-img {
  position: relative;
  overflow: hidden;
  height: 230px;
  /*aspect-ratio:1/1;*/
  background-color: #f8f9fa;
  flex-shrink: 0;
  object-fit:cover;
}

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

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

.product-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Judul dibuat lebih besar (16px) & lebih rapat */
.product-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  /* margin-bottom: 4px; */
  line-height: 1.3;
  /* height: 42px; */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Harga dibuat lebih besar (18px) & lebih rapat */
.product-price {
  font-size: 22px;
  font-weight: 800;
  color: #bc0819;
  margin-bottom: 6px;
}

.product-card-footer {
  margin-top: auto;
}

.product-rating {
  color: #ffc107;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
}

.product-rating span {
  color: #717171;
  font-size: 11px;
  font-weight: 600;
  margin-left: 3px;
}

/* Styling Tombol Baru & Menarik */
.product-actions-v2 {
  display: flex;
  gap: 6px;
  align-items: center;
}

.btn-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 50px;
  /* Bentuk kapsul */
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Detail: Soft Gray */
.btn-v2-detail {
  background-color: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.btn-v2-detail:hover {
  background-color: #e2e8f0;
  transform: scale(1.03);
}

/* Konsultasi: Merah Maroon + Hover Zoom */
.btn-v2-consult {
  background: linear-gradient(90deg, #dc2626 0%, #7f1d1d 100%);
  color: #ffffff;
}

.btn-v2-consult:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(127, 29, 29, 0.4);
}

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

.product-nav-btn:hover {
  background: #bc0819;
  color: #fff;
  border-color: #bc0819;
}

.product-nav-btn.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}

.product-nav-prev {
  left: 0;
}

.product-nav-next {
  right: 0;
}
/* ===============================================
Card Produk
=============================================== */

/* ===============================================
Card Galeri
=============================================== */

/* Container Link Item Gallery */
.gallery-item {
  display: block;
  text-decoration: none;
  outline: none;
  height: 100%;
}

/* Kotak Kecil Kiri & Kanan (Presisi Square 1:1) */
.gallery-img-wrapper.square {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f1f5f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Gambar Tengah (Presisi Mengikuti Tinggi Kiri & Kanan) */
.gallery-img-wrapper.full-height {
  position: relative;
  width: 100%;
  /*height: 100%;*/
  min-height: 260px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f1f5f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Gambar & Animation Zoom */
.gallery-img-wrapper picture,
.gallery-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Effects */
.gallery-item:hover .gallery-img-wrapper {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

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

/* Overlay Lightbox Icon */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-overlay i {
  color: #ffffff;
  font-size: 20px;
  transform: scale(0.6);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.gallery-item:hover .gallery-overlay i {
  transform: scale(1);
}
/* ===============================================
Card Galeri
=============================================== */


/* ===============================================
Floating Sosmed
=============================================== */
/* Container Floating Kanan Bawah Vertikal */
.floating-social-wrapper {
    position: fixed;
    bottom: 14px;
    right: 20px;
    display: flex;
    flex-direction: column;
    /* Mengatur susunan ke bawah (vertikal) */
    gap: 12px;
    /* Jarak antar tombol */
    z-index: 9999;
    /* Memastikan selalu tampil di paling depan */
}

/* Styling Elemen Link & Gambar */
.floating-social-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 35px;
    /* background-color: #ffffff; */
    /* border-radius: 50%; */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.floating-social-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 50%; */
}

/* Animasi Hover Lift Smooth */
.floating-social-item:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}
/* ===============================================
Floating Sosmed
=============================================== */