.skill-progressbar-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 30px;

  @include sm {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
  }
}
.skill-progressbar {
  .progress-inner-item {
    position: relative;
    margin:0;
    line-height: inherit;
  }
  .skill-title {
    z-index: 100;
    color: $gray-800;
    font-size: 18px;
    font-weight: 400;
    font-family: $heading-font;
  }
  .progressbar-number{
    width: 100%;
    z-index: 10;
  }
  .progress-number-count {
    padding: 0 8px;
    position: absolute;
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    
  }
  .progressbar-number,
  .progress-number-count {
    font-size: 18px;
    line-height: 41px;
    height: 8px;
    letter-spacing: 0px;
    font-weight: 400;
    text-transform: none;
    font-family: $body-font;
    color: $text-color;

    @include sm {
      left: 90% !important;
    }
  }
  .progress-content-outter {
    height: 8px;
    background-color: $gray-200;
    border-radius: 50px;
  }
  .progress-content {
    height: 8px;
    background-color: $primary-color;
    width: 0%;
    border-radius: 50px;
  }
}