/* =========================================================
   ✅ CLIENT SAY (Testimonials network) 
   File: assets/client-say.css
========================================================= */

.bd-client-say{
  position: relative;
  padding: 90px 0 95px;
  overflow: hidden;
  background: #ffffff;
}
.bd-client-say::before,
.bd-client-say::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:130px;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:1;
}
.bd-client-say::before{
  top:-1px;
  /* soft top wave */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23f3fbf8' d='M0,32L60,37.3C120,43,240,53,360,58.7C480,64,600,64,720,58.7C840,53,960,43,1080,42.7C1200,43,1320,53,1380,58.7L1440,64L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'/%3E%3C/svg%3E");
}
.bd-client-say::after{
  bottom:-1px;
  /* soft bottom wave */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23f3fbf8' d='M0,96L60,90.7C120,85,240,75,360,74.7C480,75,600,85,720,85.3C840,85,960,75,1080,80C1200,85,1320,107,1380,117.3L1440,128L1440,120L1380,120C1320,120,1200,120,1080,120C960,120,840,120,720,120C600,120,480,120,360,120C240,120,120,120,60,120L0,120Z'/%3E%3C/svg%3E");
}

.bd-client-say .bd-client-say-container{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  text-align:center;
  position:relative;
  z-index:2;
}

.bd-client-say .bd-client-say-subtitle{
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 600;
  color: #16a34a; /* green */
  letter-spacing: .2px;
}
.bd-client-say .bd-client-say-title{
  margin: 0 0 28px;
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 1px;
  color:#0f172a;
  text-transform: uppercase;
}

.bd-client-say-stage{
  position:relative;
  margin: 0 auto;
  width: min(980px, 100%);
  height: 420px;
}

.bd-client-say-lines{
  position:absolute;
  inset: 0;
  width:100%;
  height:100%;
  z-index:0;
}

.bd-client-say-active{
  position:absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: 112px;
  height: 112px;
  border-radius: 999px;
  border: 6px solid #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
  overflow:hidden;
  background:#ffffff;
  z-index:2;
}
.bd-client-say-active img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.bd-client-say-avatar{
  position:absolute;
  width: 56px;
  height: 56px;
  border-radius:999px;
  border: 4px solid #ffffff;
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .10);
  cursor:pointer;
  padding:0;
  background:#ffffff;
  z-index:2;
  transform: translate(-50%, -50%);
}
.bd-client-say-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.bd-client-say-avatar.is-active{
  outline: 3px solid rgba(34, 197, 94, .35);
  transform: translate(-50%, -50%) scale(1.08);
}

.bd-client-say-card{
  position:absolute;
  left:50%;
  top: 186px;
  transform: translateX(-50%);
  /* smaller, tighter card */
  width: min(460px, calc(100% - 24px));
  padding: 22px 16px 14px;
  background:#ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(15, 23, 42, .10);
  z-index:1;
}
.bd-client-say-name{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color:#0f172a;
}
.bd-client-say-role{
  margin: 2px 0 10px;
  font-size: 14px;
  color:#64748b;
  font-weight:600;
}
.bd-client-say-text{
  margin: 0 auto 10px;
  max-width: 380px;
  color:#334155;
  font-size: 14px;
  line-height: 1.6;
}
.bd-client-say-stars{
  display:flex;
  justify-content:center;
  gap:4px;
  margin-top: 8px;
}
.bd-client-say-stars svg{
  width: 16px;
  height: 16px;
  display:block;
}
.bd-client-say-stars .is-on path{
  fill:#22c55e;
}
.bd-client-say-stars .is-off path{
  fill:#cbd5e1;
}

@media (max-width: 740px){
  .bd-client-say-stage{ height: 520px; }
  .bd-client-say-card{ top: 220px; }
  .bd-client-say-active{ top: 62px; }
}

@media (max-width: 520px){
  .bd-client-say-stage{ height: 560px; }
  .bd-client-say-avatar{ width: 50px; height: 50px; }
}


.bd-client-say-active::after{
  content:"";
  position:absolute;
  right: 10px;
  bottom: 10px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background:#22c55e;
  border: 3px solid #ffffff;
}