@font-face {
  font-family: "Prompt";
  src: url("/fonts/Prompt-Light.woff2") format("woff2"),
    url("/fonts/Prompt-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Prompt";
  src: url("/fonts/Prompt-Regular.woff2") format("woff2"),
    url("/fonts/Prompt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Prompt";
  src: url("/fonts/Prompt-Bold.woff2") format("woff2"),
    url("/fonts/Prompt-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarabun";
  src: url("/fonts/Sarabun-Light.woff2") format("woff2"),
    url("/fonts/Sarabun-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarabun";
  src: url("/fonts/Sarabun-Regular.woff2") format("woff2"),
    url("/fonts/Sarabun-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarabun";
  src: url("/fonts/Sarabun-Bold.woff2") format("woff2"),
    url("/fonts/Sarabun-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-heading: "Prompt", sans-serif;
  --font-body: "Sarabun", sans-serif;

  --bg-color: #f8fbf9;
  --surface-color: #ffffff;
  --surface-soft: #f7f9fc;
  --page-bg-start: #f8fbf9;
  --page-bg-end: #f2f8f5;
  --page-accent-gold-rgb: 212, 175, 55;
  --page-accent-green-rgb: 11, 83, 69;
  --primary-color: #0b5345;
  --primary-color-rgb: 11, 83, 69;
  --secondary-color: #d4af37;
  --heading-color: #1a1a1a;
  --body-color: #4f4f4f;
  --body-muted-color: #6f7782;
  --placeholder-color-level-1: #8f98a3;
  --placeholder-color-level-2: #aab2bc;
  --link-color: #117864;
  --hover-color: #d4af37;
  --cta-color: #e67e22;
  --cta-text-color: #000000;
  --cta-hover-text-color: #000000;
  --border-soft: rgba(11, 83, 69, 0.12);
  --border-strong: rgba(11, 83, 69, 0.16);
  --focus-ring: rgba(11, 83, 69, 0.12);
  --shadow-soft: 0 8px 24px rgba(11, 83, 69, 0.06);
  --shadow-card: 0 8px 20px rgba(10, 29, 56, 0.25);
  --card-border-accent: #f2a940;
  --card-border-subtle: #d9dde4;
  --brand-danger: #d22e42;
  --brand-info: #1e5ea4;
  --brand-highlight: #1b6fb5;
  --brand-btn-text: #133f74;
  --brand-btn-border: #efad1f;
  --brand-btn-start: #ffd94b;
  --brand-btn-end: #ffc21d;
  --brand-btn-hover-start: #ffe270;
  --brand-btn-hover-end: #ffcb37;
  --brand-btn-hover-text: #0f3158;
  --outline-btn-color: #0b5345;
  --outline-btn-hover-bg: #0b5345;
  --outline-btn-hover-text: #ffffff;
  --premium-badge-bg: rgba(11, 83, 69, 0.92);
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--body-color);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

@media (max-width: 575.98px) {
  .breadcrumb .breadcrumb-item:nth-child(n + 3) {
    flex-basis: 100%;
    padding-left: 0;
  }

  .breadcrumb .breadcrumb-item:nth-child(n + 3)::before {
    content: "";
    display: none;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.nav-link,
.card-title,
.display-4,
.display-5 {
  font-family: var(--font-heading);
  color: var(--heading-color);
}

button,
.btn,
a,
.form-label {
  font-family: var(--font-heading);
}

p,
small,
li,
.text-muted,
.text-body-secondary,
input,
select,
textarea,
.form-control,
.form-select {
  font-family: var(--font-body);
}

.font-heading {
  font-family: var(--font-heading) !important;
}

.font-body {
  font-family: var(--font-body) !important;
}

::placeholder {
  color: var(--placeholder-color-level-2);
  opacity: 1;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--placeholder-color-level-2);
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--hover-color);
}

.fc-blue {
  color: var(--brand-info) !important;
}

.fc-blue:hover,
.fc-blue:focus {
  color: #174f89 !important;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5em;
  color: var(--primary-color) !important;
}

.navbar .nav-link {
  color: var(--heading-color);
}

.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
}

.logo-image {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.logo-text {
  text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.25);
}

@media (min-width: 992px) {
  .desktop-logo-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
  }
}

@media (max-width: 991.98px) {
  .mobile-logo-left {
    margin-right: auto;
  }

  .navbar-toggler {
    border: none;
  }

  .navbar-collapse {
    margin-top: 1em;
    border-top: 1px solid #eee;
    padding-top: 1em;
  }
}

.hero-section {
  min-height: 52vh;
  display: flex;
  align-items: center;
  color: #fff;
}

.hero-section h1 {
  color: #fff;
}

.btn-cta {
  background: var(--cta-color);
  border: 0;
  color: #1A1A1A;
  padding: 1em 2em;
  border-radius: 50px;
  font-weight: 400;
  font-family: var(--font-heading);
  transition: transform .25s ease, background-color .25s ease;
}

button.btn,
a.btn,
input.btn,
.btn {
  font-weight: 400 !important;
}

.btn-cta:hover {
  background: var(--hover-color);
  color: #111111;
  transform: translateY(-2px);
}

.btn-cta:disabled,
.btn-cta.disabled {
  background: #d9dee5;
  border: 1px solid #c8ced7;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

.hero-cta-group .btn {
  min-width: 220px;
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.78);
  color: #ffffff;
  padding: 1em 2em;
  border-radius: 50px;
  font-family: var(--font-heading);
  transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn-hero-secondary:hover,
.btn-hero-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.96);
  color: #0f3158;
  transform: translateY(-2px);
}

.category-card {
  border: 0;
  border-top: 4px solid var(--secondary-color);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.14);
}

.category-card .card-title {
  color: var(--primary-color);
}

footer {
  background: var(--primary-color);
}

.footer-link {
  color: #fff;
  font-family: var(--font-heading);
}

.footer-link:hover {
  color: var(--secondary-color);
}

.footer-contact-list li {
  margin-bottom: .45em;
}

.footer-contact-label {
  display: inline-block;
  min-width: 94px;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
  font-family: var(--font-heading);
}

.social {
  margin-top: 0.8em;
}

.social a {
  margin-left: 0.3em;
}

.social .facebook,
.social .linkedin,
.social .x,
.social .pinterest {
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 6px;
}

.social .facebook {
  background-color: #0966ff;
}

.social .linkedin {
  background-color: #027bb5;
}

.social .x {
  background-color: #1a1a1a;
}

.social .pinterest {
  background-color: #e60223;
}

.dbd-inline {
  padding: 0.4em 0.1em;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  margin: 0 auto;
  display: flex;
  width: 120px;
}

.footer-brand-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-brand-logo {
  height: 58px;
  min-width: 96px;
  padding: 0.5rem 0.9rem;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-brand-logo img {
  display: block;
  max-height: 40px;
  width: auto;
  max-width: 160px;
}


@media (prefers-reduced-motion: reduce) {

  .btn-cta,
  .btn-hero-secondary,
  .category-card {
    transition: none;
  }
}