.customer-section{
    --terracotta-1:#5e1e10;
    --terracotta-2:#90331c;
    --terracotta-3:#b8502e;
    --cream:#f9e4dc;
    --peach-text:#ffe7db;
    --peach-soft:#f3c3ac;
    --gold:#f0b429;

    padding:50px 10px;
    background:
    radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 35%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.06), transparent 40%),
    linear-gradient(135deg, var(--terracotta-1) 0%, var(--terracotta-2) 55%, var(--terracotta-3) 100%);
    overflow:hidden;
}

.customer-container{
    max-width:1250px;
    margin:auto;
    padding:0 25px;
}

.customer-title{
    text-align:center;
    font-size:28px;
    font-weight:700;
    color:#fff;
    margin-bottom:15px;
}

/* TESTIMONIAL */
.testimonial-wrapper{
    display:flex;
    align-items:center;
    gap:130px;
}

/* QUOTE CIRCLE — sized off one variable so every child scales together */
.quote-circle{
    --circle:200px;
    position:relative;
    width:var(--circle);
    height:var(--circle);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:100px;
}

/* soft ambient glow behind everything */
.qc-glow{
    position:absolute;
    top:50%; left:50%;
    width:calc(var(--circle) * 1.5);
    height:calc(var(--circle) * 1.5);
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(240,180,41,0.28), transparent 70%);
    filter:blur(6px);
    z-index:0;
    animation:qcGlowPulse 3.6s ease-in-out infinite;
}
@keyframes qcGlowPulse{
    0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(0.92); }
    50%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); }
}

/* expanding pulse rings */
.qc-ring{
    position:absolute;
    top:50%; left:50%;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.35);
    transform:translate(-50%,-50%) scale(0.75);
    opacity:0;
    z-index:1;
    animation:qcPulse 2.8s ease-out infinite;
}
.qc-ring.r1{ width:var(--circle); height:var(--circle); }
.qc-ring.r2{ width:var(--circle); height:var(--circle); animation-delay:1.1s; }
@keyframes qcPulse{
    0%{ transform:translate(-50%,-50%) scale(0.75); opacity:.8; }
    100%{ transform:translate(-50%,-50%) scale(1.55); opacity:0; }
}

/* slow-rotating dashed ring — gives the circle a "signature" frame.
   sized in px via viewBox so it scales with --circle through CSS width/height,
   not the SVG's internal coordinate system. */
.qc-dashed{
    position:absolute;
    top:50%; left:50%;
    width:calc(var(--circle) * 1.16);
    height:calc(var(--circle) * 1.16);
    transform:translate(-50%,-50%);
    z-index:1;
    animation:qcSpin 22s linear infinite;
    overflow:visible;
}
.qc-dashed circle{
    fill:none;
    stroke:rgba(240,180,41,0.55);
    stroke-width:1.5;
    stroke-dasharray:6 8;
    stroke-linecap:round;
}
@keyframes qcSpin{
    to{ transform:translate(-50%,-50%) rotate(360deg); }
}

/* orbiting accent dots, riding a separate counter-rotating layer */
.qc-orbit{
    position:absolute;
    top:50%; left:50%;
    width:calc(var(--circle) * 1.16);
    height:calc(var(--circle) * 1.16);
    transform:translate(-50%,-50%);
    z-index:2;
    animation:qcSpin 14s linear infinite reverse;
}
.qc-dot{
    position:absolute;
    width:8px; height:8px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 4px rgba(240,180,41,0.22);
}
.qc-dot.d1{ top:2%; left:50%; margin-left:-4px; }
.qc-dot.d2{ bottom:12%; left:10%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,0.18); width:6px; height:6px; }
.qc-dot.d3{ bottom:12%; right:10%; width:6px; height:6px; }

/* the core circle */
.circle-bg{
    position:relative;
    z-index:3;
    width:100%;
    height:100%;
    border-radius:50%;
    background:linear-gradient(160deg,#fff, var(--cream));
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 16px 30px -12px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.6);
}

.quote-mark{
    width:calc(var(--circle) * 0.567);
    height:calc(var(--circle) * 0.567);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(160deg, var(--terracotta-2), var(--terracotta-1));
    color:#fff;
    font-size:calc(var(--circle) * 0.253);
    box-shadow:0 12px 30px rgba(144, 51, 28, 0.35);
}
.quote-mark i{ transform:translateY(-2px); }

.qc-badge{
    position:absolute;
    bottom:2%; right:2%;
    width:calc(var(--circle) * 0.2);
    height:calc(var(--circle) * 0.2);
    min-width:26px; min-height:26px;
    border-radius:50%;
    background:var(--gold);
    color:var(--terracotta-1);
    display:flex; align-items:center; justify-content:center;
    font-size:calc(var(--circle) * 0.09);
    border:3px solid var(--terracotta-2);
    z-index:4;
}

/* CONTENT */
.testimonial-content{
    text-align:center;
}

.testimonial-text{
    color:var(--peach-text);
    font-size:17px;
    line-height:1.6;
    font-weight:500;
    max-width:700px;
    margin:0 auto;
}

.testimonial-content h4{
    color:#fff;
    font-size:16px;
    font-weight:700;
    margin-top:20px;
    margin-bottom:6px;
}

.testimonial-content span{
    color:var(--peach-soft);
    font-size:14px;
}

/* LOGO SLIDER */
.customer-logo-slider{
    margin-top:20px;
    width:100%;
    overflow:hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.customer-logos{
    display:flex;
    gap:20px;
    width:max-content;
    animation: customerMove 25s linear infinite;
    will-change: transform;
}

.customer-logo-slider:hover .customer-logos{
    animation-play-state:paused;
}

.logo-card{
    width:200px;
    height:90px;
    flex-shrink:0;
    background:#fff;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.2);
    transition:.3s ease;
}

.logo-card:hover{
    transform:translateY(-6px);
}

.logo-card img{
    max-width:120px;
    max-height:48px;
    object-fit:contain;
}

@keyframes customerMove{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
}

/* =========================
   RESPONSIVE
   All circle sub-elements (glow, rings, dashed ring, orbit dots,
   badge, quote mark) derive their size from --circle via calc(),
   so resizing here is the ONLY change needed per breakpoint —
   nothing drifts out of proportion.
========================= */
@media(max-width:992px){
    .customer-title{ font-size:24px; }
    .testimonial-wrapper{ flex-direction:column; gap:30px; }
    .quote-circle{ --circle:150px; margin-left:0px;}
    .testimonial-text{ font-size:16px; }
}

@media(max-width:576px){
    .customer-section{ padding:50px 0; }
    .customer-container{ padding:0 18px; }
    .customer-title{ font-size:20px; margin-bottom:35px; }
    .quote-circle{ --circle:120px; margin-left:0px;}
    .testimonial-text{ font-size:15px; }
    .testimonial-content h4{ font-size:15px; }
    .testimonial-content span{ font-size:13px; }
    .logo-card{ width:150px; height:75px; }
}

@media(max-width:420px){
    .quote-circle{ --circle:100px; margin-left:0px;}
    .logo-card{ width:130px; height:68px; }
    .logo-card img{ max-width:90px; max-height:38px; }
}