/* ===== About Page Specific Styles ===== */

.about-content {
  max-width: 720px; margin: 0 auto;
  padding: 7rem 2rem 4rem;
}
.about-content h1 {
  font-size: 2.2rem; font-weight: 800; color: var(--primary);
  margin-bottom: 2rem; letter-spacing: -0.5px;
}
.about-content p {
  font-size: 1.05rem; color: var(--text); line-height: 1.8;
  margin-bottom: 1.25rem;
}
.about-content .lead {
  font-size: 1.15rem; color: var(--text-light); font-weight: 400;
  margin-bottom: 2rem;
}
.about-content .highlight {
  color: var(--primary); font-weight: 600;
}
.about-content a { color: var(--accent); }
.about-content a:hover { text-decoration: none; }
.cta-link {
  display: inline-block; margin-top: 1.5rem;
  color: var(--accent); font-weight: 600; font-size: 1.05rem;
  text-decoration: none; border-bottom: 2px solid var(--accent);
  padding-bottom: 2px; transition: opacity 0.2s;
}
.cta-link:hover { opacity: 0.8; }
.profile-img {
  width: 180px; height: 180px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  margin-bottom: 2rem;
  border: 4px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.nav-back {
  color: var(--text-light); text-decoration: none; font-size: 0.9rem; font-weight: 500;
  transition: color 0.2s;
}
.nav-back:hover { color: var(--primary); }
html[dir="rtl"] .about-content { text-align: right; }