/* ==========================================================================
   سلسلة للتأهيل — brand layer
   Loaded last on every public page. Tokens follow DESIGN.md.
   ========================================================================== */

html:root {
    --ns-forest: #0B3D32;
    --ns-forest-deep: #072A23;
    --ns-growth: #2E6B57;
    --ns-growth-soft: #E4EDE8;
    --ns-gold: #C8A25B;
    --ns-gold-deep: #8F6E2F;
    --ns-gold-soft: #F3EAD7;
    --ns-ivory: #F5F2EB;
    --ns-paper: #FBF9F5;
    --ns-line: #E6DFD1;
    --ns-line-strong: #D5CBB8;
    --ns-ink: #0B3D32;
    --ns-ink-body: #45544F;
    --ns-ink-muted: #66726D;
    --ns-on-forest: #F5F2EB;
    --ns-on-forest-muted: #B9C8C1;

    --ns-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    --ns-radius-sm: 8px;
    --ns-radius-md: 12px;
    --ns-radius-lg: 16px;
    --ns-radius-xl: 24px;
    --ns-lift: 0 14px 32px -18px rgba(11, 61, 50, 0.28);
    --ns-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ns-section: clamp(56px, 7vw, 96px);
    --ns-nav-h: 84px;

    /* Legacy LMSZAI variables, re-pointed at the brand */
    --theme-color: var(--ns-forest);
    --plyr-color-main: var(--ns-growth);
    --heading-color: var(--ns-forest);
    --body-font-color: var(--ns-ink-body);
    --body-font-family: var(--ns-font);
    --navbar-bg-color: var(--ns-ivory);
    --gradient-banner-bg: var(--ns-forest);
    --footer-gradient-bg: var(--ns-forest);
    --gradient-overlay-bg: transparent;
    --light-purple: var(--ns-growth-soft);
    --orange-color: var(--ns-gold);
    --orange-deep: var(--ns-gold-deep);
    --color-green: var(--ns-growth);
    --color-light-green: var(--ns-growth-soft);
    --color-yellow: var(--ns-gold);
    --light-bg: var(--ns-paper);
    --page-bg: var(--ns-ivory);
    --gray-color: var(--ns-ink-muted);
    --gray-color2: var(--ns-ink-muted);
    --border-color: var(--ns-line);
    --border-color2: var(--ns-line-strong);
}

/* ---------- Base ---------- */
html body {
    background: var(--ns-ivory);
    color: var(--ns-ink-body);
    font-family: var(--ns-font);
    font-size: 16px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
    font-family: var(--ns-font);
    color: var(--ns-ink);
    letter-spacing: 0;
}
body p { color: var(--ns-ink-body); }
body a { color: var(--ns-forest); text-underline-offset: 3px; }
body a:hover { color: var(--ns-growth); }
body input, body select, body textarea, body button { font-family: var(--ns-font); }
::selection { background: var(--ns-gold-soft); color: var(--ns-forest); }
:focus-visible { outline: 3px solid var(--ns-gold); outline-offset: 2px; }
html { scrollbar-color: var(--ns-line-strong) var(--ns-ivory); }
body ::-webkit-scrollbar { width: 10px; height: 10px; }
body ::-webkit-scrollbar-track { background: var(--ns-ivory); }
body ::-webkit-scrollbar-thumb { background: var(--ns-line-strong); border-radius: 10px; border: 2px solid var(--ns-ivory); }
body .bg-page, body .bg-white, body .bg-light { background-color: var(--ns-paper) !important; }
body section.bg-page, body section.bg-light, body section.bg-white { background-color: var(--ns-ivory) !important; }
body .color-heading { color: var(--ns-forest) !important; }
body .color-hover, body .theme-font-color { color: var(--ns-growth) !important; }
body .bg-orange, body .bg-green { background-color: var(--ns-forest) !important; color: var(--ns-on-forest) !important; }
body .text-white p, body .text-white { color: var(--ns-on-forest); }
body .badge.bg-danger { background-color: var(--ns-gold) !important; color: var(--ns-forest); }

/* ---------- Buttons ---------- */
.ns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 28px;
    border-radius: var(--ns-radius-sm);
    border: 1.5px solid transparent;
    font-family: var(--ns-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .25s var(--ns-ease), color .25s var(--ns-ease), border-color .25s var(--ns-ease), transform .25s var(--ns-ease);
}
.ns-btn:hover { transform: translateY(-1px); }
.ns-btn:active { transform: translateY(0); }
.ns-btn-sm { min-height: 40px; padding: 8px 20px; font-size: 14px; }
body .ns-btn-primary { background: var(--ns-forest); color: var(--ns-on-forest); border-color: var(--ns-forest); }
body .ns-btn-primary:hover { background: var(--ns-forest-deep); border-color: var(--ns-forest-deep); color: var(--ns-on-forest); }
body .ns-btn-growth { background: var(--ns-growth); color: var(--ns-on-forest); border-color: var(--ns-growth); }
body .ns-btn-growth:hover { background: var(--ns-forest); border-color: var(--ns-forest); color: var(--ns-on-forest); }
body .ns-btn-outline { background: transparent; color: var(--ns-forest); border-color: var(--ns-forest); }
body .ns-btn-outline:hover { background: var(--ns-growth-soft); color: var(--ns-forest); }
body .ns-btn-gold { background: var(--ns-gold); color: var(--ns-forest); border-color: var(--ns-gold); }
body .ns-btn-gold:hover { background: #D6B475; border-color: #D6B475; color: var(--ns-forest); }
body .ns-btn-outline-light { background: transparent; color: var(--ns-on-forest); border-color: rgba(245, 242, 235, .7); }
body .ns-btn-outline-light:hover { background: rgba(245, 242, 235, .1); color: var(--ns-on-forest); border-color: var(--ns-on-forest); }
.ns-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Legacy buttons adopt the brand */
body .theme-btn,
body .theme-button1,
body .theme-button2,
body .btn-violet-transparent {
    border-radius: var(--ns-radius-sm);
    font-family: var(--ns-font);
    font-weight: 600 !important;
    gap: 6px;
    transition: background-color .25s var(--ns-ease), color .25s var(--ns-ease), border-color .25s var(--ns-ease);
}
body .theme-button1 {
    background-color: var(--ns-forest) !important;
    border: 1.5px solid var(--ns-forest) !important;
    color: var(--ns-on-forest) !important;
}
body .theme-button1:hover {
    background-color: var(--ns-forest-deep) !important;
    border-color: var(--ns-forest-deep) !important;
    color: var(--ns-on-forest) !important;
}
body .theme-button2,
body .theme-button3:not(.theme-button1),
body .btn-violet-transparent {
    background-color: transparent !important;
    border: 1.5px solid var(--ns-forest) !important;
    color: var(--ns-forest) !important;
}
body .theme-button2:hover,
body .theme-button3:not(.theme-button1):hover,
body .btn-violet-transparent:hover {
    background-color: var(--ns-growth-soft) !important;
    color: var(--ns-forest) !important;
}
body .btn-orange, body .orange-theme-btn {
    background-color: var(--ns-gold);
    border-color: var(--ns-gold);
    color: var(--ns-forest) !important;
}
body .btn-primary { background-color: var(--ns-forest); border-color: var(--ns-forest); }
body .btn-primary:hover { background-color: var(--ns-forest-deep); border-color: var(--ns-forest-deep); }

/* ---------- Navbar ---------- */
body .menu-section-area { position: relative; z-index: 999; }
body #mainNav,
body #mainNav.sticky {
    position: fixed;
    top: 0;
    height: var(--ns-nav-h);
    padding: 0 clamp(16px, 4vw, 56px);
    background: rgba(245, 242, 235, .94);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--ns-line);
    box-shadow: none;
    animation: none;
}
body #mainNav > .container-fluid { max-width: 1320px; margin-inline: auto; padding: 0; gap: 24px; }
body #mainNav .ns-brand { display: inline-flex; align-items: center; gap: 12px; margin: 0; text-decoration: none; }
body #mainNav .ns-brand img { height: 52px; width: auto; }
body .ns-wordmark { font-size: 21px; font-weight: 700; color: var(--ns-forest); line-height: 1; white-space: nowrap; }
body #mainNav .main-menu-collapse { gap: 16px; }
body #mainNav .header-nav-left-side { margin: 0 !important; align-items: center; gap: 12px; }
body #mainNav .header-nav-right-side { flex: 1; align-items: center; }
body #mainNav .header-nav-right-side > .navbar-nav { flex: 1; gap: 2px; }
body #mainNav .navbar-nav .nav-item .nav-link {
    color: var(--ns-ink);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 12px;
}
body #mainNav .navbar-nav .nav-item .nav-link:hover { color: var(--ns-growth); }
body #mainNav .navbar-nav .nav-item .nav-link.active { color: var(--ns-forest); font-weight: 600; }
body #mainNav .navbar-nav .nav-item .nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--ns-gold);
}
body #mainNav .menu-language-btn { margin-inline-start: auto; }
body #mainNav .header-nav-right-side .navbar-nav:not(:has(.menu-language-btn)) .ns-nav-cta:first-of-type { margin-inline-start: auto; }
body #mainNav .ns-nav-cta { margin-inline-start: 8px; }
body .menu-round-btn > a {
    width: 38px;
    height: 38px;
    margin: 0 4px !important;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    color: var(--ns-forest) !important;
}
body .menu-round-btn > a:hover { border-color: var(--ns-line-strong); }
body #mainNav .custom-courses-btn {
    min-height: 40px;
    padding: 6px 16px !important;
    font-size: 14px !important;
}
body #mainNav .input-group.landing {
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-sm);
    min-height: 40px;
    align-items: center;
    padding-inline: 8px;
    width: 220px;
}
body #mainNav .input-group.landing .form-control,
body #mainNav .input-group.landing .input-group-text {
    background: transparent;
    border: 0;
    color: var(--ns-ink);
    font-size: 14px;
    box-shadow: none;
}
body #mainNav .input-group.landing img { filter: brightness(0) saturate(100%) invert(18%) sepia(26%) saturate(1200%) hue-rotate(118deg); width: 16px; }
body .navbar .dropdown-menu,
body .dropdown-menu {
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-md);
    box-shadow: var(--ns-lift);
}
body #mainNav .navbar-nav .dropdown-menu a,
body .dropdown-item { color: var(--ns-ink); }
body #mainNav .navbar-nav .dropdown-menu a:hover,
body .dropdown-item:hover,
body .dropdown-item:focus { background: var(--ns-growth-soft); color: var(--ns-forest); }
body .navbar-toggler { border: 1px solid var(--ns-line-strong); border-radius: var(--ns-radius-sm); padding: 8px 10px; }
body .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230B3D32' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 1199.98px) {
    body #mainNav .input-group.landing { width: 170px; }
    body #mainNav .navbar-nav .nav-item .nav-link { padding: 8px; font-size: 14px; }
}
@media (max-width: 991.98px) {
    html:root { --ns-nav-h: 72px; }
    body #mainNav .ns-brand img { height: 44px; }
    body .ns-wordmark { font-size: 18px; }
    body #mainNav .main-menu-collapse {
        position: absolute;
        top: var(--ns-nav-h);
        inset-inline: 0;
        background: var(--ns-ivory);
        border-bottom: 1px solid var(--ns-line);
        padding: 16px;
        max-height: calc(100vh - var(--ns-nav-h));
        overflow-y: auto;
    }
    body #mainNav .header-nav-left-side,
    body #mainNav .header-nav-right-side,
    body #mainNav .header-nav-right-side > .navbar-nav { flex-direction: column; align-items: stretch; width: 100%; }
    body #mainNav .input-group.landing { width: 100%; }
    body #mainNav .menu-language-btn,
    body #mainNav .ns-nav-cta { margin-inline-start: 0 !important; }
    body #mainNav .ns-nav-cta .ns-btn { width: 100%; margin-top: 8px; }
    body #mainNav .navbar-nav .nav-item .nav-link.active::after { display: none; }
}

/* ---------- Inner page headers (legacy gradient banners) ---------- */
body .gradient-bg,
body .footer-gradient-bg {
    background: var(--ns-forest) !important;
    background-blend-mode: normal !important;
}
body .page-banner-header .section-overlay {
    min-height: 0;
    padding: calc(var(--ns-nav-h) + 56px) 0 56px;
}
body .page-banner-heading,
body .page-banner-header h1, body .page-banner-header h2, body .page-banner-header h3,
body .course-single-page-header h1, body .course-single-page-header h2, body .course-single-page-header h3,
body .section-heading-light { color: var(--ns-on-forest) !important; }
body .page-banner-sub-heading,
body .section-sub-heading-light,
body .gradient-bg p { color: var(--ns-on-forest-muted) !important; }
body .breadcrumb-item, body .breadcrumb-item a { color: var(--ns-on-forest-muted); }
body .breadcrumb-item.active { color: var(--ns-gold); }
body .breadcrumb-item + .breadcrumb-item::before { color: var(--ns-on-forest-muted); }

/* ---------- Legacy sections & cards across inner pages ---------- */
body .section-heading { color: var(--ns-forest); font-weight: 700; letter-spacing: 0; }
body .section-sub-heading { color: var(--ns-ink-muted); }
body .section-heading-img { display: none; }
body .card,
body .course-item,
body .instructor-item,
body .blog-item,
body .single-feature-item,
body .instructor-support-item {
    background: var(--ns-paper);
    border: 1px solid var(--ns-line) !important;
    border-radius: var(--ns-radius-lg) !important;
    box-shadow: none;
}
body .course-item:hover,
body .instructor-item:hover,
body .blog-item:hover { box-shadow: var(--ns-lift); border-color: var(--ns-line-strong) !important; }
body .course-img-wrap { border-radius: var(--ns-radius-md); margin: 8px 8px 0; }
body .course-img-wrap::before { display: none; }
body .course-item-btn { background: var(--ns-paper); color: var(--ns-forest); border: 1px solid var(--ns-line); }
body .course-tag { background: var(--ns-forest) !important; color: var(--ns-on-forest); border-radius: 999px !important; }
body .course-title a, body .card-title a { color: var(--ns-forest); }
body .instructor-name-certificate a { color: var(--ns-ink-muted); }
body .star-ratings .fill-ratings span, body .rating-list .star-full { color: var(--ns-gold); }

body .form-control,
body .form-select,
body select.form-control,
body textarea.form-control {
    background-color: var(--ns-paper);
    border: 1px solid var(--ns-line-strong);
    border-radius: var(--ns-radius-sm);
    color: var(--ns-ink);
}
body .form-control::placeholder { color: var(--ns-ink-muted); }
body .form-control:focus,
body .form-select:focus {
    border-color: var(--ns-growth);
    box-shadow: 0 0 0 3px rgba(46, 107, 87, .15);
    background-color: #fff;
}
body .form-check-input:checked { background-color: var(--ns-forest); border-color: var(--ns-forest); }

body .pagination .page-link {
    color: var(--ns-forest);
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-sm) !important;
    margin: 0 3px;
}
body .pagination .page-item.active .page-link { background: var(--ns-forest); border-color: var(--ns-forest); color: var(--ns-on-forest); }

body .nav-tabs .nav-link.active,
body .tab-nav-list .nav-link.active { color: var(--ns-forest); border-color: var(--ns-gold); }

body .accordion-item {
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-md) !important;
    margin-bottom: 8px;
    overflow: hidden;
}
body .accordion-button { background: transparent; color: var(--ns-forest); font-family: var(--ns-font); box-shadow: none; }
body .accordion-button:not(.collapsed) { background: transparent; color: var(--ns-forest); box-shadow: none; }
body .accordion-button:focus { box-shadow: none; }
body .accordion-button:focus-visible { outline: 3px solid var(--ns-gold); outline-offset: -3px; }

/* Owl carousel nav */
body .owl-carousel .owl-nav button.owl-prev,
body .owl-carousel .owl-nav button.owl-next {
    background: var(--ns-paper) !important;
    border: 1px solid var(--ns-line-strong) !important;
    color: var(--ns-forest) !important;
    border-radius: 50% !important;
    width: 42px;
    height: 42px;
    box-shadow: none;
}
body .owl-carousel .owl-nav button:hover { background: var(--ns-forest) !important; color: var(--ns-on-forest) !important; }
body .owl-carousel .owl-stage { display: flex; }
body .owl-carousel .owl-item { display: flex; }
body .owl-carousel .owl-item > * { width: 100%; }

/* Floating contact buttons */
body .btn-whatsapp, body .btn-call { box-shadow: var(--ns-lift); }
body .btn-call { background: var(--ns-forest) !important; }

/* User guide strip (partial) */
body .user-guide-section { background: var(--ns-forest); padding: var(--ns-section) 0; }
body .user-guide-shape { display: none; }
body .user-guide-title { color: var(--ns-on-forest); font-size: clamp(1.75rem, 3vw, 2.5rem); }
body .user-guide-subtitle { color: var(--ns-on-forest-muted); }
body .user-guide-section .theme-button1 { background: var(--ns-gold) !important; border-color: var(--ns-gold) !important; color: var(--ns-forest) !important; }
body .user-guide-section .theme-button3 { background: transparent !important; color: var(--ns-on-forest) !important; border-color: rgba(245, 242, 235, .7) !important; }
body .user-guide-video-wrapper { border-radius: var(--ns-radius-lg); overflow: hidden; }

/* ==========================================================================
   Home & shared brand components (ns-*)
   ========================================================================== */
.ns-section { padding: var(--ns-section) 0 0; }
.ns-section-tight { padding-top: clamp(48px, 5.5vw, 80px); }
.ns-section-last { padding-bottom: var(--ns-section); }
body .ns-section-title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    color: var(--ns-forest);
    margin: 0 auto 40px;
    max-width: 30ch;
    text-wrap: balance;
}
body .ns-section-lead {
    max-width: 62ch;
    margin: -28px auto 40px;
    text-align: center;
    color: var(--ns-ink-muted);
}
.ns-section-action { display: flex; justify-content: center; margin-top: 32px; }
.ns-empty { text-align: center; color: var(--ns-ink-muted); }

.ns-grid { display: grid; gap: 20px; }
.ns-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ns-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .ns-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .ns-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ns-grid-3, .ns-grid-4 { grid-template-columns: minmax(0, 1fr); } }

.ns-card {
    position: relative;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    transition: border-color .3s var(--ns-ease), box-shadow .3s var(--ns-ease), transform .3s var(--ns-ease);
}
a.ns-card { display: block; text-decoration: none; color: inherit; }
a.ns-card:hover, .ns-program-card:hover, .ns-expert-card:hover {
    border-color: var(--ns-line-strong);
    box-shadow: var(--ns-lift);
    transform: translateY(-2px);
}
body .ns-card-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.5; margin: 0 0 8px; color: var(--ns-forest); }
body .ns-card-text { font-size: .9375rem; line-height: 1.75; margin: 0; color: var(--ns-ink-body); }

/* Capsule icon: the logo's vessel with a gold nucleus */
.ns-capsule-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 72px;
    border: 1px solid var(--ns-line-strong);
    border-radius: 999px;
    background: var(--ns-paper);
    color: var(--ns-forest);
    font-size: 28px;
    margin-bottom: 18px;
}
.ns-capsule-icon::after {
    content: "";
    position: absolute;
    bottom: 9px;
    inset-inline-end: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ns-gold);
}

/* Hero */
.ns-hero { padding: calc(var(--ns-nav-h) + 20px) 0 0; }
.ns-hero > .container { max-width: 1320px; }
.ns-hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    min-height: min(600px, calc(100vh - var(--ns-nav-h) - 40px));
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-xl);
    background: var(--ns-paper);
    overflow: hidden;
}
.ns-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 5vw, 72px) clamp(24px, 4.5vw, 64px);
}
body .ns-hero-title {
    font-size: clamp(2.25rem, 4.2vw, 3.75rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ns-forest);
    margin: 0 0 20px;
}
.ns-hero-title-accent { display: block; color: var(--ns-gold); }
body .ns-hero-lead { font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.9; max-width: 46ch; margin: 0 0 32px; color: var(--ns-ink-body); }
.ns-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
    margin: 36px 0 0;
    padding: 0;
}
.ns-hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ns-ink-body);
    padding-inline: 16px;
    border-inline-start: 1px solid var(--ns-line-strong);
}
.ns-hero-trust li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.ns-hero-trust .iconify { color: var(--ns-gold-deep); font-size: 20px; }
.ns-hero-visual { position: relative; min-height: 360px; }
.ns-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ns-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to left, var(--ns-paper) 0%, rgba(251, 249, 245, 0) 28%);
    pointer-events: none;
}
.direction-ltr .ns-hero-visual::before { background: linear-gradient(to right, var(--ns-paper) 0%, rgba(251, 249, 245, 0) 28%); }
.ns-hero-watermark {
    position: absolute;
    z-index: 1;
    inset-inline-start: -60px;
    top: 50%;
    height: 72%;
    width: auto;
    transform: translateY(-50%);
    opacity: .07;
    pointer-events: none;
}
.ns-hero-cards {
    position: absolute;
    z-index: 2;
    inset-inline-end: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 12px;
    width: min(250px, 42%);
}
.ns-progress-card {
    background: rgba(251, 249, 245, .96);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-md);
    padding: 14px 16px;
    box-shadow: var(--ns-lift);
    animation: ns-rise .9s var(--ns-ease) both;
}
.ns-progress-card:nth-child(2) { animation-delay: .12s; }
.ns-progress-card:nth-child(3) { animation-delay: .24s; }
.ns-progress-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ns-progress-card strong { display: block; font-size: .9375rem; color: var(--ns-forest); line-height: 1.4; }
.ns-progress-card small { font-size: .75rem; color: var(--ns-ink-muted); }
.ns-progress-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--ns-gold);
    color: var(--ns-gold-deep);
    font-size: 17px;
}
.ns-progress { height: 5px; border-radius: 5px; background: var(--ns-growth-soft); overflow: hidden; }
.ns-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ns-growth);
    transform-origin: right center;
    animation: ns-fill 1.4s .4s var(--ns-ease) both;
}
.direction-ltr .ns-progress span { transform-origin: left center; }
@keyframes ns-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ns-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 991.98px) {
    .ns-hero-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .ns-hero-visual { order: -1; min-height: 340px; }
    .ns-hero-visual::before { background: linear-gradient(to top, var(--ns-paper) 0%, rgba(251, 249, 245, 0) 35%) !important; }
    .ns-hero-cards { inset-inline-end: 16px; top: 16px; transform: none; width: min(220px, 55%); }
    .ns-progress-card:nth-child(3) { display: none; }
}
@media (max-width: 575.98px) {
    .ns-hero > .container { padding-inline: 12px; }
    .ns-hero-visual { min-height: 260px; }
    .ns-hero-cards { display: none; }
    .ns-hero-copy .ns-btn-row .ns-btn { flex: 1 1 100%; }
    .ns-hero-trust li { padding-inline: 10px; font-size: .8125rem; }
}

/* Goals */
.ns-goal-card { padding: 28px 24px 24px; text-align: center; }
.ns-goal-arrow { display: inline-flex; margin-top: 18px; color: var(--ns-gold-deep); font-size: 22px; transition: transform .3s var(--ns-ease); }
.direction-ltr .ns-goal-arrow { transform: scaleX(-1); }
.ns-goal-card:hover .ns-goal-arrow { transform: translateX(-4px); }
.direction-ltr .ns-goal-card:hover .ns-goal-arrow { transform: scaleX(-1) translateX(-4px); }

/* Journey */
.ns-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px; margin: 0; padding: 20px 0 0; list-style: none; counter-reset: none; }
.ns-journey-step { padding: 34px 20px 24px; text-align: center; }
.ns-step-number {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ns-gold);
    color: var(--ns-forest);
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 0 0 5px var(--ns-ivory);
}
.ns-journey-thread {
    position: absolute;
    top: 50%;
    inset-inline-end: -56px;
    width: 56px;
    height: 24px;
    color: var(--ns-forest);
    transform: translateY(-50%);
}
.direction-ltr .ns-journey-thread { transform: translateY(-50%) scaleX(-1); }
@media (max-width: 1199.98px) {
    .ns-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
    .ns-journey-thread { display: none; }
}
@media (max-width: 575.98px) { .ns-journey { grid-template-columns: minmax(0, 1fr); } }

/* Paths */
.ns-path-card { padding: 8px 8px 20px; text-align: center; }
.ns-path-media { display: block; aspect-ratio: 16 / 10; border-radius: var(--ns-radius-md); overflow: hidden; margin-bottom: 18px; background: var(--ns-growth-soft); }
.ns-path-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ns-ease); }
.ns-path-card:hover .ns-path-media img { transform: scale(1.04); }
.ns-path-card .ns-card-title, .ns-path-card .ns-card-text { padding-inline: 12px; }
.ns-path-card .ns-card-text { color: var(--ns-ink-muted); }

/* Program card */
.ns-program-card { display: flex; flex-direction: column; height: 100%; padding: 8px 8px 20px; }
.ns-program-media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--ns-radius-md); overflow: hidden; background: var(--ns-growth-soft); margin-bottom: 18px; }
.ns-program-media > a, .ns-program-media img { display: block; width: 100%; height: 100%; }
.ns-program-media img { object-fit: cover; transition: transform .6s var(--ns-ease); }
.ns-program-card:hover .ns-program-media img { transform: scale(1.04); }
.ns-tag {
    position: absolute;
    z-index: 2;
    top: 12px;
    inset-inline-start: 12px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--ns-forest);
    color: var(--ns-on-forest);
    font-size: 12px;
    font-weight: 600;
}
.ns-tag-new { background: var(--ns-gold); color: var(--ns-forest); }
.ns-tag + .ns-tag { top: 44px; }
.ns-program-actions { position: absolute; z-index: 2; top: 12px; inset-inline-end: 12px; display: flex; gap: 6px; }
.ns-program-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ns-line);
    background: rgba(251, 249, 245, .95);
    color: var(--ns-forest);
    font-size: 18px;
    cursor: pointer;
    transition: background-color .25s var(--ns-ease), color .25s var(--ns-ease);
}
.ns-program-actions button:hover { background: var(--ns-forest); color: var(--ns-on-forest); }
body .ns-program-title { font-size: 1.125rem; font-weight: 700; line-height: 1.5; margin: 0 12px 12px; }
body .ns-program-title a { color: var(--ns-forest); text-decoration: none; }
body .ns-program-title a:hover { color: var(--ns-growth); }
body .ns-program-instructor {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 14px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ns-ink-body);
    text-decoration: none;
}
.ns-program-instructor img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ns-line); }
.ns-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 12px 18px; padding: 0; }
.ns-chips li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid var(--ns-line-strong);
    border-radius: 999px;
    background: var(--ns-paper);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ns-ink-body);
    line-height: 1.6;
}
.ns-chips .iconify { color: var(--ns-growth); font-size: 14px; }
.ns-chip-rating .iconify { color: var(--ns-gold); }
.ns-chip-muted { color: var(--ns-ink-muted); font-weight: 400; }
.ns-program-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: auto 12px 0;
    padding-top: 16px;
    border-top: 1px solid var(--ns-line);
}
.ns-price-wrap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ns-price { font-size: 1.625rem; font-weight: 700; color: var(--ns-forest); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ns-price small { font-size: .875rem; font-weight: 500; color: var(--ns-ink-body); }
.ns-price-old { font-size: .875rem; color: var(--ns-ink-muted); }
.ns-cashback { display: flex; justify-content: space-between; margin: 12px 12px 0; padding: 6px 10px; border-radius: var(--ns-radius-sm); background: var(--ns-gold-soft); font-size: 12.5px; color: var(--ns-forest); }

/* Path finder */
.ns-finder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 56px);
    overflow: hidden;
}
body .ns-finder-title { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 700; line-height: 1.35; color: var(--ns-forest); margin: 0 0 12px; }
body .ns-finder-text { font-size: 1.0625rem; color: var(--ns-ink-body); max-width: 44ch; margin: 0 0 28px; }
.ns-finder-art { position: relative; height: 180px; }
.ns-finder-thread { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ns-growth); }
.ns-finder-dot { position: absolute; top: 28%; left: 44%; width: 30px; height: 30px; border-radius: 50%; background: var(--ns-gold); }
.ns-finder-mark { position: absolute; top: 50%; inset-inline-end: 0; height: 120px; width: auto; transform: translateY(-50%); }
@media (max-width: 767.98px) {
    .ns-finder { grid-template-columns: minmax(0, 1fr); }
    .ns-finder-art { order: -1; height: 110px; }
    .ns-finder-mark { height: 86px; }
}

/* Expert card */
.ns-expert-card { display: flex; flex-direction: column; gap: 20px; height: 100%; padding: 24px; }
.ns-expert-card > .ns-tag { inset-inline-start: auto; inset-inline-end: 16px; top: 16px; }
.ns-expert-body { display: flex; gap: 20px; align-items: flex-start; }
.ns-arch {
    position: relative;
    flex: none;
    display: block;
    width: 112px;
    height: 150px;
    border: 1.5px solid var(--ns-forest);
    border-radius: 56px 56px 16px 16px;
    padding: 4px;
    background: var(--ns-paper);
}
.ns-arch img { width: 100%; height: 100%; object-fit: cover; border-radius: 52px 52px 12px 12px; background: var(--ns-growth-soft); }
.ns-arch::after {
    content: "";
    position: absolute;
    top: 44px;
    inset-inline-start: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ns-gold);
    box-shadow: 0 0 0 3px var(--ns-paper);
}
.ns-expert-info { min-width: 0; padding-top: 6px; }
body .ns-expert-name { font-size: 1.1875rem; font-weight: 700; margin: 0 0 6px; line-height: 1.4; }
body .ns-expert-name a { color: var(--ns-forest); text-decoration: none; }
body .ns-expert-title { font-size: .9375rem; color: var(--ns-ink-body); margin: 0 0 12px; line-height: 1.6; }
.ns-expert-meta { display: grid; gap: 6px; margin: 0; padding: 0; }
.ns-expert-meta li { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--ns-ink-body); }
.ns-expert-meta .iconify { color: var(--ns-growth); font-size: 16px; }
.ns-expert-meta li:first-child .iconify { color: var(--ns-gold); }
.ns-expert-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.ns-expert-badges img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.ns-expert-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-top: auto; }
.ns-expert-actions .ns-btn { width: 100%; }

/* Stats */
.ns-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 36px 16px; }
.ns-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 16px; }
.ns-stat + .ns-stat { border-inline-start: 1px solid var(--ns-line); }
.ns-stat-icon { font-size: 44px; color: var(--ns-gold); margin-bottom: 6px; }
.ns-stat-value { font-size: clamp(1.375rem, 2.4vw, 2rem); font-weight: 700; color: var(--ns-forest); line-height: 1.25; font-variant-numeric: tabular-nums; }
.ns-stat-label { font-size: 1rem; color: var(--ns-ink-body); }
@media (max-width: 767.98px) {
    .ns-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
    .ns-stat:nth-child(3) { border-inline-start: 0; }
}

/* Testimonials */
.ns-quote { margin: 0; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.ns-quote-mark { font-size: 56px; line-height: .6; color: var(--ns-gold); font-weight: 700; height: 24px; }
.ns-quote blockquote { margin: 0; }
.ns-quote blockquote strong { display: block; color: var(--ns-forest); margin-bottom: 6px; }
.ns-quote blockquote p { margin: 0; line-height: 1.85; }
.ns-quote figcaption { margin-top: auto; display: flex; flex-direction: column; }
.ns-quote-name { font-weight: 700; color: var(--ns-forest); }
.ns-quote-role { font-size: .875rem; color: var(--ns-ink-muted); }
.ns-quote .rating-list { display: flex; gap: 2px; margin: 0; padding: 0; color: var(--ns-line-strong); }

/* Feature split (become instructor) */
.ns-feature-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding: 8px; }
.ns-feature-media { position: relative; border-radius: var(--ns-radius-md); overflow: hidden; aspect-ratio: 16 / 10; background: var(--ns-growth-soft); }
.ns-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.ns-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 0;
    background: var(--ns-gold);
    color: var(--ns-forest);
    font-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .3s var(--ns-ease);
}
.ns-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.ns-feature-copy { padding: 24px clamp(16px, 3vw, 40px) 24px 0; }
.direction-ltr .ns-feature-copy { padding: 24px 0 24px clamp(16px, 3vw, 40px); }
@media (max-width: 767.98px) {
    .ns-feature-split { grid-template-columns: minmax(0, 1fr); }
    .ns-feature-copy, .direction-ltr .ns-feature-copy { padding: 8px 16px 20px; }
}

/* FAQ */
.ns-accordion { max-width: 1080px; margin: 0 auto; }
body .ns-accordion .accordion-item { margin-bottom: 10px; }
body .ns-accordion .accordion-button {
    padding: 16px 22px;
    font-size: 1.0625rem;
    font-weight: 600;
    gap: 16px;
}
body .ns-accordion .accordion-button::after {
    flex-shrink: 0;
    margin-inline-start: auto;
    margin-left: 0;
    margin-right: 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3D32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
}
.direction-rtl .ns-accordion .accordion-button::after { margin-right: auto; margin-left: 0; }
body .ns-accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: var(--ns-line-strong); }
body .ns-accordion .accordion-body { padding: 0 22px 20px; color: var(--ns-ink-body); line-height: 1.85; }
body .ns-faq-help { text-align: center; margin: 24px 0 0; color: var(--ns-ink-muted); }
body .ns-faq-help a { font-weight: 600; color: var(--ns-forest); text-decoration: underline; }

/* Support & clients */
.ns-support-card { padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ns-support-card img { height: 64px; width: auto; margin-bottom: 14px; }
.ns-support-card .ns-btn { margin-top: 16px; }
.ns-clients { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 48px; margin: 56px 0 0; padding: 32px 0 0; border-top: 1px solid var(--ns-line); }
.ns-clients img { height: 44px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.ns-clients li:hover img { filter: none; opacity: 1; }

/* Closing band */
.ns-band {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(36px, 4.5vw, 56px) clamp(24px, 5vw, 64px);
    border-radius: var(--ns-radius-xl);
    background: var(--ns-forest);
    color: var(--ns-on-forest);
    overflow: hidden;
}
body .ns-band-title { font-size: clamp(1.625rem, 3vw, 2.375rem); font-weight: 700; line-height: 1.35; color: var(--ns-on-forest); margin: 0 0 10px; }
body .ns-band-text { font-size: 1.0625rem; color: var(--ns-on-forest-muted); margin: 0 0 28px; max-width: 52ch; }
.ns-band-art { flex: none; width: clamp(160px, 20vw, 240px); height: auto; color: var(--ns-gold); }
.direction-ltr .ns-band-art { transform: scaleX(-1); }
@media (max-width: 767.98px) {
    .ns-band { flex-direction: column; align-items: flex-start; }
    .ns-band-art { order: -1; width: 140px; }
    .ns-band .ns-btn-row .ns-btn { flex: 1 1 auto; }
}

/* Tabs (category courses) */
.ns-tabs { justify-content: center; gap: 8px; margin: -16px 0 32px; border: 0; }
body .ns-tabs .nav-link { border: 1px solid var(--ns-line-strong); border-radius: 999px; color: var(--ns-ink-body); padding: 6px 18px; font-weight: 500; }
body .ns-tabs .nav-link.active { background: var(--ns-forest); border-color: var(--ns-forest); color: var(--ns-on-forest); }

/* ---------- Footer ---------- */
.ns-footer { background: var(--ns-forest); color: var(--ns-on-forest); padding: clamp(48px, 6vw, 72px) 0 0; }
.ns-footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(32px, 5vw, 64px); padding-bottom: 40px; }
.ns-footer-brand { padding-inline-end: clamp(24px, 4vw, 56px); border-inline-end: 1px solid rgba(245, 242, 235, .16); }
.ns-footer-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin-bottom: 18px; }
.ns-footer-logo img { height: 64px; width: auto; }
.ns-footer-logo span { font-size: 22px; font-weight: 700; color: var(--ns-on-forest); }
body .ns-footer-brand p { color: var(--ns-on-forest-muted); font-size: .9375rem; line-height: 1.85; margin: 0 0 22px; }
.ns-footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
body .ns-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(200, 162, 91, .55);
    border-radius: var(--ns-radius-sm);
    color: var(--ns-on-forest);
    font-size: 20px;
    transition: background-color .25s var(--ns-ease), border-color .25s var(--ns-ease);
}
body .ns-footer-social a:hover { background: rgba(200, 162, 91, .15); border-color: var(--ns-gold); color: var(--ns-on-forest); }
.ns-footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
body .ns-footer-title { font-size: 1rem; font-weight: 600; color: var(--ns-gold); margin: 0 0 18px; }
.ns-footer-col ul { margin: 0; padding: 0; display: grid; gap: 12px; }
body .ns-footer-col a, body .ns-footer-col span { color: var(--ns-on-forest); font-size: .9375rem; text-decoration: none; }
body .ns-footer-col a:hover { color: var(--ns-gold); }
.ns-footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
body .ns-footer-contact .iconify { flex: none; font-size: 20px; color: var(--ns-on-forest-muted); margin-top: 2px; }
.ns-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 32px;
    padding: 20px 0;
    border-top: 1px solid rgba(245, 242, 235, .16);
}
body .ns-footer-bottom p { margin: 0; font-size: .875rem; color: var(--ns-on-forest-muted); }
.ns-footer-payments { height: 26px; width: auto; }
@media (max-width: 1199.98px) {
    .ns-footer-top { grid-template-columns: minmax(0, 1fr); }
    .ns-footer-brand { border-inline-end: 0; padding-inline-end: 0; padding-bottom: 32px; border-bottom: 1px solid rgba(245, 242, 235, .16); }
}
@media (max-width: 767.98px) { .ns-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ---------- Fix pass ---------- */
/* Navbar fit: links never wrap; secondary tools give way as width drops */
body #mainNav .navbar-nav .nav-item .nav-link { white-space: nowrap; }
body #mainNav .input-group.landing { width: 190px; }
@media (min-width: 992px) and (max-width: 1499.98px) {
    body #mainNav .header-nav-left-side { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1299.98px) {
    body #mainNav .ns-brand img { height: 46px; }
    body .ns-wordmark { font-size: 19px; }
}

/* Owl forces every img to width:100%; keep small images at their size */
body .owl-carousel .owl-item .ns-program-instructor img { width: 34px; height: 34px; }
body .owl-carousel .owl-item .ns-expert-badges img { width: 26px; height: 26px; }
body .owl-carousel .owl-item .ns-arch img { width: 100%; height: 100%; }

/* Expert cards inside carousels are narrow: stack portrait over info */
body .owl-carousel .ns-expert-body { flex-direction: column; align-items: center; text-align: center; }
body .owl-carousel .ns-expert-meta { justify-items: center; }
body .owl-carousel .ns-expert-badges { justify-content: center; }
body .owl-carousel .ns-expert-actions { grid-auto-flow: row; }
@media (max-width: 1199.98px) and (min-width: 992px) {
    .ns-grid-3 .ns-expert-body { flex-direction: column; }
}

/* Accordion: one chevron, no legacy spacing or shadow */
body .accordion-header { margin: 0; }
body .accordion-collapse { box-shadow: none; }
body .accordion-body { background: transparent; }
body .ns-accordion .accordion-button::after {
    content: "";
    font-family: inherit !important;
    width: 1.25rem;
    height: 1.25rem;
    background-size: 1.25rem;
    background-repeat: no-repeat;
    float: none;
    transition: transform .3s var(--ns-ease);
}
body .ns-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3D32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    transform: rotate(180deg);
}

/* Achievement values are phrases, not bare numbers */
.ns-stat-value { font-size: clamp(1.25rem, 2vw, 1.625rem); }
body #mainNav .navbar-toggler { background: transparent !important; box-shadow: none; }
body #mainNav .navbar-toggler:focus-visible { outline: 3px solid var(--ns-gold); outline-offset: 2px; }

/* ==========================================================================
   Student panel (operate surfaces: learning, profile, cart, tickets)
   ========================================================================== */
/* Compact page header: ivory ground, forest title, one hairline */
body .blank-page-banner-header,
body .blank-page-banner-header.gradient-bg { background: var(--ns-ivory) !important; }
body .blank-page-banner-header .blank-page-banner-wrap {
    margin-top: var(--ns-nav-h);
    min-height: 0;
    padding: clamp(32px, 4vw, 48px) 0 clamp(24px, 3vw, 36px);
    background: var(--ns-ivory);
    border-bottom: 1px solid var(--ns-line);
}
body .blank-page-banner-header .page-banner-heading {
    color: var(--ns-forest) !important;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
    padding-bottom: 8px !important;
    margin: 0;
}
body .blank-page-banner-header p { color: var(--ns-ink-body) !important; }
body .blank-page-banner-header .breadcrumb { margin: 0; }
body .blank-page-banner-header .breadcrumb-item,
body .blank-page-banner-header .breadcrumb-item a,
body .blank-page-banner-header .breadcrumb-item + .breadcrumb-item::before { color: var(--ns-ink-muted); }
body .blank-page-banner-header .breadcrumb-item a:hover { color: var(--ns-growth); }
body .blank-page-banner-header .breadcrumb-item.active { color: var(--ns-gold-deep); font-weight: 600; text-decoration: none; }
body .course-watch-banner-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; padding: 0; }
body .course-watch-banner-items li {
    margin: 0;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--ns-line-strong);
    border-radius: 999px;
    background: var(--ns-paper);
    color: var(--ns-ink-body) !important;
    font-size: 13px !important;
}
body .course-watch-banner-items li .iconify { color: var(--ns-growth); font-size: 15px; margin: 0 !important; }

/* Page rhythm */
body .wishlist-page-area,
body .student-profile-page { padding-top: clamp(28px, 3.5vw, 48px); padding-bottom: var(--ns-section); }
body .courses-filter-bar { gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 0; border-bottom: 0; }

/* Sort box */
body .filter-box {
    height: 44px;
    gap: 8px;
    padding-inline: 12px 4px;
    background: var(--ns-paper) !important;
    border: 1px solid var(--ns-line-strong);
    border-radius: var(--ns-radius-sm);
}
body .filter-box .form-select { border: 0; background-color: transparent; height: 40px; box-shadow: none; }
body .filter-box-short-icon p { color: var(--ns-ink-muted); font-size: 14px; margin: 0; }
body .filter-box-short-icon img { width: 18px; filter: brightness(0) saturate(100%) invert(18%) sepia(26%) saturate(1200%) hue-rotate(118deg); }

/* Data tables become a single paper panel */
body .table-responsive:has(> .table),
body .table-responsive-xl:has(> .table) {
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
}
body .table-responsive > .table,
body .table-responsive-xl > .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    background: transparent !important;
    margin: 0;
    color: var(--ns-ink-body);
}
body .table-responsive > .table > thead th,
body .table-responsive-xl > .table > thead th {
    background: transparent;
    color: var(--ns-ink-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ns-line);
    white-space: nowrap;
}
body .table-responsive > .table > tbody > tr > td,
body .table-responsive-xl > .table > tbody > tr > td {
    padding: 16px 20px;
    vertical-align: middle;
    border-bottom: 1px solid var(--ns-line);
    color: var(--ns-ink);
    font-size: 15px;
}
body .table-responsive > .table > tbody > tr:last-child > td,
body .table-responsive-xl > .table > tbody > tr:last-child > td { border-bottom: 0; }

/* Course cell: thumbnail + title, no nested card chrome */
body .wishlist-course-item { width: auto; min-width: 300px; }
body .course-item.wishlist-item {
    width: auto;
    gap: 16px;
    background: transparent;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body .wishlist-item .course-img-wrap {
    position: relative;
    width: 112px;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: var(--ns-radius-sm);
    background: var(--ns-growth-soft);
    overflow: hidden;
}
body .wishlist-item .course-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
body .course-item.wishlist-item .card-body { padding: 0; }
body .wishlist-item .course-title { font-size: 15px; font-weight: 600; line-height: 1.5; margin-bottom: 6px; }
body .wishlist-item .instructor-name-certificate { font-size: 13px; line-height: 1.4; }
body .my-learning-invoice,
body .my-course-give-a-review-btn { font-size: 13px !important; color: var(--ns-ink-muted) !important; }
body .wishlist-remove button { color: var(--ns-ink-muted); font-size: 22px; }
body .wishlist-remove button:hover { color: var(--ns-forest); }
body .wishlist-add-to-cart-btn .theme-button,
body .wishlist-add-to-cart-btn .theme-btn,
body .wishlist-add-to-cart-btn button { min-height: 36px; padding: 6px 16px !important; font-size: 13px !important; white-space: nowrap; }
body .wishlist-add-to-cart-btn .theme-button,
body .wishlist-add-to-cart-btn .theme-btn { min-width: 0; }

/* Progress: growth on a soft track */
body .ns-learning-table .barras { margin: 0; }
body .barra { background: var(--ns-growth-soft); border-radius: 999px; overflow: hidden; }
body .ns-learning-table .barra { width: 100%; max-width: 180px; height: 6px; margin: 6px 0 0; }
body .barra-nivel { background: var(--ns-growth) !important; border-radius: 999px; }
body .ns-learning-table .barra-nivel { height: 6px; }
body .progress-hint-value { font-size: 13px !important; font-weight: 600; color: var(--ns-forest) !important; font-variant-numeric: tabular-nums; }

/* Empty states: the capsule with its nucleus, not stock art */
body .empty-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: clamp(48px, 7vw, 80px) 24px;
    background: var(--ns-paper);
    border: 1px dashed var(--ns-line-strong);
    border-radius: var(--ns-radius-lg);
}
body .empty-data > img { display: none; }
body .empty-data::before {
    content: "";
    width: 56px;
    height: 72px;
    margin-bottom: 12px;
    border: 1.5px solid var(--ns-line-strong);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 62%, var(--ns-gold) 0 6px, transparent 7px);
}
body .empty-data h4,
body .empty-data h5 { margin: 0 !important; font-size: 1.125rem; font-weight: 600; color: var(--ns-forest); }
body .empty-data p { width: auto; max-width: 46ch; color: var(--ns-ink-muted); font-size: 15px; }

/* Profile & settings: one panel, quiet sidebar, roomy form */
body .student-profile-page-content > .row > .col-12 > .row.bg-white {
    margin: 0;
    background: var(--ns-paper) !important;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    overflow: hidden;
}
body .student-profile-left-part {
    height: 100%;
    padding: 32px 16px;
    border: 0;
    border-inline-end: 1px solid var(--ns-line);
    background: var(--ns-ivory);
}
body .student-profile-left-part h6 {
    margin: 0 12px 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ns-line);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ns-forest);
}
body .student-profile-left-part ul { display: grid; gap: 2px; margin: 0; padding: 0; }
body .student-profile-left-part ul li a {
    position: relative;
    padding: 10px 14px;
    border-radius: var(--ns-radius-sm);
    color: var(--ns-ink-body);
    font-size: 15px !important;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s var(--ns-ease), color .2s var(--ns-ease);
}
body .student-profile-left-part ul li a:hover { background: rgba(228, 237, 232, .6); color: var(--ns-forest); }
body .student-profile-left-part ul li a.active { background: var(--ns-growth-soft); color: var(--ns-forest); font-weight: 600; }
body .student-profile-left-part ul li a.active::after {
    content: "";
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--ns-gold);
}
body .student-profile-right-part { padding: clamp(24px, 3.5vw, 40px); border: 0; }
body .student-profile-right-part > h6 {
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ns-line);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ns-forest);
}
body .student-profile-right-part .profile-top .profile-image img { border: 1.5px solid var(--ns-line-strong); }
body .student-profile-right-part .profile-top .profile-image .file-uplode-btn { background: var(--ns-forest) !important; color: var(--ns-on-forest) !important; }
body .label-text-title { color: var(--ns-forest) !important; font-size: 14px !important; font-weight: 600 !important; }
body .student-profile-right-part .form-control,
body .student-profile-right-part .form-select { min-height: 46px; }
@media (max-width: 991.98px) {
    body .student-profile-left-part { height: auto; padding: 16px; border-inline-end: 0; border-bottom: 1px solid var(--ns-line); }
    body .student-profile-left-part h6 { display: none; }
    body .student-profile-left-part ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
    body .student-profile-left-part ul::-webkit-scrollbar { display: none; }
    body .student-profile-left-part ul li a { white-space: nowrap; border: 1px solid var(--ns-line); background: var(--ns-paper); }
    body .student-profile-left-part ul li a.active::after { display: none; }
}

/* Course player */
body .course-watch-page-area .container-fluid { padding: 0 clamp(16px, 4vw, 56px); }
body .course-watch-right-side {
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    padding: 24px 20px;
}
body .course-watch-right-side .accordion-item { border-radius: var(--ns-radius-md) !important; margin-bottom: 10px; }
body .course-watch-right-side .accordion-header { border: 0; }
body .course-watch-right-side .accordion-header .accordion-button:not(.collapsed) { background: var(--ns-growth-soft); }
body .course-watch-right-side .accordion-body { background: var(--ns-paper) !important; border-top: 1px solid var(--ns-line); }
body .video-player-area { border-radius: var(--ns-radius-lg); overflow: hidden; background: var(--ns-forest-deep); }
body .course-watch-page-area .course-details-tab-nav-wrap .tab-nav-list.nav-tabs { border-bottom: 1px solid var(--ns-line); gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
body .course-watch-page-area .course-details-tab-nav-wrap .tab-nav-list .nav-link {
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ns-ink-muted);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
body .course-watch-page-area .course-details-tab-nav-wrap .tab-nav-list .nav-link:hover { color: var(--ns-forest); }
body .course-watch-page-area .course-details-tab-nav-wrap .tab-nav-list .nav-link.active { color: var(--ns-forest); font-weight: 600; border-bottom-color: var(--ns-gold); background: transparent; }

/* Checkout & payments */
body .payment-method-card-box {
    background: var(--ns-paper);
    border: 1px solid var(--ns-line-strong);
    border-radius: var(--ns-radius-md);
    transition: border-color .2s var(--ns-ease), background-color .2s var(--ns-ease);
}
body .payment-method-card-box:has(.form-check-input:checked) { border-color: var(--ns-forest); background: rgba(228, 237, 232, .45); }

/* Modals */
body .modal-content {
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    box-shadow: 0 24px 48px -24px rgba(11, 61, 50, .35);
}
body .modal-header { border-bottom: 1px solid var(--ns-line); padding: 18px 24px; }
body .modal-footer { border-top: 1px solid var(--ns-line); padding: 14px 24px; }
body .modal-title { color: var(--ns-forest); font-weight: 700; }
body .course-watch-page-area { padding-top: clamp(24px, 3vw, 40px); }

/* Cart & checkout panels */
body .cart-page-left-part,
body .order-summary-box,
body .checkout-right-side-box {
    background: var(--ns-paper) !important;
    border: 1px solid var(--ns-line) !important;
    border-radius: var(--ns-radius-lg);
}
body .cart-page-title h6,
body .order-summary-box h6 { color: var(--ns-forest); font-weight: 700; }
body .cart-order-summary-item-box { color: var(--ns-ink-body); font-variant-numeric: tabular-nums; }
body .cart-order-summary-item-box.border-top { border-color: var(--ns-line) !important; color: var(--ns-forest); font-weight: 700; }
body .checkout-page { padding-top: clamp(28px, 3.5vw, 48px); padding-bottom: var(--ns-section); }

/* My learning on phones: each enrollment becomes a stacked card */
@media (max-width: 767.98px) {
    body .ns-learning-table thead { display: none; }
    body .ns-learning-table,
    body .ns-learning-table tbody { display: block; }
    body .ns-learning-table tbody > tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px 16px;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--ns-line);
    }
    body .ns-learning-table tbody > tr:last-child { border-bottom: 0; }
    body .table-responsive > .ns-learning-table > tbody > tr > td { display: block; padding: 0; border: 0; background: transparent; }
    body .ns-learning-table tbody > tr > td:nth-child(1) { grid-column: 1 / -1; min-width: 0; }
    body .ns-learning-table tbody > tr > td:nth-child(2),
    body .ns-learning-table tbody > tr > td:nth-child(4) { font-size: 13px; color: var(--ns-ink-muted); }
    body .ns-learning-table tbody > tr > td:nth-child(3) { display: none !important; }
    body .ns-learning-table .barra { max-width: none; }
    body .ns-learning-table .review-progress-bar-wrap { display: block; }
    body .wishlist-course-item { min-width: 0; }
}

/* ==========================================================================
   Auth pages (login, sign-up, forgot / reset password)
   ========================================================================== */
body .ns-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
    min-height: 100vh;
    background: var(--ns-ivory);
}
.ns-auth-side {
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    margin: 16px;
    padding: clamp(32px, 4vw, 56px);
    border-radius: var(--ns-radius-xl);
    background: var(--ns-forest);
    color: var(--ns-on-forest);
    overflow: hidden;
}
.ns-auth-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.ns-auth-logo img { height: 56px; width: auto; }
body .ns-auth-logo span { font-size: 22px; font-weight: 700; color: var(--ns-on-forest); line-height: 1; }
.ns-auth-side-copy { position: relative; z-index: 1; max-width: 40ch; }
body .ns-auth-side-title { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 700; line-height: 1.35; color: var(--ns-on-forest); margin: 0 0 14px; }
body .ns-auth-side-copy p:not(.ns-auth-side-title) { color: var(--ns-on-forest-muted); font-size: 1.0625rem; margin: 0; }
.ns-auth-side-mark { position: absolute; inset-inline-end: -48px; bottom: -40px; height: 62%; width: auto; opacity: .08; pointer-events: none; }
.ns-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 40px 16px;
}
body .ns-auth-logo-compact { display: none; }
body .ns-auth-logo-compact span { color: var(--ns-forest); font-size: 19px; }
.ns-auth-logo-compact img { height: 46px; }
.ns-auth-card {
    width: 100%;
    max-width: 480px;
    padding: clamp(24px, 4vw, 40px);
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
}
body .ns-auth-title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.35; color: var(--ns-forest); margin: 0 0 6px; }
body .ns-auth-sub { color: var(--ns-ink-body); margin: 0 0 28px; }
body .ns-auth-sub a, body .ns-auth-foot a, body .ns-field-head a, body .ns-consent a { color: var(--ns-forest); font-weight: 600; text-decoration: underline; }
body .ns-auth-foot { text-align: center; margin: 20px 0 0; }
body .ns-auth-home { color: var(--ns-ink-muted); font-size: 14px; text-decoration: none; padding: 8px; }
body .ns-auth-home:hover { color: var(--ns-forest); }
.ns-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; min-width: 0; }
.ns-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ns-field-head a { font-size: 14px; }
body .ns-field label { font-size: 15px; font-weight: 600; color: var(--ns-forest); margin: 0; }
body .ns-field .form-control, body .ns-field .form-select { min-height: 48px; }
.ns-required { color: #A4402F; }
body .ns-field-error { color: #A4402F; font-size: 14px; }
.ns-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ns-field-row-phone { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); }
.ns-password { position: relative; }
.ns-password .form-control { padding-inline-end: 48px; }
body .ns-password .pass-icon {
    position: absolute;
    top: 50%;
    inset-inline-end: 4px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--ns-radius-sm);
    background: transparent;
    color: var(--ns-ink-muted);
}
body .ns-password .pass-icon:hover { color: var(--ns-forest); }
body .ns-consent { display: flex; gap: 10px; align-items: flex-start; padding: 0; margin-bottom: 20px; }
body .ns-consent .form-check-input { flex: none; float: none; margin: 5px 0 0; width: 18px; height: 18px; }
body .ns-consent .form-check-label { font-size: 14px; color: var(--ns-ink-body); line-height: 1.7; }
.ns-auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--ns-ink-muted); font-size: 14px; }
.ns-auth-divider::before, .ns-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--ns-line); }
.ns-auth-social { display: grid; gap: 10px; }
.ns-auth-social .ns-btn { font-weight: 500; }
.ns-auth-social .iconify { font-size: 20px; }
@media (max-width: 991.98px) {
    body .ns-auth { grid-template-columns: minmax(0, 1fr); }
    .ns-auth-side { display: none; }
    body .ns-auth-logo-compact { display: inline-flex; }
    .ns-auth-main { justify-content: flex-start; padding-top: 32px; }
}
@media (max-width: 479.98px) {
    .ns-field-row { grid-template-columns: minmax(0, 1fr); }
    .ns-auth-card { padding: 24px 16px; border-radius: var(--ns-radius-md); }
}

/* ==========================================================================
   Legacy neutralizer: LMSZAI hard-coded colors that bypass the variables
   ========================================================================== */
body .search-tag-list {
    background: var(--ns-paper);
    border: 1px solid var(--ns-line-strong);
    color: var(--ns-ink-body);
    font-size: 13px;
    padding: 4px 12px;
}
body .search-tag-list:hover { border-color: var(--ns-forest); color: var(--ns-forest); }
body .price-off {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 2px 10px;
    background: var(--ns-gold-soft);
    color: var(--ns-forest);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
body .instructor-name-certificate,
body .instructor-name-certificate a { color: var(--ns-ink-muted); }
body .theme-button3 { border-width: 1.5px; }
body .btn-violet-transparent { background-color: transparent; }
body .faq-tab-nav-wrap .nav-tabs .nav-link.active { border-color: var(--ns-gold); }
body .ticket-reply-item.ticket-reply-item-staff,
body .recently-added-course-item-right button,
body .video-upload-final-item .common-upload-video-btn { background-color: var(--ns-growth-soft); }
body .text-danger { color: #A4402F !important; }

/* ==========================================================================
   Design review fixes (2026-10-11)
   ========================================================================== */
/* --- Home --- */
/* gold on paper is 2.28:1; gold-deep keeps the accent and passes large-text AA */
.ns-hero-title-accent { color: var(--ns-gold-deep); }
.ns-hero-watermark { display: none; }
.ns-hero-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.ns-hero-trust li { align-items: flex-start; line-height: 1.5; }
@media (max-width: 575.98px) {
    .ns-hero-photo { object-position: center top; }
    .ns-hero-trust { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ns-hero-trust li, .ns-hero-trust li:first-child { padding-inline: 0; border-inline-start: 0; }
}
.ns-goal-card { display: flex; flex-direction: column; align-items: center; }
.ns-goal-arrow { margin-top: auto; padding-top: 18px; }
.ns-expert-badges img { filter: grayscale(1) contrast(1.1); opacity: .75; }
.ns-arch-tag {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--ns-gold);
    color: var(--ns-forest);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    box-shadow: 0 0 0 3px var(--ns-paper);
}
.ns-rate { white-space: nowrap; }
.ns-grid-center { display: flex; flex-wrap: wrap; justify-content: center; }
.ns-grid-center > * { flex: 0 1 calc((100% - 40px) / 3); min-width: min(100%, 300px); }
.ns-finder-end { position: absolute; right: -5px; top: 90%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--ns-gold); }
body .user-guide-section { margin-top: var(--ns-section); }
.user-guide-content { max-width: 520px; }
body .user-guide-title { font-weight: 700; margin-bottom: 16px; }
body .user-guide-subtitle { margin-bottom: 28px; }
body .user-guide-video-wrapper { border: 1px solid rgba(245, 242, 235, .2); box-shadow: none; background: var(--ns-forest-deep); }
.user-guide-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ns-forest-deep); }
@media (max-width: 575.98px) {
    .ns-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ns-goal-card { padding: 20px 12px 16px; }
    .ns-goal-card .ns-card-title { font-size: 1rem; }
    .ns-goal-card .ns-card-text { font-size: .875rem; line-height: 1.65; }
    .ns-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
    .ns-journey-step { padding: 30px 12px 18px; }
    .ns-goal-card .ns-capsule-icon, .ns-journey-step .ns-capsule-icon { width: 48px; height: 62px; font-size: 24px; margin-bottom: 12px; }
}

/* --- Shell --- */
/* short pages: footer sits at the bottom of the viewport */
body:has(> .ns-footer) { display: flex; flex-direction: column; min-height: 100vh; height: auto; }
body > .ns-footer { margin-top: auto; }
/* floating contact buttons: ring keeps the forest call button visible on the forest footer */
body .btn-call { box-shadow: 0 0 0 3px var(--ns-ivory), var(--ns-lift); }
body:has(.grecaptcha-badge) .btn-whatsapp { bottom: 96px; }
@media (max-width: 767.98px) {
    body .btn-whatsapp, body .btn-call { width: 52px; height: 52px; bottom: 16px; }
    body .btn-whatsapp { right: 16px; }
    body .btn-call { left: 16px; }
    body .btn-whatsapp svg, body .btn-call svg { width: 26px; height: 26px; }
    /* clearance so the last CTAs and footer links are never stuck under the FABs */
    body > .ns-footer { padding-bottom: 84px; }
    .ns-footer-col ul { gap: 0; }
    body .ns-footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
    .ns-footer-contact li { align-items: center; }
}
/* inner pages: the first section after a banner starts closer, and stacked sections share one gap */
body .section-t-space { padding-top: var(--ns-section); }
body .section-b-space { padding-bottom: var(--ns-section); }
body .section-b-space + .section-t-space { padding-top: 0; }
body .page-banner-header + section,
body .page-banner-header + .section-t-space { padding-top: clamp(40px, 5vw, 64px); }

/* --- Listing pages (courses, categories, bundles, consultation) --- */
body .courses-grids, body #appendCourseList { --bs-gutter-y: 24px; }
.ns-program-card .ns-price-wrap { flex-wrap: nowrap; }
.ns-program-foot { flex-wrap: wrap; row-gap: 14px; }
.ns-price-old { white-space: nowrap; }
.ns-price { white-space: nowrap; }
body .load-more-btn .iconify { display: none; }
body .my-others-courses #loadMoreBtn { margin-top: 24px; }
body .sidebar-filter-btn { background: transparent; border: 0; padding: 0; font: inherit; }
.ns-filter-close { display: none; }
@media (max-width: 991.98px) {
    body .show-all-course-area-wrap { flex: 0 0 100%; width: 100%; max-width: 100%; }
    body .coursesLeftSidebar,
    body .coursesLeftSidebar.bang {
        display: block;
        position: fixed;
        z-index: 1060;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: min(360px, 88vw);
        max-width: none;
        padding: 56px 16px 24px;
        overflow-y: auto;
        background: var(--ns-ivory);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .3s var(--ns-ease), visibility .3s;
    }
    .direction-ltr .coursesLeftSidebar { transform: translateX(-100%); }
    body.ns-filters-open .coursesLeftSidebar { transform: none; visibility: visible; box-shadow: var(--ns-lift); }
    body.ns-filters-open::before { content: ""; position: fixed; inset: 0; z-index: 1055; background: rgba(7, 42, 35, .45); }
    body.ns-filters-open { overflow: hidden; }
    .ns-filter-close {
        position: absolute;
        top: 10px;
        inset-inline-end: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--ns-line-strong);
        border-radius: var(--ns-radius-sm);
        background: var(--ns-paper);
        color: var(--ns-forest);
        font-size: 20px;
    }
}

/* --- Course & bundle details --- */
body .course-single-page-header .section-overlay { padding-top: calc(var(--ns-nav-h) + 48px); padding-bottom: 48px; min-height: 0; }
body .course-single-banner-content { width: 100%; }
/* the info box no longer hangs 300px into the hero; the hero is sized to its content */
body .course-single-details-right-content { margin-top: 0; }
body .course-single-page-header .col-lg-6 { flex: 0 0 auto; width: 100%; max-width: 860px; }
body .course-single-page-header .pb-30 { padding-bottom: 16px !important; }
.ns-detail-price { display: flex; flex-direction: column; gap: 8px; }
.ns-detail-price .ns-price-wrap { align-items: center; flex-wrap: wrap; gap: 10px; }
.ns-detail-price .ns-price { font-size: clamp(1.75rem, 3vw, 2.25rem); }
body .overview-content, body .course-single-details-left-content .tab-pane > p { max-width: 68ch; }
.ns-detail-actions { display: grid; gap: 8px; }
.ns-detail-actions .theme-btn { width: 100%; justify-content: center; margin: 0 !important; }
@media (max-width: 991.98px) {
    body .course-single-page-header .section-overlay { padding-top: calc(var(--ns-nav-h) + 24px); padding-bottom: 24px; }
    /* the enroll box follows the description on phones; pull it right under the hero */
    body .course-single-details-area > .container > .row { display: flex; flex-direction: column-reverse; }
}

/* --- Expert cards: stack portrait over info whenever the card itself is narrow (listing grids, sidebars) --- */
.ns-expert-card { container-type: inline-size; }
@container (max-width: 380px) {
    .ns-expert-body { flex-direction: column; align-items: center; text-align: center; }
    .ns-expert-meta { justify-items: center; }
    .ns-expert-badges { justify-content: center; }
    .ns-expert-actions { grid-auto-flow: row; }
}
body .instructor-search-page-area .sidebar-filter-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--ns-forest); font-weight: 600; min-height: 44px; }

/* --- Expert profile --- */
.ns-profile-arch { width: 150px; height: 196px; margin: 0 auto 16px; border-radius: 75px 75px 16px 16px; }
.ns-profile-arch img { border-radius: 71px 71px 12px 12px; }
.ns-profile-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 0; padding: 0; }
body .ns-profile-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ns-line-strong);
    border-radius: var(--ns-radius-sm);
    color: var(--ns-forest);
    font-size: 20px;
}
body .ns-profile-social a:hover { border-color: var(--ns-forest); background: var(--ns-growth-soft); }

/* --- Typography guards --- */
/* tracking breaks Arabic joining (legacy rules set up to .89em) */
body.direction-rtl, body.direction-rtl * { letter-spacing: 0 !important; }

/* --- Blog --- */
body .blog-page-area:not(.blog-details-page) .blog-page-left-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
body .blog-page-area:not(.blog-details-page) .blog-page-left-content > :not(.blog-item) { grid-column: 1 / -1; }
body .blog-page-area:not(.blog-details-page) .blog-item { display: flex; flex-direction: column; margin: 0; padding: 8px 8px 20px; }
body .blog-page-area:not(.blog-details-page) .blog-item-img-wrap { aspect-ratio: 16 / 10; border-radius: var(--ns-radius-md); }
body .blog-page-area:not(.blog-details-page) .blog-item-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
body .blog-page-area:not(.blog-details-page) .blog-item-bottom-part { padding: 16px 12px 0; display: flex; flex-direction: column; flex: 1; }
body .blog-page-area:not(.blog-details-page) .blog-title { font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
body .blog-page-area:not(.blog-details-page) .blog-read-more-btn { margin-top: auto; }
@media (max-width: 767.98px) { body .blog-page-area:not(.blog-details-page) .blog-page-left-content { grid-template-columns: minmax(0, 1fr); } }
body .ns-article-title { font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 700; line-height: 1.35; color: var(--ns-forest); margin-bottom: 12px; }
body .blog-details-content-wrap { max-width: 68ch; }
body .blog-details-content-wrap .blog-content h2 { font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 700; line-height: 1.4; margin: 1.5em 0 .5em; }
body .blog-details-content-wrap .blog-content h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.45; margin: 1.4em 0 .5em; }
body .blog-details-content-wrap .blog-content h4 { font-size: 1.125rem; font-weight: 600; margin: 1.3em 0 .4em; }
body .blog-content a, body .blog-content a span { color: var(--ns-growth) !important; text-decoration: underline; }

/* --- About --- */
.ns-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 22vw, 300px); gap: 16px; }
.ns-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--ns-radius-lg); }
.ns-gallery img:first-child:nth-last-child(odd) { grid-row: span 2; }
@media (max-width: 575.98px) { .ns-gallery { grid-template-columns: minmax(0, 1fr); } .ns-gallery img:first-child { grid-row: auto; } }
body .course-instructor-support-wrap > [class*="col-"] { margin-bottom: 20px; }
body .client-logo-item img { filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
body .client-logo-item:hover img { filter: none; opacity: 1; }

/* --- Contact --- */
body .contact-page-area .row > .contact-page-left-side,
body .contact-page-area .row > .contact-page-right { background: var(--ns-paper) !important; border: 1px solid var(--ns-line); }
body .contact-page-area .row > .contact-page-left-side { border-radius: 0 var(--ns-radius-lg) var(--ns-radius-lg) 0; border-inline-end: 0; }
body .contact-page-area .row > .contact-page-right { border-radius: var(--ns-radius-lg) 0 0 var(--ns-radius-lg); }
.direction-ltr .contact-page-area .row > .contact-page-left-side { border-radius: var(--ns-radius-lg) 0 0 var(--ns-radius-lg); }
.direction-ltr .contact-page-area .row > .contact-page-right { border-radius: 0 var(--ns-radius-lg) var(--ns-radius-lg) 0; }
body .contact-page-left-side-wrap { padding: clamp(28px, 4vw, 56px); }
body .contact-info-item { width: auto; gap: 16px; }
body .contact-info-item .ns-capsule-icon { width: 44px; height: 58px; font-size: 22px; margin: 0; }
body .contact-info-content p { margin: 0; }
body .contact-form-area { border: 0; }
body .contact-info-content a { color: var(--ns-forest); text-decoration: none; }
.ns-form-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--ns-forest); }
@media (max-width: 767.98px) {
    body .contact-page-area .row > .contact-page-left-side,
    body .contact-page-area .row > .contact-page-right { border-radius: var(--ns-radius-lg); border-inline-end: 1px solid var(--ns-line); margin-bottom: 16px; }
}

/* --- Legal pages & certificate --- */
body .ns-legal { max-width: 68ch; margin-inline: auto; }
body .ns-legal h2 { font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 700; line-height: 1.4; margin: 1.6em 0 .5em; }
body .ns-legal h2:first-child { margin-top: 0; }
body .ns-legal h3 { font-size: 1.25rem; font-weight: 700; margin: 1.4em 0 .5em; }
body .certificate-verification-wrap { background: var(--ns-paper) !important; border: 1px solid var(--ns-line); border-radius: var(--ns-radius-lg); }
body .certificate-verify-top-left img { border-radius: var(--ns-radius-lg); }

/* --- Student panel --- */
/* gold-deep at 14px is 4.23:1; forest passes */
body .blank-page-banner-header .breadcrumb-item.active { color: var(--ns-forest); }
body .course-watch-page-area .course-details-tab-nav-wrap .tab-nav-list.nav-tabs { overflow: visible; flex-wrap: wrap; }
body .course-watch-page-area .tab-nav-list .dropdown-menu .dropdown-item.active { background: var(--ns-growth-soft); color: var(--ns-forest); }
body .watch-course-title-right-btns .font-12 { font-size: 14px !important; color: var(--ns-ink-muted) !important; }
.ns-table-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; text-align: center; }
.ns-table-empty p { margin: 0; color: var(--ns-ink-muted); }
body .empty-data .ns-btn { margin-top: 8px; }
body .stu-consult-tbl { margin: 0; }

/* --- Forum --- */
body .forum-link-box { background: var(--ns-paper); border: 1px solid var(--ns-line) !important; border-radius: var(--ns-radius-lg) !important; overflow: hidden; }
body .forum-link-box-title { background: var(--ns-ivory); }