body { overflow-x: hidden; }

/* ---- Brand Colors ---- */

/* Header Menu - pakai brand teal */
.nav-link:hover,
.nav-link.active {
  color: rgb(18, 171, 168) !important;
}

/* --bs-brand */
:root {
    --bs-brand: rgb(18, 171, 168);
}

/* Play button - pakai brand teal */
.play-btn {
  background-color: rgba(18, 171, 168, 0.85);
}

/* Pulse animation circle */
.play-btn::before {
  border-color: rgb(18, 171, 168);
}

/* Fix missing gutter classes (not generated by SCSS utilities override) */
.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.gx-2 { --bs-gutter-x: 0.5rem; }
.gx-4 { --bs-gutter-x: 1.5rem; }
.gy-6 { --bs-gutter-y: 1.5rem; }
.gy-8 { --bs-gutter-y: 2rem; }

/* Circle decorative BG */
.circle-bg {
  background-color: rgba(18, 171, 168, 0.05);
}

/* Teal - Brand Primary */
.text-brand { color: rgb(18, 171, 168) !important; }
.bg-brand { background-color: rgb(18, 171, 168) !important; }
.border-brand { border-color: rgb(18, 171, 168) !important; }
.link-brand { color: rgb(18, 171, 168) !important; }
.link-brand:hover { color: rgb(14, 145, 142) !important; }

.btn-brand {
  color: #fff !important;
  background-color: rgb(18, 171, 168) !important;
  border-color: rgb(18, 171, 168) !important;
}
.btn-brand:hover {
  color: #fff !important;
  background-color: rgb(14, 145, 142) !important;
  border-color: rgb(14, 145, 142) !important;
}

.badge-brand {
  color: #fff;
  background-color: rgb(18, 171, 168);
}

.bg-brand.bg-opacity-10 { background-color: rgba(18, 171, 168, 0.1) !important; }
.bg-brand.bg-opacity-25 { background-color: rgba(18, 171, 168, 0.25) !important; }
.border-brand.border-opacity-25 { border-color: rgba(18, 171, 168, 0.25) !important; }

/* Gold - Complementary */
.text-gold { color: rgb(254, 211, 47) !important; }
.bg-gold { background-color: rgb(254, 211, 47) !important; }
.border-gold { border-color: rgb(254, 211, 47) !important; }

.btn-gold {
  color: #000 !important;
  background-color: rgb(254, 211, 47) !important;
  border-color: rgb(254, 211, 47) !important;
}
.btn-gold:hover {
  color: #000 !important;
  background-color: rgb(230, 188, 32) !important;
  border-color: rgb(230, 188, 32) !important;
}

.badge-gold {
  color: #000;
  background-color: rgb(254, 211, 47);
}

.bg-gold.bg-opacity-10 { background-color: rgba(254, 211, 47, 0.1) !important; }
.border-gold.border-opacity-25 { border-color: rgba(254, 211, 47, 0.25) !important; }

/* Stone - Neutral */
.text-stone { color: rgb(110, 108, 109) !important; }
.bg-stone { background-color: rgb(110, 108, 109) !important; }
.border-stone { border-color: rgb(110, 108, 109) !important; }

.btn-stone {
  color: #fff !important;
  background-color: rgb(110, 108, 109) !important;
  border-color: rgb(110, 108, 109) !important;
}
.btn-stone:hover {
  color: #fff !important;
  background-color: rgb(90, 88, 89) !important;
  border-color: rgb(90, 88, 89) !important;
}

.badge-stone {
  color: #fff;
  background-color: rgb(110, 108, 109);
}

.bg-stone.bg-opacity-10 { background-color: rgba(110, 108, 109, 0.1) !important; }
.border-stone.border-opacity-25 { border-color: rgba(110, 108, 109, 0.25) !important; }