/home/infinitibizsol/www.mediaeclips.com/wp-content/themes/ziptech/scss/elements/ Current File: /home/infinitibizsol/www.mediaeclips.com/wp-content/themes/ziptech/scss/elements/_icon_box.scss
/*========================================*/
/*---------------- [_Icon_Box] -----------*/
/*========================================*/
.icon-box-style1 {
  .featured-icon {
    margin-bottom: 25px;
    .webexflaticon {
      font-size: 46px;
      color: var(--webex-primary-color);
      position: relative;
      background: #fff;
      height: 68px;
      width: 68px;
      line-height: 68px;
      text-align: center;
      border-radius: 6px;
      display: inline-block;
      &:after {
        content: "";
        position: absolute;
        height: 65px;
        width: 65px;
        opacity: 0.1;
        background: #ffffff;
        left: 15px;
        top: -10px;
        animation: pulse infinite 0.8s;
        @include transition(all 400ms ease-out 0s);
        z-index: 0;
        border-radius: 6px;
      }
    }
  }
  .icon-box-content {
    .icon-box-title {
      color: #fff;
      margin-bottom: 10px;
    }
  }
  &:hover {
    .featured-icon {
      .webexflaticon {
        &:after {
          opacity: 0.2;
          left: 0;
          top: 0;
        }
      }
    }
  }
}
.icon-box-style2 {
  .featured-icon {
    margin-bottom: 25px;
    .webexflaticon {
      font-size: 46px;
      color: var(--text-white);
      position: relative;
      background: var(--webex-primary-color);
      height: 68px;
      width: 68px;
      line-height: 68px;
      text-align: center;
      border-radius: 6px;
      display: inline-block;
    }
  }
  .icon-box-content {
    .icon-box-title {
      color: var(--heading-font-color);
      margin-bottom: 10px;
    }
  }
}
.icon-box-block {
  background-color: #ffffff;
  border-radius: 12px;
  text-align: center;
  border: 1px solid #f0f0f0;
  padding: 30px 25px 30px 25px;
  z-index: 1;
  position: relative;
  overflow: hidden;
  @include box-shadow(0px 0px 16px 4px rgba(0, 0, 0, 0.1));
  &:after {
    background: url(../images/service/1.png);
    background-size: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: -35px;
    background-repeat: no-repeat;
    left: 0;
    z-index: -1;
    content: "";
    @include transition(all 300ms ease-out 0s);
  }
  img {
    @include transition(all 400ms ease-out 0s);
  }
  &:hover {
    img {
      @include transform(scale(-1) rotate(180deg));
    }
    &:after {
      @include transform(scale(1.08) translate(0px, -8px));
    }
  }
}
.icon-box-two {
  .icon {
    background: var(--webex-primary-color);
    border-radius: 6px;
    width: 84px;
    height: 84px;
    line-height: 84px;
    float: left;
    text-align: center;
    span:before {
      font-size: 48px;
      line-height: 84px;
      color: #fff;
    }
  }
  .icon-details {
    margin-left: 110px;
  }
}