/* ==========================================================================
   CoursesHub brand theme
   --------------------------------------------------------------------------
   Palette sampled from assets/images/logo/logo.png:
     - "Courses" teal  #158887  -> primary
     - "Hub" orange    #F79646  -> accent
   Deep teal / tints are derived shades of the logo teal.

   Loaded after styles.css by the public, Student and Panel layouts.
   Change the brand tokens below to re-skin the whole front end.
   ========================================================================== */

:root {
    /* ---- Brand tokens ---- */
    --primary-color: #158887;
    --primary-dark: #0E6B6A;          /* hover / active / link text */
    --primary-light: #E8F4F4;         /* soft tinted surfaces */
    --primary-rgb: 21, 136, 135;
    --secondary-color: #0F3F42;       /* deep teal for dark surfaces (top bar, copyright, side menu) */
    --secondary-dark: #0A2E30;
    --accent-color: #F79646;
    --accent-dark: #E07B2C;
    --accent-rgb: 247, 150, 70;
    --on-accent-color: #0B3B3A;       /* readable text on orange (5.5:1) */
    --background-color: #F5FAFA;
    --surface-color: #FFFFFF;
    --text-color: #4F5D66;
    --heading-color: #142B30;
    --border-color: #DCE8E8;

    /* ---- Template (HiStudy) variables mapped onto the brand ---- */
    --color-primary: var(--primary-color);
    --color-secondary: var(--accent-color);
    --color-primary-100: #3FA3A2;
    --color-primary-alt: #D3ECEB;
    --color-primary-light: var(--primary-light);
    --color-primary-lighter: #E3F2F2;
    --color-secondary-alt: #FEF3EA;
    --color-darker: var(--secondary-color);
    --color-heading: var(--heading-color);
    --color-body: var(--text-color);
    --color-border: var(--border-color);
    --color-border-2: rgba(220, 232, 232, 0.31);
    --color-extra: #F7FBFB;
    --color-extra2: #F7FBFB;
    --color-light: var(--background-color);
    --color-lighter: #F0F7F7;
    --primary-opacity: rgba(var(--primary-rgb), 0.13);
    --secondary-opacity: rgba(var(--accent-rgb), 0.13);
    --dark-shadow-5: 0px 4px 27.9px rgba(var(--primary-rgb), 0.15);
    --gradient-dark: linear-gradient(90deg, rgba(var(--primary-rgb), 0.75) 0%, rgba(var(--accent-rgb), 0.67) 100%);
    --gradient-dark-2: linear-gradient(90deg, rgba(var(--primary-rgb), 0.49) 0%, rgba(var(--accent-rgb), 0.32) 100%);
    --gradient-1: linear-gradient(#FFFFFF 0%, #EAF5F5 100%);
    --gradient-2: linear-gradient(0deg, #FFFFFF 0%, #EAF5F5 100%);
    --gradient-3: linear-gradient(90deg, #6FC0BF 0%, #F9B887 100%);
    --gradient-4: linear-gradient(180deg, #EAF5F5 0%, #FFFFFF 100%);
    --gradient-5: linear-gradient(#EAF5F5 0%, #EAF5F5 100%);
    --gradient-8: linear-gradient(270deg, var(--accent-color) 0%, var(--primary-color) 100%);

    /* ---- Bootstrap 5 globals ---- */
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-secondary: #5E6E77;
    --bs-secondary-rgb: 94, 110, 119;
    --bs-link-color: var(--primary-dark);
    --bs-link-color-rgb: 14, 107, 106;
    --bs-link-hover-color: var(--accent-dark);
    --bs-link-hover-color-rgb: 224, 123, 44;
    --bs-border-color: var(--border-color);
    --bs-focus-ring-color: rgba(var(--primary-rgb), 0.25);
}

/* ==========================================================================
   Links & typography
   ========================================================================== */
.color-primary {
    color: var(--primary-dark) !important;
}

.rbt-btn-link,
.rbt-btn-link:hover {
    color: var(--primary-dark);
}

.theme-gradient {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
}

::selection {
    background: rgba(var(--primary-rgb), 0.2);
}

/* ==========================================================================
   Header & navigation
   ========================================================================== */
.rbt-header-top.rbt-header-top-1 {
    background-color: var(--secondary-color);
}

.rbt-header .mainmenu-nav .mainmenu > li > a:hover,
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown .submenu li a:hover,
.rbt-user-menu-list-wrapper .user-list-wrapper li a:hover,
.rbt-secondary-menu li a:hover {
    color: var(--accent-color);
}

.rbt-round-btn:hover,
.rbt-round-btn:focus-visible {
    color: var(--primary-color);
}

.rbt-cart-count {
    background: var(--accent-color);
    color: var(--on-accent-color);
}

/* Login / register link in header */
.btn-auth-inline {
    color: var(--primary-dark);
}

    .btn-auth-inline:hover {
        color: var(--accent-dark);
    }

/* ==========================================================================
   Hero banner (home) - tint the blue artwork to brand teal
   ========================================================================== */
.rbt-banner-17,
.shadow-bg {
    background-color: var(--secondary-color);
}

    /* banner.png is blue artwork; shift its hue to the logo teal */
    .shadow-bg {
        filter: hue-rotate(-52deg) saturate(0.85) brightness(0.9);
    }

.card-option {
    border-color: rgba(var(--primary-rgb), 0.25);
}

/* the whole box is the link */
a.card-option,
a.card-option:hover,
a.card-option:focus {
    color: inherit;
    text-decoration: none;
}

    a.card-option:hover,
    a.card-option:focus-visible {
        opacity: 1;
        border-color: var(--primary-color);
    }

/* ==========================================================================
   Career change page banner
   ========================================================================== */
.bg_image--career {
    background-image: url(../images/bg/career-change-banner.svg);
    background-color: var(--secondary-color);
    background-position: left center;
}

    /* the artwork has its own gradient; skip the template's photo darkening */
    .tutor-bg-photo.bg_image--career::before {
        display: none;
    }

/* ==========================================================================
   Home: "Explore Top Courses Categories" - equal-size boxes
   ========================================================================== */
.category-section-02 .service-card-5 {
    height: 100%;
}

    .category-section-02 .service-card-5 .inner {
        height: 100%;
        min-height: 112px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-10);
    }

        .category-section-02 .service-card-5 .inner::before {
            border-radius: var(--radius-10);
        }

    .category-section-02 .service-card-5:hover .inner {
        border-color: rgba(var(--primary-rgb), 0.45);
    }

    /* fixed-size image, whatever the uploaded image shape */
    .category-section-02 .service-card-5 .inner .icon {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        overflow: hidden;
        border-radius: var(--radius-10);
        background: var(--primary-light);
    }

        .category-section-02 .service-card-5 .inner .icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .category-section-02 .service-card-5 .inner .content {
        flex: 1 1 auto;
        min-width: 0;
    }

        /* names wrap to at most two lines so every box keeps the same height */
        .category-section-02 .service-card-5 .inner .content .title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 17px;
            line-height: 24px;
            text-align: left;
            word-break: break-word;
        }

            .category-section-02 .service-card-5 .inner .content .title a:hover {
                color: var(--primary-dark);
            }

        .category-section-02 .service-card-5 .inner .content .description {
            margin-top: 4px;
            color: var(--text-color);
            font-size: 14px;
            line-height: 20px;
        }

/* ==========================================================================
   Home: "CoursesHub Course Student Can Join With Us" - equal-size course cards
   ========================================================================== */
.home-popular-courses .tab-pane .row > [class*="col-"] {
    display: flex;
}

.home-popular-courses .rbt-card.variation-04 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

    /* same image size for every card, whatever the uploaded photo shape */
    .home-popular-courses .rbt-card.variation-04 .rbt-card-img {
        flex: 0 0 auto;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border-radius: var(--radius);
    }

        .home-popular-courses .rbt-card.variation-04 .rbt-card-img a,
        .home-popular-courses .rbt-card.variation-04 .rbt-card-img a img {
            width: 100%;
            height: 100%;
        }

        .home-popular-courses .rbt-card.variation-04 .rbt-card-img a img {
            object-fit: cover;
        }

    .home-popular-courses .rbt-card.variation-04 .rbt-card-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

        .home-popular-courses .rbt-card.variation-04 .rbt-card-body .rbt-card-top {
            align-items: flex-start;
            gap: 12px;
        }

            .home-popular-courses .rbt-card.variation-04 .rbt-card-body .rbt-card-top .rating-count {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

        /* course names keep a fixed two-line space; longer names end with "…" */
        .home-popular-courses .rbt-card.variation-04 .rbt-card-body .rbt-card-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: calc(2 * 1.35em);
            line-height: 1.35;
            word-break: break-word;
        }

        /* "Enroll Course" always sits at the bottom */
        .home-popular-courses .rbt-card.variation-04 .rbt-card-body .rbt-card-bottom {
            margin-top: auto;
        }

/* ==========================================================================
   Home: "Blogs" slider - equal-size blog cards
   ========================================================================== */
/* every slide stretches to the height of the tallest one */
.home-blogs .swiper-wrapper {
    align-items: stretch;
}

.home-blogs .swiper-slide {
    display: flex;
    height: auto;
}

    .home-blogs .swiper-slide .single-slide {
        display: flex;
        width: 100%;
    }

.home-blogs .rbt-card.event-grid-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

    /* same image size for every blog (replaces the old fixed 295x199 inline size) */
    .home-blogs .rbt-card.event-grid-card .rbt-card-img {
        flex: 0 0 auto;
        overflow: hidden;
    }

        .home-blogs .rbt-card.event-grid-card .rbt-card-img a img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 2;
            object-fit: cover;
        }

    .home-blogs .rbt-card.event-grid-card .rbt-card-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

        /* blog titles keep a fixed two-line space; longer titles end with "…" */
        .home-blogs .rbt-card.event-grid-card .rbt-card-body .rbt-card-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: calc(2 * 1.35em);
            line-height: 1.35;
            word-break: break-word;
        }

        /* "View Blog" always sits at the bottom */
        .home-blogs .rbt-card.event-grid-card .rbt-card-body .read-more-btn {
            margin-top: auto;
        }

/* ==========================================================================
   Course details page (Views/Courses/CourseDetails.cshtml)
   ========================================================================== */

/* ---------- Hero ---------- */
.cd-page .course-details-content.version-02 {
    isolation: isolate;
    border-radius: var(--radius-big);
    background: linear-gradient(125deg, var(--secondary-color) 0%, #13615F 55%, var(--primary-color) 100%);
    background-size: 160% 160%;
    box-shadow: 0 24px 60px rgba(15, 63, 66, 0.25);
    animation: cdGradient 16s ease-in-out infinite alternate;
}

    /* slowly floating brand shapes behind the content */
    .cd-page .course-details-content.version-02::before,
    .cd-page .course-details-content.version-02::after {
        content: "";
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        pointer-events: none;
    }

    .cd-page .course-details-content.version-02::before {
        width: 380px;
        height: 380px;
        right: -110px;
        top: -140px;
        border: 46px solid rgba(var(--accent-rgb), 0.22);
        animation: cdFloat 12s ease-in-out infinite alternate;
    }

    .cd-page .course-details-content.version-02::after {
        width: 300px;
        height: 300px;
        left: -120px;
        bottom: -160px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
        animation: cdFloat 14s ease-in-out infinite alternate-reverse;
    }

    .cd-page .course-details-content.version-02 h2 {
        line-height: 1.25;
        animation: cdFadeUp 0.8s cubic-bezier(.2, .7, .2, 1) both;
    }

/* course intro: always readable white, at most three lines */
.cd-page .cd-hero-intro {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 640px;
    animation: cdFadeUp 0.8s 0.15s cubic-bezier(.2, .7, .2, 1) both;
}

    .cd-page .cd-hero-intro,
    .cd-page .cd-hero-intro * {
        margin: 0;
        color: rgba(255, 255, 255, 0.86) !important;
        font-size: 17px;
        line-height: 1.65;
    }

.cd-page .course-details-content.version-02 .divider {
    opacity: 0.18;
}

/* info chips: provider, start date, duration, study mode */
.cd-page .course-details-content.version-02 .course-details-feature {
    gap: 10px;
    animation: cdFadeUp 0.8s 0.3s cubic-bezier(.2, .7, .2, 1) both;
}

    .cd-page .course-details-content.version-02 .course-details-feature .feature-sin {
        align-items: center;
        padding: 6px 14px 6px 6px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(4px);
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

        .cd-page .course-details-content.version-02 .course-details-feature .feature-sin:hover {
            background: rgba(255, 255, 255, 0.16);
            transform: translateY(-2px);
        }

        .cd-page .course-details-content.version-02 .course-details-feature .feature-sin::after {
            display: none;
        }

        .cd-page .course-details-content.version-02 .course-details-feature .feature-sin .icon {
            background: var(--accent-color);
        }

            .cd-page .course-details-content.version-02 .course-details-feature .feature-sin .icon i {
                color: var(--on-accent-color) !important;
            }

/* play button: orange with pulsing rings */
.cd-page .course-details-content.version-02 .rounded-player {
    position: relative;
    background: var(--accent-color);
    box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.3);
    animation: cdFadeUp 0.8s 0.45s cubic-bezier(.2, .7, .2, 1) both;
}

    .cd-page .course-details-content.version-02 .rounded-player::before,
    .cd-page .course-details-content.version-02 .rounded-player::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 2px solid rgba(var(--accent-rgb), 0.7);
        border-radius: 50%;
        animation: cdRing 2.4s ease-out infinite;
    }

    .cd-page .course-details-content.version-02 .rounded-player::after {
        animation-delay: 1.2s;
    }

    .cd-page .course-details-content.version-02 .rounded-player .play-icon::before {
        border-left-color: var(--on-accent-color) !important;
    }

    .cd-page .course-details-content.version-02 .rounded-player:hover {
        transform: scale(1.06);
    }

/* ---------- Section tabs ---------- */
.cd-page .rbt-inner-onepage-navigation {
    top: 90px;
    z-index: 5;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 26px rgba(15, 63, 66, 0.08);
}

    .cd-page .rbt-inner-onepage-navigation .mainmenu-nav .mainmenu li a {
        font-weight: 600;
    }

        .cd-page .rbt-inner-onepage-navigation .mainmenu-nav .mainmenu li a::after {
            background: var(--primary-light);
        }

    .cd-page .rbt-inner-onepage-navigation .mainmenu-nav .mainmenu li.current a::after,
    .cd-page .rbt-inner-onepage-navigation .mainmenu-nav .mainmenu li:hover a::after {
        background: var(--primary-color);
    }

/* ---------- Content cards ---------- */
.cd-page .course-details-content .rbt-shadow-box {
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: var(--radius-big);
    box-shadow: 0 12px 30px rgba(15, 63, 66, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

    .cd-page .course-details-content .rbt-shadow-box:hover {
        box-shadow: 0 18px 40px rgba(var(--primary-rgb), 0.12);
    }

    .cd-page .course-details-content .rbt-shadow-box:nth-of-type(even) {
        border-top-color: var(--accent-color);
    }

.cd-page .rbt-title-style-3 {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--heading-color);
    border-bottom-color: var(--border-color) !important;
}

    .cd-page .rbt-title-style-3 i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        border-radius: var(--radius-10);
        background: var(--primary-light);
        color: var(--primary-color);
        font-size: 18px;
    }

.cd-page .course-details-content .rbt-shadow-box p,
.cd-page .course-details-content .rbt-shadow-box li {
    color: var(--text-color);
    line-height: 1.8;
}

.cd-page .course-details-content .rbt-shadow-box ul li::marker {
    color: var(--accent-color);
}

.cd-page .rbt-show-more-btn {
    color: var(--primary-dark);
}

    .cd-page .rbt-show-more-btn::before {
        background: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
    }

/* feedback */
.cd-page .rbt-testimonial-area {
    background: transparent !important;
    padding-left: 0;
    padding-right: 0;
}

.cd-page .rbt-testimonial-box {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    border-radius: var(--radius-10);
    background: #F7FBFB !important;
}

    .cd-page .rbt-testimonial-box .client-info .title {
        color: var(--heading-color);
    }

    .cd-page .rbt-testimonial-box .client-info span {
        color: var(--primary-dark);
    }

/* ---------- Sidebar ---------- */
.cd-page .course-sidebar.rbt-gradient-border {
    top: 100px;
    padding: 0 !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-big);
    background: #fff !important;
    box-shadow: 0 20px 45px rgba(15, 63, 66, 0.12);
    overflow: hidden;
    animation: cdFadeUp 0.8s 0.25s cubic-bezier(.2, .7, .2, 1) both;
}

    .cd-page .course-sidebar.rbt-gradient-border::before {
        display: none;
    }

    .cd-page .course-sidebar .inner {
        padding: 0;
    }

.cd-page .cd-sidebar-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

    .cd-page .cd-sidebar-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(.2, .7, .2, 1);
    }

    .cd-page .cd-sidebar-thumb:hover img {
        transform: scale(1.06);
    }

    .cd-page .cd-sidebar-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15, 63, 66, 0) 50%, rgba(15, 63, 66, 0.55) 100%);
    }

.cd-page .cd-sidebar-tag {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 1;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 13px;
    font-weight: 700;
}

.cd-page .course-sidebar .content-item-content {
    padding: 22px 24px 26px;
}

.cd-page .cd-glance-title {
    margin: 0 0 6px;
    color: var(--heading-color);
    font-size: 18px;
}

/* "Connect To Training Provider" with a soft shine */
.cd-page .course-sidebar .add-to-card-button .rbt-btn,
.cd-action-bottom .rbt-btn {
    position: relative;
    overflow: hidden;
}

    .cd-page .course-sidebar .add-to-card-button .rbt-btn::after,
    .cd-action-bottom .rbt-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: cdShine 3.5s ease-in-out infinite;
    }

/* the template collapses this list (it expects a "Show More" button the page doesn't have) - show all facts */
.cd-page .rbt-widget-details .has-show-more-inner-content {
    max-height: none !important;
    overflow: visible !important;
}

.cd-page .rbt-widget-details.has-show-more .rbt-show-more-btn {
    display: none;
}

.cd-page .rbt-course-details-list-wrapper li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border-color);
}

    .cd-page .rbt-course-details-list-wrapper li:last-child {
        border-bottom: 0;
    }

    .cd-page .rbt-course-details-list-wrapper li > span:first-child {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--text-color);
        font-weight: 500;
    }

        .cd-page .rbt-course-details-list-wrapper li > span:first-child i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary-color);
            font-size: 14px;
        }

.cd-page .rbt-badge-5 {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

/* ---------- Related / provider course cards (equal size) ---------- */
.cd-page .related-course .row > [class*="col-"],
.cd-related .row > [class*="col-"] {
    display: flex;
}

.cd-page .related-course .rbt-card,
.cd-related .rbt-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-big);
}

    .cd-page .related-course .rbt-card .rbt-card-img,
    .cd-related .rbt-card .rbt-card-img {
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border-radius: var(--radius-10);
    }

        .cd-page .related-course .rbt-card .rbt-card-img a,
        .cd-page .related-course .rbt-card .rbt-card-img img,
        .cd-related .rbt-card .rbt-card-img a,
        .cd-related .rbt-card .rbt-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .cd-page .related-course .rbt-card .rbt-card-body,
    .cd-related .rbt-card .rbt-card-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .cd-page .related-course .rbt-card .rbt-card-title,
    .cd-related .rbt-card .rbt-card-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: calc(2 * 1.35em);
        line-height: 1.35;
    }

    .cd-page .related-course .rbt-card .rbt-card-bottom,
    .cd-related .rbt-card .rbt-card-bottom {
        margin-top: auto;
    }

.cd-page .related-course .section-title .subtitle {
    background: var(--secondary-opacity) !important;
    color: var(--accent-dark) !important;
}

/* ---------- Bottom action bar ---------- */
.cd-action-bottom {
    border-top: 3px solid var(--primary-color);
    box-shadow: 0 -12px 30px rgba(15, 63, 66, 0.12);
}

    .cd-action-bottom .title {
        color: var(--heading-color);
    }

/* ---------- Login popup ---------- */
.cd-popup.show-popup {
    animation: cdFadeIn 0.25s ease both;
    backdrop-filter: blur(3px);
}

    .cd-popup.show-popup .popup-content {
        animation: cdPop 0.35s cubic-bezier(.2, .8, .2, 1.2) both;
    }

.cd-popup .popup-content {
    width: 380px;
    max-width: calc(100% - 32px);
    padding: 32px 30px 18px;
    border-top: 5px solid var(--primary-color);
    border-radius: var(--radius-big);
    box-shadow: 0 30px 60px rgba(15, 63, 66, 0.3);
}

.cd-popup .popup-title {
    color: var(--heading-color);
}

.cd-popup .popup-msg {
    color: var(--text-color);
}

.cd-popup .popup-btn {
    border-radius: var(--radius-10);
    font-weight: 700;
    transition: transform 0.2s ease, filter 0.2s ease;
}

    .cd-popup .popup-btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.05);
    }

.cd-popup .login-btn {
    background: var(--primary-color);
    color: #fff;
}

.cd-popup .register-btn {
    background: var(--accent-color);
    color: var(--on-accent-color);
}

.cd-popup .popup-close {
    color: var(--text-color);
}

    .cd-popup .popup-close:hover {
        color: var(--primary-dark);
    }

/* ---------- Scroll reveal (class added by script, so content is visible without JS) ---------- */
.cd-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(.2, .7, .2, 1), transform 0.7s cubic-bezier(.2, .7, .2, 1);
}

    .cd-reveal.cd-in {
        opacity: 1;
        transform: none;
    }

@keyframes cdGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes cdFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-26px, 22px) scale(1.08); }
}

@keyframes cdFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cdRing {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.9); opacity: 0; }
}

@keyframes cdShine {
    0%, 60% { left: -60%; }
    100% { left: 130%; }
}

@keyframes cdFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cdPop {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@media only screen and (max-width: 767px) {
    .cd-page .course-details-content.version-02::before {
        width: 220px;
        height: 220px;
        border-width: 28px;
    }

    .cd-page .cd-hero-intro,
    .cd-page .cd-hero-intro * {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cd-page *,
    .cd-page *::before,
    .cd-page *::after,
    .cd-action-bottom .rbt-btn::after,
    .cd-popup,
    .cd-popup * {
        animation: none !important;
        transition: none !important;
    }

    .cd-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   About us page (Views/AboutUs/AboutUs.cshtml)
   ========================================================================== */
.bg_image--about {
    background-image: url(../images/bg/about-us-banner.svg);
    background-color: var(--secondary-color);
    background-size: cover;
    background-position: left center;
}

/* Section labels and headings */
.about-page .section-title .subtitle {
    background: var(--secondary-opacity);
    color: var(--accent-dark);
    border-radius: var(--radius-small);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.about-page .section-title .title {
    color: var(--heading-color);
    position: relative;
    padding-bottom: 14px;
}

    .about-page .section-title .title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 64px;
        height: 4px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--primary-color) 0 60%, var(--accent-color) 60% 100%);
    }

.about-page .description {
    color: var(--text-color);
    line-height: 1.8;
}

/* Photo collage: soft brand frame */
.about-page .thumbnail-wrapper .thumbnail img {
    border-radius: var(--radius-big);
    box-shadow: 0 18px 40px rgba(15, 63, 66, 0.18);
}

.about-page .thumbnail-wrapper .thumbnail.image-1 img {
    border: 6px solid #fff;
    outline: 3px solid rgba(var(--primary-rgb), 0.25);
}

/* Feature lists as cards */
.about-page .rbt-feature-wrapper .rbt-feature.feature-style-1 {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-10);
    padding: 18px 20px;
    margin-top: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .about-page .rbt-feature-wrapper .rbt-feature.feature-style-1:nth-child(even) {
        border-left-color: var(--accent-color);
    }

    .about-page .rbt-feature-wrapper .rbt-feature.feature-style-1:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.14);
    }

.about-page .rbt-feature.feature-style-1 .icon {
    background: var(--primary-light) !important;
    color: var(--primary-color);
    border-radius: var(--radius-10);
}

    .about-page .rbt-feature.feature-style-1 .icon i {
        color: var(--primary-color);
    }

.about-page .rbt-feature.feature-style-1:nth-child(even) .icon {
    background: var(--color-secondary-alt) !important;
}

    .about-page .rbt-feature.feature-style-1:nth-child(even) .icon i {
        color: var(--accent-dark);
    }

.about-page .rbt-feature .feature-title {
    color: var(--heading-color);
}

.about-page .rbt-feature .feature-description {
    color: var(--text-color);
    margin-bottom: 0;
}

/* Our values block on a tinted background */
.about-values {
    background: var(--background-color) !important;
}

/* Our mission */
.about-mission {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--background-color) 100%) !important;
}

    .about-mission .inner {
        border-left: 4px solid var(--accent-color);
        padding-left: 28px;
    }

    .about-mission .video-popup-wrapper img.w-100 {
        border-radius: var(--radius-big);
        box-shadow: 0 18px 40px rgba(15, 63, 66, 0.16);
    }

/* Closing call-to-action */
.about-cta {
    padding: 60px 0 80px;
    background: var(--background-color);
}

.about-cta-inner {
    position: relative;
    overflow: hidden;
    padding: 48px 40px;
    border-radius: var(--radius-big);
    text-align: center;
    background: linear-gradient(120deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    box-shadow: 0 20px 45px rgba(15, 63, 66, 0.25);
}

    .about-cta-inner::before,
    .about-cta-inner::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .about-cta-inner::before {
        width: 220px;
        height: 220px;
        right: -60px;
        top: -80px;
        border: 26px solid rgba(var(--accent-rgb), 0.25);
    }

    .about-cta-inner::after {
        width: 160px;
        height: 160px;
        left: -50px;
        bottom: -70px;
        background: rgba(255, 255, 255, 0.07);
    }

    .about-cta-inner .title {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        max-width: 900px;
        color: #fff;
        font-size: 34px;
        line-height: 1.35;
    }

@media only screen and (max-width: 767px) {
    /* show the banner's text block in full on phones */
    .bg_image--about {
        width: 100%;
        max-width: 100%;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 2.7;
        background-size: 170% auto;
        background-position: left top;
    }

    .about-mission .inner {
        padding-left: 18px;
        padding-right: 0 !important;
    }

    .about-cta-inner {
        padding: 32px 20px;
    }

        .about-cta-inner .title {
            font-size: 24px;
        }
}

/* ==========================================================================
   Contact us page (Views/ContactUs/ContactUs.cshtml)
   ========================================================================== */
.contact-intro.bg-gradient-11 {
    background: linear-gradient(180deg, var(--primary-light) 0%, #FFFFFF 100%) !important;
}

.contact-page .section-title .subtitle {
    background: var(--secondary-opacity);
    color: var(--accent-dark);
    border-radius: var(--radius-small);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.contact-intro .section-title .title {
    color: var(--heading-color);
}

/* Contact detail cards */
.contact-page .rbt-address {
    text-align: center;
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: var(--radius-big);
    box-shadow: 0 10px 30px rgba(15, 63, 66, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .contact-page .rbt-address:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(var(--primary-rgb), 0.18);
    }

    .contact-page .rbt-address .icon {
        width: 76px;
        height: 76px;
        line-height: 76px;
        margin-bottom: 20px;
        border-radius: 50%;
        background: var(--primary-color);
        color: #fff;
        box-shadow: 0 0 0 8px var(--primary-light);
    }

        .contact-page .rbt-address .icon i {
            font-size: 32px;
            color: #fff;
        }

.contact-page .col-lg-4:nth-child(2) .rbt-address {
    border-top-color: var(--accent-color);
}

    .contact-page .col-lg-4:nth-child(2) .rbt-address .icon {
        background: var(--accent-color);
        box-shadow: 0 0 0 8px var(--color-secondary-alt);
    }

        .contact-page .col-lg-4:nth-child(2) .rbt-address .icon i {
            color: var(--on-accent-color);
        }

.contact-page .rbt-address .inner h4.title {
    color: var(--heading-color);
    margin-bottom: 10px;
}

.contact-page .rbt-address .inner p,
.contact-page .rbt-address .inner p a {
    color: var(--text-color);
}

    .contact-page .rbt-address .inner p a:hover {
        color: var(--primary-dark);
    }

/* Image + form */
.contact-page .thumbnail img {
    border-radius: var(--radius-big);
    box-shadow: 0 20px 45px rgba(15, 63, 66, 0.22);
}

.contact-page .rbt-contact-form.contact-form-style-1 {
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--accent-color);
    border-radius: var(--radius-big);
    box-shadow: 0 20px 45px rgba(15, 63, 66, 0.1);
}

    .contact-page .rbt-contact-form.contact-form-style-1 > .title {
        color: var(--heading-color);
    }

    .contact-page .rbt-contact-form .section-title .subtitle {
        background: var(--primary-opacity);
        color: var(--primary-dark);
    }

    .contact-page .rbt-contact-form .form-group input,
    .contact-page .rbt-contact-form .form-group textarea {
        border-bottom-color: var(--border-color);
    }

/* Map */
.contact-map iframe {
    display: block;
    border-top: 4px solid var(--primary-color) !important;
}

/* ==========================================================================
   FAQ page (Views/Shared/_Faq.cshtml)
   ========================================================================== */
.faq-hero.bg-gradient-1 {
    background: url(../images/bg/faq-banner.svg) center / cover no-repeat, var(--primary-light) !important;
}

    .faq-hero .breadcrumb-inner .title {
        color: var(--heading-color);
        position: relative;
        display: inline-block;
        padding-bottom: 14px;
        margin-bottom: 14px;
    }

        .faq-hero .breadcrumb-inner .title::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 70px;
            height: 4px;
            margin-left: -35px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--primary-color) 0 60%, var(--accent-color) 60% 100%);
        }

.faq-list {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--background-color) 100%) !important;
}

    .faq-list .rbt-accordion-style .accordion-item.card {
        background: var(--surface-color);
        border: 1px solid var(--border-color);
        border-left: 4px solid var(--border-color);
        border-radius: var(--radius-10) !important;
        box-shadow: 0 4px 14px rgba(15, 63, 66, 0.05);
        overflow: hidden;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }

        .faq-list .rbt-accordion-style .accordion-item.card:hover {
            border-left-color: var(--accent-color);
            box-shadow: 0 10px 26px rgba(var(--primary-rgb), 0.12);
            transform: translateY(-2px);
        }

        .faq-list .rbt-accordion-style .accordion-item.card:has(.accordion-button:not(.collapsed)) {
            border-left-color: var(--primary-color);
            box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.14);
        }

    /* neutralise the layout's mobile-menu .accordion-header rules on this page */
    .faq-list .accordion-header.card-header {
        display: block;
        background: transparent;
        color: inherit;
        border-radius: 0;
        cursor: auto;
    }

        .faq-list .accordion-header.card-header:hover {
            background: var(--primary-light);
        }

    .faq-list .rbt-accordion-style .card .card-header button {
        color: var(--heading-color);
        font-size: 17px;
        padding-left: 46px;
    }

        /* question-mark badge before each question */
        .faq-list .rbt-accordion-style .card .card-header button::after {
            content: "?";
            position: absolute;
            left: 0;
            top: 50%;
            width: 32px;
            height: 32px;
            margin-top: -16px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary-color);
            font-weight: 700;
            font-size: 16px;
            line-height: 32px;
            text-align: center;
            visibility: visible;
            background-image: none;
            transform: none !important;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .faq-list .rbt-accordion-style .card .card-header button:not(.collapsed) {
            color: var(--primary-dark);
        }

            .faq-list .rbt-accordion-style .card .card-header button:not(.collapsed)::after {
                background: var(--primary-color);
                color: #fff;
            }

        .faq-list .rbt-accordion-style .card .card-header button::before {
            color: var(--accent-dark);
        }

    .faq-list .rbt-accordion-style .card .card-body {
        color: var(--text-color);
        border-top: 1px dashed var(--border-color);
        background: #FBFDFD;
        line-height: 1.75;
    }

        .faq-list .rbt-accordion-style .card .card-body ul li::marker {
            color: var(--accent-color);
        }

/* ==========================================================================
   Privacy policy page (Views/PrivacyPolicy/PrivacyPolicy.cshtml)
   ========================================================================== */
.privacy-page .breadcrumb-image-container .breadcrumb-image-wrapper {
    background: linear-gradient(120deg, #E8F4F4 0%, #FFFFFF 45%, #FEF3EA 100%);
}

.privacy-page .breadcrumb-image-container {
    border-top: 4px solid var(--primary-color);
    border-radius: var(--radius-big) var(--radius-big) 0 0;
}

.privacy-page .breadcrumb-content-top .title {
    color: var(--heading-color);
}

.privacy-page .breadcrumb-content-top p {
    color: var(--text-color);
}

.privacy-page .rbt-article-content-wrapper {
    border-radius: 0 0 var(--radius-big) var(--radius-big);
    box-shadow: 0 20px 50px rgba(15, 63, 66, 0.1);
}

.privacy-page .post-thumbnail img {
    width: 100% !important;
    max-width: 720px;
    border-radius: var(--radius-big);
    box-shadow: 0 16px 36px rgba(15, 63, 66, 0.18);
}

.privacy-page .content {
    color: var(--text-color);
    line-height: 1.8;
}

    .privacy-page .content h4 {
        color: var(--heading-color);
        margin-top: 40px;
        padding: 12px 18px;
        background: var(--primary-light);
        border-left: 4px solid var(--primary-color);
        border-radius: 0 var(--radius-10) var(--radius-10) 0;
        font-size: 22px;
    }

    .privacy-page .content h5 {
        display: inline;
        color: var(--primary-dark);
        font-size: 17px;
    }

    .privacy-page .content ol li::marker {
        color: var(--accent-dark);
        font-weight: 700;
    }

    .privacy-page .content b {
        color: var(--heading-color);
    }

/* ==========================================================================
   Terms page (Views/Shared/_Terms.cshtml) - builds on the privacy-page styles
   ========================================================================== */
.terms-page .content {
    counter-reset: terms-section;
}

    /* number every section heading automatically: 1, 2, 3 ... */
    .terms-page .content h4 {
        counter-increment: terms-section;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .terms-page .content h4::before {
            content: counter(terms-section);
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--primary-color);
            color: #fff;
            font-size: 15px;
            line-height: 32px;
            text-align: center;
        }

    .terms-page .content ul {
        margin: 12px 0 6px;
    }

        .terms-page .content ul li::marker {
            color: var(--accent-color);
        }

        .terms-page .content ul li {
            margin-bottom: 6px;
        }

.terms-page .post-thumbnail img {
    animation: termsFadeUp 0.8s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes termsFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .terms-page .post-thumbnail img {
        animation: none;
    }
}

/* Social tiles */
.privacy-social {
    padding-top: 20px;
    padding-bottom: 20px;
    background: var(--background-color);
}

    .privacy-social .instagram-grid a {
        display: block;
        overflow: hidden;
        border-radius: var(--radius-10);
    }

    .privacy-social .instagram-grid img {
        width: 100%;
        aspect-ratio: 400 / 450;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .privacy-social .instagram-grid a:hover img {
        transform: scale(1.06);
    }

/* ==========================================================================
   All courses filters (Views/Courses/AllCourses.cshtml) - square, on-brand
   ========================================================================== */
:root {
    --filter-radius: 0;
}

/* Course count badge next to the title */
.rbt-page-banner-wrapper .rbt-badge-2 {
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: var(--filter-radius);
    box-shadow: none;
}

    .rbt-page-banner-wrapper .rbt-badge-2 .image {
        color: var(--primary-color);
    }

/* Category tabs */
.rbt-course-top-wrapper .filter-tab-button button {
    height: 48px;
    line-height: 46px;
    padding: 0 26px;
    margin: 6px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--heading-color);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--filter-radius);
    box-shadow: 0 2px 6px rgba(15, 63, 66, 0.06);
}

    .rbt-course-top-wrapper .filter-tab-button button:hover {
        background-color: var(--primary-light);
        border-color: var(--primary-color);
        color: var(--primary-dark) !important;
    }

    .rbt-course-top-wrapper .filter-tab-button button.active {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff !important;
        box-shadow: inset 0 -3px 0 var(--accent-color), 0 6px 14px rgba(var(--primary-rgb), 0.25);
    }

    .rbt-course-top-wrapper .filter-tab-button button:focus-visible {
        outline: 3px solid rgba(var(--primary-rgb), 0.45);
        outline-offset: 2px;
    }

/* Search box */
.rbt-course-top-wrapper .rbt-search-style input {
    background: var(--surface-color);
    color: var(--heading-color);
    border: 1px solid var(--border-color);
    border-radius: var(--filter-radius);
}

    .rbt-course-top-wrapper .rbt-search-style input::placeholder {
        color: #8A979E;
    }

    .rbt-course-top-wrapper .rbt-search-style input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
    }

.rbt-course-top-wrapper .rbt-search-style .rbt-search-btn i {
    color: var(--primary-color);
}

.rbt-course-top-wrapper .rbt-search-style .rbt-search-btn:hover i {
    color: var(--accent-dark);
}

/* Sort-by dropdown */
.rbt-course-top-wrapper .select-label {
    color: var(--primary-dark);
}

.rbt-course-top-wrapper .rbt-modern-select .bootstrap-select button.btn-light {
    border: 1px solid var(--border-color);
    border-radius: var(--filter-radius);
    box-shadow: none;
    color: var(--heading-color);
}

    .rbt-course-top-wrapper .rbt-modern-select .bootstrap-select button.btn-light:focus,
    .rbt-course-top-wrapper .rbt-modern-select .bootstrap-select.show button.btn-light {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15) !important;
    }

.rbt-course-top-wrapper .rbt-modern-select .dropdown-menu,
.rbt-course-top-wrapper .rbt-modern-select .dropdown-item {
    border-radius: var(--filter-radius) !important;
}

    .rbt-course-top-wrapper .rbt-modern-select .dropdown-item:hover,
    .rbt-course-top-wrapper .rbt-modern-select .dropdown-item.active,
    .rbt-course-top-wrapper .rbt-modern-select .dropdown-item:active {
        background-color: var(--primary-light);
        color: var(--primary-dark);
    }

/* Sidebar filter widgets */
.rbt-sidebar-widget-wrapper {
    border-radius: var(--filter-radius);
    border-top: 3px solid var(--primary-color);
}

    .rbt-sidebar-widget-wrapper .rbt-search-style-1 input {
        border-radius: var(--filter-radius);
    }

    .rbt-sidebar-widget-wrapper .rbt-widget-title {
        border-bottom-color: rgba(var(--primary-rgb), 0.25);
    }

    .rbt-sidebar-widget-wrapper .rbt-lable {
        background: var(--primary-light);
        color: var(--primary-dark);
        border-radius: var(--filter-radius);
    }

    .rbt-sidebar-widget-wrapper .rbt-show-more-btn {
        color: var(--primary-dark);
    }

/* ==========================================================================
   Career change wizard (Views/Index/CareerChange.cshtml)
   ========================================================================== */
.full-purple-bg {
    background-color: var(--background-color);
}

/* Progress */
.career-progress-step.active, .upskill-progress-step.active, .returntowork-progress-step.active, .hobby-progress-step.active {
    background-color: rgba(var(--accent-rgb), 0.55);
}

.prev-link {
    background: transparent;
}

    .prev-link:hover {
        color: var(--accent-dark);
    }

/* Continue buttons */
.btn-continue {
    background-color: var(--accent-color);
    color: var(--on-accent-color);
}

    .btn-continue:hover,
    .btn-continue:focus-visible {
        background-color: var(--primary-color);
        color: #fff;
    }

/* Step 1: subject dropdown */
#career-step1 .rbt-modern-select .form-control,
#career-step1 .bootstrap-select > .dropdown-toggle {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-10);
    color: var(--heading-color);
}

    #career-step1 .rbt-modern-select .form-control:focus {
        border-color: var(--primary-color);
    }

/* Step 2: course level checkboxes */
.checkbox-group-wrapper {
    background: var(--secondary-color);
    box-shadow: 0 12px 30px rgba(15, 63, 66, 0.2);
}

.custom-checkbox {
    background-color: var(--primary-light);
    color: var(--heading-color);
}

    .custom-checkbox:hover {
        background-color: #D3ECEB;
    }

    .custom-checkbox .checkmark {
        border-color: var(--primary-color);
        background-color: #fff;
    }

    .custom-checkbox input:checked ~ .checkmark {
        background-color: var(--primary-color);
    }

/* Step 3: study mode cards */
.select-card .card-content {
    border-color: var(--border-color);
}

.select-card span {
    color: var(--heading-color);
}

.select-card:hover .card-content {
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.15);
}

.select-card input[type="checkbox"]:checked + .card-content {
    border-color: var(--primary-color);
    background-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.35);
}

/* Step 4: education level cards */
.answer-card {
    border-color: var(--border-color);
}

    .answer-card span {
        color: var(--heading-color);
    }

    .answer-card:hover {
        border-color: rgba(var(--primary-rgb), 0.5);
        background-color: #F7FBFB;
    }

.navigator-answer input[type="radio"]:checked + .answer-card {
    border-color: var(--primary-color);
    background-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.35);
}

/* Info icon + tooltip */
.info-icon {
    color: #fff;
    background-color: var(--primary-color);
}

.tooltip-box {
    color: var(--text-color);
    border-left: 3px solid var(--accent-color);
}

/* Step 5: results form */
.custom-form-left {
    background-color: var(--secondary-color);
}

    .custom-form-left .top-left-box {
        background-color: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

.view-preferences {
    color: var(--accent-color);
    cursor: pointer;
}

.li-text-color li {
    color: rgba(255, 255, 255, 0.85);
}

.summary-preferences {
    color: var(--text-color);
    border-color: var(--border-color);
}

.custom-form-right {
    background-color: #fff;
    border-top: 4px solid var(--accent-color);
}

    .custom-form-right h4 {
        color: var(--heading-color);
    }

    .custom-form-right input {
        border: 1px solid var(--border-color);
        border-radius: var(--radius-small);
    }

        .custom-form-right input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
        }

    .custom-form-right button[type="submit"] {
        background-color: var(--accent-color);
        color: var(--on-accent-color);
        transition: background-color 0.3s;
    }

        .custom-form-right button[type="submit"]:hover {
            background-color: var(--primary-color);
            color: #fff;
        }

.privacy {
    color: var(--text-color);
}

    .privacy a {
        color: var(--primary-dark);
    }

/* ==========================================================================
   Buttons
   ========================================================================== */
.rbt-btn {
    font-weight: 600;
}

    .rbt-btn:hover {
        color: var(--primary-dark);
    }

    /* Main call-to-action: brand orange */
    .rbt-btn.btn-gradient {
        background-color: var(--accent-color);
        color: var(--on-accent-color);
    }

        .rbt-btn.btn-gradient:hover {
            background-color: var(--primary-color);
            color: var(--color-white);
        }

    .rbt-btn.btn-border-gradient {
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        color: var(--heading-color);
    }

        .rbt-btn.btn-border-gradient:hover {
            color: var(--primary-dark);
        }

    .rbt-btn:focus-visible,
    .btn:focus-visible {
        outline: 3px solid rgba(var(--primary-rgb), 0.45);
        outline-offset: 2px;
    }

    .rbt-btn:disabled,
    .rbt-btn.disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Bootstrap buttons - explicit properties so they apply to both the local
   Bootstrap 5.1.3 (hard-coded colours) and the CDN Bootstrap 5.3 */
.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

    .btn-primary:hover,
    .btn-check:focus + .btn-primary,
    .btn-primary:focus {
        color: #fff;
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
    }

    .btn-check:checked + .btn-primary,
    .btn-check:active + .btn-primary,
    .btn-primary:active,
    .btn-primary.active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
    }

    .btn-primary:disabled,
    .btn-primary.disabled {
        color: #fff;
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        opacity: 0.55;
    }

    .btn-primary:focus,
    .btn-outline-primary:focus,
    .btn-check:focus + .btn-primary,
    .btn-check:focus + .btn-outline-primary {
        box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.35);
    }

.btn-outline-primary {
    color: var(--primary-dark);
    border-color: var(--primary-color);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:active,
    .btn-outline-primary.active,
    .btn-check:checked + .btn-outline-primary {
        color: #fff;
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .btn-outline-primary:disabled,
    .btn-outline-primary.disabled {
        color: var(--primary-color);
        background-color: transparent;
    }

.btn-secondary {
    color: #fff;
    background-color: #5E6E77;
    border-color: #5E6E77;
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        color: #fff;
        background-color: #4B5961;
        border-color: #4B5961;
    }

.btn-warning {
    color: var(--on-accent-color);
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

    .btn-warning:hover,
    .btn-warning:focus {
        color: var(--on-accent-color);
        background-color: var(--accent-dark);
        border-color: var(--accent-dark);
    }
/* Search buttons */
.search-btn {
    background-color: var(--accent-color);
    color: var(--on-accent-color);
}

    .search-btn:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

/* ==========================================================================
   Cards & panels
   ========================================================================== */
.card {
    border-color: var(--border-color);
    border-radius: var(--radius-10);
}

.card-header {
    background-color: var(--primary-light);
    border-bottom-color: var(--border-color);
    color: var(--heading-color);
    font-weight: 600;
}

.rbt-card:hover,
.career-card:hover {
    box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.15);
}

.badge.bg-primary,
.bg-primary {
    background-color: var(--primary-color) !important;
}

/* ==========================================================================
   Forms & inputs
   ========================================================================== */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.2);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.2);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #8A979E;
}

.form-label,
.form-group label {
    color: var(--heading-color);
}

/* Template underline-style inputs: brand focus line */
.form-group .focus-border {
    background-color: var(--primary-color);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color);
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table {
    --bs-table-hover-bg: rgba(var(--primary-rgb), 0.06);
    --bs-table-striped-bg: #F7FBFB;
    border-color: var(--border-color);
}

    .table > thead > tr > th,
    .table thead th {
        background-color: var(--primary-light);
        color: var(--heading-color);
        font-weight: 600;
        border-bottom: 2px solid rgba(var(--primary-rgb), 0.35);
    }

/* ==========================================================================
   Modals, dropdowns, pagination
   ========================================================================== */
.modal-content {
    border: 0;
    border-radius: var(--radius-10);
    box-shadow: 0 20px 50px rgba(15, 63, 66, 0.18);
}

.modal-header {
    border-bottom: 3px solid var(--primary-color);
}

.dropdown-menu {
    border-color: var(--border-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--primary-dark);
    background-color: var(--primary-light);
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background-color: var(--primary-color);
}

.page-link {
    color: var(--primary-dark);
}

    .page-link:hover,
    .page-link:focus {
        color: var(--primary-dark);
        background-color: var(--primary-light);
    }

    .page-link:focus {
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
    }

.page-item.active .page-link {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primary-color);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--primary-dark);
}

/* ==========================================================================
   Alerts & notifications (semantic colours kept distinct from the brand)
   ========================================================================== */
.alert {
    border-width: 0 0 0 4px;
    border-radius: var(--radius-small);
}

.alert-success { border-left-color: #2E9E5B; }
.alert-warning { border-left-color: var(--accent-color); }
.alert-danger  { border-left-color: #D93838; }
.alert-info    { border-left-color: var(--primary-color); }

/* toastr notifications: white card + coloured bar/icon in the brand palette.
   Bootstrap 5 also styles .toast (0.875rem = 8.75px on our 10px root), so
   everything here is pinned under #toast-container to win over both. */
#toast-container {
    z-index: 1000000;
}

#toast-container.toast-top-right {
    top: 96px;
    right: 24px;
}

#toast-container > .toast {
    position: relative;
    width: 380px;
    max-width: calc(100vw - 32px);
    margin: 0 0 12px;
    padding: 16px 40px 16px 64px;
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--heading-color);
    background: var(--surface-color) none;
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 63, 66, 0.18);
    opacity: 1;
    overflow: hidden;
    animation: ch-toast-in 0.55s cubic-bezier(0.21, 1.02, 0.73, 1) both;
}

/* slide in from the right with a small overshoot; the icon pops in just after */
@keyframes ch-toast-in {
    0% { transform: translateX(calc(100% + 32px)) scale(0.96); opacity: 0; }
    70% { transform: translateX(-6px) scale(1); opacity: 1; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes ch-toast-icon-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes ch-toast-icon-ring {
    0% { box-shadow: 0 0 0 0 rgba(var(--toast-ring-rgb, var(--primary-rgb)), 0.45); }
    100% { box-shadow: 0 0 0 12px rgba(var(--toast-ring-rgb, var(--primary-rgb)), 0); }
}

    /* toastr.min.css loads after this file; div.toast outranks its icon background-images */
    #toast-container > div.toast {
        background-image: none;
    }

    #toast-container > .toast:hover {
        opacity: 1;
        box-shadow: 0 16px 40px rgba(15, 63, 66, 0.24);
    }

    /* round icon badge replaces toastr's PNG icons */
    #toast-container > .toast::before {
        position: absolute;
        top: 50%;
        left: 16px;
        width: 34px;
        height: 34px;
        margin-top: -17px;
        border-radius: 50%;
        font-size: 18px;
        font-weight: 700;
        line-height: 34px;
        text-align: center;
        color: #FFFFFF;
        background-color: var(--primary-color);
        content: "i";
        animation: ch-toast-icon-pop 0.45s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both, ch-toast-icon-ring 1.2s 0.7s ease-out 2;
    }

@media (prefers-reduced-motion: reduce) {
    #toast-container > .toast,
    #toast-container > .toast::before {
        animation: none;
    }
}

#toast-container > .toast-info {
    border-left-color: var(--primary-color);
}

    #toast-container > .toast-info::before {
        background-color: var(--primary-color);
        content: "i";
    }

#toast-container > .toast-success {
    --toast-ring-rgb: 46, 158, 91;
    border-left-color: #2E9E5B;
}

    #toast-container > .toast-success::before {
        background-color: #2E9E5B;
        content: "\2713";
    }

#toast-container > .toast-warning {
    --toast-ring-rgb: var(--accent-rgb);
    border-left-color: var(--accent-color);
}

    #toast-container > .toast-warning::before {
        background-color: var(--accent-color);
        color: var(--on-accent-color);
        content: "!";
    }

#toast-container > .toast-error {
    --toast-ring-rgb: 217, 56, 56;
    border-left-color: #D93838;
}

    #toast-container > .toast-error::before {
        background-color: #D93838;
        content: "\00D7";
        font-size: 22px;
    }

#toast-container .toast-title {
    margin-bottom: 2px;
    font-weight: 700;
    color: var(--heading-color);
}

#toast-container .toast-message {
    color: var(--heading-color);
    word-wrap: break-word;
}

#toast-container .toast-close-button {
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--text-color);
    text-shadow: none;
    opacity: 0.6;
}

    #toast-container .toast-close-button:hover {
        color: var(--heading-color);
        opacity: 1;
    }

#toast-container .toast-progress {
    height: 3px;
    background-color: var(--accent-color);
    opacity: 1;
}

@media (max-width: 575px) {
    #toast-container.toast-top-right {
        top: 80px;
        right: 16px;
        left: 16px;
    }

        #toast-container.toast-top-right > .toast {
            width: auto;
            max-width: none;
        }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-widget .ft-title {
    color: var(--heading-color);
}

.footer-widget .description,
.footer-widget .ft-link li a {
    color: var(--text-color);
}

    .footer-widget .ft-link li a:hover {
        color: var(--primary-dark) !important;
    }

.social-icon.social-default li a:hover {
    background: var(--primary-color);
    color: #fff;
}

.copyright-area {
    background-color: var(--secondary-color);
}

    .copyright-area,
    .copyright-area p,
    .copyright-area .copyright-link li a {
        color: rgba(255, 255, 255, 0.82);
    }

        .copyright-area a,
        .copyright-area .copyright-link li a:hover {
            color: var(--accent-color);
        }

/* Back-to-top progress ring */
.rbt-progress-parent svg.rbt-back-circle path {
    stroke: var(--primary-color);
}

/* ==========================================================================
   Blog list page
   ========================================================================== */
.bl-hero {
    position: relative;
    padding: 50px 0 120px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-dark) 55%, var(--primary-color) 100%);
}

.bl-hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: blFloat 10s ease-in-out infinite;
}

.bl-hero-blob-1 {
    width: 320px;
    height: 320px;
    right: -100px;
    top: -120px;
    border: 40px solid rgba(var(--accent-rgb), 0.18);
}

.bl-hero-blob-2 {
    width: 220px;
    height: 220px;
    left: -80px;
    bottom: -90px;
    background: rgba(255, 255, 255, 0.07);
    animation-delay: -4s;
}

.bl-hero .container {
    position: relative;
    z-index: 1;
}

.bl-crumbs {
    margin-bottom: 18px;
}

    .bl-crumbs li,
    .bl-crumbs li a,
    .bl-crumbs .icon-right {
        color: rgba(255, 255, 255, 0.8);
    }

        .bl-crumbs li a:hover {
            color: var(--accent-color);
        }

        .bl-crumbs li.active {
            color: #fff;
        }

.bl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--accent-color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: blUp 0.6s ease both;
}

.bl-hero-title {
    margin-bottom: 10px;
    color: #fff;
    font-size: 48px;
    animation: blUp 0.6s 0.1s ease both;
}

.bl-hero-text {
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    animation: blUp 0.6s 0.2s ease both;
}

.bl-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    animation: blUp 0.6s 0.3s ease both;
}

.bl-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-weight: 700;
}

.bl-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 360px;
    margin: 0;
}

    .bl-search i {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        pointer-events: none;
    }

    .bl-search input {
        width: 100%;
        height: 46px;
        padding: 0 16px 0 44px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        color: var(--heading-color);
        font-size: 15px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

        .bl-search input:focus {
            outline: none;
            box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.5);
        }

.bl-hero-art {
    width: 100%;
    max-width: 440px;
    display: block;
    margin-left: auto;
    animation: blUp 0.8s 0.2s ease both;
}

.bl-area {
    position: relative;
    z-index: 1;
    margin-top: -80px;
}

/* featured article */
.bl-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 50px rgba(15, 63, 66, 0.14);
}

.bl-featured-img {
    position: relative;
    display: block;
    min-height: 340px;
    overflow: hidden;
    background: var(--primary-light);
}

    .bl-featured-img img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

.bl-featured:hover .bl-featured-img img {
    transform: scale(1.06);
}

.bl-badge {
    position: absolute;
    left: 18px;
    top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.35);
    animation: blPulse 2.6s ease-in-out infinite;
}

.bl-featured-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}

.bl-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
}

.bl-featured-title {
    margin-bottom: 14px;
    font-size: 30px;
    line-height: 1.3;
}

    .bl-featured-title a {
        color: var(--secondary-color);
        transition: color 0.25s ease;
    }

        .bl-featured-title a:hover {
            color: var(--primary-color);
        }

.bl-featured-text {
    margin-bottom: 24px;
    color: #4d6161;
    font-size: 17px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bl-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    background: linear-gradient(120deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.25);
    transition: transform 0.25s ease, gap 0.25s ease, box-shadow 0.25s ease;
}

    .bl-btn:hover,
    .bl-btn:focus-visible {
        color: #fff;
        gap: 12px;
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(var(--primary-rgb), 0.32);
    }

/* grid */
.bl-section-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 56px 0 26px;
}

    .bl-section-head h3 {
        margin: 0;
        color: var(--secondary-color);
        font-size: 26px;
        white-space: nowrap;
    }

.bl-line {
    flex: 1 1 auto;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color), transparent);
}

.bl-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 26px rgba(var(--primary-rgb), 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

    .bl-card:hover {
        transform: translateY(-8px);
        border-color: rgba(var(--primary-rgb), 0.35);
        box-shadow: 0 22px 44px rgba(var(--primary-rgb), 0.16);
    }

.bl-card-img {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--primary-light);
}

    .bl-card-img img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

.bl-card:hover .bl-card-img img {
    transform: scale(1.08);
}

.bl-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-light), #d4ecec);
    color: var(--primary-color);
    font-size: 40px;
}

.bl-date-chip {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.bl-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 22px;
}

.bl-card-title {
    margin-bottom: 8px;
    font-size: 19px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .bl-card-title a {
        color: var(--secondary-color);
        transition: color 0.25s ease;
    }

        .bl-card-title a:hover {
            color: var(--primary-color);
        }

.bl-card-text {
    margin-bottom: 16px;
    color: #5a6e6e;
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bl-link {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: 700;
    transition: gap 0.25s ease, color 0.25s ease;
}

.bl-card:hover .bl-link {
    gap: 10px;
    color: var(--accent-dark);
}

.bl-empty {
    padding: 50px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px dashed var(--border-color);
    text-align: center;
}

    .bl-empty[hidden],
    .bl-col[hidden],
    .bl-featured[hidden] {
        display: none !important;
    }

.bl-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 26px;
}

.bl-empty h4 {
    margin-bottom: 6px;
    color: var(--secondary-color);
}

/* scroll reveal */
.bl-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

    .bl-reveal.bl-in {
        opacity: 1;
        transform: none;
    }

.bl-col:nth-child(3n+2) .bl-reveal {
    transition-delay: 0.1s;
}

.bl-col:nth-child(3n) .bl-reveal {
    transition-delay: 0.2s;
}

.bl-card.bl-reveal.bl-in:hover {
    transform: translateY(-8px);
    transition-delay: 0s;
}

@keyframes blUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes blFloat {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(14px, 16px);
    }
}

@keyframes blPulse {
    0%, 100% {
        box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.35), 0 0 0 0 rgba(var(--accent-rgb), 0.45);
    }

    50% {
        box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.35), 0 0 0 10px rgba(var(--accent-rgb), 0);
    }
}

@media (max-width: 991px) {
    .bl-featured {
        grid-template-columns: minmax(0, 1fr);
    }

    .bl-featured-img {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .bl-featured-body {
        padding: 28px;
    }
}

@media (max-width: 767px) {
    .bl-hero {
        padding: 34px 0 100px;
    }

    .bl-hero-title {
        font-size: 34px;
    }

    .bl-featured-title {
        font-size: 24px;
    }

    .bl-search {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-hero-blob,
    .bl-badge,
    .bl-eyebrow,
    .bl-hero-title,
    .bl-hero-text,
    .bl-hero-meta,
    .bl-hero-art {
        animation: none;
    }

    .bl-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .bl-card,
    .bl-card-img img,
    .bl-featured-img img {
        transition: none;
    }

        .bl-card:hover,
        .bl-card.bl-reveal.bl-in:hover {
            transform: none;
        }
}

/* ==========================================================================
   Training Providers A-Z page (reuses .bl-* hero pieces from the blog page)
   ========================================================================== */
.tp-hero {
    position: relative;
    padding: 50px 0 110px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #0B3134 0%, var(--secondary-color) 45%, var(--primary-dark) 100%);
}

    .tp-hero .container {
        position: relative;
        z-index: 1;
    }

.tp-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: blFloat 11s ease-in-out infinite;
}

.tp-blob-1 {
    width: 360px;
    height: 360px;
    right: -120px;
    top: -140px;
    border: 44px solid rgba(var(--accent-rgb), 0.18);
}

.tp-blob-2 {
    width: 240px;
    height: 240px;
    right: 22%;
    bottom: -150px;
    background: rgba(255, 255, 255, 0.06);
    animation-delay: -5s;
}

.tp-pill-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-weight: 700;
}

.tp-area {
    position: relative;
    z-index: 1;
    margin-top: -60px;
}

/* A-Z jump bar */
.tp-az {
    position: sticky;
    top: 90px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 30px;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 16px 36px rgba(15, 63, 66, 0.12);
    animation: blUp 0.6s 0.2s ease both;
}

.tp-az-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    a.tp-az-link:hover,
    a.tp-az-link:focus-visible {
        background: var(--primary-color);
        color: #fff;
        transform: translateY(-2px);
    }

    .tp-az-link.is-empty {
        background: transparent;
        color: #b9c7c7;
    }

/* letter groups */
.tp-group {
    margin-bottom: 36px;
    scroll-margin-top: 170px;
}

    .tp-group[hidden],
    .tp-col[hidden],
    .tp-no-match[hidden] {
        display: none !important;
    }

.tp-group-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.tp-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.3);
}

.tp-group-line {
    flex: 1 1 auto;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-color), rgba(var(--primary-rgb), 0.05));
}

.tp-group-count {
    color: #5f7676;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* provider card */
.tp-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    padding: 18px 48px 18px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 26px rgba(var(--primary-rgb), 0.07);
    overflow: hidden;
}

    .tp-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
        transform: scaleY(0.3);
        transform-origin: top;
        transition: transform 0.4s ease;
    }

    .tp-card:hover,
    .tp-card:focus-visible {
        border-color: rgba(var(--primary-rgb), 0.4);
        box-shadow: 0 20px 40px rgba(var(--primary-rgb), 0.16);
    }

        .tp-card:hover::before,
        .tp-card:focus-visible::before {
            transform: scaleY(1);
        }

.tp-logo {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--primary-light);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.tp-card:hover .tp-logo {
    transform: scale(1.06) rotate(-3deg);
}

.tp-logo-initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-size: 26px;
    font-weight: 800;
}

.tp-logo img {
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}

.tp-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tp-name {
    color: var(--secondary-color);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    transition: color 0.25s ease;
}

.tp-card:hover .tp-name {
    color: var(--primary-color);
}

.tp-count {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
    transition: background 0.25s ease, color 0.25s ease;
}

.tp-card:hover .tp-count {
    background: var(--accent-color);
    color: var(--on-accent-color);
}

.tp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tp-tag {
    padding: 2px 9px;
    border-radius: 6px;
    background: rgba(var(--accent-rgb), 0.12);
    color: #8a4310;
    font-size: 12px;
    font-weight: 600;
}

.tp-tag-more {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.tp-loc {
    color: #5f7676;
    font-size: 13px;
}

    .tp-loc i {
        margin-right: 4px;
        color: var(--primary-color);
    }

.tp-go {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.tp-card:hover .tp-go {
    background: var(--primary-color);
    color: #fff;
    transform: translateX(4px);
}

/* scroll reveal */
.tp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

    .tp-reveal.tp-in {
        opacity: 1;
        transform: none;
    }

.tp-col:nth-child(3n+2) .tp-reveal {
    transition-delay: 0.08s;
}

.tp-col:nth-child(3n) .tp-reveal {
    transition-delay: 0.16s;
}

.tp-card.tp-reveal.tp-in:hover {
    transform: translateY(-6px);
    transition-delay: 0s;
}

@media (max-width: 767px) {
    .tp-hero {
        padding: 34px 0 90px;
    }

    .tp-az {
        top: 70px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 10px;
    }

    .tp-az-link {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }

    .tp-letter {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-blob,
    .tp-az {
        animation: none;
    }

    .tp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tp-card:hover,
    .tp-card.tp-reveal.tp-in:hover,
    .tp-card:hover .tp-logo,
    .tp-card:hover .tp-go {
        transform: none;
    }
}

.home-providers-more {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

    .home-providers-more .bl-btn {
        align-self: center;
    }

/* Home: reviews / testimonials */
.home-reviews {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, var(--primary-light) 55%, #fff 100%);
}

    .home-reviews > .container {
        position: relative;
        z-index: 1;
    }

    .home-reviews .section-title.text-center .description.hr-intro {
        max-width: 560px;
        margin: 14px auto 0;
        padding: 0;
    }

.hr-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: hrFloat 9s ease-in-out infinite;
}

.hr-blob-1 {
    width: 220px;
    height: 220px;
    left: -70px;
    top: 60px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.18), transparent 70%);
}

.hr-blob-2 {
    width: 160px;
    height: 160px;
    right: 6%;
    top: 30px;
    border: 18px solid rgba(var(--accent-rgb), 0.14);
    animation-duration: 11s;
    animation-delay: -3s;
}

.hr-blob-3 {
    width: 90px;
    height: 90px;
    right: -20px;
    bottom: 50px;
    background: rgba(var(--accent-rgb), 0.18);
    animation-duration: 7s;
    animation-delay: -1.5s;
}

.home-reviews .testimonial-item-3-activation {
    padding: 14px 4px 30px;
}

.home-reviews .swiper-slide {
    height: auto;
}

.home-reviews .single-slide {
    height: 100%;
    padding: 0 10px;
}

.hr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 26px;
    padding: 42px 26px 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

    .hr-card::before {
        content: "";
        position: absolute;
        left: 92px;
        right: 22px;
        top: 0;
        height: 4px;
        border-radius: 0 0 6px 6px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        transform: scaleX(0.35);
        transform-origin: left;
        transition: transform 0.45s ease;
    }

    .hr-card:hover {
        transform: translateY(-8px);
        border-color: rgba(var(--primary-rgb), 0.35);
        box-shadow: 0 22px 44px rgba(var(--primary-rgb), 0.16);
    }

        .hr-card:hover::before {
            transform: scaleX(1);
        }

.hr-quote {
    position: absolute;
    top: -26px;
    left: 26px;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    line-height: 70px;
    text-align: center;
    box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.35);
    animation: hrBob 4s ease-in-out infinite;
}

.hr-text {
    flex: 1 1 auto;
    margin: 0 0 18px;
    color: #3f5656;
    font-size: 16px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hr-course {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin-bottom: 16px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-color);
}

.hr-avatar {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px var(--primary-light);
    transition: box-shadow 0.3s ease;
}

.hr-card:hover .hr-avatar {
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.35);
}

.hr-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hr-name {
    margin: 0;
    font-size: 17px;
    color: var(--secondary-color);
}

.hr-role {
    font-size: 13px;
    color: #5f7676;
}

/* Arrows: centred under the cards, shown only when there are more reviews than fit */
.home-reviews .rbt-arrow-between .rbt-swiper-arrow {
    display: none;
    top: auto;
    bottom: 6px;
    width: 50px;
    height: 50px;
    transform: none;
    opacity: 1;
    background: #fff;
    border: 1px solid var(--border-color);
    color: var(--primary-dark);
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.14);
    cursor: pointer;
}

.home-reviews.hr-has-nav .rbt-arrow-between .rbt-swiper-arrow {
    display: block;
}

.home-reviews.hr-has-nav .testimonial-item-3-activation {
    padding-bottom: 80px;
}

.home-reviews .rbt-arrow-between .rbt-swiper-arrow.rbt-arrow-left {
    left: calc(50% - 60px);
    right: auto;
}

.home-reviews .rbt-arrow-between .rbt-swiper-arrow.rbt-arrow-right {
    left: calc(50% + 10px);
    right: auto;
}

.home-reviews .rbt-arrow-between .rbt-swiper-arrow:hover,
.home-reviews .rbt-arrow-between .rbt-swiper-arrow:focus-visible {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

    .home-reviews .rbt-arrow-between .rbt-swiper-arrow:hover::after {
        background: var(--primary-color);
    }

    .home-reviews .rbt-arrow-between .rbt-swiper-arrow:hover i {
        color: #fff;
    }

.home-reviews .rbt-arrow-between .rbt-swiper-arrow.swiper-button-disabled,
.home-reviews .rbt-arrow-between:hover .rbt-swiper-arrow.swiper-button-disabled {
    opacity: 0.4 !important;
    box-shadow: none;
}

@keyframes hrFloat {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(12px, -16px);
    }
}

@keyframes hrBob {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(-4deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hr-blob,
    .hr-quote {
        animation: none;
    }

    .hr-card,
    .hr-card::before {
        transition: none;
    }

        .hr-card:hover {
            transform: none;
        }
}

/* Home: Popular Training Providers */
.home-providers .section-title.text-center .description,
.home-providers .section-title.text-center .description.has-medium-font-size {
    padding: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.home-providers .provider-card {
    position: relative;
    display: block;
    height: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .home-providers .provider-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s ease;
    }

    .home-providers .provider-card:hover,
    .home-providers .provider-card:focus-visible {
        transform: translateY(-4px);
        border-color: var(--primary-color);
        box-shadow: 0 16px 34px rgba(var(--primary-rgb), 0.18);
    }

        .home-providers .provider-card:hover::before,
        .home-providers .provider-card:focus-visible::before {
            transform: scaleX(1);
        }

    .home-providers .provider-card .inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .home-providers .provider-card .thumbnail {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        margin: 0;
        padding: 8px;
        border-radius: 12px;
        box-shadow: none;
        border: 1px solid var(--border-color);
        background: var(--primary-light);
        transition: transform 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .home-providers .provider-card .thumbnail img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 6px;
        }

    .home-providers .provider-card:hover .thumbnail {
        transform: scale(1.06) rotate(-3deg);
    }

    .home-providers .provider-card .content {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding: 0;
    }

    .home-providers .provider-card .read-more-btn {
        margin: 0;
    }

    .home-providers .provider-card .title {
        margin-bottom: 6px;
        font-size: 16px;
        line-height: 1.35;
        color: var(--secondary-color);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .home-providers .provider-card .rbt-btn-link {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 999px;
        background: var(--primary-light);
        color: var(--primary-dark);
        font-weight: 600;
        font-size: 13px;
        transition: background 0.25s ease, color 0.25s ease;
    }

        .home-providers .provider-card .rbt-btn-link::after {
            display: none;
        }

    .home-providers .provider-card:hover .rbt-btn-link {
        background: var(--accent-color);
        color: var(--on-accent-color);
    }

        .home-providers .provider-card .rbt-btn-link i {
            margin-left: 6px;
            transition: transform 0.3s ease;
        }

        .home-providers .provider-card:hover .rbt-btn-link i {
            transform: translateX(4px);
        }

@media (prefers-reduced-motion: reduce) {
    .home-providers .provider-card,
    .home-providers .provider-card::before,
    .home-providers .provider-card .rbt-btn-link i {
        transition: none;
    }

        .home-providers .provider-card:hover {
            transform: none;
        }
}

/* Header: mobile menu (opened by the menu button on phones / tablets) */
.popup-mobile-menu {
    background-color: rgba(11, 49, 52, 0.6);
    backdrop-filter: blur(3px);
}

    .popup-mobile-menu .inner-wrapper {
        max-width: 86vw;
        overflow-y: auto;
        box-shadow: 20px 0 50px rgba(11, 49, 52, 0.3);
    }

    .popup-mobile-menu .inner-wrapper .inner-top {
        border-bottom: 2px solid var(--accent-color);
    }

        .popup-mobile-menu .inner-wrapper .inner-top .close-button {
            background: var(--accent-color);
            color: var(--on-accent-color);
            transition: transform 0.3s ease;
        }

            .popup-mobile-menu .inner-wrapper .inner-top .close-button:hover,
            .popup-mobile-menu .inner-wrapper .inner-top .close-button:focus-visible {
                transform: rotate(90deg);
            }

    .popup-mobile-menu .mainmenu {
        margin: 0;
        padding: 10px 0;
        list-style: none;
    }

        .popup-mobile-menu .mainmenu li {
            margin: 0;
        }

            .popup-mobile-menu .mainmenu li a {
                display: flex;
                align-items: center;
                gap: 12px;
                min-height: 48px;
                padding: 10px 12px;
                border-radius: 10px;
                color: var(--secondary-color);
                font-size: 16px;
                font-weight: 600;
                transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
            }

                .popup-mobile-menu .mainmenu li a i {
                    width: 32px;
                    height: 32px;
                    flex: 0 0 32px;
                    border-radius: 8px;
                    background: var(--primary-light);
                    color: var(--primary-color);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 15px;
                }

                .popup-mobile-menu .mainmenu li a:hover,
                .popup-mobile-menu .mainmenu li a:focus-visible {
                    background: var(--primary-light);
                    color: var(--primary-dark);
                    padding-left: 16px;
                }

            .popup-mobile-menu .mainmenu li.mobile-menu-divider {
                margin: 14px 12px 6px;
                color: #6b8585;
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 1px;
                text-transform: uppercase;
            }

            .popup-mobile-menu .mainmenu li a.mobile-menu-join {
                margin-top: 8px;
                background: var(--accent-color);
                color: var(--on-accent-color);
                justify-content: center;
            }

                .popup-mobile-menu .mainmenu li a.mobile-menu-join i {
                    background: rgba(255, 255, 255, 0.35);
                    color: var(--on-accent-color);
                }

    .popup-mobile-menu .mobile-menu-bottom {
        margin-top: auto;
        padding-top: 20px;
    }

/* Header: "Find Your Course" filter drawer (right side) */
.fd-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--primary-light);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

    .fd-open-btn:hover,
    .fd-open-btn:focus-visible {
        background: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateY(-1px);
    }

.fd-bars {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
}

    .fd-bars span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: var(--primary-dark);
        transition: width 0.25s ease, background 0.25s ease;
    }

        .fd-bars span:nth-child(1) {
            width: 100%;
        }

        .fd-bars span:nth-child(2) {
            width: 70%;
        }

        .fd-bars span:nth-child(3) {
            width: 45%;
        }

.fd-open-btn:hover .fd-bars span,
.fd-open-btn:focus-visible .fd-bars span {
    width: 100%;
    background: #fff;
}

.fd-open-mobile {
    border: 0;
}

.fd-overlay {
    position: fixed;
    inset: 0;
    z-index: 10998;
    background: rgba(11, 49, 52, 0.55);
    backdrop-filter: blur(3px);
    animation: fdFade 0.3s ease both;
}

    .fd-overlay[hidden] {
        display: none;
    }

body.fd-lock {
    overflow: hidden;
}

.fd-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10999;
    display: flex;
    flex-direction: column;
    width: 400px;
    max-width: 92vw;
    background: #fff;
    box-shadow: -20px 0 50px rgba(11, 49, 52, 0.3);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s;
}

    .fd-drawer.is-open {
        transform: none;
        visibility: visible;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }

.fd-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 26px 24px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-dark) 60%, var(--primary-color));
}

.fd-head-blob {
    position: absolute;
    right: -50px;
    top: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 22px solid rgba(var(--accent-rgb), 0.25);
    animation: blFloat 8s ease-in-out infinite;
}

.fd-head-text {
    position: relative;
}

.fd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fd-title {
    margin: 4px 0 0;
    color: #fff;
    font-size: 24px;
}

.fd-close {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.25s ease;
}

    .fd-close:hover,
    .fd-close:focus-visible {
        background: #fff;
        transform: rotate(90deg);
    }

.fd-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 18px 10px;
}

.fd-group {
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.fd-drawer.is-open .fd-group {
    animation: fdIn 0.45s ease both;
    animation-delay: calc(0.08s * var(--fd-i, 1));
}

.fd-group-btn,
.fd-provider-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: var(--secondary-color);
    text-align: left;
    cursor: pointer;
    transition: background 0.25s ease;
}

    .fd-group-btn:hover,
    .fd-provider-link:hover {
        background: var(--primary-light);
        color: var(--secondary-color);
    }

    .fd-group-btn[aria-expanded="true"] {
        background: var(--primary-light);
    }

.fd-group-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.fd-group:nth-child(even) .fd-group-icon {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
}

.fd-group-title {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 700;
}

.fd-chevron {
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.fd-group-btn[aria-expanded="true"] .fd-chevron {
    transform: rotate(180deg);
}

.fd-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px 16px;
    background: var(--primary-light);
}

    .fd-options[hidden] {
        display: none;
    }

.fd-chip {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    background: #fff;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .fd-chip:hover,
    .fd-chip:focus-visible {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
        transform: translateY(-2px);
    }

.fd-provider-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

    .fd-provider-text small {
        color: #5f7676;
        font-size: 13px;
    }

.fd-provider-link > .feather-arrow-right {
    color: var(--primary-color);
    transition: transform 0.25s ease;
}

.fd-provider-link:hover > .feather-arrow-right {
    transform: translateX(4px);
}

.fd-footer {
    padding: 14px 18px 20px;
    border-top: 1px solid var(--border-color);
}

.fd-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 12px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-weight: 700;
    transition: background 0.25s ease, color 0.25s ease;
}

    .fd-all:hover,
    .fd-all:focus-visible {
        background: var(--primary-color);
        color: #fff;
    }

@keyframes fdIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fdFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fd-drawer,
    .fd-drawer.is-open {
        transition: none;
    }

        .fd-drawer.is-open .fd-group,
        .fd-overlay,
        .fd-head-blob {
            animation: none;
        }
}

/* Header: signed-in account menu */
.rbt-user-wrapper:focus-within .rbt-user-menu-list-wrapper {
    top: 100%;
    visibility: visible;
    opacity: 1;
    clip: rect(0px, 100vw, 200vh, -30px);
}

.header-account .header-avatar {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.55);
    overflow: hidden;
}

    .header-account .header-avatar:hover,
    .header-account .header-avatar:focus-visible {
        color: #fff;
        box-shadow: 0 0 0 3px var(--accent-color);
    }

    .header-account .header-avatar::after {
        display: none;
    }

    .header-account .header-avatar img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #fff;
    }

.header-account .rbt-user-menu-list-wrapper {
    left: auto;
    right: 0;
    text-align: left;
    min-width: 280px;
    padding: 0;
    border-top: 3px solid var(--primary-color);
    overflow: hidden;
}

    .header-account .rbt-user-menu-list-wrapper .inner {
        padding: 0;
    }

.header-account-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--primary-light);
    border-bottom: 1px solid var(--border-color);
}

.header-account-avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 3px #fff;
}

    .header-account-avatar img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #fff;
    }

.header-account-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.header-account-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account-email {
    font-size: 13px;
    color: #5f7676;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account-role {
    align-self: flex-start;
    margin-top: 4px;
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.header-account .user-list-wrapper {
    padding: 8px 10px;
    margin: 0;
}

    .header-account .user-list-wrapper li a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 8px;
        color: var(--secondary-color);
    }

        .header-account .user-list-wrapper li a i {
            color: var(--primary-color);
        }

        .header-account .user-list-wrapper li a:hover,
        .header-account .user-list-wrapper li a:focus-visible {
            background: var(--primary-light);
            color: var(--primary-dark);
        }

.header-account-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 18px 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-weight: 700;
}

    .header-account-logout:hover,
    .header-account-logout:focus-visible {
        background: var(--accent-dark);
        color: #fff;
    }

/* ==========================================================================
   Student area (dashboard, applied courses, feedback, profile, password)
   ========================================================================== */
.sd-area {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, var(--primary-light) 0, #fff 420px);
}

.rbt-header-10 .header-right {
    gap: 14px;
}

/* Student / provider panel footer (was a navy photo) */
.custom-footer-bg {
    position: relative;
    background-image: linear-gradient(135deg, #0B3134 0%, var(--secondary-color) 40%, var(--primary-dark) 100%);
    color: rgba(255, 255, 255, 0.82);
}

    .custom-footer-bg::before {
        background: radial-gradient(circle at 85% 20%, rgba(var(--accent-rgb), 0.18), transparent 45%);
    }

    .custom-footer-bg .gradient-shadow-top,
    .custom-footer-bg .gradient-shadow-bottom {
        display: none;
    }

    .custom-footer-bg .ft-title,
    .custom-footer-bg h6 {
        color: #fff !important;
    }

    .custom-footer-bg .description,
    .custom-footer-bg .ft-link li,
    .custom-footer-bg .ft-link li span,
    .custom-footer-bg .copyright-area p {
        color: rgba(255, 255, 255, 0.82);
    }

    .custom-footer-bg .ft-link li a,
    .custom-footer-bg .copyright-area a {
        color: rgba(255, 255, 255, 0.82);
    }

        .custom-footer-bg .ft-link li a:hover,
        .custom-footer-bg .copyright-area a:hover {
            color: var(--accent-color);
        }

    .custom-footer-bg .rbt-separator {
        border-color: rgba(255, 255, 255, 0.15);
    }

.sd-cover {
    position: relative;
    margin-bottom: 40px;
    border-radius: 18px;
    overflow: hidden;
    min-height: 245px;
    box-shadow: 0 18px 40px rgba(15, 63, 66, 0.18);
    animation: sdFadeUp 0.6s ease both;
}

.sd-cover-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-cover-info {
    position: absolute;
    left: 32px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    z-index: 1;
}

.sd-cover-avatar {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
    animation: sdPop 0.6s 0.2s ease both;
}

.sd-cover-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
}

.sd-cover-badge {
    align-self: flex-start;
    padding: 2px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sd-cover-name {
    margin: 0;
    color: #fff;
    font-size: 26px;
}

.sd-cover-email {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

/* sidebar */
.sd-sidebar {
    top: 100px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.08);
    overflow: hidden;
    animation: sdFadeUp 0.6s 0.1s ease both;
}

.sd-sidebar-head {
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    background: linear-gradient(120deg, var(--primary-color), var(--primary-dark));
    color: #fff;
}

.sd-sidebar-hello {
    font-size: 13px;
    opacity: 0.85;
}

.sd-sidebar-name {
    font-size: 17px;
    font-weight: 700;
}

.sd-sidebar nav {
    padding: 12px 12px 16px;
}

.sd-nav-title {
    display: block;
    margin: 12px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b8585;
}

.sd-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sd-nav li {
        margin: 0 0 4px;
    }

    .sd-nav a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        color: var(--secondary-color);
        font-size: 15px;
        font-weight: 500;
        transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
    }

        .sd-nav a i {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--primary-light);
            color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            transition: background 0.25s ease, color 0.25s ease;
        }

        .sd-nav a:hover,
        .sd-nav a:focus-visible {
            background: var(--primary-light);
            color: var(--primary-dark);
            padding-left: 16px;
        }

        .sd-nav a.active {
            background: linear-gradient(120deg, var(--primary-color), var(--primary-dark));
            color: #fff;
            box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.25);
        }

            .sd-nav a.active i {
                background: rgba(255, 255, 255, 0.18);
                color: #fff;
            }

            .sd-nav a.active::after {
                content: "";
                position: absolute;
                right: 12px;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--accent-color);
            }

        .sd-nav a.sd-nav-logout i {
            background: rgba(var(--accent-rgb), 0.15);
            color: var(--accent-dark);
        }

        .sd-nav a.sd-nav-logout:hover {
            background: rgba(var(--accent-rgb), 0.12);
            color: #9a4a12;
        }

/* shared building blocks */
.sd-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.sd-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.07);
    height: 100%;
}

.sd-reveal {
    animation: sdFadeUp 0.6s ease both;
}

.sd-page > .sd-reveal:nth-child(2),
.sd-stats .sd-reveal:nth-child(2),
.sd-list .sd-reveal:nth-child(2) {
    animation-delay: 0.08s;
}

.sd-page > .sd-reveal:nth-child(3),
.sd-stats .sd-reveal:nth-child(3),
.sd-list .sd-reveal:nth-child(3) {
    animation-delay: 0.16s;
}

.sd-list .sd-reveal:nth-child(4) {
    animation-delay: 0.24s;
}

.sd-list .sd-reveal:nth-child(n+5) {
    animation-delay: 0.32s;
}

.sd-page-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}

    .sd-page-head > div {
        flex: 1 1 240px;
        min-width: 0;
    }

.sd-page-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.25);
}

.sd-page-icon-accent {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
    box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.3);
}

.sd-page-title {
    margin: 0 0 2px;
    font-size: 22px;
    color: var(--secondary-color);
}

.sd-page-sub {
    margin: 0;
    font-size: 15px;
    color: #5f7676;
}

.sd-count-pill {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 700;
}

.sd-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.15);
    color: #9a4a12;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.sd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(120deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .sd-btn:hover,
    .sd-btn:focus-visible {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(var(--primary-rgb), 0.3);
    }

.sd-btn-ghost {
    background: #fff;
    color: var(--primary-dark);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

    .sd-btn-ghost:hover,
    .sd-btn-ghost:focus-visible {
        color: var(--primary-dark);
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

.sd-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
}

    .sd-link:hover {
        color: var(--accent-dark);
    }

.sd-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.12);
    border-left: 4px solid var(--accent-color);
    color: #7a3d10;
    font-weight: 600;
    animation: sdFadeUp 0.5s ease both;
}

.sd-empty {
    text-align: center;
    padding: 30px 16px 10px;
}

    .sd-empty img {
        width: 220px;
        max-width: 70%;
        margin-bottom: 12px;
    }

    .sd-empty h5 {
        margin-bottom: 6px;
        color: var(--secondary-color);
    }

    .sd-empty p {
        margin-bottom: 18px;
        color: #5f7676;
    }

.sd-empty-sm {
    padding: 10px 10px 4px;
}

    .sd-empty-sm img {
        width: 150px;
    }

/* dashboard */
.sd-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 32px;
    border-radius: 18px;
    background: linear-gradient(120deg, #fff 0%, #fff 45%, var(--primary-light) 100%);
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 34px rgba(var(--primary-rgb), 0.09);
    overflow: hidden;
}

    .sd-hero::before {
        content: "";
        position: absolute;
        right: -60px;
        top: -60px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), transparent 70%);
    }

.sd-hero-text {
    position: relative;
    flex: 1 1 auto;
}

    .sd-hero-text p {
        margin: 0 0 18px;
        color: #4d6161;
        max-width: 460px;
    }

.sd-hero-title {
    margin: 0 0 10px;
    font-size: 30px;
    color: var(--secondary-color);
}

    .sd-hero-title span {
        color: var(--primary-color);
    }

.sd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sd-hero-art {
    position: relative;
    flex: 0 0 300px;
    width: 300px;
}

.sd-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sd-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.07);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .sd-stat::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 4px;
        background: var(--primary-color);
        transform: scaleX(0.25);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .sd-stat:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 34px rgba(var(--primary-rgb), 0.15);
    }

        .sd-stat:hover::after {
            transform: scaleX(1);
        }

.sd-stat-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-stat-num {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: var(--secondary-color);
}

.sd-stat-label {
    margin-top: 6px;
    color: #5f7676;
    font-weight: 600;
}

.sd-stat-accent .sd-stat-icon {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent-dark);
}

.sd-stat-accent::after {
    background: var(--accent-color);
}

.sd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.sd-card-title {
    margin: 0;
    font-size: 18px;
    color: var(--secondary-color);
}

    .sd-card-title i {
        margin-right: 6px;
        color: var(--primary-color);
    }

.sd-recent {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sd-recent li {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 10px;
        padding: 12px 14px;
        border-radius: 12px;
        background: var(--primary-light);
        transition: background 0.25s ease, transform 0.25s ease;
    }

        .sd-recent li:hover {
            transform: translateX(4px);
            background: #dceeee;
        }

.sd-recent-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-recent-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .sd-recent-text a {
        color: var(--secondary-color);
        font-weight: 600;
        font-size: 15px;
        line-height: 1.35;
    }

        .sd-recent-text a:hover {
            color: var(--primary-color);
        }

    .sd-recent-text small {
        color: #5f7676;
    }

.sd-recent-go {
    color: var(--primary-color);
}

.sd-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .sd-quick a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 18px 10px;
        border-radius: 14px;
        border: 1px solid var(--border-color);
        background: #fff;
        color: var(--secondary-color);
        font-weight: 600;
        font-size: 14px;
        text-align: center;
        transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

        .sd-quick a i {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary-color);
            font-size: 19px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.25s ease, color 0.25s ease;
        }

        .sd-quick a:nth-child(even) i {
            background: rgba(var(--accent-rgb), 0.15);
            color: var(--accent-dark);
        }

        .sd-quick a:hover,
        .sd-quick a:focus-visible {
            transform: translateY(-4px);
            border-color: var(--primary-color);
            box-shadow: 0 12px 24px rgba(var(--primary-rgb), 0.14);
        }

            .sd-quick a:hover i {
                background: var(--primary-color);
                color: #fff;
            }

/* applied courses + feedback lists */
.sd-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sd-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .sd-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background: var(--primary-color);
    }

    .sd-item:hover {
        transform: translateY(-3px);
        border-color: rgba(var(--primary-rgb), 0.4);
        box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.12);
    }

.sd-feedback-item {
    grid-template-columns: 48px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
}

    .sd-feedback-item::before {
        background: var(--accent-color);
    }

.sd-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-item-icon-accent {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent-dark);
}

.sd-item-main,
.sd-item-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sd-item-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6b8585;
    margin-bottom: 2px;
}

.sd-item-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--secondary-color);
}

a.sd-item-title:hover {
    color: var(--primary-color);
}

.sd-item-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-color);
    overflow-wrap: anywhere;
}

    .sd-item-value i,
    .sd-item-sub i {
        color: var(--primary-color);
        margin-right: 4px;
    }

a.sd-item-value:hover {
    color: var(--primary-color);
}

.sd-item-sub {
    font-size: 13px;
    color: #5f7676;
}

.sd-status {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.sd-status-ok {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.sd-status-pending {
    background: rgba(var(--accent-rgb), 0.15);
    color: #9a4a12;
}

.sd-item-actions {
    display: flex;
    gap: 8px;
}

.sd-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

    .sd-icon-btn:hover,
    .sd-icon-btn:focus-visible {
        background: var(--primary-color);
        color: #fff;
        transform: translateY(-2px);
    }

.sd-icon-btn-danger {
    background: #fdecec;
    color: #b42318;
    border-color: #f6d0cd;
}

    .sd-icon-btn-danger:hover,
    .sd-icon-btn-danger:focus-visible {
        background: #b42318;
        color: #fff;
    }

/* profile */
.sd-profile-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px 30px;
    border-radius: 18px;
    background: linear-gradient(120deg, var(--secondary-color), var(--primary-dark) 55%, var(--primary-color));
    color: #fff;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(15, 63, 66, 0.2);
}

.sd-profile-avatar {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.85);
    animation: sdPop 0.6s 0.15s ease both;
}

.sd-profile-intro {
    flex: 1 1 auto;
    min-width: 0;
}

    .sd-profile-intro .sd-eyebrow {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

.sd-profile-name {
    margin: 0 0 4px;
    color: #fff;
    font-size: 26px;
}

.sd-profile-mail {
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.sd-profile-art {
    flex: 0 0 210px;
    width: 210px;
    margin: -14px -8px -20px 0;
}

.sd-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sd-detail {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--primary-light);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

    .sd-detail:hover {
        transform: translateY(-2px);
        border-color: rgba(var(--primary-rgb), 0.35);
    }

.sd-detail-icon {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-color);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-detail-icon-accent {
    background: var(--accent-color);
    color: var(--on-accent-color);
}

.sd-detail-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #5f7676;
}

.sd-detail-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
    overflow-wrap: anywhere;
}

.sd-mono {
    letter-spacing: 2px;
}

.sd-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/* change password + edit feedback forms */
.sd-split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 30px;
    align-items: center;
}

.sd-split-side {
    padding: 20px;
    border-radius: 16px;
    background: var(--primary-light);
    text-align: center;
}

    .sd-split-side img {
        width: 220px;
        max-width: 80%;
        margin-bottom: 10px;
    }

.sd-tips {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

    .sd-tips li {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 8px;
        font-size: 14px;
        color: var(--secondary-color);
    }

        .sd-tips li i {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--primary-color);
            color: #fff;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.sd-field {
    margin-bottom: 18px;
}

    .sd-field label,
    .sd-form .course-field label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--secondary-color);
    }

    .sd-field .password-wrapper {
        position: relative;
    }

.sd-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    z-index: 5;
}

.sd-field .form-control,
.sd-form .form-control {
    height: auto;
    min-height: 50px;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fbfefe;
    font-size: 15px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sd-field .password-wrapper .form-control {
    padding-left: 42px;
    padding-right: 44px;
}

.sd-field .form-control:focus,
.sd-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12);
    background: #fff;
}

.sd-form .form-control[readonly] {
    background: var(--primary-light);
    color: var(--secondary-color);
}

.sd-field .toggle-npassword,
.sd-field .toggle-rpassword {
    color: var(--primary-color) !important;
}

.sd-field .invalid-feedback {
    display: block;
    margin-top: 6px;
    font-size: 13px;
}

.sd-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
}

    .sd-form-grid .course-field:nth-child(4),
    .sd-form-grid .sd-field-wide {
        grid-column: 1 / -1;
    }

/* Training provider panel additions (reuses the sd-* student styles) */
.sd-cover-avatar.sd-cover-logo,
.sd-profile-avatar.sd-profile-logo {
    background: #fff;
    padding: 8px;
    overflow: hidden;
}

    .sd-cover-avatar.sd-cover-logo img,
    .sd-profile-avatar.sd-profile-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 50%;
    }

.sd-profile-avatar i {
    font-size: 34px;
}

.pp-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pp-quick {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pp-lead-badge {
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

    .pp-lead-badge.is-premium {
        background: linear-gradient(120deg, var(--accent-color), var(--accent-dark));
        color: #fff;
        box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.3);
    }

.pp-lead-gap {
    margin-top: 8px;
}

.pp-lead-item {
    grid-template-columns: 48px minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
}

    .pp-lead-item.premium-row {
        background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.07), #fff 60%);
    }

        .pp-lead-item.premium-row::before {
            background: var(--accent-color);
        }

.pp-course-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.pp-course-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 600;
}

.pp-course-tag-alt {
    background: rgba(var(--accent-rgb), 0.13);
    color: #8a4310;
}

.pp-course-tag.is-empty {
    background: #f1f3f3;
    color: #7a8787;
    font-weight: 500;
}

.pp-rto-status {
    padding: 1px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-weight: 700;
}

    .pp-rto-status.is-active {
        background: var(--accent-color);
        color: var(--on-accent-color);
    }

.sd-detail-wide {
    grid-column: 1 / -1;
}

.pp-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.pp-media {
    margin: 0;
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed rgba(var(--primary-rgb), 0.35);
    background: #fff;
    text-align: center;
}

    .pp-media figcaption {
        margin-bottom: 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: #5f7676;
    }

    .pp-media img {
        max-width: 100%;
        height: 180px;
        object-fit: contain;
        border-radius: 8px;
        background: var(--primary-light);
    }

/* Add / Edit course forms */
.pp-course-form .rbt-create-course-area {
    background: transparent !important;
}

    .pp-course-form .rbt-create-course-area > .container {
        padding: 0;
        max-width: none;
    }

.pp-course-form .accordion-item.card {
    margin-bottom: 16px;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.06);
}

.pp-course-form .accordion-header.card-header {
    padding: 0;
    border: 0;
    background: transparent;
}

.pp-course-form .rbt-accordion-style .card .card-header button {
    padding: 16px 52px 16px 20px;
    background: var(--primary-light);
    color: var(--secondary-color);
    font-size: 17px;
    font-weight: 700;
    box-shadow: none;
    transition: background 0.25s ease, color 0.25s ease;
}

    .pp-course-form .rbt-accordion-style .card .card-header button::before {
        right: 20px;
        color: var(--primary-color);
    }

    .pp-course-form .rbt-accordion-style .card .card-header button[aria-expanded=true],
    .pp-course-form .rbt-accordion-style .card .card-header button:not(.collapsed) {
        background: linear-gradient(120deg, var(--primary-color), var(--primary-dark));
        color: #fff;
    }

        .pp-course-form .rbt-accordion-style .card .card-header button[aria-expanded=true]::before,
        .pp-course-form .rbt-accordion-style .card .card-header button:not(.collapsed)::before {
            background: none;
            color: #fff;
            -webkit-text-fill-color: #fff;
        }

    .pp-course-form .rbt-accordion-style .card .card-header button:hover {
        background: #dceeee;
    }

    .pp-course-form .rbt-accordion-style .card .card-header button:not(.collapsed):hover {
        background: linear-gradient(120deg, var(--primary-color), var(--primary-dark));
    }

    .pp-course-form .rbt-accordion-style .card .card-header button:focus-visible {
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.5);
    }

/* Add/Edit course views set body { font-family: Arial } inline; keep the brand font in the panel */
.pp-area,
.pp-area input,
.pp-area textarea,
.pp-area select,
.pp-area button {
    font-family: var(--font-primary), sans-serif;
}

.pp-course-form .course-field label {
    font-weight: 600;
    color: var(--secondary-color);
}

.pp-course-form .form-control,
.pp-course-form input[type=text],
.pp-course-form input[type=number],
.pp-course-form input[type=date],
.pp-course-form textarea {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

    .pp-course-form .form-control:focus,
    .pp-course-form input:focus,
    .pp-course-form textarea:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12);
    }

.pp-course-form .form-submit-group .rbt-btn {
    border-radius: 10px;
    background: linear-gradient(120deg, var(--primary-color), var(--primary-dark));
}

/* "Course Upload Tips" slide-out panel */
.pp-course-form .slider {
    background: linear-gradient(160deg, var(--secondary-color), var(--primary-dark));
}

    .pp-course-form .slider .toggle-button {
        border-radius: 10px 0 0 10px;
        background: var(--accent-color);
        color: var(--on-accent-color);
    }

    .pp-course-form .slider .rbt-create-course-sidebar {
        background: transparent;
        box-shadow: none;
    }

        .pp-course-form .slider .rbt-create-course-sidebar .title,
        .pp-course-form .slider .rbt-list-style-1 li {
            color: #fff;
        }

    .pp-course-form .slider .rbt-list-style-1 li i {
        color: var(--accent-color);
    }

@media (max-width: 1199px) {
    .pp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pp-lead-item {
        grid-template-columns: 48px minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .pp-stats,
    .pp-media-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pp-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@keyframes sdFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sdPop {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1199px) {
    .sd-item,
    .sd-feedback-item {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .sd-item-meta {
        grid-column: 2 / 3;
    }

    .sd-item > .sd-icon-btn,
    .sd-item-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .sd-hero-art {
        flex-basis: 220px;
        width: 220px;
    }
}

@media (max-width: 991px) {
    .sd-sidebar {
        position: static;
    }

    .sd-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .sd-cover {
        min-height: 200px;
    }

    .sd-cover-info {
        left: 18px;
        right: 18px;
        bottom: 18px;
        gap: 12px;
    }

    .sd-cover-avatar {
        flex-basis: 70px;
        width: 70px;
        height: 70px;
        font-size: 26px;
    }

    .sd-cover-name {
        font-size: 20px;
    }

    .sd-cover-email {
        overflow-wrap: anywhere;
    }

    .sd-hero,
    .sd-profile-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }

    .sd-hero-art {
        align-self: center;
        width: 240px;
        flex-basis: auto;
    }

    .sd-profile-art {
        display: none;
    }

    .sd-hero-title {
        font-size: 24px;
    }

    .sd-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .sd-card {
        padding: 20px;
    }

    .sd-detail-grid,
    .sd-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sd-item,
    .sd-feedback-item {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
    }

    .sd-item-meta {
        grid-column: 1 / -1;
    }

    .sd-item > .sd-icon-btn,
    .sd-item-actions {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-cover,
    .sd-cover-avatar,
    .sd-sidebar,
    .sd-reveal,
    .sd-alert,
    .sd-profile-avatar {
        animation: none;
    }

    .sd-stat,
    .sd-stat::after,
    .sd-quick a,
    .sd-item,
    .sd-recent li,
    .sd-btn,
    .sd-nav a,
    .sd-detail {
        transition: none;
    }
}

/* All Courses: sidebar filters */
.all-courses-body {
    padding-top: 50px;
}

.course-filter-sidebar {
    position: sticky;
    top: 100px;
}

@media (min-width: 992px) {
    .course-filter-panel {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .course-filter-head {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

.course-filter-panel {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.08);
    overflow: hidden;
}

.course-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    background: linear-gradient(120deg, var(--primary-color), var(--primary-dark));
}

.course-filter-heading {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

    .course-filter-heading i {
        margin-right: 6px;
    }

.course-filter-clear {
    padding: 4px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 13px;
    font-weight: 600;
}

    .course-filter-clear:hover,
    .course-filter-clear:focus-visible {
        background: #fff;
        color: var(--primary-dark);
    }

.course-filter-group {
    border-top: 1px solid var(--border-color);
}

    .course-filter-group:first-of-type {
        border-top: 0;
    }

.course-filter-title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border: 0;
    background: transparent;
    color: var(--secondary-color);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
}

    .course-filter-title > span i {
        margin-right: 8px;
        color: var(--primary-color);
    }

    .course-filter-title > i {
        color: var(--primary-color);
        transition: transform 0.25s ease;
    }

    .course-filter-title[aria-expanded="false"] > i {
        transform: rotate(-90deg);
    }

    .course-filter-title:hover {
        background: var(--primary-light);
    }

.course-filter-list {
    margin: 0;
    padding: 0 20px 14px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
}

    .course-filter-list[hidden],
    .course-filter-empty[hidden],
    .course-filter-active-count[hidden],
    .course-filter-clear[hidden] {
        display: none !important;
    }

    .course-filter-list li {
        margin: 0;
        padding: 5px 0;
    }

    .course-filter-list .rbt-check-group label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        font-size: 15px;
        color: var(--body-color, #4a5b5b);
    }

    .course-filter-list .rbt-check-group input[type=checkbox]:checked ~ label {
        color: var(--primary-dark);
        font-weight: 600;
    }

    .course-filter-list .rbt-check-group input[type=checkbox]:checked ~ label::before {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .course-filter-list .rbt-check-group input[type=checkbox]:focus-visible ~ label::before {
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
    }

    .course-filter-list .count {
        flex: 0 0 auto;
        min-width: 28px;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--primary-light);
        color: var(--primary-dark);
        font-size: 12px;
        text-align: center;
    }

.course-filter-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    color: var(--secondary-color);
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.08);
}

    .course-filter-toggle i {
        color: var(--primary-color);
    }

    .course-filter-toggle[aria-expanded="true"] > i {
        transform: rotate(180deg);
    }

.course-filter-active-count {
    display: inline-block;
    min-width: 22px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 12px;
    text-align: center;
}

@media (max-width: 991px) {
    .course-filter-sidebar {
        position: static;
    }

    .course-filter-panel {
        display: none;
        margin-top: 12px;
    }

        .course-filter-panel.is-open {
            display: block;
        }
}

/* All Courses: course cards */
/* Every row takes the height of the tallest visible card, so all images on a page get the same size and crop */
.rbt-course-grid-column.active-list-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
}

.rbt-course-grid-column.active-list-view .course-card {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin-bottom: 26px;
}

.ac-card {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 26px rgba(var(--primary-rgb), 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .ac-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
        z-index: 2;
    }

    .ac-card:hover {
        transform: translateY(-4px);
        border-color: rgba(var(--primary-rgb), 0.45);
        box-shadow: 0 18px 40px rgba(var(--primary-rgb), 0.16);
    }

/* Image fills the whole left side of the card (cropped, never distorted) */
.ac-card-media {
    position: relative;
    flex: 0 0 300px;
    max-width: 300px;
    align-self: stretch;
    min-height: 240px;
    padding: 0;
}

.ac-card-img {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--primary-light);
}

    .ac-card-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.5s ease;
    }

.ac-card:hover .ac-card-img img {
    transform: scale(1.06);
}

/* "No image" placeholder: saved as a normal course photo, so it is shown whole instead of cropped.
   Bottom padding keeps its text clear of the logo; the background matches the edge of the image. */
.ac-card-img img[src$="/NoImage.jpg"],
.hf-media img[src$="/NoImage.jpg"],
.cd-page .cd-sidebar-thumb img[src$="/NoImage.jpg"] {
    object-fit: contain;
    background: #eaeaea;
}

.ac-card-img img[src$="/NoImage.jpg"] {
    padding: 14px 14px 106px;
}

.ac-card-logo {
    position: absolute;
    z-index: 1;
    left: 20px;
    bottom: 20px;
    width: 76px;
    height: 76px;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 6px 18px rgba(15, 63, 66, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ac-card-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.ac-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 22px 26px 22px 24px;
    display: flex;
    flex-direction: column;
}

.ac-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.ac-code {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.ac-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 600;
}

.ac-tag-level {
    background: rgba(var(--accent-rgb), 0.14);
    color: #9a4a12;
}

.rbt-card-title.ac-card-title {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.35;
}

    .rbt-card-title.ac-card-title a {
        color: var(--secondary-color);
        transition: color 0.25s ease;
    }

        .rbt-card-title.ac-card-title a:hover,
        .rbt-card-title.ac-card-title a:focus-visible {
            color: var(--primary-color);
        }

.ac-provider {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

    .ac-provider i {
        margin-right: 4px;
    }

.ac-card-text {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
    color: #4d6161;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ac-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

/* Too narrow for three: Outcomes moves to its own full-width row */
@media (max-width: 1199px) {
    .ac-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .ac-info-grid .ac-info:nth-child(3) {
            grid-column: 1 / -1;
        }
}

.ac-info {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--primary-light);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.ac-card:hover .ac-info {
    border-color: rgba(var(--primary-rgb), 0.28);
}

.ac-info-icon {
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.ac-info:nth-child(even) .ac-info-icon {
    background: var(--accent-color);
    color: var(--on-accent-color);
}

.ac-info-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #5f7676;
    line-height: 1.3;
}

.ac-info-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary-color);
    line-height: 1.3;
    overflow-wrap: break-word;
}

.ac-outcomes {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-left: 3px solid var(--accent-color);
    border-radius: 0 10px 10px 0;
    background: rgba(var(--accent-rgb), 0.07);
}

.ac-outcomes-label {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #9a4a12;
}

.ac-outcomes p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #4d6161;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ac-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.ac-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.25s ease, gap 0.25s ease;
}

    .ac-card-btn:hover,
    .ac-card-btn:focus-visible {
        background: var(--primary-dark);
        color: #fff;
        gap: 12px;
    }

@media (max-width: 767px) {
    .ac-card {
        flex-direction: column;
    }

    .ac-card-media {
        flex: 0 0 auto;
        align-self: stretch;
        max-width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .ac-card-img img[src$="/NoImage.jpg"] {
        padding: 10px 10px 50px;
    }

    .ac-card-logo {
        left: 21px;
        bottom: -26px;
        width: 70px;
        height: 70px;
    }

    .ac-card-body {
        padding: 36px 18px 20px 21px;
    }

    .rbt-card-title.ac-card-title {
        font-size: 19px;
    }

    .ac-card-footer {
        justify-content: stretch;
    }

    .ac-card-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .ac-info-grid {
        grid-template-columns: minmax(0, 1fr);
    }

        .ac-info-grid .ac-info:nth-child(3) {
            grid-column: auto;
        }
}

@media (prefers-reduced-motion: reduce) {
    .ac-card,
    .ac-card-img img,
    .ac-card-btn {
        transition: none;
    }

        .ac-card:hover,
        .ac-card:hover .ac-card-img img {
            transform: none;
        }
}

/* Course rich text (Course Details sections + admin review): compact, even spacing */
.cd-rich,
.rich-text-container {
    line-height: 1.7;
}

    .cd-rich > *:first-child,
    .rich-text-container > *:first-child {
        margin-top: 0;
    }

    .cd-rich > *:last-child,
    .rich-text-container > *:last-child {
        margin-bottom: 0;
    }

    .cd-rich p,
    .rich-text-container p {
        margin: 0 0 12px;
        line-height: 1.7;
    }

    .cd-rich h1, .cd-rich h2, .cd-rich h3, .cd-rich h4, .cd-rich h5, .cd-rich h6,
    .rich-text-container h1, .rich-text-container h2, .rich-text-container h3,
    .rich-text-container h4, .rich-text-container h5, .rich-text-container h6 {
        margin: 18px 0 8px;
        line-height: 1.35;
    }

    .cd-rich ul,
    .cd-rich ol,
    .rich-text-container ul,
    .rich-text-container ol {
        margin: 0 0 12px;
        padding-left: 22px;
    }

    .cd-rich li,
    .rich-text-container li {
        margin: 0 0 6px;
        line-height: 1.6;
    }

        .cd-rich li > p,
        .rich-text-container li > p {
            margin: 0;
        }

    .cd-rich p:empty,
    .rich-text-container p:empty {
        display: none;
    }

    .cd-rich table,
    .rich-text-container table {
        margin: 0 0 12px;
    }

.cd-page .rbt-course-feature-box .section-title,
.cd-page .rbt-instructor .section-title {
    margin-bottom: 16px !important;
}

.cd-page .rbt-course-feature-box .row.g-5.mb--30 {
    margin-top: 0;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Phones: comfortable tap targets and readable small text (all layouts)
   ========================================================================== */
.rbt-category-area.category-section-02 {
    overflow: hidden;
}

@media (max-width: 767px) {
    /* footer + copyright links: ~40px tall touch area */
    .rbt-footer .ft-link li a,
    .rbt-footer .copyright-link li a,
    .copyright-area .copyright-link li a {
        display: inline-block;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .rbt-footer .ft-link li {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    /* accordions (FAQ, events, course forms) */
    .rbt-accordion-style .card .card-header button,
    .accordion .accordion-button {
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 1.4;
    }

    /* show / hide password eyes: bigger hit area, same position */
    .toggle-password,
    .toggle-npassword,
    .toggle-rpassword {
        padding: 10px;
        margin: 0 -10px;
    }

    /* short text links */
    .sd-link,
    .bl-link,
    .fp-back a,
    .login-options a,
    .login-register a,
    .rbt-card .rbt-btn-link,
    .rbt-card .transparent-button,
    .reg-switch-link,
    .prev-link {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    a.sd-item-value {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }

    /* small uppercase labels: at least 12px */
    .sd-nav-title,
    .sd-item-label,
    .sd-detail-label,
    .ac-info-label,
    .tp-group-count,
    .pp-lead-badge,
    .header-account-role {
        font-size: 12px;
    }

    /* carousel dots */
    .swiper-pagination-bullet,
    .rbt-swiper-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 8px !important;
    }

        .rbt-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
            transform: scale(1.5);
        }

    .reg-page .rbt-btn-link {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

/* All Courses: header search summary + empty state */
.course-search-summary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 18px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border-color);
    color: var(--secondary-color);
    font-size: 15px;
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.10);
}

    .course-search-summary > i {
        color: var(--primary-color);
    }

    .course-search-summary strong {
        color: var(--primary-dark);
    }

    .course-search-summary .clear-search {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--accent-dark);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

        .course-search-summary .clear-search:hover,
        .course-search-summary .clear-search:focus {
            color: var(--primary-color);
        }

.course-search-empty {
    text-align: center;
    padding: 50px 20px;
    margin-bottom: 30px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    background: var(--primary-light);
}

    .course-search-empty .empty-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        margin-bottom: 14px;
        border-radius: 50%;
        background: #fff;
        color: var(--primary-color);
        font-size: 26px;
    }

    .course-search-empty h4 {
        color: var(--secondary-color);
        margin-bottom: 8px;
    }

    .course-search-empty p {
        margin-bottom: 20px;
    }

/* ==========================================================================
   Header course search on every page (Views/Shared/_HeaderSearch.cshtml)
   ========================================================================== */
.ch-header-search {
    background: #fff;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .ch-header-search:focus-within {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
    }

    .ch-header-search .search-field {
        position: relative;
    }

    .ch-header-search .search-field .serach-btn {
        background: var(--primary-color);
        color: #fff;
    }

        .ch-header-search .search-field .serach-btn:hover {
            background: var(--accent-color);
            color: var(--on-accent-color);
        }

/* Mobile / tablet search row under the header bar */
.ch-mobile-search {
    background: #fff;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border-color);
}

.ch-header-search--mobile {
    width: 100%;
    max-width: 640px;
    height: 46px;
    margin: 0 auto;
    padding: 0 4px 0 0;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(15, 63, 66, 0.06);
}

    .ch-header-search--mobile .search-by-category {
        flex: 0 0 38%;
        max-width: 170px;
        min-width: 0;
    }

        .ch-header-search--mobile .search-by-category select,
        .ch-header-search--mobile .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
            width: 100% !important;
            min-width: 0 !important;
        }

        .ch-header-search--mobile .search-by-category select {
            height: 44px;
            padding: 0 26px 0 16px;
            font-size: 13px;
            color: var(--secondary-color);
            text-overflow: ellipsis;
        }

        .ch-header-search--mobile .rbt-modern-select .bootstrap-select button.btn-light {
            padding: 0 26px 0 16px !important;
            height: 44px;
            line-height: 44px;
            font-size: 13px;
        }

    .ch-header-search--mobile .search-field {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }

        .ch-header-search--mobile .search-field input {
            width: 100%;
            height: 44px;
            min-width: 0;
            border: 0;
            background: transparent;
            padding: 0 46px 0 12px;
            font-size: 14px;
        }

        .ch-header-search--mobile .search-field .serach-btn {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 38px;
            height: 38px;
            min-width: 38px;
            line-height: 38px;
            font-size: 16px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .ch-header-search--mobile .bootstrap-select .dropdown-menu {
            max-width: calc(100vw - 32px);
        }

@media (max-width: 1199px) {
    .rbt-header-wrapper .ch-mobile-logo {
        flex: 1 1 auto;
    }

        .rbt-header-wrapper .ch-mobile-logo .logo img {
            max-height: 44px;
            width: auto;
        }
}

@media (max-width: 400px) {
    .ch-header-search--mobile .search-by-category {
        flex-basis: 36%;
    }

        .ch-header-search--mobile .search-by-category select,
        .ch-header-search--mobile .rbt-modern-select .bootstrap-select button.btn-light {
            padding-left: 12px !important;
            font-size: 12px;
        }

    .ch-header-search--mobile .search-field input {
        font-size: 13px;
        padding-left: 10px;
    }
}

/* ==========================================================================
   All Courses hero (same look as the Training Providers page); category tabs keep their usual style below it
   ========================================================================== */
.ac-hero {
    padding-bottom: 60px;
}

    .ac-hero .course-search-summary {
        margin-top: 18px;
        background: #fff;
    }

.ac-tabs-row {
    padding-top: 34px;
}

    .ac-tabs-row .rbt-portfolio-filter {
        margin: -6px;
    }

.ac-tabs-row + .all-courses-body {
    padding-top: 30px;
}

@media (max-width: 767px) {
    .ac-hero {
        padding-bottom: 44px;
    }

    .ac-tabs-row {
        padding-top: 24px;
    }

    .ac-hero .course-search-summary {
        display: flex;
        font-size: 14px;
    }
}

/* ==========================================================================
   Course details: national course code shown as a highlighted chip, title on its own
   ========================================================================== */
.cd-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
}

.cd-page .course-details-content .cd-title {
    display: block;
    text-align: left;
}

.cd-card-code {
    display: inline-block;
    margin: 0 8px 6px 0;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 1.4;
    vertical-align: middle;
}

.rbt-card-title .cd-card-code {
    display: table;
}

@media (max-width: 575px) {
    .cd-code {
        font-size: 13px;
        padding: 5px 12px;
    }
}

/* Line between the page content and the footer (all pages except the home page) */
.ch-footer-divider {
    padding: 30px 0 44px;
}

    .ch-footer-divider span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, rgba(var(--primary-rgb), 0) 0%, var(--primary-color) 22%, var(--accent-color) 50%, var(--primary-color) 78%, rgba(var(--primary-rgb), 0) 100%);
        opacity: 0.9;
    }

@media (max-width: 767px) {
    .ch-footer-divider {
        padding: 20px 0 32px;
    }
}

/* Home: Top Trending Course section uses the Training Providers banner background */
.home-trending {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0B3134 0%, var(--secondary-color) 45%, var(--primary-dark) 100%);
}

    .home-trending > .container {
        position: relative;
        z-index: 1;
    }

    .home-trending .section-title .subtitle {
        background: rgba(255, 255, 255, 0.12) !important;
        color: var(--accent-color) !important;
        border: 1px solid rgba(255, 255, 255, 0.18);
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* Home: trending courses as wide cards (details on the left, facts + Find a provider on the right) */
.ht-head {
    max-width: 760px;
    margin-bottom: 36px;
}

    .ht-head .title {
        margin-top: 14px;
    }

.ht-accent {
    color: var(--accent-color);
}

.ht-intro {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
}

.ht-list {
    display: grid;
    gap: 22px;
}

.ht-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .ht-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 50px rgba(0, 0, 0, 0.24);
    }

.ht-main {
    padding: 30px 32px;
    min-width: 0;
}

.ht-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ht-code {
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.ht-cat {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 600;
}

.ht-title {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.3;
}

    .ht-title a {
        color: var(--secondary-color);
    }

        .ht-title a:hover {
            color: var(--primary-color);
        }

.ht-about {
    margin: 0;
    color: #4d5b5c;
    font-size: 15px;
    line-height: 1.7;
}

.ht-label {
    margin: 22px 0 10px;
    color: var(--secondary-color);
    font-size: 15px;
    font-weight: 700;
}

.ht-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ht-chips li {
        margin: 0;
        padding: 6px 14px;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        color: var(--secondary-color);
        font-size: 13px;
        line-height: 1.4;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

        .ht-chips li:hover {
            border-color: var(--primary-color);
            background: var(--primary-light);
        }

.ht-side {
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    border-left: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--primary-light) 0%, #fff 100%);
}

.ht-facts {
    margin: 0 0 22px;
}

    .ht-facts > div {
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
    }

        .ht-facts > div:first-child {
            padding-top: 0;
        }

    .ht-facts dt {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
        color: var(--primary-dark);
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }

    .ht-facts dd {
        margin: 0;
        color: var(--secondary-color);
        font-size: 15px;
        font-weight: 600;
    }

.ht-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    margin-top: auto;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.3);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .ht-btn:hover,
    .ht-btn:focus {
        background: var(--accent-color);
        color: var(--on-accent-color);
        transform: translateY(-2px);
    }

.ht-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    margin-top: 8px;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 600;
}

    .ht-link:hover {
        color: var(--accent-dark);
    }

@media (max-width: 991px) {
    .ht-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .ht-side {
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }

    .ht-facts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0 20px;
    }

        .ht-facts > div:first-child {
            padding-top: 12px;
        }
}

@media (max-width: 575px) {
    .ht-main {
        padding: 22px 18px;
    }

    .ht-side {
        padding: 20px 18px;
    }

    .ht-title {
        font-size: 20px;
    }

    .ht-intro {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ht-card,
    .ht-btn {
        transition: none;
    }

        .ht-card:hover,
        .ht-btn:hover {
            transform: none;
        }
}

/* ==========================================================================
   Find a provider: questions pop-up (Views/Shared/_FindProviderModal.cshtml)
   ========================================================================== */
body.fp-open {
    overflow: hidden;
}

.fp-modal {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

    .fp-modal[hidden] {
        display: none;
    }

.fp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 49, 52, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.fp-dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 34px 34px 30px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(11, 49, 52, 0.35);
    text-align: center;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.fp-modal.is-open .fp-backdrop {
    opacity: 1;
}

.fp-modal.is-open .fp-dialog {
    opacity: 1;
    transform: none;
}

.fp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--secondary-color);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .fp-close:hover {
        background: var(--accent-color);
        color: var(--on-accent-color);
    }

.fp-course {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    padding: 0 30px;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 600;
}

.fp-course-code {
    padding: 2px 10px;
    border-radius: 6px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.fp-progress {
    height: 4px;
    margin: 18px auto 26px;
    max-width: 220px;
    border-radius: 4px;
    background: var(--primary-light);
    overflow: hidden;
}

    .fp-progress span {
        display: block;
        width: 50%;
        height: 100%;
        border-radius: 4px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        transition: width 0.35s ease;
    }

.fp-step {
    animation: fpIn 0.35s ease both;
}

.fp-question {
    display: block;
    margin: 0 0 22px;
    color: var(--secondary-color);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
}

.fp-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.fp-choice {
    min-height: 56px;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    color: var(--secondary-color);
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(15, 63, 66, 0.08);
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

    .fp-choice:hover {
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

    .fp-choice.is-selected {
        border-color: var(--primary-color);
        background: var(--primary-color);
        color: #fff;
    }

.fp-field {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
}

    .fp-field i {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        font-size: 18px;
    }

    .fp-field input {
        width: 100%;
        height: 56px;
        padding: 0 18px 0 48px;
        border: 1.5px solid var(--border-color);
        border-radius: 14px;
        background: #fff;
        color: var(--secondary-color);
        font-size: 17px;
        font-weight: 600;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .fp-field input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.14);
            outline: none;
        }

        .fp-field input[aria-invalid="true"] {
            border-color: #d64545;
        }

.fp-hint {
    margin: 10px 0 0;
    color: #667;
    font-size: 13px;
}

.fp-detected {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 600;
}

    .fp-detected[hidden] {
        display: none;
    }

.fp-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    min-height: 52px;
    margin-top: 22px;
    border: 0;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.3);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

    .fp-go:hover:not(:disabled) {
        background: var(--accent-color);
        color: var(--on-accent-color);
    }

    .fp-go:disabled {
        opacity: 0.45;
        box-shadow: none;
        cursor: not-allowed;
    }

.fp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    margin-top: 10px;
    border: 0;
    background: none;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 600;
}

    .fp-back[hidden] {
        display: none;
    }

@keyframes fpIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 575px) {
    .fp-modal {
        align-items: flex-end;
        padding: 0;
    }

    .fp-dialog {
        max-width: none;
        max-height: 92vh;
        padding: 28px 18px 22px;
        border-radius: 22px 22px 0 0;
        transform: translateY(40px);
    }

    .fp-question {
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fp-backdrop,
    .fp-dialog,
    .fp-progress span,
    .fp-choice {
        transition: none;
    }

    .fp-step {
        animation: none;
    }
}

/* Find a provider: results page (Views/Courses/FindProvider.cshtml) */
.fp-hero {
    padding-bottom: 96px;
}

    .fp-hero .bl-hero-title {
        margin-top: 4px;
    }

.fp-answers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 26px;
    font-size: 14px;
}

.fp-back-link,
.fp-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    color: #fff;
    font-weight: 600;
}

.fp-change {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .fp-back-link:hover,
    .fp-change:hover {
        color: #fff;
        opacity: 0.85;
    }

.fp-answer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
}

.fp-area {
    position: relative;
    z-index: 1;
    margin-top: -56px;
}

.fp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.fp-card {
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 63, 66, 0.1);
    animation: blUp 0.5s ease both;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .fp-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 44px rgba(15, 63, 66, 0.16);
    }

.fp-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.fp-logo {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #fff;
    color: var(--primary-color);
    font-size: 24px;
}

    .fp-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 6px;
    }

.fp-provider {
    margin: 0;
    color: var(--secondary-color);
    font-size: 18px;
    line-height: 1.35;
}

.fp-facts {
    flex: 1 1 auto;
    margin: 0 0 18px;
}

    .fp-facts > div {
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .fp-facts dt {
        margin-bottom: 2px;
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
    }

    .fp-facts dd {
        margin: 0;
        color: var(--secondary-color);
        font-size: 15px;
        font-weight: 600;
    }

.fp-enquire {
    width: 100%;
    margin-top: 0;
}

.fp-section-title {
    margin: 46px 0 20px;
    color: var(--secondary-color);
    font-size: 22px;
}

.fp-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #fff;
    color: var(--secondary-color);
    box-shadow: 0 12px 30px rgba(15, 63, 66, 0.08);
}

    .fp-note i {
        color: var(--accent-dark);
        font-size: 18px;
    }

.fp-empty-btn {
    margin-top: 18px;
}

@media (max-width: 767px) {
    .fp-hero {
        padding-bottom: 80px;
    }

    .fp-area {
        margin-top: -46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fp-card {
        animation: none;
        transition: none;
    }
}

/* Home trending: centred one-line heading, two cards per row, animated */
.ht-head {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

    .ht-head .title {
        font-size: clamp(26px, 3.1vw, 44px);
    }

@media (min-width: 992px) {
    .ht-head .title,
    .ht-intro {
        white-space: nowrap;
    }
}

.ht-intro {
    font-size: clamp(14px, 1.25vw, 17px);
}

.ht-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

/* inside a half-width box the details panel sits under the course text */
.ht-card {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
}

    .ht-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        transform: scaleX(0.18);
        transform-origin: left;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 1;
    }

    .ht-card:hover::before,
    .ht-card:focus-within::before {
        transform: scaleX(1);
    }

    .ht-card .ht-side {
        border-left: 0;
        border-top: 1px solid var(--border-color);
        padding: 20px 26px 22px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px 20px;
    }

    .ht-card .ht-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 26px;
        margin: 0;
    }

        .ht-card .ht-facts > div,
        .ht-card .ht-facts > div:first-child {
            padding: 0;
            border: 0;
        }

    .ht-card .ht-btn {
        margin-top: 0;
        white-space: nowrap;
    }

    .ht-card .ht-link {
        grid-column: 1 / -1;
        justify-content: flex-start;
        min-height: 0;
        margin-top: -4px;
    }

        .ht-card .ht-link i {
            transition: transform 0.25s ease;
        }

        .ht-card .ht-link:hover i {
            transform: translateX(4px);
        }

    .ht-card .ht-main {
        padding: 28px 26px 22px;
    }

    .ht-card .ht-title {
        font-size: 21px;
    }

    .ht-card .ht-about {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* subtle shine across the button on hover */
    .ht-card .ht-btn {
        position: relative;
        overflow: hidden;
    }

        .ht-card .ht-btn::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: -60%;
            width: 40%;
            background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-20deg);
        }

        .ht-card .ht-btn:hover::after {
            animation: htShine 0.8s ease;
        }

    .ht-card .ht-code {
        animation: htGlow 2.8s ease-in-out infinite;
        animation-delay: calc(var(--ht-i, 0) * 0.35s);
    }

/* entrance when sal.js is not running (sal adds its own slide-up) */
.home-trending .ht-card:not([data-sal]) {
    animation: blUp 0.6s calc(var(--ht-i, 0) * 0.1s) ease both;
}

@keyframes htShine {
    to {
        left: 130%;
    }
}

@keyframes htGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.22);
    }
}

@media (max-width: 991px) {
    .ht-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .ht-card .ht-side {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px;
    }

    .ht-card .ht-btn {
        width: 100%;
    }

    .ht-card .ht-link {
        justify-content: center;
    }

    .ht-card .ht-main {
        padding: 24px 18px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ht-card::before,
    .ht-card .ht-link i {
        transition: none;
    }

    .ht-card .ht-code,
    .ht-card .ht-btn:hover::after,
    .home-trending .ht-card:not([data-sal]) {
        animation: none;
    }
}

/* Home: three "how it works" boxes before the Training Providers section */
.home-steps {
    position: relative;
    padding: 70px 0 10px;
    background: #fff;
}

.hs-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

    /* dashed line joining the three steps (desktop) */
    .hs-grid::before {
        content: "";
        position: absolute;
        top: 74px;
        left: 16%;
        right: 16%;
        border-top: 2px dashed rgba(var(--primary-rgb), 0.28);
        z-index: 0;
    }

.hs-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 34px 28px 30px;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: #fff;
    text-align: center;
    color: inherit;
    box-shadow: 0 14px 34px rgba(15, 63, 66, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .hs-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .hs-card:hover,
    .hs-card:focus-visible {
        transform: translateY(-8px);
        border-color: rgba(var(--primary-rgb), 0.35);
        box-shadow: 0 24px 48px rgba(15, 63, 66, 0.16);
        color: inherit;
    }

        .hs-card:hover::after,
        .hs-card:focus-visible::after {
            transform: scaleX(1);
        }

.hs-step {
    position: absolute;
    top: 16px;
    right: 20px;
    color: rgba(var(--primary-rgb), 0.12);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    transition: color 0.3s ease;
}

.hs-card:hover .hs-step {
    color: rgba(var(--accent-rgb), 0.3);
}

.hs-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-size: 32px;
    box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.32);
    animation: hsFloat 4s ease-in-out infinite;
    animation-delay: calc(var(--hs-i, 0) * 0.6s);
}

    /* soft pulsing ring */
    .hs-icon::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 2px solid rgba(var(--accent-rgb), 0.45);
        animation: hsRing 2.8s ease-out infinite;
        animation-delay: calc(var(--hs-i, 0) * 0.5s);
    }

.hs-card:nth-child(2) .hs-icon {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
    color: var(--on-accent-color);
    box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.35);
}

    .hs-card:nth-child(2) .hs-icon::before {
        border-color: rgba(var(--primary-rgb), 0.4);
    }

.hs-card:nth-child(3) .hs-icon {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}

.hs-card:hover .hs-icon i {
    animation: hsWiggle 0.6s ease;
}

.hs-title {
    margin: 0 0 10px;
    color: var(--secondary-color);
    font-size: 22px;
    font-weight: 700;
}

.hs-text {
    flex: 1 1 auto;
    margin: 0 0 18px;
    color: #4d5b5c;
    font-size: 16px;
    line-height: 1.65;
}

.hs-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-dark);
    font-size: 15px;
    font-weight: 700;
}

    .hs-more i {
        transition: transform 0.25s ease;
    }

.hs-card:hover .hs-more {
    color: var(--accent-dark);
}

    .hs-card:hover .hs-more i {
        transform: translateX(5px);
    }

@keyframes hsFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes hsRing {
    0% {
        transform: scale(0.9);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

@keyframes hsWiggle {
    0%, 100% {
        transform: rotate(0);
    }

    30% {
        transform: rotate(-14deg);
    }

    60% {
        transform: rotate(10deg);
    }
}

@media (max-width: 991px) {
    .home-steps {
        padding-top: 50px;
    }

    .hs-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
        margin: 0 auto;
        gap: 20px;
    }

        .hs-grid::before {
            display: none;
        }

    .hs-card {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas: "icon title" "icon text" "icon more";
        column-gap: 18px;
        align-items: start;
        text-align: left;
        padding: 24px 22px;
    }

    .hs-icon {
        grid-area: icon;
        width: 64px;
        height: 64px;
        margin: 0;
        font-size: 26px;
    }

    .hs-title {
        grid-area: title;
        margin: 4px 0 6px;
        padding-right: 44px;
        font-size: 19px;
    }

    .hs-text {
        grid-area: text;
        margin-bottom: 10px;
        font-size: 15px;
    }

    .hs-more {
        grid-area: more;
    }
    .hs-step {
        font-size: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hs-card,
    .hs-card::after,
    .hs-more i,
    .hs-step {
        transition: none;
    }

    .hs-icon,
    .hs-icon::before,
    .hs-card:hover .hs-icon i {
        animation: none;
    }

    .hs-card:hover {
        transform: none;
    }
}

/* All Categories page (Views/Courses/Categories.cshtml) */
.cg-area {
    position: relative;
    z-index: 1;
    margin-top: -60px;
}

.cg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.cg-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 18px 18px 16px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #fff;
    color: inherit;
    box-shadow: 0 14px 32px rgba(15, 63, 66, 0.1);
    overflow: hidden;
    animation: blUp 0.55s calc(var(--cg-i, 0) * 0.05s) ease both;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .cg-card[hidden] {
        display: none;
    }

    .cg-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .cg-card:hover,
    .cg-card:focus-visible {
        transform: translateY(-5px);
        border-color: rgba(var(--primary-rgb), 0.35);
        box-shadow: 0 22px 42px rgba(15, 63, 66, 0.16);
        color: inherit;
    }

        .cg-card:hover::before,
        .cg-card:focus-visible::before {
            transform: scaleY(1);
        }

.cg-icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--primary-light);
    overflow: hidden;
    transition: transform 0.3s ease;
}

    .cg-icon img {
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

.cg-card:hover .cg-icon {
    transform: scale(1.08) rotate(-4deg);
}

.cg-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cg-name {
    color: var(--secondary-color);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.cg-count {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 600;
}

.cg-arrow {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-dark);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.cg-card:hover .cg-arrow {
    background: var(--accent-color);
    color: var(--on-accent-color);
    transform: translateX(3px);
}

.home-categories-more {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .cg-area {
        margin-top: -48px;
    }

    .cg-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cg-card,
    .cg-card::before,
    .cg-icon,
    .cg-arrow {
        animation: none;
        transition: none;
    }
}

/* Home: small "Get Started" banner before the Categories section */
.home-cta {
    position: relative;
    z-index: 2;
    padding: 20px 0 10px;
}

.hc-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 38px 44px;
    border-radius: 24px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #0B3134 0%, var(--secondary-color) 45%, var(--primary-dark) 100%);
    box-shadow: 0 24px 50px rgba(11, 49, 52, 0.25);
}

    .hc-banner .tp-blob-1 {
        width: 260px;
        height: 260px;
        right: -80px;
        top: -120px;
        border-width: 34px;
    }

    .hc-banner .tp-blob-2 {
        width: 180px;
        height: 180px;
        right: 30%;
        bottom: -120px;
    }

.hc-icon,
.hc-text,
.hc-btn {
    position: relative;
    z-index: 1;
}

.hc-icon {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--accent-color);
    font-size: 32px;
    animation: hsFloat 4s ease-in-out infinite;
}

    .hc-icon::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 2px solid rgba(var(--accent-rgb), 0.45);
        animation: hsRing 2.8s ease-out infinite;
    }

.hc-text {
    flex: 1 1 auto;
    min-width: 0;
}

.hc-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.25;
}

    .hc-title span {
        color: var(--accent-color);
    }

.hc-desc {
    margin: 0;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    line-height: 1.6;
}

.hc-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 30px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

    .hc-btn::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -60%;
        width: 40%;
        background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: htShine 3.2s ease-in-out 1s infinite;
    }

    .hc-btn i {
        transition: transform 0.25s ease;
    }

    .hc-btn:hover,
    .hc-btn:focus {
        background: #fff;
        color: var(--secondary-color);
        transform: translateY(-3px);
    }

        .hc-btn:hover i {
            transform: translateX(5px);
        }

@media (max-width: 991px) {
    .hc-banner {
        flex-wrap: wrap;
        padding: 30px 26px;
        gap: 18px 20px;
    }

    .hc-text {
        flex-basis: calc(100% - 92px);
    }

    .hc-btn {
        margin-left: 92px;
    }
}

@media (max-width: 575px) {
    .hc-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px 20px;
    }

    .hc-icon {
        flex-basis: auto;
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .hc-text {
        flex-basis: auto;
    }

    .hc-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .hc-desc {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hc-icon,
    .hc-icon::before,
    .hc-btn::after {
        animation: none;
    }

    .hc-btn,
    .hc-btn i {
        transition: none;
    }
}

/* ==========================================================================
   Home: Featured Courses (set by the admin) - after Top Trending Courses
   ========================================================================== */
.home-featured {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, var(--primary-light) 100%);
}

    .home-featured > .container {
        position: relative;
        z-index: 1;
    }

.hf-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: blFloat 12s ease-in-out infinite;
}

.hf-blob-1 {
    width: 320px;
    height: 320px;
    left: -120px;
    top: 60px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.12), rgba(var(--primary-rgb), 0) 70%);
}

.hf-blob-2 {
    width: 260px;
    height: 260px;
    right: -80px;
    bottom: 40px;
    border: 40px solid rgba(var(--accent-rgb), 0.1);
    animation-delay: -6s;
}

.hf-head {
    margin-bottom: 40px;
}

.hf-intro {
    margin: 10px auto 0;
    max-width: 640px;
    color: #4d5b5c;
    font-size: 17px;
}

.hf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.hf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 63, 66, 0.1);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

    .hf-card:not([data-sal]) {
        animation: blUp 0.6s calc(var(--hf-i, 0) * 0.1s) ease both;
    }

    .hf-card:hover,
    .hf-card:focus-within {
        transform: translateY(-8px);
        border-color: rgba(var(--primary-rgb), 0.35);
        box-shadow: 0 28px 54px rgba(15, 63, 66, 0.18);
    }

/* image */
.hf-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--primary-light);
}

    .hf-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .hf-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(11, 49, 52, 0) 45%, rgba(11, 49, 52, 0.55) 100%);
    }

    /* light sweep over the image on hover */
    .hf-media::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -70%;
        width: 45%;
        z-index: 1;
        background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-18deg);
    }

.hf-card:hover .hf-media img {
    transform: scale(1.08);
}

.hf-card:hover .hf-media::before {
    animation: htShine 0.9s ease;
}

/* priority ribbon */
.hf-ribbon {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--secondary-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.hf-high .hf-ribbon {
    background: var(--accent-color);
    color: var(--on-accent-color);
    animation: htGlow 2.6s ease-in-out infinite;
}

.hf-medium .hf-ribbon {
    background: var(--primary-color);
    color: #fff;
}

/* provider logo bubble overlapping the image */
.hf-logo {
    position: relative;
    z-index: 3;
    width: 62px;
    height: 62px;
    margin: -31px 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 16px;
    background: #fff;
    color: var(--primary-color);
    font-size: 24px;
    box-shadow: 0 10px 24px rgba(15, 63, 66, 0.18);
    transition: transform 0.35s ease;
}

    .hf-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 4px;
    }

.hf-card:hover .hf-logo {
    transform: translateY(-4px) rotate(-4deg);
}

.hf-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 14px 22px 22px;
}

.hf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.hf-code {
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.hf-cat {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 600;
}

.hf-title {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.35;
}

    .hf-title a {
        color: var(--secondary-color);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

        .hf-title a:hover {
            color: var(--primary-color);
        }

.hf-provider {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 600;
}

.hf-about {
    margin: 0 0 16px;
    color: #4d5b5c;
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hf-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 18px;
}

    .hf-facts span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: #fbfdfd;
        color: var(--secondary-color);
        font-size: 13px;
        font-weight: 600;
    }

        .hf-facts span i {
            color: var(--primary-color);
        }

/* View course: same look and hover as the trending "Find a provider" button (.ht-btn) */
.hf-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 22px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.3);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    /* light shine across the button on hover */
    .hf-btn::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -60%;
        width: 40%;
        background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
    }

    .hf-btn:hover,
    .hf-btn:focus {
        background: var(--accent-color);
        color: var(--on-accent-color);
        transform: translateY(-2px);
    }

        .hf-btn:hover::after {
            animation: htShine 0.8s ease;
        }

    .hf-btn i {
        transition: transform 0.25s ease;
    }

    .hf-btn:hover i {
        transform: translateX(5px);
    }

@media (max-width: 1199px) {
    .hf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .hf-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .hf-intro {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hf-blob,
    .hf-card:not([data-sal]),
    .hf-high .hf-ribbon,
    .hf-card:hover .hf-media::before {
        animation: none;
    }

    .hf-card,
    .hf-media img,
    .hf-logo,
    .hf-btn,
    .hf-btn i {
        transition: none;
    }

    .hf-card:hover,
    .hf-card:hover .hf-media img,
    .hf-card:hover .hf-logo {
        transform: none;
    }
}

/* Header search (desktop): round search button inside the rounded bar */
.ch-header-search .search-field .serach-btn {
    top: 50%;
    right: 4px;
    width: 37px;
    height: 37px;
    min-width: 37px;
    padding: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .ch-header-search .search-field .serach-btn::after {
        border-radius: 50%;
    }

    .ch-header-search .search-field .serach-btn:hover {
        transform: translateY(-50%) scale(1.06);
    }

.ch-header-search .search-field input {
    padding-right: 52px;
}

/* Home categories use the All Categories boxes (.cg-card); 4 per row on wide screens */
.home-cg-grid {
    margin-top: 30px;
}

@media (min-width: 1200px) {
    .home-cg-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Home blogs: same dark banner background as Top Trending Course */
.home-blogs {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0B3134 0%, var(--secondary-color) 45%, var(--primary-dark) 100%);
}

    .home-blogs > .container {
        position: relative;
        z-index: 1;
    }

/* All Courses: category tabs as rounded pills */
.ac-tabs-row .filter-tab-button button {
    border-radius: 999px;
    padding: 0 28px;
}

    .ac-tabs-row .filter-tab-button button.active {
        box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.28);
    }

/* Featured Courses page (Views/Courses/FeaturedCourses.cshtml) */
.fc-area {
    position: relative;
    z-index: 1;
    margin-top: -60px;
}

    .fc-area .hf-card {
        box-shadow: 0 18px 40px rgba(15, 63, 66, 0.14);
    }

.home-featured .home-categories-more {
    margin-top: 44px;
}

@media (max-width: 767px) {
    .fc-area {
        margin-top: -48px;
    }
}

/* ==========================================================================
   All Reviews page (Views/Courses/Reviews.cshtml): masonry of review cards
   ========================================================================== */
.rv-area {
    position: relative;
    z-index: 1;
    margin-top: -40px;
}

.rv-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 52px 26px;
    padding-top: 26px;
}

.rv-card {
    display: flex;
    width: 100%;
    height: auto;
    margin: 0;
    animation: blUp 0.6s calc(var(--rv-i, 0) * 0.07s) cubic-bezier(0.22, 1, 0.36, 1) both;
}

    .rv-card[hidden] {
        display: none;
    }

    /* long course names wrap instead of being cut off */
    .rv-card .hr-course {
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* full review text on this page */
    .rv-card .hr-text {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    /* alternate the quote badge colour for some variety */
    .rv-card:nth-child(3n+2) .hr-quote {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.35);
    }

    .rv-card:nth-child(3n) .hr-quote {
        background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
        box-shadow: 0 10px 22px rgba(15, 63, 66, 0.3);
    }

.home-reviews .home-categories-more {
    margin-top: 40px;
}

@media (max-width: 1199px) {
    .rv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .rv-area {
        margin-top: -30px;
    }

    .rv-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rv-card {
        animation: none;
    }
}

/* ==========================================================================
   Newsletter: footer form messages + unsubscribe page
   ========================================================================== */
.nl-visually-hidden,
.nl-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.js-newsletter-form {
    position: relative;
}

    .js-newsletter-form.nl-invalid input[name="email"] {
        border-color: #d64545 !important;
        box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12);
    }

    /* keep the button centred in the field while it is disabled (".rbt-btn:disabled" removes transforms) */
    .newsletter-form-1 .rbt-btn:disabled,
    .newsletter-form-1 .rbt-btn.disabled {
        transform: translateY(-50%);
        opacity: 1 !important;
    }

    /* busy: same size button, label hidden, small spinner in its place */
    .js-newsletter-form.nl-busy button {
        cursor: progress;
        opacity: 1;
    }

        .js-newsletter-form.nl-busy button span {
            visibility: hidden;
        }

        .js-newsletter-form.nl-busy button::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            margin: -10px 0 0 -10px;
            border: 2.5px solid rgba(11, 59, 58, 0.25);
            border-top-color: var(--on-accent-color);
            border-radius: 50%;
            animation: chSpin 0.8s linear infinite;
            z-index: 2;
        }

.nl-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    animation: blUp 0.35s ease both;
}

    .nl-message[hidden] {
        display: none;
    }

.nl-success {
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
}

.nl-info {
    background: #fff7ef;
    color: #9a4d12;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
}

.nl-error {
    background: #fdf1f1;
    color: #b42318;
    border: 1px solid #f3c7c3;
}

/* unsubscribe page */
.nl-hero {
    padding-bottom: 100px;
}

.nl-area {
    position: relative;
    z-index: 1;
    margin-top: -60px;
}

.nl-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 38px 34px 32px;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: #fff;
    text-align: center;
    box-shadow: 0 20px 44px rgba(15, 63, 66, 0.14);
    animation: blUp 0.6s ease both;
}

    .nl-card h2 {
        margin: 0 0 10px;
        color: var(--secondary-color);
        font-size: 26px;
    }

    .nl-card p {
        margin: 0 0 10px;
        color: #4d5b5c;
        font-size: 16px;
    }

.nl-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border-radius: 50%;
    font-size: 32px;
}

    .nl-card-icon.is-done {
        background: var(--primary-light);
        color: var(--primary-color);
    }

    .nl-card-icon.is-error {
        background: #fff1e6;
        color: var(--accent-dark);
    }

.nl-card-note {
    font-size: 14px !important;
    color: #6b8585 !important;
}

.nl-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 22px;
    margin-top: 22px;
}

.nl-link {
    color: var(--primary-dark);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .nl-message,
    .nl-card {
        animation: none;
    }
}

/* Home blogs: "View All Blogs" uses the same .bl-btn style as "View All Categories" */
.home-blogs-more {
    position: relative;
    z-index: 1;
    margin-top: 40px;
}

/* Home blog cards: "View Blog" uses the Find a provider / View course button (.hf-btn) */
.home-blogs .read-more-btn .hb-view-btn {
    width: 100%;
    color: #fff;
}

    .home-blogs .read-more-btn .hb-view-btn:hover,
    .home-blogs .read-more-btn .hb-view-btn:focus {
        color: var(--on-accent-color);
    }

/* Header right side: account icon, Join For Free and the "Find your course" (3-line) button on one centre line */
.rbt-header-sec .rbt-header-right .rbt-header-content {
    align-items: center;
}

    .rbt-header-sec .rbt-header-right .rbt-header-content > .header-info {
        display: flex;
        align-items: center;
    }

        .rbt-header-sec .rbt-header-right .rbt-header-content > .header-info .rbt-switch-btn,
        .rbt-header-sec .rbt-header-right .rbt-header-content > .header-info .fd-open-btn {
            vertical-align: middle;
        }

/* Home blog cards: rounded corners (card and image) */
.home-blogs .rbt-card.event-grid-card {
    border-radius: 18px;
    overflow: hidden;
}

    .home-blogs .rbt-card.event-grid-card .rbt-card-img,
    .home-blogs .rbt-card.event-grid-card .rbt-card-img a,
    .home-blogs .rbt-card.event-grid-card .rbt-card-img a img {
        border-radius: 12px;
    }

/* Home blogs: "View All Blogs" orange, teal (green) on hover */
.home-blogs-more .bl-btn {
    background: var(--accent-color);
    color: var(--on-accent-color);
    box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.35);
}

    .home-blogs-more .bl-btn:hover,
    .home-blogs-more .bl-btn:focus {
        background: var(--primary-color);
        color: #fff;
        box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.35);
    }

/* All Courses sidebar: show every filter group in full (no fixed height / inner scroll);
   the panel scrolls with the page instead of being cut off at the screen height */
@media (min-width: 992px) {
    .course-filter-sidebar {
        position: static;
    }

    .course-filter-panel {
        max-height: none;
        overflow: visible;
    }

    .course-filter-head {
        position: static;
    }
}

.course-filter-list {
    max-height: none;
    overflow: visible;
}

/* Home blogs heading: same layout/fonts as "Hand-picked courses for you", coloured for the dark background */
.hb-head {
    position: relative;
    z-index: 1;
}

    .hb-head .subtitle {
        background: rgba(255, 255, 255, 0.12) !important;
        color: var(--accent-color) !important;
        border: 1px solid rgba(255, 255, 255, 0.18);
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .hb-head .title {
        color: #fff;
    }

.hb-accent {
    color: var(--accent-color);
}

.hb-head .hf-intro {
    color: rgba(255, 255, 255, 0.78);
}

/* blog card text uses the featured card fonts */
.home-blogs .rbt-card.event-grid-card .hf-provider {
    margin: 0 0 8px;
}

.home-blogs .rbt-card.event-grid-card .rbt-card-body .hf-title {
    margin: 0 0 16px;
    font-size: 19px;
    line-height: 1.35;
    min-height: calc(2 * 1.35em);
}

    .home-blogs .rbt-card.event-grid-card .rbt-card-body .hf-title a {
        color: var(--secondary-color);
    }

        .home-blogs .rbt-card.event-grid-card .rbt-card-body .hf-title a:hover {
            color: var(--primary-color);
        }

/* Course details: "More Courses by <provider>" uses the featured course card */
.cd-more-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 30px;
}

    .cd-more-head .section-title {
        margin: 0;
    }

        .cd-more-head .section-title .title {
            margin: 10px 0 0;
        }

.cd-more-all {
    flex: 0 0 auto;
}

.cd-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 767px) {
    .cd-more-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Course details sidebar ("Course at a glance") - animated
   ========================================================================== */
.cd-page .course-sidebar.rbt-gradient-border {
    overflow: hidden;
    animation: cdSideIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

    /* moving brand bar along the top edge */
    .cd-page .course-sidebar.rbt-gradient-border::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        z-index: 3;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--primary-color));
        background-size: 200% 100%;
        animation: cdBar 4s linear infinite;
    }

/* light sweep over the image on hover */
.cd-page .cd-sidebar-thumb::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 45%;
    z-index: 1;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
}

.cd-page .cd-sidebar-thumb:hover::before {
    animation: htShine 0.9s ease;
}

.cd-page .cd-sidebar-tag {
    z-index: 2;
    animation: htGlow 2.8s ease-in-out infinite;
}

/* heading with icon and a growing underline */
.cd-page .cd-glance-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
}

    .cd-page .cd-glance-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 56px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        transform-origin: left;
        animation: cdLine 0.9s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

.cd-glance-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 16px;
}

/* Connect To Training Provider: Find-a-provider style + gentle glow */
.cd-page .course-sidebar .cd-connect {
    width: 100%;
    margin-top: 6px;
    animation: cdGlow 2.6s ease-in-out 1s infinite;
}

    .cd-page .course-sidebar .cd-connect:hover,
    .cd-page .course-sidebar .cd-connect:focus {
        animation: none;
    }

    .cd-page .course-sidebar .cd-connect i {
        transition: transform 0.25s ease;
    }

    .cd-page .course-sidebar .cd-connect:hover i {
        transform: translateX(3px) rotate(-12deg);
    }

/* detail rows slide in one by one and highlight on hover */
.cd-page .rbt-course-details-list-wrapper li {
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    animation: cdRow 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

    .cd-page .rbt-course-details-list-wrapper li:nth-child(1) { animation-delay: 0.30s; }
    .cd-page .rbt-course-details-list-wrapper li:nth-child(2) { animation-delay: 0.38s; }
    .cd-page .rbt-course-details-list-wrapper li:nth-child(3) { animation-delay: 0.46s; }
    .cd-page .rbt-course-details-list-wrapper li:nth-child(4) { animation-delay: 0.54s; }
    .cd-page .rbt-course-details-list-wrapper li:nth-child(5) { animation-delay: 0.62s; }
    .cd-page .rbt-course-details-list-wrapper li:nth-child(6) { animation-delay: 0.70s; }

    .cd-page .rbt-course-details-list-wrapper li:hover {
        background: var(--primary-light);
        transform: translateX(4px);
    }

        .cd-page .rbt-course-details-list-wrapper li > span:first-child i {
            transition: transform 0.4s ease, background-color 0.25s ease, color 0.25s ease;
        }

        .cd-page .rbt-course-details-list-wrapper li:hover > span:first-child i {
            transform: rotate(360deg);
            background: var(--primary-color);
            color: #fff;
        }

@keyframes cdSideIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cdBar {
    to {
        background-position: 200% 0;
    }
}

@keyframes cdLine {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes cdRow {
    from {
        opacity: 0;
        transform: translateX(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cdGlow {
    0%, 100% {
        box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.3), 0 0 0 0 rgba(var(--primary-rgb), 0.35);
    }

    50% {
        box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.3), 0 0 0 8px rgba(var(--primary-rgb), 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cd-page .course-sidebar.rbt-gradient-border,
    .cd-page .course-sidebar.rbt-gradient-border::after,
    .cd-page .cd-sidebar-tag,
    .cd-page .cd-sidebar-thumb:hover::before,
    .cd-page .cd-glance-title::after,
    .cd-page .course-sidebar .cd-connect,
    .cd-page .rbt-course-details-list-wrapper li {
        animation: none;
    }

    .cd-page .rbt-course-details-list-wrapper li,
    .cd-page .rbt-course-details-list-wrapper li > span:first-child i {
        transition: none;
    }

        .cd-page .rbt-course-details-list-wrapper li:hover,
        .cd-page .rbt-course-details-list-wrapper li:hover > span:first-child i {
            transform: none;
        }
}

/* space between the Connect button and the detail rows */
.cd-page .course-sidebar .rbt-widget-details {
    margin-top: 14px;
}

/* one dashed divider between rows (the template also adds a solid top border) */
.cd-page .course-sidebar .rbt-course-details-list-wrapper li {
    border-top: 0;
}

/* Home trending: "View All Trending Courses" orange on the dark background, teal on hover */
.home-trending-more {
    position: relative;
    z-index: 1;
    margin-top: 40px;
}

    .home-trending-more .bl-btn {
        background: var(--accent-color);
        color: var(--on-accent-color);
        box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.35);
    }

        .home-trending-more .bl-btn:hover,
        .home-trending-more .bl-btn:focus {
            background: var(--primary-color);
            color: #fff;
            box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.35);
        }

/* ==========================================================================
   Trending Courses page (Views/Courses/TrendingCourses.cshtml) - logo-based design
   ========================================================================== */
.trc-hero {
    padding-bottom: 110px;
}

.trc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: center;
    gap: 40px;
}

.trc-accent {
    color: var(--accent-color);
}

/* CoursesHub logo badge with two spinning rings */
.trc-logo-badge {
    position: relative;
    width: 260px;
    height: 260px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trc-logo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px dashed rgba(var(--accent-rgb), 0.55);
    animation: chSpin 22s linear infinite;
}

.trc-logo-ring-2 {
    inset: 26px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--primary-color);
    border-right-color: var(--accent-color);
    animation-duration: 6s;
    animation-direction: reverse;
}

.trc-logo-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 170px;
    padding: 22px 18px 18px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.25);
    animation: hsFloat 4.5s ease-in-out infinite;
}

    .trc-logo-card img {
        width: 130px;
        height: auto;
    }

.trc-logo-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    font-size: 12px;
    font-weight: 700;
    animation: htGlow 2.6s ease-in-out infinite;
}

/* small floating sparkles in brand colours */
.trc-spark {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    animation: hsFloat 5s ease-in-out infinite;
}

.trc-spark-1 { left: 8%; top: 22%; background: rgba(var(--accent-rgb), 0.7); }
.trc-spark-2 { left: 46%; bottom: 18%; width: 8px; height: 8px; background: rgba(255, 255, 255, 0.45); animation-delay: -1.6s; }
.trc-spark-3 { right: 34%; top: 14%; width: 10px; height: 10px; background: rgba(var(--primary-rgb), 0.9); animation-delay: -3s; }

/* card list: same cards as the home section, sliding in one after another */
.trc-area {
    position: relative;
    z-index: 1;
    margin-top: -60px;
}

.trc-list .ht-card {
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 40px rgba(15, 63, 66, 0.12);
    animation: blUp 0.6s calc(var(--ht-i, 0) * 0.08s) cubic-bezier(0.22, 1, 0.36, 1) both;
}

    .trc-list .ht-card[hidden] {
        display: none;
    }

@media (max-width: 991px) {
    .trc-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .trc-logo-badge {
        display: none;
    }
}

@media (max-width: 767px) {
    .trc-hero {
        padding-bottom: 90px;
    }

    .trc-area {
        margin-top: -48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trc-logo-ring,
    .trc-logo-card,
    .trc-logo-tag,
    .trc-spark,
    .trc-list .ht-card {
        animation: none;
    }
}

/* All Courses sidebar: rounded panel (header and last group follow the corners) */
.course-filter-panel {
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(var(--primary-rgb), 0.1);
}

    .course-filter-panel .course-filter-head {
        border-radius: 21px 21px 0 0;
    }

    .course-filter-panel .course-filter-group:last-of-type {
        border-radius: 0 0 21px 21px;
    }

.course-filter-toggle {
    border-radius: 999px;
}

/* Course card images: show the whole photo (course photos are mostly square); blurred copy fills the sides */
.hf-media {
    aspect-ratio: 4 / 3;
}

    .hf-media::after {
        display: none;
    }

    .hf-media img {
        position: relative;
        z-index: 1;
        object-fit: contain;
    }

.hf-media-bg {
    position: absolute;
    inset: -14px;
    background-position: center;
    background-size: cover;
    filter: blur(14px) saturate(1.05);
    opacity: 0.55;
}

.hf-card:hover .hf-media img {
    transform: scale(1.04);
}

/* Home blog cards: the box matches the banner shape (about 1600 x 949), and the whole image is shown */
.home-blogs .rbt-card.event-grid-card .rbt-card-img a {
    display: block;
    background: var(--primary-light);
    overflow: hidden;
}

    .home-blogs .rbt-card.event-grid-card .rbt-card-img a img {
        aspect-ratio: 1600 / 949;
        object-fit: contain;
    }

/* All Courses cards: show the whole photo (no cropping); a blurred copy fills the space around it */
.ac-card-img img {
    position: relative;
    z-index: 1;
    object-fit: contain;
}

.ac-card-img-bg {
    position: absolute;
    inset: -14px;
    background-position: center;
    background-size: cover;
    filter: blur(14px) saturate(1.05);
    opacity: 0.55;
}

.ac-card:hover .ac-card-img img {
    transform: scale(1.03);
}