.about-container {
  width: 100%;
}

/* SECTIONS */

.about-section {
  position: relative;
  overflow: hidden;

  padding: 96px 24px;
  display: flex;
  justify-content: center;
}

.about-section .content {
  width: 100%;
  max-width: 720px;

  position: relative;
  z-index: 2;
}

/* ALIGN */

.about-section.left .content {
  text-align: left;
}

.about-section.right .content {
  text-align: right;
}

/* TEXT */

.about-section h2 {
  margin-bottom: 18px;

  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.4px;
}

.about-section p {
  font-size: 18px;
  line-height: 1.7;
  opacity: 0.82;
}

/* LABEL */

.section-label {
  display: inline-block;
  margin-bottom: 14px;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--accent-color);
  opacity: 0.85;
}

/* HIGHLIGHT */

.highlight {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

/* SHAPES BASE */

.section-shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
}

/* PROBLEM SHAPE (kör) */

.shape-problem {
  width: 260px;
  height: 260px;

  background: var(--accent-green);
  border-radius: 50%;

  left: -80px;
  bottom: 40px;
}

/* PROJECT SHAPE (gradient pill) */

.visual-project {
  padding-right: 120px;
}

.shape-project {
  width: 380px;
  height: 140px;

  right: -100px;
  top: 50%;

  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--accent-purple),
    var(--accent-blue),
    var(--accent-orange)
  );

  transform: translateY(-50%) rotate(32deg);
}

/* DESIGN SHAPE (aszimmetrikus) */

.visual-design {
  padding-left: 120px;
}

.shape-design {
  width: 300px;
  height: 160px;

  left: -120px;
  top: 30%;

  border-radius: 120px 40px 120px 40px;
  background: linear-gradient(
    135deg,
    var(--accent-green),
    var(--accent-blue)
  );

  transform: rotate(-20deg);
}

/* FOOTER */

.about-footer {
  padding: 100px 24px;
  text-align: center;

  font-size: 16px;
  opacity: 0.55;
}

/* MOBILE */

@media (max-width: 768px) {

  .about-section {
    padding: 72px 22px;
  }

  .about-section:first-child {
    padding-top: 120px;
  }

  .about-section.left .content,
  .about-section.right .content {
    text-align: left;
  }

  .about-section h2 {
    font-size: 26px;
  }

  .about-section p {
    font-size: 16px;
  }

  /* shape visszafogás */

  .section-shape {
    opacity: 0.15;
  }

  .shape-project {
    width: 220px;
    height: 80px;
    right: -80px;
  }

  .shape-design {
    display: none;
  }
}