.project-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  column-gap: 140px;
  row-gap: 80px;
  padding-top: 50px;

  @include breakpoint(max-xxl) {
    column-gap: 120px;
    row-gap: 70px;
  }
  @include breakpoint(max-xl) {
    column-gap: 70px;
    row-gap: 50px;
    padding-top: 0px;
  }
  @include breakpoint(max-lg) {
    gap: 50px;
  }
  @include breakpoint(max-md) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.project-box {
  .project-thumb {
    border-radius: 40px;
    @include breakpoint(max-xl) {
      border-radius: 15px;
    }

    img {
      @include transition($transition);
    }
  }
  .project-content {
    padding-top: 25px;

    @include breakpoint(max-md) {
      padding-top: 15px;
    }

    .project-sub-title {
      font-size: 18px;
      line-height: 155.556%;
      margin-bottom: 30px;
      position: relative;
      padding-left: 18px;
      color: $color-primary;

      @include breakpoint(max-md) {
        margin-bottom: 20px;
        padding-left: 13px;
      }
      @include breakpoint(max-sm) {
        font-size: 15px;
      }

      &::before {
        @extend %p-absolute;
        @include transform(translateY(-50%));
        left: 0px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background-color: $color-primary;

        @include breakpoint(max-sm) {
          width: 6px;
          height: 6px;
        }
      }

      i,
      svg {
        font-size: 10px;
        color: inherit;
      }
    }
    .project-title {
      @extend %d-flex, %justify-between, %item-center;
      gap: 5px;
      margin-top: 10px;
      @include breakpoint(max-xl) {
        margin-top: 5px;
      }
      @include breakpoint(max-sm) {
        margin-top: 0px;
      }
    }

    .project-btn {
      color: $color-white;
    }
  }

  // &.move-down {
  //   @include transform(translateY(50px));
  //   @include breakpoint(max-xl) {
  //     @include transform(translateY(25px));
  //   }
  //   @include breakpoint(max-lg) {
  //     @include transform(translateY(0px));
  //   }
  // }
  // &.move-up {
  //   @include transform(translateY(-50px));
  //   @include breakpoint(max-xl) {
  //     @include transform(translateY(-25px));
  //   }
  //   @include breakpoint(max-lg) {
  //     @include transform(translateY(0px));
  //   }
  // }
  // &.move-right {
  //   @include transform(translateX(100px));
  //   @include breakpoint(max-xl) {
  //     @include transform(translateX(50px));
  //   }
  //   @include breakpoint(max-lg) {
  //     @include transform(translateX(0px));
  //   }

  //   &.move-up {
  //     @include transform(translate(100px, -50px));
  //     @include breakpoint(max-xl) {
  //       @include transform(translate(50px, -25px));
  //     }
  //     @include breakpoint(max-lg) {
  //       @include transform(translate(0px, 0px));
  //     }
  //   }
  //   &.move-down {
  //     @include transform(translate(100px, 50px));
  //     @include breakpoint(max-xl) {
  //       @include transform(translate(50px, 25px));
  //     }
  //     @include breakpoint(max-lg) {
  //       @include transform(translate(0px, 0px));
  //     }
  //   }
  // }
  &.move-down {
    margin-top: 50px;
    @include breakpoint(max-xl) {
      margin-top: 25px;
    }
    @include breakpoint(max-lg) {
      margin-top: 0px;
    }
  }
  &.move-up {
    margin-top: -50px;
    @include breakpoint(max-xl) {
      margin-top: -25px;
    }
    @include breakpoint(max-lg) {
      margin-top: 0px;
    }
  }
  &.move-right {
    @include transform(translateX(100px));
    @include breakpoint(max-xl) {
      @include transform(translateX(50px));
    }
    @include breakpoint(max-lg) {
      @include transform(translateX(0px));
    }

    &.move-up {
      @include transform(translate(100px, -50px));
      @include breakpoint(max-xl) {
        @include transform(translate(50px, -25px));
      }
      @include breakpoint(max-lg) {
        @include transform(translate(0px, 0px));
      }
    }
    &.move-down {
      @include transform(translate(100px, 50px));
      @include breakpoint(max-xl) {
        @include transform(translate(50px, 25px));
      }
      @include breakpoint(max-lg) {
        @include transform(translate(0px, 0px));
      }
    }
  }
  &:hover {
    .project-thumb {
      img {
        @include transform(scale(1.05));
      }
    }
    .project-title {
      .project-btn {
        color: $color-primary;
      }
      a {
        &:not(.project-btn) {
          letter-spacing: 0.5px;
        }
      }
    }
  }
}

.agx-project-btn {
  margin-top: 80px;

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

.project2 {
  &.section {
  }
  &__row {
    @include breakpoint(lg) {
      --bs-gutter-x: 1.875rem;
      --bs-gutter-y: 1.875rem;
    }
  }
}
.project-box2 {
  padding-inline: 10px;
  padding-block-start: 10px;
  border-radius: 30px;

  @include breakpoint(max-lg) {
    border-radius: 15px;
  }

  .project-thumb {
    @extend %d-block;
    border-radius: 30px;
    overflow: hidden;

    img {
      @include transition($transition);
    }

    @include breakpoint(max-lg) {
      border-radius: 15px;
    }
  }
  .project-content {
    padding: 20px;
    @extend %d-flex, %justify-between, %item-center;

    .agx-btn2 {
      width: 52px;
      height: 52px;
    }
  }

  &:hover {
    .project-thumb {
      img {
        @include transform(scale(1.1) rotate(3deg));
      }
    }
  }
}
