/*
 * Light / dark mode, modelled on knowledgehubnepal.com (skillwave): a floating Dark | Light switcher,
 * saved in localStorage ("khn-theme") and applied before first paint as html[data-theme].
 * Light is the default; everything below html[data-theme="dark"] only applies in dark mode.
 */

/* ======================= switcher ======================= */
.khn-theme-switcher {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 60px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--khn-glass-border);
    box-shadow: var(--khn-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.khn-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 0;
    border-radius: 40px;
    background: transparent;
    color: var(--khn-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

.khn-theme-btn i {
    font-size: 12px;
}

.khn-theme-btn.active {
    background: var(--khn-primary);
    color: #06091b; /* logo navy-black: white is unreadable on gold */
    box-shadow: 0 4px 14px rgba(224, 165, 20, .45);
}

.khn-switcher-divider {
    width: 1px;
    height: 16px;
    background: var(--khn-border);
}

/* ======================= gold surfaces (both themes) ======================= */
/* white text on the logo-gold gradient gets the same soft shadow as the metallic header button */
.theme-btn2,
.about-experience,
.hs-3 .hero-single .hero-content .hero-sub-title,
.sponsor-apply-btn,
.job-meta .badge {
    text-shadow: 0 1px 2px rgba(60, 30, 0, .45);
}

/* the hero, page banners and some sections used peach pastel images made for the old orange brand:
   replace them with a soft logo-coloured wash (dark mode swaps them again further down) */
.hero-single,
.site-breadcrumb {
    background: radial-gradient(circle at 85% 15%, rgba(243, 188, 30, .2), transparent 45%),
        radial-gradient(circle at 8% 85%, rgba(13, 78, 205, .12), transparent 50%),
        #f7f9fe !important;
}

.bg-img {
    background-image: radial-gradient(circle at 90% 10%, rgba(243, 188, 30, .14), transparent 40%),
        radial-gradient(circle at 5% 95%, rgba(13, 78, 205, .08), transparent 45%);
}

.course-item[style*="background-image"] {
    background: #f7f9fe !important;
}

/* ======================= section labels (.site-title-tagline) ======================= */
/* a light pill with a blue-to-gold gradient border, small letter-spaced caps and a bare gold icon
   (replaces the old solid blue pill with the icon in a white circle) */
.site-heading .site-title-tagline {
    --tagline-fill: #f2f6fe;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 7px 18px 7px 14px;
    border: 1.5px solid transparent;
    border-radius: 50px;
    background: linear-gradient(var(--tagline-fill), var(--tagline-fill)) padding-box,
        linear-gradient(90deg, #0d4ecd, #e0a514) border-box;
    box-shadow: 0 6px 18px rgba(13, 78, 205, .08);
    color: var(--color-dark);
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* short gold line before the icon */
.site-heading .site-title-tagline::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #e0a514);
}

.site-heading .site-title-tagline i {
    width: auto;
    height: auto;
    margin: 0;
    background: none !important;
    color: #e0a514;
    font-size: 15px;
    line-height: 1;
}

/* .light labels sat on dark backgrounds in the old theme */
.site-heading .site-title-tagline.light {
    --tagline-fill: rgba(255, 255, 255, .08);
    color: #fff;
}

html[data-theme="dark"] .site-heading .site-title-tagline {
    --tagline-fill: #121212;
    background: linear-gradient(var(--tagline-fill), var(--tagline-fill)) padding-box,
        linear-gradient(90deg, #4d8fff, #f3bc1e) border-box;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    color: #fff;
}

html[data-theme="dark"] .site-heading .site-title-tagline i {
    color: #f3bc1e;
}

/* no vertical motion anywhere: scroll reveals that slid up or down now just fade in */
.fadeInUp,
.fadeInDown {
    -webkit-animation-name: fadeIn !important;
    animation-name: fadeIn !important;
}

/* smooth colour swap when the theme changes */
html.khn-theme-anim body,
html.khn-theme-anim body * {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}

/* ======================= dark tokens ======================= */
html[data-theme="dark"] {
    color-scheme: dark;

    --dk-bg: #000000;
    --dk-bg-soft: #0b0b0b;
    --dk-surface: #161616;
    --dk-surface-2: #1f1f1f;
    --dk-border: rgba(255, 255, 255, .1);

    /* old theme (style.css) */
    --theme-color: #2f7df6;
    --theme-color2: #f3bc1e;
    --theme-color2-text: #f3bc1e;
    --theme-bg-light: var(--dk-bg-soft);
    --body-text-color: #c9d1db;
    --color-dark: #ffffff;
    --color-gray: #2a2a2a;
    --color-skyblue: #4d8fff;
    --color-red: #6aa8ff; /* despite the name, an accent blue used for plan prices and badges */
    --border-info-color: rgba(255, 255, 255, .1);
    --border-info-color2: rgba(255, 255, 255, .06);
    --box-shadow: 0 0 40px 5px rgba(0, 0, 0, .5);
    --box-shadow2: 0 0 15px rgba(0, 0, 0, .6);
    --box-shadow3: 0 0 40px 5px rgba(0, 0, 0, .5);
    --gradient: linear-gradient(to bottom right, #1a5fd6 0%, #06256f 100%);
    --gradient3: linear-gradient(90deg, #4d8fff 5%, #9bc4ed 40%, #f3bc1e 75%, #f5d65f 100%); /* gradient headline text */

    /* header (header.css) */
    --khn-surface: #121212;
    --khn-heading: #ffffff;
    --khn-text: #c9d1db;
    --khn-muted: #9aa3ad;
    --khn-border: rgba(255, 255, 255, .1);
    --khn-shadow: 0 16px 44px rgba(0, 0, 0, .5);
    --khn-glass: rgba(255, 255, 255, .06);
    --khn-glass-border: rgba(243, 188, 30, .25);
    --khn-primary-soft: rgba(243, 188, 30, .16);
    --khn-primary: #f3bc1e;
    --khn-primary-text: #f3bc1e;
    --khn-navy: rgba(255, 255, 255, .7);

    /* bootstrap */
    --bs-body-bg: var(--dk-bg);
    --bs-body-color: var(--body-text-color);
}

html[data-theme="dark"] body {
    background-color: var(--dk-bg);
    color: var(--body-text-color);
}

/* ======================= header + switcher ======================= */
html[data-theme="dark"] .khn-header.is-scrolled {
    background: rgba(12, 12, 12, .92);
}

html[data-theme="dark"] .khn-btn--outline:hover {
    background: var(--khn-primary);
    border-color: var(--khn-primary);
}

html[data-theme="dark"] .khn-theme-switcher {
    background: rgba(20, 20, 20, .85);
}

/* ======================= image backgrounds ======================= */
/* the hero, breadcrumb banners and plan cards use pastel images (set inline): swap them for a dark glow */
html[data-theme="dark"] .hero-single,
html[data-theme="dark"] .site-breadcrumb {
    background: radial-gradient(circle at 85% 15%, rgba(243, 188, 30, .16), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(13, 78, 205, .28), transparent 50%),
        var(--dk-bg) !important;
}

html[data-theme="dark"] .bg-img {
    background-image: radial-gradient(circle at 90% 10%, rgba(243, 188, 30, .1), transparent 40%),
        radial-gradient(circle at 5% 95%, rgba(13, 78, 205, .2), transparent 45%);
}

html[data-theme="dark"] .course-item[style*="background-image"] {
    background: var(--dk-surface) !important;
}

/* pastel overlays drawn with ::before on cards and panels */
html[data-theme="dark"] .counter-wrap::before,
html[data-theme="dark"] .contact-info::before,
html[data-theme="dark"] .ts-bg::before,
html[data-theme="dark"] .choose-item::before,
html[data-theme="dark"] .cta-wrap::before,
html[data-theme="dark"] .pricing-item::before,
html[data-theme="dark"] .course-area.bg-img::before,
html[data-theme="dark"] .download-wrap::before {
    background-image: none;
}

/* WhatsApp "chat with us" bubble */
html[data-theme="dark"] .tooltiptext {
    background: var(--dk-surface-2) !important;
    color: #fff !important;
}

/* ======================= cards, forms, tables (bootstrap) ======================= */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--dk-surface) !important;
    color: var(--body-text-color);
    border-color: var(--dk-border);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
    background-color: var(--dk-surface-2);
    border-color: var(--dk-border);
    color: #fff;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #8a929c;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black {
    color: #fff !important;
}

html[data-theme="dark"] .text-muted {
    color: #9aa3ad !important;
}

/* ======================= old theme: light backgrounds ======================= */
/* generated from style.css: every rule there that paints a white / light-grey background */
html[data-theme="dark"] .form-group .form-control,
html[data-theme="dark"] .form-group .form-select {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .site-heading .site-title-tagline.light {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .site-heading .site-title-tagline i {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .site-heading .heading-divider::after {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .navbar.fixed-top {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .hero-slider .owl-nav button i {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .hero-slider .owl-dots .owl-dot span {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .hero-info-wrap .hero-avatar-group {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .hero-info-wrap .hero-course-info {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .hs-3 .hero-slider .owl-nav button:hover i {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .about-content .about-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .feature-content {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .why-us-area .counter-box {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .contact-form {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .coming-countdown .time {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .faq-area .accordion-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .team-social-btn {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .team-social a {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .testimonial-item .content {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .partner-area2 .partner-wrapper {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .choose-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .cta-wrap {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .pricing-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .blog-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .blog-date {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .blog-sidebar .widget .tag-list a {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .auth-form {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .process-item .content {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .footer-social li a i {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .footer-newsletter .newsletter-form .theme-btn::before {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .footer-area.light {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .category-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .category-item .content {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .category-item .icon {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-single-tab .course-curriculum .accordion-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-single-tab .course-curriculum .curriculum-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-single-tab .course-instructor {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-single-tab .course-review .review-rating {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-single-tab .course-review .review-rating .rating-count {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-single-tab .course-review .review-content {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-single-tab .course-review .review-form {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-single-sidebar {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-single.cs-2 .course-single-header {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-single.cs-2 .course-details {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .instructor-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .instructor-sidebar {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .instructor-single .instructor-details .nav {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .instructor-single .instructor-details .review-rating {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .instructor-single .instructor-details .review-rating .rating-count {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .instructor-single .instructor-details .review-content {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .instructor-single .instructor-details .review-form {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .instructor-single .instructor-info-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .become-instructor-cta-wrapper a {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .mail-success-content {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .invoice-wrapper {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .career-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .career-promo-single {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .job-single-info {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .event-item {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .event-single-info {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .event-author {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .user-sidebar {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .user-card {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .user-message .message-item.me .message-description {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .user-payment-method .user-table .img {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .course-resume .course-resume-sidebar {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .topics i {
    background-color: var(--dk-surface);
}

@media all and (max-width: 767px) {
    html[data-theme="dark"] .blog-single .blog-comment-item {
        background-color: var(--dk-surface);
    }
}