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

.about-page {
  max-width: 800px;
  margin: 4rem auto;
  padding: 0 2rem;
  text-align: left;
}

.about-page h1 {
  font-family: var(--font-body); /* Rubik One */
  font-size: 3rem;
  color: var(--accent-red); /* About → Red */
  text-transform: lowercase;
  text-align: center; /* Keep this centered to match other headings */
  margin-top: 3rem;
  margin-bottom: 2rem; 
}

/* Consistent section headings (like "my work", etc.) */
.about-page h2 {
  font-family: var(--font-body); /* Match the same font */
  font-size: 2.4rem;             /* Same as used in other sections */
  text-transform: lowercase;     /* lowercase like "my work" */
  color: var(--accent-red);      /* keep red accent */
  text-align: center;            /* center-aligned */
  margin-top: 3rem;
  margin-bottom: 2rem;           /* Increased from 1.5rem */
}

.about-page p {
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: 1.2rem;
  line-height: 1.6;              /* Improved readability */
  text-align: left;
}

/* Links */

.about-page a {
  color: var(--accent-red);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.about-page a:hover {
  color: var(--accent-red-light); /* Optional: if you have a lighter red variant */
}

/* @media (max-width: 768px) {
  .about-page h1,
  .about-page h2 {
    font-size: 2.2rem;
  }
} */