.services {
  position: relative;
}
.services.bg-black {
  --text-color: rgba(255, 255, 255, 0.80);
  --title-color: var(--white);
  --card-bg: rgba(255, 255, 255, 0.10);
  --heading-color: var(--white);
  --cat-color: var(--white);
}
.services.bg-off-white {
  --card-bg: var(--white);
  --heading-color: var(--brand-800);
  --cat-color: var(--grey-500);
}
.services.bg-off-white .service-box-icon {
  margin-bottom: 2rem;
}
.services.bg-off-white .service-box h3 {
  margin-bottom: 0.5rem;
}
.services h2 {
  margin-bottom: 2.5rem;
}
@media (min-width: 992px) {
  .services h2 {
    margin-bottom: 3rem;
  }
}
@media (max-width: 991px) {
  .services .row {
    --bs-gutter-x: 1rem;
  }
}
.services .col-12 {
  margin-bottom: 1.5rem;
}
.services .col-6 {
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  .services .col-6 {
    margin-bottom: 1.5rem;
  }
}
.services .service-box {
  background: var(--card-bg);
}
.services .service-box-icon {
  margin-bottom: 2.5rem;
}
.services .service-box-icon img {
  width: 2.5rem;
  height: auto;
}
@media (min-width: 992px) {
  .services .service-box-icon img {
    width: 3rem;
  }
}
.services .service-box-category {
  border-bottom: 1px solid var(--grey-200);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cat-color);
}
.services .service-box h3 {
  margin-bottom: 1rem;
  color: var(--grey-900);
  font-size: 1.125rem;
  letter-spacing: -0.0112rem;
}
@media (min-width: 992px) {
  .services .service-box h3 {
    font-size: 1.25rem;
    letter-spacing: -0.0125rem;
  }
}
.services .service-box:has(.service-box-category) h3 {
  color: var(--brand-800);
}
.services .service-box p:not(.service-box-category) {
  margin-bottom: 0;
  color: var(--text-color);
}
.services .service-box p:not(.service-box-category):not(:last-child) {
  margin-bottom: 0.5rem;
}