/* =====================================================
   ABOUT — Сторінка "Про компанію"
   ===================================================== */

.about-page {
  width: 100%;
  min-height: 100vh;

  padding-bottom: 80px;

  @media (min-width: 1020px) {
    padding-bottom: 196px;
    overflow-x: hidden;
  }
}

.about-page__title-section {
  font-weight: 700;
  font-size: clamp(20px, 13.2px + 1.81vw, 48px);
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-dark);
}
/* -------------------------------------------------------
   Декоративні елементи
   ------------------------------------------------------- */
.about-hero__decor-logo {
  display: none;

  @media (min-width: 1020px) {
    display: block;
    position: absolute;
    width: clamp(200px, 22vw, 358px);
    height: auto;
    top: 0;
    left: clamp(80px, 12vw, 208px);
    opacity: 1;
    z-index: 0;
    pointer-events: none;
  }
}

.about-hero__decor--hex-blue,
.about-directions__decor-orange,
.about-form__decor-blue {
  display: none;

  @media (min-width: 1020px) {
    display: block;
    position: absolute;
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
    height: auto;
  }
}

.about-hero__decor--hex-blue {
  width: clamp(600px, 65vw, 1099px);
  top: 0;
  right: 0;
}

.about-directions__decor-orange {
  width: clamp(500px, 60vw, 1099px);
  top: -325px;
  left: 0px;

  @media (min-width: 1920px) {
    top: -210px;
  }
}

.about-form__decor-blue {
  width: clamp(400px, 50vw, 900px);
  bottom: -190px;
  right: 0px;
}

/* -------------------------------------------------------
   Hero секція
   ------------------------------------------------------- */
.about-hero,
.about-directions,
.about-form {
  position: relative;
  z-index: 2;
}

.about-form__title {
  font-size: clamp(20px, 15.15px + 1.3vw, 40px);
}

.about-hero .container,
.about-directions .container,
.about-form {
  position: relative;
  z-index: 2;
  padding-top: clamp(40px, 5vw, 100px);
}

.about-form .container {
  padding-top: clamp(16px, 5vw, 28px);
  padding-bottom: clamp(36px, 5vw, 52px);
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 5vw, 40px);
}

.about-hero__content,
.about-directions__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 80px);
}

.about-hero__text,
.about-directions__text,
.about-form__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.about-hero__title,
.about-directions__title {
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.1;
}

.about-content__image {
  flex: 1;
  border-radius: clamp(16px, 4.35px + 3.11vw, 64px);
  overflow: hidden;
}

.about-content__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------
   Адаптив
   ------------------------------------------------------- */