/*-------------------------
    Icon Box Item
-------------------------*/
.icon-box-item {
  padding: 40px 40px 40px 40px;
  transition: .3s all ease;
  background-color: #fff;
  box-shadow: 0px 30px 70px rgba(89, 86, 230, 0.1);
  border-radius: 20px;
  margin-bottom: 30px;

  &.top {
    display: block;

    &[style="text-align:center"] {
      .icon {
        margin: 0 auto;
      }
    }

    &[style="text-align:right"] {
      .icon-wrap {
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  &[style="text-align:left"] {
    .icon {
      justify-content: left;
    }
  }

  &.right {
    flex-direction: row-reverse;

    .icon {
      margin-left: 15px;
    }
  }

  &.left {

    //&[style="text-align:left"] {
    //  align-items: initial;
    //}
    .text-icon,
    .icon {
      margin-right: 15px;
    }
  }

  .text-icon,
  .icon {
    color: var(--main-color-one);
    margin-bottom: 35px;
  }

  .content {

    .title {
      color: var(--heading-color);
      font-size: 24px;
      line-height: 1.29;
      font-weight: 600;
      transition: .3s all ease;
      margin-bottom: 24px;
    }

    p {
      color: var(--paragraph-color);
      font-size: 16px;
      line-height: 1.63;
      margin-bottom: 35px;
    }
  }
}


.icon-box-with-text {
  &.style-01 {
    .single-icon-box-with-text {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 30px;

      &:last-child {
        margin-bottom: 3px;
      }

      .icon-wrap {
        width: 65px;
        height: 65px;
        line-height: 65px;
        background: rgba(118, 74, 241, 0.1);
        text-align: center;
        border-radius: 50%;
        margin-right: 15px;
        transition: all linear 0.2s;

        &.color-01 {
          background-color: #EFEAFE;
          box-shadow: 0px 3px 0px #B39BF8;
        }

        &.color-02 {
          background-color: #FBF5F2;
          box-shadow: 0px 3px 0px #FDDDA0;
        }

        &.color-03 {
          background-color: #FBEAEF;
          box-shadow: 0px 3px 0px #F9B0B2;
        }

        img {
          transition: all linear 0.3s;
        }
      }

      .content {
        flex: 1;

        .text {
          color: var(--heading-color);
          font-size: 16px;
          line-height: 28px;
          font-weight: 500;
          margin-bottom: 0px;
        }
      }

      &:hover {
        .icon-wrap {
          img {
            transform: rotateY(180deg);
          }
        }
      }
    }
  }

  &.style-02 {
    .single-icon-box-with-text {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px;

      &:last-child {
        margin-bottom: 3px;
      }

      .icon-wrap {
        margin-right: 20px;
      }

      .content {
        flex: 1;

        .text {
          color: var(--heading-color);
          font-size: 16px;
          line-height: 28px;
          font-weight: 500;
          margin-bottom: 0px;
        }
      }
    }
  }
}