:root{
  --initials-avatar-size:40px;
}
.initials-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--initials-avatar-size);
  height:var(--initials-avatar-size);
  border-radius:50%;
  background: color-mix(in srgb, #00a085 30%, transparent);
  background-color: rgba(0,124,104,0.3);
  color:#fff;
  font-weight:600;
  font-size:0.95rem;
  line-height:1;
  text-transform:uppercase;
  overflow:hidden;
}
.initials-avatar.small{ --initials-avatar-size:28px; font-size:0.8rem }
.initials-avatar.large{ --initials-avatar-size:56px; font-size:1.25rem }

/* Stars (ratings) */
#testimonial .card{ position:relative; }

/* keep profile area flexible so we can align name/profession stacked on left and stars on right */
#testimonial .card .profile{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}


#testimonial .card .profile img.profile-pic{
  width:var(--initials-avatar-size);
  height:var(--initials-avatar-size);
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
  margin-right:8px;
}

#testimonial .card .profile .profile-text{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0; /* allow truncation */
}

#testimonial .card .profile h4.cust-name{ margin:0; font-size:0.95rem; }

/* Ensure avatar and name stay on the same row even when bootstrap cols would stack */
#testimonial .card .row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap; /* allow wrapping to avoid horizontal overflow on small screens */
}
#testimonial .card .row > .col-sm-2{ flex:0 0 auto; width:auto; }
#testimonial .card .row > .col-sm-10{ flex:1 1 auto; width:auto; }
#testimonial .card .profile .profile-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.stars{
  display:flex;
  gap:6px;
  align-items:center;
  margin-left:12px;
}
.stars svg{ width:16px; height:16px; display:block; fill:currentColor; }
.stars.google{ color:#FFD400; }
.stars.doctoralia{ color:#007c68; }
.stars.small svg{ width:12px; height:12px }

@media (max-width:576px){
  /* keep profile in one row: avatar (col), then name + stars aligned horizontally */
  #testimonial .card .profile{ flex-direction:row; align-items:center; }
  .stars{ margin-left:8px; margin-top:0; }
  /* reduce sizes on small screens */
  :root{ --initials-avatar-size:34px; }
  .initials-avatar{ width:var(--initials-avatar-size); height:var(--initials-avatar-size); font-size:0.9rem }
  .stars svg{ width:12px; height:12px }
  /* ensure name doesn't push layout off-screen */
  #testimonial .card .profile h4.cust-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; margin:0; }
}

/* Prevent horizontal overflow from testimonial slider or cards */
#testimonial.items, .items { overflow-x: hidden; }

/* ensure star <svg> uses box-sizing so size adjustments behave consistently */
.stars svg, .star { box-sizing: border-box; display: inline-block; }

/* Constrain testimonial cards to viewport and prevent visual overflow */
#testimonial.items .card, .items .card { max-width: 100%; box-sizing: border-box; overflow: hidden; }
/* Ensure slick slides respect box-sizing and provide small horizontal padding so card borders are visible */
.items .slick-slide { box-sizing: border-box; padding-left:6px; padding-right:6px; }
.items { padding-left:6px; padding-right:6px; }

/* Make whole card clickable when wrapped in .card-link */
.card-link{ display:block; color:inherit; text-decoration:none; }
.card-link:focus{ outline:2px solid #b8a07e; outline-offset:2px }