/*
 * Shortcode: services.scss
 * -----------------------------------------------
*/
.tm-sc-service {
  &.service-item-current-style1 {
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 5px 0px 0px rgba(145, 195, 48, 0.004);
    @include transition(all .3s ease);
    .tm-thumb{
      overflow: hidden;
      position: relative;
      border-radius: 6px 6px 0 0;
      img {
        @include scale(1.02);
        @include transition(all .4s ease-in-out);
      }
    }
    .tm-details{
      background-color: #0d1b3b;
      padding: 40px;
      position: relative;
      border-radius: 0 0 6px 6px;
      .service-icon {
        background-color: var(--theme-color1);
        border-radius: 50%;
        height: 72px;
        left: 0;
        line-height: 72px;
        margin: 0 auto;
        position: absolute;
        right: 0;
        top: -30px;
        width: 72px;
        @include transition(all .4s ease);
        i {
          color: #fff;
          font-size: 36px;
          @include transition(all .4s ease);
        }
      }
      .title{
        line-height: 30px;
        color: #fff;
        margin-top: 30px;
        a:hover,
        a:focus {
          color: var(--theme-color1);
        }
      }
      .excerpt {
        color: #b0b9d1;
      }
    }
    &:hover{
      .tm-thumb{
        img {
          @include scale(1.1);
        }
      }
      .tm-details{
        .service-icon {
          background-color: var(--theme-color2);
          i {
            color: #fff;
          }
        }
      }
    }
  }
  &.service-item-current-style2 {
    position: relative;
    background: #fff;
    padding: 50px;
    box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07);
    .icon-text {
      .title {
        margin-top: 25px;
        margin-bottom: 20px;
      }
    }
    .service-icon {
      i {
        line-height: 64px;
        font-size: 36px;
        background: #f0f2f7;
        color: var(--theme-color2);
        height: 64px;
        width: 64px;
        display: inline-block;
        text-align: center;
        border-radius: 50%;
        @include transition(all .3s ease);
      }
    }
    &:hover{
      .service-icon {
        i {
          background: var(--theme-color2);
          color: #fff;
          transform: rotate(360deg);
        }
      }
    }
  }
}