.ratingAnimation {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  svg.invisible {
    visibility: hidden!important;
  }
  @include min(tablet) {
    margin-top: 3.5rem;
  }

  .textCircle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
  }

  .ratingText {
    position: absolute;
  }

 
  .frontCircle {
    width: 18rem;
    height: 18rem;
    z-index: 1;

    svg {
      width: 18rem;
      height: 18rem;
    }

    .ratingText {
      color:white;
      font-size: 2.4rem;

      span {
        font-size: 3rem;
      }
    }
  }
  @include min(tablet){
    .backCircle{
      display: flex;
    }

  }
  @include min(laptop){
    margin-top: 3.5rem;
    .backCircle{
      display: flex;
    }

  }
}