.about-us {
  &__thumb {
    @extend %p-relative;

    figure {
      border-radius: 20px;
      overflow: hidden;
    }

    .brand-info {
      @extend %p-absolute, %d-flex, %item-center;
      left: -90px;
      top: 40px;
      z-index: 1;
      border-radius: 20px;
      background: rgba($color-6, 0.5);
      box-shadow: 0px 0px 60px 0px rgba($color-black, 0.05);
      backdrop-filter: blur(5px);
      color: $color-white;
      padding: 30px;
      gap: 20px;
      font-size: 30px;
      font-weight: 600;
      line-height: 133.333%;

      @include breakpoint(max-xxl) {
        padding: 15px 20px;
        left: -50px;
        top: 10px;
        border-radius: 10px;
      }
      @include breakpoint(max-lg) {
        // padding: 30px;
        top: 20px;
        left: -60px;
        font-size: 25px;
      }
      @include breakpoint(max-md) {
        padding: 15px 20px;
        left: -30px;
        gap: 0;
      }

      @include breakpoint(max-sm) {
        position: relative;
        left: unset;
        top: unset;
        margin: 20px 0;
        gap: 20px;
      }

      svg,
      i {
        width: 65px;
        height: 65px;
        color: $color-primary;
      }
    }
    .brand-review {
      @extend %d-inline-flex, %item-center, %p-absolute;
      gap: 30px;
      border-radius: 20px;
      background: rgba($color-6, 0.5);
      box-shadow: 0px 0px 60px 0px rgba($color-black, 0.05);
      backdrop-filter: blur(5px);
      padding: 18px 30px;
      right: -20px;
      bottom: 40px;

      @include breakpoint(max-xxl) {
        padding: 15px 20px;
        border-radius: 10px;
      }

      @include breakpoint(max-sm) {
        position: relative;
        right: unset;
        bottom: unset;
        width: 100%;
        gap: 20px;
      }

      svg {
        width: 65px;
        height: 65px;
        flex-shrink: 0;
        color: $color-primary;
      }

      .total-review {
        @extend %d-inline-flex, %item-center;
        line-height: 1;
      }
      p {
        color: $color-white;
      }
    }
  }
}

.about-us2 {
  &.section {
  }
  &__thumb {
    border-radius: 14px;
    overflow: hidden;
  }
  &__content {
    .arrow-icon {
      @extend %p-absolute;
      bottom: 100%;
      right: 0;
    }
    p {
      color: rgba($color-white, 0.74);
      font-size: $fs-18;
    }
    .key-points {
      margin-top: 15px;

      @include breakpoint(max-md) {
        margin-top: 10px;
      }
      ul {
        li {
          @extend %d-flex, %item-center;
          gap: 15px;
          color: $color-white;
          @include breakpoint(max-md) {
            gap: 10px;
          }

          &:not(:last-of-type) {
            margin-bottom: 10px;

            @include breakpoint(max-md) {
              margin-bottom: 5px;
            }
          }
        }
      }
    }

    [class^="agx-btn"] {
      margin-top: 40px;

      @include breakpoint(max-md) {
        margin-top: 30px;
      }
    }
  }
}

.about-us3 {
  &.section {
    .section-sub-title {
      @extend %d-block;
      border-bottom: 1px solid rgba($color-white, 0.14);
      padding-bottom: 10px;
    }
  }
  &__info {
    p.text {
      margin-top: 14px;

      @include breakpoint(max-md) {
        margin-top: 10px;
      }
    }
    .info-boxes {
      @extend %d-inline-flex, %item-center;
      margin-top: 50px;

      @include breakpoint(max-md) {
        margin-top: 30px;
      }
      .info-box {
        @extend %p-relative;
        .info-count {
          @extend %d-flex, %item-center;
          font-family: $ff-body;
          font-weight: 500;
          line-height: 1;

          @include breakpoint(xl) {
            font-size: 100px;
          }
          > * {
            font-size: inherit;
            font-family: inherit;
            font-weight: inherit;
            line-height: inherit;
          }

          .odometer-inside {
            @extend %d-flex, %item-center, %no-wrap;
            > * {
              @extend %d-flex, %item-center, %no-wrap;
            }
          }
        }

        &:first-of-type {
          padding-right: 57px;

          &::after {
            @extend %p-absolute;
            right: 0;
            top: 0;
            width: 1px;
            height: 100%;
            background: linear-gradient(
              to bottom,
              $color-1 0%,
              $color-primary 50%,
              $color-1 100%
            );
            opacity: 0.6;
          }
        }
        &:last-of-type {
          padding-left: 57px;
        }

        p {
          margin-top: 5px;
          @include breakpoint(lg) {
            max-width: 210px;
            margin-top: 10px;
          }
        }
      }
    }
  }
  &__thumb {
    border-radius: 14px;
    overflow: hidden;
  }
}

.business-goals {
  &__boxes {
    @extend %d-grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;

    @include breakpoint(max-xl) {
      gap: 20px;
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    @include breakpoint(max-lg) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @include breakpoint(max-sm) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  &__info {
    @extend %d-flex, %flex-col;
    height: 100%;
    p {
      margin-top: 20px;
      color: $color-5;
      font-size: 18px;
      font-weight: 400;

      @include breakpoint(xl) {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
    }
    .agx-btn {
      margin-top: 40px;
      @extend %w-content;
    }
  }
}
.goal-box {
  padding: 25px;
  border-radius: 14px;

  svg {
    @include transition($transition);
    color: $color-white;
  }

  figure {
    @extend %d-block, %shrink-0;
    @include transform(scale(0));
    @include transition($transition);
    width: 177px;
    height: 171px;
    background: rgba($color: $color-white, $alpha: 0.14);
    margin-inline: auto;
    margin-block: 24px 28px;

    // clip-path: path(
    //   'M166.926 170.489L161.633 169.1C113.643 156.828 63.4675 156.828 15.5933 169.1L10.1844 170.489C5.35094 171.763 -2.24455 171.136 0.632566 162.964C18.2401 112.951 18.2401 58.1909 0.632566 8.06192C-1.09351 -0.295081 5.35094 -0.736706 10.2995 0.536779L18.5854 2.73643C64.5032 14.6609 112.723 14.6609 158.525 2.73643L166.811 0.536779C171.645 -0.736706 178.435 -0.295081 176.478 8.06192C160.252 58.4225 160.252 112.719 176.478 163.08C179.01 170.938 171.76 171.763 166.926 170.489Z'
    // );
    clip-path: url(#about-us3-mask);

    img {
      object-fit: cover;
    }
  }

  .title {
    font-weight: 600;
    line-height: 141.667%;
  }
  p {
    color: rgba($color-white, 0.74);
    font-size: 18px;
    margin-top: 8px;
  }

  &:hover,
  &.active {
    svg {
      color: $color-primary;
    }
    figure {
      @include transform(scale(1));
    }
  }
}

.about-us4 {
  &__thumb {
    @extend %p-relative;
    border-radius: 14px;
    overflow: hidden;
  }
  &__statistic {
    @extend %p-absolute, %text-center;
    left: 0;
    bottom: 0;
    padding: 15px 26px;
    border-radius: 0px 12px;

    &::before {
      @extend %p-absolute;
      left: 50%;
      top: 0;
      @include transform(translateX(-50%));
      width: 158px;
      height: 3px;
      background-color: $color-primary;
    }

    .info-count {
      & * {
        line-height: 1;
      }
      @extend %d-inline-flex, %item-center;
      @include breakpoint(xl) {
        font-size: 80px;
      }
      @include breakpoint(xxl) {
        font-size: 90px;
      }
      @include breakpoint(xxxl) {
        font-size: 80px;
      }
    }
    p {
      white-space: nowrap;
    }
  }
  &__content {
    @extend %d-flex, %flex-col;
    height: 100%;

    .content-info {
      @extend %p-relative;
      height: 100%;
      margin-top: 40px;
      padding-left: 60px;

      &::before {
        @extend %p-absolute;
        width: 1px;
        height: 100%;
        left: 0;
        top: 0;
        background: linear-gradient($color-black, $color-white);
      }

      p {
        @extend %flex-grow-1;
      }
      a {
        @extend %w-content;
        margin-top: auto;
      }
      @include breakpoint(max-xxl) {
        padding-left: 50px;
      }
      @include breakpoint(max-xl) {
        padding-left: 40px;
      }
      @include breakpoint(max-lg) {
        padding-left: 30px;
      }
      @include breakpoint(max-md) {
        margin-top: 20px;
        padding-left: 20px;
      }
      @include breakpoint(max-sm) {
        padding-left: 20px;
      }
      .btn-wrapper {
        gap: 20px;
        svg {
          animation: rotate 8s linear infinite;
          @include breakpoint(max-xl) {
            width: 120px;
            height: 120px;
          }
          @include breakpoint(max-sm) {
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }
}

.about-us5 {
  &__info {
    @extend %d-flex, %justify-between, %item-end, %flex-wrap;
    gap: 25px;

    @include breakpoint(xl) {
      max-width: 580px;
      margin-left: auto;
    }
    @include breakpoint(max-xl) {
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: end;
    }
    @include breakpoint(max-md) {
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: end;
    }
    @include breakpoint(max-sm) {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: start;
    }
    .experience {
      @extend %shrink-0, %d-grid, %place-center, %p-relative;
      width: 246px;
      height: 246px;
      background: linear-gradient(180deg, $color-white 0%, $color-1 276.22%);
      border: 1.5px solid $color-primary;
      border-radius: 100%;

      @include breakpoint(max-xxl) {
        width: 180px;
        height: 180px;
      }
      @include breakpoint(max-lg) {
        width: 150px;
        height: 150px;
      }

      .counter-item {
        color: $color-1;
        font-weight: 600;
        line-height: 1;

        @include breakpoint(lg) {
          font-size: 80px;
        }
        @include breakpoint(xl) {
          font-size: 100px;
        }
        @include breakpoint(xxl) {
          font-size: 120px;
        }
        @include breakpoint(xxxl) {
          font-size: 146px;
        }
      }

      .add-experience {
        @extend %p-absolute, %shrink-0, %d-grid, %place-center;
        width: 64px;
        height: 64px;
        border-radius: 100%;
        background-color: $color-2;
        color: $color-white;
        top: 0;
        right: 0;
        font-size: 40px;

        @include breakpoint(max-xxl) {
          width: 50px;
          height: 50px;
          font-size: 35px;
        }
        @include breakpoint(max-lg) {
          width: 45px;
          height: 45px;
          font-size: 30px;
        }
        i {
          @include transition($transition-3);
          -webkit-transform-origin: center center;
          -ms-transform-origin: center center;
          transform-origin: center center;
        }

        &:hover {
          i {
            @include transform(rotate(90deg));
          }
        }
      }
    }
    .experience-info {
      max-width: 270px;
      .title {
        font-size: 22px;
        font-weight: 500;
      }
      p {
        font-size: $fs-base;
        line-height: 175%;
        margin-top: 15px;

        @include breakpoint(max-sm) {
          margin-top: 10px;
        }
      }
    }
  }
  &__item {
    @extend %p-relative, %d-flex;
    gap: 34px;
    padding-top: 25px;
    @include transition($transition);

    @include breakpoint(max-md) {
      gap: 20px;
    }

    &::before,
    &::after {
      @extend %p-absolute;
      left: 0;
      top: 0;
      height: 1px;
      width: 100%;
      background-color: rgba($color-white, 0.1);
      @include transition($transition);
    }
    &::after {
      background-color: $color-white;
      width: 0;
    }

    svg,
    i {
      @extend %shrink-0;
      color: $color-white;
    }

    p {
      color: rgba($color-white, 0.7);
      font-family: $ff-title;
      font-size: 22px;
      font-weight: 500;
      line-height: 145.455%;

      span {
        @extend %d-inline-block;
        color: $color-white;
        margin-right: 5px;
      }
    }

    &:hover,
    &.active {
      &::after {
        width: 100%;
      }
    }
  }
}

.about-us6 {
  &.section {
    .section-header {
      margin-left: auto;
      max-width: 1000px;
      .section-title {
        @include breakpoint(xl) {
          font-size: 55px;
        }
      }
    }
  }
}
