@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;600;700;900&display=swap');

.svpa-test{
  --svpa-test-bg:#f8f8f8;
  --svpa-test-ink:#0a0a0a;
  --svpa-test-red:#e31010;
  --svpa-test-white:#ffffff;
  --svpa-test-chrome:#9a9a9a;
  --svpa-test-wire:#d5d5d5;
  --svpa-test-stars:#c8922a;
  --svpa-test-label-color:#e31010;
  --svpa-test-h2-color:#0a0a0a;
  --svpa-test-em-color:#e31010;

  --svpa-test-card-bg:#ffffff;
  --svpa-test-active-shadow:0 12px 40px rgba(0,0,0,.1);
  --svpa-test-q-color:#e31010;
  --svpa-test-txt-color:#9a9a9a;
  --svpa-test-name-color:#0a0a0a;
  --svpa-test-car-color:#9a9a9a;
  --svpa-test-av-bg:#0a0a0a;
  --svpa-test-av-color:#e31010;

  --svpa-test-btn-border:#d5d5d5;
  --svpa-test-btn-stroke:#0a0a0a;
  --svpa-test-btn-h-bg:#e31010;
  --svpa-test-btn-h-stroke:#ffffff;

  --svpa-test-dot:#bcbcbc;
  --svpa-test-dot-on:#e31010;

  --svpa-test-wrap-max:1340px;
  --svpa-test-gap:24px;
  --svpa-test-ease:cubic-bezier(.16,1,.3,1);

  padding:120px 0;
  background:var(--svpa-test-bg);
  font-family:'Rajdhani',sans-serif;
  color:var(--svpa-test-ink);
}
.svpa-test *,
.svpa-test *::before,
.svpa-test *::after{box-sizing:border-box;}

.svpa-test-wrap{ max-width:var(--svpa-test-wrap-max); margin:0 auto; padding:0 28px; }

.svpa-test-head{ text-align:center; margin-bottom:60px; }
.svpa-test-label{
  font-family:'Orbitron',monospace;
  font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--svpa-test-label-color);
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:12px;
}
.svpa-test-label::before{ content:''; width:22px; height:1px; background:var(--svpa-test-label-color); }
.svpa-test-h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2rem,4vw,4rem);
  letter-spacing:3px;
  color:var(--svpa-test-h2-color);
  margin:0;
}
.svpa-test-h2 em{ color:var(--svpa-test-em-color); font-style:normal; }

.svpa-test-carousel-wrap{
  position:relative;
  overflow:hidden;
  /* Full-width mode: extend the carousel beyond the section container on
     either side. The `50vw - 50%` trick pulls the element's edge to the
     viewport edge regardless of viewport width (50% is relative to this
     element's parent content-box). */
  margin-left:calc(-1 * var(--svpa-test-fw-left, 0) * (50vw - 50%));
  margin-right:calc(-1 * var(--svpa-test-fw-right, 0) * (50vw - 50%));
}
.svpa-test-carousel{
  display:flex;gap:var(--svpa-test-gap);
  transition:transform .5s var(--svpa-test-ease);
}
.svpa-test-card{
  flex:0 0 calc((100% - var(--svpa-test-fw-left, 0) * (50vw - 50%) - var(--svpa-test-fw-right, 0) * (50vw - 50%) - var(--svpa-test-offset-left, 0px) - var(--svpa-test-offset-right, 0px) - (var(--svpa-test-per-view) - 1) * var(--svpa-test-gap)) / var(--svpa-test-per-view));
  min-width:calc((100% - var(--svpa-test-fw-left, 0) * (50vw - 50%) - var(--svpa-test-fw-right, 0) * (50vw - 50%) - var(--svpa-test-offset-left, 0px) - var(--svpa-test-offset-right, 0px) - (var(--svpa-test-per-view) - 1) * var(--svpa-test-gap)) / var(--svpa-test-per-view));
  background:var(--svpa-test-card-bg);
  padding:36px;
  border-bottom:3px solid var(--svpa-test-wire);
  transition:border-color .3s,box-shadow .3s,transform .3s;
  position:relative;overflow:hidden;
}
.svpa-test-card.svpa-test-on{
  border-color:var(--svpa-test-red);
  box-shadow:var(--svpa-test-active-shadow);
  transform:translateY(-4px);
}
.svpa-test-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:0;
  background:linear-gradient(to bottom,rgba(227,16,16,.06),transparent);
  transition:height .35s;
}
.svpa-test-card.svpa-test-on::before{ height:100%; }

.svpa-test-q{
  font-family:'Bebas Neue',sans-serif;
  font-size:4.5rem;
  color:var(--svpa-test-q-color);
  opacity:.12;
  line-height:1;
  margin-bottom:-12px;
  position:relative;
}
.svpa-test-stars{
  color:var(--svpa-test-stars);
  font-size:.9rem;letter-spacing:3px;
  margin-bottom:14px;
  position:relative;
}
.svpa-test-txt{
  font-size:.88rem;font-weight:400;font-style:italic;
  color:var(--svpa-test-txt-color);
  line-height:1.78;margin:0 0 24px;
  position:relative;
}
.svpa-test-auth{ display:flex;align-items:center;gap:12px;position:relative; }
.svpa-test-av{
  width:40px;height:40px;
  background:var(--svpa-test-av-bg);
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;
  font-size:.75rem;font-weight:700;
  color:var(--svpa-test-av-color);
  flex-shrink:0;
}
.svpa-test-name{ font-weight:700; font-size:.85rem; color:var(--svpa-test-name-color); }
.svpa-test-car{
  font-family:'Orbitron',monospace;
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--svpa-test-car-color);
  margin-top:2px;
}

.svpa-test-controls{ display:flex; justify-content:center; align-items:center; gap:16px; margin-top:36px; }
.svpa-test-btn{
  width:44px;height:44px;
  background:transparent;
  border:1px solid var(--svpa-test-btn-border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
  padding:0;
}
.svpa-test-btn:hover{ background:var(--svpa-test-btn-h-bg); border-color:var(--svpa-test-btn-h-bg); transform:scale(1.1); }
.svpa-test-btn svg{ width:16px;height:16px;stroke:var(--svpa-test-btn-stroke);stroke-width:2;fill:none; }
.svpa-test-btn:hover svg{ stroke:var(--svpa-test-btn-h-stroke); }

.svpa-test-dots{ display:flex; gap:7px; align-items:center; }
.svpa-test-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--svpa-test-dot);
  border:none;cursor:pointer;padding:0;
  transition:width .4s var(--svpa-test-ease), border-radius .4s var(--svpa-test-ease), background .25s;
}
.svpa-test-dot:hover{ background:var(--svpa-test-chrome); }
.svpa-test-dot.svpa-test-on{
  width:28px;
  background:var(--svpa-test-dot-on);
  border-radius:4px;
}

.svpa-test-sr{opacity:0;transform:translateY(36px);transition:opacity .7s var(--svpa-test-ease),transform .7s var(--svpa-test-ease);}
.svpa-test.svpa-test-vis .svpa-test-sr{ opacity:1; transform:none; }

/* Defaults — overridden per device by the widget's responsive controls
   (Cards Per View, Gap, Left/Right Offset, Center Mode, Left/Right Full Width). */
.svpa-test{
  --svpa-test-per-view:3;
  --svpa-test-offset-left:0px;
  --svpa-test-offset-right:0px;
  --svpa-test-center-mode:0;
  --svpa-test-fw-left:0;
  --svpa-test-fw-right:0;
}
@media (max-width:1100px){ .svpa-test{ --svpa-test-per-view:2; } }
@media (max-width:768px) { .svpa-test{ --svpa-test-per-view:1; padding:80px 0; } .svpa-test-card{ padding:28px; } }
@media (prefers-reduced-motion:reduce){ .svpa-test *{ transition:none !important; animation:none !important; } .svpa-test-sr{ opacity:1; transform:none; } }