@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

/* 
"Playfair Display", serif;
"Great Vibes", cursive;
"Lora", serif;
*/

:root {
  --base-color: #dbae3e;
  --second-color: #f8e082;
  --third-color: #000000;
  --four-color: #3f78e0;
  --very-light-base-color: #ff751f;
  --bs-primary-rgb: 18, 127, 74;
  --bs-secondary-rgb: 170, 176, 188;
  --primary-font: "Lora", serif;
  --alt-font: "Playfair Display", 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);
}

.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: #deb448 !important;
}

.text-warning {
  color: #ffcc00 !important; /* Kuning cerah seperti referensi */
}
/*--------------------------------------------------------------
# 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;
}

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) {
  .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-gradasi {
  background: linear-gradient(to bottom, #0e3f7a, #072140, #000000);
}

.background-welcome {
  position: relative;

  overflow: hidden;

  z-index: 1;

  background-color: #f4f1eb;
}

.background-welcome::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: -1;

  background:
    linear-gradient(
      to bottom,

      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 25%,
      rgba(255, 255, 255, 0.72) 50%,
      rgba(255, 255, 255, 0.596) 100%
    ),
    url("../Aset Desain/pakai/bg/1.webp");

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

  opacity: 0.1;

  pointer-events: none;
}

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

.background-layanan::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /* Gradasi Hitam ke Gold */
  background: 
    linear-gradient(180deg, rgba(0, 0, 0, 0.804) 0%, rgba(184, 135, 11, 0.549) 100%), 
    url("../Aset Desain/pakai/bg/6.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; 
  z-index: -1;
  transform: scaleX(-1);
}

.background-step {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #00407c;
}

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

  background:
  /* linear-gradient(
      to bottom,
      rgba(37,110,181,0.95) 0%,
      rgba(37, 109, 181, 0.904) 40%,
      rgba(255, 119, 0, 0.894) 70%,
      rgba(255,117,0,0.95) 100%
    ), */
  url("../Aset Desain/pakai/bg/18.webp");
  opacity: 0.1;

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

  z-index: -1;
}

.background-wisata {
  position: relative;
  z-index: 1;
  overflow: visible;
}

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

  background:
    linear-gradient(
      180deg,
      rgb(255, 255, 255) 0%,
      rgba(255, 255, 255, 0.363) 40%,
      rgb(255, 255, 255) 100%
    ),
    url("../Aset Desain/pakai/bg/1.webp");

  /* background-repeat: no-repeat; */
  background-size: contain;
  background-position: center;

  opacity: 0.5;
  filter: grayscale(100%); /* ini bikin jadi abu-abu */

  z-index: -1;
}

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

/* BACKGROUND IMAGE */
.background-rental::before {
  content: "";
  position: absolute;
  inset: 0;

  background: url("../Aset Desain/pakai/bg/10.webp") center/cover no-repeat;
  background-attachment: fixed;

  filter: grayscale(100%) brightness(1.1);
  z-index: -2;
}

/* OVERLAY GRADIENT (PUTIH → DARK → GOLD) */
.background-rental::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    /* 🔥 GRADASI PUTIH DI ATAS */
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.9) 15%,
      rgba(255, 255, 255, 0.2) 30%,
      rgba(11, 28, 45, 0.4) 50%,
      rgba(11, 28, 45, 0.7) 80%,
      rgba(11, 28, 45, 0.9) 100%
    ),
    /* 🔥 GOLD EFFECT */
    linear-gradient(
        135deg,
        rgba(255, 98, 80, 0.4) 0%,
        rgba(199, 86, 55, 0.3) 40%,
        rgba(0, 0, 0, 0.2) 100%
      );

  z-index: -1;
}

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

.background-faq {
  position: relative;
  z-index: 1;
  overflow: visible;
}

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

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0.85) 40%,
      #ffffff 100%
    ),
    url("../Aset Desain/pakai/bg/4.webp");

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

  opacity: 0.4;
  /* filter: grayscale(100%); */

  z-index: -1;
}

.background-footer {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* background-color: rgba(255, 255, 255, 0.9); */
}

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

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

  /* convert image ke grey */
  filter: grayscale(100%);

  z-index: -1;
  opacity: 1;
}
.background-footer::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: #322f30d4;

  z-index: -1;
}

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

  background: url("../Aset Desain/pakai/bg/12.webp") center/cover no-repeat;
  /* filter: grayscale(100%); */
}

/* 🔥 OVERLAY PUTIH (biar background lebih soft) */
.background-galeri::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(255, 255, 255, 0.95); /* atur opacity di sini */
  z-index: 0;
}

/* 🔴 SHAPE / WARNA BAWAH */
.background-galeri::before {
  content: "";
  position: absolute;
  top: 38%;
  right: 0;
  width: 100%;
  height: 45%;

  background: #dc0d0a29;

  z-index: 1;
  opacity: 1;
}

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

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

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

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

  background: rgba(0, 0, 0, 0.8); /* atur tingkat gelap di sini */

  z-index: -1;
}

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

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

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

/*==========================================================================
* Navbar
==========================================================================*/
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--second-color);
}

.navbar-stick:not(.navbar-dark) {
  background: white;
}

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

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

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

/* Welcome Text */
.bg-dot.primary {
  background-image: radial-gradient(var(--base-color) 2px, transparent 2.5px);
}

/* Floating WA */

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

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

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

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

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

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

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

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

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

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

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

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

/* floating wa baru  */

/* 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  */
/* =========================================
   CHEM CTA STYLES
   ========================================= */

/* --- OPSI 3: Green Chemistry --- */
/* .chem-card-3 { */
/* background-color: red; */
/* Aksen hijau di sebelah kiri */
/* } */
.chem-card-3 {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* background-color: #e4ebf1; */
}

.chem-card-3::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /* background: url('../../../images/lain-lain/bg-1.jpg'); */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.944) 0%,
      rgba(255, 255, 255, 0.363) 40%,
      rgba(255, 255, 255, 0.328) 100%
    ),
    url("../Aset Desain/pakai/bg/6.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
  opacity: 0.1;
  transform: scaleX(-1);
}

.chem-img-3 {
  clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%);
  /* Membuat miring (slanted) di bagian foto */
}

@media (max-width: 991px) {
  .chem-img-3 {
    clip-path: none;
  }
}

.chem-btn-green {
  background-color: #198754;
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.chem-btn-green:hover {
  background-color: #146c43;
  color: #fff;
  box-shadow: 0 5px 15px rgba(25, 135, 84, 0.3);
}

.chem-btn-green-outline {
  border: 2px solid #198754;
  color: #198754;
  font-weight: 600;
  transition: all 0.3s ease;
}

.chem-btn-green-outline:hover {
  background-color: #198754;
  color: #fff;
}
/* CTA 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;
}

/* Page Header  */
/* =========================
HEADER SPLIT MODERN
========================= */

.page-header-split {
  position: relative;
  padding: 120px 0;
  background-size: cover;
  background-position: center;
}

/* overlay */
.page-header-split .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 25, 45, 0.95) 0%,
    rgba(10, 25, 45, 0.85) 50%,
    rgba(10, 25, 45, 0.6) 100%
  );
  z-index: 1;
}

/* breadcrumb */
.breadcrumb-split {
  display: inline-flex;
  gap: 10px;
  font-size: 13px;
  color: #fff;
}

.breadcrumb-split a {
  color: #fff;
  text-decoration: none;
}

.breadcrumb-split .active {
  color: var(--base-color);
}

/* title */
.title-split {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}

/* desc */
.desc-split {
  color: #ddd;
  font-size: 14px;
  line-height: 1.8;
  max-width: 500px;
}

/* =========================
SHAPE VISUAL KANAN
========================= */

.shape-box {
  position: relative;
  width: 100%;
  height: 300px;
}

/* layer 1 */
.shape-layer {
  position: absolute;
  width: 220px;
  height: 220px;
  /* background: var(--base-color); */
  background: url("../Aset Desain/pakai/bg/1.webp");
  border-radius: 30px;
  top: 40px;
  right: 80px;
  transform: rotate(15deg);
  opacity: 0.8;
  background-size: contain;
}

/* layer 2 */
.shape-layer.second {
  width: 180px;
  height: 180px;
  background: url("../Aset Desain/pakai/bg/1.webp");
  top: 100px;
  right: 20px;
  transform: rotate(-10deg);
  opacity: 0.7;
  background-size: contain;
}

/* efek glow */
.shape-layer,
.shape-layer.second {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* responsive */
@media (max-width: 768px) {
  .page-header-split {
    padding: 80px 0;
  }

  .title-split {
    font-size: 24px;
  }

  .desc-split {
    font-size: 13px;
  }
}
/* 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;
}

/* Paket Wisata */
.start-badge {
  background-color: var(--third-color);
  padding: 4px 10px;
  border-radius: 30px;
  color: rgb(54, 54, 54);
  font-size: 12px;
}

.destinasi-scroll {
  max-height: 120px;
  overflow-y: auto;
  padding-right: 5px;
}

/* hilangkan bullet bawaan */
.destinasi-scroll ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* item list */
.destinasi-scroll li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-size: 14px;
  color: #555;
}

/* icon payung */
.destinasi-scroll li::before {
  content: "\f5ca";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--base-color);
  font-size: 13px;
}

/* custom scrollbar */
.destinasi-scroll::-webkit-scrollbar {
  width: 5px;
}

.destinasi-scroll::-webkit-scrollbar-thumb {
  background: var(--base-color);
  border-radius: 10px;
}

.destinasi-scroll::-webkit-scrollbar-track {
  background: #f2f2f2;
}
.paket-wisata:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-blue-rgb), var(--bs-bg-opacity)) !important;
}

.paket-wisata:hover .card-body .destination {
  background-color: #558df3 !important;
  color: #fff !important;
}

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

.paket-wisata:hover .card-body h2 a {
  color: #fff !important;
}

.paket-wisata:hover .card-body h3 span {
  color: #fff !important;
}

.paket-wisata:hover .card-body h3 {
  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;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  font-size: 25px;
  font-family: var(--primary-font);
}

/* step  */
/* CSS Step Spa - Opsi 1 (Mirip Gambar) */
/* --- CSS Dasar --- */
.step-section { background-color: #fafaf8; position: relative; overflow: hidden; }

/* Garis Putus-putus */
.step-line-bg { display: none; }

/* MEDIA QUERY: Desktop (Garis Horizontal) */
@media (min-width: 992px) {
    .step-line-bg {
        display: block; 
        position: absolute; 
        /* Menggunakan calc agar tetap di tengah lingkaran ikon secara presisi */
        top: calc(170px + 20px); /* 65px adalah setengah tinggi lingkaran (130px/2) + 20px margin */
        left: 15%; 
        right: 15%;
        height: 2px; 
        border-top: 2px dashed #c8b58e; 
        z-index: 1;
    }
    .step-item { 
        text-align: center; 
        display: block !important; 
    }
    .step-circle { 
        margin: 0 auto 20px auto; 
    }
}

/* MEDIA QUERY: Mobile (Garis Vertikal) */
@media (max-width: 991px) {
    .step-line-bg {
        display: block; position: absolute; top: 100px; left: 65px; 
        width: 2px; height: 80%; border-left: 2px dashed #c8b58e; z-index: 1;
    }
    .step-circle { margin: 0 0 20px 0; } /* Geser lingkaran ke kiri */
    .step-item { margin-bottom: 30px !important; }
}

.step-circle {
    width: 90px; height: 90px; /* Di mobile diperkecil sedikit agar proporsional */
    border: 1px solid #c8b58e; border-radius: 50%;
    background-color: #fafaf8; display: flex; align-items: center;
    justify-content: center; position: relative; transition: all 0.4s ease;
    padding: 15px; z-index: 2; /* Agar di atas garis */
}

.step-circle img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; }

.step-number {
    position: absolute; top: 0; left: 0; width: 28px; height: 28px;
    background-color: #2d2b2a; color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px; border: 3px solid #fafaf8;
}

.step-title { color: #2d2b2a; font-weight: 700; margin-bottom: 5px; }
.step-desc { color: #666; font-size: 14px; line-height: 1.5; }

/* Animasi Hover (Hanya desktop) */
@media (min-width: 992px) {
    .step-item:hover .step-circle { transform: translateY(-10px); box-shadow: 0 15px 25px rgba(200, 181, 142, 0.3); border-width: 2px; border-color: #b59b65; }
    .step-item:hover .step-circle img { transform: scale(1.1); }
    .step-item:hover .step-number { background-color: #b59b65; transform: scale(1.1); }
}
@media (max-width: 991px) {
    .step-line-bg {
        display: block;
        position: absolute;
        top: 40%;
        left: 16%;
        width: 2px;
        height: 55%;
        border-left: 2px dashed #c8b58e;
        z-index: 1;
    }
    .step-circle { margin-bottom: 0; }
}
/* step  */

/* marquee klien  */
/* Container Utama */
.marquee-container {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px; /* Jarak antara baris atas dan bawah */
  padding: 30px 0 20px 0; /* Ruang atas bawah agar shadow tidak terpotong */
  position: relative;
}

/* Efek Gradien Putih di Kiri Kanan (Opsional agar pinggirnya memudar estetik) */
.marquee-container::before,
.marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 150px;
  height: 100%;
  z-index: 2;
  pointer-events: none; /* Agar tidak ganggu klik/hover */
}
.marquee-container::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(250, 250, 248, 1) 0%,
    rgba(250, 250, 248, 0) 100%
  ); /* Ubah warna sesuai background website Anda */
}
.marquee-container::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(250, 250, 248, 1) 0%,
    rgba(250, 250, 248, 0) 100%
  );
}

/* Wrapper Animasi */
.marquee-wrapper {
  display: flex;
  align-items: center;
  gap: 40px; /* Jarak antar logo */
  width: fit-content;
  animation: scroll-left 90s linear infinite;
  padding: 10px 0; /* Ruang tambahan untuk efek hover/shadow */
}

/* Arah Berlawanan */
.marquee-wrapper.reverse {
  animation: scroll-right 100s linear infinite; /* Sedikit dipercepat agar dinamis */
}

/* Pause Saat di Hover */
.marquee-container:hover .marquee-wrapper {
  animation-play-state: paused;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* --- STYLE LOGO & ANIMASI HOVER BOX SHADOW --- */
.logo-item {
  height: 85px; /* Diperbesar sedikit karena ada padding */
  min-width: 160px; /* Lebar minimum agar bentuk kotaknya rapi */
  padding: 5px 15px; /* Ruang di dalam kotak (atas/bawah, kiri/kanan) */
  background-color: #ffffff; /* Latar belakang putih bersih */
  border-radius: 16px; /* Ujung membulat yang modern */
  object-fit: contain; /* Agar gambar tidak gepeng */

  /* Persiapan Animasi Smooth */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(0, 0, 0, 0.04); /* Garis batas sangat tipis */
  cursor: pointer;

  /* Opsional: Jika ingin logo normalnya agak redup (Grayscale) buka komentar di bawah ini */
  /* filter: grayscale(100%) opacity(70%); */
}

/* ANIMASI KETIKA DI HOVER */
.logo-item:hover {
  transform: translateY(-8px); /* Melayang naik sedikit */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); /* Efek Box Shadow yang smooth & mewah */
  border-color: rgba(0, 0, 0, 0.08); /* Garis batas agak menebal */

  /* Opsional: Kembalikan warna penuh jika pakai grayscale */
  /* filter: grayscale(0%) opacity(100%); */
}
/* marquee klien  */

/*--------------------------------------------------------------
  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 {
  padding: 50px;
  font-size: 26px;
  line-height: 140%;
  background: var(--theme_bg_primary);
}

@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
--------------------------------------------------------------*/
.layanan-footer-layout{
    width: calc(50% - 8px);
}
.footer-premium {
  padding-top: 100px;
  background-color: #0c1631;
  /* Warna dasar gelap jika gambar gagal load */
}

/* Background & Overlay */
.footer-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  /* Mengurangi kecerahan gambar agar tidak mengganggu teks */
  z-index: 1;
}

.footer-gradient-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgb(24 62 177 / 93%) 0%, #060b19fa 100%);
  z-index: 2;
}

/* Logo & Typography */
.footer-logo {
  max-width: 200px;
  filter: brightness(0) invert(1);
  /* Membuat logo putih jika warnanya gelap */
}

.footer-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
}

.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: #ffc107;
  /* Warna aksen oranye/kuning */
}

/* Links */
.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: 0.3s;
  font-size: 15px;
}

.footer-links a:hover {
  color: #ffc107;
  padding-left: 8px;
}

/* Icon Circle */
.contact-icon-circle {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffc107;
  font-size: 16px;
  min-width: 40px;
}

/* Social Button Glassmorphism */
.social-glass-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  text-decoration: none;
  transition: 0.3s;
}

.social-glass-btn:hover {
  background: #ffc107;
  color: #000;
  transform: translateY(-5px);
}

.backdrop-blur {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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

@media (max-width: 991px) {
  .footer-premium {
    padding-top: 60px;
  }

  .footer-title {
    margin-top: 20px;
  }
}

/* Navbar  */
/* Transisi Halus Navbar */
.navbar {
  transition: all 0.4s ease-in-out;
  background-color: transparent; /* Kondisi awal transparan/menyesuaikan background */
}

/* Styling Nav Link Default (Sebelum Scroll) - Warna Putih */
.navbar-nav .nav-link {
  color: #ffffff !important;
  transition: color 0.3s;
}

/* Kondisi Navbar saat di-Scroll */
.navbar.navbar-stick {
  /* background-color: #ffffff !important; Latar belakang jadi putih saat scroll */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Ganti Warna Text Link saat Scroll (Menjadi Gelap) */
.navbar.navbar-stick .nav-link {
  color: white;
}

/* Warna Link Active saat Scroll */
.navbar.navbar-stick .nav-link.active,
.navbar.navbar-stick .nav-link:hover {
  color: var(--base-color);
}

/* Toggle Logo Logic */
.navbar.navbar-stick .logo-default {
  display: none !important;
}
.navbar.navbar-stick .logo-scrolled {
  display: block !important;
}

/* navbar  */
/*--------------------------------------------------------------
# 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: #ffc107;
}

.fab.orange {
  background: #ff9800;
}

.fab.deep-orange {
  background: #ff5722;
}

.fab.brown {
  background: #795548;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*Kontak Kami*/
.contact-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 15px 15px;
  border-radius: 10px;
  color: white;
  font-family: Arial, sans-serif;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* SHADOW UNTUK CARD */
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.icon1 {
  width: 60px;
  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 */
}

.icon1 img {
  width: 70%;
}

.icon2 {
  width: 60px;
  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);
}

.swiper-controls .swiper-navigation .swiper-button.swiper-button-prev {
  display: none;
}

.swiper-controls .swiper-navigation .swiper-button.swiper-button-next {
  display: none;
}

/* layanan detail  */



/*form booking */
.booking-section {
        padding: 50px 20px;
        background: #f4f1eb;
    }

    .booking-card {
        max-width: 1100px;
        margin: auto;
        display: flex;
        gap: 20px;
        background: #ece7de;
        padding: 18px;
        border-radius: 12px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .06);
        align-items: stretch;
    }

    .booking-form {
        flex: 1.2;
    }

    .booking-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #2d2d2d;
    }

    .form-control {
        width: 100%;
        padding: 13px 15px;
        margin-bottom: 12px;
        border: 1px solid #d8d0c5;
        border-radius: 4px;
        background: #f7f4ef;
        box-sizing: border-box;
        outline: none;
        font-size: 14px;
    }

    .form-control:focus {
        border-color: #536d47;
    }

    .form-row {
        display: flex;
        gap: 12px;
    }

    .form-row .form-control {
        margin-bottom: 0;
    }

    .button-group {
        display: flex;
        gap: 12px;
        margin-top: 14px;
    }

    .btn {
        flex: 1;
        /*padding: 14px;*/
        border: none;
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        transition: .3s;
    }

    .btn-wa {
        background: #536d47;
        color: white;
    }

    .btn-wa:hover {
        opacity: .9;
    }

    .btn-reset {
        background: #f4f1eb;
        border: 1px solid #bfb6aa;
    }

    .booking-banner {
        flex: 1;
        background: #1d2417;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
    }

    .banner-image {
        width: 100%;
        overflow: hidden;
    }

    .banner-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

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

        .form-row {
            flex-direction: column;
            gap: 12px;
        }

        .button-group {
            /*flex-direction: column;*/
        }
    }
/*form booking */


/* Layanan Detail 2  */

/* ===== DETAIL HERO V2 ===== */

.detail-hero-v2 {
  position: relative;
  height: 100vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* BACKGROUND */

.detail-bg-v2 {
  position: absolute;
  inset: 0;
}

.detail-bg-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OVERLAY */

.detail-overlay-v2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 28, 45, 0.6),
    rgba(11, 28, 45, 0.9)
  );
}

/* CONTENT */

.detail-content-v2 {
  max-width: 750px;
  margin: auto;
  color: #fff;
  z-index: 2;
}

/* BADGE */

.badge-detail-v2 {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 12px;
  margin-bottom: 15px;
}

/* TITLE */

.detail-content-v2 h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
}

/* DESC */

.desc-v2 {
  font-size: 16px;
  opacity: 0.9;
  line-height: 1.8;
  margin-bottom: 30px;
}

/* ACTION */

.action-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* BUTTON */

.btn-wa-v2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 24px;

  background: linear-gradient(90deg, var(--base-color), var(--second-color));
  color: #fff;

  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;

  transition: 0.3s;
}

.btn-wa-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* SHARE */

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

.share-v2 a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: 0.3s;
}

.share-v2 a:hover {
  background: var(--base-color);
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .detail-content-v2 h1 {
    font-size: 28px;
  }

  .detail-hero-v2 {
    height: auto;
    padding: 80px 0;
  }
}
/* Layanan Detail 2  */

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

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

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

.list-popular-opt2 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sticky-top {
  z-index: 2;
}

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

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

/* Detail Aritkel  */

/* Accordion faq  */
/* Global Helpers */
.fw-800 {
  font-weight: 800;
}
.fw-600 {
  font-weight: 600;
}

/* Badge Style */
.badge-pill-soft {
  display: inline-block;
  background: rgba(13, 110, 253, 0.1);
  color: var(--base-color);
  padding: 6px 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
}

/* Modern Card Design */
.custom-faq .accordion-item {
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 15px !important;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  overflow: hidden;
}

.custom-faq .accordion-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

/* Accordion Button */
.custom-faq .accordion-button {
  background-color: transparent;
  color: #333;
  font-weight: 600;
  font-size: 15px;
  box-shadow: none;
  border: none;
}

.custom-faq .accordion-button:not(.collapsed) {
  color: var(--base-color);
  background-color: rgba(13, 110, 253, 0.02);
}

/* Indicator Icon (Arrow) */
.custom-faq .accordion-button::after {
  background-size: 12px;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Accordion Content Text */
.custom-faq .accordion-body {
  color: #666;
  font-size: 14px;
  line-height: 1.7;
  border-top: 1px solid rgba(0, 0, 0, 0.03);
}

/* Fokus State */
.accordion-button:focus {
  box-shadow: none;
}

@media (max-width: 991px) {
  .sticky-top {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 30px;
  }
}
/* Accordion Faq  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Kontak Section  */
.min-contact-1 {
  padding: 80px 0;
  background-color: #ffffff;
}
.min-title-1 {
  font-size: 2.5rem;
  font-weight: 400;
  color: #111;
  letter-spacing: -1px;
  margin-bottom: 10px;
}
.min-desc-1 {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 40px;
  font-weight: 300;
  line-height: 1.6;
}

.min-item-1 {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}
.min-item-1:hover {
  padding-left: 10px;
  border-bottom-color: #111;
  color: #111;
}

.min-item-1 i {
  font-size: 20px;
  margin-right: 20px;
  color: #111;
  width: 30px;
  text-align: center;
}
.min-item-1 .min-text h5 {
  margin: 0 0 5px 0;
  font-size: 20px;
  font-weight: 600;
  color: #111;
}
.min-item-1 .min-text p {
  margin: 0;
  font-size: 16px;
  color: #666;
}

.min-social-1 {
  margin-top: 30px;
  display: flex;
  gap: 15px;
}
.min-social-1 a {
  width: 45px;
  height: 45px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.2rem;
}
.min-social-1 a:hover {
  border-color: #111;
  background: #111;
  color: #fff;
}

.min-img-wrapper img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  aspect-ratio: 4/5;
}

/* Kontak Section  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      p {
        opacity: 1;
      }
    }

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

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

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

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

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

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

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

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

      h6 {
        text-transform: uppercase;
      }
    }

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

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

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

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

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

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

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

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

  font-size: 50px;
}

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

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

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

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

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

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

/*layanan mobile */
/* CSS untuk membatasi tampilan hanya di desktop (layar > 992px) */
@media (min-width: 992px) {
    /* Sembunyikan elemen ke-13 dan seterusnya */
    .layanan-item:nth-child(n+13) {
        display: none;
    }
}

/*layanan mobile */

/* card layanan baru*/
.card-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  /* padding: 10px; */
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-icon,
.card-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

.card h3 {
  font-size: 18px;
  margin-bottom: 5px;
  color: #1a1a1a;
}

.card p {
  font-size: 14px;
  color: #777;
}

/*end card layanan baru*/

/*icon share button*/

.thing2 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  float: left;
  height: 48px;
  line-height: 48px;
  border-radius: 3px;
  margin-top: 10px;
  clear: both;
  float: right;
}
.thing2:after {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  content: "";
}
.thing2:active:after {
  height: 0;
  z-index: -1;
  opacity: 0;
}
.thing2__text {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: #4a524c;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.thing2__content {
  position: relative;
  height: inherit;
}
.thing2__content:after,
.thing2__content:before {
  content: "";
  display: none;
  height: 100%;
  position: absolute;
  width: 6px;
  z-index: -1;
}
.thing2__content:after {
  left: -6px;
}
.thing2__content:before {
  right: -6px;
}
.thing2__content:hover {
  z-index: 1000;
}
.thing2__content:hover:after,
.thing2__content:hover:before {
  display: block;
}
.thing2__content:hover .thing2__text {
  transition: 0s all ease-out;
  transition-delay: 0s;
  opacity: 0;
  z-index: -1;
}
.thing2__content:hover .thing2__social {
  width: 48px;
  border-radius: 3px;
  margin-left: 6px;
}
.thing2__content:hover .thing2__social--first {
  margin-left: 0;
}
.thing2__content:hover .thing2__social:after {
  opacity: 1;
}
.thing2__content:hover .thing2__social--facebook {
  background-color: #496094;
}
.thing2__content:hover .thing2__social--twitter {
  background-color: #4ac4f3;
}
.thing2__content:hover .thing2__social--linkedin {
  background-color: #2388d6;
}
.thing2__content:hover .thing2__social--google {
  background-color: #da4835;
}
.thing2__social {
  position: relative;
  display: block;
  height: 48px;
  width: 26.6666666667px;
  float: left;
  color: white;
  background-color: #4a524c;
  transition: all 0.15s ease-out;
}
.thing2__social--first {
  border-radius: 3px 0 0 3px;
}
.thing2__social--last {
  border-radius: 0 3px 3px 0;
}
.thing2__social:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: FontAwesome;
  text-align: center;
  font-size: 20px;
  line-height: 48px;
  content: "";
  opacity: 0;
  transition: 0.15s all ease-out;
}
.thing2__social--facebook:after {
  content: "";
}
.thing2__social--twitter:after {
  content: "";
}
.thing2__social--linkedin:after {
  content: "";
}
.thing2__social--google:after {
  content: "";
}
.thing2__text {
  color: white;
  font-weight: bold;
  font-size: 18px;
}

.swiper-hero,
.swiper-hero .swiper-slide {
  /* height: auto !important; */
  height: 100% !important;
}

.jdl-layanan {
  font-size: 14px;
}
.card-icon {
  width: 50% !important;
}
.logo-layanan {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

.judul-kontak::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 2px;
  margin-top: 20px;
  background-color: #fe6601;
}

.video-icon i {
  margin: 0;
}

.navbar-expand-lg.navbar-light
  .dropdown:not(.dropdown-submenu)
  > .dropdown-toggle:after {
  display: none;
}
.dropdown-menu {
  width: 100%;
}

.layanan-mobile {
  display: none;
}

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

/* Title web  */
.title-web {
  position: relative;
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  padding: 0 20px;
  letter-spacing: 1px;
}

/* Garis kiri */
.title-web::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 30px;
  height: 2px;
  background: var(--base-color);
  transform: translateY(-50%);
  border-radius: 5px;
}

/* Garis kanan */
.title-web::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  width: 30px;
  height: 2px;
  background: var(--base-color);
  transform: translateY(-50%);
  border-radius: 5px;
}

/* Title web  */

/* Slider  */
.swiper-slide {
  position: relative;
  overflow: hidden;
}

.swiper-slide .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  max-width: 800px;
  width: 100%;
  padding: 0 15px;
}

/* Default (hidden) */
/* .swiper-slide .content span,
.swiper-slide .content h1,
.swiper-slide .content div {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: all 1.1s ease;
} */

/* Active slide */
.swiper-slide-active .content span {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.2s;
}

.swiper-slide-active .content h1 {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.4s;
}

.swiper-slide-active .content div {
  opacity: 1;
  /* transform: translateY(0) scale(1); */
  transition-delay: 0.6s;
}

/* .swiper-slide-active .content .btn-slider-1,
.swiper-slide-active .content .btn-slider-2 {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.8s;
} */

img.img-layanan {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 10s ease;
  border-radius: 10px;
}

/* Zoom hanya pada slide aktif slider gambar */
.swiper-slide-active img {
  /* transform: scale(1.1); */
}

.swiper-slide img {
  object-position: top center;
}

/* Card Galeri marquee  */

/* Marque Galeri  */

/* Slider  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  opacity: 0;
  transition: 0.35s;
}

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

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

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

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

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

/* galeri masonry  */

/* card keunggulan  */
.card-keunggulan-modern {
  background: #ffffff;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #f0f0f0;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  /* Efek smooth */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-keunggulan-modern:hover {
  transform: translateY(-8px);
  /* Card naik ke atas */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  /* Shadow halus */
  border-color: transparent;
  background-color: #ff751f25;
}

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

.card-keunggulan-modern:hover .icon-wrapper {
  background: var(--base-color, #0d6efd);
  /* Berubah warna saat hover */
  /* transform: rotate(5deg); */
}

.icon-img {
  width: 65px;
  height: 65px;
  object-fit: contain;
}

.card-keunggulan-modern:hover .icon-img {
  filter: brightness(0) invert(1);
  /* Ikon jadi putih jika wrapper jadi gelap */
}
/* card keunggulan  */

/* Card Artikel  */
.card-blog-modern {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.35s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

/* image */
.blog-img {
  position: relative;
  overflow: hidden;
}

.blog-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.card-blog-modern:hover img {
  transform: scale(1.08);
}

/* badge */
.blog-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #c89116;
  color: #fff;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 20px;
}

/* content */
.blog-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* meta */
.blog-meta {
  font-size: 13px;
  color: #777;
  margin-bottom: 10px;
}

.blog-meta span {
  margin-right: 15px;
}

/* title */
.blog-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 15px;
}

.blog-title a {
  text-decoration: none;
  color: #333;
}

.blog-title a:hover {
  color: #c89116;
}

/* read more */
.blog-read {
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: #c89116;
}

.blog-read i {
  margin-left: 5px;
  transition: transform 0.3s;
}

.blog-read:hover i {
  transform: translateX(4px);
}

/* Card Artikel  */

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

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

/* FAQ Accordion  */

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

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

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

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

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

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

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

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

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

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

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

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

/* testimoni  */
/* Styling Container & Background */
.testimonial-section {
  background: #f4f7f6; /* Warna background soft */
  overflow: hidden;
}

/* Styling Card Modern */
.testi-card-modern {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px 30px;
  /* box-shadow: 0 20px 40px rgba(0,0,0,0.04); */
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.02);
  z-index: 1;
}

.testi-card-modern:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.08);
}

/* Icon Quote Background Besar */
.testi-card-modern::before {
  content: "\f10e";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 80px;
  color: rgba(0, 0, 0, 0.03);
  z-index: -1;
}

/* Rating Bintang */
.testi-card-modern .stars i {
  color: #ffb822;
  font-size: 16px;
  margin-right: 2px;
}

/* Teks Testimoni */
.testi-card-modern .quote-text {
  font-size: 16px;
  color: #555;
  line-height: 1.7;
  margin: 20px 0;
  font-style: italic;
}

/* Info Klien */
.testi-card-modern .client-wrapper {
  display: flex;
  align-items: center;
  margin-top: 20px;
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
}

.testi-card-modern .client-img img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.testi-card-modern .client-info h6 {
  font-size: 17px;
  color: #222;
}

.testi-card-modern .client-info small {
  font-size: 13px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Custom Navigation Buttons (Di kiri bawah) */
.custom-nav-wrapper {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.custom-nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.custom-nav-btn:hover {
  background: var(--base-color, var(--base-color));
  color: #fff;
  border-color: var(--base-color, var(--base-color));
}

/* Swiper Pagination (Titik-titik) */
.swiper-pagination-bullet-active {
  background: var(--base-color, var(--base-color)) !important;
  width: 25px;
  border-radius: 10px;
}

/* SWIPER HEIGHT FIX */
.testimonialSwiper .swiper-slide {
  height: auto;
  display: flex;
}

/* CARD FULL HEIGHT */
.testi-card-modern {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* BATASI TEXT BIAR SAMA */
.testi-card-modern .quote-text {
  min-height: 110px; /* 🔥 ini kunci */
  max-height: 110px;
  overflow: hidden;
}

/* .swiper-slide.height-auto:hover{
    background: white;
} */

/* Memastikan swiper terpotong rapi di batas kolom */

/* Testimoni  */

/* btn kontak  */
.btn-pill-group {
  display: flex;
  gap: 12px;
}

.btn-pill {
  border-radius: 50px;
  padding: 10px 30px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: 0.4s;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
}

.btn-pill-primary {
  background: var(--base-color);
  color: #fff;
  box-shadow: 0 4px 15px rgb(145 127 232 / 20%);
}

.btn-pill-primary:hover {
  background: #000;
  transform: translateY(-3px);
  color: #fff;
}

.btn-pill-secondary {
  background: #f8f9fa;
  color: #333;
  border-color: #eee;
}

.btn-pill-secondary:hover {
  background: #fff;
  border-color: var(--base-color);
  color: var(--base-color);
  transform: translateY(-3px);
}

.social-luxury .social-link {
  transition: all 0.3s ease;
  display: inline-block;
  color: #333;
  /* Warna dasar */
}

.social-luxury .social-link:hover {
  color: #dc0d0a !important;
  /* Warna merah brand */
  transform: translateY(-5px);
  /* Melayang ke atas */
}

/* btn kontak  */

/* card keunggulan  */

.bg-industrial {
  background: #000000;
  padding: 80px 0 150px;
}
.card-wrap-v2 {
  margin-top: -100px;
  position: relative;
  z-index: 10;
}

.adv-card-v2 {
  background: #fff;
  padding: 35px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Efek Gradasi Biru Hitam saat Hover */
.adv-card-v2:hover {
  background: linear-gradient(135deg, #2084ff 0%, #000000 100%);
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(32, 132, 255, 0.3);
  border-color: transparent;
}

/* Target semua teks di dalam card saat hover */
.adv-card-v2:hover * {
  color: #fff !important;
}

/* Container Ikon */
.icon-box-v2 {
  width: 70px;
  height: 70px;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: 0.3s;
}

/* Efek Ikon saat Hover */
.adv-card-v2 img {
  width: 55px;
  transition: all 0.3s ease; /* Transisi halus perubahan filter */
}

/* MAGIC LINE: Mengubah gambar ikon jadi putih saat card di-hover */
.adv-card-v2:hover img {
  filter: brightness(0) invert(1);
}

.adv-card-v2:hover .icon-box-v2 {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
}

/* Swiper Styling */
.swiper-button-next,
.swiper-button-prev {
  color: #2084ff; /* Ubah ke biru agar senada */
  background: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.swiper-pagination-bullet-active {
  background: #2084ff !important;
}

/* card keunggulan  */

/* ## MOBILE HP*/
@media only screen and (max-width: 600px) {
  .btn-pill {
    font-size: 12px !important;
  }
  .ornamen-kimia {
    width: 90% !important;
    height: 50% !important;
    top: 100px !important;
    left: -30% !important;
  }
  .welcome-title {
    font-size: 10px !important;
  }
  li .arrow-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
    position: relative;
    left: 150% !important;
  }
  .navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
    color: white !important;
    opacity: 0.8;
  }
  .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: 100vh; */
  }
  .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: 300px !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: 100% !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;
    left: 230px;
  }

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

/* --- CONTACT MODERN STYLE --- */
.contact-modern-section {
  padding: 100px 0;
  background: #ffffff;
}

.fw-800 {
  font-weight: 800;
}
.tracking-wider {
  letter-spacing: 2px;
}

/* Contact Card Item */
.contact-card-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #9700370d;
  border-radius: 18px;
  border: 1px solid #f1f5f9;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-card-item:hover {
  background: #ffffff;
  transform: translateX(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px dashed #dc0d0a87 !important ;
}

.item-icon {
  width: 55px;
  height: 55px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 20px;
  transition: 0.3s;
  min-width: 55px;
  max-width: 55px;
}

.wa-color {
  background: #dc0d0a21;
  color: white;
}
.phone-color {
  background: #dc0d0a21;
  color: white;
}
.email-color {
  background: #dc0d0a21;
  color: white;
}
.map-color {
  background: #dc0d0a21;
  color: white;
}

.item-text small {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.item-text h5,
.item-text span {
  margin-bottom: 0;
  font-weight: 700;
  color: #1e293b;
  font-size: 1.1rem;
}

.item-text a {
  text-decoration: none;
  color: inherit;
}

/* Social Pill */
.social-modern-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-pill {
  padding: 8px 18px;
  background: #797c7f14;
  border-radius: 50px;
  color: #475569;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
}

.social-pill:hover {
  background: #1e293b;
  color: #fff;
  transform: translateY(-3px);
}

/* Map Container */
.map-container-premium {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
  /* height: 100%; */
  line-height: 0;
}

.map-overlay-badge {
  position: absolute;
  top: 25px;
  left: 25px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 12px 20px;
  border-radius: 12px;
  z-index: 10;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.pulse-red {
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(239, 68, 68, 0.4);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@media (max-width: 991px) {
  .contact-modern-section {
    padding: 60px 0;
  }
  .map-container-premium {
    height: 400px;
    margin-top: 40px;
  }
}

/*footer*/

/* footer baru  */
.footer-opt1 {
  background-color: #111111;
  /* Warna dasar gelap elegan */
  color: #a0a0a0;
  padding-top: 80px;
  font-family: "Inter", sans-serif;
  /* Sesuaikan dengan font web Anda */
}

.footer-opt1 .footer-logo {
  max-width: 180px;
  filter: brightness(0) invert(1);
  /* Membuat logo jadi putih jika aslinya hitam, hapus ini jika logo asli sudah putih */
}

.footer-opt1 .footer-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 10px;
}

.footer-opt1 .footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background-color: #c19b44;
  /* Warna Emas Accent */
}

.footer-opt1 .footer-links li {
  margin-bottom: 12px;
}

.footer-opt1 .footer-links a {
  color: #a0a0a0;
  text-decoration: none;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-opt1 .footer-links a::before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  color: #c19b44;
  transition: 0.3s;
}

.footer-opt1 .footer-links a:hover {
  color: #c19b44;
  transform: translateX(5px);
}

.footer-opt1 .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
}

.footer-opt1 .contact-item i {
  color: #c19b44;
  font-size: 1.2rem;
  margin-top: 4px;
}

.footer-opt1 .social-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  text-decoration: none;
  transition: 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-opt1 .social-circle:hover {
  background: transparent;
  color: #fff;
  border-color: 1px solid var(--base-color) !important;
  transform: translateY(-3px);
}

.footer-opt1 .footer-bottom {
  background-color: #080808;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* footer baru  */

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

/* slider  hero images*/
.slider-gambar {
  height: 100vh;
  min-height: 750px;
  /* Keamanan untuk layar zoom 90%/100% agar konten tidak terpotong */
  position: relative;
  overflow: visible !important;
  /* Agar box overlap tidak terpotong */
}

.image-slider-main {
  height: 100vh;
  min-height: 750px;
  width: 100%;
  object-fit: cover;
}

/* Pastikan elemen wadah induk memiliki position: relative */
.blue-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(29, 71, 200, 0.1) 100%
  );

  z-index: 1;
  /* Pastikan overlay berada di atas konten dasar */
}

.content-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.content-hero-overlay a {
  pointer-events: auto;
}

.logo-trusted-box {
  position: absolute;
  bottom: -60px;
  /* Overlap lebih dalam */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1100px;
  background: white;
  border-radius: 20px;
  padding: 20px 50px;
  z-index: 50;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
}

.swiper-nav-wrapper {
  position: relative;
  width: 100%;
}

.img-logo-klien {
  max-height: 45px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: 0.3s;
}

.img-logo-klien:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.custom-nav-btn {
  width: 35px !important;
  height: 35px !important;
  background: #f0f3ff;
  border-radius: 50%;
  color: #1d47c8 !important;
  transition: 0.3s;
}

.custom-nav-btn:hover {
  background: #1d47c8;
  color: #fff !important;
}

.custom-nav-btn::after {
  font-size: 14px !important;
  font-weight: 900;
}

.swiper-button-prev.custom-nav-btn {
  left: -45px !important;
}

.swiper-button-next.custom-nav-btn {
  right: -45px !important;
}

.img-hero-person {
  max-height: 80vh;
  /* Sedikit lebih besar untuk layar 100% */
  width: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.4));
}

@media (max-width: 991px) {
  .logo-trusted-box {
    position: relative;
    bottom: auto;
    margin: -40px auto 20px;
    width: 95%;
    padding: 20px 30px;
    transform: none;
    left: 0;
  }

  .slider-gambar {
    height: auto;
    min-height: auto;
    padding-bottom: 20px;
  }

  .swiper-button-prev.custom-nav-btn {
    left: -15px !important;
  }

  .swiper-button-next.custom-nav-btn {
    right: -15px !important;
  }
}
/* sider hero image  */

#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: #ff5722;
  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 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;
}

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

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

/*Keunggulan*/

/* sosmed footer */

textarea {
  resize: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.image-wrapper {
  height: 200px;
}

/* Galeri */

/* Card Keunggulan  */

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

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

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

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

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

  letter-spacing: 0.5px;

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

  transition: all 0.3s ease;
}

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

/* Brand  */
.brand-section {
  overflow: hidden;
}

.brand-item {
  /* height: 100px; Samakan tinggi box */
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  border: 1px solid transparent;
}

.brand-img {
  /* max-height: 60px;  */
  width: auto;
  filter: grayscale(100%); /* Logo jadi abu-abu */
  opacity: 0.6;
  transition: all 0.4s ease;
}

/* Animasi saat disentuh (Hover) */
.brand-item:hover {
  transform: translateY(-8px); /* Melayang ke atas */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--base-color); /* Warna outline sesuai warna base-color */
}

.brand-item:hover .brand-img {
  filter: grayscale(0%); /* Logo jadi berwarna asli */
  opacity: 1;
  transform: scale(1.1); /* Logo sedikit membesar */
}

/* Responsif untuk HP agar tidak terlalu kecil */
@media (max-width: 576px) {
  .brand-item {
    height: 80px;
  }
  .brand-img {
    max-height: 40px;
  }
}

/* brand  */

/* Card Layanan  */
.spa-section {
  background-color: #fafaf8;
  color: #4a4a4a;
}

.text-spa-accent {
  color: #8e7d5f;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 14px;
}

.spa-card-overlay {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.spa-card-overlay .spa-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.spa-card-overlay:hover .spa-img {
  transform: scale(1.08);
}

.spa-overlay-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  z-index: 3;
  /* Pastikan teks di atas bingkai */
}

/* --- MODIFIKASI JUDUL (TAMBAHAN TRANSFORM/GERAK NAIK) --- */
.spa-title-overlay {
  color: #fff;
  font-weight: 500;
  margin-bottom: 0;
  transition:
    color 0.3s ease,
    transform 0.4s ease;
  /* Tambahan transform */
}

.spa-card-overlay:hover .spa-title-overlay {
  color: #d4af37;
  /* Judul berubah warna jadi emas */
  transform: translateY(-35px);
  /* Judul geser naik ke atas */
}

/* --- TOMBOL HUBUNGI KAMI BARU --- */
.spa-btn-contact {
  position: absolute;
  bottom: 24px;
  /* Sejajar dengan padding bawah container awal */
  left: 24px;
  background-color: #d4af37;
  /* Warna Emas */
  color: #fff !important;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  /* Bentuk elegan membulat */
  text-decoration: none;
  opacity: 0;
  /* Awalnya tidak terlihat */
  transform: translateY(15px);
  /* Awalnya sedikit di bawah */
  transition: all 0.4s ease;
  pointer-events: none;
  /* Mencegah terklik saat belum muncul */
  border: 1px solid #d4af37;
}

/* Animasi tombol muncul saat di hover */
.spa-card-overlay:hover .spa-btn-contact {
  opacity: 1;
  /* Jadi terlihat */
  transform: translateY(0);
  /* Naik ke posisi pas di bawah judul */
  pointer-events: auto;
  /* Bisa di klik */
}

/* Efek hover khusus tombolnya sendiri */
.spa-btn-contact:hover {
  background-color: rgba(212, 175, 55, 0.2);
}

/* --- ANIMASI BINGKAI DALAM (INNER FRAME) TETAP --- */
.spa-card-overlay::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 1px solid rgba(212, 175, 55, 0);
  border-radius: 10px;
  z-index: 2;
  transition: all 0.5s ease;
  transform: scale(1.05);
  pointer-events: none;
}

.spa-card-overlay:hover::before {
  border-color: rgba(212, 175, 55, 0.8);
  transform: scale(1);
}

/* Card Layanan  */

/* Tabel Harga  */
.tabel-harga {
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--primary-font);
  font-size: 14px;
  color: #333;
}

.tabel-harga table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  background: #fff;
}

.tabel-harga th,
.tabel-harga td {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: left;
}

.tabel-harga thead {
  background-color: var(--base-color);
  color: #fff;
}

/* CSS KHUSUS TAMPILAN TURUN KE BAWAH (MOBILE) */
@media screen and (max-width: 768px) {
  .tabel-harga {
    overflow-x: hidden; /* Hilangkan scroll samping */
  }

  .tabel-harga table,
  .tabel-harga thead,
  .tabel-harga tbody,
  .tabel-harga th,
  .tabel-harga td,
  .tabel-harga tr {
    display: block; /* Membuat semua elemen jadi turun ke bawah */
    width: 100% !important;
  }

  .tabel-harga thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .tabel-harga tr {
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  .tabel-harga td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50% !important; /* Memberi ruang untuk label */
    text-align: right !important;
  }

  .tabel-harga td:before {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-label); /* Mengambil label dari atribut HTML */
    font-weight: bold;
    text-align: left;
    color: var(--base-color);
  }

  .tabel-harga td:last-child {
    border-bottom: 0;
    background: #fdfdfd;
  }
}

/* Search Bar */
.tabel-harga-search {
  width: 100%;
  max-width: 400px;
  padding: 10px 15px;
  margin: 10px auto 20px;
  display: block;
  border: 1px solid #ccc;
  border-radius: 25px;
}

/* Tabel Harga  */

/* Card */
/* WRAPPER biar badge bisa absolute rapi */
.wrap-card {
  position: relative;
  padding-bottom: 30px;
}

/* Card Keunggulan  */
/* Grid Khusus untuk 5 kolom di Desktop */
@media (min-width: 992px) {
  .col-lg-2-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

.card-simple {
  background: #ffffff;
  padding: 35px 30px;
  border-radius: 12px;
  height: 100%;
  text-align: center;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

.icon-circle {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  /* background: #fdf2f2; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.icon-circle img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  transition: 0.3s;
}

.line-accent {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: #dc0d0a;
  transition: 0.3s ease;
}

/* Hover Effect */
.card-simple:hover {
  transform: translateY(-5px);
  border-color: #dc0d0a50;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
}

.card-simple:hover .icon-circle {
  background: #dc0d0a;
}

.card-simple:hover .icon-circle img {
  /* filter: brightness(0) invert(1); */
  transform: scale(1.1);
}

.card-simple:hover .line-accent {
  width: 40px;
  /* Garis muncul sedikit di tengah */
}

/* Responsive Mobile */
@media (max-width: 576px) {
    .layanan-footer-layout{
        width: calc(100% - 8px);
    }
    .booking-section{
        padding:10px 10px;
    }
  .card-simple {
    padding: 20px 15px;
  }
}

/* Card Keunggulan  */

.underline-namaweb {
  position: relative;
  text-decoration: none;
  font-weight: 600; /* Membuat teks sedikit lebih tegas */
  color: inherit; /* Mengikuti warna teks induk */
  display: inline-block;
  padding-bottom: 2px; /* Jarak antara teks dan garis */
}

/* Membuat garis bawah menggunakan pseudo-element */
.underline-namaweb::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* Ketebalan garis */
  background-color: #ff8c00; /* Warna oranye sesuai tema sebelumnya */
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* Efek opsional: Garis menebal atau berubah warna saat hover */
.underline-namaweb:hover::after {
  height: 3px;
  background-color: #ff4500;
}

/* Container Button Styling */
.btn-wa-cta,
.btn-call-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  min-width: 160px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* WhatsApp Button (Hijau) */
.btn-wa-cta {
  background-color: var(--base-color);
  color: #ffffff !important;
  border: 2px solid var(--base-color);
}
.btn-wa-cta i {
  color: white;
}

.btn-wa-cta:hover {
  background-color: var(--base-color);
  border-color: var(--base-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
  color: #ffffff !important;
}

/* Call Button (Biru sesuai tema Image_647938.jpg) */
.btn-call-cta {
  background-color: var(--second-color);
  color: white !important;
  border: 2px solid white;
}

.btn-call-cta:hover {
  background-color: white;
  color: var(--second-color) !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(29, 71, 200, 0.2);
}

/* Ukuran Icon Spesifik */
.btn-wa-cta i,
.btn-call-cta i {
  transition: transform 0.3s ease;
}

.btn-wa-cta:hover i {
  transform: scale(1.2);
}

/* Perbaikan untuk tampilan Mobile */
@media (max-width: 576px) {
  .btn-wa-cta,
  .btn-call-cta {
    width: 100%; /* Tombol melebar penuh di HP agar mudah diklik */
    padding: 15px 20px;
  }
}

.cta-banner-split {
  background-color: #ffffff; /* Ubah jika mau background luarnya beda */
}
.bg-blue-rounded {
  background:
    url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'),
    linear-gradient(135deg, #1d47c8, #0a2472);
  border-radius: 24px;
}

/* BADGE NAMA WEB */
.badge-namaweb {
  position: absolute;
  left: 25%;
  bottom: 0;

  /* posisi awal */
  transform: translateY(-40%);

  background: linear-gradient(135deg, #ffd450, #ddbc60);
  color: #000000;

  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;

  border-radius: 50px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);

  white-space: nowrap;
  transition: all 0.35s ease;
  z-index: 2;
}

/* Hover: badge ikut naik */
.wrap-card:hover .badge-namaweb {
  transform: translateY(-70%);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
/* 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;
}

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

.welcome-title {
  font-size: 18px;
}

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

/* ornamen galeri  */
.ornamen-galeri {
  position: absolute;
  width: 300px;
  height: 300px;
  right: 0;
  top: 30px;
  opacity: 0.05;
}

/* ornamen galeri  */

/* card layanan  */
.service-card-opt1 {
  background: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  transition: all 0.3s ease;
  text-align: center;
  height: 100%;
  display: block;
  text-decoration: none !important;
}
.service-card-opt1:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--base-color); /* Warna merah brand */
}
.service-icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 50%;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card-opt1:hover .service-icon-wrapper {
  background: rgb(10 15 220 / 10%);
  transform: scale(1.1);
}
.service-title-opt1 {
  color: #1e293b;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 0;
  transition: 0.3s;
}
.service-card-opt1:hover .service-title-opt1 {
  color: var(--base-color);
}

/* card layanan  */

/* 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 hotel  */
.ornamen-hotel{
    position: absolute;
    /*top: 50%;*/
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: auto;
    opacity: 0.08;
    z-index: 0; /* Penting: harus negatif agar di bawah konten */
    pointer-events: none; /* Penting: agar klik menembus gambar */
}

/*ornamen hotel  */

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

/* ornamen kimia  */
.ornamen-kimia {
  position: absolute;
  width: 40%;
  height: 100%;
  left: -10%;
  top: 0px;
  opacity: 0.08;
}

/* ornamen kimia  */

/* 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;
  /* z-index: -1; */
  opacity: 0.15;
  object-fit: cover;
}

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

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

/* card wisata detail  */
/* ===== SIDEBAR STICKY ===== */
.sidebar-sticky {
  position: sticky;
  top: 100px;
}

/* Card Testimoni  */

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

.card-testimoni-modern {
  background: #ffffff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
  height: 100%;
  transition: 0.3s ease;
}

.card-testimoni-modern:hover {
  transform: translateY(-6px);
}

/* AVATAR */
.testi-avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
}

/* TEXT */
.testi-body {
  margin: 25px 0;
}

.testi-body p {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}

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

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

.mySwiperTestimoni {
  position: relative;
  padding-left: 30px;
}

.mySwiperTestimoni .swiper-button-prev,
.mySwiperTestimoni .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 20;
}

/* Geser keluar container */
.mySwiperTestimoni .swiper-button-prev {
  /* left: -25px; */
}

.mySwiperTestimoni .swiper-button-next {
  /* right: -25px; */
}

/* Icon */
.mySwiperTestimoni .swiper-button-prev::after,
.mySwiperTestimoni .swiper-button-next::after {
  font-size: 16px;
  font-weight: bold;
  color: #1569b4;
}

/* SWIPER BUTTON */
.swiper-button-next,
.swiper-button-prev {
  color: #1569b4;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px;
}

/* PROGRESSBAR */
.swiper-pagination {
  position: relative;
  margin-top: 30px;
}

.swiper-pagination-progressbar {
  background: #e5e5e5;
  height: 4px;
  border-radius: 4px;
}

.swiper-pagination-progressbar-fill {
  background: #1569b4;
}

/* Card testimoni  */

/* CARD FIXES */
.card-wisata {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: 0.3s;
  border: 1px solid #f0f0f0;
}

.card-wisata:hover {
  transform: translateY(-5px);
}

/* LIST VERTICAL */
.unit-list-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ROW */
.unit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed #eee;
}

/* LAST ITEM */
.unit-row:last-child {
  border-bottom: none;
}

/* NAMA */
.unit-nama {
  color: #555;
}

/* HARGA */
.unit-harga {
  font-weight: 700;
  color: var(--base-color);
}

/* WRAPPER */
.facility-clean {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* BOX */
.facility-box,
.unit-clean {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
}

/* TITLE */
.facility-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #444;
}

/* LABEL */
.label {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 3px;
  display: block;
}

.label.include {
  color: #2e7d32;
}

.label.exclude {
  color: #c62828;
}

/* TAGS */
.list-items-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.item-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.item-tag.include {
  background: #e8f5e9;
  color: #2e7d32;
}

.item-tag.exclude {
  background: #ffebee;
  color: #c62828;
}

/* UNIT */
.unit-list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.unit-card-inline {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 48%;
}

.unit-nama {
  font-size: 12px;
  color: #555;
}

.unit-harga {
  font-size: 13px;
  font-weight: 700;
  color: var(--second-color);
}
/* card wisata  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* badge  */
/* Judul Highlight */
.text-highlight {
  color: var(--base-color);
  /* Ganti dengan warna base anda */
}

/* OPSI 1: Badge Pill Soft (Modern) */
.badge-pill-soft {
  display: inline-block;
  background: #fd6f0d1a;
  color: var(--base-color);
  padding: 5px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* OPSI 2: Badge Outline (Minimalist) */
.badge-outline-custom {
  display: inline-block;
  border: 1px solid #dee2e6;
  padding: 4px 15px;
  border-radius: 5px;
  font-weight: 500;
  color: #666;
  font-size: 13px;
}

/* OPSI 3: Badge Underline (Clean) */
.badge-underline {
  display: inline-block;
  border-bottom: 2px solid var(--base-color);
  padding: 0 5px 3px 0;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  font-size: 14px;
}

/* badge  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* EXCLUDE */
.item-tag.exclude {
  background: #fdecea;
  color: #e74c3c;
  border: 1px solid #f5c6cb;
}

/* ICON */
.item-tag i {
  font-size: 11px;
}

/* Card Produk  */

/* Card Produk  */

/* Offline online   */
/* Mengatur ukuran gambar agar proporsional dan tidak kebesaran */
.custom-img-offline-online {
  max-width: 100%;
  height: auto;
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Efek hover halus agar lebih interaktif */
.custom-img-offline-online:hover {
  transform: translateY(-5px);
}

.fs-30 {
  font-size: 30px;
  line-height: 1.3;
}

.lh-lg {
  line-height: 1.8;
}

/* Responsive untuk Mobile */
@media (max-width: 991px) {
  .custom-img-offline-online {
    max-width: 100%;
  }
  /* Hilangkan padding samping saat di mobile */
  .pe-lg-4,
  .ps-lg-4 {
    padding: 0 !important;
  }
  /* Teks rata tengah di mobile jika perlu */
  .col-lg-5 {
    text-align: center;
  }
}

/* Styling Tombol Utama */
.btn-kelas-offline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  background: linear-gradient(
    135deg,
    #ff8c00,
    #ff4500
  ); /* Warna Oranye Gradasi */
  color: #ffffff !important;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none !important;
  border-radius: 50px; /* Membuat tombol lonjong/rounded pill */
  transition: all 0.3s ease-in-out; /* Animasi smooth */
  box-shadow: 0 4px 15px rgba(255, 69, 0, 0.3); /* Shadow lembut saat diam */
  border: none;
  cursor: pointer;
}

/* Efek Icon (Jarak) */
.btn-kelas-offline i {
  margin-right: 8px;
  font-size: 14px;
}

/* Efek saat Hover (Mouse Diatasnya) */
.btn-kelas-offline:hover {
  background: linear-gradient(135deg, #ff4500, #ff8c00); /* Balik gradasi */
  transform: translateY(-5px); /* Tombol naik sedikit */
  box-shadow: 0 8px 25px rgba(255, 69, 0, 0.5); /* Shadow lebih tebal dan menyebar */
  color: #ffffff !important;
}

/* Efek saat diklik (Active) */
.btn-kelas-offline:active {
  transform: translateY(-2px); /* Turun sedikit saat ditekan */
  box-shadow: 0 4px 10px rgba(255, 69, 0, 0.4);
}

.btn-kelas-online {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  background: linear-gradient(135deg, #565656, #8f8f8f);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none !important;
  border-radius: 50px; /* Membuat tombol lonjong/rounded pill */
  transition: all 0.3s ease-in-out; /* Animasi smooth */
  box-shadow: 0 4px 15px rgb(171 171 171);
  border: none;
  cursor: pointer;
}

/* Efek Icon (Jarak) */
.btn-kelas-online i {
  margin-right: 8px;
  font-size: 14px;
}

/* Efek saat Hover (Mouse Diatasnya) */
.btn-kelas-online:hover {
  background: linear-gradient(135deg, #8f8f8f, #565656); /* Balik gradasi */
  transform: translateY(-5px); /* Tombol naik sedikit */
  box-shadow: 0 4px 15px rgb(171 171 171);
  color: #ffffff !important;
}

/* Efek saat diklik (Active) */
.btn-kelas-online:active {
  transform: translateY(-2px); /* Turun sedikit saat ditekan */
  box-shadow: 0 4px 10px rgba(255, 69, 0, 0.4);
}
/* offline online  */

/* =========================
   FIX CARD TINGGI SAMA
========================= */

/* kolom jadi flex */
/* .row > [class*="col-"] {
  display: flex;
} */

[class*="mb-n"],
[class*="mt-n"] {
  z-index: 1;
}

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

.line-bottom {
  display: inline-block;
  border-bottom: 1.5px solid var(--base-color); /* Warna merah brand Anda */
  padding-bottom: 2px;
  line-height: 1;
}

/* Area Layanan Detail  */
/* CSS Opsi 1 */
.text-justify {
  text-align: justify;
}
.zoom-hover {
  transition: transform 0.5s ease;
}
.zoom-hover:hover {
  transform: scale(1.05);
}

/* Share Buttons */
.btn-share-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
  cursor: pointer;
}
.bg-whatsapp {
  background: #25d366;
}
.bg-facebook {
  background: #1877f2;
}
.bg-gray {
  background: #6c757d;
  color: #fff;
}
.btn-share-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  color: #fff;
}

/* Sidebar Links */
.sidebar-link-modern {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  background: #f8f9fa;
  text-decoration: none;
  transition: 0.3s;
  border: 1px solid transparent;
}
.sidebar-link-modern .icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  transition: 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.sidebar-link-modern:hover {
  background: #fff;
  border-color: var(--base-color);
  box-shadow: 0 5px 15px rgba(13, 110, 253, 0.1);
}
.sidebar-link-modern:hover .icon-circle {
  background: var(--base-color);
  color: #fff;
}

/* Area Layanan Detail  */

/* card area layanan  */
.card-area-portrait {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  transition: 0.4s;
  border: 1px solid #f0f0f0;
  margin-top: 30px;
  /* Ruang untuk gambar melayang */
}

.img-portrait-wrapper {
  margin-top: -50px;
  border-radius: 15px;
  height: 250px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.img-portrait-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

.card-area-portrait:hover {
  transform: translateY(-5px);
  border-color: #2084ff;
}

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

.btn-circle-link {
  width: 40px;
  height: 40px;
  background: #f8faff;
  color: #2084ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  transition: 0.3s;
}

.card-area-portrait:hover .btn-circle-link {
  background: #2084ff;
  color: #fff;
}

/* card area layanan  */

/* =========================
   BUTTON UMUM
========================= */
.btn-more-wisata,
.btn-book-wisata {
  flex: 1;
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  /* width: 100%; */
  justify-content: center;
  align-items: center;
}

/* =========================
   OUTLINE (LIHAT)
========================= */
.btn-more-wisata {
  background: transparent;
  color: #000000;
  border: 2px solid #ddbc60;
}

.btn-more-wisata:hover {
  background: #ffd450;
  color: #000;
  border-color: #ffd450;
  transform: translateY(-2px);
}

/* =========================
   GRADIENT (BOOKING)
========================= */
.btn-book-wisata {
  background: linear-gradient(135deg, #ffd450, #ddbc60);
  color: #000000;
  border: none;
  box-shadow: 0 4px 12px rgba(221, 188, 96, 0.4);
}

.btn-book-wisata:hover {
  background: linear-gradient(135deg, #ddbc60, #ffd450);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(221, 188, 96, 0.6);
}

/* ACTIVE CLICK */
.btn-book-wisata:active,
.btn-more-wisata:active {
  transform: scale(0.97);
}

/* Section Custom  */
.section-custom {
  background: #fff;
  padding: 90px 0;
  position: relative;
}

/* garis kiri kanan */
.section-custom::before,
.section-custom::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 2px;
  background: #dc3545;
  top: 10%;
}

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

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

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

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

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

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

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

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

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

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

/* Card Paket Wisata  */

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

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

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

/* ornamen card rental */

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

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

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

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

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

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

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

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

/* label */
.price-label {
  font-size: 14px;
  color: #777;
  display: block;
  margin-bottom: 5px;
}

/* harga */
.price-value {
  font-size: 20px;
  font-weight: 600;
  color: #ff6b00;
}

/* tombol */
/* BUTTON WHATSAPP MODERN */

.btn-wa-modern {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 5px 10px;
  border-radius: 50px;
  background: var(--base-color);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: 0.35s;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* ICON */

.wa-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--base-color);
  font-size: 20px;
  transition: 0.35s;
}

/* TEXT */

.wa-text {
  position: relative;
  z-index: 2;
}

/* HOVER EFFECT */

/* .btn-wa-modern:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: #1b67b0;
  transition: 0.4s;
  z-index: 1;
} */

.btn-wa-modern:hover:before {
  width: 100%;
}

.btn-wa-modern:hover {
  transform: translateY(-3px);
  color: #fff;
}

.btn-wa-modern:hover .wa-icon {
  transform: rotate(10deg) scale(1.1);
  z-index: 3;
}
/* Card Paket Wisat  */

/* button */
.btn-wrapper {
  text-align: center;
  margin-top: 10px;
}

/* btn cta  */
/* Base Style Button Pill */
.btn-pill-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 50px;
  /* Membuat bentuk pill sempurna */
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  letter-spacing: 0.5px;
}

/* Variasi Warna Kuning (Gold Gradient) */
.btn-pill-yellow {
  background: linear-gradient(135deg, #ffd450 0%, #ddbc60 100%);
  color: #000000;
  box-shadow: 0 4px 15px rgba(221, 188, 96, 0.3);
}

.btn-pill-yellow:hover {
  background: linear-gradient(135deg, #ddbc60 0%, #ffd450 100%);
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(221, 188, 96, 0.4);
}

/* Variasi Warna Hitam */
.btn-pill-black {
  background-color: #000000;
  color: #ffd450;
  /* Teks kuning agar kontras */
  border: 2px solid #ffd450;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-pill-black:hover {
  background-color: #ffd450;
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 212, 80, 0.3);
}

/* Animasi Ikon saat Hover */
.btn-pill-custom i {
  transition: transform 0.3s ease;
}

.btn-pill-custom:hover i {
  transform: scale(1.2);
}

/* Responsif Mobile */
@media (max-width: 576px) {
  .btn-pill-custom {
    width: 100%;
    padding: 10px 20px;
  }
}
/* btn cta */

/* CTA section baru  */
.cta-soft-section {
        padding: 70px 0;
        border-top: 1px solid rgba(142, 125, 95, 0.2);
        border-bottom: 1px solid rgba(142, 125, 95, 0.2);
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        position: relative;
        background-attachment:fixed !important;
    }

    /* Overlay Gradasi Hitam ke Gold */
    .cta-soft-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Gradasi dari Hitam (atas) ke Gold (bawah) */
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(184, 134, 11, 0.8) 100%);
        z-index: 1;
    }

    .container { position: relative; z-index: 2; }
    
    /* Pastikan teks berwarna putih agar kontras dengan background hitam-gold */
    .cta-title-soft { color: #ffffff !important; font-size: 2rem; }
    .cta-desc-soft { color: #f8f8f8 !important; font-size: 16px; line-height: 1.6; }

    /* Penyesuaian tombol agar tetap terlihat bagus di atas background gelap */
    .cta-btn-solid-dark { background-color: #ffffff !important; color: #2D2B2A !important; padding: 6px 12px; border-radius: 5px; font-weight: 500; text-decoration: none; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; }
    .cta-btn-solid-dark:hover { background-color: #e0e0e0 !important; }

    .cta-btn-outline-dark { background-color: transparent; color: #ffffff !important; padding: 6px 12px; border-radius: 5px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; border: 2px solid #ffffff !important; display: inline-flex; align-items: center; justify-content: center; }
    .cta-btn-outline-dark:hover { background-color: #ffffff !important; color: #2D2B2A !important; }
/* CTA Section baru  */

/* card artikel  */
.card-blog-opt2 {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  /* Tinggi seragam */
  display: block;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  text-decoration: none !important;
}

.card-blog-opt2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  aspect-ratio: 1/1;
}

/* Gradasi hitam agar teks terbaca */
.blog-overlay-opt2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0.8) 90%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 25px;
  z-index: 2;
}

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

.blog-date-badge2 {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: bold;
  line-height: 1.1;
  z-index: 3;
}

.blog-date-badge2 span.day {
  font-size: 1.2rem;
  display: block;
}

.blog-date-badge2 span.month {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--second-color, #28a745);
}

.blog-title-opt2 {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
  transition: 0.3s;
}

.card-blog-opt2:hover .blog-title-opt2 {
  color: #feced2;
}

.blog-meta-opt2 {
  color: #cbd5e1;
  font-size: 0.85rem;
}

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

/* Galeri Detail  */

/* =========================
   SAMAKAN TINGGI CARD SWIPER
   ========================= */

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

/* card full height */
.card-layanan {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* gambar fix ratio */
.card-layanan-img {
  width: 100%;
  /* aspect-ratio: 4/3; biar semua sama */
  overflow: hidden;
}

.card-layanan-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* tombol selalu di bawah */
.card-layanan-body .d-flex {
  margin-top: auto;
}

/* batasi deskripsi biar rata */
.card-layanan-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* maksimal 3 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-opt3 {
  padding: 80px 0;
  background: #0f172a;
  color: #fff;
  overflow: hidden;
}

.hero-opt3 .hero-img {
  border-radius: 20px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.btn-hero-wa {
  background: #3b82f6;
  color: #fff;
  border-radius: 50px;
  padding: 12px 30px;
  font-weight: bold;
  transition: 0.3s;
  display: inline-block;
}

.btn-hero-wa:hover {
  background: #2563eb;
  color: #fff;
  transform: translateY(-3px);
}

.content-floating {
  background: #fff;
  border-radius: 20px;
  padding: 50px;
  margin-top: -60px;
  position: relative;
  z-index: 5;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  line-height: 1.8;
  color: #475569;
}

/* Galeri Minimalis */
.gal-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.galeri-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1/1;
}

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

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

.galeri-item:hover img {
  transform: scale(1.1);
}

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

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

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

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

/* galeeri Detail  */

.btn-berlangganan {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, #c89b3c, #e3b54b);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-berlangganan:hover {
  background: linear-gradient(135deg, #000, #c89b3c);
  color: #fff;
  transform: translateY(-2px);
}

.divider-title {
  content: "";
  height: 30px;
  width: 2px;
  background-color: grey;
  /* padding: 10px; */
}

.contact-label {
  text-decoration: underline;
  text-decoration-color: var(--second-color); /* Warna garis merah */
  text-decoration-thickness: 2px; /* Ketebalan garis, bisa disesuaikan */
  text-underline-offset: 5px; /* Jarak antara teks dan garis */
}

.contact-card {
  width: 100%;
  background-color: #ffffff; /* Latar belakang putih untuk kartu */
  border-radius: 12px; /* Sudut membulat */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Efek bayangan */
  padding: 20px;
  display: flex; /* Menggunakan flexbox untuk ikon dan teks */
  align-items: center; /* Mensejajarkan ikon dan teks secara vertikal */
  gap: 15px; /* Jarak antara ikon dan teks */
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out; /* Efek transisi saat hover */
  /* cursor: pointer; Menunjukkan bahwa kartu bisa diinteraksi */
}

.contact-card:hover {
  transform: translateY(-3px); /* Sedikit naik saat hover */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); /* Bayangan lebih intens saat hover */
}

.icon-kontak {
  min-width: 40px;
  max-width: 40px;
  background: var(--base-color);
  color: var(--second-color);
  font-size: 28px;
  display: flex !important;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  min-height: 40px;
  max-height: 40px;
  align-items: center;
}

.highlight-text {
  position: relative; /* Penting untuk pseudo-elemen ::after */
  display: inline-block; /* Agar lebar garis sesuai teks */
}

/* Garis bergerak */
.highlight-text::after {
  content: "";
  position: absolute;
  left: 0;
  /* text-align: center; */
  bottom: 20px; /* Posisi di bawah teks */

  width: 150px; /* Lebar garis yang bergerak, sesuaikan jika perlu */
  height: 2px; /* Tinggi garis */
  background: linear-gradient(
    to right,
    #0e67d2,
    #02b7f7
  ); /* Gradien warna garis */
}

/* Card keunggulan  */
/* Background Section Menggunakan Gradien Halus */
.section-keunggulan-floating {
  background: linear-gradient(135deg, #f8fcfd 0%, #f1f4f9 100%);
  overflow: hidden;
}

/* Badge Desain Kapsul */
.badge-floating {
  display: inline-block;
  padding: 6px 20px;
  background: #ffffff;
  color: #0d6efd; /* Warna Tema Anda */
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.1);
  border: 1px solid rgba(13, 110, 253, 0.1);
}

/* =========================================
   STYLING KARTU FLOATING
   ========================================= */

.card-floating {
  background: #ffffff;
  border-radius: 24px;
  position: relative;
  /* Margin top diberikan ruang agar ikon setengah lingkaran di atas tidak terpotong */
  margin-top: 35px;
  padding: 45px 10px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.02);
  transition: all 0.4s ease;
  z-index: 1;
}

/* Efek Hover Kartu Utama */
.card-floating:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(13, 110, 253, 0.08); /* Bayangan membesar & berwarna */
  border-color: rgba(13, 110, 253, 0.15);
}

/* Ikon Melayang di Tengah Atas */
.floating-icon-wrapper {
  position: absolute;
  top: -40px; /* Menarik ikon 40px ke atas keluar dari kartu */
  left: 50%;
  transform: translateX(-50%); /* Posisi tepat di tengah */
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  /* Animasi Bouncy (Membal) saat kursor diarahkan */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 2;
}

.floating-icon-wrapper img {
  width: 55px;
  height: 55px;
  object-fit: contain;
  transition: all 0.4s ease;
}

/* Efek Hover pada Ikon (Ikon membal ke atas sedikit) */
.card-floating:hover .floating-icon-wrapper {
  transform: translateX(-50%) translateY(-10px);
  box-shadow: 0 12px 30px rgba(13, 110, 253, 0.2);
}

.card-floating:hover .floating-icon-wrapper img {
  transform: scale(1.15) rotate(5deg); /* Ikon membesar & miring sedikit */
}

/* =========================================
   STYLING ANGKA WATERMARK (01, 02, 03)
   ========================================= */

.watermark-number {
  position: absolute;
  bottom: -10px;
  right: -0px;
  font-size: 70px; /* Ukuran angka besar */
  font-weight: 800;
  font-family: Arial, sans-serif;
  color: rgba(0, 0, 0, 0.03); /* Warna abu-abu transparan (hampir pudar) */
  z-index: 0;
  transition: all 0.5s ease;
  pointer-events: none; /* Agar tidak bisa di-klik/blok oleh user */
}

/* Efek Hover pada Angka: Angka membesar dan berubah warna menjadi warna tema */
.card-floating:hover .watermark-number {
  color: rgba(13, 110, 253, 0.06);
  transform: scale(1.1) translate(-5px, 5px);
}

/* Supaya teks tidak tertimpa oleh angka watermark */
.card-floating-body {
  position: relative;
  z-index: 1;
}

.card-floating-body p {
  font-size: 15px;
  line-height: 1.7;
}

/* Card Keunggulan  */

/* Card Artikel  */
.blog-split {
  display: flex;
  background: #fff;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #eee;
}

.blog-split:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border-color: var(--base-color); /* Warna aksen merah */
}

.split-thumb {
  width: 40%;
  min-height: 220px;
  position: relative;
}

.split-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  aspect-ratio: 1/1;
}

.blog-split:hover .split-thumb img {
  transform: scale(1.1);
}

.split-info {
  width: 60%;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Gaya Tombol Baca Selengkapnya */
.btn-read-more {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 0;
  color: var(--base-color);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: 0.3s;
  margin-top: 15px;
}

.btn-read-more i {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.btn-read-more:hover {
  color: #000;
}

.btn-read-more:hover i {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .blog-split {
    flex-direction: column;
  }
  .split-thumb,
  .split-info {
    width: 100%;
  }
  .split-thumb {
    min-height: 200px;
  }
}
/* Card Artikel  */

/* Card Rental baru  */
.card-elegant {
  border: 2px solid #000;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.elegant-header {
  background: #000;
}
.elegant-img-box {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-box-elegant {
  border: 1px solid #ffd450;
  border-radius: 12px;
  background: #fffbef;
}

.btn-full-booking {
  display: block;
  width: 100%;
  background: #ffd450;
  color: #000;
  text-align: center;
  padding: 12px;
  font-weight: 800;
  text-decoration: none;
  border-top: 1px solid #000;
}

.btn-full-detail {
  display: block;
  width: 100%;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 8px;
  font-size: 12px;
  text-decoration: none;
}

/* card rental baru  */

/* Card Highlight  */
.highlight-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 25px;
}

.highlight-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
}

/* Image */
.highlight-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

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

/* Overlay */
.highlight-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2));
  transition: background 0.4s ease;
}

/* Content wrapper */
.highlight-content {
  position: absolute;
  left: 0;
  bottom: -30px;
  width: 100%;
  padding: 0 25px;
  color: #fff;
  z-index: 2;
}

/* Judul default */
.highlight-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  transition: transform 0.4s ease;
}

/* Deskripsi default hidden */
.highlight-desc {
  font-size: 16px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

/* Hover effect */
.highlight-card:hover .highlight-title {
  transform: translateY(-25px);
}

.highlight-card:hover .highlight-desc {
  opacity: 0.8;
  transform: translateY(-23px);
  font-size: 16px;
}

/* Arrow */
.highlight-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 2;
  transition: all 0.3s ease;
}

.highlight-card:hover .highlight-arrow {
  background: white;
  color: black;
}

/* Grid Position */
.highlight-card:nth-child(1) {
  grid-row: 1 / 3;
}

.highlight-card:nth-child(4) {
  grid-column: 2 / 2;
}

/* Responsive */
@media (max-width: 992px) {
  .highlight-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .highlight-card {
    height: 250px;
  }

  .highlight-card:nth-child(1),
  .highlight-card:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Card Highlight  */

/* Card Visi Misi  */

.card-misi {
  background: #f7b21e11;
  border-radius: 5px;
  padding: 10px;
  transition: all 0.35s ease;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.card-visi {
  background: #1a371c0e;
  border-radius: 5px;
  padding: 10px;
  transition: all 0.35s ease;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

/* Hover effect */
.card-visi:hover,
.card-misi:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Title */
.card-visi h3,
.card-misi h3 {
  font-weight: 600;
  margin-bottom: 12px;
}

/* Text */
.card-visi div,
.card-misi div {
  color: #555;
  line-height: 1.7;
}

.card-visi::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: var(--base-color);
  left: 0;
  top: 0;
  border-radius: 10px;
}

.card-misi::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: var(--second-color);
  left: 0;
  top: 0;
  border-radius: 10px;
}

/* Card Visi Misi  */

/* Welcome  */
/* CSS Tentang Kami - Opsi 1 */
.about-section-1 {
  background-color: #fafaf8; /* Background soft */
  overflow: hidden;
}

/* BADGE PROPER & ESTETIK */
.badge-web-spa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #f3ebe1; /* Warna latar soft krem */
  color: #8e7d5f; /* Warna teks earth/gold */
  padding: 8px 20px;
  border-radius: 50px; /* Bentuk kapsul */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.badge-web-spa i {
  font-size: 14px;
}

/* TYPOGRAPHY */
.about-title-1 {
  color: #2d2b2a;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}
.about-desc-1 {
  color: #666;
  line-height: 1.8;
  font-size: 16px;
}

/* IMAGE BINGKAI AKSEN */
.img-wrapper-1 {
  position: relative;
  z-index: 1;
  padding: 0 20px 20px 0; /* Ruang untuk bayangan bingkai */
}
/* Bingkai kotak di belakang gambar */
.img-wrapper-1::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80%;
  height: 80%;
  background-color: #d4af37; /* Warna aksen bingkai emas */
  border-radius: 20px;
  z-index: -1;
  transition: transform 0.5s ease;
}
.img-wrapper-1:hover::after {
  transform: translate(-10px, -10px); /* Animasi bingkai bergerak saat hover */
}
.custom-img-about-1 {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Welcome  */

.progress-wrap {
  left: 1.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Card Galeri  */

/* Card Wisata Kategori  */
/* EMPTY STATE */
.wisata-empty {
  padding: 40px 0;
}

.empty-box {
  background: #fff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  display: inline-block;
}

.empty-box i {
  font-size: 30px;
  color: #dc3545;
}

/* SIDEBAR */
.sidebar-kategori {
  position: sticky;
  top: 100px;
  z-index: 10;

  background: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* SCROLL BAR */
.sidebar-kategori::-webkit-scrollbar {
  width: 4px;
}

.sidebar-kategori::-webkit-scrollbar-thumb {
  background: #dc3545;
  border-radius: 10px;
}

/* LIST */
.list-kategori {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-kategori li {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 5px;
  transition: 0.3s;
}

.list-kategori li:hover {
  background: #f1f1f1;
}

.list-kategori li.active {
  background: #dc3545;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

/* CARD */
.card-wisata {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
  height: 100%;
}

.card-wisata:hover {
  transform: translateY(-6px);
}

.card-wisata img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* RESPONSIVE SPACING */
@media (min-width: 768px) {
  .col-md-3 {
    padding-right: 20px;
  }

  .col-md-9 {
    padding-left: 20px;
  }
}

/* ANIMATION BASE */
.wisata-item {
  opacity: 1;
  transform: scale(1);
  transition: all 0.4s ease;
}

/* HIDE ANIMATION */
.wisata-item.hide {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

/* SHOW ANIMATION */
.wisata-item.show {
  opacity: 1;
  transform: scale(1);
}

/* GRID SMOOTH */
.wisata-list {
  transition: all 0.3s ease;
}

/* card wisata kategori  */

/* card wisata  */
.modern-tour-card {
  transition: 0.3s;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06) !important;

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

.modern-tour-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

/* IMAGE */
.tour-main-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: 0.5s;
}

/* CONTENT FLEX */
.modern-tour-card .p-4 {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* DESTINASI SCROLL */
.destinasi-scroll {
  max-height: 300px;
  overflow-y: auto;
  font-size: 14px;
  color: #555;
  padding-right: 5px;
}

/* SCROLLBAR BIAR HALUS */
.destinasi-scroll::-webkit-scrollbar {
  width: 4px;
}
.destinasi-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

/* BAGIAN BAWAH (PRICE + BUTTON) DIDORONG KE BAWAH */
.bottom-area {
  margin-top: auto;
}

/* BADGE */
.badge-category-top {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #fff;
  padding: 5px 15px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  color: var(--main-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* BUTTON */
.btn-book-now {
  background: #000;
  color: #fff;
  padding: 8px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: 0.3s;
}

.btn-book-now:hover {
  background: var(--base-color);
  color: #fff;
}

/* FEATURE BADGE */
.badge-feature {
  background-color: #ffe5e4;
  color: #4a5568;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  transition: 0.3s;
}

.badge-feature i {
  color: var(--base-color);
  font-size: 10px;
}

.badge-feature:hover {
  background-color: var(--base-color);
  color: #fff;
}

.badge-feature:hover i {
  color: #fff;
}

.destinasi-scroll {
  max-height: 100px;
  overflow-y: auto;
  padding-right: 5px;
}

/* Scrollbar biar lebih halus */
.destinasi-scroll::-webkit-scrollbar {
  width: 4px;
}
.destinasi-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
/* card wisata  */

/* Card Produk  */
/* Card Clean Minimalist */
.card-produk-clean {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.card-produk-clean:hover {
  border-color: #d1d1d1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

/* Image Hover Zoom */
.produk-img-wrap {
  overflow: hidden;
}
.produk-img-wrap img {
  height: 100%;
  transition: transform 0.5s ease;
}
.card-produk-clean:hover .produk-img-wrap img {
  transform: scale(1.08);
}

/* Membatasi teks deskripsi 3 baris */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Buttons */
.btn-clean-outline {
  border: 1px solid #333;
  color: #333;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: 0.3s;
}
.btn-clean-outline:hover {
  background: #333;
  color: #fff;
}
.btn-clean-solid {
  background: var(--base-color); /* Ganti dengan warna tema (text-base-color) */
  border: 1px solid #007bff;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: 0.3s;
}
.btn-clean-solid:hover {
  background: #0056b3;
  color: #fff;
}

/* card produk  */

/* Dropdown menu  */
@media (max-width: 991.98px) {
  .custom-dropdown .dropdown-menu {
    position: static !important;
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 1.5rem;
    margin: 0;

    display: none;

    max-height: 100px; /* 🔥 batas tinggi */
    overflow-y: auto; /* 🔥 aktifkan scroll */
  }

  .custom-dropdown.show .dropdown-menu {
    display: block;
    width: 245px;
  }

  /* Optional: biar scroll lebih halus */
  .custom-dropdown .dropdown-menu::-webkit-scrollbar {
    width: 5px;
  }

  .custom-dropdown .dropdown-menu::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }
}

@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-collapse .nav-link {
    font-size: 14px;
  }

  .custom-dropdown .dropdown-menu {
    position: static !important;
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 1.5rem;
    margin: 0;

    display: none; /* 🔥 ini penting */
  }

  /* TAMPILKAN SAAT AKTIF */
  .custom-dropdown.show .dropdown-menu {
    display: block;
    font-size: 12px;
    width: 245px;
  }

  /* ICON ROTATE */
  .dropdown-toggle::after {
    margin-left: 10px;
    transition: transform 0.3s;
  }

  .dropdown-toggle.show::after {
    transform: rotate(180deg);
  }
}

/* MATIKAN PANAH DEFAULT BOOTSTRAP */
.dropdown-toggle::after {
  display: none !important;
}

/* ICON PANAH */
li.show .arrow-icon {
  font-size: 12px;
  transition: transform 0.3s ease;
  position: relative;
  left: 60%;
}
li .arrow-icon {
  font-size: 12px;
  transition: transform 0.3s ease;
  position: relative;
  left: 5%;
}

/* SAAT AKTIF */
.custom-dropdown.show .arrow-icon {
  transform: rotate(180deg);
}

.nav-link {
  position: relative;
}

.nav-link .arrow-icon {
}

.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
  color: black;
  opacity: 0.7;
}

/* dropdown menu  */

/* Card Keunggulaan  */
/* Container Overlap */
.keunggulan-card-modern {
  background: #fff;
  padding: 25px;
  border-radius: 16px;
  position: relative;
  transition: 0.3s;
  height: 100%;
  border: 1px solid #eee;
}

.keunggulan-card-modern:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  border-color: transparent;
}

/* ICON */
.icon-modern {
  width: 100px;
  /* height: 1px; */
  border-radius: 12px;
  background: rgba(220, 53, 69, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.icon-modern img {
  width: 50px;
}

/* NUMBER */
.number-modern {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.1);
}

/* HOVER EFFECT */
.keunggulan-card-modern:hover .icon-modern {
  /* background: #dc3545; */
}

.keunggulan-card-modern:hover .icon-modern img {
  /* filter: brightness(0) invert(1); */
}

.keunggulan-card-modern:hover h5 {
  color: #dc3545;
}

/* Card Keunggulan  */

.bg-navbar {
  background-color: black;
}

.slider-gambar {
  top: -110px;
  /* z-index: -1; */
}

.navbar-stick:not(.navbar-dark) {
  background-color: black;
  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-color {
  color: var(--base-color) !important;
}

html {
  scroll-behavior: smooth;
}

.bg-stats {
  background-color: #1a371ccc;
  padding: 15px;
  border-radius: 15px;
}