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

/*----------------------------------------*/
/*  7.1 Fact css start
/*----------------------------------------*/

.mtfact {
  &__item {
    padding: 60px 50px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    @include transition(.4s);
    margin-right: -1px;
    margin-top: -50px;
    @media #{$lg, $md, $xs} {
      margin-top: -31px;
    }
    &:hover {
      background: var(--mt-theme-1);
      border-color: var(--mt-theme-1);

      & .mtfact__count {
        color: var(--mt-common-black);
      }

      & .mtfact__number {
        color: var(--mt-common-black);
      }

      & .mtfact__content {
        & p {
          color: var(--mt-common-black);
        }
      }
    }

    &-2 {
      background-color: #fcd782;
      padding: 32px;

      &:hover {
        & img {
          // -webkit-filter: brightness(0) invert(1);
          // filter: brightness(1) invert(1);
        }
      }
      & img {
        @include transition(.5s);
        overflow: hidden;
      }

      & .mtfact__count {
        font-size: 62px;
        font-weight: 700;
        color: var(--mt-common-black);
      }

      & p {
        font-size: 24px;
        font-weight: 500;
        margin-top: -25px;
        color: var(--mt-common-black);
      }
    }
  }
  &__wrap {
	z-index: 2;
	position: relative;
}
  &__count {
    color: var(--mt-common-white);
    font-size: 52px;
    @include transition(.4s);
  }

  &__number {
    font-size: 20px;
    color: var(--mt-common-white);
    @include transition(.4s);
  }

  &__content {
    & p {
      color: rgba(255, 255, 255, 0.8);
      @include transition(.4s);
    }
  }
  &__white{
    & .mtfact{
      &__item{
        border: 1px solid var(--mt-border-1);
        margin-top: 0px;
      }
      &__count{
        color: var(--mt-common-black);
      }
      &__content{
        & span{
          color: var(--mt-common-black);
        }
        & p {
          color: var(--mt-common-black);
        }
      }
    }
  }
}
