.iconbox {
  background-color: #00503c;

  p {
    color: inherit;
  }
  > .icon {
    align-self: center;
  }

  .box-content {
    h5,
    p {
      padding-bottom: 0;
    }
    h5 {
      font-weight: $font-weight-normal;
    }
  }

  &.kpi-box {
    border: none;
    box-shadow: none;
    background: transparent;
    color: $quaternary-color;

    &:hover * {
      color: inherit;
    }

    > .icon {
      position: relative;
      height: 100px;
      width: 100px;
      margin-bottom: 40px;
      margin-top: 25px;
      @media screen and (max-width: 767px) {
        margin-bottom: 20px;
        margin-top: 15px;
      }
      //   align-self: center;

      &:before {
        content: "\00a0";
        position: absolute;
        width: 140px;
        height: 140px;
        background-color: $white;
        top: 0px;
        left: 0px;
        background-color: #ffffff;
        transform: translate(-20px, -20px);
        border-radius: 360px;
      }
      .icon-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 80%;
        width: 80%;
      }
    }

    .kpi-content {
      font-weight: 900;
      display: flex;
      flex-direction: column;

      &.has-unit {
        flex-direction: column-reverse;
      }

      .kpi-value {
        font-size: $font-size-32;
      }
    }
  }
}

.row {
  .col-sm-12 {
    &:nth-of-type(1) {
      .kpi-box {
        .icon {
          .icon-image {
            background: $quaternary-color;
          }
        }
      }
    }
    &:nth-of-type(2) {
      .kpi-box {
        .icon {
          .icon-image {
            background: #e6a100;
          }
        }
      }
    }

    &:nth-of-type(3) {
      .kpi-box {
        .icon {
          .icon-image {
            background: $tertiary-bg;
          }
        }
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .feature-items {
    padding-bottom: 0;
    margin-top: -120px;
  }
}