/* =========================================================
   Naloxone Advocates Plymouth CIC — Site Styles (Full File)
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --text:#0B1220;
  --muted:#475569;

  --yellow:#F3C623;
  --blue:#3B63F0;
  --magenta:#E756A5;
  --lime:#A6E12E;
  --slate:#0F172A;

  --ring:rgba(15,23,42,.08);
  --shadow:
    0 20px 40px rgba(2,6,23,.14),
    0 8px 18px rgba(2,6,23,.08);
  --radius:20px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  letter-spacing:.1px;
}

h1,h2{ font-family:Poppins, system-ui, sans-serif }
h1{ font-size:44px; line-height:1.12; letter-spacing:-.2px; margin:0 0 10px }
h2{ font-size:32px; line-height:1.2; letter-spacing:-.1px; margin:8px 0 }

/* ---------- Layout helpers ---------- */
.container{ width:min(1120px, 92%); margin-inline:auto }
.center{ text-align:center }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

/* ---------- Navbar / Top band ---------- */
.topband{
  background:var(--yellow);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}
.topband .nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; gap:10px; align-items:center; text-decoration:none; color:inherit
}
.brand img{ width:44px; height:44px }
.brand span{ font-weight:800; font-size:14px; line-height:1.05 }

.menu{ display:flex; gap:18px; align-items:center }
.menu a{ color:#111827; text-decoration:none; font-weight:700; opacity:.92 }
.menu a:hover{ opacity:1 }
.menu .btn{ margin-left:6px }

.nav-toggle{ display:none; background:none; border:none }
.nav-toggle span{ display:block; width:24px; height:2px; background:#111; margin:5px 0 }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  text-decoration:none; font-weight:800; letter-spacing:.2px; border:2px solid transparent;
  transform: translateZ(0);
}
.btn-primary{ background:var(--blue); color:#fff; box-shadow:var(--shadow) }
.btn-primary:hover{ filter:brightness(1.02); transform:translateY(-1px) }
.btn-ghost{ background:#fff; color:#111; border-color:#E5E7EB; box-shadow:var(--shadow) }
.btn-dark{ background:#111827; color:#fff }
.btn-card{
  display:inline-flex; justify-content:center; width:100%;
  background:var(--yellow); color:#111; box-shadow:var(--shadow);
  border:2px solid rgba(0,0,0,.06);
}

/* ---------- Hero ---------- */
.hero{
  padding:42px 0 28px;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(59,99,240,.18), transparent 60%),
    var(--bg);
}
.hero-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:center }

.hero-card{
  background:var(--surface);
  border-radius:22px;
  padding:30px 28px;
  box-shadow:var(--shadow);
  outline:2px solid rgba(59,99,240,.06);
}
.hero-card p{ color:var(--muted); margin:0 0 16px }
.hero-card .actions{ display:flex; gap:14px; flex-wrap:wrap }

.hero-social{ justify-self:end }
.avatar-stack img{
  width:300px; height:220px; object-fit:cover; border-radius:18px; box-shadow:var(--shadow);
  outline:2px solid rgba(0,0,0,.06);
}
.social-dots{ display:flex; gap:10px; margin-top:12px }
.dot{ display:inline-block; width:13px; height:13px; border-radius:999px; background:#CBD5E1; box-shadow:var(--shadow) }
.dot.fb{ background:#1877F2 } .dot.ig{ background:#E1306C } .dot.tw{ background:#000 } .dot.yt{ background:#FF0000 }

/* ---------- KPI strip ---------- */
.kpis{ background:var(--blue); color:#fff; padding:22px 0 }
.kpis-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.kpi{ display:flex; flex-direction:column; align-items:center; gap:2px }
.kpi strong{ font-size:30px; letter-spacing:.2px }
.kpi span{ opacity:.95 }

/* ---------- Sections / headings ---------- */
.section{ padding:56px 0 }
.section-head{ text-align:center; max-width:780px; margin:0 auto 24px }
.eyebrow{
  display:inline-block; background:#EEF2FF; color:#111; padding:6px 10px;
  border-radius:999px; font-weight:700; font-size:12px
}

/* ---------- Cards & grids ---------- */
.cards-grid{ display:grid; gap:18px }
.cards-grid.three{ grid-template-columns:repeat(3,1fr) }
.cards-grid.four{ grid-template-columns:repeat(4,1fr) }
.card{
  background:var(--surface); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow); outline:1px solid var(--ring);
}
.card h3{ margin:6px 0 6px }
.card p{ color:var(--muted) }

/* Training cards */
.cards-grid.trainings{ grid-template-columns:repeat(3,1fr); gap:20px }
.card.training{
  border-radius:20px; padding:20px 18px 16px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card.training:hover{ transform:translateY(-2px); box-shadow:0 24px 44px rgba(2,6,23,.16) }
.training .card-top{ display:flex; gap:8px; margin:-6px 0 8px }
.badge{
  display:inline-block; font-size:12px; padding:5px 10px; border-radius:999px; font-weight:700;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 2px 0 rgba(0,0,0,.04) inset; background:#fff;
}
.badge.live{ background:#E8F9EF; color:#166534; border-color:#CBEFD8 }
.badge.open{ background:#E8EDFF; color:#1E3A8A; border-color:#CFD8FF }
.training .meta{ display:flex; gap:14px; color:#475569; font-size:14px; margin:12px 0 16px }

/* Split (About + Quote) */
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px }
.copy-card{
  background:var(--surface); border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow); outline:1px solid var(--ring)
}
.quote-card{
  position:relative;
  background:#fff; border-radius:18px; padding:22px 20px;
  box-shadow:var(--shadow); outline:1px solid var(--ring)
}
.quote-card::after{
  content:""; position:absolute; right:14px; bottom:14px;
  width:22px; height:22px; border-radius:6px;
  box-shadow:0 2px 0 rgba(0,0,0,.08) inset;
  background:#FFD9D9;
}
.quote-card p{ font-size:17px }
.quoter{ display:flex; align-items:center; gap:12px; margin-top:12px }
.quoter .avatar{ width:36px; height:36px; border-radius:999px; background:#CBD5E1; display:inline-block }
.quoter.small{ color:#6B7280 }

/* ---------- Gradient sections ---------- */
.gradient.green{
  background:linear-gradient(180deg, #EAF7C8 0%, #DFF5B4 100%);
  padding:56px 0;
  border-top:1px solid rgba(0,0,0,.04);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.gradient.purple{
  background:linear-gradient(180deg, #E756A5 0%, #3B63F0 100%);
  padding:56px 0; color:#fff
}
.gradient.purple h2{ color:#fff }
.gradient.blue{
  background:linear-gradient(180deg, #3B63F0 0%, #A6E12E 100%);
  padding:56px 0
}

/* Feature cards in program band */
.card.feature{ border-radius:18px; padding:18px 18px 16px }
.card.feature .icon{ font-size:30px; margin-bottom:6px }

/* ---------- Steps (How to Get Naloxone) ---------- */
.steps{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:16px }
.step{
  border-radius:20px; padding:22px; color:#fff; box-shadow:var(--shadow)
}
.step.blue{ background:#3B63F0 }
.step.magenta{ background:#E756A5 }
.badge-num{
  width:36px; height:36px; border-radius:50%;
  background:#fff; color:#111; display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; margin-bottom:8px
}
.alert{
  background:#F3C623; padding:16px; border-radius:14px; text-align:center; margin-top:18px; font-weight:800;
  border:2px solid rgba(0,0,0,.06)
}

/* ---------- Resources & News ---------- */
.cards-grid.three{ gap:20px }
.card.res, .card.news-item{ transition:transform .15s ease, box-shadow .15s ease }
.card.res:hover, .card.news-item:hover{ transform:translateY(-2px); box-shadow:0 24px 44px rgba(2,6,23,.16) }
.news-item img{ width:100%; height:150px; object-fit:cover; border-radius:14px }

/* ---------- Testimonials ---------- */
.testimonials .card.quote{ background:#fff; border-radius:18px }
.stars{ color:#F5C739 }
.testimonials.gradient.blue{
  background:linear-gradient(180deg, #3B63F0 0%, #A6E12E 100%);
}

/* ---------- CTA ---------- */
.cta{ padding:56px 0 0; background:linear-gradient(180deg, #FDF6B2 0%, #EAF7C8 100%) }
.cta-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:center }
.cta .actions{ display:flex; gap:12px; margin-top:8px }
.cta-bottom{
  margin-top:24px; background:#111827; color:#fff; text-align:center;
  padding:18px 10px; font-weight:900; letter-spacing:1px; font-size:16px;
  border-top:1px solid rgba(255,255,255,.05)
}
.social-inline a{ color:#111; text-decoration:none; margin-right:12px }

/* ---------- Footer ---------- */
.footer{
  background:#0B1220; color:#E2E8F0; padding:40px 0 20px
}
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:28px }
.footer h4,.footer h5{ margin:6px 0 }
.footer a{ color:#E2E8F0; text-decoration:none }
.footer .signup{ display:flex; gap:8px; margin-top:8px }
.footer input{
  flex:1; padding:10px 12px; border-radius:12px; border:1px solid #334155;
  background:#0F172A; color:#fff; height:42px
}
.footer .btn-dark{ height:42px; padding:0 14px }
.legal{ border-top:1px solid #1F2937; margin-top:18px; padding-top:12px; text-align:center }
.mini-social a{ margin-right:10px }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr }
  .split{ grid-template-columns:1fr }
  .cards-grid.three{ grid-template-columns:1fr 1fr }
  .cards-grid.four{ grid-template-columns:1fr 1fr }
  .steps{ grid-template-columns:1fr }
  .cta-grid{ grid-template-columns:1fr }
  .footer-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:600px){
  h1{ font-size:34px }
  .hero-card{ padding:24px }
  .avatar-stack img{ width:100%; height:200px }
  .kpis-grid{ grid-template-columns:1fr }
  .cards-grid.trainings{ grid-template-columns:1fr }
  .cards-grid.three, .cards-grid.four{ grid-template-columns:1fr }
  .menu{
    display:none; position:absolute; right:4%; top:64px;
    background:#fff; padding:14px; border-radius:12px; box-shadow:var(--shadow);
    flex-direction:column
  }
  .nav-toggle{ display:block }
  .menu.open{ display:flex }
  .footer-grid{ grid-template-columns:1fr }
}
/* ===== DEBUG FORCE (TEMPORARY) ===== */
body { --shadow: 0 22px 44px rgba(2,6,23,.16), 0 8px 18px rgba(2,6,23,.10); }

/* Header + brand spacing */
.topband .nav { padding: 16px 0 !important; }
.brand img { width: 48px !important; height: 48px !important; }
.brand span { font-size: 15px !important; font-weight: 900 !important; }

/* Hero: chunkier card + ring */
.hero-card{
  border-radius: 24px !important;
  outline: 2px solid rgba(59,99,240,.10) !important;
  box-shadow: var(--shadow) !important;
  padding: 32px 28px !important;
}
.avatar-stack img{
  width: 320px !important; height: 230px !important; border-radius: 20px !important;
  outline: 2px solid rgba(0,0,0,.06) !important;
}

/* KPI strip look */
.kpis { background: #3B63F0 !important; padding: 24px 0 !important; }
.kpi strong { font-size: 32px !important; }

/* Training cards: badges + hover */
.card.training { border-radius: 22px !important; }
.badge { border: 1px solid rgba(0,0,0,.08) !important; }
.card.training:hover { transform: translateY(-3px) !important; }

/* Quote card: red corner accent */
.quote-card::after{
  content:""; position:absolute; right: 14px; bottom: 14px;
  width: 22px; height: 22px; background: #FFD9D9; border-radius: 6px;
}

/* Program band + steps + emergency banner */
.gradient.green { background: linear-gradient(180deg,#EAF7C8 0%, #DFF5B4 100%) !important; }
.step.blue { background: #3B63F0 !important; }
.step.magenta { background: #E756A5 !important; }
.alert { border: 2px solid rgba(0,0,0,.06) !important; border-radius: 14px !important; }

/* Testimonials gradient band + white quote cards */
.testimonials.gradient.blue { background: linear-gradient(180deg,#3B63F0 0%, #A6E12E 100%) !important; }
.testimonials .card.quote { background: #fff !important; border-radius: 18px !important; }

/* Footer depth */
.footer { background: #0B1220 !important; }
.footer input { background: #0F172A !important; border: 1px solid #334155 !important; }
/* ============================
   🔥 FORCE FIX PACK: HERO, TRAINING CARDS, GREEN BAND
   ============================ */

/* === SECTION 2 — HERO FIX === */
.hero {
  padding: 60px 0 40px !important;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(59,99,240,.18), transparent 60%),
    #F8FAFC !important;
}
.hero-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr !important;
  gap: 30px !important;
  align-items: center !important;
}
.hero-card {
  background: #FFFFFF !important;
  border-radius: 26px !important;
  padding: 36px 32px !important;
  outline: 2px solid rgba(59,99,240,.12) !important;
  box-shadow: 0 22px 44px rgba(2,6,23,.14), 0 10px 22px rgba(2,6,23,.08) !important;
}
.hero-card h1 {
  font-size: 46px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px !important;
}
.avatar-stack img {
  width: 330px !important;
  height: 240px !important;
  border-radius: 20px !important;
  box-shadow: 0 22px 44px rgba(0,0,0,.16) !important;
  outline: 2px solid rgba(0,0,0,.06) !important;
}

/* === SECTION 4 — TRAINING CARDS === */
.cards-grid.trainings {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}
.card.training {
  border-radius: 24px !important;
  padding: 22px 20px 18px !important;
  outline: 2px solid rgba(15,23,42,.06) !important;
  background: #FFFFFF !important;
  box-shadow: 0 20px 40px rgba(15,23,42,.14) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.card.training:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 26px 50px rgba(15,23,42,.18) !important;
}
.badge {
  font-size: 12px !important;
  border-radius: 999px !important;
  padding: 6px 11px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}
.badge.live { background:#E8F9EF !important; color:#166534 !important; }
.badge.open { background:#E8EDFF !important; color:#1E3A8A !important; }
.btn-card {
  background: #F3C623 !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  padding: 12px 0 !important;
  border: 2px solid rgba(0,0,0,.06) !important;
}

/* === SECTION 6 — WRONG GREEN GRADIENT BAND === */
.gradient.green {
  background: linear-gradient(180deg, #EAF7C8 0%, #DFF5B4 100%) !important;
  padding: 60px 0 !important;
  border-top: 1px solid rgba(0,0,0,.04) !important;
  border-bottom: 1px solid rgba(0,0,0,.04) !important;
}
.card.feature {
  border-radius: 22px !important;
  padding: 24px 20px !important;
  background: #FFFFFF !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.10) !important;
  outline: 1px solid rgba(0,0,0,.06) !important;
}
.card.feature .icon {
  font-size: 34px !important;
  margin-bottom: 10px !important;
}
/* ==========================================
   SECTION 1 — HERO (lime green + blue card)
   ========================================== */

.hero {
  background: #d8f364 !important; /* lime background like screenshot */
  padding: 80px 0 60px !important;
}

.hero-grid {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr !important;
  gap: 40px !important;
  align-items: center !important;
}

.hero-card {
  background: #d8f364 !important; /* lime card */
  border-radius: 30px !important;
  padding: 50px 40px !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.12) !important;
  outline: none !important;
}

.hero-card h1 {
  font-size: 48px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #0b1220 !important;
}

.hero-card p {
  font-size: 18px !important;
  color: #111827 !important;
}

.hero-social .avatar-stack img {
  width: 280px !important;
  height: 280px !important;
  border-radius: 28px !important;
  object-fit: cover !important;
  background: #fff !important;
  display: block !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.15) !important;
}

.hero-social {
  background: #3b63f0 !important; /* bright hero blue box */
  padding: 40px 30px !important;
  border-radius: 30px !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.15) !important;
}

/* center social dots & style them */
.social-dots {
  display: flex !important;
  justify-content: center !important;
  margin-top: 20px !important;
  gap: 16px !important;
}

.social-dots .dot {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

/* ==========================================
   SECTION 4 — TRAINING CARDS (bright style)
   ========================================== */

.card.training {
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 24px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.08) !important;
}

.card.training:hover {
  transform: translateY(-4px) !important;
}

.badge.live {
  background: #14bfa0 !important;
  color: #fff !important;
}

.badge.open {
  background: #3b63f0 !important;
  color: #fff !important;
}

.btn-card {
  border-radius: 999px !important;
  background: #f3c623 !important;
  font-weight: 700 !important;
  padding: 12px 0 !important;
  border: none !important;
}

/* ==========================================
   SECTION 6 — PROGRAM GREEN BAND FIX
   ========================================== */

.gradient.green {
  background: #d8f364 !important; /* lime green */
  padding: 70px 0 !important;
}

.card.feature {
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 24px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,.15) !important;
  text-align: center !important;
}

.card.feature .icon {
  display: inline-block !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 12px !important;
  font-size: 30px !important;
  line-height: 50px !important;
  background: #3b63f0 !important;
  color: white !important;
  margin-bottom: 16px !important;
}
/* ==========================================
   SECTION 1 — FIX HERO BACKGROUND + CARDS
   ========================================== */

/* 1) Hero section background MUST be white */
.hero {
  background: #ffffff !important;
  padding: 80px 0 60px !important;
}

/* 2) HERO GRID — spacing + shape */
.hero-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  gap: 40px !important;
  align-items: center !important;
}

/* 3) LEFT HERO CARD — lime card ONLY */
.hero-card {
  background: #D8F364 !important; /* lime like screenshot */
  border-radius: 26px !important;
  padding: 50px 40px !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.14) !important;
  outline: none !important;
}

/* 4) Right hero box MUST be solid blue */
.hero-social {
  background: #3B63F0 !important;
  padding: 40px 30px !important;
  border-radius: 28px !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.15) !important;
}

/* 5) FIX IMAGE INSIDE BLUE BOX */
.hero-social .avatar-stack img {
  width: 260px !important;
  height: 260px !important;
  object-fit: cover !important;
  border-radius: 26px !important;
  box-shadow: none !important;
  outline: 2px solid rgba(255,255,255,.15) !important;
}

/* 6) FIX SOCIAL DOTS INSIDE BLUE BOX */
.hero-social .social-dots .dot {
  width: 18px !important;
  height: 18px !important;
  box-shadow: none !important;
  border-radius: 30px !important;
}

/* ==========================================
   UNDO incorrect lime background from before
   ========================================== */

.gradient.green {
  background: linear-gradient(180deg, #F1FFB5 0%, #D8F364 100%) !important; /* bright soft yellow-green */
}
/* ============================================================
   EXACT MATCH FIX — SECTION 1 (HERO) + SECTION 4 + SECTION 6
   ============================================================ */

/* ---------- SECTION 1: HERO BACKGROUND (WHITE) ---------- */
.hero {
  background: #ffffff !important;
  padding: 70px 0 60px !important;
}

/* Hero grid layout */
.hero-grid {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr !important;
  gap: 40px !important;
  align-items: center !important;
}

/* ---------- LEFT HERO CARD (LIME) ---------- */
.hero-card {
  background: #D8F364 !important; /* exact lime */
  border-radius: 26px !important;
  padding: 48px 40px !important;
  box-shadow: 0 26px 60px rgba(0,0,0,.14) !important;
}

.hero-card h1 {
  font-size: 44px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  color: #0b1220 !important;
}

.hero-card p {
  font-size: 18px !important;
  color: #0b1220 !important;
}

/* ---------- RIGHT HERO BOX (BLUE) ---------- */
.hero-social {
  background: #3B63F0 !important;
  padding: 40px 30px !important;
  border-radius: 28px !important;
  box-shadow: 0 26px 60px rgba(0,0,0,.22) !important;
}

/* Blue card image styling */
.hero-social .avatar-stack img {
  width: 260px !important;
  height: 260px !important;
  border-radius: 26px !important;
  object-fit: cover !important;
  outline: 3px solid rgba(255,255,255,.4) !important;
}

/* Icon dots under image */
.social-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 20px !important;
}

.social-dots .dot {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

/* ---------- SECTION 6: PROGRAM BAND (BRIGHT LIME GRADIENT) ---------- */

.gradient.green {
  background: linear-gradient(180deg,#D8F364 0%, #F1FF81 100%) !important;
  padding: 70px 0 !important;
}

/* White program cards */
.card.feature {
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 24px !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.15) !important;
  text-align: center !important;
}

.card.feature .icon {
  background: #3B63F0 !important;
  color: #ffffff !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  line-height: 52px !important;
  font-size: 30px !important;
  margin-bottom: 18px !important;
}

/* ---------- SECTION 4: TRAINING CARDS ---------- */

.card.training {
  background: #ffffff !important;
  border-radius: 22px !important;
  padding: 24px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.1) !important;
}

.badge.live {
  background:#14BFA0 !important;
  color:#fff !important;
}

.badge.open {
  background:#3B63F0 !important;
  color:#fff !important;
}

.btn-card {
  background:#F3C623 !important;
  border-radius:999px !important;
  padding:12px 0 !important;
  font-weight:700 !important;
  border:none !important;
}
``