@import url("https://fonts.googleapis.com/css2?family=Asap+Sharp:ital,wght@0,100..900;1,100..900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bitter:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

/* 
"Plus Jakarta Sans", sans-serif;
"Barlow", sans-serif;
"Bitter", serif;
"Asap Sharp", sans-serif;
"PT Sans", sans-serif;
"Figtree", sans-serif;
*/

:root {
  --base-color: #d71f3b;
  --second-color: #880b1d;
  --third-color: #d2bb0a;
  --four-color: #3f78e0;
  --very-light-base-color: #fbeee1;
  --bs-primary-rgb: 18, 127, 74;
  --bs-secondary-rgb: 170, 176, 188;
  --primary-font: "Figtree", sans-serif;
  --alt-font: "Figtree", sans-serif;
}

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

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

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

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

.offcanvas-footer {
  padding: 1.5rem;
}

.bg-top-bar {
  /* background: #c5a059; */
  /* background: -webkit-linear-gradient(90deg, #9b722b, #d8b671, #8e6520); */
  background: linear-gradient(90deg, #d6203d, #8e0b20, #d31f3c);
}

.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: 600;
  padding: 0;
  margin: 0;
  margin-bottom: 5px;
  font-size: 25px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ul {
  padding-left: 20px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.background-welcome {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Base background putih */
  background-color: #ffffff;
}

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

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

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

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

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

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

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

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

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

  /* Layer Top   : Gradasi dari Putih Solid (Atas) ke Transparan (Bawah)
     Layer Bottom: Gambar Tekstur .webp */
  background-image:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      /* Putih solid di bagian paling atas */ rgba(255, 255, 255, 0.75) 40%,
      /* Memudar bertahap */ rgba(255, 255, 255, 0.2) 100%
        /* Lebih transparan di bagian bawah */
    ),
    url("../Aset Desain/pakai/bg/8.webp");

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

  /* Filter abu-abu netral */
  filter: grayscale(100%) brightness(1.05) contrast(0.92);
  opacity: 0.85;
  z-index: -2;
}

/* Layer 2: Overlay Gradasi Abu-abu Soft (Memutih ke Atas) */
.background-rental::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Overlay Abu-abu: Semakin ke atas semakin memutih solid (opacity tinggi) */
  background: linear-gradient(
    to top,
    rgba(226, 232, 240, 0.6) 0%,
    /* Slate gray soft di bagian bawah */ rgba(241, 245, 249, 0.8) 50%,
    /* Abu-abu terang memutih di tengah */ rgba(255, 255, 255, 0.98) 100%
      /* Hampir putih solid di bagian paling atas */
  );

  pointer-events: none;
  z-index: -1;
}
/* ==================== ORNAMEN TAMBAHAN (NO BUG) ==================== */

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

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

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

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

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

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

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

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

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

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

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

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

  opacity: 0.2;
  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 layanan  */
.ly-layanan-cine-v2 {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

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

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

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

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

  z-index: -2;
}

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

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

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

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

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

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

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

/* Overlay Gradasi Tipis Kiri ke Kanan (Opsional Accent) */
/* .background-produk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.05) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(239, 68, 68, 0.04) 100%
  );
  z-index: -1;
  pointer-events: none;
} */

/* ==================== ADDED ORNAMENTS OPSI 3 ==================== */
/* Garis Siku Pojok Kiri Atas (Biru) */
.bt-line-blue {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 60px;
  height: 60px;
  border-top: 2px solid rgba(59, 130, 246, 0.3);
  border-left: 2px solid rgba(59, 130, 246, 0.3);
  z-index: -1;
  pointer-events: none;
}

/* Garis Siku Pojok Kanan Bawah (Merah) */
.bt-line-red {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 60px;
  height: 60px;
  border-bottom: 2px solid rgba(239, 68, 68, 0.3);
  border-right: 2px solid rgba(239, 68, 68, 0.3);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .bt-line-blue {
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
  }
  .bt-line-red {
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }
}

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

  /* background-color: #d45d02;  */
}

/* Layer 1: Gambar Background 1.webp (Muncul Tipis Transparan) */
.background-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../Aset Desain/pakai/bg/12.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /* background-attachment: fixed; */ /* Aktifkan jika ingin efek parallax */
  opacity: 1; /* Menentukan seberapa tipis gambar muncul (8%) */
  /* filter: grayscale(100%);  */
  z-index: -2;
  pointer-events: none;
  opacity: 0.2;
}

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

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

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

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

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

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

/* KONTEN TETAP DI ATAS */
.background-galeri > * {
  position: relative;
  z-index: 2;
}

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

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

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

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

  z-index: -1;
}  */

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

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

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

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

/*==========================================================================
* Navbar
==========================================================================*/
/* Mengubah layout active menjadi bentuk kapsul */
/* Opsi 7 - Double Line Frame Gold (Mavericks Travel Style) */
:root {
  --gold-mavericks: #c5a059;
  --gold-gradient-mavericks: linear-gradient(
    90deg,
    #9b722b,
    #d8b671,
    #c5a059,
    #8e6520
  );
}

.navbar-nav .nav-link {
  position: relative;
  transition: color 0.3s ease;
  padding-top: 6px !important;
  padding-bottom: 8px !important;
}

.navbar-nav .nav-link::before,
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--second-color);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.35s ease-in-out;
}

.navbar-nav .nav-link::before {
  top: 0;
}

.navbar-nav .nav-link::after {
  bottom: 0;
}

/* Muncul saat hover & active */
.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link.active::before,
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--base-color) !important;
  font-weight: 600;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* floating wa gold  */
/* Floating WA Left Luxury Gold Wrapper */
.wa-float-left-v3 {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 9999;
}

.wa-circle-btn-v3 {
  position: relative;
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #0b1e14 0%, #000000 100%);
  border: 2px solid #25d366;
  color: #25d366 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform, box-shadow;
}

/* Smooth Green Pulse Wave */
.wa-circle-btn-v3::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366 0%, #20ba5a 50%, #128c7e 100%);
  z-index: -1;
  animation: green-pulse-wave 2.4s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Hover Transformation */
.wa-circle-btn-v3:hover {
  background: linear-gradient(135deg, #25d366 0%, #20ba5a 50%, #128c7e 100%);
  color: #0b1e14 !important;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45);
  border-color: #52e38b;
}

.wa-circle-btn-v3:hover i {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Green Badge */
.wa-badge-v3 {
  position: absolute;
  top: -3px;
  right: -3px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0b1e14;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Keyframes Smooth Pulse Loop */
@keyframes green-pulse-wave {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  70% {
    transform: scale(1.55);
    opacity: 0;
  }

  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}
/* floating wa gold  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* floating wa baru  */

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

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

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

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

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

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

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

@media (max-width: 768px) {
  .floating-wave-container {
    right: 15px;
    bottom: 15px;
    gap: 10px;
  }
  .wave-btn {
    padding: 10px;
    min-width: 130px;
    max-width: 130px;
    display: flex;
    justify-content: center;
    font-size: 10px;
    min-height: 40px;
    max-height: 40px;
    gap: 10px;
  }
  .wave-btn i {
    margin-right: 0;
    font-size: 16px;
    color: white;
  }
  .wave-btn span {
    /* display: none; */
  } /* Sembunyikan teks di HP */
}
/* floating wa 2  */

/* Navbar */
/* .nav-link {
    color: var(--bs-blue);
} */

/* CKE Editor*/
.description-list a {
  color: var(--main-color);
}

.description-list ul li {
  list-style: initial;
}

.description-list p strong {
  color: var(--black);
}

.description-list hr {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.header-title p strong {
  /* font-style: italic; */
  text-decoration: underline;
}

/* CTA Baru  */
.cta-sport-v1 .font-sport {
  font-style: italic;
}

.cta-sport-v1 .btn-skew {
  transform: skewX(-12deg);
}

.cta-sport-v1 .btn-skew > * {
  transform: skewX(12deg);
  display: inline-block;
}

.cta-sport-v1 .btn-red-neon {
  background: #ff003c;
  color: #ffffff;
  font-weight: 800;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 0, 60, 0.4);
}

.cta-sport-v1 .btn-red-neon:hover {
  background: #d60032;
  color: #ffffff;
  transform: skewX(-12deg) translateY(-3px);
  box-shadow: 0 0 25px rgba(255, 0, 60, 0.8);
}

.cta-sport-v1 .btn-red-outline {
  background: transparent;
  color: #ffffff;
  font-weight: 800;
  border: 2px solid #ff003c;
  transition: all 0.3s ease;
}

.cta-sport-v1 .btn-red-outline:hover {
  background: #ff003c;
  color: #ffffff;
  transform: skewX(-12deg) translateY(-3px);
}
/* cta baru  */

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

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

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

/* Footer baru  */
/* --- FOOTER OPSI 1: RED NEON SPORT STYLE --- */
.bg-dark-footer-red {
  background: #080102;
}

.red-radial-glow {
  background: radial-gradient(
    circle at 50% 0%,
    rgba(255, 0, 60, 0.15) 0%,
    rgba(8, 1, 2, 0) 70%
  );
}

/* Icon Circle Animation */
.red-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: #ff003c;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: skewX(-10deg);
  box-shadow: 0 0 10px rgba(255, 0, 60, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.red-icon-circle i {
  transform: skewX(10deg);
  transition: transform 0.3s ease;
}

/* Hover State Contact Item */
.contact-item-hover {
  transition: transform 0.3s ease;
}

.contact-item-hover:hover {
  transform: translateX(5px);
}

.contact-item-hover:hover .red-icon-circle {
  background: #d60032;
  box-shadow: 0 0 20px rgba(255, 0, 60, 0.8);
}

.contact-item-hover:hover .red-icon-circle i {
  transform: skewX(10deg) scale(1.15) rotate(5deg);
}

.contact-item-hover:hover .contact-text {
  color: #ffffff !important;
}

/* Social Media Circle Animation */
.sosmed-circle-red {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 0, 60, 0.4);
  color: #ff003c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: skewX(-10deg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sosmed-circle-red i {
  transform: skewX(10deg);
  transition: transform 0.3s ease;
}

.sosmed-circle-red:hover {
  background: #ff003c;
  border-color: #ff003c;
  color: #ffffff !important;
  transform: skewX(-10deg) translateY(-4px);
  box-shadow: 0 0 18px rgba(255, 0, 60, 0.8);
}

.sosmed-circle-red:hover i {
  transform: skewX(10deg) scale(1.2);
}

/* Logo Hover Effect */
.footer-logo-hover {
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.footer-logo-hover:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 0 10px rgba(255, 0, 60, 0.3));
}

/* Footer Links & General */
.border-red-subtle {
  border-color: rgba(255, 0, 60, 0.2) !important;
}

.jmw-link-hover {
  transition: color 0.3s ease;
}

.jmw-link-hover:hover {
  color: #ff003c !important;
}
/* footer baru  */

.desc-cta p {
  margin-bottom: 0px;
}

/* Artikel */
article .artikel:hover .card-body a.btn-outline-primary {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

.truncate-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-text p {
  line-height: 1.6;
}

/* Detail Project  */
.dot-pattern-bg {
  position: relative;
  padding: 20px;
}
.dot-pattern-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(#0f172a 2px, transparent 2px);
  background-size: 14px 14px;
  opacity: 0.25;
  z-index: 0;
}
.btn-wa-glow {
  background: var(--base-color);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  transition: all 0.3s ease;
}
.btn-wa-glow:hover {
  background: #0039a2;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(37, 211, 102, 0.45);
}
/* Detail Project  */

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

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

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

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

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

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

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

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

/* step alur proses  */

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

/* Page Header  */
.cp-header-v8 {
  padding: 165px 0 115px 0;
  background-color: #060b13;
}
/* Kisi Garis Halus (Tech Grid Overlay) */
.cp-v8-grid {
  position: absolute;
  inset: 0;
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  z-index: 1;
  pointer-events: none;
}
/* Lampu Indikator Berkedip (Pulse Animation) */
.cp-v8-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--base-color);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16, 100, 185, 0.7);
  animation: cpV8Pulse 2s infinite;
}
@keyframes cpV8Pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}
/* Page header  */

/* header page */
.image-wrapper-header.bg-overlay:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  /* z-index: 1; */
  /* border-radius:20px; */
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgb(16 26 37), rgb(0 0 0 / 32%));
}

.image-wrapper.bg-overlay:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* border-radius: 20px; */
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgb(35, 35, 36), rgb(0 0 0 / 32%));
}

/* Rental mobil */
.rental-mobil:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-blue-rgb), var(--bs-bg-opacity)) !important;
}

.rental-mobil:hover .card-body a.btn-blue {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--bs-navy) !important;
}

.rental-mobil:hover .card-body h2 a,
.rental-mobil:hover .card-body h3,
.rental-mobil:hover .card-body h3 span {
  color: #fff !important;
}

/*--------------------------------------------------------------
  02. Colors & Variables
----------------------------------------------------------------*/
:root {
  --themecolor: #ff7b29;
  --themecolor_secondary: #f16319;
  --theme_black: #06082d;
  --theme_white: #ffffff;
  --themecolor_bg: #f16319;
  --third_bg: #ff4a37;
  --theme_bg_primary: #f8f8f8;
  --theme_bg_secondary: #101010;
  --theme_bg_dark: #06082d;
  --main-header-border-color: #ececec;
  --theme_dark_border: #373747;
  --theme_light_border: #ececec;
  --theme_light_heading_text: #101010;
  --theme_dark_heading_text: #101010;
  --theme_light_body_text: #373747;
  --theme_dark_body_text: #c1c1c1;
  --theme-light-heading-1-font-color: #06082d;
  --theme-light-heading-2-font-color: #06082d;
  --theme-light-heading-3-font-color: #06082d;
  --theme-light-heading-4-font-color: #06082d;
  --theme-light-heading-5-font-color: #06082d;
  --theme-light-heading-6-font-color: #06082d;
  --theme-light-paragraph-font-color: #373747;
  --theme-light-main-nav-font-color: #373747;
  --theme-light-span-font-color: #373747;
  --theme-light-i-font-color: #373747;
  --theme-light-body-font-color: #373747;
  --theme-light-link-text-font-color: #373747;
  --theme-light-button-font-color: #373747;
  --theme-light-blockquote-font-color: #373747;
  --theme-light-li-font-color: #373747;
  --theme-dark-heading-1-font-color: #ffffff;
  --theme-dark-heading-2-font-color: #ffffff;
  --theme-dark-heading-3-font-color: #ffffff;
  --theme-dark-heading-4-font-color: #ffffff;
  --theme-dark-heading-5-font-color: #ffffff;
  --theme-dark-heading-6-font-color: #ffffff;
  --theme-dark-paragraph-font-color: #ffffff;
  --theme-dark-main-nav-font-color: #ffffff;
  --theme-dark-span-font-color: #ffffff;
  --theme-dark-i-font-color: #ffffff;
  --theme-dark-body-font-color: #ffffff;
  --theme-dark-link-text-font-color: #ffffff;
  --theme-dark-button-font-color: #ffffff;
  --theme-dark-blockquote-font-color: #ffffff;
  --theme-dark-li-font-color: #ffffff;
}

/*--------------------------------------------------------------
  03. Common Settings
----------------------------------------------------------------*/
:root {
  --theme-transition: all 0.4s ease;
  --header-height: 100px;
  --offcanvas-toggle-bg: #f8f8f8;
  --offcanvas-toggle-Padding: 30px;
  --offcanvas-toggle-color: #010101;
  --button-background-color: #ff4a37;
  --button-text-color: #ffffff;
  --button-padding: 16px 32px;
  --button-gap: 10px;
  --button-border-radious: 0px;
  --button-border: 0px;
  --social-icon-gap: 5px;
  --social-icon-padding: 12px 15px 10px 15px;
  --social-icon-color: #010101;
  --social-icon-bg-color: #f8f8f8;
  --social-icon-bg-hover-color: #ff4a37;
  --social-icon-color: #010101;
  --social-icon-hover-color: #ffffff;
  --social-darktheme-icon-bg-color: #373747;
}

/* Text Underline Animation */
.cs-text_b_line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cs-text_b_line i {
  color: var(--base-color);
  line-height: 0px;
}

.cs-text_b_line span {
  display: inline-block;
  position: relative;
  color: var(--theme_black);
}

.cs-text_b_line.cs_white_color span {
  color: var(--theme_white);
}

.cs-text_b_line.cs_white_color i {
  color: var(--theme_white);
}

.cs-text_b_line span:before {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s ease-out;
}

.cs-text_b_line:hover span::before {
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/*--------------------------------------------------------------
  22. Project Case study
----------------------------------------------------------------*/
.project-masonry {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-masonry .cs-project-item {
  overflow: hidden;
  transition: transform 0.3s;
}
.project-masonry .cs-project-item .cs-project-item-content-in {
  position: relative;
}
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data {
  position: absolute;
  width: 90%;
  height: 90%;
  padding: 40px;
  bottom: 5%;
  top: 5%;
  right: 5%;
  left: 5%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 0.4s ease-in-out;
  color: var(--theme_white);
}
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data
  .tag-item {
  margin-bottom: 15px;
}
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data
  h4,
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data
  h5 {
  color: var(--theme_white);
  margin-bottom: 10px;
  transition: var(--theme-transition);
  transform-origin: left;
}
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data
  h4:hover,
.project-masonry
  .cs-project-item
  .cs-project-item-content-in
  .project-meta-data
  h5:hover {
  transition: var(--theme-transition);
  transform: scaleX(0.95);
  font-weight: 400;
}
.project-masonry
  .cs-project-item
  .cs-project-item-content-in:hover
  .project-meta-data {
  opacity: 1;
}
.project-masonry .cs-project-item img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 1400px) {
  .project-masonry .tag-item {
    display: none;
  }
  .project-masonry
    .cs-project-item
    .cs-project-item-content-in:hover
    .project-meta-data {
    width: 100%;
    height: 100%;
    padding: 30px;
    bottom: 50px;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme_black);
  }
}
@media screen and (max-width: 1199px) {
  .projects-list .project-item .project-item-in img {
    width: 100vw;
  }
  .project-masonry {
    display: flex;
    flex-wrap: wrap;
    max-width: 960px;
    margin: auto;
  }
  .project-masonry .cs-project-item.first {
    width: 50%;
  }
  .project-masonry .cs-project-item.first .cs-project-item-content-in img {
    height: 450px;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .project-masonry .cs-project-item.second {
    width: 50%;
  }
  .project-masonry .cs-project-item.second .cs-project-item-content-in img {
    height: 450px;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .project-masonry .cs-project-item.third {
    display: flex;
    width: 100%;
  }
  .project-masonry .cs-project-item.third .cs-project-item-content-in img {
    height: 400px;
    -o-object-fit: cover;
    object-fit: cover;
  }
}
@media screen and (max-width: 700px) {
  .project-masonry .cs-project-item.first {
    width: 100%;
  }
  .project-masonry .cs-project-item.first .cs-project-item-content-in img {
    max-height: 350px;
  }
  .project-masonry .cs-project-item.second {
    width: 100%;
  }
  .project-masonry .cs-project-item.second .cs-project-item-content-in img {
    max-height: 350px;
  }
  .project-masonry .cs-project-item.third {
    width: 100%;
  }
  .project-masonry .cs-project-item.third .cs-project-item-content-in img {
    max-height: 350px;
  }
}
.cs-border-pr {
  height: 100%;
  width: 1px;
  background-color: var(--base-color);
  margin: auto;
}

.process-item {
  padding: 40px;
  background: var(--theme_bg_primary);
  border-left: 3px solid var(--base-color);
}

.p-info-item {
  margin-bottom: 15px;
}
.p-info-item p {
  margin: 0px;
}
.p-info-item h6 {
  font-size: 18px;
}

.project-info {
  border-left: 1px solid var(--theme_white);
  padding-left: 20px;
}

.wcu-item {
  padding: 50px;
}

.project-item {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}
.project-item .project-item-in {
  position: relative;
  overflow: hidden;
}
.project-item .project-item-in img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
}
.project-item .tag-item {
  margin-bottom: 15px;
  opacity: 0.8;
}
.project-item .tag-item:hover {
  opacity: 1;
}
.project-item h5,
.project-item h4 {
  transition: var(--theme-transition);
  margin-bottom: 10px;
}
.project-item h5:hover,
.project-item h4:hover {
  color: var(--base-color);
  transition: var(--theme-transition);
}
.project-item .project-item-text {
  position: absolute;
  bottom: 0%;
  left: 30%;
  transform: translate(0%, 0%) scale(0.9);
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transition: var(--theme-transition);
  width: 90%;
  background: var(--theme_white);
}
.project-item:hover .project-item-in img {
  transform: scale(1.1);
}
.project-item:hover .project-item-text {
  transform: translate(-10%, -20%) scale(1);
  opacity: 1;
  visibility: visible;
}
.project-item:hover .project-item-text .cs-text_b_line i {
  transform: translateX(5px);
}
@media screen and (max-width: 500px) {
  .project-item:hover .project-item-text {
    transform: translate(0%, -5%) scale(1);
  }
}

@media screen and (max-width: 991px) {
  .project-item .project-item-text {
    width: 100%;
    padding: 25px;
    left: 0px !important;
    bottom: 0px;
  }
  .project-item:hover .project-item-text {
    transform: translate(0%, -5%) scale(1);
    bottom: 0px;
  }
}

/*--------------------------------------------------------------
  22. Service / Keunggulan
----------------------------------------------------------------*/
.single-service-one {
  background: #1e1e20;
  padding: 40px;
  border-radius: 10px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-service-one {
    padding: 20px;
  }
}
@media only screen and (max-width: 575px) {
  .single-service-one {
    padding: 15px;
  }
}
.single-service-one .water-mark {
  color: #28282e;
  position: absolute;
  right: 40px;
  top: 75px;
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 700;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-service-one .water-mark {
    font-size: 24px;
  }
}
@media only screen and (max-width: 479px) {
  .single-service-one .water-mark {
    display: none;
  }
}
.single-service-one .icon {
  height: 99px;
  width: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141416;
  margin-bottom: 40px;
  border-radius: 10px;
  transition: 0.3s;
}
.single-service-one .inner {
  background: #141416;
  padding: 30px;
  border-radius: 10px;
}
.single-service-one .inner .title {
  margin-bottom: 16px;
  font-size: 22px;
}
.single-service-one .inner p {
  color: #7c7c84;
  margin-bottom: 16px;
  font-size: 15px;
}
.single-service-one .inner a.read-more-narrow {
  color: #f84e1d;
}
.single-service-one:hover .icon {
  background: #f84e1d;
}

.swiper-area-wrapper {
  position: relative;
}
.swiper-area-wrapper .swiper-button-next,
.swiper-area-wrapper .swiper-button-prev {
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e1e20;
  border: 1px solid #34343a;
  border-radius: 10px;
  transition: 0.3s;
}
.swiper-area-wrapper .swiper-button-next::after,
.swiper-area-wrapper .swiper-button-prev::after {
  display: none;
}
.swiper-area-wrapper .swiper-button-next i,
.swiper-area-wrapper .swiper-button-prev i {
  color: #fff;
}
.swiper-area-wrapper .swiper-button-next:hover,
.swiper-area-wrapper .swiper-button-prev:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.swiper-area-wrapper .swiper-button-next {
  right: -100px;
  left: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .swiper-area-wrapper .swiper-button-next {
    right: -27px;
  }
}
.swiper-area-wrapper .swiper-button-prev {
  left: -100px;
  right: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .swiper-area-wrapper .swiper-button-prev {
    left: -27px;
  }
}

.mySwiper-service-one {
  position: relative;
}

.marque-area-wrapper {
  width: 130%;
}
.marque-area-wrapper span {
  font-size: 180px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #1b1b1e;
}

.title-wrapper-left span.pre {
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
}
.title-wrapper-left .title {
  color: #141416;
  font-size: 44px;
  margin-top: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .title-wrapper-left .title {
    font-size: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .title-wrapper-left .title {
    font-size: 28px;
  }
}
@media only screen and (max-width: 575px) {
  .title-wrapper-left .title {
    font-size: 26px;
  }
  .title-wrapper-left .title br {
    display: none;
  }
}

.single-choose-us-one {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}
@media only screen and (max-width: 575px) {
  .single-choose-us-one {
    flex-direction: column;
    align-items: flex-start;
  }
}
.single-choose-us-one:last-child {
  margin-bottom: 0;
}
.single-choose-us-one .icon {
  height: 90px;
  min-width: 90px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.single-choose-us-one .icon span {
  position: absolute;
  height: 30px;
  width: 30px;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e4ded8;
  box-shadow: 0px 4px 29px rgba(57, 46, 35, 0.18);
  color: #f84e1d;
  font-weight: 600;
}
.single-choose-us-one .title {
  color: #141416;
  font-size: 22px;
  margin-bottom: 10px;
}
.single-choose-us-one p.disc {
  color: #7c7c84;
}

.service-single-wrapper {
  padding: 50px;
  background: #fff;
  border-radius: 10px;
}
@media only screen and (max-width: 991px) {
  .service-single-wrapper {
    padding: 25px;
  }
}
.service-single-wrapper .icon {
  height: 90px;
  background: #efebe7;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}
.service-single-wrapper .title {
  color: #141416;
  font-size: 22px;
  margin-top: 33px;
  margin-bottom: 15px;
}
.service-single-wrapper p.disc {
  margin-bottom: 30px;
}

.tab-area-service-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
@media only screen and (max-width: 991px) {
  .tab-area-service-button {
    justify-content: flex-start;
    gap: 10px;
  }
}
.tab-area-service-button li.nav-item {
  width: max-content;
  flex-basis: 24.5%;
  margin: 0;
}
@media only screen and (max-width: 991px) {
  .tab-area-service-button li.nav-item {
    flex-basis: 21.5%;
  }
}
.tab-area-service-button li.nav-item button.nav-link {
  background: #ffffff;
  height: 80px;
  display: block;
  width: 100%;
  font-weight: 600;
  color: #141416;
  border: none;
  box-shadow: none;
  font-size: 20px;
}
@media only screen and (max-width: 991px) {
  .tab-area-service-button li.nav-item button.nav-link {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .tab-area-service-button li.nav-item button.nav-link {
    height: 64px;
    font-size: 16px;
  }
}
.tab-area-service-button li.nav-item button.nav-link:hover {
  border: none;
  box-shadow: none;
}
.tab-area-service-button li.nav-item button.nav-link.active {
  background: #f84e1d;
  color: #fff;
}

.service-content-inner-wrapper {
  background-image: url(../images/service/02.webp);
  padding: 80px;
  border-radius: 0 0 10px 10px;
}
@media only screen and (max-width: 575px) {
  .service-content-inner-wrapper {
    padding: 30px;
  }
}
.service-content-inner-wrapper .inner {
  max-width: 63%;
}
@media only screen and (max-width: 991px) {
  .service-content-inner-wrapper .inner {
    max-width: 100%;
  }
}
.service-content-inner-wrapper .inner .title {
  font-size: 30px;
}
@media only screen and (max-width: 575px) {
  .service-content-inner-wrapper .inner .title {
    font-size: 22px;
  }
}
.service-content-inner-wrapper .inner p.disc {
  color: #7c7c84;
  margin-bottom: 28px;
}
.service-content-inner-wrapper .inner .wrapper-check-area-start {
  max-width: 400px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 45px;
  row-gap: 15px;
}
.service-content-inner-wrapper .inner .wrapper-check-area-start .single {
  display: flex;
  align-items: center;
  gap: 15px;
}
.service-content-inner-wrapper .inner .wrapper-check-area-start .single p {
  color: #ffffff;
  margin: 0;
  font-size: 16px;
}
.service-content-inner-wrapper .inner .wrapper-check-area-start .single i {
  font-size: 18px;
  color: var(--color-primary);
}
.service-content-inner-wrapper .inner .rts-btn {
  margin-top: 35px;
}
.service-content-inner-wrapper .inner .rts-btn::after {
  background: #fff;
}
.service-content-inner-wrapper .inner .rts-btn:hover {
  color: var(--color-primary);
}

.cta-wrapper-inner .rts-btn::after {
  background: #141416;
}

.container-1730 {
  max-width: 1730px;
  margin: auto;
}

.service-bg_image-3 {
  border-radius: 10px;
  height: 300px;
  /* background-image: url(../../../images/lain-lain/bg-keunggulan.webp); */
  background:
    linear-gradient(to bottom, rgb(47 57 90 / 88%), rgb(46 55 89 / 88%)),
    url("../../../images/lain-lain/bg-keunggulan.webp");
}

.mt-dec--130 {
  margin-top: -130px;
}

.single-service-area-3 {
  padding: 30px;
  position: relative;
  background: #fff;
  overflow: hidden;
  display: block;
  border-radius: 10px;
  height: 100%;
}
.single-service-area-3 .icon {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 0 0 10px 0;
  height: 105px;
  width: 105px;
  background: var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.single-service-area-3 .icon img {
  width: 60% !important;
}

.single-service-area-3 span.number {
  position: absolute;
  color: #efebe7;
  right: 20px;
  top: 0px;
  font-size: 70px;
  font-weight: 700;
  font-family: var(--font-secondary);
}
.single-service-area-3 .title {
  margin-top: 100px;
  color: #141416;
  font-size: 22px;
  margin-bottom: 10px;
  transition: 0.3s;
}
.single-service-area-3 .title:hover {
  color: var(--base-color);
}
.single-service-area-3 p.disc {
  margin-bottom: 10px;
  font-size: 15px;
  color: #7c7c84;
}
.single-service-area-3 .read-more-btn {
  color: var(--color-primary);
  font-weight: 600;
  max-width: max-content;
}
.single-service-area-3 .read-more-btn i {
  transition: 0.3s;
}
.single-service-area-3 .read-more-btn:hover i {
  margin-left: 5px;
}

.title-center-wrapper-4 {
  text-align: center;
}
.title-center-wrapper-4 .title {
  font-size: 44px;
  line-height: 1.2;
}
@media only screen and (max-width: 992px) {
  .service-bg_image-3 {
    height: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .title-center-wrapper-4 .title {
    font-size: 32px;
  }

  .single-service-area-3 .icon {
    height: 86px;
    width: 86px;
  }

  .single-service-area-3 .title {
    margin-top: 75px;
  }
}
@media only screen and (max-width: 479px) {
  .title-center-wrapper-4 .title {
    font-size: 26px;
  }
}

.single-service-style-4 {
  background: #141416;
  border-radius: 10px;
  overflow: hidden;
}
.single-service-style-4 .top {
  padding: 40px;
}
@media only screen and (max-width: 479px) {
  .single-service-style-4 .top {
    padding: 25px;
  }
}
.single-service-style-4 .top .icon {
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e1e20;
  border: 1px solid #2e2e31;
  border-radius: 5px;
  margin-bottom: 26px;
}
.single-service-style-4 .top .title {
  margin-bottom: 7px;
}
.single-service-style-4 .top p.disc {
  color: #7c7c84;
  margin-bottom: 0;
}
.single-service-style-4 .thumbnail {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
  border-radius: 10px;
}
.single-service-style-4 .thumbnail::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  bottom: 0;
  background: var(--color-primary);
  z-index: 0;
  transition: 0.3s;
}
.single-service-style-4 .thumbnail .hidden-content {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: max-content;
  transform: translate(-50%, -50%) scale(0);
  z-index: 1;
  transition: 0.3s;
}
.single-service-style-4 .thumbnail .hidden-content .rts-btn {
  height: 45px;
}
.single-service-style-4 .thumbnail .hidden-content .rts-btn::after {
  background: #141416;
}
.single-service-style-4:hover .thumbnail::after {
  height: 100%;
}
.single-service-style-4:hover .hidden-content {
  transform: translate(-50%, -50%) scale(1);
}

.rts-service-area-five {
  background: #1b1b1e;
}

.wrapper-column-service-area {
  height: 100%;
}

.service-main-wrapper-5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
  .service-main-wrapper-5 {
    flex-wrap: wrap;
    justify-content: center;
  }
  .service-main-wrapper-5 > div {
    flex-basis: 50%;
  }
}
@media only screen and (max-width: 767px) {
  .service-main-wrapper-5 {
    flex-wrap: wrap;
    justify-content: center;
  }
  .service-main-wrapper-5 > div {
    flex-basis: 100%;
  }
}

.single-service-area-five {
  padding: 60px;
  width: 540px;
  border: 1px solid #2e2e31;
  height: 50%;
  height: 354px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .single-service-area-five {
    width: 440px;
  }
}
@media only screen and (max-width: 1199px) {
  .single-service-area-five {
    flex-basis: 100%;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .single-service-area-five {
    padding: 40px;
  }
}
.single-service-area-five:hover::after {
  opacity: 0.2;
}
.single-service-area-five:hover .icon-area::after {
  background: rgb(248, 78, 29);
}
.single-service-area-five::after {
  content: "";
  position: absolute;
  width: 87px;
  height: 87px;
  left: 70px;
  top: 70px;
  background: #f84e1d;
  mix-blend-mode: normal;
  opacity: 0.2;
  filter: blur(30px);
  z-index: -1;
  transition: 0.3s;
  opacity: 0;
}
.single-service-area-five.bottom-border-none {
  border-bottom: none;
}
.single-service-area-five .icon-area {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}
.single-service-area-five .icon-area::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  left: -15px;
  top: -22px;
  background: rgba(248, 78, 29, 0.1);
  border-radius: 5px;
  z-index: -1;
  transition: 0.3s;
}
.single-service-area-five .icon-area .icon {
  width: 87px;
  height: 87px;
  background: #141416;
  border: 1px solid #2e2e31;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-service-area-five .icon-area p {
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  color: #28282e;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .single-service-area-five .icon-area p {
    font-size: 36px;
  }
}
@media only screen and (max-width: 575px) {
  .single-service-area-five .icon-area p {
    font-size: 22px;
  }
}
.single-service-area-five a .title {
  color: #fff;
  font-size: 22px;
  margin-bottom: 12px;
  transition: 0.3s;
}
.single-service-area-five a:hover .title {
  color: var(--color-primary);
}
.single-service-area-five p.disc {
  color: #7c7c84;
  margin-bottom: 25px;
}
.single-service-area-five a.read-more {
  color: var(--color-primary);
  font-weight: 600;
}

.service-wrapper-bg-mid-5 {
  background-image: url(../images/service/07.webp);
  width: 100%;
  height: 709px;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 575px) {
  .service-wrapper-bg-mid-5 {
    height: 500px;
  }
}

.service-inner-title-wrapper-five {
  text-align: center;
  max-width: 529px;
  margin: auto;
}
.service-inner-title-wrapper-five span.pre {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-primary);
}
.service-inner-title-wrapper-five .title {
  text-transform: uppercase;
  font-size: 44px;
  margin-top: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .service-inner-title-wrapper-five .title {
    font-size: 24px;
  }
}
@media only screen and (max-width: 1199px) {
  .service-inner-title-wrapper-five .title {
    text-transform: uppercase;
    font-size: 28px;
    margin-top: 10px;
    line-height: 1.4;
  }
}
.service-inner-title-wrapper-five .rts-btn {
  margin: auto;
}
.service-inner-title-wrapper-five p.disc {
  font-size: 18px;
  color: #7c7c84;
  line-height: 1.6;
}

.single-service-area-inner {
  overflow: hidden;
  border-radius: 10px;
  display: block;
}
.single-service-area-inner .thumbnail {
  display: block;
  overflow: hidden;
}
.single-service-area-inner .thumbnail img {
  transition: 0.3s;
}
.single-service-area-inner .innr {
  padding: 30px;
  background: #fff;
}
.single-service-area-inner .innr .title {
  color: var(--color-title);
  transition: 0.3s;
  margin-bottom: 14px;
}
.single-service-area-inner .innr .title:hover {
  color: var(--color-primary);
}
.single-service-area-inner .innr p.disc {
  font-size: 16px;
  margin-bottom: 20px;
}
.single-service-area-inner .innr .check-wrapper .single {
  display: flex;
  align-items: center;
  gap: 13px;
}
.single-service-area-inner .innr .check-wrapper .single i {
  color: var(--color-title);
}
.single-service-area-inner .innr .check-wrapper .single p {
  margin-bottom: 0;
  color: var(--color-title);
  font-weight: 500;
}
.single-service-area-inner .innr a.btn {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-title);
  transition: 0.3s;
  font-size: 18px;
  max-width: max-content;
  padding: 0;
  margin: 0;
  margin-top: 25px;
}
.single-service-area-inner .innr a.btn:hover {
  color: var(--color-primary);
  gap: 15px;
}
.single-service-area-inner:hover .thumbnail img {
  transform: scale(1.05);
}

.service-main-wrapper-tabs {
  border-radius: 15px;
  overflow: hidden;
  display: block;
  background: #fff;
}
.service-main-wrapper-tabs .nav {
  display: flex;
  align-items: center;
  background: #fff;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #d9d9d9;
}
.service-main-wrapper-tabs .nav li {
  margin: 0;
  padding: 0;
  border: none !important;
}
.service-main-wrapper-tabs .nav li button {
  padding: 21px 25px;
  border-color: transparent !important;
  text-transform: uppercase;
  font-weight: 500;
  color: #141416;
  font-size: 18px;
}
@media only screen and (max-width: 575px) {
  .service-main-wrapper-tabs .nav li button {
    padding: 10px;
  }
}
.service-main-wrapper-tabs .nav li button.active {
  background-color: transparent;
  color: var(--color-primary);
}
.service-main-wrapper-tabs .tab-content .inner-wrapper-tab-service-wrapper {
  padding: 40px;
}
@media only screen and (max-width: 575px) {
  .service-main-wrapper-tabs .tab-content .inner-wrapper-tab-service-wrapper {
    padding: 20px;
  }
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 35px;
}
@media only screen and (max-width: 575px) {
  .service-main-wrapper-tabs
    .tab-content
    .inner-wrapper-tab-service-wrapper
    .single {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single:last-child {
  margin-bottom: 0;
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single
  .icon {
  height: 50px;
  min-width: 50px;
  background: #f6f2f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single
  .icon
  i {
  color: var(--color-primary);
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single
  .inner-content {
  font-size: 18px;
}
@media only screen and (max-width: 575px) {
  .service-main-wrapper-tabs
    .tab-content
    .inner-wrapper-tab-service-wrapper
    .single
    .inner-content {
    font-size: 16px;
  }
}
.service-main-wrapper-tabs
  .tab-content
  .inner-wrapper-tab-service-wrapper
  .single
  .inner-content
  b {
  color: #141416;
}

.service-details-inner-area-wrapper {
  margin-top: 30px;
}
.service-details-inner-area-wrapper .title {
  color: var(--color-title);
  font-size: 40px;
}

.call-to-action-area-service {
  height: 393px;
  background-image: url(../images/cta/03.webp);
  border-radius: 15px;
  display: flex;
  align-items: center;
  padding-left: 100px;
}
@media only screen and (max-width: 767px) {
  .call-to-action-area-service {
    height: auto;
    padding: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .call-to-action-area-service {
    padding: 25px;
  }
}
.call-to-action-area-service .inner {
  max-width: 60%;
}
@media only screen and (max-width: 767px) {
  .call-to-action-area-service .inner {
    max-width: 100%;
  }
}
.call-to-action-area-service .inner .title {
  font-size: 40px;
}
@media only screen and (max-width: 767px) {
  .call-to-action-area-service .inner .title {
    font-size: 32px;
  }
}
.call-to-action-area-service .inner p.disc {
  color: #ffffff;
}

/*--------------------------------------------------------------
  16. Services Style
----------------------------------------------------------------*/
.services-wrapper .service-item {
  position: relative;
  cursor: pointer;
}
.services-wrapper .service-item .services-content {
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--theme_light_border);
  position: relative;
}
.services-wrapper .service-item .services-content .the-plus {
  color: var(--base-color);
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: var(--theme-transition);
}
.services-wrapper .service-item .services-content .the-srv-title {
  padding-left: 15px;
}
.services-wrapper .service-item .services-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var(--base-color);
  transition: width 0.5s ease;
  opacity: 0.5;
}
.services-wrapper .service-item:hover .services-content::after {
  width: 100%;
}
.services-wrapper .service-item:hover .the-plus {
  background-color: var(--base-color);
  color: var(--theme_white);
  filter: drop-shadow(4px 4px 4px rgba(20, 118, 216, 0.25));
}
.services-wrapper .service-item:hover .srv-the-hover {
  opacity: 1;
  transform: translateY(0);
}
.services-wrapper .service-item:hover .srv-img img {
  transform: scale(1.1) rotate(3deg);
  filter: brightness(0.8) saturate(1.2);
}
.services-wrapper .service-item .srv-img {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.services-wrapper .service-item .srv-img img {
  display: block;
  width: 100%;
  height: auto;
  transition:
    transform 0.6s ease,
    filter 0.6s ease;
}
.services-wrapper .service-item .srv-the-hover {
  text-align: right;
  /* max-width: 285px; */
  position: absolute;
  right: 20px;
  left: 20px;
  bottom: 90px;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.services-wrapper .service-item .srv-the-hover p {
  background-color: var(--theme_white);
  padding: 20px;
  border-right: 3px solid var(--base-color);
}

@media screen and (max-width: 1199px) {
  .widget-sidebar {
    margin-top: 50px;
  }
}
@media screen and (max-width: 767px) {
  .service-item {
    max-width: 26.875rem;
    margin: auto;
  }
}
.cs-border-icon {
  background: var(--base-color);
  border-radius: 150px;
  display: inline-block;
  height: 70px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.cs-border-icon img {
  position: absolute;
}

.process-item p {
  margin: 0px;
}

.srv-pagination {
  text-align: center;
}
.srv-pagination .swiper-pagination-bullet {
  background: var(--base-color);
  opacity: 0.2;
}
.srv-pagination .swiper-pagination-bullet-active {
  background: var(--base-color);
  opacity: 1;
}

.service-slider {
  overflow: hidden;
}

.service-slider .swiper-slide {
  width: auto;
}

/* title  */
.text-main {
  color: var(--base-color);
}

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

/* title  */

/*--------------------------------------------------------------
  09. General
----------------------------------------------------------------*/
.background-parallax {
  position: relative;
  overflow: hidden;
}
.background-parallax .parallax-image {
  top: 0;
  left: 0;
}
.background-parallax .parallax-image img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.background-parallax .content-for-parallax {
  position: relative;
  z-index: 2;
}

.max-height-750 {
  max-height: 750px;
}

.cs-hover-card-anim {
  position: relative;
  overflow: hidden;
  transition: background-image var(--theme-transition);
}
.cs-hover-card-anim:hover {
  background-color: var(--theme_bg_primary);
  transition: background-image var(--theme-transition);
}
.cs-hover-card-anim .content-for-top {
  position: relative;
  z-index: 10;
  transition: var(--theme-transition);
}

.magic {
  position: absolute;
  z-index: 0;
  transition: var(--theme-transition);
  opacity: 1;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.cs-hover-card-anim[data-ser="hover-reveal"]:hover .magic {
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.animate-img-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.animate-img-wrap .reveal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme_bg_primary);
  z-index: 9;
}
.animate-img-wrap .the-animated-image {
  -o-object-fit: cover;
  object-fit: cover;
  transform: scale(1.1);
}

.opacity05 {
  opacity: 0.5;
}

.opacity02 {
  opacity: 0.2;
}

.opacity01 {
  opacity: 0.1;
}

.cs-animated-text {
  position: relative;
  text-transform: uppercase;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

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

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}
.theme-border-wrap {
  position: relative;
}
.theme-border-wrap .b-top-left {
  position: absolute;
  top: 0;
  left: 0;
  transition: var(--theme-transition);
  z-index: 20;
}
.theme-border-wrap .b-top-right {
  position: absolute;
  top: 0;
  right: 0;
  transition: var(--theme-transition);
  z-index: 20;
}
.theme-border-wrap .b-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  transition: var(--theme-transition);
  z-index: 20;
}
.theme-border-wrap .b-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  transition: var(--theme-transition);
  z-index: 20;
}
.theme-border-wrap:hover .b-top-left {
  top: 20px;
  left: 20px;
  transition: var(--theme-transition);
  opacity: 0.3;
}
.theme-border-wrap:hover .b-top-right {
  top: 20px;
  right: 20px;
  transition: var(--theme-transition);
  opacity: 0.3;
}
.theme-border-wrap:hover .b-bottom-right {
  bottom: 20px;
  right: 20px;
  transition: var(--theme-transition);
  opacity: 0.3;
}
.theme-border-wrap:hover .b-bottom-left {
  bottom: 20px;
  left: 20px;
  transition: var(--theme-transition);
  opacity: 0.3;
}

.theme-dark.theme-border-wrap .horizontal,
.theme-dark.theme-border-wrap .verticle {
  background: var(--themecolor_secondary);
}

@keyframes horizontal-grow {
  0% {
    width: 0;
  }
  100% {
    width: 50px;
  }
}
@keyframes vertical-grow {
  0% {
    height: 0;
  }
  100% {
    height: 50px;
  }
}
.horizontal {
  width: 50px;
  height: 1px;
  background: var(--base-color);
  animation: horizontal-grow 0.5s ease-out forwards;
}

.verticle {
  width: 1px;
  height: 50px;
  background: var(--base-color);
  animation: vertical-grow 0.5s ease-out forwards;
}

.lg-gutter-control {
  margin-bottom: -30px;
}

.flex-end {
  align-items: flex-end;
}

.flex-start {
  align-items: flex-start;
}

blockquote {
  background: var(--base-color) !important; /* Background card */
  border: none !important; /* Hapus border bawaan scss */
  position: relative !important;
  padding: 10px 10px 10px 25px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  font-style: italic !important;
  border-radius: 0 12px 12px 0 !important;
  margin: 1.5rem 0 !important;
  overflow: hidden !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cs-flex {
  display: flex;
}

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

label {
  margin-bottom: 12px;
}

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

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

/* Scroll */

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

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

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

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

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

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

.v6-op6-footer {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #000000;
}

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

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

.v6-op6-accent-bar {
  height: 6px;
  /* background: var(--base-color); */
  width: 100%;
}

.v6-op6-container {
  padding: 60px 20px 30px 20px;
  font-family: Arial, sans-serif;
}

.v6-op6-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

@media (max-width: 991px) {
  .v6-op6-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}

.v6-op6-header {
  font-family: Impact, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--base-color);
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.v6-op6-logo-box {
  background: #ffffff;
  padding: 10px;
  display: inline-block;
  margin-bottom: 15px;
  border-radius: 4px;
}

.v6-op6-logo {
  max-width: 190px;
  height: auto;
  display: block;
}

.v6-op6-body-text {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.6;
  margin: 0;
}

.v6-op6-menu-item {
  list-style: none;
  padding: 0;
  margin: 0;
}

.v6-op6-menu-item li {
  margin-bottom: 12px;
  border-left: 3px solid var(--base-color);
  padding-left: 10px;
}

.v6-op6-menu-item a {
  color: #ffffff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: bold;
  text-transform: uppercase;
}

.v6-op6-menu-item a:hover {
  color: var(--base-color);
}

.v6-op6-contact-row {
  font-size: 13.5px;
  margin-bottom: 15px;
  color: #d1d5db;
  line-height: 1.5;
}

.v6-op6-contact-row span {
  color: var(--base-color);
  font-weight: bold;
}

.v6-op6-btn-action {
  background: var(--base-color);
  color: #111111 !important;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
  padding: 12px 20px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.v6-op6-btn-action:hover {
  background: #ffffff;
}

.v6-op6-copy {
  text-align: center;
  font-size: 11px;
  color: #4b5563;
  border-top: 1px solid #222222;
  margin-top: 50px;
  padding-top: 25px;
  text-transform: uppercase;
}

.v6-title-opt8 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.v6-title-opt8::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #488cec 0%, rgba(255, 255, 255, 0) 85%);
}
/*--------------------------------------------------------------
# Services Four
--------------------------------------------------------------*/
.services-four {
  position: relative;
  display: block;
  padding: 120px 0 90px;
  z-index: 1;
}

.services-four__single {
  position: relative;
  display: block;
  margin-bottom: 30px;
}

.services-four__img {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
}

.services-four__img::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(var(--elitecons-black-rgb), 0.3);
  position: absolute;
  bottom: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  z-index: 1;
}

.services-four__single:hover .services-four__img::after {
  visibility: visible;
  opacity: 1;
}

.services-four__img img {
  width: 100%;
  transform: scale(1);
  transition: all 0.4s ease-in-out;
  object-fit: cover;
}

.services-four__single:hover .services-four__img img {
  transform: scale(1.1);
}

.services-four__content {
  position: relative;
  display: block;
  background-color: var(--bs-white);
  border-bottom: 2px solid var(--base-color);
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.05);
  margin: -60px 20px 0;
  padding: 32px 30px 30px;
  z-index: 3;
  height: 300px;
}

.services-four__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 26px;
}

.services-four__title a {
  color: var(--elitecons-black);
}

.services-four__title a:hover {
  color: var(--elitecons-base);
}

.services-four__text {
  margin-top: 6px;
  margin-bottom: 33px;
}

.services-four__btn-box {
  position: relative;
  display: block;
}

.services-four__btn {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.services-four__btn span {
  font-size: 14px;
}

.services-four__btn:hover {
  color: var(--elitecons-black);
}

/*--------------------------------------------------------------
# Share Button
--------------------------------------------------------------*/

.fabs {
  bottom: 160px;
  position: fixed;
  /* margin: 1em; */
  z-index: 100;
  left: 20px;
}

.fab {
  display: block;
  /* width: 45px;
  height: 45px; */
  border-radius: 50%;
  text-align: center;
  /* color: var(--base-color); */
  /* margin: 20px auto 0; */
  /* box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18),0px 4px 12px -7px rgba(0, 0, 0, 0.15); */
  cursor: pointer;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
  position: relative;
}

.fab > i {
  font-size: 28px;
  line-height: 60px;
  transition: all 0.2s ease-in-out;
  transition-delay: 2s;
}

.fab.red {
  background: #f44336;
}

.fab.pink {
  background: #e91e63;
}

.fab.purple {
  background: #9c27b0;
}

.fab.deep-purple {
  background: #673ab7;
}

.fab.indigo {
  background: #3f51b5;
}

.fab.blue {
  background: #2196f3;
}

.fab.light-blue {
  background: #03a9f4;
}

.fab.cyan {
  background: #00bcd4;
}

.fab.teal {
  background: #009688;
}

.fab.green {
  background: #4caf50;
}

.fab.light-green {
  background: #8bc34a;
}

.fab.lime {
  background: #cddc39;
}

.fab.yellow {
  background: #ffeb3b;
}

.fab.amber {
  background: black;
}

.fab.orange {
  background: #ff9800;
}

.fab.deep-orange {
  background: var(--base-color);
}

.fab.brown {
  background: #795548;
}

.fab.grey {
  background: #9e9e9e;
}

.fab.blue-grey {
  background: #607d8b;
}

.fab:active,
.fab:focus,
.fab:hover {
  /* box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); */
}

.fab:not(:last-child) {
  /* width: 16px;
  height: 36px;
  margin: 20px auto 0; */
  opacity: 1;
}

.fab:not(:last-child) > i {
  font-size: 18px;
  line-height: 40px;
  transition: all 0.3s ease-in-out;
}

.fabs:hover .fab:not(:last-child) {
  opacity: 1;
  width: 20px;
  height: 10px;
  margin: 5px auto 0;
}

.fab:nth-last-child(1) {
  -webkit-transition-delay: 25ms;
  transition-delay: 25ms;
}

.fab:not(:last-child):nth-last-child(2) {
  -webkit-transition-delay: 20ms;
  transition-delay: 20ms;
}

.fab:not(:last-child):nth-last-child(3) {
  -webkit-transition-delay: 40ms;
  transition-delay: 40ms;
}

.fab:not(:last-child):nth-last-child(4) {
  -webkit-transition-delay: 60ms;
  transition-delay: 60ms;
}

.fab:not(:last-child):nth-last-child(5) {
  -webkit-transition-delay: 80ms;
  transition-delay: 80ms;
}

[tooltip]:before {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: #585858;
  color: #fff;
  content: attr(tooltip);
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  padding: 5px 7px;
  margin-right: 10px;
  position: absolute;
  left: 120%;
  bottom: 5%;
  white-space: nowrap;
}

[tooltip]:hover:before,
[tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}

/*==================================*/
.navbar .navbar-nav .nav-link::before {
  /*  content: '• • •';*/
  /*  content: '______';*/
  position: absolute;
  bottom: 15px;
  left: 50%;
  font-size: 14px;
  color: var(--second-color);
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: translateX(-50%);
  white-space: nowrap;
}
.navbar .navbar-nav .nav-link:hover::before {
  opacity: 1;
}
a.nav-link {
  position: relative;
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 16px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* kontak kami  */
/* Opsi 1: Dynamic Hover Slide - Fixed & Simplified */
.contact-card-slide {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
  border: 1px solid rgba(220, 38, 38, 0.15);
  cursor: pointer;
}

.contact-card-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  transition: left 0.4s ease;
  z-index: 0;
}

.contact-card-slide:hover::before {
  left: 0;
}

.contact-card-slide:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.25);
  border-color: #dc2626;
}

.contact-card-slide > * {
  position: relative;
  z-index: 1;
}

.contact-card-slide:hover .contact-label-slide {
  color: rgba(255, 255, 255, 0.7) !important;
}

.contact-card-slide:hover .contact-value-slide {
  color: #ffffff !important;
}

.contact-card-slide:hover .contact-icon-slide {
  background: #ffffff !important;
  color: #dc2626 !important;
  transform: scale(1.1);
}

.contact-card-slide:hover .contact-arrow-slide {
  color: #ffffff !important;
  transform: translateX(5px);
}

.contact-icon-slide {
  transition: all 0.3s ease;
}

.contact-arrow-slide {
  transition: all 0.3s ease;
}
/*Kontak Kami*/

.dark-block-section {
  background-color: #f8f9fa;
}

/* Gradasi Premium untuk Card */
.dark-block-card {
  background: linear-gradient(135deg, #1f532f 0%, #0d2a16 100%);
  color: white;
  padding: 60px 50px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(31, 83, 47, 0.2);
}

.dark-img-fit {
  height: 100%;
  min-height: 500px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.link-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
  transition: 0.3s;
  background: rgba(255, 255, 255, 0.02);
}

.link-outline-light:hover {
  background: rgba(
    197,
    151,
    71,
    0.2
  ); /* Sentuhan warna second-color saat hover */
  border-color: #c59747;
  transform: translateY(-3px);
  color: white;
}

.icon-box-dark {
  font-size: 24px;
  margin-right: 15px;
}
/* Kontak Kami  */

@media (min-width: 992px) {
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-primary);
}

/* layanan tambahan  */

/* kontak  */
.contact-line-item {
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.contact-line-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Efek Tumpukan Gambar */
.img-stack-container {
  position: relative;
  padding: 20px;
}
.img-stack-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  bottom: 40px;
  background: var(--base-color);
  border-radius: 20px;
  transform: rotate(-4deg);
  z-index: 0;
  opacity: 0.15;
}
.img-stack-main {
  position: relative;
  z-index: 1;
  border: 10px solid #fff;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transform: rotate(2deg);
  transition: transform 0.4s ease;
}
.img-stack-container:hover .img-stack-main {
  transform: rotate(0deg) scale(1.02);
}

/* kontak  */

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

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

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

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

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

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

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

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

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

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

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

/* artikel detail  */
.sport-detail-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.sport-badge-tag {
  background: #ff003c;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 4px;
}
.sport-title-main {
  font-size: 22px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.35;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .sport-title-main {
    font-size: 32px;
  }
}
.sport-meta-info {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.sport-meta-info i {
  color: #ff003c;
}
.sport-article-content {
  color: #334155;
  font-size: 15px;
  line-height: 1.8;
}
.sport-article-content p {
  margin-bottom: 1.25rem;
}
.sport-sidebar-head {
  border-left: 4px solid #ff003c;
  padding-left: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #0f172a;
}
.sport-side-item {
  transition: all 0.3s ease;
}
.sport-side-item:hover h6 {
  color: #ff003c !important;
}
.sport-side-item:hover img {
  transform: scale(1.08);
}
/* artikel detail  */

/* tombbol produk lainnya  */
.btn-luxury-shine {
  display: inline-block;
  background: linear-gradient(135deg, #58b800 0%, #3c9112 100%);
  color: white;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(164, 118, 41, 0.25);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
/* Efek Kilatan Cahaya */
.btn-luxury-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}
/* Efek Hover */
.btn-luxury-shine:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(164, 118, 41, 0.4);
}
.btn-luxury-shine:hover::before {
  left: 150%; /* Jalankan kilatan cahaya */
}
/* tombool produk lainnya  */

/* Detail artikel  */
.split-header-opt2 {
  padding: 50px 0;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 40px;
}
.split-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-right: 30px;
}
.meta-tags-opt2 span {
  background: #fff;
  padding: 5px 15px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  border: 1px solid #ddd;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.split-img-opt2 {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  object-fit: cover;
}

.sidebar-widget-opt2 {
  background: #fff;
  border-radius: 15px;
  padding: 25px;
  border: 1px solid #e9ecef;
  margin-bottom: 30px;
}
.sidebar-widget-opt2 h4 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--base-color);
  padding-bottom: 10px;
  margin-bottom: 20px;
  display: inline-block;
}

.list-popular-opt2 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list-popular-opt2 li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 15px;
}
.list-popular-opt2 li:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.list-popular-opt2 img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 15px;
}
.list-popular-opt2 .post-info h6 {
  font-size: 14px;
  margin-bottom: 5px;
  line-height: 1.4;
}
.list-popular-opt2 .post-info span {
  font-size: 11px;
  color: #888;
}

.social-float-opt2 {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}
.social-float-opt2 a {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  transition: 0.3s;
}
.social-float-opt2 a:hover {
  background: var(--base-color);
  color: #fff;
}

/* Detail Aritkel  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.faq-search-6 .faq-body .faq-content {
  padding: 0 20px 18px 20px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.8;
  border-top: 1px solid #f1f5f9;
  margin: 0 20px;
}
/* Faq  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon2 img {
  width: 70%;
}

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

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

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

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

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

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

/*layanan*/

/* Title web  */

/* Slider  overlap */
.slider-overlap {
  /* margin-top: -68px; */
  position: relative;
  z-index: 1;
}
.swiper-slide {
  height: 600px;
  overflow: hidden;
}

/* Image Zoom */
.image-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 12s ease;
  transform: scale(1);
}
.swiper-slide-active .image-wrapper img {
  transform: scale(1.1);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Slider  */

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

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

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

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

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

/* ##MOBILE HP*/

@media only screen and (max-width: 600px) {
  .py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
    left: 12rem !important;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--primary-font);
    font-weight: 700;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
    font-size: 20px;
  }

  .wl-btn-gradient-mixed-new3 {
    padding: 5px 11px !important;
    font-size: 13px !important;
  }
  section.header-split .content-box {
    left: 0px;
  }
  .floating-footer-text {
    font-size: 35px !important;
    left: 20px !important;
    margin-top: 30px !important;
  }
  .category-overlay .meta {
    font-size: 10px !important;
  }
  .content-box {
    /* left: 30px; */
    position: relative;
  }
  .nav-link.dropdown-toggle.dropdown-toggle-split.btn-toggle-kategori {
    right: -160px !important;
    top: -17px !important;
  }
  .kategori-tag {
    font-size: 7px !important;
    font-weight: 500;
  }
  .step-item-card {
    flex-direction: column;
  }
  .navbar-nav .nav-link:hover::after,
  .navbar-nav .nav-link.active::after {
    display: none;
  }
  a.nav-link {
    font-size: 14px;
    padding: 0px !important;
  }
  .overlap-text-card {
    padding: 0 !important;
    box-shadow: none !important;
    margin-top: 30px;
  }
  .overlap-image-wrapper {
    box-shadow: none !important;
  }
  .keunggulan-overlap-wrapper {
    margin-top: -200px !important;
  }
  .title-split {
    font-size: 25px !important;
  }
  .cta-layout-2 {
    padding: 0;
  }
  .cta-floating-card {
    padding: 10px;
  }
  .btn-cta-green {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
  }
  .bg-cta {
    /* height: 440px !important; */
  }
  .swiper-hero {
    height: 100vh !important;
  }
  .swiper-container .swiper img {
    height: 100%;
  }
  .swiper-controls .swiper-navigation .swiper-button.swiper-button-prev {
    display: none;
  }
  .swiper-controls .swiper-navigation .swiper-button.swiper-button-next {
    display: none;
  }
  .content {
    top: 250px;
    padding: 5px !important;
    /* left: 30px !important; */
  }

  .bg-stats {
    border-radius: 0px !important;
    margin-top: -40px;
  }

  .card-subscribe {
    width: 80%;
  }
  .bg-subscribe {
    background-size: cover;
  }
  .image-wrapper {
    height: 100vh !important;
  }

  .flex-mobile {
    flex-direction: column !important;
  }

  .desc-keunggulan-desktop {
    display: none;
  }
  .desc-keunggulan-mobile {
    display: block;
  }

  .layanan-desktop {
    display: none;
  }
  .layanan-mobile {
    display: block;
  }
  .icon1 {
    width: 20%;
  }
  .icon2 {
    /*    width: 20%;*/
    width: 110px;
    height: 60px;
    background-color: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* BOX SHADOW */
  }
  img.icon2 {
    /*    width: 100%;*/
  }
  .orang-2-pakai-kontak {
    display: none;
  }

  .pricing .plan {
    width: 100% !important;
    margin-top: 60px !important;
  }
  .card-icon {
    width: 50%;
  }
  .swiper-slide {
    background-size: cover;
    width: 100%;
  }

  .swiper-hero,
  .swiper-hero .swiper-slide {
    /* height: 150px !important; */
    width: 100% !important;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .card-icon {
    width: 50% !important;
  }

  .jdl-layanan {
    font-size: 14px;
  }
  .logo-mobile {
    left: 160px !important;
  }
  .navbar-expand-lg.navbar-light
    .dropdown:not(.dropdown-submenu)
    > .dropdown-toggle:after {
    display: flex;
  }

  .submenu-icon-content {
    width: 100%;
    color: white;
  }
  .navbar .navbar-nav .nav-link::before {
    display: none;
  }
  .dropdown-menu {
    width: 100%;
  }
}

.icon-highlight {
  position: absolute;
  width: 10%;
  left: 0;
  opacity: 0.5;
  animation: moveLeftRight 2s infinite ease-in-out;
}

.icon-highlight-mirror {
  position: absolute;
  width: 10%;
  right: 0;
  opacity: 0.5;
  transform: scaleX(-1);
  animation: moveRightLeft 2s infinite ease-in-out;
}

@keyframes moveLeftRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes moveRightLeft {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0);
  }
}

/* hero section  */
.hero-opt6 {
  padding: 80px 0;
  background-color: #dc0d0a0a;
  overflow: hidden;
}

/* CARD */
.overlap-text-card {
  background: #ffffff;
  padding: 50px 40px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 5;
  margin-right: -80px;
}

/* IMAGE */
.overlap-img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 20px;
}

/* ========================= */
/* 📱 MOBILE RESPONSIVE */
/* ========================= */
@media (max-width: 991px) {
  .hero-opt6 {
    padding: 10px 0;
  }

  /* TEXT CARD */
  .overlap-text-card {
    margin-right: 0;
    margin-bottom: -60px; /* overlap ke bawah (lebih smooth) */
    padding: 25px 20px;
    border-radius: 16px;
    text-align: center; /* optional biar rapi */
  }

  /* IMAGE */
  .overlap-img {
    height: 250px;
    border-radius: 16px;
  }

  /* GARIS */
  .overlap-text-card div[style*="width: 300px"] {
    margin-left: auto;
    margin-right: auto;
    width: 120px !important;
  }

  /* BUTTON FULL */
  .overlap-text-card .btn {
    width: 100%;
    padding: 10px;
  }

  /* ICON */
  .overlap-text-card i {
    font-size: 20px;
  }
}
/* hero section  */

/* footer  */
/* --- V4 OPSI 1: KINETIC TYPO & BIG LOGO --- */
.accent-blue {
  color: #38bdf8;
}

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

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

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

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

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

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

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

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

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

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

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

/* Footer Layout: Big Logo Row Block */
.v4-op1-footer {
  background: #111111;
  border-top: 1px solid #262626;
  padding: 60px 20px 30px 20px;
}

.v4-op1-logo-row {
  border-bottom: 1px solid #262626;
  padding-bottom: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.v4-op1-logo-img {
  max-width: 220px;
  height: auto;
  filter: brightness(0) invert(1);
}

.v4-op1-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

@media (max-width: 768px) {
  .v4-op1-footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .v4-op1-title {
    font-size: 28px;
    /* Responsif untuk mobile agar tidak overflow */
  }
}

.v4-op1-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 768px) {
  .v4-op1-nav-links {
    justify-content: center;
  }
}

.v4-op1-nav-links a {
  color: #a3a3a3;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.v4-op1-nav-links a:hover {
  color: #ffffff;
}

.v4-op1-address {
  font-size: 13px;
  color: #737373;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.v4-op1-socmed-gap {
  display: flex;
  gap: 15px;
}

@media (max-width: 768px) {
  .v4-op1-socmed-gap {
    justify-content: center;
  }
}

.v4-op1-socmed-link {
  color: #a3a3a3;
  text-decoration: none;
  font-size: 14px;
}

.v4-op1-socmed-link:hover {
  color: #ffffff;
}

.v4-op1-copy {
  text-align: center;
  font-size: 12px;
  color: #404040;
  border-top: 1px solid #262626;
  margin-top: 40px;
  padding-top: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Styling tambahan untuk memastikan tombol sosmed minimalis berfungsi dengan baik */
.social-minimalist .social-btn-min {
  color: #a3a3a3;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.social-minimalist .social-btn-min:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

.fs-20 {
  font-size: 20px;
}
.v6-sm-opt3-wrap {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

.v6-sm-opt3-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #8a8a8a;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

.v6-sm-opt3-btn:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  border-radius: 8px;
}
/*footer*/

/* footer baru  */
.footer-orange-v6 .link-pill {
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 14px;
  border-radius: 20px;
  color: #ffffff;
  transition: all 0.3s ease;
}

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

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

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

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

.footer-orange-v6 .nav-link-v6:hover {
  color: #ffffff !important;
  padding-left: 4px;
}
/* footer baru  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*home*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rating-section .stars i {
  color: var(--second-color);
  font-size: 14px;
  margin: 0 2px;
}

.rating-section .tingkat-text {
  text-align: left;
  line-height: 1.1;
}

.rating-section .tingkat-text span {
  font-size: 9px;
  color: #7f8c8d;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.rating-section .tingkat-text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--theme-main); /* Mengikuti tema merah/oranye */
}

/* Block Harga */
.price-block-wrapper {
  margin-bottom: 20px;
}

.price-general {
  background: var(--theme-main);
  color: #ffffff;
  display: inline-block;
  padding: 8px 30px;
  border-radius: 30px;
  font-size: 1.35rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Box Start & Finish (Sejajar Kiri Kanan) */
.info-box-general {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f1f2f6;
  border-bottom: 1px dashed #dfe4ea;
  padding: 15px 0;
  margin-bottom: 15px;
}

.info-col {
  width: 50%;
  text-align: center;
  padding: 0 5px;
}

.info-col:first-child {
  border-right: 1px solid #f1f2f6;
}

.info-col .label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  color: #57606f;
  margin-bottom: 5px;
}

.info-col .label i {
  color: #2d3436;
  font-size: 12px;
}

.info-col strong {
  font-size: 13px;
  color: #2d3436;
  display: block;
  line-height: 1.3;
}

/* Tombol Booking dengan warna sesuai tema */
.btn-booking-general {
  display: block;
  background: var(--theme-main);
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
  margin-top: 20px;
}

.btn-booking-general:hover {
  background: var(--theme-dark);
  color: #fff;
}

/* Accordion Design Tetap Dipertahankan */
.general-acc-btn {
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #2d3436;
  transition: 0.3s;
}
.general-acc-btn:hover {
  color: var(--theme-main);
}
.general-acc-icon {
  color: #a4b0be;
  font-size: 12px;
  transition: transform 0.3s ease;
}
.general-acc-btn.active .general-acc-icon {
  transform: rotate(180deg);
  color: var(--theme-main);
}
.general-acc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}
.general-acc-inner {
  padding: 10px 0;
  font-size: 13px;
  color: #57606f;
  line-height: 1.6;
  text-align: left;
}

/* Swiper Pagination & Button Customization */
.paketSwiper {
  padding: 15px 15px 50px 15px !important;
}
.swiper-slide {
  height: auto;
}
.swiper-button-next,
.swiper-button-prev {
  background: #fff;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  color: var(--base-color) !important;
}
/* .swiper-button-next { right: -5px !important; } */
/* .swiper-button-prev { left: -5px !important; } */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 14px !important;
  font-weight: bold;
}
@media (max-width: 767px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}
/* card paket rafting serayu  */

/*    Paket Harga*/
.pricing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .plan {
    background-color: #fff;
    margin: 12px;
    border-radius: 5px;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
    width: 30%;
    box-shadow: 10px 10px 50px -28px rgba(0, 0, 0, 0.37);
    padding-top: 10px;
    padding-bottom: 10px;

    h2 {
      font-size: 22px;
      margin-bottom: 12px;
    }

    .price {
      margin-bottom: 1rem;
      font-size: 17px;
    }

    ul.features {
      list-style-type: none;
      text-align: left;
      font-size: 14px;
      padding: 0;
      li {
        margin: 8px;
        display: flex;
        align-items: baseline;
        .fas {
          margin-right: 4px;
        }
        .fa-check-circle {
          color: #6ab04c;
        }
        .fa-times-circle {
          color: #eb4d4b;
        }
      }
    }

    &.popular {
      border: 2px solid #fe6601;
      position: relative;
      transform: scale(1.08);

      span.most {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fe6601;
        color: #fff;
        padding: 4px 20px;
        font-size: 14px;
        border-radius: 5px;
      }
    }

    &:hover {
      box-shadow: 5px 7px 67px -28px rgba(0, 0, 0, 0.37);
    }
  }
}

.paket-lain {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: all 0.3s ease;
  background: linear-gradient(
    143deg,
    rgba(6, 43, 145, 0.34) 25%,
    rgba(251, 100, 4, 0.46) 83%
  );
  border-radius: 15px;
}

.paket-lain:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
  /*  border-bottom: 3px solid #002f87; /* biru navy */
}

.swiper {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.btn-cta {
  background: var(--second-color);
  border-radius: 35px;
  width: 20%;
  border: 1px solid white;
  color: white;
  padding: 15px 20px;
}

.btn-cta:hover {
  background: var(--third-color);
  color: var(--base-color);
  font-weight: 600;
}

/* Slider Gambar  */
/* Container Dasar */
.swiper-hero {
  /* height: 100vh !important; */
  width: 100%;
  overflow: hidden;
  background-color: #000;
}

/* Background & Animasi Zoom */
.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animated-zoom {
  transform: scale(1);
  transition: transform 12s linear;
}

.swiper-slide-active .animated-zoom {
  transform: scale(1.18);
}

/* Overlay Adventure: Hijau Tua Ke Hitam Transparan */
.overlay-adventure-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(10, 40, 10, 0.95) 0%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 0.2) 100%
  );
  z-index: 2;
}

/* Content Positioning (Center-Left) */
.content {
  position: relative;
  height: 100vh;
  z-index: 3;
}

.border-primary-custom {
  border-color: #256eb5 !important;
  /* Warna biru sesuai palette Anda */
}

/* Tipografi */
.brand-tag {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

.hero-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 54px;
  line-height: 1.1;
  text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.4);
}

.hero-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 1.6;
  max-width: 580px;
}

/* Button Hero */
.btn-hero {
  /* padding: 14px 30px; */
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: none;
  cursor: pointer;
}

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

.btn-hero:hover::before {
  left: 100%;
}

/* Button Tour (Base Color) */
.btn-tour {
  background-color: transparent;
  color: white;
  box-shadow: 0 4px 15px rgba(70, 151, 115, 0.3);
  border: 2px solid;
}

.btn-tour:hover {
  background-color: #3a7e60; /* Sedikit lebih gelap saat hover */
  box-shadow: 0 8px 25px rgba(70, 151, 115, 0.5);
  color: white !important;
}

/* Button WhatsApp (Branding Color) */
.btn-wa {
  background-color: var(--base-color);
  color: white;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btn-wa:hover {
  background-color: var(--second-color);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
  color: white !important;
}

/* Global Hover State */
.btn-hero:hover {
  transform: translateY(-5px) scale(1.02);
  color: var(--white);
}

.btn-hero:active {
  transform: translateY(-2px) scale(0.98);
}

/* Tipografi & Ikon */
.btn-hero i {
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .btn-hero {
    padding: 6px 14px;
    font-size: 14px;
    width: 100%; /* Tombol full width di mobile agar lebih mudah ditekan */
  }
}

/* Animasi Slide-In From Left */
.animate-item {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

.delay-2 {
  transition-delay: 0.5s;
}

.delay-3 {
  transition-delay: 0.7s;
}

/* Responsive Mobile */
@media (max-width: 768px) {
  .hero-title {
    font-size: 32px;
  }

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

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

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

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

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

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

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

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

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

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

/* Slider Gambar  */

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

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

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

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

/* btn Slider  */

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

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

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

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

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

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

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

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

/* btn custom  */

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

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

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

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

/* Btn Custom 2 */

/* Card Testimoni  */

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

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

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

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

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

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

/* title nama web  */

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

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

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

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

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

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

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

/* Rating */
.rating {
  display: flex;
  gap: 5px;
}

.rating i {
  font-size: 14px;
  color: #ddd;
}

.rating i.active {
  color: #ff2d55;
}

/* Text */
.testimonial-text {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

/* Name */
.testimonial-name {
  font-weight: 600;
  font-size: 14px;
  color: #222;
}

/* Big Quote */
.big-quote {
  position: absolute;
  right: 30px;
  bottom: -10px;
  font-size: 80px;
  color: #ff2d55;
  font-weight: bold;
  line-height: 1;
}

/* Swiper buttons */
.swiper-button-prev,
.swiper-button-next {
  color: #999;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  color: #000;
}

/* Center slide scale effect */
/* .swiper-slide {
  opacity: 0.4;
  transform: scale(0.9);
  transition: all 0.4s ease;
}

.swiper-slide-active {
  opacity: 1;
  transform: scale(1);
} */

/* Card testimoni  */

.product-card {
  /*    width: 300px;*/
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: left;
  transition: transform 0.6s ease;
  box-shadow: 0.3s ease;
}

.product-card:hover {
  transform: translateY(-10px);
  /*  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);*/
}

.image-container {
  position: relative;
}

.image-container img {
  width: 100%;
  border-radius: 15px;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.favorite-star {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  color: #000;
}

.product-info h2 {
  margin: 15px 0 10px;
  font-size: 24px;
}

.product-info p {
  font-size: 14px;
  color: #555;
}

.tags {
  margin: 10px 0;
}

.tag {
  cursor: pointer;
  display: inline-block;
  background-color: orange;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 12px;
  margin-right: 5px;
}
/* .tag:hover {
  background-color: greenyellow;
} */
.price-order {
  display: flex;
  /*    justify-content: space-between;*/
  align-items: center;
  margin-top: 15px;
  justify-content: center;
}

.price {
  font-size: 24px;
  font-weight: bold;
}

.order-button {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
}

.order-button:hover {
  background-color: #444;
  color: greenyellow;
}
.favorite-star {
  cursor: pointer;
}
.favorite-star.active {
  color: gold;
}
.product-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

.custom-btn {
  padding: 10px 10px;
  color: #fff;
  border-radius: 15px;
  font-weight: 400;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow:
    inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1),
    4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
}

/* Btn Rental  */
.btn-rental {
  /* background-color: var(--base-color); */
  border: 2px solid var(--base-color);
  border-radius: 9px;
  padding: 5px 10px;
  color: var(--base-color);
  text-align: center;
}
.btn-rental i {
  background-color: var(--second-color);
  padding: 5px;
  border-radius: 4px;
  color: white;
}

.btn-rental:hover {
  background: linear-gradient(135deg, #000000, #c89b3c);
  color: #ffffff;
  border: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.btn-rental:hover i {
  background-color: transparent;
}

/* Btn Rental */

/* 14 */
.btn-14 {
  background: #0039a2;
  border: none;
  z-index: 1;
}
.btn-14:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 15px;
  background-color: #0039a2;
  background-image: linear-gradient(315deg, #0039a2 0%, #009bff 74%);
  box-shadow:
    inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5) 7px 7px 20px 0px
      rgba(0, 0, 0, 0.1),
    4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.btn-14:hover {
  color: white;
}
.btn-14:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-14:active {
  top: 2px;
}

.btn-3 {
  /*  letter-spacing: 0.05rem;*/
  position: relative;
  background: #0039a2;
  padding: 10px 10px;
  color: #401aff;
  width: 30%;
  overflow: hidden;
  transition: 0.3s ease-in-out;
  border-radius: 0.3rem;
  border: none;
  z-index: 1;
  color: white;
  box-shadow:
    0 19px 38px rgba(0, 0, 0, 0.3),
    0 15px 12px rgba(0, 0, 0, 0.22);
}
.btn-3:hover {
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.19),
    0 6px 6px rgba(0, 0, 0, 0.23);
  transform: scale(0.95);
}

/*Keunggulan*/
.k-card-1 {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.k-card-1:hover {
  transform: translateY(-6px);
  border-color: #dc3545;
  box-shadow: 0 12px 24px rgba(220, 53, 69, 0.15);
}

/* Animasi Ikon Utama saat Hover */
.k-card-1 .main-icon {
  transition: transform 0.35s ease;
}

.k-card-1:hover .main-icon {
  transform: scale(1.1);
}

/* Ornamen Grafis dari Gambar Ikon di Kanan Atas */
.k-card-1 .bg-ornament-img {
  width: 85px;
  height: 85px;
  opacity: 0.08;
  filter: grayscale(30%) sepia(100%) hue-rotate(310deg) saturate(300%);
  /* Efek nuansa warna merah tipis */
  transform: scale(1) rotate(-10deg) scaleX(-1);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}

/* Animasi Ornamen saat Card Hover */
.k-card-1:hover .bg-ornament-img {
  opacity: 0.22;
  transform: scale(1.25) rotate(5deg) scaleX(-1);
}

/*Keunggulan*/

/* sosmed footer */

textarea {
  resize: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.image-wrapper {
  height: 200px;
}

/* Mencegah tumpah/flash sebelum JS jalan */
.gallery-swiper:not(.swiper-initialized) {
  visibility: hidden;
  opacity: 0;
}

.gallery-swiper {
  overflow: hidden;
  transition: opacity 0.2s ease;
}

/* Memaksa batas elemen slider dan gambar agar pas di dalam grid */
.gallery-swiper .swiper-wrapper {
  display: flex !important;
}

.gallery-swiper .swiper-slide {
  height: auto !important;
  flex-shrink: 0 !important;
}

.gallery-swiper .gallery-hover-card {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.gallery-swiper .gallery-hover-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-hover-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.gallery-hover-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

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

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 1.5rem;
  text-align: center;
}

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

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

/* galeri baru  */
.gallery-hover-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.gallery-hover-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

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

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 1.5rem;
  text-align: center;
}

.gallery-hover-card:hover .gallery-overlay {
  opacity: 1;
}
/* galeri baru  */

/* Card Keunggulan  */
/* Helper Base */
/* Mobile Slider Styles - Only applies below 768px */
@media (max-width: 767.98px) {
  .keunggulan-mobile-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-bottom: 10px;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .keunggulan-mobile-slider::-webkit-scrollbar {
    display: none;
  }

  .keunggulan-mobile-slider .mobile-slide-item {
    flex: 0 0 85%;
    max-width: 85%;
    /* DIPERBAIKI: Ubah center menjadi start agar rata kiri */
    scroll-snap-align: start;
    padding-right: 10px;
  }

  .keunggulan-mobile-slider .mobile-slide-item:last-child {
    padding-right: 0;
  }

  /* Hide scrollbar for Firefox */
  .keunggulan-mobile-slider {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Dot Indicators */
  .mobile-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 15px;
  }

  .mobile-slider-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .mobile-slider-dots .dot.active {
    background: #ff0033;
    width: 20px;
    border-radius: 4px;
  }
}

/* Hide dots on desktop */
@media (min-width: 768px) {
  .mobile-slider-dots {
    display: none;
  }
}
.pointer-events-none {
  pointer-events: none !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==================== POSITIONING NAV BUTTONS LEFT & RIGHT ==================== */
.ly-kg-opt1 .slider-container-wrapper {
  position: relative;
  padding: 0 25px; /* Memberi ruang di kanan-kiri agar tombol tidak menutupi kartu */
}

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

.ly-kg-opt1 .nav-prev-1 {
  left: 0;
}
.ly-kg-opt1 .nav-next-1 {
  right: 0;
}

.ly-kg-opt1 .btn-nav:hover {
  background: #3189b9;
  color: #ffffff;
  border-color: #3189b9;
  box-shadow: 0 6px 20px rgba(49, 137, 185, 0.25);
}

/* ==================== EQUAL HEIGHT & NEW HOVER ANIMATION ==================== */
.ly-kg-opt1 .swiper-slide {
  height: auto; /* Memaksa swiper agar tinggi slide seragam */
  display: flex;
}

.ly-kg-opt1 .kg-card-slide {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  height: 100%; /* Memaksa kartu mengisi penuh tinggi slide */
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efek Bingkai Garis Tepi Siku saat Hover (Konsep Cetak Biru/Konstruksi) */
.ly-kg-opt1 .kg-card-slide::before,
.ly-kg-opt1 .kg-card-slide::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid #3189b9;
  transition: all 0.4s ease;
  opacity: 0;
}
/* Siku Kiri Atas */
.ly-kg-opt1 .kg-card-slide::before {
  top: 0;
  left: 0;
  border-top-width: 3px;
  border-left-width: 3px;
  border-radius: 16px 0 0 0;
}
/* Siku Kanan Bawah */
.ly-kg-opt1 .kg-card-slide::after {
  bottom: 0;
  right: 0;
  border-bottom-width: 3px;
  border-right-width: 3px;
  border-radius: 0 0 16px 0;
}

/* Desain Kotak Gambar (Dibuat Kecil Presisi) */
.ly-kg-opt1 .slide-img-box {
  width: 55px;
  height: 55px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  transition: all 0.4s ease;
  padding: 4px;
}

.ly-kg-opt1 .slide-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ly-kg-opt1 .kg-card-slide h3 {
  transition: color 0.3s ease;
}

/* TRIGGER ANIMASI HOVER KARTU */
.ly-kg-opt1 .kg-card-slide:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
  border-color: transparent;
}

.ly-kg-opt1 .kg-card-slide:hover::before,
.ly-kg-opt1 .kg-card-slide:hover::after {
  width: 25px;
  height: 25px;
  opacity: 1;
}

.ly-kg-opt1 .kg-card-slide:hover .slide-img-box {
  border-color: #3189b9;
  box-shadow: 0 6px 15px rgba(49, 137, 185, 0.2);
}

.ly-kg-opt1 .kg-card-slide:hover .slide-img-box img {
  transform: scale(1.15) rotate(3deg); /* Gambar kecil nge-zoom & miring sedikit */
}

.ly-kg-opt1 .kg-card-slide:hover h3 {
  color: #3189b9 !important;
}
/* CARD Keunggulan  */

.single_portfolio_work {
  position: relative;
  overflow: hidden;
}

.portfolio_work_box {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 0px;
  transition:
    transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1),
    box-shadow 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
}

.portfolio_work_box::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85%;
  display: block;
  z-index: 1;
  content: "";
  background: linear-gradient(
    to bottom,
    rgba(15, 15, 15, 0),
    rgba(15, 15, 15, 0.75) 100%
  );
  transition: opacity 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
  cursor: pointer;
}

.portfolio_work_box::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  content: "";
  background: linear-gradient(to bottom, rgb(0 0 0 / 40%), #11aed6 100%);
  transition: opacity 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
  cursor: pointer;
  opacity: 0;
}

.box_thumbnail_inner {
  position: relative;
}

.portfolio_work_box .box_thumbnail_inner .thumbnail {
  display: block;
  position: relative;
}

.img_hover_link {
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0;
  height: 100%;
  width: 100%;
  line-height: 60px;
  transform: translateY(-20px);
  transition:
    opacity 0.18s cubic-bezier(0.05, 0.2, 0.1, 1),
    transform 0.18s cubic-bezier(0.05, 0.2, 0.1, 1);
  text-overflow: ellipsis;
  overflow: hidden;
  z-index: 99;
}

.img_hover_link a {
  position: relative;
  display: block;
  top: 45px;
  color: white;
  height: 50px;
  font-size: 20px;
  width: 50px;
  line-height: 50px;
  margin-left: 30px;
  text-align: center;
  border-radius: 10px;
  background: #11aed6;
  transform: translateX(0px);
  transition: all 0.35s ease-in-out;
  z-index: 3;
}

.single_portfolio_work:hover .img_hover_link {
  opacity: 1;
  transform: translateY(0px);
  transition:
    opacity 0.18s cubic-bezier(0.05, 0.2, 0.1, 1),
    transform 0.18s cubic-bezier(0.05, 0.2, 0.1, 1);
}

.portfolio_work_box .box_thumbnail_inner .thumbnail img {
  transition:
    transform 1s ease,
    opacity 0.5s ease 0.25s;
  border-radius: 0px;
  width: 100%;
}

.portfolio_work_content {
  position: relative;
}

.portfolio_work_content .portfolio_work_inner {
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 30px 30px 20px;
  z-index: 999;
  width: 100%;
  transform: translateX(-50%);
}

.portfolio_work_content .portfolio_work_inner .portfolio_work_heading {
  transition:
    cubic-bezier(0.05, 0.2, 0.1, 1),
    transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
}

.portfolio_work_content .portfolio_work_inner .portfolio_work_heading span {
  margin: -5px;
  margin-bottom: 5px;
}

.portfolio_work_content .portfolio_work_inner .portfolio_work_heading span a {
  color: #ffffff;
  display: inline-block;
  margin: 5px;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.portfolio_work_content .portfolio_work_inner .portfolio_work_heading h4 {
  color: #ffffff;
  font-size: 30px;
}

.portfolio_work_content .portfolio_work_inner .portfolio_work_heading h4 a {
  color: #ffffff;
  /* text-decoration: none; */
}

.portfolio_work_content .portfolio_work_inner .paragraph {
  opacity: 0;
  position: absolute;
  bottom: 10px;
  transform: translateY(20px);
  line-height: 1.5em;
  max-width: 80%;
  transition:
    cubic-bezier(0.05, 0.2, 0.1, 1),
    transform 0.18s cubic-bezier(0.05, 0.2, 0.1, 1);
  height: 62px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.portfolio_work_content .portfolio_work_inner .paragraph p {
  color: #fff;
  opacity: 0.9;
  margin-bottom: 0;
  font-size: 16px;
}

.single_portfolio_work .portfolio_work_box:hover {
  box-shadow: 0 25px 55px rgb(253 71 102 / 22%);
}

.single_portfolio_work .portfolio_work_box:hover::before {
  opacity: 0;
}

.single_portfolio_work .portfolio_work_box:hover::after {
  opacity: 1;
}

.single_portfolio_work:hover .box_thumbnail_inner img {
  transform: scale(1.1);
  transition: all 9s cubic-bezier(0.1, 0.2, 7, 1);
}

.single_portfolio_work:hover .portfolio_work_inner .portfolio_work_heading {
  transform: translateY(-60px);
  transition:
    cubic-bezier(0.05, 0.2, 0.1, 1),
    transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
}

.single_portfolio_work:hover .portfolio_work_inner .paragraph {
  transform: translateY(0);
  opacity: 1;
  transition:
    cubic-bezier(0.05, 0.2, 0.1, 1) 0.15s,
    transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1) 0.15s;
}

/* Kontak */
.contact-card {
  background-color: white;
  border-radius: 10px;
  padding: 15px 20px;
  margin-bottom: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-icon {
  font-size: 24px;
  color: #00bcd4;
  /* soft blue */
}

.contact-info {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 13px;
  color: #555;
}

.value {
  font-size: 15px;
  font-weight: 400;
  color: #11aed6;
}
.kontak {
  border-radius: 30px;
}

.alt-font ol li {
  font-size: 14px;
}

/* tentang kami */
.service-card {
  position: relative;
  background-color: white;
  border-radius: 10px;
  padding: 20px 20px 10px 80px;
  max-width: 500px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* bayangan bawah */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* bayangan saat hover */
}

.icon-circle {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 60px;
  height: 60px;
  /* background-color: #d9f0f5; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.icon-circle img {
  width: 50px;
  height: 50px;
  padding: 3px;
  background-color: white;
  border-radius: 50%;
}

.title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.description {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* effect-1 styles */
.effect.effect-1 {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* bayangan bawah */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.effect.effect-1:before {
  content: "➔";
  font-family: FontAwesome;
  font-size: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  top: 0;
  opacity: 0;
  height: 100%;
  width: 40px;
  transition: all 0.2s linear 0s;
}

.effect.effect-1:hover {
  text-indent: -20px;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* bayangan saat hover */
}

.effect.effect-1:hover:before {
  opacity: 1;
  text-indent: 0px;
}

.effect.effect-2 {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* bayangan bawah */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.effect.effect-2:before {
  content: "\f232";
  font-family: FontAwesome;
  font-size: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  top: 0;
  opacity: 0;
  height: 100%;
  width: 40px;
  transition: all 0.2s linear 0s;
}

.effect.effect-2:hover {
  text-indent: -20px;
}

.effect.effect-2:hover:before {
  opacity: 1;
  text-indent: 0px;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* bayangan saat hover */
}

.effect {
  text-align: center;
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  text-transform: capitalize;
  background-color: #11aed6;
  font-family: "Roboto", sans-serif;
  /* put your font-family */
  font-size: 14px;
  padding: 10px 0px;
  width: 150px;
  border-radius: 6px;
  overflow: hidden;
}

mark {
  background-color: #11aed6 !important;
  color: white;
}

/* welcome text  */
/* Opsi 1 CSS */
.btn-ly6-primary {
  background: #3189b9;
  color: #fff;
  border: 1px solid #3189b9;
  transition: all 0.3s ease;
}

.btn-ly6-primary:hover {
  background: #1f638a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(49, 137, 185, 0.3);
}

.btn-ly6-outline {
  background: transparent;
  color: #3189b9;
  border: 1px solid #3189b9;
  transition: all 0.3s ease;
}

.btn-ly6-outline:hover {
  background: rgba(49, 137, 185, 0.05);
  color: #1f638a;
  border-color: #1f638a;
  transform: translateY(-2px);
}
.ly6-badge-glass {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(49, 137, 185, 0.3);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #1f638a;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* CSS Judul Opsi 6 */
.ly6-title {
  font-size: 25px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
}

.ly6-italic-text {
  color: var(--second-color);
  font-weight: 500;
}

/* Ornamen Gambar Opsi 6 */
.ly6-shadow-layer {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  padding: 10px;
}

.ly6-shadow-layer::after {
  content: "";
  position: absolute;
  top: 15px;
  left: -15px;
  width: 100%;
  height: 100%;
  background: rgba(31, 99, 138, 0.1);
  border-radius: 16px;
  z-index: -2;
}

.ly6-img {
  border-radius: 12px;
}

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

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

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

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

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

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

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

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

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

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

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

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

  .floating-card {
    padding: 30px 20px;
  }
}
/* welcome text  */

/* section  */
/* --- CSS Opsi 2 (Prefix: tl-v2-) --- */
.tl-v2-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px;
}
.tl-v2-bar {
  width: 25px;
  height: 2px;
  background-color: #cbd5e1;
}
.tl-v2-badge-text {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* section  */

/* layanan utama  */

/* Kontainer utama kolom */
.process-wrapper.line .col {
  position: relative;
  text-align: left;
  z-index: 1;
}

/* Pembungkus konten yang akan bergerak saat hover */
.process-item-content {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  z-index: 2; /* Di atas garis */
}

/* Efek angkat konten saja (Garis tidak ikut) */
.process-wrapper.line .col:hover .process-item-content {
  transform: translateY(-10px);
}

/* Efek Icon Lingkaran */
.process-wrapper.line .icon {
  transition: all 0.3s ease;
  background-color: #f0f2f5; /* Warna awal btn-soft-primary */
  border: none;
}

/* Hover: Background Icon jadi Biru */
.process-wrapper.line .col:hover .icon {
  background-color: var(--base-color) !important;
  box-shadow: 0 8px 15px rgba(var(--bs-primary-rgb), 0.25);
}

/* Efek Gambar: Awalnya abu-abu, saat hover jadi PUTIH */
.process-wrapper.line .col img {
  transition: all 0.3s ease;
  filter: grayscale(1) brightness(0.5); /* Awalnya redup/abu */
}

.process-wrapper.line .col:hover img {
  /* Filter untuk mengubah gambar hitam/warna menjadi PUTIH bersih */
  filter: brightness(0) invert(1);
}

/* Garis Penghubung (Tetap Diam) */

/* layanan utama  */

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

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

.custom-shape-divider-bottom-welcome .shape-fill {
  fill: #00407c;
}

/* Icon Title  */
.title-badge-pro-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  background: #e9f1fb;
  padding: 6px 16px 6px 6px;
  border-radius: 50px;
  border: 2px solid #cfe0f5;
}

/* ICON BULAT */
.icon-title {
  width: 18px;
  height: 18px;
  min-width: 18px;

  background: #2f5fa7;
  border-radius: 50%;

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

  /* 🔥 shadow biar naik */
  box-shadow: 0 4px 10px rgba(47, 95, 167, 0.3);
}

/* ICON */
.icon-title i {
  color: #fff;
  font-size: 9px;
  line-height: 1;
  /* transform: translateX(1px); */
}

/* TEXT */
.badge-text {
  font-size: 12px;
  font-weight: 600;
  color: #2f5fa7;
  letter-spacing: 0.5px;
}
/* icon title  */

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

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

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

/* ornamen Keunggulan  */
.custom-shape-divider-top-keunggulan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

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

.custom-shape-divider-top-keunggulan .shape-fill {
  fill: #256eb517;
}

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

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

.custom-shape-divider-bottom-keunggulan .shape-fill {
  fill: #256eb517;
}

.ornamen-welcome {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  z-index: 0;
}

.ornamen-blog-bunga {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 0;
  top: 0;
  opacity: 0.2;
  z-index: 0;
}

.ornamen-tugu {
  content: "";
  position: absolute;
  width: 19%;
  height: 50%;
  left: -90px;
  opacity: 0.04;
  z-index: -1;
  bottom: 0px;
}

/* Ornamen-keunggulan */
.ornamen-keunggulan {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 0;
  top: 30px;
  opacity: 0.1; /* Sesuaikan base opacity-nya */

  /* Efek memudar ke atas (Semakin ke atas semakin transparan) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );

  /* Tambahan agar gambar tidak terpotong kasar */
  pointer-events: none;
  z-index: 0;
}

.ornamen-buku {
  position: absolute;
  width: 300px;
  height: 300px;
  right: -100px;
  top: 0px;
  opacity: 0.05;
  object-fit: contain;
}

/* ornamen galeri  */
.ornamen-galeri {
  position: absolute;
  width: 300px;
  height: 300px;
  right: 0;
  top: 0px;
  opacity: 0.2;
  /* Animasi floating */
  animation: floatUpDown 4s ease-in-out infinite;
  pointer-events: none; /* Mencegah ornamen mengganggu klik elemen di bawahnya */
}

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

/* ornamen galeri  */

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

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

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

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

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

/* ornamen page header  */

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

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

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

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

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

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

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

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

/* ornamen galeri  */

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

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

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

/* ornamen cta */

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

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

/* Ornamen card rental  */
.card-bg-rental {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Card Testimoni  */

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

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

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

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

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

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

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

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

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

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

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

/* Card wisata detail  */

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

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

/* TITLE */

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

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

/* CONTACT GRID */

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

/* CARD */

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

  background: #fff;
  padding: 30px;

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

  text-decoration: none;

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

  transition: 0.35s;
}

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

/* ICON */

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

  margin: 0 auto 15px;

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

  border-radius: 50%;

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

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

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

/* TEXT */

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

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

/* ADDRESS */

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

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

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

/* SOCIAL */

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

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

/* RESPONSIVE */

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

/* card wisata  */
/* Badge Gold Header */
.bg-gradient-gold-badge {
  background: linear-gradient(
    135deg,
    #d4af37 0%,
    #c5a059 30%,
    #9a7b38 60%,
    #e6ca65 85%,
    #8e6520 100%
  ) !important;
}

/* Sticky Left Header */
.sticky-tour-header {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  z-index: 5;
}

/* Grid Bento 4-Item Vertical Split Grid */
.bento-vert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  /* Dipertinggi dari 130px ke 200px */
  gap: 1.25rem;
}

/* Pattern Layout 4 Card */
.bento-vert-grid .bento-card-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 1;
}

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

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

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

@media (max-width: 991.98px) {
  .bento-vert-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 190px;
  }

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

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

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

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

@media (max-width: 575.98px) {
  .bento-vert-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .bento-vert-grid .bento-card-item:nth-child(n) {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/* Smooth Hover Animation & Card Base Style */
.bento-card-item {
  position: relative;
  display: block;
  border-radius: 1.25rem;
  overflow: hidden;
  background-color: #0f0f0f;
  text-decoration: none !important;
  transition:
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s ease;
  will-change: transform, box-shadow;
}

.bento-card-item:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22) !important;
  z-index: 3;
}

.bento-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
}

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

/* Dynamic Gradient Overlay on Hover */
.bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.88) 100%
  );
  transition: background 0.4s ease;
}

.bento-card-item:hover .bento-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(30, 20, 5, 0.55) 50%,
    rgba(10, 8, 2, 0.94) 100%
  );
}

/* Rating Badge Glow Animation */
.bento-rating-badge {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    border-color 0.35s ease,
    background 0.35s ease;
}

.bento-card-item:hover .bento-rating-badge {
  background: rgba(15, 12, 5, 0.85);
  border-color: rgba(212, 175, 55, 0.4);
}

/* CTA Arrow Circle Icon Animation */
.bento-cta-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition:
    background 0.35s ease,
    transform 0.35s ease,
    color 0.35s ease;
}

.bento-card-item:hover .bento-cta-icon {
  background: linear-gradient(135deg, #d4af37 0%, #8e6520 100%);
  color: #ffffff;
  transform: translateX(5px);
}
/* card wisata  */

/* card full height */
.card-wisata {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

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

/* dorong harga ke bawah */
.price-container-modern {
  margin-top: auto;
}

/* WRAPPER */
.btn-group-wisata {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* =========================
   BUTTON UMUM
========================= */
.btn-more-wisata,
.btn-book-wisata {
  flex: 1;
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  /* width: 100%; */
  justify-content: center;
  align-items: center;
}

/* =========================
   OUTLINE (LIHAT)
========================= */
.btn-more-wisata {
  background: transparent;
  color: #000000;
  border: 2px solid #ddbc60;
}

.btn-more-wisata:hover {
  background: #ffd450;
  color: #000;
  border-color: #ffd450;
  transform: translateY(-2px);
}

/* =========================
   GRADIENT (BOOKING)
========================= */
.btn-book-wisata {
  background: linear-gradient(135deg, #ffd450, #ddbc60);
  color: #000000;
  border: none;
  box-shadow: 0 4px 12px rgba(221, 188, 96, 0.4);
}

.btn-book-wisata:hover {
  background: linear-gradient(135deg, #ddbc60, #ffd450);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(221, 188, 96, 0.6);
}

/* ACTIVE CLICK */
.btn-book-wisata:active,
.btn-more-wisata:active {
  transform: scale(0.97);
}

/* Section Custom  */
.section-custom {
  background: #fff;
  padding: 90px 0;
  position: relative;
}

/* garis kiri kanan */
.section-custom::before,
.section-custom::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 2px;
  background: var(--base-color);
  top: 10%;
}

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

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

/* badge */
.badge-title {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--base-color);
  text-transform: uppercase;
}

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

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

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

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

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

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

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

/* card artikel  */
.card-sport-date {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eee;
  overflow: hidden;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.card-sport-date:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(255, 0, 60, 0.15);
  border-color: rgba(255, 0, 60, 0.3);
}

.card-sport-date .img-container {
  position: relative;
  height: 180px;
  overflow: hidden;
}

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

.card-sport-date:hover .img-container img {
  transform: scale(1.08);
}

.card-sport-date .floating-date {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #ff003c;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.card-sport-date .card-body-custom {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.card-sport-date .heading-title {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.card-sport-date:hover .heading-title {
  color: #ff003c;
}

.card-sport-date .footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}
/* card artikel  */

/* CTA Section  */

.cta-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(11, 28, 45, 0.85) 0%,
    rgba(11, 28, 45, 0.7) 50%,
    rgba(11, 28, 45, 0.9) 100%
  );

  z-index: 1;
}

/* pastikan konten di atas overlay */
.cta-floating .container {
  position: relative;
  z-index: 2;
}

.cta-floating {
  background: #f5f7fa;
}

.cta-floating-box {
  background: #fff;
  padding: 50px 30px;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  max-width: 700px;
  margin: auto;
}

.cta-floating-box h2 {
  margin-bottom: 10px;
}

.cta-floating-box p {
  color: #666;
  margin-bottom: 20px;
}

/* Cta Section  */

.gslide-image img {
  max-height: 80vh;
}

/* Galeri Detail  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* card keunggulan  */
.keunggulan-4 {
  position: relative;
  padding: 24px 12px;
  text-align: center;
  height: 100%;
  transition: transform 0.3s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* layanan  */

/* layanan  */

/* Card Rental  */
/* Global Card Base */
.card-rental-item {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
  background: #ffffff;
}

.vehicle-img-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vehicle-img-wrapper img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.15));
}

/* --- TAMPILAN MOBILE (Sebaris 2 Card + Overlap Presisi) --- */
@media (max-width: 575.98px) {
  .card-rental-item {
    /* padding-top: 2rem !important;  */
    margin-top: 30px;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    padding-bottom: 0.75rem !important;
    border-radius: 14px !important;
  }

  /* Gambar dibuat Overlap ke atas -32px */
  .vehicle-img-wrapper {
    height: 75px !important;
    margin-top: -32px !important;
    margin-bottom: 0.4rem !important;
  }

  .vehicle-img-wrapper img {
    max-height: 85px;
  }

  .card-rental-title {
    font-size: 13px !important;
  }

  .card-rental-sub {
    font-size: 11px !important;
  }

  .card-rental-spec {
    font-size: 11px !important;
    gap: 4px !important;
  }

  .card-rental-spec i {
    font-size: 11px !important;
    width: 14px !important;
  }

  .btn-rental-cta {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    font-size: 11px !important;
    gap: 3px !important;
  }

  .btn-rental-cta i {
    font-size: 12px !important;
  }
}

/* --- TAMPILAN DESKTOP --- */
@media (min-width: 992px) {
  .card-rental-item {
    /* padding-top: 2.5rem ; */
    margin-top: 90px;
  }

  .vehicle-img-wrapper {
    height: 110px;
    margin-top: -55px;
    margin-bottom: 0.5rem;
  }

  .vehicle-img-wrapper img {
    max-height: 130px;
  }
}
/* card rental  */

.card-smooth {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.line-card {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.line-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 20;
  width: 0%;
  height: 3px;
  background-color: #11aed6;
  transition: width 0.5s ease;
}

.line-card:hover::after {
  width: 100%;
}

.btn-close:before {
  display: none;
}

.stats-section {
  background: #0e67d208;
  padding: 60px 20px;
  text-align: center;
  font-family: "Poppins", sans-serif;
}

/* =========================
      TOMBOL DETAIL
      ========================= */
.btn-detail-layanan {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(90deg, var(--base-color), var(--second-color));
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
}

.btn-detail-layanan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
  color: #fff;
}

/* Ikon Panah Bulat di dalam Tombol */
.btn-arrow {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  transition: all 0.3s ease;
  margin-right: -5px; /* Menarik ikon sedikit ke kanan agar balance */
}

/* Panah bergeser saat tombol di-hover */
.btn-detail-layanan:hover .btn-arrow {
  transform: translateX(4px);
  background: #ffffff;
  color: var(--base-color);
}

/* wrapper */
.cta-layanan {
  position: relative;
}

/* text */
.cta-text {
  font-size: 16px;
  color: var(--base-color);
  font-weight: 600;
}

/* button */
.btn-lainnya-modern {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 22px;

  /* background: linear-gradient(135deg, var(--base-color), var(--second-color)); */
  background-color: transparent;
  color: white;
  font-size: 14px;
  font-weight: 600;

  border-radius: 50px;
  text-decoration: none;
  border: 2px solid white;
  position: relative;
  overflow: hidden;
  transition: 0.35s;
}

/* icon */
.btn-lainnya-modern i {
  transition: 0.3s;
}

/* efek glow halus */
.btn-lainnya-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  transition: 0.3s;
}

/* hover */
.btn-lainnya-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  color: var(--base-color);
}

.btn-lainnya-modern:hover::before {
  opacity: 1;
}

.btn-lainnya-modern:hover i {
  transform: translateX(6px);
}


/* Card Base Style */
  .card-opt2 {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 380px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    isolation: isolate; /* Mencegah overflow glitch pada Safari/iOS */
  }
  
  .card-opt2 .img-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .card-opt2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }
  
  .card-opt2:hover img {
    transform: scale(1.15);
  }
  
  /* Glass Panel Area */
  .card-opt2 .glass-panel {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 16px 20px;
    transition: all 0.4s ease;
    z-index: 2;
  }
  
  .card-opt2:hover .glass-panel {
    background: rgba(220, 53, 69, 0.95);
    border-color: rgba(220, 53, 69, 1);
    bottom: 20px;
  }
  
  .card-opt2 .title-text {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    margin: 0;
    transition: color 0.3s ease;
  }
  
  .card-opt2:hover .title-text {
    color: #ffffff;
  }
  
  /* Expandable Description Area */
  .card-opt2 .desc-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
  }
  
  .card-opt2:hover .desc-wrapper {
    grid-template-rows: 1fr;
  }
  
  .card-opt2 .desc-content {
    overflow: hidden;
    font-size: 13.5px;
    color: #ffffff;
    line-height: 1.5;
  }
  
  .card-opt2:hover .desc-content p {
    margin-top: 10px;
    margin-bottom: 0;
  }

  /* Responsive Mobile Adjustment */
  @media (max-width: 767.98px) {
    .card-opt2 {
      height: 320px; /* Tinggi disesuaikan untuk layar HP */
    }
    .card-opt2 .glass-panel {
      bottom: 12px;
      left: 12px;
      right: 12px;
      padding: 14px 16px;
    }
    .card-opt2 .title-text {
      font-size: 16px;
    }
    .card-opt2 .desc-content {
      font-size: 13px;
    }
  }
/* Card layanan  */

.judul-artikel {
  position: relative;
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  color: #1c1c1c;
  margin-bottom: 1rem;
}

.judul-artikel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px; /* jarak antara teks dan garis */
  width: 100%;
  height: 2px;
  /* opacity: 30%; */
  background-color: var(--second-color); /* biru */
  border-radius: 2px;
}

.service-section {
  display: flex;
  gap: 24px;
  justify-content: center;
  padding: 40px;
  background-color: #f9f9f9;
}

.card-lay {
  /* width: 300px; */
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-lay img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.card-content {
  /* padding: 20px; */
  text-align: center;
}

.card-content h3 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.1rem;
}

.card-content p {
  color: #666;
  font-size: 0.95rem;
}

.card-footer {
  border-top: 1px solid #eee;
  text-align: center;
  padding: 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #cc8800;
  cursor: pointer;
}

.card-lay:hover {
  transform: translateY(-6px);
}

/* Card tengah dengan latar khusus */
.card-lay.highlighted {
  background-color: #bb8645;
  color: white;
}

.card-lay:hover .card-footer {
  background-color: var(--base-color);
  color: white;
}
.card-lay:hover .link-layanan {
  color: white;
}
.card-lay.highlighted .card-lay-content p,
.card-lay.highlighted .card-lay-content h3,
.card-lay.highlighted .card-lay-footer {
  color: white;
}

.card-lay.highlighted .card-lay-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.judul-layanan {
  color: #000;
}
.card-lay:hover .judul-layanan {
  color: var(--base-color) !important;
}

/* Point Welcome text  */

.point-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 25px;
  margin-top: 20px;
}

.point-item {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #1f2937;
  position: relative;
  transition: all 0.3s ease;
}

.point-item i {
  color: var(--base-color);
  margin-right: 8px;
  font-size: 14px;
}

.point-item:hover {
  transform: translateX(5px);
  color: var(--base-color);
}

.point-badge-wrapper {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.point-badge {
  padding: 6px 16px;
  border-radius: 50px;
  background: rgba(13, 110, 253, 0.1);
  color: var(--base-color);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.point-badge:hover {
  background: var(--base-color);
  color: white;
  transform: translateY(-3px);
}

.point-box-wrapper {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.point-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  font-weight: 500;
}

.point-box i {
  background: linear-gradient(135deg, #1e88e5, #0d47a1);
  color: white;
  font-size: 12px;
  padding: 8px;
  border-radius: 50%;
}

.point-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(13, 71, 161, 0.15);
}

/* Point Welcome Text  */

.divider-title {
  content: "";
  height: 30px;
  width: 2px;
  background-color: grey;
  /* padding: 10px; */
}

.contact-label {
  text-decoration: underline;

  text-decoration-thickness: 2px; /* Ketebalan garis, bisa disesuaikan */
  text-underline-offset: 5px; /* Jarak antara teks dan garis */
}

.contact-card {
  width: 100%;
  background-color: #ffffff; /* Latar belakang putih untuk kartu */
  border-radius: 12px; /* Sudut membulat */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Efek bayangan */
  padding: 20px;
  display: flex; /* Menggunakan flexbox untuk ikon dan teks */
  align-items: center; /* Mensejajarkan ikon dan teks secara vertikal */
  gap: 15px; /* Jarak antara ikon dan teks */
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out; /* Efek transisi saat hover */
  /* cursor: pointer; Menunjukkan bahwa kartu bisa diinteraksi */
}

.contact-card:hover {
  transform: translateY(-3px); /* Sedikit naik saat hover */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); /* Bayangan lebih intens saat hover */
}

.icon-kontak {
  min-width: 40px;
  max-width: 40px;
  background: var(--base-color);
  color: var(--second-color);
  font-size: 28px;
  display: flex !important;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  min-height: 40px;
  max-height: 40px;
  align-items: center;
}

.highlight-text {
  position: relative; /* Penting untuk pseudo-elemen ::after */
  display: inline-block; /* Agar lebar garis sesuai teks */
}

/* Garis bergerak */
.highlight-text::after {
  content: "";
  position: absolute;
  left: 0;
  /* text-align: center; */
  bottom: 20px; /* Posisi di bawah teks */

  width: 150px; /* Lebar garis yang bergerak, sesuaikan jika perlu */
  height: 2px; /* Tinggi garis */
  background: linear-gradient(
    to right,
    #0e67d2,
    #02b7f7
  ); /* Gradien warna garis */
}

/* Card Rental baru  */
/* Animasi Hover Card */
.card-rental-item {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease !important;
}

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

/* Animasi Hover Tombol CTA */
.btn-gold-dark {
  /* Gradasi Emas Tua & Perunggu Antik (Dark Aged Gold) */
  background: linear-gradient(
    135deg,
    #c5a059 0%,
    #a37c3f 25%,
    #7a581e 50%,
    #4a340e 75%,
    #7a581e 100%
  ) !important;
  background-size: 200% auto !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

.btn-gold-dark:hover {
  background-position: right center !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(122, 88, 30, 0.5) !important;
}

.btn-gold-dark:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 10px rgba(74, 52, 14, 0.4) !important;
}

/* Ikon Tetap Diam (Tanpa Animasi Transmisi/Pergeseran) */
.btn-gold-dark i,
.btn-gold-dark svg {
  transform: none !important;
  transition: none !important;
}

.btn-gold-dark:hover i,
.btn-gold-dark:hover svg {
  transform: none !important;
}

/* Penyeimbang Ukuran Gambar Kendaraan */
.vehicle-img-wrapper {
  height: 140px;
  margin-top: -75px;
}

.vehicle-img-wrapper img {
  max-height: 100%;
  width: 100%;
  object-fit: contain;
}
/* card rental baru  */

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

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

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

/* ============================================================
   OPSI 3: Hexagon Mesh (Pola Segi 6 / Sarang Lebah Digital)
   ============================================================ */
.welcome-grid-icons.opsi-3 {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(
      circle at 100% 100%,
      rgba(220, 53, 69, 0.06) 0,
      transparent 20%
    ),
    radial-gradient(
      circle at 0% 0%,
      rgba(220, 53, 69, 0.06) 0,
      transparent 20%
    ),
    repeating-linear-gradient(
      60deg,
      rgba(220, 53, 69, 0.03) 0,
      rgba(220, 53, 69, 0.03) 1px,
      transparent 0,
      transparent 14px
    ),
    repeating-linear-gradient(
      120deg,
      rgba(220, 53, 69, 0.03) 0,
      rgba(220, 53, 69, 0.03) 1px,
      transparent 0,
      transparent 14px
    );
}
.section-welcome-modern-3 {
  /* background-color: #111827; */
  position: relative;
}

.double-frame-wrapper {
  position: relative;
  padding: 15px;
  display: inline-block;
  width: 100%;
  z-index: 1;
}

/* ornamen cloud  */
.ornamen-cloud {
  content: "";
  position: absolute;
  width: 100%;
  /* height: 100%; */
  bottom: -25px;
  left: 0;

  /* 🔥 FIX FLIP VERTIKAL: Membalik elemen atas ke bawah */
  /* transform: scaleY(-1); */

  /* Memastikan origin pembalikan berada di tengah elemen */
  transform-origin: center;
}
/* ornamen cloud  */

/* ornamen-prambanan  */

/* ornamen prambanan  */

/* Card Galeri  */
/* NAV BUTTON */
.gallery-opt2-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease;
  cursor: pointer;
}

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

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

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

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

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

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

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

/* Card Galeri  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* sosmed  */

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

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

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

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

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

html {
  scroll-behavior: smooth;
}

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

/*==========================================================================
* Card layanan
==========================================================================*/
:root {
  --base-color: #d71f3b;
  --second-color: #880b1d;
}

/* Base Card Style */
.card-layanan-v2-4 {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-layanan-v2-4:hover {
  border-color: var(--second-color);
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(136, 11, 29, 0.15);
}

/* Animated Title Container */
.card-layanan-v2-4 .title-container {
  position: relative;
  padding: 8px 12px;
  background: rgba(215, 31, 59, 0.05);
  border-left: 3px solid var(--base-color);
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  z-index: 1;
}

/* Background Ornamen Animasi (Gradasi dari Kiri ke Kanan) */
.card-layanan-v2-4 .title-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--base-color) 0%,
    var(--second-color) 100%
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

/* Hover State untuk Ornamen & Teks Judul */
.card-layanan-v2-4:hover .title-container::before {
  transform: scaleX(1);
}

.card-layanan-v2-4 .title-text {
  position: relative;
  z-index: 2;
  transition: color 0.35s ease;
}

.card-layanan-v2-4:hover .title-text {
  color: #ffffff !important;
}

/* Image Container Hover Effect */
.card-layanan-v2-4 .img-container {
  /* height: 175px; */
  border-radius: 8px;
}

.card-layanan-v2-4 .img-container img {
  transition: transform 0.4s ease;
}

.card-layanan-v2-4:hover .img-container img {
  transform: scale(1.07);
}

/* Custom Gradient Button */
.card-layanan-v2-4 .btn-gradient-danger {
  background: linear-gradient(
    135deg,
    var(--base-color) 0%,
    var(--second-color) 100%
  );
  color: #ffffff;
  border: none;
  transition: all 0.3s ease;
}

.card-layanan-v2-4 .btn-gradient-danger:hover {
  background: linear-gradient(
    135deg,
    var(--second-color) 0%,
    var(--base-color) 100%
  );
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(136, 11, 29, 0.3);
}

.card-layanan-v2-4 .btn-outline-dark:hover {
  border-color: var(--second-color);
  background-color: var(--second-color);
  color: #ffffff;
}

.btn-layanan-v2-2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  background: var(--base-color, #d71f3b);
  border: none;
  text-decoration: none;
  transform: skewX(-12deg);
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 3px 8px rgba(215, 31, 59, 0.25);
}

/* Inner Wrapper untuk Menetralkan Kemiringan Teks */
.btn-layanan-v2-2 .btn-content {
  transform: skewX(12deg);
  display: flex;
  align-items: center;
}

/* Animasi Latar Gradasi */
.btn-layanan-v2-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--base-color, #d71f3b) 0%,
    var(--second-color, #880b1d) 100%
  );
  transition: left 0.35s ease;
  z-index: -1;
}

.btn-layanan-v2-2:hover {
  color: #ffffff;
  transform: skewX(-12deg) translateY(-2px);
  box-shadow: 0 6px 14px rgba(136, 11, 29, 0.35);
}

.btn-layanan-v2-2:hover::before {
  left: 0;
}
/*==========================================================================
* Card layanan
==========================================================================*/