/home/moonrcjl/public_html/wp/wp-content/themes/arsha/assets/scss/layout/pages/_process.scss
@use "../../utils" as *;

/*----------------------------------------*/
/*  7.1 Team css start
/*----------------------------------------*/

.mtprocess {
  &__space {
    padding: 10px 30px;
  }

  &__bg {
    background-color: #f8f8f8;
  }

  &__thumb {
    & img {
      border-radius: 100% !important;
    }
  }

  &__title {
    color: var(--mt-common-black-2);
    font-size: 24px;
  }

  &__number {
    position: absolute;
    right: 15%;
    top: 50%;

    @media #{$md} {
      right: 30%;
    }

    & p {
      display: inline-block;

      & span {
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -80%));
      }
    }

    &-2 {
      right: 0%;

      @media #{$md} {
        right: 22%;
      }

      & p {
        & span {
          color: #000000;
        }
      }
    }
  }

  &__2 {
    & .mtprocess__title {
      color: var(--mt-common-white);
    }

    & .mtprocess__content {
      & p {
        color: rgba(255, 255, 255, 0.8);
      }
    }

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

  &__shape {
    &-1 {
      position: absolute;
      top: 37%;
      left: 32%;

      @media #{$xxxl} {
        left: 28%;
      }

      @media #{$xxl} {
        left: 26%;
      }

      @media #{$xl} {
        left: 22%;
      }

      @media #{$lg} {
        left: 20%;
        top: 34%;
      }

      @media #{$md, $xs} {
        display: none;
      }
    }

    &-2 {
      position: absolute;
      top: 37%;
      right: 33.7%;

      @media #{$xxxl} {
        right: 30%;
      }

      @media #{$xxl} {
        right: 28%;
      }

      @media #{$xl} {
        right: 26%;
      }

      @media #{$lg} {
        right: 28.5%;
        top: 34%;
      }

      @media #{$md, $xs} {
        display: none;
      }
    }
  }
}
Path: home/moonrcjl/public_html/wp/wp-content/themes/arsha/assets/scss/layout/pages