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

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

.mtnewsletter {
  &__bg {
    padding: 70px 50px;
    background-repeat: no-repeat;
    background-size: cover;

    @media #{$xs} {
      padding: 50px 10px;
    }

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(17, 17, 17, 0.7);
      z-index: 1;
    }

    &-2 {
      border-radius: 5px;
      padding: 60px;
      margin-top: -120px;
      @media #{$xs} {
      padding: 40px 20px;
    }
    }
  }

  &__right {
    @media #{$md,$xs} {
      margin-left: 0px;
    }
  }

  &__title {
    font-size: 54px;
    font-weight: 700;
    color: var(--mt-common-white);

    @media #{$xs} {
      font-size: 34px;
    }
  }

  &__left {
    z-index: 2;
    position: relative;

    & p {
      color: var(--mt-text-body);
    }
  }

  &__right {
    z-index: 2;
  }

  &__input {
    & input {
      height: 60px;
      background: var(--mt-common-white);
      padding: 10px 20px;
    }

    & button {
      height: 50px;
      padding: 0px 21px;
      background: var(--mt-common-black);
      position: absolute;
      right: 5px;
      top: 5px;
      color: var(--mt-common-white);
      text-transform: uppercase;

      & .rotate {
        @include transform(rotate(-30deg));
      }
    }
  }

  &__trans-title {
    color: rgba(17, 17, 17, 0.0901960784);
    font-size: 92px;
    font-weight: 800;
    position: absolute;
    left: 22%;
    top: 50%;
    @include transform(translateY(-50%));

    @media #{$lg} {
      font-size: 70px;
    }
    @media #{$xs} {
      left: 0%;
      font-size: 60px;
    }
  }

  &__2 {
    & .mtnewsletter__title {
      font-size: 32px;
      color: var(--mt-common-black);
    }

    & .mtnewsletter__input {
      & input {
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--mt-border-2);
        border-radius: 0px;
        padding-left: 0px;
      }

      & button {
        background: var(--mt-common-black);
        height: 40px;
        padding: 0px 15px;
        border-radius: 10px;
      }
    }
  }
}
Path: home/moonrcjl/public_html/wp/wp-content/themes/arsha/assets/scss/layout/pages