:root {
  --star-size: 30px;
  --star-color: #fff;
  --star-background: #fc0;
}
.stars {
  --percent: calc(var(--rating) / 5 * 100%);
  
  display: inline-block;
  font-size: var(--star-size);
  font-family: Times; // make sure ★ appears correctly
  line-height: 1;
  
  &::before {
    content: '★★★★★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.cacius-reviews-data{
  max-width: 720px !important;
  clear:both;
  display:block;
}

.testimonials-header{
  margin-bottom:60px;
  padding-bottom:60px;
  border-bottom:2px solid lightgray;
  min-height: 200px;
}

.testimonials-total-rating{
  background:#f6ed9a;
  color:black;
  font-weight: bold;
  padding:8px 5px;
  border:1px solid #b7b176;
  border-radius: 4px;
  width:55px;
  margin:0 auto;
}

.testimonials-total-review{
  display:flex;
  place-content: center;
  justify-content: center;
  flex-direction: column;
  .stars{
    margin:0 auto;
  }
}  

.testimonials-rating{
  width:33%;
  float:left;
  .stars{
    margin:0 auto;
  }
}

.testimonials-feedback{
  width:66%;
  float:left;
}

.testimonials-desc{
  text-align:center;
  font-size:11px;
}

.testimonials-title{
  text-align: center;
}

.item-list{
  grid-column-gap: var(--grid-column-gap, 30px);
  grid-row-gap: var(--grid-row-gap, 30px);
  clear:both;
  width:100%;
}

.li-item{
  display: flex;
  flex-direction: column;
  .item{
    margin-bottom:30px;
  }
  .item-details{
    width:30%;
    float:left;
    margin-right: 5%;
  }
  .item-review{
    width:60%;
    float:left;
    border:3px solid lightgray;
    position:relative;
    p{
      padding:10px;
    }
  }

  .item-review::before{
    content: '';
    height: 0;
    width: 0;
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent;
    border-right: 15px solid #dbdbdb;
    top: 50%;
    position: absolute;
    left: -15px;
  }
}


.cacius-reviews-pagination{
  margin:40px 0;
}


@media only screen and (min-width : 320px) and (max-width:426px){
  .testimonials-rating {
    width: 100%;
  }
  .testimonials-feedback{
    width:100%;
  }

  .testimonials-header {
      min-height: 335px;
      text-align: center;
      margin-top: 20px;
   }   

  .item-details {
    width: 100% !important;
  }

  .item-review{
    width: 100% !important;
  }

  .testimonials-title {
    margin-top: 10px;
  }

}