/*!
Theme Name: BC
Theme URI: 
Author: Gus Surya
Author URI: http://bcsolutions.com/
Description: BC SOlutions Theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: International 
Tags: custom
*/

html {
  scroll-behavior: auto !important;
}

:root {
  --primary-blue: #0f6abf;
  --primary-green: #079c4b;
  --text-main: #111827;
  --text-muted: #6b7280;
  --border-soft: #e5e7eb;
  --bg-soft: #f9fafb;
}

/* ===== HEADER ===== */
.main-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
  border-bottom: 1px solid var(--border-soft);
}

/* Desktop fixed header */
@media (min-width: 769px) {
  .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #ffffff;
  }

  body {
    padding-top: 90px; /* keep this or adjust to header height */
  }

  /* When WP admin bar is visible (logged-in) */
  body.admin-bar .main-header {
    top: 32px;          /* height of admin bar on desktop */
  }

  /* Also add the admin bar height to body padding */
  body.admin-bar {
    padding-top: 50px /* roughly 102px; tweak if needed */
  }
}

/* Bar utama */
.nav-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
}

/* Logo kiri */
.logo img {
  height: 30px;
  display: block;
}

/* Menu utama (BERANDA + dropdown) */
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 32px;
}

.nav-links>a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600; 
  font-family: "Montserrat", sans-serif;
  position: relative;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  padding: 10px 14px;
  transition: color 0.5s;
  z-index: 1;
}

.nav-links>a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid #262626;
  border-bottom: 2px solid #262626;
  transform: scaleY(2);
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
}

.nav-links>a::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: calc(100% - 4px);
  background-color: #f65c23;
  transform: scale(0);
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
  pointer-events: none;
}

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

.nav-links>a:hover::before {
  transform: scaleY(1);
  opacity: 1;
}

.nav-links>a:hover::after {
  transform: scaleY(1);
  opacity: 1;
}

/* Item dropdown: Layanan, Platform, Tentang Kami */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 24px;
}

.nav-btn {
  background: transparent;
  border: none;
  font: inherit;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-main);
  position: relative;
  text-transform: uppercase;
  padding: 10px 14px;
  transition: color 0.5s;
  z-index: 1;
}

.nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid #262626;
  border-bottom: 2px solid #262626;
  transform: scaleY(2);
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
}

.nav-btn::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: calc(100% - 4px);
  background-color: #f65c23;
  transform: scale(0);
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
  pointer-events: none;
}

.nav-btn:hover {
  color: #ffffff;
}

.nav-btn:hover::before {
  transform: scaleY(1);
  opacity: 1;
}

.nav-btn:hover::after {
  transform: scaleY(1);
  opacity: 1;
}

/* Tombol BERANDA (home) */
.nav-home-btn {
  padding: 30px 0;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-main);
  position: relative;
  text-transform: uppercase;
  padding: 10px 14px;
  transition: color 0.5s;
  z-index: 1;
}

.nav-home-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid #262626;
  border-bottom: 2px solid #262626;
  transform: scaleY(2);
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
}

.nav-home-btn::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: calc(100% - 4px);
  background-color: #262626;
  transform: scale(0);
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
  pointer-events: none;
}

.nav-home-btn:hover {
  color: #ffffff;
}

.nav-home-btn:hover::before {
  transform: scaleY(1);
  opacity: 1;
}

.nav-home-btn:hover::after {
  transform: scaleY(1);
  opacity: 1;
}

.caret {
  font-size: 10px;
}

/* BAGIAN KANAN: Bahasa + tombol */
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mega dropdown (Layanan, dsb) - DESKTOP */
.dropdown-panel {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 10px);
  min-width: 600px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  padding: 24px 32px;
  display: flex;
  gap: 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.dropdown-panel .columns {
  display: grid;
  gap: 24px;
}

.dropdown-panel .card {
  background: #ffffff;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
}

.dropdown-col {
  flex: 1;
  min-width: 0;
}

.dropdown-col-right {
  border-left: 1px solid var(--border-soft);
  padding-left: 32px;
}

.dropdown-subtitle,
.dropdown-subtitle-below {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dropdown-card {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: var(--text-main);
}

.dropdown-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.dropdown-card p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.dropdown-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
}

/* .icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--primary-blue);
  flex-shrink: 0;
} */

/* ANIMASI UNTUK ITEM DI DALAM FEATURES (services-panel) */
.services-panel .dropdown-item {
  position: relative;
  display: block;
  padding: 10px 14px;
  border-radius: 0;
  overflow: hidden;
  /* text-transform: uppercase; */
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
  cursor: pointer;
}

/* garis hitam atas–bawah seperti nav-links */
.services-panel .dropdown-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid #262626;
  border-bottom: 2px solid #262626;
  transform: scaleY(2);
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
}

/* fill oranye di belakang teks */
.services-panel .dropdown-item::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: calc(100% - 4px);
  background-color: #fc4410;
  transform: scale(0);
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
  pointer-events: none;
}

/* efek hover: animasi bar oranye, teks tetap gelap agar selalu terbaca */
.services-panel .dropdown-item:hover {
  color: #ffffff;
}

.services-panel .dropdown-item:hover::before {
  transform: scaleY(1);
  opacity: 1;
}

.services-panel .dropdown-item:hover::after {
  transform: scaleY(1);
  opacity: 1;
}

/* pastikan teks di dalam ikut warna inherit */
.services-panel .dropdown-item-title,
.services-panel .dropdown-item-desc {
  color: inherit;
}

/* Tombol GET FREE TRIAL */
.btn-get-free-trial {
  transition: all 0.3s ease-in-out;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  margin-left: 24px;
  border-radius: 999px;
  border: none;
  background: #fc4410;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
  overflow: hidden;

}

.btn-get-free-trial:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(252, 68, 16, 0.4);
}

@keyframes text-blink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/* Layanan: Solusi Konsultasi */
.services-panel .dropdown-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.dropdown-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 10px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-main);
  padding: 6px 4px;
  border-radius: 999px;
}

.dropdown-item-text {
  display: flex;
  flex-direction: column;
}

.dropdown-item-title {
  font-size: 15px;
  font-weight: 600;
}

.dropdown-item-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.dropdown-item:hover {
  background: #eff6ff;
}

/* Override hover background for FEATURES items so orange bar is visible */
.services-panel .dropdown-item:hover {
  background: transparent;
  /* or background: none; */
}

.dropdown-list a,
.language-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text-main);
  font-size: 13px;
  padding: 4px 10px;
  position: relative;
  border-radius: 0;
  background: transparent;
  border: none;
  width: auto;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}

.dropdown-list a:hover,
.language-item:hover {
  color: #ffffff;
}

.language-item.active {
  color: #ffffff;
}

/* Animasi garis + fill oranye seperti nav-links */
.language-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid #262626;
  border-bottom: 2px solid #262626;
  transform: scaleY(2);
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
}

.language-item::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: calc(100% - 4px);
  background-color: #f65c23;
  transform: scale(0);
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
  pointer-events: none;
}

.language-item:hover::before {
  transform: scaleY(1);
  opacity: 1;
}

.language-item:hover::after,
.language-item.active::after {
  transform: scaleY(1);
  opacity: 1;
}

/* ========== RESPONSIVE HEADER & BURGER ========== */
/* Tablet */
@media (max-width: 1024px) {
  .nav-container {
    max-width: 100%;
    padding: 10px 16px;
  }

  .logo img {
    height: 48px;
  }

  .nav-links {
    gap: 16px;
    margin-left: 24px;
  }

  .nav-btn,
  .nav-home-btn,
  .nav-links>a {
    font-size: 14px;
  }

  .btn-get-free-trial {
  transition: all 0.3s ease-in-out;

    padding: 8px 16px;
    margin-left: 16px;
    font-size: 14px;
  }

  /* dropdown lebih sempit */
  .dropdown-panel {
    min-width: 420px;
  }
}

/* ====== MOBILE (BURGER) ====== */
@media (max-width: 1245px) {

  /* BAR ATAS: logo kiri, burger kanan */
  .nav-container {
    max-width: 100%;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo img {
    height: 36px;
  }

  /* SEMBUNYIKAN MENU + BAHASA PADA BAR ATAS */
  .nav-links,
  .header-right {
    display: none;
  }

  /* TOMBOL BURGER */
  .mobile-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .mobile-menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: #000;
  }

  /* ===== PANEL MENU SAAT BURGER DIBUKA ===== */
  .main-header.nav-open .nav-links {
    display: block;
    position: absolute;
    top: 56px;
    /* tinggi bar atas */
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
  }

  /* SETIAP ITEM MENU DI DALAM BURGER */
  .main-header.nav-open .nav-links>a,
  .main-header.nav-open .nav-btn,
  .main-header.nav-open .nav-home-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    text-align: left;
    box-shadow: none;
  }

  /* Nav-item wrapper untuk dropdown */
  .main-header.nav-open .nav-item {
    display: block;
    width: 100%;
    margin: 0;
  }

  /* GET FREE TRIAL full width di bawah menu */
  .main-header.nav-open .btn-get-free-trial {
  transition: all 0.3s ease-in-out;

    display: block;
    width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 14px 16px;
    font-size: 15px;
    box-sizing: border-box;
    background-color: #fc4410 !important;
    color: #ffffff !important;
  
  }

  /* Matikan gaya mega-menu besar dan jadikan panel sederhana */
  .main-header.nav-open .dropdown-panel {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border-top: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Secara default, sembunyikan daftar fitur */
  .main-header.nav-open .nav-item .dropdown-panel {
    display: none;
  }

  /* Saat nav-item punya class .open (klik FEATURES) → tampil jelas di bawahnya */
  .main-header.nav-open .nav-item.open .dropdown-panel {
    display: block;
    padding: 10px 20px 12px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    z-index: 1;
  }

  .main-header.nav-open .dropdown-grid {
    display: block;
  }

  .main-header.nav-open .dropdown-item {
    padding: 6px 0;
    border-radius: 0;
  }

  .main-header.nav-open .dropdown-card {
    display: none;
    /* sembunyikan kartu besar */
  }

  /* SEMBUNYIKAN BAGIAN BAHASA DI MOBILE (SUPAYA TIDAK NIMPA) */
  .main-header.nav-open .header-right {
    display: none;
  }
}

/* PERAPIHAN DROPDOWN FEATURES DI MOBILE */
@media (max-width: 1245px) {

  /* Hapusus shift ke kiri dari aturan desktop */
  .main-header.nav-open .nav-item.open>.dropdown-panel {
    transform: none;
    left: auto;
    right: auto;
  }

  /* Panel FEATURES di dalam burger: panel abu-abu tepat di bawah tombol */
  .main-header.nav-open .nav-item.open .services-panel {
    margin: 0;
    padding: 10px 16px 12px;
    /* sama seperti padding menu */
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    box-sizing: border-box;
    width: 100%;
  }

  /* Jadikan isi FEATURES list vertikal sederhana */
  .main-header.nav-open .nav-item.open .services-panel .dropdown-grid,
  .main-header.nav-open .nav-item.open .services-panel .dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .main-header.nav-open .nav-item.open .services-panel .dropdown-item {
    display: block;
    padding: 6px 0;
    border-radius: 0;
  }

  /* Saat hover di mobile (misal pakai cursor di emulator), paksa teks putih seperti header */
  .main-header.nav-open .nav-item.open .services-panel .dropdown-item:hover {
    color: #ffffff;
  }

  /* Sembunyikan icon biru saja, JANGAN sembunyikan teks */
  /* .main-header.nav-open .nav-item.open .services-panel .icon-circle {
    display: none;
  } */

  /* Biarkan title pakai style default (warna teks tetap terlihat) */
}

/* CSS Bagian Hero */
.nav-item.open>.dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.hero-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100vw;
  height: 600px;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 1.5s ease-in-out, background-position 1.5s ease-in-out;
}

.hero-wrapper::after {
  content: "";
  position: absolute;
  inset: 0; /* top/right/bottom/left: 0 */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.35)
  );
  pointer-events: none;
  z-index: 0; /* behind content */
}

.hero-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  width: 100%;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.hero-left {
  width: 100%;
  max-width: 580px;
}

.hero-heading {
  padding: 25px 0 0;
  font-size: clamp(32px, 4vw, 56px);
  font-family: "Montserrat", sans-serif;
  line-height: 1.1;
  color: #FC4410;
}

.hero-text-1 {
  padding: 0 0 25px;
  font-size: clamp(24px, 3.5vw, 48px);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  line-height: 1.2;
  color: #faf8f8;
}

.hero-paragraph {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.2;
  color: #e7e8eae6;
}

.hero-button {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hero-btn-primary {
  background: #fc4410;
  color: #ffffff;
  border: none;
}

.hero-btn-primary:hover {
  background: #f46a44;
}

.hero-btn-outline {
  background: #ffffff;
  color: #ed7226;
  border: 1px solid #fc4410;
}

.hero-btn-outline:hover {
  background: #ededed;
}

.hero-right {
  border-radius: 24px;
  overflow: hidden;
}

.hero-image {
  width: 150px;
  border-radius: 20px;
  overflow: hidden;
  display: block;
}

.hero-dots-container {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background-color: transparent;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-dot:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.4);
}

.hero-dot.active {
  width: 32px;
  border-radius: 5px;
  background-color: #fc4410;
  border-color: #fc4410;
}

@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* .hero-heading font-size override removed so clamp() can work properly */
}

/*===== WELCOMING SECTION =====*/
.welcoming-wrapper {
  width: 100%;
  background: #ffffff;
  padding: 40px 24px;
}

.welcoming-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 25px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  /* kiri gambar, kanan teks */
  gap: 60px;
  align-items: center;
}

.welcoming-left {
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
}

.welcoming-left img {
  display: block;
  width: 100%;
  height: 400;
}

.welcoming-right {
  max-width: 520px;
}

.welcoming-heading {
  /* margin: 0 0 16px; */
  padding-bottom: 16px;
  font-size: 40px;
  line-height: 1.2;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #fc4410;
  /* sesuaikan dengan brand kamu */
}

.welcoming-text-1 {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  color: #111827;
}

.welcoming-paragraph {
  padding: 0 0 25px;
  font-size: 15px;
  line-height: 1.6;
  color: #6b7280;
}

/* Responsive: tablet & HP */
@media (max-width: 1024px) {
  .welcoming-container {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .welcoming-right {
    max-width: none;
  }

  .welcoming-heading {
    font-size: 30px;
  }
}

@media (max-width: 640px) {
  .welcoming-heading {
    font-size: 26px;
  }

  .welcoming-paragraph {
    font-size: 14px;
  }
}

/*CSS Bagian Body-2*/
.body-container {
  max-width: 1200px;
  margin: 0 auto;
  /* padding: 30px 0; */
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr);
  align-items: flex-start;
  cursor: pointer;
  /* width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%); */
  gap: 150px;
}

.first-body {
  max-width: 560px;
  margin: 0 auto;
}

.body-label {
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  /* text-transform: uppercase; */
  margin: 0 0 10px;
}

.body-title {
  font-size: 40px;
  line-height: 40px;
  text-align: left;
  color: #4b5563;
  margin: 0 0 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #fc4410;
}

.body-substitle {
  font-size: 23px;
  line-height: 1;
  margin: 0 0 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

.body-text {
  font-size: 15px;
  line-height: 1.5;
  color: #6b7280;
  font-family: "Montserrat", sans-serif;
  margin: 0 0 12px;
  padding-bottom: 12px;
}

/* logo marquee */
.brands-marquee {
  margin: 26px 0;
  overflow: hidden;
}

.brands-marquee-content {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  width: max-content;           /* track is as wide as all logos combined */
  animation: brands-marquee 15s linear infinite;
}

@keyframes brands-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* move by half, because logos are duplicated (ABAB) */
  }
}

.brands-marquee-content img {
  height: 150px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.1);
}

/* === Override brands marquee alignment in Segment Partner === */
.segment-wrapper .segment-container {
  /* keep title centered */
  text-align: center;
}

/* Marquee block itself: align to the left side of the container */
.segment-wrapper .brands-marquee {
  margin: 24px auto 0;      /* vertical spacing, still centered as a block */
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

/* Logos row: start from left, not centered */
.segment-wrapper .brands-marquee-content {
  display: flex;
  justify-content: flex-start;  /* important: no center */
  gap: 120px;                    /* adjust space between logos as you like */
  margin-left: 0;
}

.body-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 640px;
  margin: 20px 0 40px;
}

.body-card:hover {
  transform: translateY(-4px);
  transition:
    opacity 0.10s ease,
    transform 0.10s ease,
    /* box-shadow 0.10s ease; */
}

.body-card {
  width: calc(50% - 22px - 22px);
  min-height: 220px;
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 22px 24px;
  /* box-shadow:0 14px 40px rgba(15, 23, 42, 0.08); */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  text-align: center;
  /* untuk animasi scroll + hover */
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    /* box-shadow 0.3s ease, */
    border-color 0.3s ease;
}

.body-card-badge {
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 2px;
  background: #fc4410;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* setelah masuk viewport (di-set via JS) */
.body-card.in-view {
  opacity: 1;
}

/* efek pop-up saat hover */
.body-card.in-view:hover {
  transform: translateY(-4px);
  /* box-shadow: 0 18px 50px rgba(15, 23, 42, 0.20); */
  border: 1px solid #fc4410;
}

.body-card-label {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.platform-badge-plans {
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 2px;
  background: #fc4410;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.body-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  /* background: #f34328; */
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.body-card-image {
  max-width: 60%;
  max-height: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.body-card-title {
  font-size: 15px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  margin: 10px 0 10px;
  color: #111827;
  text-align: center;
}

.body-card-text {
  font-size: 15px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  line-height: 26px;
  color: #0000007D;
  margin: 0 0 18px;
  flex: 1;
  text-align: center;
}

.body-card-button {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background: #FC4410;
}

.body-card-button:hover {
  opacity: 0.9;
}

@media (max-width:1024px) {
  .body-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width:1024px) {
  .body-cards {
    grid-template-columns: 1fr;
  }
}

/*BODY 2*/
.body-container-2 {
  max-width: 1200px;
  /* margin: 0 auto; */
  padding: 30px 0;
  margin-bottom: 80px;
}

.second-body {
  text-align: center;
  padding: 25px 0;
}

.body-title-2 {
  font-size: 40px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #fc4410;
  text-align: left;
}

.body-title-2-sub {
  font-size: 23px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  align-self: left;
  letter-spacing: 2px;
  color: #0000007D;
  text-align: left;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1024px) {
  .platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* HP (1 kolom penuh) */
@media (max-width: 768px) {
  .platform-grid {
    grid-template-columns: 1fr;
  }
}

.platform-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* justify-content: space-between; */
  background: #ffffff;
  border-radius: 18px;
  padding: 12px 10px;
  /* box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08); */
  border: 1px solid #e5e7eb;
  /* animasi scroll */
  opacity: 0;
  /* transform: translateY(24px); */
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    /* box-shadow 0.3s ease, */
    border-color 0.3s ease;
}

.platform-card.in-view {
  opacity: 1;
}

.platform-card:hover {
  /* transform: translateY(-4px); */
  /* box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18); */
  border-color: #fc4410;
}

/* .platform-icon {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: #ed6328;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
} */
.platform-image {
  max-width: 80px;
  max-height: 80px;
  display: block;
  object-fit: contain;
  margin: 16px;
}

.platform-title {
  font-size: 15px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  margin: 0 0 10px;
  color: #111827;
}

.platform-text {
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  color: #4b5563;
  margin: 8px 15px 18px;
  flex: 1;
}

/* .platform-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background: #fc4410;
}
.platform-button:hover {
  opacity: 0.9;
} */
@media (max-width: 1024px) {
  .platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .platform-grid {
    grid-template-columns: 1fr;
  }

  .body-title-2-sub {
    font-size: 22px;
  }
}

/* ===== DAMPAK DALAM ANGKA ===== */
/* .stats-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.stats-title {
  font-size: 26px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 32px;
  color: #111827;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.stat-item {
  text-align: center;
}
.stat-number {
  font-size: 40px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #0f6abf;
}
.stat-label {
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  color: #4b5563;
  margin-top: 4px;
} */

/* ===== LIMA LANGKAH ===== */
.steps-wrapper {
  background: #f9fafb;
  padding: 25px 0 60px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.steps-container {
  display: grid;
  /* flex-direction: column;
  align-items: center;
  justify-content: center; */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  width: 100%;
  height: auto;
  /* transform: translateX(-50%); */
}

.steps-widget {
  width: 100%;
  min-width: 0;
}

.steps-widget .swiper {
  width: 100%;
  overflow: hidden;
  padding-bottom: 34px;
}

.steps-widget .swiper-wrapper {
  align-items: stretch;
}

.steps-widget .swiper-slide {
  height: auto;
  display: flex;
}

.steps-widget .swiper-slide .step-item {
  width: 100%;
}

.steps-widget .swiper-button-prev,
.steps-widget .swiper-button-next {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
  cursor: pointer;
  backdrop-filter: blur(4px);
  top: 50%;
  transform: translateY(-50%);
}

.steps-widget .swiper-button-prev::after,
.steps-widget .swiper-button-next::after {
  font-size: 14px !important;
}


.step-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

/* Optional: size navigation buttons */
.steps-title {
  font-size: 40px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  margin: 0 0 10px;
  color: #ff4410;
}

.steps-subtitle {
  font-size: 23px;
  color: #6b7280;
  margin: 0 0 32px;
  margin-bottom: 50px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 60px;
}

.step-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.step-icon {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 10px;
  border-radius: 18px;
  background: #ffffff;
  color: #0f6abf;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f65c23;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.step-image {
  margin: 10px auto 10px;
  align-items: center;
  justify-content: center;
  max-width: 120px;
  max-height: 120px;
  display: flex;
  object-fit: contain;
}

.step-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #0f6abf;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .step-badge-check {
  background: #fc4410;
} */
.step-title {
  font-size: 15px;
  font-weight: 600;
  margin: 14px 0 6px;
  color: #111827;
}

.step-text {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
  margin: 15px 40px;
}

/* .steps-footer {
  text-align: center;
  margin-top: 8px;
}
.steps-footer-text {
  font-size: 14px;
  color: #111827;
  margin: 0 0 12px;
} */
/* .steps-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  background: #fc4410;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
} */
/* .steps-cta:hover {
  background: #f98538;
}
.steps-rating {
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
} */

/* ===== REVIEW ===== */
.review-wrapper {
  background: #ffffff;
  padding: 70px 0 80px;
}
.review-container {
  max-width: auto;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.review-title {
  font-size: 40px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 300px 10px;
  color: #111827;
}
.review-text {
  font-size: 15px;
  line-height: 1.5;
  color: #6b7280;
  margin: 0 300px 32px;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  text-align: left;
}
.review-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.review-image-wrap {
  width: 100%;
  height: 190px;
  overflow: hidden;
}
.review-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.review-meta {
  font-size: 11px;
  color: #6b7280;
  margin: 12px 18px 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.review-username {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 18px 10px;
}
.review-text-2 {
  font-size: 13px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 18px 16px;
}
.review-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 16px;
  margin-top: auto;
}
.review-profile {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
}
.review-logo {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
}
.review-hotel-username {
  font-size: 13px;
  color: #111827;
}

/* ===== SEGMENT ===== */
.segment-wrapper {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #ff4410, #f95436);
  padding: 60px 0;
  color: #ffffff;
}

.segment-container {
  max-width: auto;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.segment-title {
  font-size: 28px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 25px;
}

.segment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.segment-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  background: transparent;
  height: 100%;          /* isi tinggi kolom grid */
  box-sizing: border-box;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.segment-chip strong {
  display: block;
  margin-bottom: 4px;
}

.segment-chip-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* hover chip: efek pop up */
.segment-chip:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.segment-chip-icon {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 6px;   /* jarak ke text */
}

/* untuk kartu yang pakai gambar di atas */
.segment-chip-image {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 14px;
  border-radius: 25px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  background: transparent;
  height: 100%;          /* juga isi tinggi kolom grid */
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.segment-chip-image strong,
.segment-chip-image .segment-chip-text {
  text-align: center;         /* teks mengikuti ke bawah, rata tengah */
}

.segment-swiper .swiper-slide {
  display: flex;
  justify-content: center;
}

/* Pagination untuk segment swiper */
.segment-swiper .swiper-pagination {
  position: static;               /* biar ikut flow di bawah slider */
  margin-top: 16px;
  text-align: center;
}

.segment-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: white;  /* oranye muda */
  opacity: 1;                          /* jangan transparan */
  margin: 0 4px !important;
}

.segment-swiper .swiper-pagination-bullet-active {
  background: #f57451;                 /* oranye utama */
  transform: scale(1.2);
}

@media (max-width: 1024px) {
  .stats-grid {
    gap: 24px;
  }

  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .segment-title {
    font-size: 22px;
  }

  .stats-title,
  .steps-title,
  .review-title {
    font-size: 22px;
  }

  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .review-grid {
    grid-template-columns: 1fr;
  }
}

/*====SECTION: FAQ====*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;

}

html, body {
  overflow-x: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
}

body {
  background-color: #ccccccad;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

.faq-wrapper {
  background: #ffffff;
  padding: 25px 0;
}

.faq-container {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  margin-bottom: 80px;
  padding: 0 20px;
  width: 100vw;
  /* height: 45vw; */
  margin-left: 50%;
  transform: translateX(-50%);
}

.faq-header {
  text-align: center;
  margin-bottom: 40px;
}

.faq-header h2 {
  font-size: 35px;
  color: #333;
  margin-bottom: 10px;
}

.faq-header p {
  color: #666;
  font-size: 15px;
}

.faq-accordion {
  width: 100%;
}

.faq-item {
  background: white;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.faq-question {
  padding: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  color: #333;
  transition: background-color 0.3s;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}

.faq-icon {
  font-size: 15px;
  color: black;
  transition: transfrom 0.5s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-question:hover {
  background-color: #f9f9f9;
}

.faq-question i {
  transition: transform 0.3s ease;
  color: #666;
}

.faq-answer {
  display: none;
  padding: 0 20px;
  background-color: #ece5e5;
  border-top: 1px solid #eee;
}

.faq-answer p {
  padding: 15px 0;
  color: #555;
  line-height: 1.6;
}

/* Active state for open accordion */
.faq-item.active .faq-answer {
  display: block;
}

.fa-chevron-up {
  transform: rotate(180deg);
}

/*====SECTION: KONSULTASI====*/
.consult-wrapper {
  background: linear-gradient(360deg, #e5290d, #ed611c);
  padding: 70px 70px;
  color: #ffffff;
  scroll-margin-top: 80px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.consult-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.consult-left {
  max-width: 420px;
}

/* .consult-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.rating-stars {
  display: inline-flex;
  gap: 3px;
  font-size: 16px;
  color: #facc15;
}
.rating-text {
  font-size: 13px;
  margin: 0;
} */
.consult-title {
  font-size: 35px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  margin: 0 0 8px;
  color: #ffffff;
}

.consult-subtitle {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 16px;
  line-height: 1.6;
  color: #ffffff;
}

.consult-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
}

.consult-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.consult-list-icon {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* testimoni */
.consult-review {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.consult-image-wrap {
  width: 150px;
  /* height: 150px; */
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.consult-quote-box {
  font-size: 13px;
  line-height: 1.6;
}

.consult-quote-text {
  margin: 0 0 8px;
}

.consult-author {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  opacity: 0.9;
}

@keyframes brands-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ===== FORM KANAN ===== */
.consult-right {
  background: #ffffff;
  color: #111827;
  border-radius: 24px;
  padding: 30px 20px;
  box-shadow: 0 24px 60px rgba(236, 71, 26, 0.936);
}

.consult-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  /* kanan lebih lebar */
  gap: 20px;
  align-items: center;
}

.consult-form-title {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 18px;
}

.consult-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
}

.consult-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.consult-field span {
  font-weight: 500;
}

.required {
  color: #ef4444;
  margin-left: 3px;
}

.consult-field input {
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 8px 10px;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
}

.consult-field input:focus {
  outline: none;
  border-color: #ed421b;
  box-shadow: 0 0 0 1px rgba(15, 106, 191, 0.25);
}

/* phone row */
.consult-field-inline .phone-row {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 8px;
}

.phone-row select {
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 8px 10px;
  font-size: 13px;
  font-family: "Montserrat", sans-serif;
  background: #ffffff;
}

/* submit */
.consult-submit {
  margin-top: 6px;
  align-self: flex-start;
  padding: 9px 24px;
  border-radius: 999px;
  border: none;
  background: #fc4410;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.consult-submit:hover {
  background: #fa7049;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .consult-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .consult-right {
    max-width: 300px;
    margin: 0 auto;
  }
}

@media (max-width: 1024px) {
  .consult-wrapper {
    padding: 48px 0 56px;
  }

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

  .consult-marquee-content img {
    height: 32px;
  }
}

/*====FOOTER====*/
/* ===== FOOTER ===== */
.site-footer {
  background: #000000;
  border-top: 1px solid #e5e7eb;
  padding: 60px 0 40px;
  font-size: 14px;
  color: #ffffff;
  /* paksa footer full-width meski berada di dalam container boxed */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: 80px;
}

.footer-col {
  min-width: 0;
}

.footer-brand {
  max-width: 260px;
}

.footer-logo {
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 12px;
}

.footer-tagline {
  margin: 0 0 14px;
  font-size: 15px;
  color: #ffffff;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social-link {
  width: 35px;
  height: 35px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
}

.footer-social-link:hover {
  border-color: #ffffff;
  color: #fc872d;
}

.footer-title {
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 10px;
  color: #ffffff;
}

.footer-links-columns {
  display: flex;
  align-items: flex-start;
  gap: 80px; /* jarak antar kolom diperbesar */
  flex-wrap: wrap;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li+li {
  margin-top: 16px;
}

.footer-links a {
  text-decoration: none;
  color: #ffffff;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
}

.footer-links a:hover {
  color: #f88e3d;
}

.footer-bottom {
  border-top: 1px solid #e5e7eb;
  margin-top: 50px;
  padding-top: 30px;
  padding-bottom: 20px;
  text-align: center;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  color: #ffffff;
}

/* responsive */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }
}

@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    max-width: none;
  }
}

/* ============ MOBILE LAYOUT (≤ 768px) ============ */
@media (max-width: 768px) {
  .nav-container {
    max-width: 100%;
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .logo img {
    height: 32px;
  }

  .nav-links {
    width: 100%;
    order: 3;
    margin-left: 0;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .header-right {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .btn-login-mitra,
  .btn-free-consultation {
    margin-left: 0;
  }

  /* Dropdown menyesuaikan lebar layar kecil */
  .dropdown-panel {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    min-width: 100%;
    box-shadow: none;
    margin-top: 8px;
  }

  .dropdown-col-right {
    border-left: none;
    padding-left: 0;
    margin-top: 16px;
  }

  /* Header sedikit dipadatkan */
  .main-header {
    padding: 8px 12px;
  }

  /* Semua container utama: padding kecil & penuh layar */
  .hero-container,
  .body-container,
  .body-container-2,
  .stats-container,
  .steps-container,
  .consult-container,
  .stories-container,
  .footer-container {
    padding: 0 16px;
    max-width: 100%;
  }

  /* Grid utama jadi 1 kolom */
  .hero-container,
  .body-container,
  .body-cards,
  .platform-grid,
  .stats-grid,
  .steps-grid,
  .stories-grid,
  .consult-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Kartu melebar penuh */
  .body-card,
  .platform-card,
  .step-item,
  .story-card,
  .consult-right {
    width: 100%;
  }

  /* Review section teks tidak terlalu sempit di mobile */
  .review-title {
    margin: 0 0 10px;
  }

  .review-text {
    margin: 0 0 32px;
  }
}

/* ===== CHANNEL SECTION ===== */
.channel-wrapper {
  width: 100%;
  background: #ffffff;
}

.channel-container {
  max-width: 1200px;
  padding: 25px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}

/* Kiri: teks */
.channel-left {
  max-width: 500px;
}

.channel-label {
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  color: #fc4410;
  text-transform: uppercase;
}

.channel-title {
  margin: 0 0 15px;
  font-size: 32px;
  line-height: 1.2;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #111827;
}

.channel-subtitle {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.4;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #374151;
}

.channel-text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  font-family: "Montserrat", sans-serif;
  color: #6b7280;
}

/* Responsive: tablet */
@media (max-width: 1024px) {
  .channel-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .channel-left {
    max-width: none;
  }

  .channel-title {
    font-size: 28px;
  }
}

/* Responsive: mobile */
@media (max-width: 640px) {
  .channel-container {
    padding: 25px 16px;
  }

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

  .channel-subtitle {
    font-size: 16px;
  }

  .channel-text {
    font-size: 14px;
  }
}

/* ===== CHANNEL GLOBE RIGHT SIDE ===== */
.channel-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.channel-globe {
  position: relative;
  width: 600px;
  height: 500px;          /* jangan 0px, supaya kelihatan */
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #ffffff, #ffffff);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  overflow: visible;
}

/* core circle in the middle (lebih besar) */
.channel-globe-core {
  position: absolute;
  inset: 35%;             /* sebelumnya 25%, sedikit dibesarkan */
  border-radius: 50%;
  background: #e6211a;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  box-shadow: 0 0 0 6px rgba(15, 23, 42, 0.3);
  z-index: 2;             /* di atas background tapi tetap di dalam orbit */
}

.channel-globe-title {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

/* orbit logos – lebih dekat ke pinggir luar, jauh dari core */
.channel-globe-orbit {
  position: absolute;
  inset: 6%;              /* sebelumnya 10%, jadi lebih besar radius-nya */
  border-radius: 50%;
  animation: channel-orbit-rotate 30s linear infinite;
  transform-origin: 50% 50%;
  z-index: 1;             /* di bawah core */
}

.channel-globe::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px dashed rgba(148, 163, 184, 0.6);
  animation: channel-orbit-rotate 40s linear infinite;
  pointer-events: none;
}

/* each brand logo */
.channel-brand {
  position: absolute;
  width: 90px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 999px;
  /* box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15); */
  overflow: hidden;
}

.channel-brand img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.channel-brand img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  /* counter-rotate so logo stays upright while orbit spins */
  animation: channel-orbit-rotate 30s linear infinite reverse;
}

/* Semua posisi di "cincin luar", tidak melewati tengah */
.channel-brand-pos-1  { top: 8%;  left: 50%; transform: translate(-50%, -50%); }
.channel-brand-pos-2  { bottom: 63%; right: 10%; transform: translate(0, -50%); }
.channel-brand-pos-3  { top: 65%; right: -5%; transform: translate(0, -50%); }
.channel-brand-pos-4  { bottom: 18%; left: 68%; transform: translate(0, 50%); }
.channel-brand-pos-5  { bottom: 10%; right: 22%; transform: translate(-50%, 50%); }
.channel-brand-pos-6  { top: 70%; left: 18%; transform: translate(0, 50%); }
.channel-brand-pos-7  { top: 42%; left: -3%; transform: translate(0, -50%); }
.channel-brand-pos-8  { bottom: 65%; left: 13%; transform: translate(0, -50%); }
.channel-brand-pos-9  { bottom: 42%; left: 83%; transform: translate(0, -50%); }
.channel-brand-pos-10 { top: 68%; right: 80%;  transform: translate(0, -50%); }
/* kalau mau lebih banyak logo, buat pos-9, pos-10 dekat pinggir juga, bukan di tengah */

/* rotation animation */
@keyframes channel-orbit-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px) {
  .channel-globe {
    width: 260px;
    height: 260px;
  }

  .channel-brand {
    width: 60px;
    height: 32px;
  }
}
/* ===== CONTACT SECTION ===== */
.contact-wrapper {
  width: 100%;
  background: #ffffff;
}

.contact-container {
  max-width: 1200px;   /* batas maksimum di desktop */
  width: 100%;         /* di mobile mengikuti lebar layar */
  margin: 0 auto;
  padding: 60px 24px;
  box-sizing: border-box;
}

.contact-title {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.2;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #ff4410;
}

.contact-address {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
  font-family: "Montserrat", sans-serif;
}

.contact-map-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

.contact-map-iframe {
  display: block;
  width: 100%;
}

@media (max-width: 640px) {
  .contact-container {
    padding: 40px 16px;
  }

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

/* ===== GLOBAL MOBILE LAYOUT FIX (hero & main sections) ===== */
@media (max-width: 640px) {
  /* Let hero-wrapper inherit 100vw and transform from desktop to break out of Elementor padding */
  .hero-wrapper {
    height: auto;
    min-height: 520px;
  }

  /* Isi hero melebar mengikuti layar, satu kolom */
  .hero-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 16px 32px; /* Kembalikan padding text agar tidak menempel di tepi, karena background sudah 100vw menembus keluar */
  }

  .hero-left {
    width: 100%;
    max-width: 100%;
  }

  /* Teks hero lebih kecil di HP */
  .hero-heading {
    font-size: 26px;
    line-height: 1.15;
  }


.hero-text-1 {
  padding: 0 0 25px;
  font-size: clamp(24px, 3.5vw, 48px);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  line-height: 1.2;
  color: #faf8f8;
}

.hero-paragraph {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.2;
  color: #e7e8eae6;
}

.hero-button {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hero-btn-primary {
  background: #fc4410;
  color: #ffffff;
  border: none;
}

.hero-btn-primary:hover {
  background: #f46a44;
}

.hero-btn-outline {
  background: #ffffff;
  color: #ed7226;
  border: 1px solid #fc4410;
}

.hero-btn-outline:hover {
  background: #ededed;
}

.hero-right {
  border-radius: 24px;
  overflow: hidden;
}

.hero-image {
  width: 150px;
  border-radius: 20px;
  overflow: hidden;
  display: block;
}

.hero-dots-container {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background-color: transparent;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-dot:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.4);
}

.hero-dot.active {
  width: 32px;
  border-radius: 5px;
  background-color: #fc4410;
  border-color: #fc4410;
}

@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* .hero-heading font-size override removed so clamp() can work properly */
}

/*===== WELCOMING SECTION =====*/
.welcoming-wrapper {
  width: 100%;
  background: #ffffff;
  padding: 40px 24px;
}

.welcoming-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 25px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  /* kiri gambar, kanan teks */
  gap: 60px;
  align-items: center;
}

.welcoming-left {
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
}

.welcoming-left img {
  display: block;
  width: 100%;
  height: 400;
}

.welcoming-right {
  max-width: 520px;
}

.welcoming-heading {
  /* margin: 0 0 16px; */
  padding-bottom: 16px;
  font-size: 40px;
  line-height: 1.2;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #fc4410;
  /* sesuaikan dengan brand kamu */
}

.welcoming-text-1 {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  color: #111827;
}

.welcoming-paragraph {
  padding: 0 0 25px;
  font-size: 15px;
  line-height: 1.6;
  color: #6b7280;
}

/* Responsive: tablet & HP */
@media (max-width: 1024px) {
  .welcoming-container {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .welcoming-right {
    max-width: none;
  }

  .welcoming-heading {
    font-size: 30px;
  }
}

@media (max-width: 640px) {
  .welcoming-heading {
    font-size: 26px;
  }

  .welcoming-paragraph {
    font-size: 14px;
  }
}

/*CSS Bagian Body-2*/
.body-container {
  max-width: 1200px;
  margin: 0 auto;
  /* padding: 30px 0; */
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr);
  align-items: flex-start;
  cursor: pointer;
  /* width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%); */
  gap: 150px;
}

.first-body {
  max-width: 560px;
  margin: 0 auto;
}

.body-label {
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  /* text-transform: uppercase; */
  margin: 0 0 10px;
}

.body-title {
  font-size: 40px;
  line-height: 40px;
  text-align: left;
  color: #4b5563;
  margin: 0 0 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #fc4410;
}

.body-substitle {
  font-size: 23px;
  line-height: 1;
  margin: 0 0 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

.body-text {
  font-size: 15px;
  line-height: 1.5;
  color: #6b7280;
  font-family: "Montserrat", sans-serif;
  margin: 0 0 12px;
  padding-bottom: 12px;
}

/* logo marquee */
.brands-marquee {
  margin: 26px 0;
  overflow: hidden;
}

.brands-marquee-content {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  width: max-content;           /* track is as wide as all logos combined */
  animation: brands-marquee 15s linear infinite;
}

@keyframes brands-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* move by half, because logos are duplicated (ABAB) */
  }
}

.brands-marquee-content img {
  height: 150px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.1);
}

/* === Override brands marquee alignment in Segment Partner === */
.segment-wrapper .segment-container {
  /* keep title centered */
  text-align: center;
}

/* Marquee block itself: align to the left side of the container */
.segment-wrapper .brands-marquee {
  margin: 24px auto 0;      /* vertical spacing, still centered as a block */
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

/* Logos row: start from left, not centered */
.segment-wrapper .brands-marquee-content {
  display: flex;
  justify-content: flex-start;  /* important: no center */
  gap: 120px;                    /* adjust space between logos as you like */
  margin-left: 0;
}

.body-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 640px;
  margin: 20px 0 40px;
}

.body-card:hover {
  transform: translateY(-4px);
  transition:
    opacity 0.10s ease,
    transform 0.10s ease,
    /* box-shadow 0.10s ease; */
}

.body-card {
  width: calc(50% - 22px - 22px);
  min-height: 220px;
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 22px 24px;
  /* box-shadow:0 14px 40px rgba(15, 23, 42, 0.08); */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  text-align: center;
  /* untuk animasi scroll + hover */
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    /* box-shadow 0.3s ease, */
    border-color 0.3s ease;
}

.body-card-badge {
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 2px;
  background: #fc4410;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* setelah masuk viewport (di-set via JS) */
.body-card.in-view {
  opacity: 1;
}

/* efek pop-up saat hover */
.body-card.in-view:hover {
  transform: translateY(-4px);
  /* box-shadow: 0 18px 50px rgba(15, 23, 42, 0.20); */
  border: 1px solid #fc4410;
}

.body-card-label {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.platform-badge-plans {
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 2px;
  background: #fc4410;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.body-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  /* background: #f34328; */
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.body-card-image {
  max-width: 60%;
  max-height: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.body-card-title {
  font-size: 15px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  margin: 10px 0 10px;
  color: #111827;
  text-align: center;
}

.body-card-text {
  font-size: 15px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  line-height: 26px;
  color: #0000007D;
  margin: 0 0 18px;
  flex: 1;
  text-align: center;
}

.body-card-button {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background: #FC4410;
}

.body-card-button:hover {
  opacity: 0.9;
}

@media (max-width:1024px) {
  .body-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width:1024px) {
  .body-cards {
    grid-template-columns: 1fr;
  }
}

/*BODY 2*/
.body-container-2 {
  max-width: 1200px;
  /* margin: 0 auto; */
  padding: 30px 0;
  margin-bottom: 80px;
}

.second-body {
  text-align: center;
  padding: 25px 0;
}

.body-title-2 {
  font-size: 40px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #fc4410;
  text-align: left;
}

.body-title-2-sub {
  font-size: 23px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  align-self: left;
  letter-spacing: 2px;
  color: #0000007D;
  text-align: left;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1024px) {
  .platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* HP (1 kolom penuh) */
@media (max-width: 768px) {
  .platform-grid {
    grid-template-columns: 1fr;
  }
}

.platform-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* justify-content: space-between; */
  background: #ffffff;
  border-radius: 18px;
  padding: 12px 10px;
  /* box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08); */
  border: 1px solid #e5e7eb;
  /* animasi scroll */
  opacity: 0;
  /* transform: translateY(24px); */
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    /* box-shadow 0.3s ease, */
    border-color 0.3s ease;
}

.platform-card.in-view {
  opacity: 1;
}

.platform-card:hover {
  /* transform: translateY(-4px); */
  /* box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18); */
  border-color: #fc4410;
}

/* .platform-icon {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: #ed6328;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
} */
.platform-image {
  max-width: 80px;
  max-height: 80px;
  display: block;
  object-fit: contain;
  margin: 16px;
}

.platform-title {
  font-size: 15px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  margin: 0 0 10px;
  color: #111827;
}

.platform-text {
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  color: #4b5563;
  margin: 8px 15px 18px;
  flex: 1;
}

/* .platform-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background: #fc4410;
}
.platform-button:hover {
  opacity: 0.9;
} */
@media (max-width: 1024px) {
  .platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .platform-grid {
    grid-template-columns: 1fr;
  }

  .body-title-2-sub {
    font-size: 22px;
  }
}

/* ===== DAMPAK DALAM ANGKA ===== */
/* .stats-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.stats-title {
  font-size: 26px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 32px;
  color: #111827;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.stat-item {
  text-align: center;
}
.stat-number {
  font-size: 40px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #0f6abf;
}
.stat-label {
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  color: #4b5563;
  margin-top: 4px;
} */

/* ===== LIMA LANGKAH ===== */
.steps-wrapper {
  background: #f9fafb;
  padding: 25px 0 60px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.steps-container {
  display: grid;
  /* flex-direction: column;
  align-items: center;
  justify-content: center; */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  width: 100%;
  height: auto;
  /* transform: translateX(-50%); */
}

.steps-widget {
  width: 100%;
  min-width: 0;
}

.steps-widget .swiper {
  width: 100%;
  overflow: hidden;
  padding-bottom: 34px;
}

.steps-widget .swiper-wrapper {
  align-items: stretch;
}

.steps-widget .swiper-slide {
  height: auto;
  display: flex;
}

.steps-widget .swiper-slide .step-item {
  width: 100%;
}

.steps-widget .swiper-button-prev,
.steps-widget .swiper-button-next {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
  cursor: pointer;
  backdrop-filter: blur(4px);
  top: 50%;
  transform: translateY(-50%);
}

.steps-widget .swiper-button-prev::after,
.steps-widget .swiper-button-next::after {
  font-size: 14px !important;
}


.step-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

/* Optional: size navigation buttons */
.steps-title {
  font-size: 40px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  margin: 0 0 10px;
  color: #ff4410;
}

.steps-subtitle {
  font-size: 23px;
  color: #6b7280;
  margin: 0 0 32px;
  margin-bottom: 50px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 60px;
}

.step-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.step-icon {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 10px;
  border-radius: 18px;
  background: #ffffff;
  color: #0f6abf;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f65c23;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.step-image {
  margin: 10px auto 10px;
  align-items: center;
  justify-content: center;
  max-width: 120px;
  max-height: 120px;
  display: flex;
  object-fit: contain;
}

.step-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #0f6abf;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .step-badge-check {
  background: #fc4410;
} */
.step-title {
  font-size: 15px;
  font-weight: 600;
  margin: 14px 0 6px;
  color: #111827;
}

.step-text {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
  margin: 15px 40px;
}

/* .steps-footer {
  text-align: center;
  margin-top: 8px;
}
.steps-footer-text {
  font-size: 14px;
  color: #111827;
  margin: 0 0 12px;
} */
/* .steps-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  background: #fc4410;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
} */
/* .steps-cta:hover {
  background: #f98538;
}
.steps-rating {
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
} */

/* ===== REVIEW ===== */
.review-wrapper {
  background: #ffffff;
  padding: 70px 0 80px;
}
.review-container {
  max-width: auto;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.review-title {
  font-size: 40px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 300px 10px;
  color: #111827;
}
.review-text {
  font-size: 15px;
  line-height: 1.5;
  color: #6b7280;
  margin: 0 300px 32px;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  text-align: left;
}
.review-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.review-image-wrap {
  width: 100%;
  height: 190px;
  overflow: hidden;
}
.review-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.review-meta {
  font-size: 11px;
  color: #6b7280;
  margin: 12px 18px 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.review-username {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 18px 10px;
}
.review-text-2 {
  font-size: 13px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 18px 16px;
}
.review-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 16px;
  margin-top: auto;
}
.review-profile {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
}
.review-logo {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
}
.review-hotel-username {
  font-size: 13px;
  color: #111827;
}

/* ===== SEGMENT ===== */
.segment-wrapper {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #ff4410, #f95436);
  padding: 60px 0;
  color: #ffffff;
}

.segment-container {
  max-width: auto;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.segment-title {
  font-size: 28px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 25px;
}

.segment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.segment-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  background: transparent;
  height: 100%;          /* isi tinggi kolom grid */
  box-sizing: border-box;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.segment-chip strong {
  display: block;
  margin-bottom: 4px;
}

.segment-chip-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* hover chip: efek pop up */
.segment-chip:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.segment-chip-icon {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 6px;   /* jarak ke text */
}

/* untuk kartu yang pakai gambar di atas */
.segment-chip-image {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 14px;
  border-radius: 25px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  background: transparent;
  height: 100%;          /* juga isi tinggi kolom grid */
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.segment-chip-image strong,
.segment-chip-image .segment-chip-text {
  text-align: center;         /* teks mengikuti ke bawah, rata tengah */
}

.segment-swiper .swiper-slide {
  display: flex;
  justify-content: center;
}

/* Pagination untuk segment swiper */
.segment-swiper .swiper-pagination {
  position: static;               /* biar ikut flow di bawah slider */
  margin-top: 16px;
  text-align: center;
}

.segment-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: white;  /* oranye muda */
  opacity: 1;                          /* jangan transparan */
  margin: 0 4px !important;
}

.segment-swiper .swiper-pagination-bullet-active {
  background: #f57451;                 /* oranye utama */
  transform: scale(1.2);
}

@media (max-width: 1024px) {
  .stats-grid {
    gap: 24px;
  }

  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .segment-title {
    font-size: 22px;
  }

  .stats-title,
  .steps-title,
  .review-title {
    font-size: 22px;
  }

  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .review-grid {
    grid-template-columns: 1fr;
  }
}

/*====SECTION: FAQ====*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;

}

html, body {
  overflow-x: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
}

body {
  background-color: #ccccccad;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

.faq-wrapper {
  background: #ffffff;
  padding: 25px 0;
}

.faq-container {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  margin-bottom: 80px;
  padding: 0 20px;
  width: 100vw;
  /* height: 45vw; */
  margin-left: 50%;
  transform: translateX(-50%);
}

.faq-header {
  text-align: center;
  margin-bottom: 40px;
}

.faq-header h2 {
  font-size: 35px;
  color: #333;
  margin-bottom: 10px;
}

.faq-header p {
  color: #666;
  font-size: 15px;
}

.faq-accordion {
  width: 100%;
}

.faq-item {
  background: white;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.faq-question {
  padding: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  color: #333;
  transition: background-color 0.3s;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}

.faq-icon {
  font-size: 15px;
  color: black;
  transition: transfrom 0.5s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-question:hover {
  background-color: #f9f9f9;
}

.faq-question i {
  transition: transform 0.3s ease;
  color: #666;
}

.faq-answer {
  display: none;
  padding: 0 20px;
  background-color: #ece5e5;
  border-top: 1px solid #eee;
}

.faq-answer p {
  padding: 15px 0;
  color: #555;
  line-height: 1.6;
}

/* Active state for open accordion */
.faq-item.active .faq-answer {
  display: block;
}

.fa-chevron-up {
  transform: rotate(180deg);
}

/*====SECTION: KONSULTASI====*/
.consult-wrapper {
  background: linear-gradient(360deg, #e5290d, #ed611c);
  padding: 70px 70px;
  color: #ffffff;
  scroll-margin-top: 80px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.consult-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.consult-left {
  max-width: 420px;
}

/* .consult-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.rating-stars {
  display: inline-flex;
  gap: 3px;
  font-size: 16px;
  color: #facc15;
}
.rating-text {
  font-size: 13px;
  margin: 0;
} */
.consult-title {
  font-size: 35px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  margin: 0 0 8px;
  color: #ffffff;
}

.consult-subtitle {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 16px;
  line-height: 1.6;
  color: #ffffff;
}

.consult-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
}

.consult-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.consult-list-icon {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* testimoni */
.consult-review {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.consult-image-wrap {
  width: 150px;
  /* height: 150px; */
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.consult-quote-box {
  font-size: 13px;
  line-height: 1.6;
}

.consult-quote-text {
  margin: 0 0 8px;
}

.consult-author {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  opacity: 0.9;
}

@keyframes brands-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ===== FORM KANAN ===== */
.consult-right {
  background: #ffffff;
  color: #111827;
  border-radius: 24px;
  padding: 30px 20px;
  box-shadow: 0 24px 60px rgba(236, 71, 26, 0.936);
}

.consult-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  /* kanan lebih lebar */
  gap: 20px;
  align-items: center;
}

.consult-form-title {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 18px;
}

.consult-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
}

.consult-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.consult-field span {
  font-weight: 500;
}

.required {
  color: #ef4444;
  margin-left: 3px;
}

.consult-field input {
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 8px 10px;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
}

.consult-field input:focus {
  outline: none;
  border-color: #ed421b;
  box-shadow: 0 0 0 1px rgba(15, 106, 191, 0.25);
}

/* phone row */
.consult-field-inline .phone-row {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 8px;
}

.phone-row select {
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 8px 10px;
  font-size: 13px;
  font-family: "Montserrat", sans-serif;
  background: #ffffff;
}

/* submit */
.consult-submit {
  margin-top: 6px;
  align-self: flex-start;
  padding: 9px 24px;
  border-radius: 999px;
  border: none;
  background: #fc4410;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.consult-submit:hover {
  background: #fa7049;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .consult-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .consult-right {
    max-width: 300px;
    margin: 0 auto;
  }
}

@media (max-width: 1024px) {
  .consult-wrapper {
    padding: 48px 0 56px;
  }

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

  .consult-marquee-content img {
    height: 32px;
  }
}

/*====FOOTER====*/
/* ===== FOOTER ===== */
.site-footer {
  background: #000000;
  border-top: 1px solid #e5e7eb;
  padding: 60px 0 40px;
  font-size: 14px;
  color: #ffffff;
  /* paksa footer full-width meski berada di dalam container boxed */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: 80px;
}

.footer-col {
  min-width: 0;
}

.footer-brand {
  max-width: 260px;
}

.footer-logo {
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 12px;
}

.footer-tagline {
  margin: 0 0 14px;
  font-size: 15px;
  color: #ffffff;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social-link {
  width: 35px;
  height: 35px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
}

.footer-social-link:hover {
  border-color: #ffffff;
  color: #fc872d;
}

.footer-title {
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 10px;
  color: #ffffff;
}

.footer-links-columns {
  display: flex;
  align-items: flex-start;
  gap: 80px; /* jarak antar kolom diperbesar */
  flex-wrap: wrap;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li+li {
  margin-top: 16px;
}

.footer-links a {
  text-decoration: none;
  color: #ffffff;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
}

.footer-links a:hover {
  color: #f88e3d;
}

.footer-bottom {
  border-top: 1px solid #e5e7eb;
  margin-top: 50px;
  padding-top: 30px;
  padding-bottom: 20px;
  text-align: center;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  color: #ffffff;
}

/* responsive */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }
}

@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    max-width: none;
  }
}

/* ============ MOBILE LAYOUT (≤ 768px) ============ */
@media (max-width: 768px) {
  .nav-container {
    max-width: 100%;
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .logo img {
    height: 32px;
  }

  .nav-links {
    width: 100%;
    order: 3;
    margin-left: 0;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .header-right {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .btn-login-mitra,
  .btn-free-consultation {
    margin-left: 0;
  }

  /* Dropdown menyesuaikan lebar layar kecil */
  .dropdown-panel {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    min-width: 100%;
    box-shadow: none;
    margin-top: 8px;
  }

  .dropdown-col-right {
    border-left: none;
    padding-left: 0;
    margin-top: 16px;
  }

  /* Header sedikit dipadatkan */
  .main-header {
    padding: 8px 12px;
  }

  /* Semua container utama: padding kecil & penuh layar */
  .hero-container,
  .body-container,
  .body-container-2,
  .stats-container,
  .steps-container,
  .consult-container,
  .stories-container,
  .footer-container {
    padding: 0 16px;
    max-width: 100%;
  }

  /* Grid utama jadi 1 kolom */
  .hero-container,
  .body-container,
  .body-cards,
  .platform-grid,
  .stats-grid,
  .steps-grid,
  .stories-grid,
  .consult-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Kartu melebar penuh */
  .body-card,
  .platform-card,
  .step-item,
  .story-card,
  .consult-right {
    width: 100%;
  }

  /* Review section teks tidak terlalu sempit di mobile */
  .review-title {
    margin: 0 0 10px;
  }

  .review-text {
    margin: 0 0 32px;
  }
}

/* ===== CHANNEL SECTION ===== */
.channel-wrapper {
  width: 100%;
  background: #ffffff;
}

.channel-container {
  max-width: 1200px;
  padding: 25px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}

/* Kiri: teks */
.channel-left {
  max-width: 500px;
}

.channel-label {
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  color: #fc4410;
  text-transform: uppercase;
}

.channel-title {
  margin: 0 0 15px;
  font-size: 32px;
  line-height: 1.2;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #111827;
}

.channel-subtitle {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.4;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #374151;
}

.channel-text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  font-family: "Montserrat", sans-serif;
  color: #6b7280;
}

/* Responsive: tablet */
@media (max-width: 1024px) {
  .channel-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .channel-left {
    max-width: none;
  }

  .channel-title {
    font-size: 28px;
  }
}

/* Responsive: mobile */
@media (max-width: 640px) {
  .channel-container {
    padding: 25px 16px;
  }

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

  .channel-subtitle {
    font-size: 16px;
  }

  .channel-text {
    font-size: 14px;
  }
}

/* ===== CHANNEL GLOBE RIGHT SIDE ===== */
.channel-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.channel-globe {
  position: relative;
  width: 600px;
  height: 500px;          /* jangan 0px, supaya kelihatan */
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #ffffff, #ffffff);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  overflow: visible;
}

/* core circle in the middle (lebih besar) */
.channel-globe-core {
  position: absolute;
  inset: 35%;             /* sebelumnya 25%, sedikit dibesarkan */
  border-radius: 50%;
  background: #e6211a;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  box-shadow: 0 0 0 6px rgba(15, 23, 42, 0.3);
  z-index: 2;             /* di atas background tapi tetap di dalam orbit */
}

.channel-globe-title {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

/* orbit logos – lebih dekat ke pinggir luar, jauh dari core */
.channel-globe-orbit {
  position: absolute;
  inset: 6%;              /* sebelumnya 10%, jadi lebih besar radius-nya */
  border-radius: 50%;
  animation: channel-orbit-rotate 30s linear infinite;
  transform-origin: 50% 50%;
  z-index: 1;             /* di bawah core */
}

.channel-globe::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px dashed rgba(148, 163, 184, 0.6);
  animation: channel-orbit-rotate 40s linear infinite;
  pointer-events: none;
}

/* each brand logo */
.channel-brand {
  position: absolute;
  width: 90px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 999px;
  /* box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15); */
  overflow: hidden;
}

.channel-brand img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.channel-brand img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  /* counter-rotate so logo stays upright while orbit spins */
  animation: channel-orbit-rotate 30s linear infinite reverse;
}

/* Semua posisi di "cincin luar", tidak melewati tengah */
.channel-brand-pos-1  { top: 8%;  left: 50%; transform: translate(-50%, -50%); }
.channel-brand-pos-2  { bottom: 63%; right: 10%; transform: translate(0, -50%); }
.channel-brand-pos-3  { top: 65%; right: -5%; transform: translate(0, -50%); }
.channel-brand-pos-4  { bottom: 18%; left: 68%; transform: translate(0, 50%); }
.channel-brand-pos-5  { bottom: 10%; right: 22%; transform: translate(-50%, 50%); }
.channel-brand-pos-6  { top: 70%; left: 18%; transform: translate(0, 50%); }
.channel-brand-pos-7  { top: 42%; left: -3%; transform: translate(0, -50%); }
.channel-brand-pos-8  { bottom: 65%; left: 13%; transform: translate(0, -50%); }
.channel-brand-pos-9  { bottom: 42%; left: 83%; transform: translate(0, -50%); }
.channel-brand-pos-10 { top: 68%; right: 80%;  transform: translate(0, -50%); }
/* kalau mau lebih banyak logo, buat pos-9, pos-10 dekat pinggir juga, bukan di tengah */

/* rotation animation */
@keyframes channel-orbit-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px) {
  .channel-globe {
    width: 260px;
    height: 260px;
  }

  .channel-brand {
    width: 60px;
    height: 32px;
  }
}
/* ===== CONTACT SECTION ===== */
.contact-wrapper {
  width: 100%;
  background: #ffffff;
}

.contact-container {
  max-width: 1200px;   /* batas maksimum di desktop */
  width: 100%;         /* di mobile mengikuti lebar layar */
  margin: 0 auto;
  padding: 60px 24px;
  box-sizing: border-box;
}

.contact-title {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.2;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #ff4410;
}

.contact-address {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
  font-family: "Montserrat", sans-serif;
}

.contact-map-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}


  .hero-text-1 {
    font-size: 24px;
  }

  .hero-paragraph {
    font-size: 14px;
    line-height: 1.4;
  }

  /* Section welcoming & body supaya tidak ke-crop di HP */
  .welcoming-container,
  .body-container,
  .body-container-2 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ===== DOCUMENTATION WIDGET ===== */

/* Reset ALL Elementor wrapper layers that cause white gaps */
.elementor-widget-documentation > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}
/* Reset Elementor section & column padding when doc widget is used */
.elementor-section:has(.elementor-widget-documentation) > .elementor-container {
  padding: 0 !important;
  max-width: 100% !important;
}
.elementor-section:has(.elementor-widget-documentation) > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding: 0 !important;
}
/* Fallback for browsers that don't support :has() — set via Elementor section class */
.elementor-section .elementor-widget-documentation {
  width: 100%;
}
/* Ensure dw-main never gets margin-left (flex layout handles positioning) */
.doc-widget .dw-main {
  margin-left: 0 !important;
}

.doc-widget {
  --dw-accent: #F26522;
  --dw-accent-hover: #e05a1a;
  --dw-accent-light: rgba(242,101,34,.1);
  --dw-sidebar-bg: #F26522;
  --dw-sidebar-w: 272px;
  --dw-text: #334155;
  --dw-text-muted: #64748b;
  --dw-text-heading: #0f172a;
  --dw-border: #e2e8f0;
  --dw-radius: 14px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px; /* reset from global * {font-size:15px} */
  line-height: 1.6;
}

/* Override global * { font-size: 15px } from theme FAQ section */
.doc-widget * { box-sizing: border-box; margin: 0; padding: 0; }
.doc-widget .dw-sidebar-group-label { font-size: .65rem !important; }
.doc-widget .dw-sidebar-link { font-size: .85rem !important; }
.doc-widget .dw-sidebar-version span { font-size: .7rem !important; }
.doc-widget .dw-sidebar-version strong { font-size: .8rem !important; }
.doc-widget .dw-s-badge { font-size: .6rem !important; }
.doc-widget .dw-hero .dw-tag { font-size: .72rem !important; }
.doc-widget .dw-hero h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important; line-height: 1.15 !important; }
.doc-widget .dw-hero p { font-size: .95rem !important; }
.doc-widget .dw-section-title { font-size: 1.2rem !important; }
.doc-widget .dw-icon-lg { font-size: 1.1rem !important; }
.doc-widget .dw-thumb-placeholder { font-size: .8rem !important; }
.doc-widget .dw-thumb-placeholder .dw-tp-icon { font-size: 2.2rem !important; }
.doc-widget .dw-video-info h3 { font-size: .9rem !important; }
.doc-widget .dw-video-info p { font-size: .78rem !important; }
.doc-widget .dw-video-duration { font-size: .68rem !important; }
.doc-widget .dw-video-coming { font-size: .65rem !important; }
.doc-widget .dw-video-available { font-size: .65rem !important; }
.doc-widget .dw-footer { font-size: .8rem !important; }
.doc-widget .dw-layout { display: flex; min-height: 80vh; position: relative; }

/* Sidebar */
.doc-widget .dw-sidebar { width: var(--dw-sidebar-w); flex-shrink: 0; background: var(--dw-sidebar-bg); position: sticky; top: 90px; height: calc(100vh - 90px); overflow-y: auto; padding: 1.5rem 0 2rem; z-index: 10; transition: transform .3s; }
.doc-widget .dw-sidebar::-webkit-scrollbar { width: 4px; }
.doc-widget .dw-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 4px; }
.doc-widget .dw-sidebar-version { padding: 0 1.25rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 1rem; }
.doc-widget .dw-sidebar-version span { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.doc-widget .dw-sidebar-version strong { display: block; color: #fff; font-size: .8rem; font-weight: 600; margin-top: .15rem; }
.doc-widget .dw-sidebar-group { margin-bottom: .25rem; }
.doc-widget .dw-sidebar-group-label { padding: .5rem 1.25rem .35rem; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.doc-widget .dw-sidebar-link { display: flex; align-items: center; gap: .65rem; padding: .5rem 1.25rem; color: rgba(255,255,255,.7); font-size: .85rem; font-weight: 500; text-decoration: none; cursor: pointer; border-left: 3px solid transparent; transition: all .2s; }
.doc-widget .dw-sidebar-link:hover { color: #fff; background: rgba(255,255,255,.12); }
.doc-widget .dw-sidebar-link.active { color: #fff; background: rgba(255,255,255,.2); border-left-color: #fff; }
.doc-widget .dw-sidebar-link .dw-s-icon { font-size: 1rem; flex-shrink: 0; }
.doc-widget .dw-sidebar-link .dw-s-badge { margin-left: auto; font-size: .6rem; font-weight: 700; background: #fff; color: var(--dw-accent); padding: 1px 6px; border-radius: 99px; }

/* Main */
.doc-widget .dw-main { flex: 1; min-width: 0; }

/* Hero */
.doc-widget .dw-hero { background: linear-gradient(135deg, #E5290D 0%, #e05a1a 70%, #F26522 50%); padding: 3rem 3rem 2.5rem; }
.doc-widget .dw-hero .dw-tag { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.3); padding: .3rem .85rem; border-radius: 99px; font-size: .72rem; font-weight: 600; margin-bottom: 1rem; }
.doc-widget .dw-hero h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: .6rem; }
.doc-widget .dw-hero h2 em { color: #ffffff; font-style: normal; font-size: 28px; }
.doc-widget .dw-hero p { color: rgba(255,255,255,.85); font-size: .95rem; max-width: 560px; }

/* Content */
.doc-widget .dw-content { padding: 2.5rem 3rem 4rem; background: #fff; }
.doc-widget .dw-section { margin-bottom: 3.5rem; }
.doc-widget .dw-section-title { font-size: 1.2rem; font-weight: 700; color: var(--dw-text-heading); display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 2px solid var(--dw-border); }
.doc-widget .dw-section-title .dw-icon-lg { width: 36px; height: 36px; border-radius: 10px; background: var(--dw-accent-light); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }

/* Video Grid */
.doc-widget .dw-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.doc-widget .dw-video-card { background: #fff; border: 1px solid var(--dw-border); border-radius: var(--dw-radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04); transition: transform .3s, box-shadow .3s; }
.doc-widget .dw-video-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.1); }
.doc-widget .dw-video-thumb { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; cursor: pointer; }
.doc-widget .dw-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-widget .dw-thumb-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #F26522, #c94a10); color: rgba(255,255,255,.7); font-size: .8rem; gap: .4rem; }
.doc-widget .dw-thumb-placeholder .dw-tp-icon { font-size: 2.2rem; }
.doc-widget .dw-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--dw-accent); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .25s; box-shadow: 0 4px 20px rgba(242,101,34,.45); }
.doc-widget .dw-play-btn:hover { background: var(--dw-accent-hover); transform: translate(-50%,-50%) scale(1.1); }
.doc-widget .dw-play-btn svg { fill: #fff; width: 18px; margin-left: 3px; }
.doc-widget .dw-video-duration { position: absolute; bottom: 7px; right: 8px; background: rgba(0,0,0,.75); color: #fff; padding: 2px 7px; border-radius: 4px; font-size: .68rem; font-weight: 600; }
.doc-widget .dw-video-coming { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.6); color: rgba(255,255,255,.7); padding: 2px 8px; border-radius: 4px; font-size: .65rem; font-weight: 600; }
.doc-widget .dw-video-available { position: absolute; top: 8px; left: 8px; background: #16a34a; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: .65rem; font-weight: 600; }
.doc-widget .dw-video-info { padding: 1rem 1.1rem 1.1rem; }
.doc-widget .dw-video-info h3 { color: var(--dw-text-heading); font-size: .9rem; font-weight: 700; margin-bottom: .3rem; }
.doc-widget .dw-video-info p { color: var(--dw-text-muted); font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Footer */
.doc-widget .dw-footer { border-top: 1px solid var(--dw-border); padding: 1.75rem 3rem; text-align: center; color: var(--dw-text-muted); font-size: .8rem; background: #f8f9fb; }
.doc-widget .dw-footer a { color: var(--dw-accent); text-decoration: none; }

/* Mobile overlay */
.doc-widget .dw-sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,.5); }
.doc-widget .dw-sidebar-overlay.active { display: block; }

/* Arrow tab */
.doc-widget .dw-arrow-tab { display: none; position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 201; background: var(--dw-accent); color: #fff; border: none; border-radius: 0 10px 10px 0; width: 28px; height: 56px; cursor: pointer; align-items: center; justify-content: center; box-shadow: 3px 0 12px rgba(242,101,34,.45); transition: left .3s, background .2s; padding: 0; }
.doc-widget .dw-arrow-tab:hover { background: var(--dw-accent-hover); }
.doc-widget .dw-arrow-tab svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.doc-widget .dw-arrow-tab.sidebar-open { left: var(--dw-sidebar-w); }
.doc-widget .dw-arrow-tab.sidebar-open svg { transform: scaleX(-1); }

/* Animation */
@keyframes dwFadeUp { to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 900px) {
  .doc-widget { --dw-sidebar-w: 260px; }
  .doc-widget .dw-content { padding: 2rem 1.5rem 3rem; }
  .doc-widget .dw-hero { padding: 2rem 1.5rem; }
}
@media (max-width: 768px) {
  .doc-widget .dw-arrow-tab { display: flex; }
  .doc-widget .dw-sidebar { position: fixed; top: 0; bottom: 0; left: 0; height: 100vh; z-index: 200; transform: translateX(-100%); }
  .doc-widget .dw-sidebar.open { transform: translateX(0); }
  .doc-widget .dw-main { margin-left: 0 !important; }
  .doc-widget .dw-video-grid { grid-template-columns: 1fr; }
  .doc-widget .dw-hero { padding: 1.5rem 1rem; }
  .doc-widget .dw-content { padding: 1.5rem 1rem 2rem; }
}
/* ===== PARTNER SLIDER (Why Partner With Us) ===== */
.partner-slider-wrapper {
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  background: transparent;
}

.partner-slider-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 60px;
}

.partner-slider-header-left {
  max-width: 600px;
}

.partner-slider-title {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.partner-title-highlight {
  /* Scales smoothly from 32px to 48px starting at 1300px screen width */
  font-size: clamp(32px, 3.69vw, 48px);
  font-weight: 900;
  color: #fc4410;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.5px;
}

.partner-title-suffix {
  /* Scales smoothly from 18px to 28px starting at 1300px screen width */
  font-size: clamp(18px, 2.15vw, 28px);
  font-weight: 700;
  color: #888888;
  line-height: 1;
}

.partner-slider-desc {
  font-size: 16px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}

.partner-slider-nav {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

.partner-btn-prev,
.partner-btn-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #111827;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #111827;
  transition: all 0.3s ease;
}

.partner-btn-prev:hover,
.partner-btn-next:hover {
  background: #fc4410;
  border-color: #fc4410;
  color: #fff;
  transform: scale(1.05);
}

.partner-btn-prev.swiper-button-disabled,
.partner-btn-next.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.partner-card {
  display: flex;
  flex-direction: column;
  height: auto;
  background: transparent; /* No white background */
  border: none;
  border-radius: 0; /* Sharp edges */
  overflow: visible;
}

.partner-card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9; /* Landscape ratio as requested, eliminating the giant gap */
  position: relative;
  overflow: hidden;
  margin-bottom: 16px; /* Tighter gap between image and text */
  border-radius: 0; /* Sharp edges */
  background: transparent;
}

.partner-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

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

.partner-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0; /* Flush with image edges */
}

.partner-card-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px; /* Tighter margin below title */
  line-height: 1.3;
}

.partner-card-text {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 24px;
  flex: 1;
}

.partner-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fc4410;
  text-decoration: none;
  transition: gap 0.3s ease;
}

.partner-card-link:hover {
  gap: 12px;
  color: #d83c0c;
}

@media (max-width: 768px) {
  .partner-slider-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 40px;
  }
}

/* ===== REVIEW AWWWARDS SECTION ===== */
.rev-simple-wrapper {
  padding: 80px 24px;
  max-width: 1300px;
  margin: 0 auto;
  font-family: "Montserrat", sans-serif;
  background: transparent;
}

.rev-section-heading {
  text-align: center;
  margin-bottom: 48px;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.rev-title-highlight {
  /* Scales smoothly from 28px to 42px starting at 1300px screen width */
  font-size: clamp(28px, 3.23vw, 42px);
  font-weight: 800;
  color: #fc4410; /* Orange */
  text-transform: uppercase;
  margin: 0 0 4px 0;
  letter-spacing: -1px;
}

.rev-title-sub {
  /* Scales smoothly from 14px to 20px starting at 1300px screen width */
  font-size: clamp(14px, 1.54vw, 20px);
  font-weight: 400;
  color: #6b7280; /* Grey */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.rev-slider-area {
  position: relative;
  /* Removed padding so cards align perfectly with the container edges before bleeding */
}

.rev-swiper {
  padding-bottom: 60px !important; /* Space for pagination dots */
  overflow: visible !important; /* Allow slides to bleed out to the screen edges */
}

/* Ensure html/body handles the bleeding slider globally (set above) */

.rev-swiper .swiper-wrapper {
  align-items: flex-start; /* Ensures expanding one card doesn't stretch others */
}

.rev-card-simple {
  background: #ffffff;
  border-radius: 16px;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Left align */
  text-align: left; /* Left align */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  height: max-content;
  transition: all 0.4s ease;
}

.rev-simple-header {
  display: flex;
  align-items: center; /* Vertically center logo and text */
  gap: 20px; /* Space between logo and text */
  margin-bottom: 24px;
  width: 100%;
}

.rev-simple-logo {
  height: 60px; /* Slightly smaller for inline layout */
  flex-shrink: 0; /* Prevent logo from shrinking */
  display: flex;
  align-items: center;
}

.rev-simple-logo img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.rev-simple-headings {
  display: flex;
  flex-direction: column;
}

.rev-simple-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
}

.rev-simple-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  margin: 0;
}

.rev-simple-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Changed to left alignment */
  text-align: left; /* Ensure text is left aligned */
  width: 100%;
}

.rev-simple-text-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.rev-simple-text-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 24px; /* Shorter gradient since the box is only 2 lines high */
  background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.rev-simple-text-wrap.expanded::after {
  opacity: 0;
}

.rev-simple-text {
  font-size: 14px;
  line-height: 1.7; /* 23.8px per line */
  color: #4b5563;
  margin: 0;
}

.rev-read-more-btn {
  background: none;
  border: none;
  color: #111827; /* Black color */
  font-size: 14px;
  font-weight: 700; /* Bold */
  margin-top: 16px;
  padding: 0;
  cursor: pointer;
  text-decoration: none; /* Removed underline */
  transition: color 0.3s ease;
}

.rev-read-more-btn:hover {
  color: #4b5563; /* Subtle gray on hover */
}

/* Slider Nav & Pagination */
.rev-nav-prev,
.rev-nav-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #d1d5db; /* Grey circle */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  border: none;
  transition: background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  margin-top: -30px; /* Offset for pagination dots */
}

.rev-nav-prev:hover,
.rev-nav-next:hover {
  background: #9ca3af;
}

.rev-nav-prev {
  left: -20px;
}

.rev-nav-next {
  right: -20px;
}

.rev-nav-prev.swiper-button-disabled,
.rev-nav-next.swiper-button-disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rev-swiper .swiper-pagination {
  bottom: 10px;
}

.rev-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #d1d5db;
  opacity: 1;
  margin: 0 6px !important;
  transition: all 0.3s ease;
}

.rev-swiper .swiper-pagination-bullet-active {
  background: #3b82f6; /* Blue dot matching screenshot */
  width: 8px;
  border-radius: 4px;
}

@media (max-width: 992px) {
  .rev-nav-prev {
    left: -10px;
  }
  .rev-nav-next {
    right: -10px;
  }
}

/* Kembalikan efek blink KHUSUS untuk tombol di Header (legacy requirement) */
.main-header .btn-get-free-trial {
  animation: text-blink 1s steps(2, start) infinite;
}

/* Instruksi Khusus: Hero Button Desktop View */
@media (min-width: 1025px) {
  .hero-wrapper .btn-get-free-trial {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    margin-left: 0 !important;
    font-size: 18px !important;
  }
}