// main: ../main.scss
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  .about-content {
    position: relative;
    z-index: 1;

    .about-label {
      display: inline-block;
      padding: 0.5rem 1rem;
      background-color: color-mix(in srgb, var(--accent-color) 15%, transparent);
      color: var(--accent-color);
      border-radius: 2rem;
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .about-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
      line-height: 1.2;

      .text-underline {
        position: relative;
        display: inline-block;

        // z-index: 1;
        &::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0.25rem;
          width: 100%;
          height: 0.5rem;
          background-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
          z-index: -1;
        }
      }
    }

    .about-description {
      font-size: 1rem;
      margin-bottom: 2rem;
    }

    .about-points {
      .about-point {
        margin-bottom: 1.5rem;

        .point-number {
          font-size: 1.25rem;
          font-weight: 700;
          color: var(--accent-color);
          margin-bottom: 0.5rem;
          display: block;
        }

        .point-title {
          font-size: 1.25rem;
          font-weight: 600;
          margin-bottom: 0.5rem;
        }

        .point-description {
          font-size: 0.875rem;
        }
      }
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      background-color: color-mix(in srgb, var(--accent-color) 15%, transparent);
      border-radius: 50%;
      z-index: -1;
    }

    &::before {
      width: 10rem;
      height: 10rem;
      top: 3rem;
      left: 15rem;
    }

    &::after {
      width: 5rem;
      height: 5rem;
      bottom: -2.5rem;
      right: 2.5rem;
    }
  }

  .about-image {
    position: relative;
    z-index: 1;

    img {
      border-radius: 1rem;
      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    }

    &::before {
      content: '';
      position: absolute;
      width: 50%;
      height: 50%;
      bottom: -1rem;
      right: -1rem;
      background-color: color-mix(in srgb, var(--accent-color) 15%, transparent);
      border-radius: 1rem;
      z-index: -1;
    }
  }

  @media (max-width: 991.98px) {
    .about-content {
      margin-bottom: 3rem;
    }
  }
}