/* No side margins here: this file loads on every page (base.html), and a
   fixed margin-inline on .container pushed it off-screen in RTL whenever
   the screen was narrower than the container + 108px (phones, tablets,
   1280px laptops) - Bootstrap's auto margins already centre it. */
.container{
  margin-block: 32px;
}

.about-page-header h1 {
  color: var(--text-dark);
  font-weight: var(--font-bold);
}

.about-page-header p {
  color: var(--text-secondary);
}

.about-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about-content {
  width: 70%;
  margin-left: auto;
}


.about-item {
  padding: var(--space-5);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
}

.about-item:nth-child(even) {
  background: var(--bg-white);
}

.about-item h2 {
  color: var(--text-dark);
  font-weight: var(--font-bold);
  font-size: 22px;
}

.about-item p {
  color: var(--text-secondary);
  line-height: 1.8;
}


@media (max-width: 768px) {
  .about-item {
    padding: var(--space-4);
  }
}