:root{
    --accent:#ed3b3b;
    --muted:#efefef;
    --text:#222;
    --name:#111;
    --meta:#8a8a8a;
    --card-radius:18px;
  }


  .testimonials {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:20px 25px; margin: 15px 0px 30px;
    align-items:start;
  
  }


#card-container{width: 100%; float: left;}
  .card {display:flex; flex-direction:column; justify-content:flex-start;}
  /* hidden class */
.card.hidden {
  display: none;
}

  .card-holder{background-color: rgba(17, 17, 17, 0.05); min-height:165px; position: relative;   padding:20px 20px 20px 20px; border-radius:var(--card-radius);}

.hpsDwG {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 0px) !important;
    bottom: 0px !important;
    width: 22px !important;
    height: 13px !important; background: none; fill:rgba(17, 17, 17, 0.05);;

}

  /* rating row */
  .stars{
    display:inline-flex;
    gap:6px;
    margin-bottom:12px;
  }
  .star{
    width:18px;height:18px;display:inline-block;
    color:var(--accent);
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06));
  }

.text {
  color: #222;     font-family: 'Catamaran', sans-serif;
  line-height: 22px;
  -webkit-line-clamp: 3;       /* show only 3 lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-height .25s ease;
}

.text.collapsed {
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text.expanded {
  -webkit-line-clamp: unset;
  display: block;
}

  .read-more {
    display:inline-block;
    margin-top:10px;
    color:#8b8b8b;
    font-size:14px;
    cursor:pointer;
    user-select:none;
  }

  /* avatar row placed visually underneath bubble (like image) */
  .meta {
    display:flex;
    gap:12px;
    align-items:center;     font-family: 'Catamaran', sans-serif;
    margin-top:15px; /* gives space under speech bubble */
  }
  .avatar {
    width:32px;height:32px;border-radius:50%;
    flex:0 0 32px; display: flex; align-items: center; justify-content: center; font-weight: 600;
    background: #344D77; color: #FFF;
    background-position:center;
 
  }

 
  .author {
    display:flex;
    flex-direction:column;
  }
  .author .name {
    font-weight:700;
    color:var(--name);
    font-size:14px;
  }
  .author .ago {
    color:var(--meta);
    font-size:13px;
  }

  /* small variant cards (some cards shorter and without tail emphasis) */
  .card.small {
    padding:16px;
    min-height:90px;
  }
  .card.small:after{ left:20px; bottom:-12px; width:30px; height:24px; }

  /* visual tweak - some cards centered text */
  .card.center { text-align:center; }
  .card.center .meta { justify-content:center; margin-top:18px; gap:10px; }

  /* tiny star SVG styling fallback */
  svg.star-svg { display:block; width:20px; height:20px; fill: #ccc;}
  .star1, .star2, .star3, .star4, .star5{fill: #D07B2E!important;}



  /* read-more fade */
  .fade-bottom {
    content:"";
    position:absolute;
    left:20px; right:20px;
    bottom:52px;
    height:28px;
    background:linear-gradient(180deg, rgba(239,239,239,0) 0%, rgba(239,239,239,1) 100%);
    pointer-events:none;
  }
  #loadMoreBtn{background-color: rgba(17, 17, 17, 0.05); transition: all 0.3s ease-in; min-width: 150px; padding: 5px 0px; border: none; font-family: 'Catamaran', sans-serif; font-weight: 600;    border-radius: 4px;}
  #loadMoreBtn:hover{background-color: rgba(17, 17, 17, 0.20); transition: all 0.3s ease-in;}
    /* responsivity */
  @media (max-width:1100px){
    .testimonials { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width:800px){
    .testimonials { grid-template-columns: repeat(2, 1fr); gap:20px; }
  }
  @media (max-width:520px){
    .testimonials { grid-template-columns: 1fr; }
    .card-holder{min-height: auto;}
  }