/* ─────────────────────────────────────
ABOUT PAGE - CSS
────────────────────────────────────── */

.about-page-container {
  max-width: 1250px;
  margin: auto;
}

#about-gradient {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  padding: 95px 0 115px;
}

.about-intro {
  max-width: 1100px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  border-radius: 28px;
  padding: 42px 52px;
  font-size: 1.38rem;
  line-height: 1.58;
  color: #f5f5f5;
  margin: 0 auto;
}

/* cards */
.about-row {
  row-gap: 40px;
}

.about-row > div {
  display: flex;
}

.about-card {
  background: #fff;
  border-radius: 32px;
  padding: 42px 52px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  height: 100%;
  position: relative;
  transition: 0.3s ease;
}

.about-card:hover {
  transform: translateY(-6px);
}

/* card glow */
.about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 38px;
  background: rgba(0, 0, 0, 0.03);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.03);
  z-index: -1;
}