.about-page {
  --about-surface-base: #ffffff;
  --about-surface-soft: #f3f5f7;
  --about-text: #212529;
  --about-heading: #111827;
  --about-border: rgba(17, 24, 39, 0.08);
  --about-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --about-outline: #6c757d;
  overflow: hidden;
}

[data-bs-theme="dark"] .about-page {
  --about-surface-base: #1f2429;
  --about-surface-soft: #2a3036;
  --about-text: #e6edf3;
  --about-heading: #f8fafc;
  --about-border: rgba(255, 255, 255, 0.08);
  --about-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  --about-outline: #aeb6bf;
}

.about-panel {
  color: var(--about-text);
  border-top: 1px solid var(--about-border);
}

.about-page .about-panel:first-child {
  border-top: 0;
}

.about-panel-base {
  background: var(--about-surface-base);
}

.about-panel-soft {
  background: var(--about-surface-soft);
}

.about-panel-inner {
  color: inherit;
}

.about-panel h2,
.about-panel h3 {
  color: var(--about-heading);
}

.about-panel p,
.about-panel strong {
  color: inherit;
  line-height: 1.7;
}

.about-image {
  width: 100%;
  object-fit: cover;
  box-shadow: var(--about-shadow);
}

.about-image-fixed {
  height: 300px;
}

.about-page .btn-outline-secondary {
  color: var(--about-text);
  border-color: var(--about-outline);
}

.about-page .btn-outline-secondary:hover,
.about-page .btn-outline-secondary:focus {
  color: var(--about-surface-base);
  background: var(--about-outline);
  border-color: var(--about-outline);
}

[data-bs-theme="dark"] .about-page .btn-outline-secondary:hover,
[data-bs-theme="dark"] .about-page .btn-outline-secondary:focus {
  color: #111827;
}

@media (max-width: 991.98px) {
  .about-image-fixed {
    height: auto;
  }
}