/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.margin-cls {
  margin-top: 7rem;
}


.about {
  /* tokens */
  --card-radius: 16px;
  --soft-border: color-mix(in srgb, var(--heading-color), transparent 88%);
  --muted-text: color-mix(in srgb, var(--heading-color), transparent 28%);
  --muted-strong: color-mix(in srgb, var(--heading-color), transparent 18%);
  --accent-soft: color-mix(in srgb, var(--accent-color), transparent 88%);
  --accent-softer: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.about .intro-card {
  background: var(--background-color);
  border: 1px solid var(--soft-border);
  border-radius: calc(var(--card-radius) + 4px);
  padding: 32px;
  box-shadow: 0 30px 60px color-mix(in srgb, var(--heading-color), transparent 90%);
}

@media (max-width: 576px) {
  .about .intro-card {
    padding: 22px;
  }
}

.about .intro-card .intro-head {
  margin-bottom: 1rem;
}

.intro-head-sec {
  margin: 1rem 0 .5rem 0 !important;
}

.about .intro-card .intro-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--accent-color);
  background: var(--accent-softer);
}

.about .intro-card .intro-head h2 {
  margin-top: 8px;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.25rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .about .intro-card .intro-head h2 {
    font-size: 1rem;
  }
}

.about .intro-card .intro-body .lead {
  font-size: .8rem;
  color: black;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.about .intro-card .intro-body .lead a {
  color: var(--accent-color);
}

.list-style {
  list-style-type: disc;
  font-size: .8rem;
  color: black;
}

.ol-list-style {
  list-style-type: lower-roman;
  font-size: .8rem;
  color: black;
}