/* ================================================================
   SCHOLARS VENUE — Custom Frontpage Styles
   Applied only on .pagelayout-frontpage
   ================================================================ */

/* ── Lightbox ────────────────────────────────────────────────── */
.sv-lightbox-trigger {
    cursor: zoom-in;
}

.sv-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
}

.sv-lightbox.is-open {
    display: flex;
}

.sv-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.sv-lightbox__window {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sv-lb-zoom 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sv-lb-zoom {
    from { transform: scale(0.82); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.sv-lightbox__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    background: #F3F4F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
    z-index: 2;
}

.sv-lightbox__close:hover {
    background: #E5E7EB;
}

.sv-lightbox__close svg {
    width: 16px;
    height: 16px;
    color: #374151;
}

.sv-lightbox__img {
    max-width: min(640px, 80vw);
    max-height: 80vh;
    border-radius: 8px;
    display: block;
    object-fit: contain;
}

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* ── Hide only the Academi logo/brand in the secondary bar ─────── */
.header-main .navbar-brand {
    display: none !important;
}

/* ── Login page — hide Moodle's secondary header (primary-navigation "Home" strip) ─── */
.pagelayout-login .header-main,
.pagelayout-login #page-navbar,
.pagelayout-login .breadcrumb-nav,
.pagelayout-login nav.breadcrumb-nav,
.pagelayout-login [aria-label="Navigation bar"],
.pagelayout-login .secondary-navigation,
.pagelayout-login .primary-navigation,
.pagelayout-login .breadcrumb,
.pagelayout-login ol.breadcrumb,
.pagelayout-login ul.breadcrumb,
.pagelayout-login [data-region="breadcrumb-nav"],
.pagelayout-login [data-region="navbar"],
.pagelayout-login #page-breadcrumb,
.pagelayout-login .page-context-header,
.pagelayout-login .navigation-node {
    display: none !important;
}

/* ── Pricing & Specialization pages — suppress Moodle chrome ─── */
.sv-pricingpage .header-main,
.sv-pricingpage #page-header,
.sv-pricingpage header.page-header,
.sv-pricingpage .page-header-headings,
.sv-pricingpage .secondary-navigation {
    display: none !important;
}

.sv-pricingpage #page .main-inner,
.sv-pricingpage #topofscroll,
.sv-pricingpage #page-content {
    padding-top: 0 !important;
}

/* ================================================================
   PRICING PAGE  (.sv-pricing-page)
   ================================================================ */

/* ── Pricing page: show Login button in the existing Moodle header ── */
.sv-pricingpage #usernavigation {
    display: flex !important;
    align-items: center;
}
.sv-pricingpage #usernavigation a[href*="login"],
.sv-pricingpage .logininfo a {
    background: #2563EB !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    border: none !important;
    transition: background 0.2s ease;
    white-space: nowrap;
}
.sv-pricingpage #usernavigation a[href*="login"]:hover,
.sv-pricingpage .logininfo a:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}
.sv-pricingpage #usernavigation .usermenu-container {
    display: flex !important;
    align-items: center;
}
.sv-pricingpage #usernavigation .usermenu-container .dropdown-toggle {
    background: #2563EB !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: none !important;
}

.sv-pricing-page {
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.sv-pricing__hero {
    padding: 60px 0 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sv-pricing__title {
    width: 135px;
    height: 60px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--UI-Guidelines-Color-Text-color, #031C3B);
    margin: 0;
    display: flex;
    align-items: center;
}

.sv-pricing__subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #6B7280;
    margin: 0;
}

/* ── Plans section (tab layout) ───────────────────────────────── */
.sv-pricing__plan-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0 28px 64px;
}

.sv-pricing__coming-soon {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #6B7280;
    text-align: center;
    padding: 40px 0;
}

/* ── Cards grid ───────────────────────────────────────────────── */
.sv-pricing__cards-section {
    padding: 24px 0 64px;
}

.sv-pricing__cards-inner {
    width: 1317px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 316px);
    gap: 16px;
    align-items: start;
    box-sizing: border-box;
    justify-content: center;
}

/* ── Individual plan card ─────────────────────────────────────── */
.sv-pricing__card {
    position: relative;
    width: 316px;
    min-height: 463px;
    background: var(--UI-Guidelines-Color-White, #FFFFFF);
    border: 1px solid var(--UI-Guidelines-Color-Grey-color, #B8B8B8);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    box-shadow: 0px 4px 15px 0px #0000000D;
}

.sv-pricing__card--featured {
    border-color: var(--UI-Guidelines-Color-Action-color, #0E72ED);
    box-shadow: 0px 4px 15px 0px #0000001A;
    overflow: visible;
}

/* ── Featured badge — centered on top border line ─────────────── */
.sv-pricing__badge-row {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 316px;
    pointer-events: none;
}

.sv-pricing__badge {
    width: 96px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    padding: 5px 8px;
    box-sizing: border-box;
    background: linear-gradient(98.37deg, #0E72ED 9.99%, #A603DD 51.2%, #DD03C0 90.01%);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    white-space: nowrap;
    pointer-events: auto;
}

/* ── Card title ───────────────────────────────────────────────── */
.sv-pricing__card-title {
    width: 284px;
    height: 40px;
    gap: 10px;
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 0;
}

.sv-pricing__card-title span {
    height: 24px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--UI-Guidelines-Color-Action-color, #0E72ED);
    display: flex;
    align-items: center;
}

/* ── Price row ────────────────────────────────────────────────── */
.sv-pricing__card-price {
    width: 284px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
}

.sv-pricing__price-row {
    width: 170px;
    height: 36px;
    display: flex;
    align-items: baseline;
    gap: 0;
    box-sizing: border-box;
}

.sv-pricing__price {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--UI-Guidelines-Color-Text-color, #031C3B);
}

.sv-pricing__period {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--UI-Guidelines-Color-Text-color, #031C3B);
}

/* ── Buy now button ───────────────────────────────────────────── */
.sv-pricing__buy-btn {
    width: 268px;
    height: 44px;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 50px;
    padding: 10px 16px;
    box-sizing: border-box;
    background: var(--UI-Guidelines-Color-Action-color, #0E72ED);
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-decoration: none !important;
    transition: background 0.15s;
}

.sv-pricing__buy-btn:hover {
    background: #0B5EC7;
    text-decoration: none !important;
}

/* ── Feature list ─────────────────────────────────────────────── */
.sv-pricing__features {
    width: 278px;
    min-height: 271px;
    list-style: none;
    margin: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}

.sv-pricing__feature {
    width: 278px;
    min-height: 21px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    box-sizing: border-box;
}

.sv-pricing__check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.sv-pricing__feature span {
    max-width: 250px;
    min-height: 21px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--UI-Guidelines-Color-Text-color, #031C3B);
}

/* ── Navbar logo (190×47px — all pages) ─────────────────────── */
.sv-navbar-brand {
    padding: 0;
    margin-right: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.sv-navbar-logo {
    width: 190px;
    height: 47px;
    object-fit: contain;
    display: block;
}

/* ── Navbar links: Home, Programs, Contact Us ───────────────── */
.sv-nav__links {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 16px;
    list-style: none;
    padding: 0;
}

.sv-nav__link {
    font-size: 15px;
    font-weight: 500;
    color: #374151 !important;
    text-decoration: none !important;
    padding: 8px 14px;
    border-radius: 6px;
    transition: color 0.15s;
    white-space: nowrap;
}

.sv-nav__link:hover {
    color: #2563EB !important;
}

.sv-nav__label {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    height: 24px;
    display: flex;
    align-items: center;
}

.sv-nav__label--home {
    width: 48px;
    color: var(--UI-Guidelines-Color-Action-color, #0E72ED);
}

.sv-nav__label--programs {
    width: 79px;
    color: var(--UI-Guidelines-Color-Text-color, #031C3B);
}

.sv-nav__label--pricing {
    width: 55px;
    color: var(--UI-Guidelines-Color-Text-color, #031C3B);
}

.sv-nav__label--contact {
    width: 90px;
    color: var(--UI-Guidelines-Color-Text-color, #031C3B);
}

/* ── Programs hover mega-menu ────────────────────────────────── */
.sv-nav__item--programs {
    position: relative;
}

/* Fixed panel — sits directly below the 87px navbar */
.sv-programs-dropdown {
    display: none;
    position: fixed;
    top: 87px;
    left: 50%;
    transform: translateX(-50%);
    width: 1393px;
    max-width: 100vw;
    z-index: 1049;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0px 8px 40px rgba(3, 28, 59, 0.14);
}

/* Centred inner wrapper — 1345px wide, 24px side padding */
.sv-programs-dropdown__inner {
    width: 1345px;
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 0;
}

/* 3-column grid, 32px gap, cards are 385px wide */
.sv-programs-dropdown__grid {
    display: grid;
    grid-template-columns: repeat(3, 385px);
    gap: 32px;
}

/* Individual card — 385 × 113.52px, Figma spec */
.sv-programs-dropdown__tile {
    width: 385px;
    min-height: 113px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--UI-Guidelines-Color-Grey-color, #B8B8B8);
    background: var(--UI-Guidelines-Color-White, #FFFFFF);
    text-decoration: none !important;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

.sv-programs-dropdown__tile:hover {
    border-color: var(--UI-Guidelines-Color-Action-color, #0E72ED);
    box-shadow: 0px 4px 16px rgba(14, 114, 237, 0.12);
    text-decoration: none !important;
}

/* Header row: icon + title side by side */
.sv-programs-dropdown__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.sv-programs-dropdown__img-wrap {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #EFF6FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.sv-programs-dropdown__img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.sv-programs-dropdown__name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    color: var(--UI-Guidelines-Color-Text-color, #031C3B);
    display: block;
}

.sv-programs-dropdown__desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    color: #000000;
    display: block;
}

/* ── Navbar layout (1320×87, gap 10, border-bottom 1px) ─────── */
#header {
    height: 87px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E5E7EB;
    background: #ffffff;
}

#header .container-fluid {
    /* max-width: 1320px; */
    margin: 0 auto;
    gap: 10px;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;
}
/* Match header width to hero container only on public (non-logged-in) pages */
.notloggedin #header .container-fluid {
    max-width: 1320px;
    width: 100%;
}

/* ── Navbar override ─────────────────────────────────────────── */
.pagelayout-frontpage #header {
    background: #ffffff;
    box-shadow: none;
}

.pagelayout-frontpage #header .navbar-brand,
.pagelayout-frontpage #header .nav-site-name,
.pagelayout-frontpage #header .site-name {
    font-size: 20px;
    font-weight: 700;
    color: #111827 !important;
}

.pagelayout-frontpage .primary-navigation .nav-link,
.pagelayout-frontpage .primary-navigation .nav-item > a {
    color: #374151 !important;
    font-weight: 500;
    font-size: 15px;
}

.pagelayout-frontpage .primary-navigation .nav-link:hover {
    color: #2563EB !important;
}

/* Style the guest "Log in" link as a Sign In button */
.pagelayout-frontpage #usernavigation .usermenu-container .dropdown-toggle,
.pagelayout-frontpage .logininfo a,
.pagelayout-frontpage #usernavigation a[href*="login"] {
    background: #2563EB !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 8px 22px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    border: none !important;
    transition: background 0.2s ease;
}

.pagelayout-frontpage .logininfo a:hover,
.pagelayout-frontpage #usernavigation a[href*="login"]:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Hide the Academi top header bar (phone/email strip) on frontpage */
.pagelayout-frontpage .header-main {
    display: none;
}

/* ── Hero Section ────────────────────────────────────────────── */
.sv-hero {
    padding: 80px 0 70px;
    background: #ffffff;
}

/* Match hero container to navbar's 1320px + same 16px padding */
.sv-hero .container {
    max-width: 1320px;
    padding-left: 16px;
    padding-right: 16px;
}

.sv-hero__inner {
    display: flex;
    align-items: center;
    gap: 60px;
}

.sv-hero__content {
    flex: 1;
}

.sv-hero__heading {
    width: 647px;
    max-width: 100%;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #111827;
    margin-bottom: 20px;
}

@keyframes sv-viz-gradient {
    0%   { background-image: linear-gradient(89.82deg, #0E72ED 36.37%, #A603DD 56.73%, #DD03C0 85.62%); }
    20%  { background-image: linear-gradient(89.87deg, #0E72ED 44.38%, #A603DD 87.99%, #DD03C0 99.82%); }
    40%  { background-image: linear-gradient(89.87deg, #DD03C0 24.05%, #0E72ED 60.27%, #A603DD 99.82%); }
    60%  { background-image: linear-gradient(89.87deg, #DD03C0 58.42%, #0E72ED 79.49%, #A603DD 99.82%); }
    80%  { background-image: linear-gradient(89.87deg, #A603DD 22.94%, #A603DD 71.73%, #0E72ED 99.82%); }
    100% { background-image: linear-gradient(89.82deg, #0E72ED 36.37%, #A603DD 56.73%, #DD03C0 85.62%); }
}

.sv-hero__highlight {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: 0%;
    background-image: linear-gradient(89.82deg, #0E72ED 36.37%, #A603DD 56.73%, #DD03C0 85.62%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: sv-viz-gradient 3s ease-in-out infinite;
}

.sv-hero__subtitle {
    width: 607px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    margin-bottom: 36px;
}


.sv-hero__cta {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

/* Shared button base */
.sv-btn {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
    line-height: 1.4;
}

.sv-btn--primary {
    width: 213px;
    height: 44px;
    border-radius: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    gap: 10px;
    background: var(--UI-Guidelines-Color-Action-color, #0E72ED);
    color: #ffffff !important;
    border-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none !important;
}

.sv-btn--primary:hover {
    background: #0B5EC4;
    color: #ffffff !important;
}

.sv-btn__text {
    width: 147px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #FFFFFF;
    white-space: nowrap;
}

.sv-btn__icon {
    flex-shrink: 0;
    display: block;
}

.sv-btn--outline {
    width: 179px;
    height: 44px;
    border-radius: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    gap: 10px;
    border: 1px solid var(--UI-Guidelines-Color-Action-color, #0E72ED);
    background: var(--UI-Guidelines-Color-White, #FFFFFF);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none !important;
}

.sv-btn--outline:hover {
    background: #EEF5FD;
}

.sv-btn__text--outline {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--UI-Guidelines-Color-Action-color, #0E72ED);
    white-space: nowrap;
    text-align: center;
    width: 100%;
}

/* ── Hero visual — single image (455×331, radius 8px) ──────── */
.sv-hero__visual {
    width: 455px;
    height: 331px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 0;   /* flush with container right edge = navbar right edge */
}

.sv-hero__visual img {
    width: 455px;
    height: 331px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

/* ── AI Powered Learning Section ────────────────────────────── */
.sv-ai-section {
    background: #ffffff;
    padding: 20px 0 40px;
}

.sv-ai-container {
    /* max-width: 1320px; */
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.sv-ai-box {
    width: 1320px;
    max-width: 100%;
    height: 335px;
    border-radius: 16px;
    padding: 8px 16px;
    gap: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.sv-ai-header {
    width: 404px;
    height: 86px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    gap: 2px;
}

.sv-ai-title {
    width: 404px;
    max-width: 100%;
    height: 60px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    margin: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-ai-subtitle {
    max-width: 100%;
    height: 24px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: var(--UI-Guidelines-Color-Action-color, #0E72ED);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.sv-ai-cards {
    position: relative;
    width: 1320px;
    max-width: 100%;
    height: 213px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 35px 0px #DD03C00F;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    /* padding: 0 16px; */
    box-sizing: border-box;
}

/* Gradient border via pseudo-element (border-image breaks border-radius) */
.sv-ai-cards::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    background: linear-gradient(89.82deg, #0E72ED 36.37%, #A603DD 61.74%, #DD03C0 85.62%);
    z-index: 0;
}

.sv-ai-cards::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: #FFFFFF;
    z-index: 1;
}

.sv-ai-card {
    position: relative;
    z-index: 2;
}

/* Tile card */
.sv-ai-card {
    position: relative;
    z-index: 2;
    width: 321px;
    height: 213px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 20px 12px 12px;
    box-sizing: border-box;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: none;
    border-right: 1px solid var(--UI-Guidelines-Color-Border-color, #EAEFF5);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 30%, rgba(14, 114, 237, 0.05) 100%);
}

.sv-ai-card:last-child {
    border-right: none;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.sv-ai-card:nth-child(2),
.sv-ai-card:nth-child(3) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.sv-ai-card__img {
    width: auto;
    height: 90px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.sv-ai-card__img--tile2 {
    width: auto;
    height: 90px;
}

.sv-ai-card__img--tile4 {
    width: auto;
    height: 90px;
}

.sv-ai-card__title {
    width: 280px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0%;
    text-align: center;
    color: #031C3B;
    margin: 0;
}

.sv-ai-card__desc {
    width: 280px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0%;
    text-align: center;
    color: #4A4A4A;
    margin: 0;
}


/* ── Why Learners Choose Us ──────────────────────────────────── */
.sv-why-section {
    background: #ffffff;
    padding-top: 60px;
    padding-bottom: 0;
}

.sv-why-container {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.sv-why-title {
    width: 497px;
    height: 60px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #000000;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-why-row {
    width: 1319px;
    max-width: 100%;
    height: 370px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
}

.sv-why-row__img {
    width: 640px;
    height: 360px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.sv-why-row__text {
    width: 655px;
    height: 124px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.sv-why-row__heading-wrap {
    width: 655px;
    height: 36px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.sv-why-row__heading {
    width: 655px;
    height: 36px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.sv-why-row__heading-span {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0E72ED;
}

.sv-why-row__desc {
    width: 655px;
    height: 72px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    margin: 0;
}

.sv-why-row--2 {
    width: 1320px;
    max-width: 100%;
    height: 363px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
}

.sv-why-row2__text {
    width: 620px;
    height: 136px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sv-why-row2__heading-wrap {
    width: 696px;
    height: 72px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
}

.sv-why-row2__heading {
    width: 696px;
    height: 72px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    margin: 0;
}

.sv-why-row2__heading-span {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0E72ED;
}

.sv-why-row2__desc-wrap {
    width: 696px;
    height: 48px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}

.sv-why-row2__desc {
    width: 696px;
    height: 48px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    margin: 0;
}

.sv-why-row2__img {
    width: 646px;
    height: 363px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    border-radius: 8px;
}

/* ── Our Learning Path ───────────────────────────────────────── */
.sv-path-section {
    background: #ffffff;
    padding-top: 60px;
    padding-bottom: 0;
}

.sv-path-container {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.sv-path-header {
    width: 587px;
    height: 60px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto;
}

.sv-path-header__inner {
    width: 356px;
    height: 60px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sv-path-title {
    width: 356px;
    height: 60px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    margin: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-path-steps {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

.sv-path-step {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* gap: 24px; */
    padding-bottom: 20px;
}

.sv-path-step__marker {
    width: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.sv-path-step__marker-row {
    width: 104px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* gap: 8px; */
}

.sv-path-step__label {
    width: 56px;
    height: 36px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    display: flex;
    align-items: center;
}

.sv-path-step__num {
    width: 40px;
    height: 40px;
    background: #0E72ED;
    color: #ffffff;
    border-radius: 50px;
    padding: 8px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

.sv-path-step__num span {
    width: 9px;
    height: 36px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-path-step__connector {
    display: block;
    /*transform: rotate(-90deg);*/
    transform-origin: center center;
    opacity: 1;
    flex-shrink: 0;
}

.sv-path-step__connector--1 {
    width: 7px;
    margin: 6px auto;
}



.sv-path-step__connector--2 {
    width: 8px;
    margin: 6px auto;
}

.sv-path-step--last .sv-path-step__marker {
    justify-content: flex-start;
}

/* ── Step content title ─────────────────────────────────────── */
.sv-path-step__content-title {
    height: 36px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    margin: 0;
    flex-shrink: 0;
}

.sv-path-step__content-title--1 {
    width: 362px;
}

.sv-path-step__content-title--2 {
    width: 100%;
    max-width: 100%;
}

.sv-path-step__title-gradient {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    background: linear-gradient(89.82deg, #0E72ED 36.37%, #A603DD 41.29%, #DD03C0 43.76%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Step 1 pills container ─────────────────────────────────── */
.sv-path-step__skills-row {
    flex-direction: column !important;
    align-items: center !important;
}

.sv-path-step__skills-label-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sv-path-step__pills {
    width: 785.64px;
    height: 31px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
    flex-shrink: 0;
}

/* ── Step 1 skill pill ──────────────────────────────────────── */
.sv-path-step__pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 30px;
    flex-shrink: 0;
}

.sv-path-step__pill--sql {
    width: 67.28px;
}

.sv-path-step__pill-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.sv-path-step__pill-img--python {
    width: 28px;
    height: 31px;
}

.sv-path-step__pill-label {
    height: 24px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    transform: rotate(-0.66deg);
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
}

/* SQL label already uses base width via inline; explicit widths per pill */
.sv-path-step__pill--sql    .sv-path-step__pill-label { width: 29px; }
.sv-path-step__pill-label--python                     { width: 55px; }
.sv-path-step__pill-label--webflow                    { width: 69px; }
.sv-path-step__pill-label--linux                      { width: 39px; }
.sv-path-step__pill-label--chatgpt                    { width: 70px; }
.sv-path-step__pill-label--claude                     { width: 59px; }

/* ── Step 1 "Core Skills" label ─────────────────────────────── */
.sv-path-step__skills-label {
    width: 93px;
    height: 27px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    transform: rotate(-0.66deg);
    display: inline-block;
    flex-shrink: 0;
}

.sv-path-step__pill--python {
    width: 91.27px;
    height: 31px;
}

.sv-path-step__pill--webflow {
    width: 107.27px;
    height: 30px;
}

.sv-path-step__pill--linux {
    width: 74.28px;
    height: 31px;
}

.sv-path-step__pill--chatgpt {
    width: 108.27px;
    height: 30px;
}

.sv-path-step__pill--claude {
    width: 97.27px;
    height: 30px;
}

/* ── Step 1 skills row ──────────────────────────────────────── */
.sv-path-step__skills-row {
    /* width: 1167px; */
    min-height: 87.07px;
    border-radius: 8px;
    border: 1px solid #0E72ED;
    background: #FFFFFF;
    padding: 10px;
    gap: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
}

/* ── Step content container ─────────────────────────────────── */
.sv-path-step__content {
    flex: 1;
    min-width: 0;
    min-height: 167.11px;
    border-radius: 16px;
    padding: 16px;
    /* gap: 8px; */
    background: #F9F9F9;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.sv-path-step__content--1 {
    min-height: 163.07px;
}

.sv-path-step__content--2 {
    min-height: 436px;
}

.sv-path-step__content--3 {
    min-height: 167.11px;
}

@keyframes sv-projects-gradient {
    0%   { background-image: linear-gradient(97.60deg,  #0E72ED 15.81%, #A603DD 53.01%, #DD03C0 90.83%);  }
    25%  { background-image: linear-gradient(153.28deg, #0E72ED 13.98%, #A603DD 67.99%, #DD03C0 122.91%); }
    50%  { background-image: linear-gradient(170.44deg, #0E72ED 5.86%,  #A603DD 57.23%, #DD03C0 109.46%); }
    75%  { background-image: linear-gradient(273.91deg, #0E72ED 5.84%,  #A603DD 49.86%, #DD03C0 94.61%);  }
    100% { background-image: linear-gradient(97.60deg,  #0E72ED 15.81%, #A603DD 53.01%, #DD03C0 90.83%);  }
}

/* ── Step 3 gradient tab/button ─────────────────────────────── */
.sv-step3-tab__gradient {
    width: 279px;
    height: 75px;
    border-radius: 50px;
    padding: 10px;
    gap: 16px;
    border: 1px solid #0E72ED;
    background-image: linear-gradient(97.60deg, #0E72ED 15.81%, #A603DD 53.01%, #DD03C0 90.83%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 1;
    scroll-behavior: smooth;
    transition: opacity 0.2s ease;
    animation: sv-projects-gradient 3.2s ease-in-out infinite;
}

.sv-step3-tab__gradient:hover {
    opacity: 0.9;
}

/* ── Step 3 gradient button arrow indicator ─────────────────── */
.sv-step3-tab__gradient-arrow {
    width: 14px;
    height: 14px;
    border-right: 2px solid #FFFFFF;
    border-top: 2px solid #FFFFFF;
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg);
    display: inline-block;
    flex-shrink: 0;
    opacity: 1;
    position: relative;
    top: -1px;
}

/* ── Step 3 gradient button label — "Projects" ──────────────── */
.sv-step3-tab__gradient-label {
    width: 98px;
    height: 36px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #FFFFFF;
    opacity: 1;
    transform: rotate(-0.66deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* ── Step 3 tab detail text ─────────────────────────────────── */
.sv-step3-tab__detail-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    height: 24px;
    transform: rotate(-0.66deg);
    display: inline-block;
}

.sv-step3-tab__detail-text--project { width: 55px; }
.sv-step3-tab__detail-text--support { width: 107px; }

/* ── Step 3 tab detail image ────────────────────────────────── */
.sv-step3-tab__detail-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Step 3 tab detail items ────────────────────────────────── */
.sv-step3-tab__detail-item {
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sv-step3-tab__detail-item--1 { width: 93.27px; }
.sv-step3-tab__detail-item--2 { width: 145.27px; }

/* ── Step 3 tab details row ─────────────────────────────────── */
.sv-step3-tab__details {
    width: 262.54px;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sv-step3-tab__details--jobready {
    width: 393.54px;
    height: 35px;
    justify-content: center;
}

/* ── Step 3 Job Ready detail text ───────────────────────────── */
.sv-step3-tab__jr-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    height: 24px;
    transform: rotate(-0.66deg);
    display: inline-block;
}

.sv-step3-tab__jr-text--resume    { width: 133px; }
.sv-step3-tab__jr-text--interview { width: 155px; }

/* ── Step 3 Job Ready detail images ─────────────────────────── */
.sv-step3-tab__jr-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.sv-step3-tab__jr-img--interview {
    width: 35px;
    height: 35px;
}

/* ── Step 3 Job Ready detail items ──────────────────────────── */
.sv-step3-tab__jr-item {
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sv-step3-tab__jr-item--2 {
    height: 35px;
}

/* ── Step 3 tab label ───────────────────────────────────────── */
.sv-step3-tab__label {
    height: 27px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    transform: rotate(-0.66deg);
    display: inline-block;
    width: 80px;
}

.sv-step3-tab__label--jobready {
    width: 96px;
}

/* ── Step 3 tab item ────────────────────────────────────────── */
.sv-step3-tab {
    flex: 1;
    min-width: 0;
    min-height: 75px;
    border-radius: 8px;
    border: 1px solid #0E72ED;
    background: #FFFFFF;
    padding: 10px;
    /*gap: 8px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ── Step 3 tabs row ────────────────────────────────────────── */
.sv-path-step3__tabs-row {
    width: 100%;
    min-height: 91.11px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
}

.sv-path-step__content-title--3 {
    width: 100%;
    max-width: 100%;
    height: 36px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    margin: 0;
    flex-shrink: 0;
}

/* ── Step 2 slider wrapper ──────────────────────────────────── */
.sv-path-step2__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* ── Slider arrows ──────────────────────────────────────────── */
.sv-slider__arrow {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    border: 1px solid #E9E9E9;
    background: #FFFFFF;
    padding: 6px 9px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.sv-slider__arrow--disabled,
.sv-slider__arrow:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ── Step 2 carousel viewport ───────────────────────────────── */
.sv-path-step2__viewport {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

/* ── Step 2 cards row (carousel track) ──────────────────────── */
.sv-path-step2__cards-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    transition: transform 0.35s ease;
    will-change: transform;
}

/* ── Step 2 card CTA label ──────────────────────────────────── */
.sv-step2-card__cta-label {
    width: 58px;
    /* height: 24px; */
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #FFFFFF;
}

/* ── Step 2 card CTA arrow ──────────────────────────────────── */
.sv-step2-card__cta-arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ── Step 2 card CTA button ─────────────────────────────────── */
.sv-step2-card__cta {
    width: 288px;
    height: 48px;
    border-radius: 50px;
    background: #0E72ED;
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* ── Step 2 card header box ─────────────────────────────────── */
.sv-step2-card__header {
    width: 288px;
    height: 70px;
    border-radius: 8px;
    background: #0E72ED0D;
    padding: 8px;
    gap: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* ── Step 2 card "what we cover" title ─────────────────────── */
.sv-step2-card__cover-title {
    width: 288px;
    height: 24px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    margin: 0;
    flex-shrink: 0;
}

/* ── Step 2 card cover item text ────────────────────────────── */
.sv-step2-card__cover-text {
    width: 29px;
    height: 24px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    transform: rotate(-0.66deg);
    display: inline-block;
}

/* ── Step 2 card cover item text variants ───────────────────── */
.sv-step2-card__cover-text--powerbi {
    width: 169px;
}

.sv-step2-card__cover-text--adv {
    width: 202px;
    height: 24px;
}

/* ── Step 2 card cover item image ───────────────────────────── */
.sv-step2-card__cover-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.sv-step2-card__cover-img--powerbi {
    height: 32px;
}

.sv-step2-card__cover-img--adv {
    height: 22px;
}

/* ── Step 2 card cover item rows ────────────────────────────── */
.sv-step2-card__cover-item {
    width: 288px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sv-step2-card__cover-item--1 { height: 30px; }
.sv-step2-card__cover-item--2 { height: 32px; }
.sv-step2-card__cover-item--3 { height: 24px; }

/* ── Step 2 card cover items list ───────────────────────────── */
.sv-step2-card__cover-items {
    width: 288px;
    height: 118px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sv-step2-card__cover-items--2 {
    height: 113.53px;
}

/* ── Step 2 cards 3-5 cover text/image variants ─────────────── */
.sv-step2-card__cover-text--math     { width: 120px; height: 24px; }
.sv-step2-card__cover-text--ml       { width: 140px; height: 24px; }
.sv-step2-card__cover-text--dl       { width: 170px; height: 24px; }
.sv-step2-card__cover-text--sdlc     { width: 40px;  height: 24px; }
.sv-step2-card__cover-text--agentai  { width: 70px;  height: 24px; }
.sv-step2-card__cover-text--git      { width: 25px;  height: 24px; }
.sv-step2-card__cover-text--webflow  { width: 65px;  height: 24px; }
.sv-step2-card__cover-text--wix      { width: 25px;  height: 24px; }
.sv-step2-card__cover-text--wp       { width: 90px;  height: 24px; }

.sv-step2-card__cover-img--ml        { width: 30px;  height: 30px; }
.sv-step2-card__cover-img--dl        { width: 30px;  height: 30px; }
.sv-step2-card__cover-img--git       { width: 30px;  height: 30px; }
.sv-step2-card__cover-img--webflow   { width: 30px;  height: 30px; }
.sv-step2-card__cover-img--wix       { width: 30px;  height: 30px; }
.sv-step2-card__cover-img--wp        { width: 30px;  height: 30px; }

/* ── Step 2 card 2 header variants ─────────────────────────── */
.sv-step2-card__cover-text--math  { width: 120px; height: 24px; }
.sv-step2-card__cover-text--ml    { width: 140px; height: 24px; }
.sv-step2-card__cover-text--dl    { width: 170px; height: 24px; }
.sv-step2-card__cover-img--ml     { width: 30px;  height: 30px; }
.sv-step2-card__cover-img--dl     { width: 30px;  height: 30px; }

/* ── Step 2 card 2 header variants ─────────────────────────── */
.sv-step2-card__icon--de {
    width: 60px;
    height: 39px;
}

.sv-step2-card__header-title--de {
    width: auto;
    height: auto;
}

/* ── Step 2 card 2 cover item text ─────────────────────────── */
.sv-step2c2__text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
}

.sv-step2c2__text--1 { width: 88px;  height: 24px; }
.sv-step2c2__text--2 { width: 46px;  height: 24px; transform: rotate(-0.66deg); display: inline-block; }
.sv-step2c2__text--3 { width: 87px;  height: 24px; }

/* ── Step 2 card 2 cover item images ───────────────────────── */
.sv-step2c2__img {
    object-fit: contain;
    flex-shrink: 0;
}

.sv-step2c2__img--cloud  { width: 42px; height: 24px; }
.sv-step2c2__img--spark  { width: 42px; height: 22px; }
.sv-step2c2__img--python { width: 30px; height: 33px; }

/* ── Step 2 card 2 cover item rows ─────────────────────────── */
.sv-step2c2__item {
    width: 288px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sv-step2c2__item--1 { height: 24px;     gap: 8px; }
.sv-step2c2__item--2 { height: 24.53px;  gap: 8px; }
.sv-step2c2__item--3 { height: 33px;     gap: 20px; }

/* ── Step 2 card "what we cover" container ──────────────────── */
.sv-step2-card__cover {
    width: 288px;
    height: 170px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sv-step2-card__cover--2 {
    height: 168px;
}

/* ── Step 2 card header title ───────────────────────────────── */
.sv-step2-card__header-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0%;
    color: #000000;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.sv-step2-card__header-title--de {
    width: auto;
    height: auto;
}

/* ── Step 2 card header box alignment ───────────────────────── */
.sv-step2-card__header {
    align-items: center;
}

/* ── Step 2 card icon ───────────────────────────────────────── */
.sv-step2-card__icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Step 2 specialization card ─────────────────────────────── */
.sv-path-step2__card {
    width: 320px;
    height: 338px;
    min-width: 320px;
    border-radius: 8px;
    border: 1px solid #B8B8B8;
    background: #FFFFFF;
    box-shadow: 0px 4px 10.3px 0px #00000026;
    padding: 16px;
    gap: 9px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex-shrink: 0;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.sv-path-step2__card:hover {
    box-shadow: 0px 6px 18px 0px #0000003a;
    border-color: #0E72ED;
    text-decoration: none !important;
}

/* ── Steps Section ───────────────────────────────────────────── */
.sv-steps {
    padding: 70px 0 80px;
    background: #f9fafb;
}

.sv-steps__title {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 40px;
}

.sv-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sv-steps__card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sv-steps__card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    transform: translateY(-3px);
}

.sv-steps__icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.sv-steps__icon-wrap--purple { background: #F3E8FF; color: #7C3AED; }
.sv-steps__icon-wrap--green  { background: #D1FAE5; color: #059669; }
.sv-steps__icon-wrap--blue   { background: #DBEAFE; color: #2563EB; }

.sv-steps__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}

.sv-steps__label--purple { color: #7C3AED; }
.sv-steps__label--green  { color: #059669; }
.sv-steps__label--blue   { color: #2563EB; }

.sv-steps__card-title {
    font-size: 19px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.sv-steps__card-title--purple { color: #7C3AED; }

.sv-steps__card-desc {
    font-size: 14px;
    color: #000000;
    line-height: 1.65;
    margin: 0;
}


/* ================================================================
   FREQUENTLY ASKED QUESTIONS SECTION
   ================================================================ */

/* ── FAQ section wrapper ─────────────────────────────────────── */
.sv-faq-section {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ── FAQ row: answer container ───────────────────────────────── */
.sv-faq-row__answer {
    width: 900px;
    height: 88px;
    padding: 20px;
    gap: 10px;
    opacity: 1;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #00000026;
    display: flex;
    align-items: center;
}

/* ── FAQ row: answer text ────────────────────────────────────── */
.sv-faq-row__answer-text {
    width: 860px;
    height: 48px;
    opacity: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #2F2F2F;
    margin: 0;
}

/* ── FAQ row: question text ──────────────────────────────────── */
.sv-faq-row__question {
    width: 500px;
    height: 27px;
    opacity: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}


/* ── FAQ row: icon ───────────────────────────────────────────── */
.sv-faq-row__icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-faq-row__icon {
    display: block;
}

/* ── FAQ row header ──────────────────────────────────────────── */
.sv-faq-row__header {
    width: 900px;
    height: 48.284271240234375px;
    justify-content: space-between;
    opacity: 1;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
}

/* ── FAQ question row ────────────────────────────────────────── */
.sv-faq-row {
    width: 900px;
    opacity: 1;
}

/* Open state — header light-blue tint, answer visible */
.sv-faq-row--open .sv-faq-row__header {
    background: #0E72ED0D;
    border-radius: 8px 8px 0 0;
}

.sv-faq-row--open .sv-faq-row__question {
    color: var(--UI-Guidelines-Color-Action-color, #0E72ED);
}

.sv-faq-row--open .sv-faq-row__answer {
    display: flex;
}

/* Closed state — white header with full border-radius, answer hidden */
.sv-faq-row--closed .sv-faq-row__header {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 2px 4px 0px #00000026;
}

.sv-faq-row--closed .sv-faq-row__question {
    color: #000000;
}

.sv-faq-row--closed .sv-faq-row__answer {
    display: none;
}

/* ── FAQ body container (900 × 349.28, gap 24px) ─────────────── */
.sv-faq-body {
    width: 900px;
    min-height: 349.2842712402344px;
    gap: 24px;
    opacity: 1;
    display: flex;
    flex-direction: column;
}

/* ── FAQ title ───────────────────────────────────────────────── */
.sv-faq-title {
    width: 551px;
    height: 60px;
    opacity: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--UI-Guidelines-Color-Text-color, #000000);
    margin: 0;
    text-align: center;
}

/* ── FAQ header container (551 × 60, gap 10px) ───────────────── */
.sv-faq-header {
    width: 551px;
    height: 60px;
    gap: 10px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

/* ── FAQ container (900 × 441.28, gap 32px) ──────────────────── */
.sv-faq-container {
    width: 900px;
    min-height: 441.2842712402344px;
    gap: 8px;
    opacity: 1;
    display: flex;
    flex-direction: column;
}


/* ================================================================
   CONTACT SECTION
   Figma: top 3937px, left 606px
   ================================================================ */

/* ── Contact section wrapper ─────────────────────────────────── */
.sv-contact-section {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 60px 16px;
    box-sizing: border-box;
}

/* ── Contact header text ─────────────────────────────────────── */
.sv-contact-header__text {
    width: 148px;
    height: 21px;
    opacity: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    margin: 0;
}

/* ── Contact header text lg variant (178px wide) ────────────── */
.sv-contact-header__text--lg {
    width: 178px;
}

/* ── Contact header text sm variant (119px wide) ────────────── */
.sv-contact-header__text--sm {
    width: 119px;
}

/* ── Contact header icon ─────────────────────────────────────── */
.sv-contact-header__icon {
    width: 20px;
    height: 20px;
    opacity: 1;
    display: block;
    flex-shrink: 0;
}

/* ── Contact form ────────────────────────────────────────────── */
.sv-contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    height: 100%;
    box-sizing: border-box;
}

.sv-contact-form__row {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.sv-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.sv-contact-form__field--full {
    flex: unset;
    width: 100%;
}

.sv-contact-form__label {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    margin: 0;
}

.sv-contact-form__required {
    color: #E53935;
}

.sv-contact-form__input,
.sv-contact-form__select,
.sv-contact-form__textarea {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #374151;
    background: #FFFFFF;
    border: 1px solid var(--UI-Guidelines-Color-Border-color, #EAEFF5);
    border-radius: 8px;
    padding: 12px 14px;
    box-sizing: border-box;
    width: 100%;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.sv-contact-form__input::placeholder,
.sv-contact-form__textarea::placeholder {
    color: #B8B8B8;
}

.sv-contact-form__input:focus,
.sv-contact-form__select:focus,
.sv-contact-form__textarea:focus {
    border-color: #0E72ED;
}

.sv-contact-form__select-wrap {
    position: relative;
}

.sv-contact-form__select-wrap::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23374151' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    pointer-events: none;
}

.sv-contact-form__select {
    cursor: pointer;
    color: #B8B8B8;
}

.sv-contact-form__select:valid {
    color: #374151;
}

.sv-contact-form__textarea {
    height: 108px;
    resize: none;
}

.sv-contact-form__submit {
    width: 100%;
    height: 52px;
    border-radius: 100px;
    background: #0E72ED;
    border: none;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.sv-contact-form__submit:hover {
    background: #0B5EC4;
}

/* ── Contact card (666 × 439, border-radius 16px) ───────────── */
.sv-contact-card {
    width: 666px;
    max-width: 100%;
    border-radius: 16px;
    opacity: 1;
    background: #FFFFFF;
    border: 1px solid var(--UI-Guidelines-Color-Border-color, #EAEFF5);
    box-sizing: border-box;
}

/* ── Contact header item lg variant (210px wide) ────────────── */
.sv-contact-header__item--lg {
    width: 210px;
}

/* ── Contact header item (180 × 83) ─────────────────────────── */
.sv-contact-header__item {
    width: 180px;
    height: 83px;
    border-radius: 8px;
    padding: 16px;
    gap: 10px;
    opacity: 1;
    border: 1px solid var(--UI-Guidelines-Color-Border-color, #EAEFF5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ── Contact header (661 × 83) ───────────────────────────────── */
.sv-contact-header {
    width: 661px;
    height: 83px;
    justify-content: space-between;
    opacity: 1;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* ── Contact subtitle ────────────────────────────────────────── */
.sv-contact-subtitle {
    width: 324px;
    height: 21px;
    opacity: 1;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #2F2F2F;
    margin: 0;
}

/* ── Contact title ───────────────────────────────────────────── */
.sv-contact-title {
    width: 222px;
    height: 60px;
    opacity: 1;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--UI-Guidelines-Color-Text-color, #000000);
    margin: 0;
}

/* ── Contact inner (324 × 89, gap 8px) ──────────────────────── */
.sv-contact-inner {
    width: 324px;
    height: 89px;
    gap: 8px;
    align-items: center;
    opacity: 1;
    display: flex;
    flex-direction: column;
}

/* ── Contact container ───────────────────────────────────────── */
.sv-contact-container {
    width: 661px;
    max-width: 100%;
    gap: 24px;
    align-items: center;
    opacity: 1;
    display: flex;
    flex-direction: column;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 991px) {
    .sv-hero__inner {
        flex-direction: column;
        gap: 40px;
    }

    .sv-hero__content {
        max-width: 100%;
        flex: none;
        width: 100%;
    }

    .sv-hero__visual {
        width: 100%;
        height: auto;
    }

    .sv-hero__visual img {
        width: 100%;
        height: auto;
    }

    .sv-hero__heading { font-size: 36px; }

    .sv-steps__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575px) {
    .sv-hero { padding: 40px 0; }
    .sv-hero__heading { font-size: 28px; }
    .sv-steps { padding: 40px 0; }
    .sv-steps__grid { grid-template-columns: 1fr; }
    .sv-hero__cta { flex-direction: column; align-items: flex-start; }
    .sv-btn { width: 100%; text-align: center; }
}

/* Shrink hero padding on shorter viewport heights (Windows laptops, DPI-scaled screens).
   150px of padding at 80+70 fills too much of a 700-800px viewport. */
@media (max-height: 800px) {
    .sv-hero { padding: 40px 0 30px; }
}

@media (max-height: 700px) {
    .sv-hero { padding: 24px 0 20px; }
    .sv-hero__heading { font-size: 44px; }
    .sv-hero__visual {
        width: 360px;
        height: 262px;
    }
    .sv-hero__visual img {
        width: 360px;
        height: 262px;
    }
}

/* ================================================================
   EXPLORE PROJECTS SECTION
   Figma: width 1320 × height 940.90, border-radius 16px,
          padding 16px, gap 24px
   ================================================================ */

/* ── Outer section wrapper (now inside .sv-path-container) ──── */
.sv-projects-section {
    background: #ffffff;
    padding: 40px 0 60px;
    width: 100%;
}

/* ── Inner component container ───────────────────────────────── */
/* Full-width within the path-container — matches AI Powered Learning and   */
/* Why learners choose us (both use max-width 1320px + 16px side padding).  */
.sv-projects-container {
    width: 100%;
    border-radius: 16px;
    padding: 16px;
    gap: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #F9F9F9;
}

/* ── Projects carousel wrapper ───────────────────────────────── */
.sv-projects-carousel {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.sv-projects-carousel__viewport {
    flex: 1;
    overflow: hidden;
}

.sv-projects-carousel__track {
    display: flex;
    flex-direction: row;
    gap: 20px;
    transition: transform 0.35s ease;
    will-change: transform;
}


.sv-projects-carousel__btn {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    border: 1px solid #E9E9E9;
    background: #FFFFFF;
    padding: 6px 9px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.sv-projects-carousel__btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}



/* ── Project card (310 × 354, radius 8px, padding 16px, gap 20px) */
.sv-project-card {
    width: 310px;
    height: 354px;
    border-radius: 8px;
    padding: 16px;
    gap: 20px;
    border: 1px solid var(--UI-Guidelines-Color-Grey-color, #B8B8B8);
    background: #FFFFFF;
    opacity: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none !important;
    color: inherit;
}

.sv-project-card:hover {
    border-color: #2563EB;
    box-shadow: 0 4px 16px rgba(14, 114, 237, 0.12);
}

/* ── Project Popup Overlay (Instant — animation-duration: 0ms) ── */
.sv-project-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
}

.sv-project-popup.is-open {
    display: flex;
}

.sv-project-popup__inner {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 32px;
    max-width: 720px;
    width: 90%;
    position: relative;
}

.sv-project-popup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #374151;
    line-height: 1;
}

/* ── Card play button — image-based (circle-play-image.png) ──── */
.sv-project-card__play {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sv-project-card__play-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    opacity: 1;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.sv-project-card__play:hover .sv-project-card__play-img {
    transform: scale(1.08);
    opacity: 0.9;
}

/* ── Card thumbnail (278 × 180, radius 8px, bg #E9E9E9) ───────── */
.sv-project-card__thumb {
    width: 278px;
    border-radius: 8px;
    background: #E9E9E9;
    opacity: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.sv-project-card__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

/* ── Card title (278 × 54, Poppins Medium 18px, #000000) ─────── */
.sv-project-card__title {
    width: 278px;
    max-width: 100%;
    height: 54px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    opacity: 1;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Card description (278 × 72, Poppins Regular 16px, #000000) ─ */
.sv-project-card__desc {
    width: 278px;
    max-width: 100%;
    height: 72px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    opacity: 1;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── "Explore Projects" title ────────────────────────────────── */
/* Figma: 1288 × 60, angle -0.66°, Poppins Regular 40px, #000000 */
.sv-projects-title {
    width: 1288px;
    max-width: 100%;
    height: 60px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #000000;
    margin: 0;
    opacity: 1;
    transform: rotate(-0.66deg);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}


/* ── Fourth row container ────────────────────────────────────── */
.sv-fourth-row-container {
    width: 900px;
    height: 47px;
    opacity: 1;
}

/* ── Third row container ─────────────────────────────────────── */
.sv-third-row-container {
    width: 900px;
    height: 47px;
    opacity: 1;
}

/* ── Second row container ────────────────────────────────────── */
.sv-second-row-container {
    width: 900px;
    height: 88px;
    opacity: 1;
    padding: 20px;
    gap: 10px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #00000026;
    display: flex;
    align-items: center;
}

/* ── First row container ─────────────────────────────────────── */
.sv-first-row-container {
    width: 900px;
    height: 48.284271240234375px;
    justify-content: space-between;
    opacity: 1;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    background: #0E72ED0D;
    display: flex;
    align-items: center;
}

/* ================================================================
   SPECIALIZATION PAGE — suppress Moodle chrome
   ================================================================ */

/* Hide only the Academi logo/brand in the secondary bar on spec page too */
.sv-specpage .header-main .navbar-brand {
    display: none !important;
}

/* Ensure the user navigation area (login link / user menu) is visible */
.sv-specpage #usernavigation {
    display: flex !important;
    align-items: center;
}

/* Style the guest "Log in" link as a blue button */
.sv-specpage #usernavigation a[href*="login"],
.sv-specpage .logininfo a {
    background: #2563EB !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    border: none !important;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.sv-specpage #usernavigation a[href*="login"]:hover,
.sv-specpage .logininfo a:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

/* For logged-in users on spec page: show a "My Courses" link instead of the full user menu */
.sv-specpage #usernavigation .usermenu-container {
    display: flex !important;
    align-items: center;
}
.sv-specpage #usernavigation .usermenu-container .dropdown-toggle {
    background: #2563EB !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    border: none !important;
}

/* Hide the full page header rendered by output.full_header
   (contains the orange h1 page title and breadcrumb) */
.sv-specpage #page-header,
.sv-specpage header.page-header,
.sv-specpage .page-header-headings {
    display: none !important;
}

/* Hide secondary navigation bar if present */
.sv-specpage .secondary-navigation {
    display: none !important;
}

/* Remove residual top spacing left by the hidden elements */
.sv-specpage #page .main-inner,
.sv-specpage #topofscroll {
    padding-top: 0 !important;
}

.sv-specpage #page-content {
    padding-top: 0 !important;
}

/* ================================================================
   SPECIALIZATION DETAIL PAGE  (.sv-spec)
   ================================================================ */

.sv-spec {
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
    min-height: 100vh;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.sv-spec__hero {
    background: #ffffff;
    padding: 60px 0 48px;
    border-bottom: 1px solid #F3F4F6;
}

.sv-spec__hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.sv-spec__hero-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sv-spec__hero-title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    color: #031C3B;
    margin: 0;
}

.sv-spec__hero-desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.65;
    color: #4B5563;
    margin: 0;
    max-width: 440px;
}

.sv-spec__hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 10px 24px;
    border-radius: 50px;
    background: var(--UI-Guidelines-Color-Action-color, #0E72ED);
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none !important;
    transition: background 0.15s;
}

.sv-spec__hero-btn:hover {
    background: #0B5EC7;
    text-decoration: none !important;
}

.sv-spec__hero-right {
    flex-shrink: 0;
    width: 480px;
    height: 260px;
    border-radius: 16px;
    overflow: hidden;
    background: #DBEAFE;
}

.sv-spec__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Syllabus section ─────────────────────────────────────────── */
.sv-spec__syllabus {
    padding: 48px 0 80px;
    background: #ffffff;
}

.sv-spec__syllabus-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.sv-spec__syllabus-title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #031C3B;
    text-align: center;
    margin: 0 0 40px;
}

/* ── Individual section block ─────────────────────────────────── */
.sv-spec__section {
    margin-bottom: 40px;
}

.sv-spec__section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.sv-spec__section-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #031C3B;
}

.sv-spec__section-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #031C3B;
}

.sv-spec__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    background: #F3F4F6;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #374151;
    margin-left: 4px;
}

/* ── Video card grid (Trail Videos) ──────────────────────────── */
.sv-spec__video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sv-spec__video-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.sv-spec__video-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-spec__play-icon {
    width: 44px;
    height: 44px;
}

.sv-spec__video-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #031C3B;
    padding: 0 12px 12px;
    display: block;
}

/* ── Lesson rows ──────────────────────────────────────────────── */
.sv-spec__lessons {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
}

.sv-spec__lesson {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #E5E7EB;
    background: #ffffff;
    transition: background 0.12s;
}

.sv-spec__lesson:last-child {
    border-bottom: none;
}

.sv-spec__lesson:hover {
    background: #F9FAFB;
}

.sv-spec__lesson-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sv-spec__lesson-play {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.sv-spec__lesson-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #031C3B;
}

.sv-spec__lesson-lock {
    display: flex;
    align-items: center;
    color: #9CA3AF;
}

/* ── Spec Projects Section ───────────────────────────────────── */
.sv-spec__projects {
    padding: 56px 0 80px;
    background: #F9FAFB;
    scroll-margin-top: 72px;
}

.sv-spec__projects-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.sv-spec__projects-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 28px;
    color: #031C3B;
    margin: 0 0 8px;
}

.sv-spec__projects-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #6B7280;
    margin: 0 0 32px;
}

.sv-spec__projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .sv-spec__projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .sv-spec__projects-grid {
        grid-template-columns: 1fr;
    }
}

.sv-spec__project-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 2px 8px 0px #00000010;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sv-spec__project-card:hover {
    border-color: #0E72ED;
    box-shadow: 0px 4px 16px 0px rgba(14, 114, 237, 0.12);
}

.sv-spec__project-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #EBF3FF;
}

.sv-spec__project-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sv-spec__project-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.sv-spec__project-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #031C3B;
    margin: 0;
}

.sv-spec__project-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.55;
    margin: 0;
}


/* ── SV Footer ───────────────────────────────────────────────── */
.sv-footer {
    background: #0F1C2E !important;
    width: 100%;
    display: block !important;
    position: relative;
    z-index: 1;
}

.sv-footer__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 48px 24px 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

/* ── Brand + contact (left column) ── */
.sv-footer__brand {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sv-footer__logo-link {
    display: inline-block;
    text-decoration: none;
}

.sv-footer__logo {
    height: 52px;
    width: auto;
}

.sv-footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sv-footer__contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.sv-footer__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sv-footer__brand-divider {
    width: 75%;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
}

/* ── Nav columns (right side) ── */
.sv-footer__nav {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 56px;
    padding-top: 4px;
}

.sv-footer__col-title {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

.sv-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sv-footer__link {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.2s;
}

.sv-footer__link:hover,
.sv-footer__link:focus {
    color: #FFFFFF;
    text-decoration: none;
}

/* ── Social icons ── */
.sv-footer__social {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.sv-footer__social-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.2s;
}

.sv-footer__social-btn:hover {
    opacity: 0.82;
    text-decoration: none;
}

.sv-footer__social-btn--instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.sv-footer__social-btn--linkedin {
    background: #0077B5;
}

.sv-footer__social-btn--facebook {
    background: #1877F2;
}

/* ── Copyright bar ── */
.sv-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sv-footer__bottom-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sv-footer__copy-icon {
    flex-shrink: 0;
}

.sv-footer__copyright {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}

/* ── Suppress all Moodle default footer chrome ── */
#page-footer.footer-popover,
.footer-content-popover,
[data-region="footer-container-popover"],
#backToTop,
.back-to-top,
.btn-footer-popover,
.btn-footer-communication {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   SV DASHBOARD  (body.sv-dashpage)
   ═══════════════════════════════════════════════════════════════ */

/* ── Moodle chrome suppression ── */
body.sv-dashpage {
    background: #F5F6FA !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.sv-dashpage #page-wrapper {
    background: #F5F6FA !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* The Moodle navbar is a <nav id="header">, not <header> */
body.sv-dashpage #header,
body.sv-dashpage nav#header,
body.sv-dashpage .navbar,
body.sv-dashpage .drawer-toggles,
body.sv-dashpage #nav-drawer,
body.sv-dashpage .secondary-navigation,
body.sv-dashpage #page-header {
    display: none !important;
}
body.sv-dashpage #page,
body.sv-dashpage #page.drawers {
    margin: 0 !important;
    padding: 0 !important;
}
body.sv-dashpage #topofscroll {
    padding: 0 !important;
    margin: 0 !important;
}
body.sv-dashpage #page-content {
    padding: 0 !important;
    margin: 0 !important;
}
body.sv-dashpage #region-main-box,
body.sv-dashpage #region-main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
body.sv-dashpage .sv-footer {
    display: none !important;
}

/* ── Layout shell ── */
.sv-dash {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    background: #F5F6FA;
    overflow-x: hidden;
}

/* ── Sidebar ── */
.sv-dash__sidebar {
    width: 220px;
    min-width: 220px;
    background: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
    transition: width 0.2s ease;
    overflow: hidden;
}

.sv-dash__sidebar--collapsed {
    width: 64px;
    min-width: 64px;
}

.sv-dash__sidebar-top {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
    box-sizing: border-box;
}

.sv-dash__logo-link {
    text-decoration: none;
    flex-shrink: 0;
}

.sv-dash__logo {
    height: 36px;
    width: auto;
    display: block;
}

.sv-dash__sidebar--collapsed .sv-dash__logo {
    display: none;
}

.sv-dash__toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #6B7280;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sv-dash__toggle:hover {
    background: #F3F4F6;
}

/* ── Nav ── */
.sv-dash__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 8px;
    flex: 1;
    overflow: hidden;
}

.sv-dash__nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #6B7280;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.sv-dash__nav-item:hover {
    background: #F3F4F6;
    color: #111827;
    text-decoration: none;
}

.sv-dash__nav-item--active {
    color: #0E72ED;
    font-weight: 500;
}

.sv-dash__nav-item--active:hover {
    color: #0E72ED;
    background: #EBF3FE;
}

.sv-dash__nav-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    color: #6B7280;
}

.sv-dash__nav-icon--active {
    background: #0E72ED;
    color: #FFFFFF;
}

.sv-dash__sidebar--collapsed .sv-dash__nav-label {
    display: none;
}

/* ── User section ── */
.sv-dash__user-section {
    padding: 0;
    border-top: 1px solid #F3F4F6;
    flex-shrink: 0;
}

.sv-dash__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}

.sv-dash__user:hover {
    background: #F3F4F6;
}

.sv-dash__user-chevron {
    transition: transform 0.2s ease;
}

.sv-dash__user-dropdown {
    display: none;
    flex-direction: column;
    border-top: 1px solid #E5E7EB;
}

.sv-dash__user-dropdown--open {
    display: flex;
}

.sv-dash__user-dropdown a {
    display: block;
    padding: 11px 20px;
    font-size: 13px;
    color: #374151;
    text-decoration: none !important;
    border-bottom: 1px solid #F3F4F6;
    transition: background 0.15s;
    font-family: 'Inter', Lato, sans-serif;
}

.sv-dash__user-dropdown a:last-child { border-bottom: none; }

.sv-dash__user-dropdown a:hover {
    background: #EBF3FF;
    color: #0E72ED !important;
}

.sv-dash__user-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
}

.sv-dash__user-avatar--initials {
    background: #2563EB;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-family: 'Inter', Lato, sans-serif;
}

.sv-dash__avatar-img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover;
}

.sv-dash__user-info {
    flex: 1;
    overflow: hidden;
}

.sv-dash__user-name {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sv-dash__user-chevron {
    flex-shrink: 0;
    color: #9CA3AF;
    transition: transform 0.2s ease;
}

.sv-dash__sidebar--collapsed .sv-dash__user-info,
.sv-dash__sidebar--collapsed .sv-dash__user-chevron {
    display: none;
}

/* ── Content wrap (topbar + scrollable main) ── */
.sv-dash__content-wrap {
    margin-left: 220px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left 0.2s ease;
}

.sv-dash__wrap--expanded {
    margin-left: 64px;
}

/* ── Topbar ── */
.sv-dash__topbar {
    height: 80px;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.sv-dash__topbar--wide {
    height: 92px;
    padding: 16px 100px;
    gap: 8px;
    border-bottom-color: #E9E9E9;
}

.sv-dash__topbar-title {
    height: 60px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
    margin: 0;
    display: flex;
    align-items: center;
}

.sv-dash__topbar-user {
    display: flex;
    align-items: center;
}

.sv-dash__topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #D1D5DB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.5px;
}

/* ── Scrollable main ── */
.sv-dash__main {
    flex: 1;
    padding: 28px;
    min-width: 0;
    background-color: white;
}

/* ── Sections ── */
.sv-dash__section {
    background: #F9F9F9;
    border-radius: 8px;
    border: 1px solid #E9E9E9;
    padding: 16px;
    gap: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}

.sv-dash__section-hdr {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #E9E9E9;
    box-sizing: border-box;
}
.sv-dash__section-hdr--tall {
    min-height: 68px;
}

.sv-dash__section-title {
    height: 36px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
    margin: 0;
    display: flex;
    align-items: center;
}

.sv-dash__section-sub {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
    margin: 4px 0 0 0;
}

/* ── Subscribed badge ── */
.sv-dash__subscribed-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #4B5563;
    border: 1px solid #D1D5DB;
    border-radius: 20px;
    padding: 4px 12px;
}

/* ── Subscribe button ── */
.sv-dash__subscribe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 166px;
    height: 44px;
    min-width: 120px;
    gap: 10px;
    padding: 10px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    background: #0E72ED;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background 0.2s;
}

.sv-dash__subscribe-btn:hover {
    background: #0860C8;
    color: #FFFFFF;
    text-decoration: none;
}

/* ── Course grid (Launch Pad) ── */
.sv-dash__course-grid {
    display: grid;
    grid-template-columns: repeat(4, 323px);
    gap: 16px;
}

.sv-dash__course-card {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #FFFFFF;
    position: relative;
}
.sv-dash__tile-free-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #16A34A;
    background: #DCFCE7;
    border-radius: 4px;
    padding: 2px 8px;
    line-height: 1.4;
    pointer-events: none;
}

.sv-dash__course-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sv-dash__course-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.sv-dash__course-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
    margin: 0;
}

.sv-dash__course-stats {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
}

.sv-dash__stat-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sv-dash__stat-col--progress {
    width: 174px;
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.sv-dash__stat-col--progress .sv-dash__stat-label {
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0%;
    color: #7A7A7A;
}

.sv-dash__stat-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    /* color: #031C3B; */
}

.sv-dash__stat-val {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
}
.sv-dash__stat-val--free {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #16A34A;
    background: #DCFCE7;
    border-radius: 4px;
    padding: 2px 8px;
}
.sv-dash__card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}
.sv-dash__card-footer .sv-dash__explore-btn {
    margin-top: 0;
    flex: 1;
}
.sv-dash__free-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #16A34A;
    background: #DCFCE7;
    border-radius: 4px;
    padding: 3px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.sv-dash__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: #6B7280;
    font-size: 14px;
}
.sv-dash__explore-btn--outline {
    background: transparent !important;
    color: #2563EB !important;
    border: 1.5px solid #2563EB !important;
}
.sv-dash__explore-btn--outline:hover {
    background: #EFF6FF !important;
}

.sv-dash__progress-track {
    position: relative;
    width: 174px;
    height: 11px;
    background: #E9E9E9;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.sv-dash__progress-fill {
    height: 100%;
    background: #0E72ED;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
}

.sv-dash__progress-pct {
    font-family: 'Poppins', sans-serif;
    font-size: 8px;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
}

/* ── Explore button (shared by course + spec cards) ── */
.sv-dash__explore-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 275px;
    height: 44px;
    min-width: 120px;
    background: #0E72ED;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0%;
    border-radius: 50px;
    padding: 10px 16px;
    text-decoration: none;
    margin-top: auto;
    box-sizing: border-box;
    transition: background 0.2s;
}

.sv-dash__explore-btn:hover {
    background: #0860C8;
    color: #FFFFFF;
    text-decoration: none;
}

/* ── Spec / Project grid ── */
.sv-dash__spec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sv-dash__spec-card {
    /* width: 320px; */
    height: 338px;
    min-width: 320px;
    border: 1px solid #B8B8B8;
    border-radius: 8px;
    padding: 16px;
    gap: 9px;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px #0000001A;
    box-sizing: border-box;
}

.sv-dash__spec-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    background: #EBF3FE;
}

.sv-dash__spec-hdr--project {
    background: #EBF3FE;
}

.sv-dash__spec-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.sv-dash__spec-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
    margin: 0;
}

.sv-dash__project-name {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.sv-dash__spec-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    padding: 0;
}

.sv-dash__cover-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
    margin: 0;
}

.sv-dash__covers-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.sv-dash__cover-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    gap: 8px;
}

.sv-dash__cover-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.sv-dash__cover-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
}

.sv-dash__spec-card .sv-dash__explore-btn {
    margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════
   SV SUBSCRIPTION PAGE
   ═══════════════════════════════════════════════════════════════ */

.sv-sub__main {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* ── Tabs ── */
.sv-sub__tabs {
    display: flex;
    gap: 0;
    background: #FFFFFF;
    border: 1px solid #E9E9E9;
    border-radius: 100px;
    padding: 4px;
    width: 412px;
    height: 59px;
    box-sizing: border-box;
    align-items: center;
}

.sv-sub__tab {
    flex: 1;
    height: 100%;
    padding: 16px;
    gap: 10px;
    border: none;
    border-right: 1px solid #E9E9E9;
    border-radius: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
    background: #FFFFFF;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    box-sizing: border-box;
}

.sv-sub__tab:first-child {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.sv-sub__tab:last-child {
    border-right: none;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

.sv-sub__tab--active {
    background: #0E72ED;
    color: #FFFFFF;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-right: 1px solid #E9E9E9;
}

/* ── 1 Yearly Plan badge ── */
.sv-sub__plan-badge-row {
    display: flex;
    justify-content: center;
}

.sv-sub__plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 119px;
    height: 44px;
    padding: 10px;
    gap: 10px;
    border: 1px solid #B8B8B8;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
    background: #F9F9F9;
    box-sizing: border-box;
}

/* ── Panels ── */
.sv-sub__panel {
    display: none;
    width: 100%;
}

.sv-sub__panel--active {
    display: block;
}

/* ── Card grid ── */
.sv-sub__card-grid {
    display: grid;
    grid-template-columns: repeat(3, 316px);
    gap: 24px;
    max-width: 996px;
    width: 100%;
    margin: 0 auto;
}

/* ── Single card (Launch Pad) ── */
.sv-sub__card--single {
    width: 316px;
    height: 358px;
    margin: 0 auto;
    border-color: #0E72ED;
    box-shadow: 0px 4px 15px 0px #0000000D;
}

/* ── Plan card ── */
.sv-sub__card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #B8B8B8;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 8px;
    /* min-height: 478px; */
    box-shadow: 0px 4px 15px 0px #0000000D;
    box-sizing: border-box;
}

.sv-sub__card--popular {
    border-color: #0E72ED;
}

/* ── Card header band ── */
.sv-sub__card-hdr {
    width: 100%;
    height: 40px;
    border-radius: 8px;
    padding: 8px;
    gap: 10px;
    background: #EBF3FF;
    color: #0E72ED;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ── Pricing wrapper (price + button) ── */
.sv-sub__card-pricing {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 104px;
    padding: 8px;
    gap: 8px;
    box-sizing: border-box;
}

/* ── Price ── */
.sv-sub__price {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
    text-align: center;
    padding: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.sv-sub__price strong {
    font-size: 24px;
    font-weight: 600;
}

.sv-sub__price-period {
    font-size: 14px;
    font-weight: 400;
    color: #031C3B;
}

/* ── Buy now button ── */
.sv-sub__buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 268px;
    height: 44px;
    min-width: 120px;
    padding: 10px 16px;
    gap: 10px;
    background: #0E72ED;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    border-radius: 50px;
    text-decoration: none;
    box-sizing: border-box;
    margin: 0 auto;
    transition: background 0.2s;
}

.sv-sub__buy-btn:hover {
    background: #0860C8;
    color: #FFFFFF;
    text-decoration: none;
}

/* ── Current Plan button ── */
.sv-sub__current-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 268px;
    height: 44px;
    min-width: 120px;
    padding: 10px 16px;
    gap: 10px;
    background: #B8B8B8;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    border-radius: 50px;
    border: none;
    cursor: default;
    box-sizing: border-box;
    margin: 0 auto;
}

/* ── Features list ── */
.sv-sub__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.sv-sub__feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
}

.sv-sub__feature span {
    max-width: 250px;
}

.sv-sub__check {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Most popular badge ── */
.sv-sub__popular-badge {
    position: absolute;
    top: -1px;
    right: 16px;
    background: linear-gradient(135deg, #E040FB, #C2185B);
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 0 0 10px 10px;
}

/* ── Select Specialization ── */
.sv-sub__select-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    width: 100%;
}

.sv-sub__select-label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.sv-sub__select-field {
    position: relative;
    width: 320px;
}

.sv-sub__select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 40px 10px 16px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #374151;
    background: #FFFFFF;
    cursor: pointer;
}

.sv-sub__select-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6B7280;
}

/* ── Responsive ── */
@media (max-width: 1280px) {
    .sv-dash__course-grid,
    .sv-dash__spec-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 960px) {
    .sv-dash__course-grid,
    .sv-dash__spec-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sv-dash__sidebar {
        width: 64px;
    }
    .sv-dash__sidebar .sv-dash__logo,
    .sv-dash__sidebar .sv-dash__nav-label,
    .sv-dash__sidebar .sv-dash__user-info,
    .sv-dash__sidebar .sv-dash__user-chevron {
        display: none;
    }
    .sv-dash__content-wrap {
        margin-left: 64px;
    }
}

/* ── STUDENT COURSE VIEW ──────────────────────────────────────────────────── */

/* Logo: pin to extreme left corner */
.sv-student-view.path-course-view .header-main .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.sv-student-view.path-course-view .header-main .navbar {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.sv-student-view.path-course-view .header-main .navbar-brand,
.sv-student-view.path-course-view .header-main .navbar-brand.has-logo {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    float: none !important;
}

/* Hide top nav links: Home, Dashboard, My courses */
.sv-student-view .primary-navigation,
.sv-student-view .header-main .navbar-nav {
    display: none !important;
}

/* Hide Moodle course chrome: title, tabs, enrol button, breadcrumbs */
.sv-student-view.path-course-view #page-header,
.sv-student-view.path-course-view .page-header-headings,
.sv-student-view.path-course-view .secondary-navigation,
.sv-student-view.path-course-view .tertiary-navigation,
.sv-student-view.path-course-view #page-navbar,
.sv-student-view.path-course-view .breadcrumb-nav {
    display: none !important;
}

/* Hide everything in main region except our video area */
.sv-student-view.path-course-view #region-main > *:not(#sv-video-area) {
    display: none !important;
}

/* Enable scrolling on the main content area */
.sv-student-view.path-course-view #topofscroll {
    overflow-y: auto;
    height: calc(100vh - 60px);
}
.sv-student-view.path-course-view #sv-video-area {
    padding: 0 24px 40px;
}

/* Hide page footer and SV footer on course view for students */
.sv-student-view.path-course-view .sv-footer,
.sv-student-view.path-course-view #page-footer,
.sv-student-view.path-course-view [data-region="footer-container-popover"],
.sv-student-view.path-course-view .footer-content-popover,
.sv-student-view.path-course-view .btn-footer-popover,
.sv-student-view.path-course-view .btn-footer-communication {
    display: none !important;
}

/* Sidebar width: 325px, flex column so user section sticks to bottom */
.sv-student-view #theme_boost-drawers-courseindex {
    width: 325px !important;
    max-width: 325px !important;
    left: calc(-325px + -10px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: hidden !important;
}
.sv-student-view #theme_boost-drawers-courseindex.show {
    left: 0 !important;
}

/* Course index list scrolls inside the flex column */
.sv-student-view #theme_boost-drawers-courseindex .courseindex-container,
.sv-student-view #theme_boost-drawers-courseindex .courseindex {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Hide drawer header (close X + expand/collapse) — removes gap above Course Home */
.sv-student-view #theme_boost-drawers-courseindex .drawerheader,
.sv-student-view #theme_boost-drawers-courseindex .drawertoggle,
.sv-student-view #theme_boost-drawers-courseindex .drawerheadercontent,
.sv-student-view #courseindexdrawercontrols {
    display: none !important;
}

/* Hide top-right user menu on student course view — it moves to the sidebar */
.sv-student-view.path-course-view #usernavigation {
    display: none !important;
}

/* ── Sidebar user section ── */
.sv-ci-user-section {
    flex-shrink: 0;
    border-top: 1px solid #E5E7EB;
    background: #F9FAFB;
    font-family: 'Inter', Lato, sans-serif;
}
.sv-ci-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.sv-ci-user:hover { background: #F3F4F6; }
.sv-ci-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2563EB;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}
.sv-ci-user-info {
    flex: 1;
    min-width: 0;
}
.sv-ci-user-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sv-ci-user-chevron {
    flex-shrink: 0;
    color: #6B7280;
    transition: transform 0.2s ease;
}
.sv-ci-user-dropdown {
    display: none;
    flex-direction: column;
    border-top: 1px solid #E5E7EB;
}
.sv-ci-user-dropdown--open {
    display: flex;
}
.sv-ci-user-dropdown a {
    display: block;
    padding: 11px 20px;
    font-size: 13px;
    color: #374151;
    text-decoration: none !important;
    border-bottom: 1px solid #F3F4F6;
    transition: background 0.15s;
}
.sv-ci-user-dropdown a:last-child { border-bottom: none; }
.sv-ci-user-dropdown a:hover {
    background: #EBF3FF;
    color: #0E72ED !important;
}

/* Course Home link injected at the top of the left drawer */
.sv-mycourses-sidebar-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 35px 16px 10px 14px;
    font-size: 17px;
    font-weight: 400;
    color: #0E72ED;
    text-decoration: none;
    border-bottom: 1px solid #E5E7EB;
    background: #F9FAFB;
    letter-spacing: 0.01em;
}
.sv-mycourses-sidebar-link:hover {
    background: #EBF3FF;
    color: #0E72ED;
    text-decoration: none;
}

/* Back arrow image on Course Home link */
.sv-course-home-arrow {
    flex-shrink: 0;
    display: block;
}
.sv-mycourses-sidebar-link:hover .sv-course-home-arrow {
    animation: sv-arrow-nudge 0.55s ease infinite;
}
@keyframes sv-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(-4px); }
}

/* Video icon via CSS ::before — not JS — so Moodle AMD re-renders cannot flash it.
   :not(.courseindex-section-title) prevents a second icon appearing on the inner
   section-title div that hasdelegatedsection (subsection) items render inside
   the outer <li>. Both elements are descendants of .courseindex-sectioncontent,
   so without this exclusion both would match and show two play icons. */
.sv-student-view .courseindex .courseindex-sectioncontent .courseindex-item:not(.restrictions):not(.courseindex-section-title)::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background-image: url('../pix/home/video-icon-image.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    margin-right: 6px;
}

/* ── Course index visual hierarchy (student view) — Log2Base2 style ─────── */

/* Course title at top of index */
.sv-student-view .courseindex-section:first-child > .courseindex-section-title.courseindex-item {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #111827 !important;
}

/* Section headers: normal weight, slightly larger than lessons, chevron on RIGHT */
.sv-student-view .courseindex .courseindex-section-title.courseindex-item {
    border: none !important;
    border-top: 1px solid #E8E8E8 !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #1f2937;
    background: #ffffff;
    display: flex !important;
    align-items: center !important;
}
.sv-student-view .courseindex .courseindex-section:first-child .courseindex-section-title.courseindex-item {
    border-top: none !important;
}
/* Chevron sits on the right — link text takes the remaining space */
.sv-student-view .courseindex .courseindex-section-title .courseindex-link {
    order: 1;
    flex: 1;
    text-align: left;
}
.sv-student-view .courseindex .courseindex-section-title .courseindex-chevron {
    order: 2;
    flex-shrink: 0;
}

/* Lesson items — smaller than section headers for visual hierarchy */
.sv-student-view .courseindex .courseindex-sectioncontent .courseindex-item {
    border: none !important;
    border-top: 1px solid #E8E8E8 !important;
    border-radius: 0 !important;
    padding: 10px 12px 10px 16px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #374151;
    background: #ffffff;
}
.sv-student-view .courseindex .courseindex-sectioncontent .courseindex-item .courseindex-link {
    font-weight: 400 !important;
    font-size: 13px !important;
}
.sv-student-view .courseindex .courseindex-sectioncontent .courseindex-item:first-child {
    border-top: 1px solid #E8E8E8 !important;
}

/* Kill the academi theme's green hover on ALL sidebar items (student view only).
   Uses the drawer ID so this selector wins regardless of academi SCSS specificity. */
.sv-student-view #theme_boost-drawers-courseindex .courseindex-item:hover,
.sv-student-view #theme_boost-drawers-courseindex .courseindex-item:hover a,
.sv-student-view #theme_boost-drawers-courseindex .courseindex-section-title:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    border-color: #E8E8E8 !important;
}

/* Active lesson — blue text, no background fill. ID selector guarantees win. */
.sv-student-view #theme_boost-drawers-courseindex .courseindex-item.pageitem,
.sv-student-view #theme_boost-drawers-courseindex .courseindex-item.pageitem:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #2563EB !important;
}
.sv-student-view #theme_boost-drawers-courseindex .courseindex-item.pageitem .courseindex-link,
.sv-student-view #theme_boost-drawers-courseindex .courseindex-item.pageitem a {
    color: #2563EB !important;
    font-weight: 400 !important;
}
.sv-student-view .courseindex .courseindex-sectioncontent *::selection {
    background: #EFF6FF;
    color: #2563EB;
}
/* Active item ::before keeps the same video icon */
.sv-student-view .courseindex .courseindex-sectioncontent .courseindex-item.pageitem:not(.restrictions):not(.courseindex-section-title)::before {
    background-image: url('../pix/home/video-icon-image.svg');
}

/* Hide only the two non-link direct children in Moodle 5.x cm.mustache:
   completioninfo (completion status span) and courseindex-locked (padlock icon).
   We target these specifically — NOT with a broad :not rule — so that
   hasdelegatedsection items (subsections) keep their inner courseindex-section
   div visible and their section titles / lesson names remain readable. */
.sv-student-view .courseindex .courseindex-sectioncontent li.courseindex-item > .completioninfo {
    display: none !important;
}
.sv-student-view .courseindex .courseindex-sectioncontent li.courseindex-item:not(.restrictions) > .courseindex-locked {
    display: none !important;
}

/* Lock icon — show on left for restricted / unenrolled lessons */
.sv-student-view .courseindex .courseindex-sectioncontent li.courseindex-item.restrictions > .courseindex-locked {
    order: -1;
    display: flex !important;
    align-items: center;
    margin-right: 6px;
    margin-left: 0 !important;
    flex-shrink: 0;
}

/* hasdelegatedsection (subsection) items render a full section template INSIDE the
   outer <li>. That inner section contains a collapse chevron (∨ / >) and a section
   title div with its own padding. Both make the lesson look different from regular
   items ("Announcements"). Fix: hide the chevron and strip the inner section title's
   padding so the lesson name sits flush right after the ::before play icon. */
.sv-student-view .courseindex .courseindex-sectioncontent li.courseindex-item .courseindex-chevron {
    display: none !important;
}
.sv-student-view .courseindex .courseindex-sectioncontent li.courseindex-item .courseindex-section-title {
    padding: 0 !important;
    border: none !important;
    border-top: none !important;
    background: transparent !important;
    margin: 0 !important;
    min-height: unset !important;
}

/* Video area in the main content region */
#sv-video-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', Lato, sans-serif, arial;
}
#sv-video-title {
    font-family: 'Inter', Lato, sans-serif, arial;
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    padding: 20px 0 10px;
    margin-bottom: 0;
    min-height: 0;
    line-height: 1.25;
}
#sv-video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    display: none;
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
}
#sv-video-player iframe,
#sv-video-player video {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}
#sv-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 60px 40px;
    text-align: center;
    color: #6B7280;
    font-size: 15px;
    background: #F9FAFB;
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    margin: 0;
}

/* ── Explanation bar ──────────────────────────────────────────────────────── */
#sv-explanation-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 8px 8px 0 0;
    background: #fff;
    margin-top: 12px;
}
#sv-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    padding: 5px 10px;
    background: #fff;
    user-select: none;
    cursor: default;
}

/* ── Bottom navigation bar ───────────────────────────────────────────────── */
#sv-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #E5E7EB;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fff;
    padding: 8px 12px;
    min-height: 58px;
}
#sv-nav-prev,
#sv-nav-next {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #374151;
    font-size: 22px;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
#sv-nav-prev:hover,
#sv-nav-next:hover {
    background: #F3F4F6;
    color: #111827;
}
#sv-nav-tabs {
    display: flex;
    gap: 2px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 4px;
    background: #F3F4F6;
}
.sv-nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 24px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    font-family: 'Inter', Lato, sans-serif;
    transition: all 0.15s;
    white-space: nowrap;
}
.sv-nav-tab:hover {
    background: #fff;
    color: #374151;
}
.sv-nav-tab.sv-tab-active {
    background: #fff;
    color: #2563EB;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ── Subscription modal ─────────────────────────────────────────────────── */
#sv-subscription-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#sv-modal-card {
    background: #fff;
    border-radius: 20px;
    padding: 52px 44px 44px;
    max-width: 560px;
    width: 90%;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
#sv-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #374151;
    padding: 0;
}
#sv-modal-close:hover { color: #111; }
#sv-modal-card h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #0A1931;
    margin: 0 0 18px;
    line-height: 1.2;
}
#sv-modal-card p {
    font-size: 1rem;
    color: #4B5563;
    line-height: 1.65;
    margin: 0 0 36px;
}
#sv-modal-cta {
    display: inline-block;
    background: #2563EB;
    color: #fff !important;
    padding: 16px 52px;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s;
}
#sv-modal-cta:hover { background: #1D4ED8; }

/* ================================================================
   SV CHECKOUT MODAL
   ================================================================ */
#sv-checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', Lato, sans-serif;
}
#sv-checkout-modal {
    display: flex;
    width: 820px;
    max-width: 96vw;
    max-height: 92vh;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.28);
    animation: sv-co-zoom 0.22s cubic-bezier(0.22,1,0.36,1);
}
@keyframes sv-co-zoom {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* ── Blue left panel ── */
#sv-checkout-left {
    width: 42%;
    background: linear-gradient(160deg, #1A4FD6 0%, #0B3AB8 100%);
    color: #fff;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
#sv-checkout-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    margin-bottom: 36px;
}
#sv-checkout-order {
    background: rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sv-checkout-order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}
.sv-checkout-order-row--total {
    border-top: 1px solid rgba(255,255,255,0.25);
    padding-top: 12px;
    margin-top: 4px;
    font-weight: 700;
    font-size: 1rem;
}
.sv-checkout-order-label { opacity: 0.8; }
.sv-checkout-order-val   { font-weight: 600; }
#sv-checkout-tagline {
    margin: 28px 0 auto;
    font-size: 0.95rem;
    opacity: 0.85;
    line-height: 1.5;
}
#sv-checkout-copy {
    font-size: 0.75rem;
    opacity: 0.55;
    margin: 0;
}

/* ── White right panel ── */
#sv-checkout-right {
    flex: 1;
    background: #fff;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
}
#sv-checkout-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #9CA3AF;
    padding: 0;
}
#sv-checkout-close:hover { color: #111; }
#sv-checkout-heading {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 24px;
}
.sv-checkout-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    display: block;
}
.sv-checkout-input {
    width: 100%;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 0.95rem;
    color: #111827;
    outline: none;
    margin-bottom: 18px;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.sv-checkout-input:focus { border-color: #2563EB; }
#sv-checkout-promo-row {
    margin-bottom: 20px;
}
#sv-checkout-promo-link {
    font-size: 0.85rem;
    color: #2563EB;
    text-decoration: none;
}
#sv-checkout-promo-link:hover { text-decoration: underline; }
#sv-checkout-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #F3F4F6;
    border-bottom: 1px solid #F3F4F6;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 18px;
}
#sv-checkout-total-amount { color: #2563EB; }
#sv-checkout-terms-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 0.82rem;
    color: #6B7280;
}
#sv-checkout-terms-row a { color: #2563EB; }
#sv-checkout-pay-btn {
    width: 100%;
    background: linear-gradient(90deg, #2563EB 0%, #1A4FD6 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 15px 0;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}
#sv-checkout-pay-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
#sv-checkout-pay-btn:not(:disabled):hover { opacity: 0.9; }
#sv-checkout-secured {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    font-size: 0.78rem;
    color: #9CA3AF;
}

@media (max-width: 640px) {
    #sv-checkout-modal { flex-direction: column; }
    #sv-checkout-left  { width: 100%; padding: 28px 24px; }
    #sv-checkout-right { padding: 28px 24px; }
}

/* ── Sign In Modal ─────────────────────────────────────────────── */
#sv-signin-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.50);
    align-items: center;
    justify-content: center;
}
.sv-signin-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #B8B8B8;
    border-radius: 16px;
    padding: 24px 24px 36px 24px;
    gap: 24px;
    width: 600px;
    height: auto;
    opacity: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.sv-signin-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.sv-signin-close img { display: block; width: 24px; height: 24px; }
/* Sign Up content row container (title + form) */
.sv-signup-content-row {
    width: 552px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: visible;
}
#sv-signup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 552px;
}
/* Sign Up close button row container */
.sv-signup-close-row {
    width: 552px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
/* Override absolute positioning for close button inside signup row */
.sv-signup-close-row .sv-signin-close {
    position: static;
    top: auto;
    right: auto;
}
.sv-signin-title {
    width: 133px;
    height: 60px;
    opacity: 1;
    gap: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
    margin: 0 auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
}
#sv-signin-form {
    width: 552px;
    height: auto;
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}
.sv-signin-field {
    width: 552px;
    height: 73px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}
.sv-signin-field--pw {
    height: 69px;
}
.sv-signin-field--pw .sv-signin-label {
    width: 78px;
    height: 21px;
    opacity: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
}
.sv-signin-label {
    width: fit-content;
    height: 21px;
    opacity: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #374151;
    white-space: nowrap;
    box-sizing: border-box;
    flex-shrink: 0;
}
.sv-signin-required {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #ef4444;
}
.sv-signin-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.18s;
}
.sv-signin-input:focus {
    border-color: #2563eb;
}
.sv-signin-pw-wrap {
    position: relative;
}
.sv-signin-pw-wrap .sv-signin-input {
    padding-right: 44px;
}
.sv-signin-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 0;
    display: flex;
    align-items: center;
}
.sv-signin-eye:hover { color: #374151; }
.sv-signin-submit {
    width: 552px;
    height: 44px;
    border-radius: 50px;
    opacity: 1;
    gap: 10px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0E72ED;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background 0.18s;
}
.sv-signin-submit:hover:not(:disabled) { background: #0b5ec4; }
.sv-signin-submit:disabled {
    background: #93c5fd;
    cursor: not-allowed;
    opacity: 0.7;
}
.sv-signin-footer-row {
    width: 552px;
    height: 24px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.sv-signin-forgot {
    font-size: 14px;
    color: #374151;
    text-decoration: none;
}
.sv-signin-forgot:hover { text-decoration: underline; }
.sv-signin-signup-row {
    font-size: 14px;
    color: #374151;
}
.sv-signin-signup-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}
.sv-signin-signup-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .sv-signin-card { width: 95vw; }
    .sv-signin-footer-row { flex-direction: column; align-items: flex-start; }
}

/* ── Sign Up Modal ─────────────────────────────────────────────── */
#sv-signup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.50);
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 24px 0;
}
.sv-signup-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #B8B8B8;
    border-radius: 16px;
    padding: 24px;
    width: 600px;
    height: auto;
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
    overflow: visible;
}
.sv-signup-title {
    width: 133px;
    height: 60px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #031C3B;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}
.sv-signup-row {
    display: flex;
    gap: 10px;
    width: 552px;
    height: 70px;
    flex-shrink: 0;
    box-sizing: border-box;
}
/* City + Country row */
.sv-signup-row--location {
    gap: 20px;
    height: 70px;
}
.sv-signup-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    height: 80px;
    box-sizing: border-box;
    flex-shrink: 0;
}
/* Individual name/city/country fields inside a row */
.sv-signup-row .sv-signup-field {
    width: 266px;
    height: 70px;
    gap: 8px;
    flex: none;
}
.sv-signup-field--full {
    flex: none;
    width: 552px;
    height: 70px;
    gap: 8px;
}
/* Password strength bar */
.sv-su-strength-wrap {
    display: inline-flex;
    gap: 4px;
    margin-left: 10px;
    vertical-align: middle;
}
.sv-su-seg {
    display: inline-block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #e5e7eb;
    transition: background 0.2s;
}
/* Terms & conditions row */
.sv-signup-terms {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.sv-su-terms-check {
    width: 20px;
    height: 20px;
    accent-color: #0E72ED;
    cursor: pointer;
    flex-shrink: 0;
}
.sv-su-terms-label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #374151;
    cursor: pointer;
}
.sv-su-terms-label a {
    color: #031C3B;
    font-weight: 600;
    text-decoration: underline;
}
/* Footer row */
.sv-signup-footer-row {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #374151;
    flex-shrink: 0;
}
.sv-signup-footer-row .sv-signin-signup-link {
    color: #0E72ED;
    font-weight: 600;
}
.sv-su-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px !important;
    cursor: pointer;
}
.sv-su-errorbox {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #b91c1c;
    line-height: 1.5;
}
@media (max-width: 640px) {
    .sv-signup-card { width: 95vw; }
    .sv-signup-row { flex-direction: column; }
}

/* ================================================================
   SV Confirm / Base page layout fix
   body.pagelayout-base = email confirm, registration, etc.
   ================================================================ */
body.pagelayout-base #page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.pagelayout-base #page {
    display: flex;
    flex-direction: column;
}
body.pagelayout-base #topofscroll {
    flex: 1;
    display: flex;
    flex-direction: column;
}
body.pagelayout-base #page-content {
    flex: 1;
}
/* Center the page heading (e.g. "ScholarsVenue") */
body.pagelayout-base #page-header,
body.pagelayout-base .page-header-headings,
body.pagelayout-base h1.h2 {
    text-align: center;
    justify-content: center;
}
/* Heading text + links inside headings → black */
body.pagelayout-base h1,
body.pagelayout-base h2,
body.pagelayout-base h3,
body.pagelayout-base h4,
body.pagelayout-base h5,
body.pagelayout-base h6,
body.pagelayout-base .page-header-headings h1,
body.pagelayout-base .page-header-headings h2,
body.pagelayout-base h1 a,
body.pagelayout-base h2 a,
body.pagelayout-base h3 a {
    color: #031C3B !important;
}
/* Confirmation message text → black */
body.pagelayout-base #region-main,
body.pagelayout-base .generalbox,
body.pagelayout-base .confirmbox {
    color: #031C3B !important;
}
/* Continue button → SV blue */
body.pagelayout-base .btn-secondary,
body.pagelayout-base .btn-secondary:hover,
body.pagelayout-base .btn-primary,
body.pagelayout-base .btn-primary:hover {
    background-color: #0E72ED !important;
    border-color: #0E72ED !important;
    color: #fff !important;
}

/* ================================================================
   SV Brand Override — replace academi's #f60 orange with SV blue
   Applies to all Moodle internal pages (login, confirm, course…)
   ================================================================ */

/* Buttons — override academi $primary (green) and $secondary (orange) to SV blue */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.open > .btn-primary.dropdown-toggle,
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:not(:disabled):not(.disabled):active,
.open > .btn-secondary.dropdown-toggle {
    background-color: #0E72ED !important;
    border-color: #0E72ED !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Headings on login pages */
body.pagelayout-login h1,
body.pagelayout-login h2,
body.pagelayout-login h3 {
    color: #031C3B;
}

/* ================================================================
   SV Unlock Subscription Popup
   ================================================================ */

#sv-unlock-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
}

#sv-unlock-modal {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 48px 40px 44px;
    max-width: 560px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

#sv-unlock-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9CA3AF;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

#sv-unlock-close:hover {
    color: #111827;
    background: #F3F4F6;
}

.sv-unlock__icon {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-unlock__title {
    font-size: 28px;
    font-weight: 700;
    color: #031C3B;
    margin: 0 0 16px;
    line-height: 1.25;
}

.sv-unlock__body {
    font-size: 15px;
    color: #6B7280;
    line-height: 1.7;
    margin: 0 auto 32px;
    max-width: 440px;
}

.sv-unlock__cta {
    display: block;
    width: 100%;
    background: #2563EB;
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 24px;
    cursor: pointer;
    transition: background 0.18s;
    letter-spacing: 0.01em;
}

.sv-unlock__cta:hover {
    background: #1D4ED8;
}

@media (max-width: 600px) {
    #sv-unlock-modal {
        padding: 40px 20px 32px;
    }
    .sv-unlock__title {
        font-size: 22px;
    }
    .sv-unlock__body {
        font-size: 14px;
    }
}

/* ================================================================
   FRONTPAGE RESPONSIVE — BREAKPOINTS 1024 / 768 / 480 / 375 / 320
   ================================================================ */

/* ── 1024px — tablet landscape ─────────────────────────────────── */
@media (max-width: 1024px) {
    /* Hero: scale heading down from 56px to 44px (still 2-column at this width) */
    .sv-hero__heading   { font-size: 44px; }
    .sv-hero__highlight { font-size: 44px; }

    /* AI cards: remove fixed widths so they flex to fit the container */
    .sv-ai-box    { height: auto; }
    .sv-ai-cards  { height: auto; min-height: 180px; }
    .sv-ai-card   { width: auto; flex: 1 1 0; flex-shrink: 1; height: auto; min-height: 180px; }

    /* Path section: fixed pixel widths overflow at 1024px */
    .sv-path-step__content            { width: auto; flex: 1; min-width: 0; }
    .sv-path-step__content-title--2,
    .sv-path-step__content-title--3   { width: auto; max-width: 100%; }
    .sv-path-step3__tabs-row          { width: 100%; }
    .sv-step3-tab                     { width: auto; min-width: 0; }
    .sv-path-step__pills              { width: 100%; height: auto; flex-wrap: wrap; gap: 16px; }
    .sv-path-step2__card              { width: 280px; min-width: 280px; }

    /* FAQ: fixed 900px elements */
    .sv-faq-row, .sv-faq-body,
    .sv-faq-container, .sv-faq-header,
    .sv-faq-row__header, .sv-faq-row__answer { width: 100%; max-width: 100%; box-sizing: border-box; }
    .sv-faq-row__answer-text          { width: auto; height: auto; }
    .sv-faq-row__question             { width: auto; }

    /* Contact */
    .sv-contact-header, .sv-contact-container { width: 100%; max-width: 100%; }

    /* Why section: let text columns shrink */
    .sv-why-row__text, .sv-why-row2__text { width: auto; height: auto; flex-shrink: 1; }
    .sv-why-row__heading-wrap, .sv-why-row2__heading-wrap { width: auto; height: auto; }
    .sv-why-row__heading,     .sv-why-row2__heading       { width: auto; height: auto; }
    .sv-why-row__desc,        .sv-why-row2__desc          { width: auto; height: auto; }
}

/* ── 768px — tablet portrait ────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hero font */
    .sv-hero__heading   { font-size: 32px; }
    .sv-hero__highlight { font-size: 32px; }
    .sv-hero__subtitle  { font-size: 16px; margin-bottom: 24px; width: auto; }

    /* Section titles: scale down */
    .sv-why-title, .sv-ai-title, .sv-path-title,
    .sv-faq-title, .sv-contact-title, .sv-projects-title {
        font-size: 28px; height: auto; width: auto; max-width: 100%;
    }

    /* AI cards → 2×2 grid */
    .sv-ai-cards { flex-wrap: wrap; height: auto; }
    .sv-ai-card  {
        flex: 0 0 50%;
        width: 50%;
        box-sizing: border-box;
        height: auto;
        min-height: 160px;
        border-radius: 0 !important;
        border-right: 1px solid #EAEFF5 !important;
        border-bottom: 1px solid #EAEFF5 !important;
    }
    .sv-ai-card:nth-child(1) { border-top-left-radius:  16px !important; }
    .sv-ai-card:nth-child(2) { border-top-right-radius: 16px !important; border-right: none !important; }
    .sv-ai-card:nth-child(3) { border-bottom-left-radius: 16px !important; border-bottom: none !important; }
    .sv-ai-card:nth-child(4) { border-bottom-right-radius: 16px !important; border-bottom: none !important; border-right: none !important; }

    /* Why learners: stack image on top of text */
    .sv-why-row, .sv-why-row--2 { flex-direction: column; height: auto; }
    .sv-why-row__img   { width: 100%; height: auto; max-width: 100%; flex-shrink: 1; }
    .sv-why-row2__img  { width: 100%; height: auto; max-width: 100%; flex-shrink: 1; }
    .sv-why-row2__text { width: 100%; height: auto; flex-shrink: 1; }

    /* Path step tabs */
    .sv-path-step3__tabs-row { flex-wrap: wrap; }
    .sv-step3-tab            { flex: 1 1 calc(50% - 8px); min-width: 0; }

    /* FAQ question text wraps properly */
    .sv-faq-row__question { width: auto; height: auto; white-space: normal; }

    /* Footer: stack brand above nav links */
    .sv-footer__inner { flex-direction: column; gap: 40px; }
    .sv-footer__brand { width: 100%; }
    .sv-footer__nav   { justify-content: flex-start; gap: 32px; flex-wrap: wrap; }
}

/* ── 480px — large mobile (covers 425px screenshots) ───────────── */
@media (max-width: 480px) {
    /* AI cards → single column */
    .sv-ai-cards { flex-direction: column; }
    .sv-ai-card  {
        flex: none !important;
        width: 100% !important;
        border-radius: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #EAEFF5 !important;
    }
    .sv-ai-card:first-child {
        border-top-left-radius:  16px !important;
        border-top-right-radius: 16px !important;
    }
    .sv-ai-card:last-child {
        border-bottom-left-radius:  16px !important;
        border-bottom-right-radius: 16px !important;
        border-bottom: none !important;
    }

    /* Hero: smaller type, stack CTAs */
    .sv-hero__heading   { font-size: 26px; }
    .sv-hero__highlight { font-size: 26px; }
    .sv-hero__subtitle  { font-size: 14px; margin-bottom: 20px; }
    .sv-hero__cta       { align-items: stretch; }
    .sv-btn--primary, .sv-btn--outline { width: 100%; justify-content: center; text-align: center; }

    /* Section titles */
    .sv-why-title, .sv-ai-title, .sv-path-title,
    .sv-faq-title, .sv-contact-title, .sv-projects-title { font-size: 24px; }

    /* Path step: smaller heading fonts */
    .sv-path-step__content-title  { font-size: 18px; height: auto; }
    .sv-path-step__content-title--2,
    .sv-path-step__content-title--3 { font-size: 18px; height: auto; }
    .sv-path-step__label          { font-size: 18px; }

    /* Path step tabs: full-width single column */
    .sv-step3-tab { width: 100%; flex: none; }

    /* Contact form: stack side-by-side fields */
    .sv-contact-form__row { flex-direction: column; }

    /* Path step marker: compact */
    .sv-path-step__marker     { width: 64px; }
    .sv-path-step__marker-row { width: 64px; }

    /* Logo: scale down */
    .sv-navbar-logo { height: 36px; width: auto; }
}

/* ── 375px ──────────────────────────────────────────────────────── */
@media (max-width: 375px) {
    .sv-hero__heading   { font-size: 24px; }
    .sv-hero__highlight { font-size: 24px; }
    .sv-hero            { padding: 36px 0 28px; }

    .sv-why-title, .sv-ai-title, .sv-path-title,
    .sv-faq-title, .sv-contact-title { font-size: 22px; }

    /* Contact info items: 2 per row */
    .sv-contact-header       { flex-wrap: wrap; gap: 8px; height: auto; }
    .sv-contact-header__item { flex: 1 1 calc(50% - 8px); min-width: 0; height: auto; }

    /* AI card image: slightly smaller */
    .sv-ai-card     { padding: 16px 8px; }
    .sv-ai-card__img { height: 72px; }
}

/* ── 320px ──────────────────────────────────────────────────────── */
@media (max-width: 320px) {
    .sv-hero__heading   { font-size: 22px; }
    .sv-hero__highlight { font-size: 22px; }
    .sv-hero__subtitle  { font-size: 13px; }

    .sv-why-title, .sv-ai-title, .sv-path-title,
    .sv-faq-title, .sv-contact-title { font-size: 20px; }

    /* Contact info items: stack single column */
    .sv-contact-header__item { flex: 1 1 100%; }

    /* AI card: compact */
    .sv-ai-card      { padding: 12px 8px; }
    .sv-ai-card__img  { height: 60px; }
    .sv-ai-card__title { font-size: 13px; }
    .sv-ai-card__desc  { font-size: 11px; }

    .sv-navbar-logo  { height: 28px; width: auto; }
}