
@import "../tfl-lib";

/* ------------------------------------ Services ------------------------------------------- */

/* -------- General services -------- */

.tfl-services {
  clear: both;

  .tfl-service {
    margin-bottom: 20px;

    .tfl-icon-wrapper i {
      transition: color .4s ease-in-out 0s;

      &:hover {
        color: #555;
      }

      .tfl-dark-bg &:hover {
        color: #d5d5d5;
      }
    }

    .tfl-service-text {
      font-size: 15px;
      line-height: 24px;

      .tfl-dark-bg & {
        color: #909090;

        .tfl-title {
          color: #e5e5e5;
        }
      }

      .tfl-title-link {
        .tfl-title {
          transition: color .3s ease-in-out 0s;
        }

        &:hover .tfl-title {
          color: #666;
        }

        .tfl-dark-bg &:hover .tfl-title {
          color: #c5c5c5;
        }
      }
    }
  }
}

/* Style 1 */
.tfl-services-style1 {
  .tfl-service {
    .tfl-icon-wrapper i {
      display: block;
      text-align: center;
      font-size: 96px;
      line-height: 1;
      margin-bottom: 20px;
      transition: color .4s ease-in-out 0s;
      color: #888;

      .tfl-dark-bg & {
        color: #a5a5a5;
      }

      .tfl-dark-bg &:hover {
        color: #c5c5c5;
      }
    }

    .tfl-image-wrapper img {
      display: block;
      max-width: 100%;
      text-align: center;
      margin: 0 auto 25px;
      transition: all .4s ease-in-out 0s;
    }

    .tfl-service-text {
      text-align: center;
      max-width: 300px;
      margin: 0 auto;

      .tfl-title {
        @include tfl-heading-style();
        margin-bottom: 20px;
      }
    }

    &:hover {
      .tfl-image-wrapper img {
        transform: scale(0.9, 0.9);
      }
    }
  }
}

/* Style 2 */

.tfl-services-style2 {
  .tfl-service {
    .tfl-image-wrapper img, .tfl-icon-wrapper i {
      float: left;
      margin-right: 18px;
      color: #888;

      .rtl & {
        float: right;
        margin: 0 0 0 18px;
      }

      .tfl-dark-bg & {
        color: #a5a5a5;
      }

      .tfl-dark-bg &:hover {
        color: #c5c5c5;
      }
    }

    .tfl-icon-wrapper i {
      font-size: 24px;
      line-height: 32px;
    }

    .tfl-service-text .tfl-title {
      @include tfl-heading-style();
      margin-bottom: 20px;
    }
  }
}

/* Style 3 */

.tfl-services-style3 {
  .tfl-service {
    .tfl-icon-wrapper i {
      display: block;
      text-align: left;
      font-size: 80px;
      line-height: 1;
      margin-bottom: 25px;
      color: #555;

      .rtl & {
        text-align: right;
      }

      &:hover {
        color: #888;
      }

      .tfl-dark-bg & {
        color: #c5c5c5;
      }

      .tfl-dark-bg &:hover {
        color: #e5e5e5;
      }
    }

    .tfl-image-wrapper img {
      display: block;
      max-width: 100%;
      text-align: left;
      margin-bottom: 25px;
    }

    .tfl-service-text {
      text-align: left;
      max-width: 300px;
      margin: 0;
      font-size: 14px;
      line-height: 32px;
      color: #888;

      .rtl & {
        text-align: right;
      }

      ul.tfl-services-list {
        padding: 0;
        margin: 0;
        border: none;
      }

      ul.tfl-services-list li {
        border-bottom: 1px solid #eee;
        position: relative;
        padding: 0;
        margin: 0;
        list-style: none;
        line-height: 42px;

        &:hover {
          padding: 0;
        }

        .tfl-dark-bg & {
          border-color: #333;
        }
      }

      ul.tfl-services-list li:before {
        @include tfl-icon-font();
        position: relative;
        display: inline-block;
        height: auto;
        width: auto;
        background: none;
        float: none;
        vertical-align: middle;
        margin: 0 15px 0 0;
        content: "\e917";
        color: #BBBBBB;
        font-size: 12px;
        line-height: 1;

        .rtl & {
          display: none;
        }

        .tfl-dark-bg & {
          color: #606060;
        }
      }

      .tfl-title {
        @include tfl-heading-style();
        margin-bottom: 20px;
      }
    }
  }
}
