/* ==========================================================================
   Services page
   ========================================================================== */

.page-services {
  --services-primary: #0098dc;
  --services-muted: #a6a6a6;

  --page-breadcrumb-top-space: 21.4px;
  --page-breadcrumb-bottom-space: 42.24px;
}

/*
 * พื้นหลังเฉพาะหน้าบริการอื่นๆ
 * ========================================================================== */

.page-services .services-page {
  width: 100%;
  min-height: 0;
  overflow-x: clip;

  background-image: url("https://muangthaicap.com/mtc-public/assets/images/services/service.webp");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Navigation path
   ========================================================================== */

.page-services .services-breadcrumb {
  width: 100%;
  height: auto;
  background: #ffffff;
}

.page-services .services-breadcrumb__inner {
  display: flex;
  height: auto;
  align-items: flex-start;
  padding-block:
    var(--page-breadcrumb-top-space)
    var(--page-breadcrumb-bottom-space);
}

.page-services .services-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-brand-medium);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.page-services .services-breadcrumb__home {
  color: var(--services-muted);
  transition: color 180ms ease;
}

.page-services .services-breadcrumb__home:hover,
.page-services .services-breadcrumb__home:focus-visible {
  color: var(--services-primary);
}

.page-services .services-breadcrumb__home:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.page-services .services-breadcrumb__separator {
  color: #404040;
}

.page-services .services-breadcrumb__current {
  color: var(--services-primary);
}

/* เนื้อหาบริการอื่นๆ
   ========================================================================== */

.page-services .other-services__list li {
  font-size: 13.05px;
  line-height: 1.35;
}

.page-services .other-services {
  grid-template-rows: none;
  padding-block: 64px 76px;

  background-color: transparent;
  background-image: none;
}

.page-services .other-services__inner {
  grid-row: auto;
}

@media (max-width: 1200px) {
  .page-services .other-services {
    padding-block:
      clamp(52px, 6vw, 64px)
      clamp(60px, 7vw, 72px);
  }

  .page-services .other-services__content {
    align-self: start;
    transform: none;
  }

  .page-services .other-services__list {
    margin-top: 20px;
  }

  .page-services .other-services__list li {
    font-size: 14.5px;
    line-height: 1.15;
  }
}

@media (max-width: 1024px) {
  .page-services {
    --page-breadcrumb-bottom-space: 38.72px;
  }
}

/* Responsive
   ========================================================================== */

@media (max-width: 700px) {
  .page-services {
    --page-breadcrumb-bottom-space: 36.08px;
  }

  .page-services .other-services {
    padding-block: 42px 52px;
  }

  .page-services .services-breadcrumb__list {
    gap: 9px;
    font-size: 15px;
  }

  .page-services .other-services__list {
    margin-top: 20px;
  }

  .page-services .other-services__list li {
    font-size: 14.4px;
    line-height: 1.45;
  }
}

@media (max-width: 420px) {
  .page-services .other-services {
    padding-block: 36px 44px;
  }
}