@use "../../utils" as *;

/*----------------------------------------*/
/*  7.1 about css start
/*----------------------------------------*/

.mtcta {
  &__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    bottom: 0;
    @media #{$md,$xs} {
      position: static;
      width: 100%;
      margin-top: -40px;
      margin-bottom: 60px;
    }
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  &__item {
    @media #{$md,$xs} {
      flex-wrap: wrap;
    }
  }

  &__btn {
    position: relative;

    & a {
      width: 160px;
      height: 160px;
      line-height: 180px;
      border-radius: 100%;
      background: var(--mt-common-black);
      color: var(--mt-common-white);
      font-size: 16px;
      display: inline-block;
      text-align: center;

      & span {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);

        & i {
          @include transform(rotate(-45deg));
          font-size: 20px;
          @include transition(0.5s);
        }
      }

      &:hover {
        color: var(--mt-common-white);
      }
    }
  }
  &__border {
    border-bottom: 1px solid var(--mt-border-3);
  }
  &__2 {
    & .mtcta__subtitle {
      color: #c6f906;
      font-size: 16px;
      font-family: var(--mt-ff-body);
    }
    & .mtcta__title {
      font-size: 150px;
      line-height: 1;
      color: var(--mt-common-white);
      @media #{$md} {
        font-size: 110px;
      }
      @media #{$xs} {
        font-size: 75px;
      }
    }
  }
}
