@use "../abstracts" as *;

.project {
  &__header {
    margin-bottom: rem(50);
  }

  &__subtitle {
    font-size: rem(16);
    font-weight: 700;
    color: $color-primary;
    text-transform: uppercase;
    display: block;
    margin-bottom: rem(15);
    letter-spacing: rem(1);

    &::before {
      content: ">>>";
      margin-right: rem(10);
    }
  }

  &__title {
    font-size: rem(42);
    font-weight: 800;
    color: $color-heading;
    line-height: 1.2;
    margin: 0;

    @media (max-width: 767px) {
      font-size: rem(32);
    }
  }

  &__item {
    position: relative;
    border-radius: rem(20);
    overflow: hidden;
    cursor: pointer;

    &:hover {
      .project__hover-card {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 12%);
      }

      .project__img img {
        transform: scale(1.1);
      }
    }
  }

  &__img {
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
      transition: transform 0.5s ease;
      display: block;
    }
  }

  &__hover-card {
    position: absolute;
    bottom: rem(20);
    left: 50%;
    width: 90%;
    background: #fff;
    padding: rem(30);
    border-radius: rem(15);
    box-shadow: 0 rem(20) rem(40) rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -15%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    max-width: 420px;

    .tag {
      display: inline-block;
      background: $color-primary;
      color: #fff;
      font-size: rem(12);
      font-weight: 700;
      padding: rem(8) rem(20);
      border-radius: rem(8);
      margin-bottom: rem(15);
      text-transform: uppercase;
    }

    h3 {
      font-size: rem(22);
      font-weight: 700;
      color: $color-heading;
      margin-bottom: rem(10);
      transition: color 0.3s ease;

      &:hover {
        color: $color-primary;
      }
    }

    p {
      font-size: rem(14);
      color: $color-text2;
      margin-bottom: 0;
      line-height: $line-height-base;
    }

    .arrow-btn {
      position: absolute;
      top: 25px;
      right: 25px;
      width: rem(75);
      height: rem(50);
      background: #1C1B21;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 100px;
      font-size: rem(18);
      transition: all 0.3s ease;
      text-decoration: none;

      @media (max-width: 575px) {
        font-size: rem(12);
        width: rem(50);
        height: rem(35);
      }

      &:hover {
        background: $color-primary;
        color: #fff;
      }
    }
  }

  // Large Organic Button Style
  .organic-btn {
    display: inline-flex;
    align-items: center;
    background: $color-primary;
    color: #fff;
    font-size: rem(14);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: rem(1);
    border-radius: rem(35);
    height: rem(65);
    padding: 0 rem(5) 0 rem(35);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    .btn-text {
      flex: 1;
      margin-right: rem(25);
    }

    .btn-icon {
      background: #000;
      width: rem(90);
      height: rem(55);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 40% 60% 40% 60% / 50%;
      font-size: rem(20);
      transition: all 0.3s ease;
    }

    &:hover {
      background: $color-heading;

      .btn-icon {
        background: $color-primary;
      }
    }
  }
}