/* ============================================================
   DESIGN 1 — "Blue Gradient Modern" theme for Bakka Academy
   Everything is prefixed with .b1-  and vars with --b1-  so it
   can never collide with Bootstrap / design2 (d2-) / course-learn (cl-).
   Works in RTL (ar) and LTR (en).
   ============================================================ */
:root {
  --b1-navy-deep:  #0d164f;   /* deep navy — headings & body text only */
  --b1-navy-mid:   #2b66bf;   /* primary blue — buttons, links, hero */

  /* light blue surfaces (header, hero, steps, footer) */
  --b1-surface:      #2b66bf;   /* flat primary blue */
  --b1-surface-alt:  #3a53a4;   /* indigo, for depth */
  --b1-surface-lift: #3f7bd0;   /* lighter blue, highlight side */
  --b1-sky:        #62d4f5;   /* info / light blue accent */
  --b1-cyan:       #2bc4ef;   /* bright blue accent on dark surfaces */
  --b1-green:      #12c96c;   /* success */
  --b1-orange:     #f6b93b;   /* yellow highlight — main CTA */
  --b1-dark:       #1f2937;
  --b1-gray:       #6b7280;
  --b1-light-gray: #9ca3af;
  --b1-white:      #ffffff;
  --b1-footer-bg:  #2b66bf;
  --b1-bg-soft:    #f6f6f7;   /* page background */

  --b1-shadow-card:  0 4px 24px rgba(13,22,79,0.10);
  --b1-shadow-hover: 0 16px 48px rgba(13,22,79,0.20);
  --b1-radius-card:  16px;
  --b1-radius-btn:   50px;
}

/* ---------- keyframes ---------- */
@keyframes b1-fadeInUp { from { opacity:0; transform:translateY(36px);} to {opacity:1; transform:translateY(0);} }
@keyframes b1-float    { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
@keyframes b1-pulseRing{ 0%,100%{box-shadow:0 0 0 0 rgba(43,196,239,.45);} 60%{box-shadow:0 0 0 14px rgba(43,196,239,0);} }
@keyframes b1-shimmer  { 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }

/* ---------- scroll reveal ---------- */
.b1-reveal { opacity:0; transform:translateY(36px);
  transition: opacity .75s cubic-bezier(.22,.68,0,1.2), transform .75s cubic-bezier(.22,.68,0,1.2); }
.b1-reveal.b1-visible { opacity:1; transform:translateY(0); }

/* ---------- layout helpers ---------- */
.b1-wrap  { font-family:'Tajawal',sans-serif; color:var(--b1-dark); }
.b1-container { max-width:1240px; margin:0 auto; padding:0 24px; }
.b1-section   { padding:88px 24px; }

.b1-section-label {
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--b1-cyan); background:rgba(43,196,239,.1);
  padding:5px 16px; border-radius:50px; margin-bottom:14px;
}
.b1-section-title {
  font-family:'Cairo',sans-serif; font-size:clamp(26px,4vw,42px); font-weight:900;
  color:var(--b1-dark); text-align:center; margin:0 0 12px; line-height:1.3;
}
.b1-section-title .b1-hl {
  background:linear-gradient(120deg,var(--b1-navy-deep) 0%,var(--b1-navy-mid) 50%,var(--b1-sky) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.b1-section-sub {
  text-align:center; color:var(--b1-gray); font-size:17px; line-height:1.8;
  max-width:620px; margin:0 auto 52px;
}

/* ============================================================
   HEADER / NAV  (sticky + solid so it works on every page)
============================================================ */
.b1-header {
  position:fixed; top:0; inset-inline:0; z-index:1000; padding:0 32px;
  background:linear-gradient(135deg,var(--b1-surface) 0%,var(--b1-surface-lift) 100%);
  box-shadow:0 2px 18px rgba(8,14,56,.28);
  transition:box-shadow .35s, background .35s;
  font-family:'Cairo',sans-serif;
}
.b1-header.b1-scrolled { box-shadow:0 8px 30px rgba(0,0,0,.38); }
/* reserve space so the fixed header never overlaps page content */
.b1-header-spacer { height:74px; }

.b1-nav { max-width:1240px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; height:74px; gap:20px; }

.b1-logo { display:flex; align-items:center; gap:11px; flex-shrink:0; color:#fff; text-decoration:none; }
.b1-logo-badge {
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(140deg,var(--b1-cyan) 0%,var(--b1-navy-mid) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cairo',sans-serif; font-size:18px; font-weight:900; color:#fff;
  animation:b1-pulseRing 3s ease infinite; box-shadow:0 0 0 3px rgba(255,255,255,.15);
  overflow:hidden;
}
.b1-logo-badge img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.b1-logo-name { font-family:'Cairo',sans-serif; font-weight:800; font-size:20px; color:#fff; }

.b1-nav-links { display:flex; align-items:center; gap:4px; flex:1; justify-content:center; margin:0; padding:0; list-style:none; }
.b1-nav-links a {
  color:rgba(255,255,255,.82); font-size:15px; font-weight:500; padding:8px 15px;
  border-radius:8px; transition:color .2s,background .2s; text-decoration:none;
}
.b1-nav-links a:hover, .b1-nav-links a.b1-active { color:#fff; background:rgba(255,255,255,.10); }

.b1-nav-cta { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.b1-btn-ghost {
  color:rgba(255,255,255,.88); font-size:14px; font-weight:600; padding:9px 20px;
  border:1.5px solid rgba(255,255,255,.35); border-radius:var(--b1-radius-btn);
  transition:all .25s; background:transparent; text-decoration:none; white-space:nowrap;
}
.b1-btn-ghost:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.7); color:#fff; }

.b1-btn-orange {
  color:#fff; font-size:14px; font-weight:800; padding:10px 24px;
  background:linear-gradient(135deg,var(--b1-orange),#f59e0b); border-radius:var(--b1-radius-btn);
  transition:all .3s; box-shadow:0 4px 18px rgba(246,185,59,.42); border:none; cursor:pointer;
  text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.b1-btn-orange:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(246,185,59,.55); color:#fff; }

.b1-user-img { width:44px; height:44px; border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,.4); flex-shrink:0; display:block; }
.b1-user-img img { width:100%; height:100%; object-fit:cover; }

.b1-nav-toggle { display:none; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:8px; padding:8px 12px; cursor:pointer; font-size:18px; }

/* mobile drop panel */
.b1-mobile-menu { display:none; flex-direction:column; gap:6px; padding:14px 24px 22px;
  background:rgba(43,102,191,.97); }
.b1-mobile-menu.b1-open { display:flex; }
.b1-mobile-menu a { color:rgba(255,255,255,.85); font-size:16px; padding:11px 14px; border-radius:8px; text-decoration:none; }
.b1-mobile-menu a:hover, .b1-mobile-menu a.b1-active { background:rgba(255,255,255,.10); color:#fff; }

/* ============================================================
   HERO
============================================================ */
.b1-hero {
  position:relative; min-height:88vh;
  background:linear-gradient(155deg,var(--b1-surface-alt) 0%,var(--b1-surface) 35%,var(--b1-surface) 62%,var(--b1-surface-lift) 82%,var(--b1-sky) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 24px 90px; overflow:hidden; text-align:center;
}
.b1-hero-glow-1 { position:absolute; top:-180px; inset-inline-start:-180px; width:620px; height:620px;
  background:radial-gradient(circle,rgba(43,196,239,.14) 0%,transparent 68%); border-radius:50%; pointer-events:none; }
.b1-hero-glow-2 { position:absolute; bottom:80px; inset-inline-end:-120px; width:520px; height:520px;
  background:radial-gradient(circle,rgba(98,212,245,.12) 0%,transparent 65%); border-radius:50%; pointer-events:none; }
.b1-hero-dots { position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px); background-size:40px 40px; }

.b1-hero-content { position:relative; z-index:2; max-width:880px; animation:b1-fadeInUp 1s ease forwards; }
.b1-hero-pill {
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--b1-radius-btn); padding:8px 22px;
  color:rgba(255,255,255,.9); font-size:14px; font-weight:500; margin-bottom:26px; backdrop-filter:blur(8px);
}
.b1-hero-pill strong { color:var(--b1-cyan); font-weight:800; }
.b1-hero-headline {
  font-family:'Cairo',sans-serif; font-size:clamp(38px,6.5vw,72px); font-weight:900; line-height:1.2; margin-bottom:20px;
  background:linear-gradient(130deg,#fff 0%,#c0eefb 45%,var(--b1-cyan) 100%); background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:b1-shimmer 5s linear infinite;
}
.b1-hero-headline .b1-hl { -webkit-text-fill-color:transparent; }
.b1-hero-sub { font-size:clamp(16px,2.2vw,20px); color:rgba(255,255,255,.74); line-height:1.85; max-width:680px; margin:0 auto 40px; }

.b1-hero-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:64px; }
.b1-btn-green {
  display:inline-flex; align-items:center; gap:9px; padding:16px 38px;
  background:linear-gradient(135deg,#0ea75a,var(--b1-green)); color:#fff; font-size:16px; font-weight:800;
  border-radius:var(--b1-radius-btn); border:none; cursor:pointer; font-family:'Cairo',sans-serif;
  transition:all .3s; box-shadow:0 6px 28px rgba(18,201,108,.42); text-decoration:none;
}
.b1-btn-green:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(18,201,108,.55); color:#fff; }
.b1-btn-outline {
  display:inline-flex; align-items:center; gap:9px; padding:15px 38px; background:transparent; color:#fff;
  font-size:16px; font-weight:600; border-radius:var(--b1-radius-btn); border:2px solid rgba(255,255,255,.55);
  cursor:pointer; font-family:'Cairo',sans-serif; transition:all .3s; text-decoration:none;
}
.b1-btn-outline:hover { background:rgba(255,255,255,.1); border-color:#fff; transform:translateY(-3px); color:#fff; }

.b1-hero-stats { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr);
  gap:18px; width:100%; max-width:940px; animation:b1-fadeInUp 1s .35s ease both; }
.b1-stat-card {
  background:rgba(255,255,255,.09); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--b1-radius-card); padding:22px 16px 18px; text-align:center; transition:transform .3s,box-shadow .3s;
}
.b1-stat-card:hover { transform:translateY(-5px); box-shadow:0 10px 36px rgba(43,196,239,.22); }
.b1-stat-emoji { font-size:30px; display:block; margin-bottom:8px; }
.b1-stat-num { display:block; font-family:'Cairo',sans-serif; font-size:24px; font-weight:900; color:#fff; line-height:1.1; }
.b1-stat-lbl { font-size:13px; color:rgba(255,255,255,.65); }

.b1-hero-skyline { position:absolute; bottom:0; inset-inline:0; width:100%; z-index:1; }

/* ============================================================
   CATEGORIES band
============================================================ */
.b1-categories { background:var(--b1-bg-soft); }
.b1-chips-wrap { display:flex; flex-wrap:wrap; gap:13px; justify-content:center; }
.b1-chip {
  display:inline-flex; align-items:center; gap:8px; padding:12px 26px; background:#fff;
  border:2px solid #e5e7eb; border-radius:var(--b1-radius-btn); font-size:15px; font-weight:600;
  color:var(--b1-dark); cursor:pointer; transition:all .28s; box-shadow:0 2px 8px rgba(0,0,0,.05);
  font-family:'Cairo',sans-serif; text-decoration:none;
}
.b1-chip:hover, .b1-chip.b1-active {
  background:linear-gradient(135deg,var(--b1-surface),var(--b1-surface-lift)); color:#fff; border-color:var(--b1-surface);
  transform:translateY(-3px); box-shadow:0 8px 24px rgba(13,22,79,.28);
}

/* ============================================================
   COURSES / CARDS GRID
============================================================ */
.b1-courses-section { background:#fff; }
.b1-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

.b1-card {
  background:#fff; border-radius:var(--b1-radius-card); overflow:hidden; box-shadow:var(--b1-shadow-card);
  transition:transform .32s cubic-bezier(.22,.68,0,1.1),box-shadow .32s ease; display:flex; flex-direction:column;
}
.b1-card:hover { transform:translateY(-10px); box-shadow:var(--b1-shadow-hover); }

.b1-cover { height:184px; display:flex; align-items:center; justify-content:center; position:relative;
  overflow:hidden; background-size:cover; background-position:center; text-decoration:none; }
.b1-cover::after { content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 45%,rgba(0,0,0,.28) 100%); }
.b1-cover-emoji { font-size:64px; position:relative; z-index:1; animation:b1-float 5s ease-in-out infinite;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.28)); }

.b1-cover-badge {
  position:absolute; top:14px; inset-inline-start:14px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3); color:#fff; font-size:11px; font-weight:700; padding:4px 12px;
  border-radius:var(--b1-radius-btn); z-index:2; font-family:'Cairo',sans-serif;
}
.b1-cover-badge.b1-discount { background:rgba(178,46,79,.85); border-color:rgba(178,46,79,.4); }
.b1-cover-price {
  position:absolute; bottom:14px; inset-inline-end:14px; z-index:2; background:rgba(255,255,255,.92);
  color:var(--b1-navy-deep); font-family:'Cairo',sans-serif; font-weight:900; font-size:13px;
  padding:5px 14px; border-radius:var(--b1-radius-btn);
}

.b1-card-body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.b1-card-cat { font-size:11.5px; font-weight:700; letter-spacing:.4px; color:var(--b1-navy-mid); margin-bottom:7px; }
.b1-card-title { font-family:'Cairo',sans-serif; font-size:15.5px; font-weight:800; color:var(--b1-dark);
  line-height:1.55; margin-bottom:9px; }
.b1-card-title a { color:inherit; text-decoration:none; }
.b1-card-title a:hover { color:var(--b1-navy-mid); }
.b1-card-desc { font-size:13.5px; color:var(--b1-gray); line-height:1.75;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:14px; }

.b1-card-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.b1-meta-pill { font-size:12px; font-weight:600; padding:4px 12px; border:1.5px solid #e5e7eb;
  border-radius:var(--b1-radius-btn); color:var(--b1-gray); }

.b1-card-actions { display:flex; gap:9px; margin-top:auto; }
.b1-btn-cart {
  flex:1; padding:10px; border:2px solid var(--b1-sky); color:var(--b1-navy-mid); border-radius:var(--b1-radius-btn);
  font-size:13px; font-weight:700; background:transparent; cursor:pointer; transition:all .22s; text-align:center; text-decoration:none;
}
.b1-btn-cart:hover { background:var(--b1-sky); color:#fff; }
.b1-btn-enroll {
  flex:1; padding:10px; background:linear-gradient(135deg,#0ea75a,var(--b1-green)); color:#fff; border:none;
  border-radius:var(--b1-radius-btn); font-size:13px; font-weight:700; cursor:pointer; transition:all .22s;
  text-align:center; text-decoration:none;
}
.b1-btn-enroll:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(18,201,108,.42); color:#fff; }

/* ============================================================
   WHY BAKKA  (features)
============================================================ */
.b1-why-section { background:var(--b1-bg-soft); }
.b1-features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.b1-feature-card {
  background:#fff; border-radius:var(--b1-radius-card); padding:36px 26px 30px; text-align:center;
  box-shadow:var(--b1-shadow-card); border:1px solid #f3f4f6; transition:transform .3s,box-shadow .3s;
}
.b1-feature-card:hover { transform:translateY(-7px); box-shadow:var(--b1-shadow-hover); }
.b1-feat-icon { width:72px; height:72px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  font-size:34px; margin:0 auto 18px; }
.b1-feat-blue  { background:linear-gradient(135deg,#d5e0f2,#aac2e5); }
.b1-feat-green { background:linear-gradient(135deg,#d0f4e2,#a0e9c4); }
.b1-feat-amber { background:linear-gradient(135deg,#fdf1d8,#fbe3b1); }
.b1-feat-pink  { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
.b1-feat-title { font-family:'Cairo',sans-serif; font-size:18px; font-weight:800; color:var(--b1-dark); margin-bottom:10px; }
.b1-feat-desc  { font-size:14px; color:var(--b1-gray); line-height:1.85; }

/* stats strip (real counts) */
.b1-stats-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; }
.b1-stat-box { background:#fff; border:1px solid #e8f1fb; border-radius:var(--b1-radius-card); padding:24px 16px;
  text-align:center; box-shadow:var(--b1-shadow-card); }
.b1-stat-box strong { display:block; font-family:'Cairo',sans-serif; font-size:30px; font-weight:900;
  background:linear-gradient(120deg,var(--b1-navy-deep),var(--b1-sky)); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text; }
.b1-stat-box span { font-size:14px; color:var(--b1-gray); }

/* ============================================================
   STEPS
============================================================ */
.b1-steps-section { background:linear-gradient(140deg,var(--b1-surface) 0%,var(--b1-surface-alt) 100%);
  position:relative; overflow:hidden; }
.b1-steps-section::before { content:''; position:absolute; top:-20%; inset-inline-end:-8%; width:560px; height:560px;
  background:radial-gradient(circle,rgba(43,196,239,.1) 0%,transparent 68%); border-radius:50%; }
.b1-steps-section .b1-section-title { color:#fff; }
.b1-steps-section .b1-section-sub { color:rgba(255,255,255,.66); }
.b1-steps-list { max-width:720px; margin:0 auto; position:relative; z-index:2; }
.b1-step-row { display:flex; align-items:stretch; gap:26px; }
.b1-step-marker { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:62px; }
.b1-step-circle { width:62px; height:62px; border-radius:50%;
  background:linear-gradient(135deg,var(--b1-cyan) 0%,var(--b1-sky) 100%); display:flex; align-items:center;
  justify-content:center; font-family:'Cairo',sans-serif; font-size:24px; font-weight:900; color:#fff; flex-shrink:0;
  box-shadow:0 0 0 6px rgba(43,196,239,.22),0 4px 20px rgba(0,0,0,.2); position:relative; z-index:2; }
.b1-step-connector { flex:1; width:2px; border-inline-end:2px dashed rgba(255,255,255,.32); min-height:40px; margin:10px 0; }
.b1-step-body { flex:1; background:rgba(255,255,255,.1); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--b1-radius-card); padding:24px 28px; margin-bottom:26px;
  transition:transform .3s,box-shadow .3s; }
.b1-step-body:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.2); }
.b1-step-row:last-child .b1-step-body { margin-bottom:0; }
.b1-step-row:last-child .b1-step-connector { display:none; }
.b1-step-title { font-family:'Cairo',sans-serif; font-size:20px; font-weight:800; color:#fff; margin-bottom:8px; }
.b1-step-desc { font-size:15px; color:rgba(255,255,255,.74); line-height:1.8; }

/* ============================================================
   TESTIMONIALS
============================================================ */
.b1-testi-section { background:#fff; }
.b1-testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.b1-testi-card { background:#fff; border-radius:var(--b1-radius-card); padding:32px 30px; box-shadow:var(--b1-shadow-card);
  border:1px solid #f3f4f6; transition:transform .3s,box-shadow .3s; position:relative; }
.b1-testi-card:hover { transform:translateY(-7px); box-shadow:var(--b1-shadow-hover); }
.b1-quote-mark { position:absolute; top:16px; inset-inline-start:20px; font-size:90px; line-height:1; color:#e8f1fb;
  font-family:Georgia,serif; user-select:none; pointer-events:none; font-weight:900; }
.b1-testi-stars { color:#f6b93b; font-size:18px; letter-spacing:3px; margin-bottom:14px; }
.b1-testi-quote { font-size:15px; color:var(--b1-gray); line-height:1.85; margin-bottom:22px; position:relative; z-index:1; }
.b1-testi-author { display:flex; align-items:center; gap:13px; }
.b1-testi-avatar { width:50px; height:50px; border-radius:50%; flex-shrink:0; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; font-family:'Cairo',sans-serif; font-weight:800; font-size:17px; color:#fff; }
.b1-testi-name { font-family:'Cairo',sans-serif; font-size:15px; font-weight:800; color:var(--b1-dark); }
.b1-testi-role { font-size:13px; color:var(--b1-light-gray); }

/* ============================================================
   CONTACT
============================================================ */
.b1-contact-section { background:var(--b1-bg-soft); }
.b1-contact-card { max-width:680px; margin:0 auto; background:#fff; border-radius:var(--b1-radius-card);
  box-shadow:var(--b1-shadow-card); border:1px solid #f3f4f6; padding:34px; }
.b1-contact-card .form-group { margin-bottom:16px; }
.b1-contact-card .form-control { border-radius:12px; border:1.5px solid #e5e7eb; padding:13px 16px; font-size:15px; }
.b1-contact-card .form-control:focus { border-color:var(--b1-sky); box-shadow:0 0 0 4px rgba(98,212,245,.14); }
.b1-contact-card .captcha { display:flex; align-items:center; gap:10px; margin-bottom:12px; }

/* sub-header for inner pages (courses, etc.) */
.b1-subhead { background:linear-gradient(150deg,var(--b1-surface-alt),var(--b1-surface) 55%,var(--b1-surface-lift));
  color:#fff; text-align:center; padding:64px 24px; }
.b1-subhead h1 { font-family:'Cairo',sans-serif; font-size:clamp(28px,5vw,44px); font-weight:900; margin:0 0 12px;
  background:linear-gradient(130deg,#fff,#c0eefb,var(--b1-cyan)); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text; }
.b1-subhead p { color:rgba(255,255,255,.75); font-size:17px; max-width:620px; margin:0 auto; line-height:1.8; }

/* ============================================================
   FOOTER
============================================================ */
.b1-footer { background:var(--b1-footer-bg); padding:76px 24px 34px; font-family:'Tajawal',sans-serif; }
.b1-footer-inner { max-width:1240px; margin:0 auto; }
.b1-footer-grid { display:grid; grid-template-columns:2.2fr 1fr 1fr 1.5fr; gap:48px; margin-bottom:50px; }
.b1-footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; text-decoration:none; }
.b1-footer-logo-badge { width:42px; height:42px; border-radius:50%;
  background:linear-gradient(140deg,var(--b1-cyan),var(--b1-navy-mid)); display:flex; align-items:center;
  justify-content:center; font-family:'Cairo',sans-serif; font-size:16px; font-weight:900; color:#fff; overflow:hidden; }
.b1-footer-logo-badge img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.b1-footer-logo-name { font-family:'Cairo',sans-serif; font-weight:800; font-size:18px; color:#fff; }
.b1-footer-desc { font-size:14px; color:rgba(255,255,255,.78); line-height:1.85; margin-bottom:24px; }
.b1-social-row { display:flex; gap:11px; }
.b1-social-btn { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28); display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.85); font-size:15px; transition:all .28s; text-decoration:none; }
.b1-social-btn:hover { background:#fff; color:var(--b1-navy-mid); transform:translateY(-3px); }
.b1-social-btn img { width:17px; height:17px; filter:brightness(0) invert(1); opacity:.85; transition:filter .28s, opacity .28s; }
/* the chip turns white on hover, so the icon must go blue — design2's
   `footer a:hover{color:#fff!important}` would otherwise hide it */
.b1-social-btn:hover, .b1-social-btn:hover i {
  color:var(--b1-navy-mid) !important; -webkit-text-fill-color:var(--b1-navy-mid) !important;
}
.b1-social-btn:hover img { filter:none; opacity:1; }
.b1-footer-col-title { font-family:'Cairo',sans-serif; font-size:16px; font-weight:800; color:#fff; margin-bottom:20px;
  padding-bottom:12px; position:relative; }
.b1-footer-col-title::after { content:''; position:absolute; bottom:0; inset-inline-start:0; width:34px; height:2.5px;
  background:linear-gradient(90deg,var(--b1-cyan),var(--b1-sky)); border-radius:2px; }
.b1-footer-links { margin:0; padding:0; list-style:none; }
.b1-footer-links li { margin-bottom:10px; }
.b1-footer-links a { font-size:14px; color:rgba(255,255,255,.82); transition:color .2s; display:flex; align-items:center; gap:6px; text-decoration:none; }
.b1-footer-links a::before { content:'\203A'; font-size:18px; color:var(--b1-orange); opacity:0;
  transition:opacity .2s,transform .2s; transform:translateX(4px); }
.b1-footer-links a:hover { color:#fff; }
.b1-footer-links a:hover::before { opacity:1; transform:translateX(0); }
.b1-contact-row { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.b1-contact-row i { color:var(--b1-orange); margin-top:2px; flex-shrink:0; width:15px; }
.b1-contact-row span { font-size:14px; color:rgba(255,255,255,.8); line-height:1.65; }
.b1-footer-divider { border:none; border-top:1px solid rgba(255,255,255,.18); margin-bottom:24px; }
.b1-footer-copy { text-align:center; font-size:13.5px; color:rgba(255,255,255,.7); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1024px){
  .b1-features-grid{ grid-template-columns:repeat(2,1fr); }
  .b1-footer-grid{ grid-template-columns:1fr 1fr; }
  .b1-stats-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .b1-nav-links{ display:none; }
  .b1-nav-toggle{ display:flex; }
  .b1-hero-stats{ grid-template-columns:repeat(2,1fr); }
  .b1-hero-buttons{ flex-direction:column; align-items:center; }
  .b1-grid{ grid-template-columns:repeat(2,1fr); }
  .b1-testi-grid{ grid-template-columns:1fr; }
  .b1-section{ padding:64px 20px; }
}
@media (max-width:580px){
  .b1-grid{ grid-template-columns:1fr; }
  .b1-features-grid{ grid-template-columns:1fr; }
  .b1-footer-grid{ grid-template-columns:1fr; }
  .b1-hero-stats{ grid-template-columns:repeat(2,1fr); }
  .b1-nav-cta .b1-btn-ghost{ display:none; }
}

/* ============================================================
   OVERRIDES — neutralize design2.css aggressive !important rules.
   design2.css loads BEFORE design1.css and forces:
     header { background: transparent !important }
     h1..h6 { color/-webkit-text-fill-color: ink !important;
              background: none !important; font-family: Plus Jakarta !important }
   These class-based rules (higher specificity) win over those.
============================================================ */

/* header must stay navy + fixed (design2 forces transparent + absolute) */
.b1-header {
  background: linear-gradient(135deg,var(--b1-surface) 0%,var(--b1-surface-lift) 100%) !important;
  position: fixed !important;
  top: 0 !important;
  inset-inline: 0 !important;
  z-index: 1000 !important;
}

/* gradient text elements — restore clip + transparent fill */
.b1-hero-headline,
.b1-section-title .b1-hl,
.b1-subhead h1,
.b1-stat-box strong {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.b1-hero-headline { background-image: linear-gradient(130deg,#fff 0%,#c0eefb 45%,#2bc4ef 100%) !important; }
.b1-subhead h1    { background-image: linear-gradient(130deg,#fff,#c0eefb,#2bc4ef) !important; }
.b1-section-title .b1-hl { background-image: linear-gradient(120deg,#0d164f,#2b66bf,#62d4f5) !important; }
.b1-stat-box strong      { background-image: linear-gradient(120deg,#0d164f,#62d4f5) !important; }

/* light-background headings stay dark, Cairo font */
.b1-section-title,
.b1-card-title, .b1-card-title a, .b1-feat-title {
  font-family: 'Cairo', sans-serif !important;
  color: var(--b1-dark) !important;
  -webkit-text-fill-color: var(--b1-dark) !important;
  background: none !important;
}
.b1-card-title a:hover { color: var(--b1-navy-mid) !important; -webkit-text-fill-color: var(--b1-navy-mid) !important; }

/* dark-background headings turn white */
.b1-steps-section .b1-section-title,
.b1-step-title,
.b1-footer-col-title {
  font-family: 'Cairo', sans-serif !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

/* Cairo font on heading-like spans/divs hit by the p,div rule */
.b1-hero-headline, .b1-testi-name, .b1-logo-name, .b1-footer-logo-name,
.b1-step-circle, .b1-stat-num, .b1-section-label {
  font-family: 'Cairo', sans-serif !important;
}

/* body text keeps Tajawal (design2 forces Plus Jakarta on p,div) */
.b1-hero-sub, .b1-section-sub, .b1-card-desc, .b1-feat-desc,
.b1-testi-quote, .b1-step-desc, .b1-footer-desc, .b1-meta-pill,
.b1-card-cat, .b1-contact-row span {
  font-family: 'Tajawal', sans-serif !important;
}

/* steps section keeps its sub-title light on the blue gradient */
.b1-steps-section .b1-section-sub { color: rgba(255,255,255,.66) !important; }

/* reveal safety net — never leave content hidden for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .b1-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   STUDENT DASHBOARD  +  slide-in profile panel (from navbar avatar)
============================================================ */
.b1-dash { padding: 30px 0 70px; min-height: 62vh; }
.b1-dash .col-lg-9 { flex: 0 0 100%; max-width: 100%; }   /* full width — sidebar removed */

.b1-dash-head {
  display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--b1-border,#eceff3);
  box-shadow:var(--b1-shadow-card); border-radius:14px; padding:14px 18px; margin-bottom:20px;
}
.b1-dash-head .b1-dash-ico { width:34px; height:34px; border-radius:10px; background:rgba(246,185,59,.12);
  color:var(--b1-orange); display:flex; align-items:center; justify-content:center; font-size:15px; }
.b1-dash-head h2 { font-family:'Cairo',sans-serif; font-size:16px; font-weight:800; color:var(--b1-dark); margin:0; }

/* 2-column course grid for the dashboard */
.b1-grid.b1-grid-2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:880px){ .b1-grid.b1-grid-2 { grid-template-columns:1fr; } }

/* avatar trigger button in navbar */
.b1-user-trigger { cursor:pointer; background:none; border:none; padding:0; }

/* overlay */
.b1-panel-overlay { position:fixed; inset:0; background:rgba(8,14,56,.55); z-index:1100;
  opacity:0; visibility:hidden; transition:opacity .3s; }
.b1-panel-overlay.b1-open { opacity:1; visibility:visible; }

/* the panel */
.b1-dash-panel {
  position:fixed; top:0; height:100%; width:340px; max-width:86vw;
  background:linear-gradient(180deg,var(--b1-surface) 0%,var(--b1-surface-alt) 100%); color:#fff; z-index:1101;
  display:flex; flex-direction:column; box-shadow:0 0 60px rgba(0,0,0,.5);
  transition:transform .32s cubic-bezier(.4,0,.2,1); font-family:'Cairo',sans-serif;
}
html[dir=ltr] .b1-dash-panel { right:0; transform:translateX(110%); }
html[dir=ltr] .b1-dash-panel.b1-open { transform:translateX(0); }
html[dir=rtl] .b1-dash-panel { left:0; transform:translateX(-110%); }
html[dir=rtl] .b1-dash-panel.b1-open { transform:translateX(0); }

.b1-dp-top { display:flex; align-items:center; justify-content:space-between; padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08); }
.b1-dp-top h3 { font-size:17px; font-weight:800; color:#fff; display:flex; align-items:center; gap:10px; margin:0; }
.b1-dp-top h3 i { color:var(--b1-sky); }
.b1-dp-close { background:none; border:none; color:rgba(255,255,255,.7); font-size:22px; cursor:pointer; line-height:1; }
.b1-dp-close:hover { color:#fff; }

.b1-dp-profile { display:flex; align-items:center; gap:14px; padding:22px 20px;
  border-bottom:1px solid rgba(255,255,255,.08); }
.b1-dp-avatar { width:58px; height:58px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(98,212,245,.6); flex-shrink:0; }
.b1-dp-name { font-size:16px; font-weight:800; color:#fff; }
.b1-dp-mail { font-size:12.5px; color:var(--b1-sky); direction:ltr; text-align:start; }
.b1-dp-meta { font-size:12px; color:rgba(255,255,255,.55); direction:ltr; text-align:start; }

.b1-dp-body { flex:1; overflow-y:auto; padding:12px; }
.b1-dp-group { font-size:11px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,.4);
  padding:12px 12px 8px; text-transform:uppercase; }
.b1-dp-link { display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:12px;
  color:rgba(255,255,255,.82) !important; font-size:14.5px; font-weight:600; text-decoration:none;
  transition:.18s; margin-bottom:3px; border:1px solid transparent; }
.b1-dp-link i { width:22px; text-align:center; color:var(--b1-sky); font-size:16px; }
.b1-dp-link:hover { background:rgba(255,255,255,.07); color:#fff !important; }
.b1-dp-link.b1-active { background:rgba(98,212,245,.14); color:#fff !important; border-color:rgba(98,212,245,.3); }

.b1-dp-foot { padding:14px 18px; border-top:1px solid rgba(255,255,255,.08); }
.b1-dp-logout { display:flex; align-items:center; gap:10px; color:#e0abb9 !important; font-weight:700;
  font-size:14.5px; text-decoration:none; }
.b1-dp-logout i { color:#e0abb9; }
.b1-dp-logout:hover { color:#c9526e !important; }

/* ============================================================
   INNER PAGES — FAQ accordion + video play button (b1)
============================================================ */
/* video card play button overlay */
.b1-play-btn {
  position:relative; z-index:2; width:62px; height:62px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--b1-navy-deep);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.3); font-size:22px; transition:transform .2s;
}
.b1-cover:hover .b1-play-btn { transform:scale(1.08); }

/* FAQ accordion */
.b1-faq { max-width:880px; margin:0 auto; }
.b1-faq .faq_container {
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  box-shadow:var(--b1-shadow-card); margin-bottom:14px; overflow:hidden;
}
.b1-faq .faq_question {
  cursor:pointer; padding:18px 22px; font-family:'Cairo',sans-serif; font-weight:800;
  font-size:15.5px; color:var(--b1-dark); display:flex; align-items:center; justify-content:space-between;
  gap:14px; transition:background .2s; position:relative;
}
.b1-faq .faq_question::after {
  content:'\f067'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:13px;
  color:#fff; background:linear-gradient(135deg,var(--b1-surface),var(--b1-surface-lift));
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:transform .3s;
}
.b1-faq .faq_question:hover { background:var(--b1-bg-soft); }
.b1-faq .faq_question.active { color:var(--b1-navy-mid); }
.b1-faq .faq_question.active::after { content:'\f068'; transform:rotate(180deg); }
.b1-faq .answercont { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.b1-faq .faq_answer {
  padding:0 22px 20px; font-size:14.5px; line-height:1.9; color:var(--b1-gray);
  border-top:1px solid #f3f4f6; padding-top:16px;
}

/* ============================================================
   AUTH PAGES (login / signup) — re-theme to the b1 design.
   design2.css styles the .auth-* classes in the orange palette;
   design1.css loads after, so these win (with !important where
   design2 used !important / inline utility classes).
============================================================ */
.c-panel.auth-panel { background: var(--b1-bg-soft) !important; padding: 46px 16px 80px !important;
  font-family:'Tajawal',sans-serif; }
.auth-grid { max-width:1120px; margin:0 auto; border-radius:24px !important; overflow:hidden;
  box-shadow:0 30px 70px -22px rgba(13,22,79,.32) !important; background:#fff; }

/* left hero panel */
.left-background-login {
  background:linear-gradient(160deg,var(--b1-surface-alt) 0%,var(--b1-surface) 55%,var(--b1-surface-lift) 100%) !important;
  height:auto !important; position:relative; overflow:hidden; padding:56px 46px !important;
  color:#fff; align-items:center; z-index:900 !important;
}
.auth-blob { filter:blur(10px); opacity:.5; }
.auth-blob--1 { background:var(--b1-cyan) !important; opacity:.22 !important; }
.auth-blob--2 { background:var(--b1-sky) !important; opacity:.18 !important; }
.auth-blob--3 { background:#fff !important; opacity:.12 !important; }

.auth-hero__eyebrow {
  display:inline-block; color:var(--b1-cyan) !important; background:rgba(43,196,239,.12) !important;
  border:1px solid rgba(43,196,239,.3); padding:6px 16px; border-radius:50px; font-weight:700;
  font-size:13px; margin-bottom:18px;
}
.auth-hero__title {
  font-family:'Cairo',sans-serif !important; font-weight:900 !important; color:#fff !important;
  -webkit-text-fill-color:#fff !important; background:none !important; font-size:32px !important;
  line-height:1.35 !important; margin-bottom:16px !important;
}
.auth-hero__lead { color:rgba(255,255,255,.78) !important; font-size:15px; line-height:1.9; margin-bottom:22px; }
.auth-hero__list { list-style:none; padding:0; margin:0; }
.auth-hero__list li { color:rgba(255,255,255,.9) !important; font-size:14.5px; margin-bottom:12px;
  display:flex; align-items:center; gap:10px; }
.auth-hero__list li i { color:#0d164f !important; background:var(--b1-cyan); width:22px; height:22px;
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }

/* right form card */
.block-login { background:#fff !important; display:flex; align-items:center; padding:34px 14px !important; }
.auth-card { background:#fff; }
.auth-card .title-block-login {
  font-family:'Cairo',sans-serif !important; font-weight:900 !important; font-size:26px !important;
  background:linear-gradient(120deg,var(--b1-navy-deep),var(--b1-navy-mid) 55%,var(--b1-sky)) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
.auth-card__sub { color:var(--b1-gray) !important; font-family:'Tajawal',sans-serif !important; }
.auth-field label { font-family:'Cairo',sans-serif !important; font-weight:700 !important;
  color:var(--b1-dark) !important; -webkit-text-fill-color:var(--b1-dark) !important;
  background:none !important; font-size:13px !important; margin-bottom:7px; }
.auth-input__icon { color:var(--b1-sky) !important; }
.auth-input .form-control { border:1.5px solid #e5e7eb !important; border-radius:12px !important; font-size:14.5px; }
.auth-input .form-control:focus { border-color:var(--b1-sky) !important;
  box-shadow:0 0 0 4px rgba(98,212,245,.14) !important; }
.auth-link { color:var(--b1-navy-mid) !important; }
.auth-link:hover { color:var(--b1-sky) !important; }
.auth-error { color:#b22e4f !important; font-size:12px; font-weight:700; }

/* submit button → b1 green pill */
.auth-submit, .auth-submit.btn-primary {
  background:linear-gradient(135deg,#0ea75a,var(--b1-green)) !important; background-color:#0ea75a !important;
  background-image:linear-gradient(135deg,#0ea75a,var(--b1-green)) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important; border:none !important;
  border-radius:50px !important; font-family:'Cairo',sans-serif !important; font-weight:800 !important;
  padding:13px 30px !important; box-shadow:0 6px 22px rgba(18,201,108,.4) !important;
  margin-top:18px; width:auto; transition:transform .2s, box-shadow .2s;
}
.auth-submit:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(18,201,108,.5) !important; }

/* ============================================================
   DASHBOARD FORMS (update account, etc.) — b1 styled
============================================================ */
.b1-form-card { background:#fff; border:1px solid #eceff3; border-radius:18px;
  box-shadow:var(--b1-shadow-card); padding:30px; }
.b1-form .form-group { margin-bottom:18px; }
.b1-form label { display:block; font-family:'Cairo',sans-serif; font-weight:700; font-size:13px;
  color:var(--b1-dark) !important; -webkit-text-fill-color:var(--b1-dark) !important; background:none !important;
  margin-bottom:7px; }
.b1-form .form-control { border:1.5px solid #e5e7eb !important; border-radius:12px !important;
  padding:12px 16px !important; font-size:14.5px; background:#fff; width:100%;
  transition:border-color .2s, box-shadow .2s; font-family:'Tajawal',sans-serif; height:auto; }
.b1-form .form-control:focus { border-color:var(--b1-sky) !important;
  box-shadow:0 0 0 4px rgba(98,212,245,.14) !important; outline:none; }
.b1-form .form-control:disabled { background:#f6f6f7; color:var(--b1-gray); cursor:not-allowed; }
.b1-form .error { color:#b22e4f; font-size:12px; font-weight:700; display:block; margin-top:5px; }
.b1-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:680px){ .b1-form-grid { grid-template-columns:1fr; } }

/* modern photo uploader with live preview */
.b1-uploader { display:flex; align-items:center; gap:22px; padding:22px; margin-bottom:26px;
  background:var(--b1-bg-soft); border:1.5px dashed #d5e0f2; border-radius:16px; flex-wrap:wrap; }
.b1-uploader-thumb { position:relative; flex-shrink:0; width:96px; height:96px; }
.b1-uploader-preview { width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:3px solid #fff; box-shadow:0 6px 18px rgba(13,22,79,.2); background:#fff; display:block; }
.b1-upload-remove { position:absolute; top:-4px; inset-inline-end:-4px; width:28px; height:28px;
  border-radius:50%; border:2px solid #fff; background:#b22e4f; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px; padding:0;
  box-shadow:0 3px 10px rgba(178,46,79,.5); transition:transform .15s, background .15s; z-index:2; }
.b1-upload-remove:hover { background:#b22e4f; transform:scale(1.1); }
.b1-uploader-info { flex:1; min-width:210px; }
.b1-uploader-info h4 { font-family:'Cairo',sans-serif; font-weight:800; font-size:15px;
  color:var(--b1-dark) !important; -webkit-text-fill-color:var(--b1-dark) !important; background:none !important; margin:0 0 4px; }
.b1-uploader-info p { font-size:12.5px; color:var(--b1-gray) !important; margin:0 0 12px; }
.b1-upload-btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:linear-gradient(135deg,var(--b1-surface),var(--b1-surface-lift)); color:#fff !important;
  font-family:'Cairo',sans-serif; font-weight:700; font-size:13.5px; padding:10px 20px; border-radius:50px;
  transition:transform .2s, box-shadow .2s; }
.b1-upload-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(13,22,79,.3); color:#fff !important; }
.b1-upload-name { font-size:12.5px; color:var(--b1-gray); margin-inline-start:12px; }
.b1-uploader input[type=file] { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }

/* ============================================================
   Bootstrap buttons (site / student / auth layouts) → b1 palette.
   design2.css gives .btn-primary an ink bg + yellow offset shadow;
   these override it. Primary CTA = green (enroll/start convention).
============================================================ */
.btn { font-weight:700; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; }

.btn-primary, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background:#12c96c !important;
  background-image:linear-gradient(135deg,#0ea75a,#12c96c) !important;
  border:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  box-shadow:0 6px 18px rgba(18,201,108,.32) !important;
}
.btn-primary:hover { background-image:linear-gradient(135deg,#07502b,#0ea75a) !important;
  box-shadow:0 9px 24px rgba(18,201,108,.45) !important; color:#fff !important; transform:translateY(-1px); }

.btn-success, .btn-success:focus, .btn-success:active {
  background:#12c96c !important; background-image:linear-gradient(135deg,#0ea75a,#12c96c) !important;
  border:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  box-shadow:0 6px 18px rgba(18,201,108,.3) !important;
}
.btn-success:hover { box-shadow:0 9px 24px rgba(18,201,108,.45) !important; color:#fff !important; transform:translateY(-1px); }

.btn-info, .btn-info:focus, .btn-info:active {
  background:#2b66bf !important; background-image:linear-gradient(135deg,#2b66bf,#3f7bd0) !important;
  border:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  box-shadow:0 6px 18px rgba(13,22,79,.28) !important;
}
.btn-info:hover { background-image:linear-gradient(135deg,#21519b,#2b66bf) !important;
  box-shadow:0 9px 24px rgba(13,22,79,.4) !important; color:#fff !important; transform:translateY(-1px); }

.btn-danger, .btn-danger:focus {
  background:#b22e4f !important; background-image:none !important; border:none !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important; box-shadow:0 6px 18px rgba(178,46,79,.28) !important;
}
.btn-danger:hover { background:#b22e4f !important; color:#fff !important; transform:translateY(-1px); }

.btn-warning, .btn-warning:focus {
  background:#f6b93b !important; background-image:linear-gradient(135deg,#f6b93b,#f59e0b) !important;
  border:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  box-shadow:0 6px 18px rgba(246,185,59,.3) !important;
}
.btn-warning:hover { color:#fff !important; transform:translateY(-1px); }

.btn-light, .btn-light:focus {
  background:#fff !important; color:var(--b1-navy-mid) !important; -webkit-text-fill-color:var(--b1-navy-mid) !important;
  border:1.5px solid #e5e7eb !important; box-shadow:0 4px 14px rgba(13,22,79,.1) !important;
}
.btn-light:hover { background:#eef3fa !important; color:var(--b1-navy-deep) !important; -webkit-text-fill-color:var(--b1-navy-deep) !important; }

.btn-outline-light, .btn-outline-light:focus {
  background:transparent !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  border:1.5px solid rgba(255,255,255,.6) !important; box-shadow:none !important;
}
.btn-outline-light:hover { background:rgba(255,255,255,.12) !important; border-color:#fff !important; color:#fff !important; }