.service-item{
  display: flex;
  flex-direction: column;
  @include media-breakpoint-up(lg) {
    flex-direction: row;
  }
  margin-bottom: $sizeLarge;
  .content-wrapper{
    padding-left: $sizeMedium;
  }
  a{
    text-decoration: none;
    h5{
      margin-top: $sizeSmall;
      text-transform: uppercase;
      font-size: 1.6em;
      color: $themeSecondary;
    }
    &:hover{
      h5{
        color: $themePrimary;
      }
    }
  }
  p{
    margin-top: 0;
    padding: 0 $sizeSmall 0 0;
    text-transform: none;
    text-align: left !important;
  }
}

.service-circle{
  display: block;
  margin: $sizeSmall $sizeSmall $sizeMedium $sizeSmall;
  width: $sizeLarge*3;
  color: $themeBlack;

  @include media-breakpoint-up(sm) {
    width: $sizeLarge*4;
  }
  @include media-breakpoint-up(xxxl) {
    width: $sizeLarge*5;
    margin: $sizeMedium $sizeLarge $sizeMedium 0;
  }

  @include hover-focus-active(){
    color: $themeBlack;
    text-decoration: none;
  }

  .image-wrapper{
    position: relative;
    .image-inner{
      overflow: hidden;
      width: $sizeLarge*3;
      height: $sizeLarge*3;
      border-radius: 50%;
      border: 8px solid $themeWhite;
      display: flex;
      justify-content: center;
      align-items: center;
      @include media-breakpoint-up(sm) {
        width: $sizeLarge*4;
        height: $sizeLarge*4;
      }
      @include media-breakpoint-up(xxxl) {
        width: $sizeLarge*5;
        height: $sizeLarge*5;
      }
      img{
        transition: all .5s;
        //min-height: 100%;
        height: 100%;
      }
      div{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: $themePrimary;
        font-size: 3em;
        background-color: #EEE;

        svg{
          width: 50%;
        }
      }
    }

    &:before, &:after{
      position: absolute;
      content: "";
      border-radius: 50%;
      z-index: -1;
      top: 50%;
      left: 50%;
      transition: all .5s;
    }

    &:before{
      border: 5px solid $themeWhite;
      background-image: linear-gradient(150deg, transparent 50%, $themeWhite 50%);
      background-color: $themePrimary;

      width: $sizeLarge*3 + $sizeSmall*2;
      height: $sizeLarge*3 + $sizeSmall*2;
      margin-top: -($sizeLarge*3 + $sizeSmall*2)/2;
      margin-left: -($sizeLarge*3 + $sizeSmall*2)/2;

      @include media-breakpoint-up(sm) {
        width: $sizeLarge*4 + $sizeSmall*2;
        height: $sizeLarge*4 + $sizeSmall*2;
        margin-top: -($sizeLarge*4 + $sizeSmall*2)/2;
        margin-left: -($sizeLarge*4 + $sizeSmall*2)/2;
      }

      @include media-breakpoint-up(xxxl) {
        width: $sizeLarge*5 + $sizeSmall*2;
        height: $sizeLarge*5 + $sizeSmall*2;
        margin-top: -($sizeLarge*5 + $sizeSmall*2)/2;
        margin-left: -($sizeLarge*5 + $sizeSmall*2)/2;

      }
    }

    &:after{
      background-color: $themeSecondary;
      z-index: -2;
      background-image: linear-gradient(100deg, transparent 50%, $themeWhite 50%);
      transition-duration: .9s;

      width: $sizeLarge*3 + $sizeSmall*3;
      height: $sizeLarge*3 + $sizeSmall*3;
      margin-top: -($sizeLarge*3 + $sizeSmall*3)/2;
      margin-left: -($sizeLarge*3 + $sizeSmall*3)/2;

      @include media-breakpoint-up(sm) {
        width: $sizeLarge*4 + $sizeSmall*3;
        height: $sizeLarge*4 + $sizeSmall*3;
        margin-top: -($sizeLarge*4 + $sizeSmall*3)/2;
        margin-left: -($sizeLarge*4 + $sizeSmall*3)/2;
      }

      @include media-breakpoint-up(xxxl) {
        width: $sizeLarge*5 + $sizeSmall*3;
        height: $sizeLarge*5 + $sizeSmall*3;
        margin-top: -($sizeLarge*5 + $sizeSmall*3)/2;
        margin-left: -($sizeLarge*5 + $sizeSmall*3)/2;
      }
    }

    &:hover{
      .image-inner{
        img{
          transition: all .5s;
          transform: scale(1.1);
        }
      }

      &:before, &:after{
        transition: all .5s;
      }
      &:before{
        transform: rotate(-190deg);
        transition-duration: .7s;
      }
      &:after{
        transform: rotate(170deg);
      }
    }

  }
}