/* ==========================================================================
   DENTOPIA — Modern Redesign 2026  (Skillshare-minimal · editorial · LTR)
   Loaded last. Clean whitespace, big imagery, refined type, one accent.
   ========================================================================== */

:root {
    --dm-ink:      #0a2136;   /* deep navy — headings */
    --dm-ink-2:    #3a4a5c;   /* secondary text */
    --dm-muted:    #6b7684;   /* muted text */
    --dm-faint:    #9aa2b0;
    --dm-line:     #e9ecf1;   /* hairline borders */
    --dm-bg:       #ffffff;
    --dm-bg-2:     #f7f8fb;   /* alt section bg */
    --dm-accent:   #e94445;   /* Dentopia coral */
    --dm-accent-d: #c62f30;   /* coral hover / gradient end */
    --dm-coral-lt: #fdecec;   /* coral tint */
    --dm-navy:     #00263e;   /* footer / dark surfaces */
    --dm-grad:     linear-gradient(135deg, #e94445 0%, #c62f30 100%);
    --dm-radius:   16px;
    --dm-shadow:   0 1px 2px rgba(14,20,32,.04), 0 10px 30px rgba(14,20,32,.06);
    --dm-shadow-h: 0 20px 48px rgba(14,20,32,.14);
    --dm-container: 1240px;
}

html { direction: ltr; }
body {
    direction: ltr;
    background: var(--dm-bg);
    color: var(--dm-ink);
    font-family: 'Inter', 'Cairo', sans-serif;
    letter-spacing: -0.005em;
}
.container { max-width: var(--dm-container) !important; }
img { max-width: 100%; }

/* ---- Typography rhythm ---- */
h1, h2, h3, h4 { color: var(--dm-ink); letter-spacing: -0.025em; }

/* =========================================================================
   HEADER — minimal, airy
   ========================================================================= */
.ms-header {
    background: rgba(255,255,255,.86) !important;
    border-bottom: 1px solid var(--dm-line) !important;
    backdrop-filter: saturate(150%) blur(14px) !important;
}
.ms-bar { height: 76px !important; }
.ms-logo { display: inline-flex !important; align-items: center !important; gap: 9px !important; font-family: 'Inter','Cairo',sans-serif !important; font-weight: 800 !important; font-size: 22px !important; letter-spacing: -0.03em; }
.ms-logo-icon { height: 36px !important; width: auto !important; display: block; }
.ms-logo span { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--dm-ink) !important; }
.ms-nav a { font-size: 14.5px !important; font-weight: 500 !important; color: var(--dm-ink-2) !important; border-radius: 9px !important; }
.ms-nav a:hover { background: var(--dm-bg-2) !important; color: var(--dm-ink) !important; }
.ms-nav a.active { background: transparent !important; color: var(--dm-accent) !important; font-weight: 600 !important; }
.ms-btn-primary { background: var(--dm-grad) !important; box-shadow: 0 6px 16px rgba(233,68,69,.28) !important; border-radius: 10px !important; font-weight: 600 !important; color: #fff !important; }
.ms-btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(233,68,69,.36) !important; }
.ms-btn-outline { border: 1.5px solid var(--dm-line) !important; color: var(--dm-ink) !important; border-radius: 10px !important; font-weight: 600 !important; }
.ms-btn-outline:hover { background: var(--dm-bg-2) !important; border-color: var(--dm-ink) !important; color: var(--dm-ink) !important; }
.ms-icon-btn { border-radius: 10px !important; background: var(--dm-bg-2) !important; border: 1px solid var(--dm-line) !important; }

/* =========================================================================
   HERO — centered, editorial
   ========================================================================= */
.dm-hero {
    position: relative;
    text-align: center;
    padding: 96px 0 72px;
    background:
        radial-gradient(760px 420px at 82% 8%, rgba(233,68,69,.10), transparent 68%),
        radial-gradient(600px 360px at 6% 96%, rgba(0,38,62,.05), transparent 70%),
        var(--dm-bg);
    overflow: hidden;
}
.dm-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: 999px;
    background: #fff; border: 1px solid var(--dm-line);
    box-shadow: var(--dm-shadow);
    font-size: 13px; font-weight: 600; color: var(--dm-ink-2);
    margin-bottom: 26px;
}
.dm-hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.dm-hero h1 {
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.035em;
    margin: 0 auto 22px;
    max-width: 14ch;
    color: var(--dm-ink);
}
.dm-hero h1 .accent {
    background: linear-gradient(120deg, #e94445, #ff7a5c);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dm-hero-sub {
    font-size: clamp(16px, 2.2vw, 20px);
    line-height: 1.6; color: var(--dm-muted);
    max-width: 620px; margin: 0 auto 36px;
}
/* Search */
.dm-search {
    display: flex; align-items: center; gap: 8px;
    max-width: 620px; margin: 0 auto 20px;
    background: #fff; border: 1px solid var(--dm-line);
    border-radius: 999px; padding: 8px 8px 8px 22px;
    box-shadow: var(--dm-shadow);
    transition: box-shadow .25s, border-color .25s;
}
.dm-search:focus-within { border-color: var(--dm-accent); box-shadow: 0 0 0 4px rgba(62,100,222,.12); }
.dm-search i { color: var(--dm-muted); font-size: 18px; }
.dm-search input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 16px; color: var(--dm-ink); font-family: inherit;
}
.dm-search input::placeholder { color: var(--dm-faint); }
.dm-search button {
    border: none; cursor: pointer; font-family: inherit;
    background: var(--dm-ink); color: #fff;
    font-size: 15px; font-weight: 600; padding: 12px 26px; border-radius: 999px;
    transition: background .2s, transform .2s;
}
.dm-search button:hover { background: #000; transform: translateY(-1px); }
/* Popular chips */
.dm-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 720px; margin: 0 auto 40px; }
.dm-hero-chips .lbl { font-size: 13px; color: var(--dm-faint); margin-right: 4px; align-self: center; }
.dm-chip {
    font-size: 13px; font-weight: 500; color: var(--dm-ink-2);
    padding: 7px 14px; border-radius: 999px; text-decoration: none;
    background: var(--dm-bg-2); border: 1px solid var(--dm-line);
    transition: all .2s;
}
.dm-chip:hover { background: var(--dm-ink); color: #fff; border-color: var(--dm-ink); }
/* Trust stats */
.dm-hero-stats { display: inline-flex; gap: 40px; padding-top: 10px; }
.dm-hero-stat .n { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--dm-ink); }
.dm-hero-stat .n .star { color: #f5b301; }
.dm-hero-stat .l { font-size: 13px; color: var(--dm-muted); margin-top: 2px; }

/* =========================================================================
   SECTIONS
   ========================================================================= */
.section-block { padding: 76px 0 !important; }
.section-block-alt { background: var(--dm-bg-2) !important; }
.section-header { text-align: left !important; margin-bottom: 34px !important; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-header .badge-label {
    display: none !important;   /* drop the eyebrow pills for a cleaner editorial look */
}
.section-header h2 {
    font-size: clamp(26px, 3.4vw, 36px) !important;
    font-weight: 800 !important; letter-spacing: -0.03em !important;
    margin: 0 !important; color: var(--dm-ink) !important;
}
.section-header p { margin: 8px 0 0 !important; color: var(--dm-muted) !important; font-size: 15px !important; max-width: none !important; }
/* header link (View all) sits on the right */
.section-head-inner { text-align: left; }

/* =========================================================================
   COURSE CARD — clean, image-forward
   ========================================================================= */
.course-card {
    background: #fff !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: var(--dm-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s !important;
}
.course-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--dm-shadow-h) !important;
    border-color: transparent !important;
}
.course-card .ds-thumb, .course-card .card-thumb { aspect-ratio: 16/10 !important; border-radius: 0 !important; }
.course-card .card-body { padding: 18px 18px 20px !important; text-align: left; }
.course-card .card-category { color: var(--dm-accent) !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: .01em; text-transform: none !important; }
.course-card .card-title { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--dm-ink) !important; line-height: 1.35 !important; }
.course-card .card-title a:hover { color: var(--dm-accent) !important; }
.course-card .card-meta { color: var(--dm-muted) !important; }
.course-card .card-footer { border-top: 1px solid var(--dm-line) !important; }
.course-card .card-price { color: var(--dm-ink) !important; font-weight: 800 !important; }
.course-card .card-price .free-tag { color: #12a150 !important; }
/* Badges: quieter, pill */
.course-card .badge-tag { border-radius: 999px !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.badge-free { background: #12a150 !important; }
.badge-featured { background: var(--dm-ink) !important; }

/* Course image gradient placeholder tones -> refined */
.ds-thumb[class*="thumb-"] { background-image: linear-gradient(135deg, #3e64de, #0b2036) !important; }

/* =========================================================================
   CATEGORY — quiet, tactile tiles
   ========================================================================= */
.category-card {
    border: 1px solid var(--dm-line) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    padding: 22px 18px !important;
    background: #fff !important;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s !important;
}
.category-card:hover { transform: translateY(-4px) !important; box-shadow: var(--dm-shadow) !important; border-color: var(--dm-line) !important; }
.category-card .cat-icon {
    background: var(--dm-bg-2) !important; color: var(--dm-accent) !important;
    border-radius: 12px !important; width: 48px !important; height: 48px !important;
}
.category-card:hover .cat-icon { background: var(--dm-accent) !important; color: #fff !important; }
.category-card .cat-name { font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--dm-ink) !important; }
.category-card .cat-count { color: var(--dm-muted) !important; }

/* =========================================================================
   BUTTONS / LINKS
   ========================================================================= */
.btn-grad, .modern-btn {
    background: var(--dm-grad) !important;
    border-radius: 10px !important; box-shadow: 0 6px 16px rgba(233,68,69,.28) !important; font-weight: 600 !important; color: #fff !important;
}
.btn-grad:hover, .modern-btn:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(233,68,69,.38) !important; }
.modern-btn-outline { border: 1.5px solid var(--dm-line) !important; color: var(--dm-ink) !important; border-radius: 10px !important; }
.modern-btn-outline:hover { background: var(--dm-ink) !important; color: #fff !important; border-color: var(--dm-ink) !important; }
.view-all-link {
    border: 1px solid var(--dm-line) !important; color: var(--dm-ink) !important;
    font-weight: 600 !important; padding: 10px 20px !important; font-size: 14px !important;
}
.view-all-link:hover { background: var(--dm-ink) !important; color: #fff !important; box-shadow: none !important; }

/* =========================================================================
   FOOTER — clean
   ========================================================================= */
.ms-foot, footer { background: var(--dm-navy) !important; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991px) {
    .dm-hero { padding: 72px 0 56px; }
    .dm-hero-stats { gap: 28px; }
    .section-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575px) {
    .dm-hero { padding: 52px 0 44px; }
    .dm-search { flex-direction: column; border-radius: 18px; padding: 12px; gap: 12px; }
    .dm-search button { width: 100%; }
    .dm-hero-stats { flex-wrap: wrap; gap: 20px 28px; }
}

/* =========================================================================
   SPLIT HERO (dentopia.app style: text+coral CTA left, floating card right)
   ========================================================================= */
.dm-hero-split { text-align: left; padding: 70px 0 86px; overflow: visible; }
.dm-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.dm-hero-left { text-align: left; }
.dm-hero-split .dm-hero-eyebrow { margin-bottom: 22px; }
.dm-hero-split h1 { text-align: left; margin: 0 0 20px; max-width: 15ch; font-size: clamp(34px, 4.6vw, 58px); }
.dm-hero-split .dm-hero-sub { text-align: left; margin: 0 0 30px; max-width: 520px; }
.dm-hero-cta { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.dm-btn-coral { display: inline-flex; align-items: center; gap: 9px; background: var(--dm-grad); color: #fff; font-weight: 600; font-size: 16px; padding: 15px 30px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 24px rgba(233,68,69,.30); transition: transform .2s, box-shadow .2s, filter .2s; }
.dm-btn-coral:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(233,68,69,.42); filter: brightness(1.05); color: #fff; }
.dm-btn-ghost { display: inline-flex; align-items: center; gap: 8px; color: var(--dm-ink); font-weight: 600; font-size: 15px; padding: 14px 24px; border-radius: 999px; border: 1.5px solid var(--dm-line); text-decoration: none; transition: all .2s; }
.dm-btn-ghost:hover { border-color: var(--dm-ink); background: var(--dm-bg-2); color: var(--dm-ink); }
.dm-hero-split .dm-hero-chips { justify-content: flex-start; margin: 0 0 28px; }
.dm-hero-split .dm-hero-stats { justify-content: flex-start; gap: 40px; }

.dm-hero-right { position: relative; display: flex; justify-content: center; align-items: center; min-height: 430px; }
.dm-hero-blob { position: absolute; inset: 4% 8%; background: radial-gradient(120% 120% at 32% 22%, rgba(233,68,69,.16), rgba(0,38,62,.06) 58%, transparent 74%); border-radius: 42% 58% 55% 45% / 55% 45% 55% 45%; z-index: 0; }
.dm-hero-dot { position: absolute; border-radius: 50%; z-index: 0; }
.dm-hero-dot--1 { width: 14px; height: 14px; background: var(--dm-accent); top: 6%; right: 16%; box-shadow: 0 0 0 6px rgba(233,68,69,.12); }
.dm-hero-dot--2 { width: 10px; height: 10px; background: var(--dm-navy); bottom: 12%; left: 14%; box-shadow: 0 0 0 6px rgba(0,38,62,.10); }
.dm-hero-card { position: relative; z-index: 1; width: 360px; max-width: 100%; background: #fff; border: 1px solid var(--dm-line); border-radius: 20px; box-shadow: 0 30px 64px rgba(0,38,62,.18); overflow: hidden; text-decoration: none; color: inherit; transform: rotate(-1.6deg); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.dm-hero-card:hover { transform: rotate(0deg) translateY(-4px); }
.dm-hero-card-img { position: relative; aspect-ratio: 16/10; background: var(--dm-grad); overflow: hidden; }
.dm-hero-card-img img { width: 100%; height: 100%; object-fit: cover; }
.dm-hero-card-tag { position: absolute; top: 12px; left: 12px; background: #12a150; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.dm-hero-card-body { padding: 18px 20px 20px; }
.dm-hero-card-body .cat { color: var(--dm-accent); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.dm-hero-card-body h3 { font-size: 17px; font-weight: 700; color: var(--dm-ink); margin: 8px 0 12px; line-height: 1.35; }
.dm-hero-card-body .meta { display: flex; gap: 16px; font-size: 12.5px; color: var(--dm-muted); margin-bottom: 14px; }
.dm-hero-card-body .meta span { display: inline-flex; align-items: center; gap: 5px; }
.dm-hero-card-body .foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--dm-line); }
.dm-hero-card-body .price { font-size: 18px; font-weight: 800; color: var(--dm-ink); }
.dm-hero-card-body .more { font-size: 13px; font-weight: 700; color: var(--dm-accent); display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 900px) {
  .dm-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .dm-hero-right { min-height: auto; order: -1; }
  .dm-hero-split h1, .dm-hero-split .dm-hero-sub { max-width: none; }
}

/* =========================================================================
   FOOTER — navy + coral + real logo badge
   ========================================================================= */
.ms-footer, footer.ms-footer { background: var(--dm-navy) !important; }
.ms-foot-logo { gap: 11px !important; align-items: center !important; }
.ms-foot-logo-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: #fff; border-radius: 13px; box-shadow: 0 8px 18px rgba(0,0,0,.28); flex-shrink: 0; }
.ms-foot-logo-badge img { height: 32px; width: auto; display: block; }
.ms-foot-logo-text { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.ms-foot-col h5::after { background: var(--dm-grad) !important; }
.ms-foot-social a:hover { background: var(--dm-grad) !important; border-color: transparent !important; }
.ms-foot-links a::before { background: var(--dm-accent) !important; }
.ms-foot-links a:hover { color: #fff !important; }

/* Header "More" dropdown */
.ms-more{position:relative}
.ms-more .ms-more-trigger{display:inline-flex!important;align-items:center;gap:5px;cursor:pointer;padding:9px 14px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--dm-ink-2)!important;text-decoration:none}
.ms-more .ms-more-trigger:hover,.ms-more .ms-more-trigger.active{background:var(--dm-bg-2)!important;color:var(--dm-ink)!important}
.ms-more-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;background:#fff;border:1px solid var(--dm-line);border-radius:13px;box-shadow:0 14px 34px rgba(10,33,54,.13);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:1200}
.ms-more:hover .ms-more-menu{opacity:1;visibility:visible;transform:translateY(0)}
.ms-more-menu a{display:block;padding:10px 13px;border-radius:9px;font-size:14px;font-weight:500;color:var(--dm-ink-2)!important;white-space:nowrap;text-decoration:none}
.ms-more-menu a:hover{background:var(--dm-bg-2);color:var(--dm-accent)!important}

/* Header "Book Consultation" button */
.ms-book-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;font-size:13.5px;font-weight:700;text-decoration:none;background:var(--dm-coral-lt,#fdecec);color:var(--dm-accent,#e94445)!important;border:1px solid rgba(233,68,69,.22);transition:.2s;white-space:nowrap;margin-inline-end:2px}
.ms-book-btn:hover{background:var(--dm-grad,linear-gradient(135deg,#e94445,#c62f30));color:#fff!important;border-color:transparent;box-shadow:0 6px 16px rgba(233,68,69,.28);transform:translateY(-1px)}
@media(max-width:1199px){.ms-book-btn{display:none}}

/* Footer alignment polish */
.ms-foot-grid{align-items:flex-start}
.ms-foot-links a{transition:color .18s ease}

/* Header spacing / balance polish */
.ms-bar{gap:22px !important}
.ms-nav{gap:2px !important}
.ms-nav a{padding:9px 13px !important}
.ms-actions{gap:9px !important}
/* subtle divider before the auth cluster */
.ms-actions .ms-auth-buttons-desktop{position:relative;padding-inline-start:12px}
.ms-actions .ms-auth-buttons-desktop::before{content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:1px;height:24px;background:var(--dm-line)}
/* Log in = lighter text link, Sign up stays the coral button */
.ms-auth-buttons-desktop .ms-btn-outline{background:transparent !important;border-color:transparent !important;color:var(--dm-ink-2) !important}
.ms-auth-buttons-desktop .ms-btn-outline:hover{background:var(--dm-bg-2) !important;color:var(--dm-ink) !important}

/* ============================================================
   Colorful modern palette — reusable gradient tokens (2026)
   Coral-anchored, with complementary vibrant accents.
   ============================================================ */
:root{
  --gx-coral:  linear-gradient(135deg,#ff7a6b 0%,#e94445 55%,#c62f30 100%);
  --gx-violet: linear-gradient(135deg,#a78bfa 0%,#7c3aed 100%);
  --gx-teal:   linear-gradient(135deg,#38d6ef 0%,#0891b2 100%);
  --gx-amber:  linear-gradient(135deg,#fcd34d 0%,#f59e0b 100%);
  --gx-pink:   linear-gradient(135deg,#f9a8d4 0%,#db2777 100%);
  --gx-navy:   linear-gradient(135deg,#1b4a63 0%,#00263e 100%);
  --gx-hero:   linear-gradient(120deg,#00263e 0%,#3d1f52 34%,#a5273f 62%,#e94445 82%,#ff8a5b 100%);
  --gx-glow-coral: 0 18px 40px -14px rgba(233,68,69,.55);
  --gx-glow-violet:0 18px 40px -14px rgba(124,58,237,.5);
  --gx-glow-teal:  0 18px 40px -14px rgba(8,145,178,.5);
  --gx-glow-amber: 0 18px 40px -14px rgba(245,158,11,.5);
  --gx-glow-pink:  0 18px 40px -14px rgba(219,39,119,.5);
}

/* ============================================================
   Shared subpage hero — upgraded to the colorful gradient look
   (overrides courses-listing.css .cl-hero for ALL subpages)
   ============================================================ */
.cl-hero{
  background: var(--gx-hero, linear-gradient(120deg,#00263e,#e94445)) !important;
  padding: 74px 0 90px !important;
  color:#fff;
}
.cl-hero::before{
  background:
    radial-gradient(360px 360px at 92% -10%, rgba(255,138,91,.55), transparent 60%),
    radial-gradient(340px 340px at -4% 115%, rgba(124,58,237,.5), transparent 60%) !important;
  filter: blur(10px);
}
.cl-breadcrumb, .cl-breadcrumb a{ color: rgba(255,255,255,.75) !important; }
.cl-breadcrumb a:hover{ color:#fff !important; }
.cl-breadcrumb .sep{ color: rgba(255,255,255,.4) !important; opacity:1; }
.cl-breadcrumb .active{ color:#fff !important; font-weight:600; }
.cl-title{ color:#fff !important; font-weight:900 !important; letter-spacing:-.03em; font-size: clamp(32px,4.6vw,48px) !important; }
.cl-subtitle{ color: rgba(255,255,255,.86) !important; font-size:16.5px !important; max-width:600px; }

/* status badge usable on any subpage hero */
.cl-hero .cl-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px); color:#fff; padding:7px 15px; border-radius:100px;
  font-size:12.5px; font-weight:700; margin-bottom:18px; letter-spacing:.3px;
}
.cl-hero .cl-badge .dot{ width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.25); }

/* search bar sitting inside the dark hero (courses page) */
.cl-hero .cl-search-form{ box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); border-radius:16px; }

/* ============================================================
   Home — colorful specialty chips + richer hero wash (2026)
   ============================================================ */
.category-card .cat-icon{ color:#fff !important; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.category-card.cxg-0 .cat-icon{ background: var(--gx-coral)  !important; box-shadow: var(--gx-glow-coral); }
.category-card.cxg-1 .cat-icon{ background: var(--gx-violet) !important; box-shadow: var(--gx-glow-violet); }
.category-card.cxg-2 .cat-icon{ background: var(--gx-teal)   !important; box-shadow: var(--gx-glow-teal); }
.category-card.cxg-3 .cat-icon{ background: var(--gx-amber)  !important; box-shadow: var(--gx-glow-amber); }
.category-card.cxg-4 .cat-icon{ background: var(--gx-pink)   !important; box-shadow: var(--gx-glow-pink); }
.category-card.cxg-5 .cat-icon{ background: var(--gx-navy)   !important; box-shadow: 0 18px 40px -14px rgba(0,38,62,.5); }
.category-card:hover .cat-icon{ transform: scale(1.08) rotate(-4deg); }
.category-card:hover{ border-color: transparent !important; box-shadow: 0 22px 44px -24px rgba(0,38,62,.28) !important; }

/* richer, more colorful (but light) home hero wash */
.dm-hero{
  background:
    radial-gradient(680px 440px at 86% 2%,  rgba(233,68,69,.16),  transparent 64%),
    radial-gradient(520px 420px at 99% 42%, rgba(255,138,91,.16), transparent 60%),
    radial-gradient(640px 480px at 0% 96%,  rgba(124,58,237,.13), transparent 64%),
    radial-gradient(440px 340px at 14% 6%,  rgba(56,214,239,.11), transparent 62%),
    var(--dm-bg) !important;
}
/* make the floating hero card's blob a soft coral→violet glow */
.dm-hero-blob{
  background: radial-gradient(120% 120% at 30% 20%, rgba(233,68,69,.22), rgba(124,58,237,.12) 55%, transparent 75%) !important;
}

/* ============================================================
   Toned-down heroes with real dental imagery (navy-dominant)
   Overrides the earlier colorful .cl-hero — softer, more pro.
   ============================================================ */
.cl-hero{
  background:
    linear-gradient(102deg, rgba(0,30,50,.97) 0%, rgba(0,30,50,.9) 30%, rgba(12,26,52,.72) 56%, rgba(88,32,54,.5) 100%),
    url('../images/hero-bg.jpg') center right / cover no-repeat,
    #00263e !important;
}
.cl-hero::before{
  background: radial-gradient(320px 320px at 97% 2%, rgba(233,68,69,.26), transparent 62%) !important;
  opacity:.7; filter: blur(4px);
}

/* soften the home specialty chip glows (tone the color down) */
.category-card.cxg-0 .cat-icon,.category-card.cxg-1 .cat-icon,.category-card.cxg-2 .cat-icon,
.category-card.cxg-3 .cat-icon,.category-card.cxg-4 .cat-icon,.category-card.cxg-5 .cat-icon{
  box-shadow: 0 10px 22px -13px rgba(0,38,62,.42) !important;
}

/* subtler, calmer home hero wash */
.dm-hero{
  background:
    radial-gradient(620px 420px at 88% 0%,  rgba(233,68,69,.10), transparent 62%),
    radial-gradient(560px 460px at 2% 98%,  rgba(0,38,62,.06),   transparent 66%),
    radial-gradient(420px 320px at 16% 6%,  rgba(124,58,237,.05),transparent 62%),
    var(--dm-bg) !important;
}

/* ============================================================
   Bootstrap 5 pagination — on-brand coral (frontend)
   ============================================================ */
.pagination{gap:6px;flex-wrap:wrap;margin:0}
.pagination .page-link{border-radius:10px;border:1px solid var(--dm-line,#e5e9f0);color:var(--dm-ink,#00263e);font-weight:600;min-width:40px;text-align:center;transition:.15s}
.pagination .page-link:hover{background:var(--dm-bg-2,#f6f8fb);color:#e94445;border-color:#f2b8b8}
.pagination .page-item.active .page-link{background:var(--gx-coral,#e94445);border-color:transparent;color:#fff;box-shadow:var(--gx-glow-coral)}
.pagination .page-item.disabled .page-link{opacity:.5}
.pagination .page-link:focus{box-shadow:0 0 0 3px rgba(233,68,69,.15)}