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

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

.mtservice {
  &__border {
    border: 1px solid var(--mt-border-3);
  }

  &__bg {
    padding: 60px;
    transition: 0.3s;

    &:hover {
      background: var(--mt-common-black-5);

      & .mtservice__btn a {
        color: var(--mt-theme-1);
      }

      & .mtservice__title {
        color: var(--mt-theme-1);
      }
    }
  }

  &__icon {
    & span {
      border: 1px solid var(--mt-border-3);
      padding: 17px 16.5px;
      border-radius: 100%;
      display: inline-block;
      font-size: 20px;
      color: var(--mt-common-white);
    }
  }

  &__title {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--mt-common-white);
    transition: 0.3s;
  }

  &__content {
    font-size: 16px;
    font-weight: 400;
    color: var(--mt-text-body);
    margin-top: 10px;
  }

  &__btn {
    & a {
      font-size: 16px;
      font-weight: 400;
      color: var(--mt-common-white);
      display: inline-block;
      text-decoration: underline;
      transition: 0.3s;
    }
  }

  &__2 {
    height: 465px;

    & .mtservice {
      &__icon {
        @media #{$lg, $md, $xs} {
          margin-bottom: 50px;
        }

        & span {
          border: 1px solid var(--mt-border-3);
          width: 100px;
          height: 100px;
          line-height: 60px;
          text-align: center;
          border-radius: 100%;
          display: inline-block;
          font-size: 30px;
          color: var(--mt-common-white);
        }
      }
    }

    & .mtservice__btn {
      display: none;
      transition: 0.5s;

      & a {
        background-color: var(--mt-theme-1);
        color: #000;
        padding: 8px 15px;
        display: block;
        text-decoration: none;
        font-weight: 700;

        & span {
          float: right;
        }
      }
    }

    & .mtservice__content-wrap {
      margin-top: 153px;
      transition: 0.5s;
    }

    &:hover {
      & .mtservice__btn {
        display: block;

        & a {
          color: #000;
        }
      }

      & .mtservice__content-wrap {
        margin-top: 97px;
      }
    }
  }

  &__3 {
    height: 480px;

    &:hover {
      background: #101314;

      &.mtservice__border {
        border-color: #101314;
      }

      & .mtservice__content-wrap {
        margin-top: 97px;
      }

      & .mtservice__btn-wrap {
        opacity: 1;
        visibility: visible;
        display: block;
      }
    }

    & .mtservice__content-wrap {
      margin-top: 153px;
      transition: 0.4s;
    }

    & .mtservice__btn-wrap {
      opacity: 0;
      visibility: hidden;
      transition: 0.4s;
      display: none;
    }
  }

  &__4 {
    padding: 60px 45px;

    & .mtservice__icon span {
      border: 0;
      font-size: 44px;
    }

    & .mtservice__content-wrap {
      & p {
        color: rgba(255, 255, 255, 0.8);
      }
    }

    & .mtservice__title {
      font-size: 24px;
      font-weight: 600;
    }
  }
}

.mtservice {
  &__area {
    & .mtservie-pagination {
      text-align: center;
      position: absolute;
      bottom: 10px !important;

      & .swiper-pagination-bullet {
        width: 20px;
        height: 20px;
        background-color: transparent;
        border: 1px solid var(--mt-border-1);
        opacity: 1;
        text-align: center;
        margin-bottom: 15px;

        &.swiper-pagination-bullet-active {
          background-color: var(--mt-common-black);
          border: 1px solid var(--mt-common-black);
        }
      }
    }
  }

  &__pagi-3 {
    & .mt-section-content {
      @media #{$xs} {
        margin-left: 0px;
        margin-right: 0px;
      }
    }

    & .mtservice__pagi {
      & .mtservie-pagination {
        bottom: -80px !important;

        & .swiper-pagination-bullet {
          border: 1px solid var(--mt-border-2);

          &.swiper-pagination-bullet-active {
            background-color: var(--mt-theme-1);
            border: 1px solid var(--mt-theme-1);
          }
        }
      }
    }
  }

  &__details {
    &-area {
      & .details-border {
        border-bottom: 1px solid var(--mt-border-1);
        padding-bottom: 20px;
      }
    }

    &-box {
      & ul {
        & li {
          list-style: none;
          margin-bottom: 10px;
          margin-right: 40px;

          @media #{$lg,$md,$xs} {
            margin-right: 0px;
          }

          &:last-child {
            margin-bottom: 0;
          }

          & i {
            margin-right: 5px;
          }

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

      @media #{$lg,$md,$xs} {
        margin-right: 0px;
      }
    }

    &-item {
      border: 1px solid var(--mt-border-1);
      padding: 60px;
      transition: .3s;

      &:hover {
        background: var(--mt-theme-1);
      }
    }

    &-icon {
      border: 1px solid var(--mt-border-1);
      padding: 17px 16.5px;
      border-radius: 100%;
      display: inline-block;
      font-size: 20px;
      color: #111111;
    }

    &-content {
      & ul {
        & li {
          margin-bottom: 10px;
          margin-left: 20px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

.mtservice-active-space {
  margin-right: -325px;
  overflow: visible;

  @media #{$lg} {
    margin-right: -200px;
  }

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