/* ==========================================================================
   NGILANDI AGENCIES - LIGHT THEME / BRAND LAYER
   --------------------------------------------------------------------------
   Loads after style.css + custom-header.css.
   Activates the template's built-in `.active-light-mode` surface set and
   re-skins it into the Ngilandi corporate identity:
       Navy  #2C3691  (dominant)
       Red   #ED1F24  (accent only)
   Nothing here changes layout, structure or behaviour - only colour,
   surface, border, shadow and image treatment.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
body.active-light-mode {
    /* --- Brand ------------------------------------------------------- */
    --nga-navy: #2C3691;
    --nga-navy-600: #232C7A;
    --nga-navy-700: #1B2262;
    --nga-navy-900: #131A4A;
    --nga-navy-400: #5A63B5;
    --nga-navy-200: #B9BEE2;
    --nga-navy-50: #EEF0FA;
    --nga-navy-25: #F5F7FC;

    --nga-red: #ED1F24;
    --nga-red-600: #C8161B;
    --nga-red-50: #FDEEEE;

    /* --- Ink / neutrals ---------------------------------------------- */
    --nga-ink: #101632;
    --nga-ink-700: #2B3352;
    --nga-ink-500: #4B5474;
    --nga-ink-400: #6C7593;
    --nga-ink-300: #8B93AD;

    --nga-surface: #FFFFFF;
    --nga-surface-2: #F6F8FC;
    --nga-surface-3: #EEF1F8;
    --nga-line: #E3E8F2;
    --nga-line-strong: #D0D7E8;

    /* --- Elevation ---------------------------------------------------- */
    --nga-shadow-xs: 0 1px 2px rgba(16, 22, 50, .05);
    --nga-shadow-sm: 0 1px 2px rgba(16, 22, 50, .04), 0 4px 12px rgba(16, 22, 50, .05);
    --nga-shadow-md: 0 1px 2px rgba(16, 22, 50, .04), 0 10px 28px rgba(16, 22, 50, .07);
    --nga-shadow-lg: 0 2px 4px rgba(16, 22, 50, .05), 0 20px 44px rgba(44, 54, 145, .13);
    --nga-shadow-header: 0 1px 0 rgba(16, 22, 50, .06), 0 8px 28px rgba(16, 22, 50, .07);

    /* --- Template variable remap -------------------------------------- */
    --color-primary: var(--nga-navy);
    --color-primary-alt: var(--nga-navy-400);
    --color-secondary: var(--nga-red);
    --color-secondary-alt: var(--nga-red-600);
    --color-tertiary: var(--nga-navy-400);
    --color-tertiary-alt: var(--nga-navy-200);

    --color-heading: var(--nga-ink);
    --color-heading-1: var(--nga-ink-500);
    --color-body: var(--nga-ink-500);
    /* template token that means "prominent text" once light mode is on */
    --color-white: var(--nga-ink);
    --color-card: var(--nga-surface);
    --color-lessdark: var(--nga-surface-2);
    --color-dark: var(--nga-navy-900);
    --color-dark-alt: var(--nga-surface-2);
    --color-darker: var(--nga-surface-2);
    --color-darkest: var(--nga-surface);
    --color-blackest: var(--nga-navy);
    --color-black: var(--nga-ink);
    --color-bg-alt: var(--nga-surface-2);
    --color-bg-2: var(--nga-surface-2);
    --color-grey: var(--nga-line);
    --color-gray: var(--nga-ink-400);

    --color-border: var(--nga-line);
    --color-border-2: var(--nga-line);
    --color-border-3: var(--nga-line-strong);

    --color-primary-opacity-1: rgba(44, 54, 145, .07);
    --color-primary-opacity-2: rgba(44, 54, 145, .14);
    --primary-opacity: rgba(44, 54, 145, .08);
    --secondary-opacity: rgba(237, 31, 36, .08);
    --heading-opacity-2: rgba(16, 22, 50, .32);
    --heading-opacity: rgba(16, 22, 50, .32);
    --color-white-off: rgba(16, 22, 50, .68);
    --white-opacity: rgba(16, 22, 50, .06);
    --black-opacity: rgba(16, 22, 50, .04);

    /* --- Geometry ----------------------------------------------------- */
    --radius: 10px;
    --radius-small: 8px;
    --radius-10: 12px;
    --radius-big: 18px;
    --border-width: 1px;

    /* --- Shadow tokens consumed by the template ----------------------- */
    --shadow-primary: var(--nga-shadow-sm);
    --shadow-light: none;
    --shadow-lighter: var(--nga-shadow-sm);
    --shadow-dark: var(--nga-shadow-md);
    --shadow-1: var(--nga-shadow-md);
    --shadow-2: var(--nga-shadow-md);
    --shadow-3: var(--nga-shadow-md);
    --shadow-5: var(--nga-shadow-lg);
    --shadow-7: 0 12px 28px rgba(44, 54, 145, .28);
    --shadow-8: var(--nga-shadow-md);
    --shadow-9: var(--nga-shadow-sm);
    --shadow-10: var(--nga-shadow-xs);
    --shadow-11: var(--nga-shadow-xs);
    --shadow-slide-item: var(--nga-shadow-sm);

    /* --- Gradients ---------------------------------------------------- */
    --gradient-1: linear-gradient(90deg, var(--nga-navy) 0%, var(--nga-navy-400) 100%);
    --gradient-2: radial-gradient(circle, rgba(44, 54, 145, .10), rgba(44, 54, 145, .02));
    --gradient-3: linear-gradient(90deg, var(--nga-navy) 0%, var(--nga-navy-400) 100%);
    --gradient-4: linear-gradient(180deg, #fff, var(--nga-surface-2));
    --gradient-5: linear-gradient(var(--nga-navy-50) 0%, var(--nga-navy-50) 100%);
    --gradient-7: linear-gradient(218deg, var(--nga-navy-400) 0%, var(--nga-navy) 100%);
    --gradient-8: linear-gradient(270deg, var(--nga-navy-400) 0%, var(--nga-navy) 100%);
    --gradient-9: linear-gradient(to right, rgba(44, 54, 145, .06), rgba(44, 54, 145, .02));
}


/* ==========================================================================
   2. PAGE BASE & TYPOGRAPHY
   ========================================================================== */
body.active-light-mode {
    background: var(--nga-surface);
    color: var(--nga-ink-500);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The dark build laid a purple noise film over the whole page. */
body.active-light-mode::before {
    display: none !important;
}

/* The service-detail pages opt out of `overflow-x: hidden` so their sticky
   sidebars keep working, which let the decorative oversized type in the search
   overlay push out a horizontal scrollbar. `clip` trims the overflow without
   creating a scroll container, so position: sticky survives. */
body.active-light-mode.overflow-x-visible,
body.active-light-mode.overflow-visible {
    overflow-x: clip;
}

body.active-light-mode h1,
body.active-light-mode h2,
body.active-light-mode h3,
body.active-light-mode h4,
body.active-light-mode h5,
body.active-light-mode h6,
body.active-light-mode .title {
    color: var(--nga-ink);
    letter-spacing: -0.015em;
}

body.active-light-mode h1,
body.active-light-mode h2 {
    letter-spacing: -0.022em;
}

body.active-light-mode p,
body.active-light-mode li,
body.active-light-mode .description,
body.active-light-mode .discription,
body.active-light-mode .desc {
    color: var(--nga-ink-500);
}

body.active-light-mode a {
    color: var(--nga-navy);
}

body.active-light-mode a:hover {
    color: var(--nga-navy-600);
}

body.active-light-mode hr {
    border-top: 1px solid var(--nga-line);
    opacity: 1;
}

/* Highlighted words inside headings - navy, so they read against near-black ink */
body.active-light-mode .theme-gradient {
    background: linear-gradient(95deg, var(--nga-navy) 0%, var(--nga-navy-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--nga-navy);
}

body.active-light-mode ::selection {
    background: var(--nga-navy);
    color: #fff;
}

body.active-light-mode .text-primary,
body.active-light-mode .color-primary {
    color: var(--nga-navy) !important;
}

/* Utility surfaces */
body.active-light-mode .bg-color-card,
body.active-light-mode .bg-card,
body.active-light-mode .bg-color-white {
    background: var(--nga-surface) !important;
}

body.active-light-mode .bg-color-grey,
body.active-light-mode .bg-color-lessdark,
body.active-light-mode .bg-color-dark-alt {
    background: var(--nga-surface-2) !important;
}

body.active-light-mode .bg-color-dark,
body.active-light-mode .bg-color-black,
body.active-light-mode .bg-color-darker {
    background: var(--nga-navy-900) !important;
}

body.active-light-mode .radius {
    border-radius: var(--radius) !important;
}


/* ==========================================================================
   3. HEADER, NAVIGATION & OVERLAYS
   ========================================================================== */
body.active-light-mode .tmp-header,
body.active-light-mode .header-default {
    background-color: var(--nga-surface) !important;
    border-bottom: 1px solid var(--nga-line);
}

body.active-light-mode .tmp-header.sticky,
body.active-light-mode .header-default.header-landing.sticky,
body.active-light-mode .header-default.header-transparent.header-one.sticky {
    background-color: rgba(255, 255, 255, .92) !important;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--nga-line);
    box-shadow: var(--nga-shadow-header);
}

/* Primary nav */
body.active-light-mode .tmp-header .mainmenu-nav .mainmenu>li>a,
body.active-light-mode .mainmenu-nav .mainmenu>li>a {
    color: var(--nga-ink-700) !important;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.active-light-mode .tmp-header .mainmenu-nav .mainmenu>li>a:hover,
body.active-light-mode .mainmenu-nav .mainmenu>li>a:hover,
body.active-light-mode .mainmenu-nav .mainmenu>li>a.active,
body.active-light-mode .mainmenu-nav .mainmenu>li.current>a {
    color: var(--nga-navy) !important;
}

/* Red is reserved for the active-page indicator - one deliberate accent */
body.active-light-mode .mainmenu-nav.onepagenav .mainmenu>li>a::after {
    background: var(--nga-red);
    height: 2px;
    bottom: 24px;
    border-radius: 2px;
}

/* Dropdowns */
body.active-light-mode .mainmenu-nav .mainmenu li.has-droupdown .submenu {
    background-color: var(--nga-surface);
    border: 1px solid var(--nga-line);
    border-radius: var(--radius);
    box-shadow: var(--nga-shadow-md);
    padding: 10px 0;
}

body.active-light-mode .mainmenu-nav .mainmenu li.has-droupdown .submenu li a {
    color: var(--nga-ink-500);
    border-radius: 6px;
}

body.active-light-mode .mainmenu-nav .mainmenu li.has-droupdown .submenu li a:hover,
body.active-light-mode .mainmenu-nav .mainmenu li.has-droupdown .submenu li a.active,
body.active-light-mode .submenu li a:hover {
    color: var(--nga-navy) !important;
    background: var(--nga-navy-50) !important;
}

/* Header icons + hamburger */
body.active-light-mode .tmp-header .header-right i,
body.active-light-mode .tmp-header .header-right svg,
body.active-light-mode .header-right.with-search .header-btn .search-area-btn i {
    color: var(--nga-ink-700) !important;
    fill: none !important;
    stroke: currentColor !important;
    transition: .3s;
}

body.active-light-mode .tmp-header .header-right i:hover {
    color: var(--nga-navy) !important;
}

body.active-light-mode .tmp-header .mobile-menu-bar span,
body.active-light-mode .tmp-header .mobile-menu-bar span::before,
body.active-light-mode .tmp-header .mobile-menu-bar span::after,
body.active-light-mode .tmp-header .offcanvas-bars span,
body.active-light-mode header.header-default.sticky .dot-btn .offcanvas-trigger .offcanvas-bars span::before,
body.active-light-mode header.header-default.sticky .dot-btn .offcanvas-trigger .offcanvas-bars span::after {
    background-color: var(--nga-ink-700) !important;
    background: var(--nga-ink-700) !important;
}

body.active-light-mode .hamberger-button {
    background: var(--nga-navy);
    color: #fff;
}

/* Mobile slide-in menu */
body.active-light-mode .popup-mobile-menu .inner {
    background: var(--nga-surface);
    border-right: 1px solid var(--nga-line);
    box-shadow: var(--nga-shadow-lg);
}

body.active-light-mode .popup-mobile-menu .mainmenu li a {
    color: var(--nga-ink-700);
}

body.active-light-mode .popup-mobile-menu .mainmenu li a:hover {
    color: var(--nga-navy) !important;
}

body.active-light-mode .popup-mobile-menu .mainmenu li {
    border-bottom-color: var(--nga-line);
}

body.active-light-mode .popup-mobile-menu .inner .header-top .close-menu .close-button {
    background: var(--nga-navy);
    border-color: var(--nga-navy);
}

/* Off-canvas info sidebar */
body.active-light-mode .inverweb-side-bar-close {
    background: var(--nga-surface);
    box-shadow: var(--nga-shadow-lg);
    border-left: 1px solid var(--nga-line);
}

body.active-light-mode .inverweb-side-bar-close .side-info .contact-list h4 {
    color: var(--nga-ink);
}

body.active-light-mode .inverweb-side-bar-close .side-info .contact-list p,
body.active-light-mode .inverweb-side-bar-close .side-info .contact-list a {
    color: var(--nga-ink-500);
}

body.active-light-mode .inverweb-side-bar-close .side-info .contact-list a:hover {
    color: var(--nga-navy);
}

body.active-light-mode .inverweb-side-bar-close .close-icon-menu {
    background: var(--nga-navy) !important;
    color: #fff;
}

body.active-light-mode .inverweb-side-bar-close .close-icon-menu i {
    color: #fff;
}

/* Search overlay */
body.active-light-mode .tmp-search-input-area {
    background: var(--nga-surface);
    box-shadow: var(--nga-shadow-lg);
    border-bottom: 1px solid var(--nga-line);
}

body.active-light-mode .tmp-search-input-area .search-input-inner .input-div input {
    color: var(--nga-ink) !important;
    border-bottom: 2px solid var(--nga-line);
    background: transparent;
}

body.active-light-mode .tmp-search-input-area .search-input-inner .input-div input:focus {
    border-bottom-color: var(--nga-navy);
}

body.active-light-mode .tmp-search-input-area .popular-keyword a {
    color: var(--nga-ink-500);
}

body.active-light-mode .tmp-search-input-area .popular-keyword a:hover {
    color: var(--nga-navy);
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
body.active-light-mode .tmp-btn,
body.active-light-mode .btn-default {
    color: #fff;
    background: var(--nga-navy);
    font-weight: 500;
    letter-spacing: 0;
    text-shadow: none;
    box-shadow: 0 1px 2px rgba(16, 22, 50, .10);
}

/* the template's expanding "ripple" pseudo-element */
body.active-light-mode .tmp-btn::after,
body.active-light-mode .btn-default::after {
    background: var(--nga-navy-700);
}

body.active-light-mode .tmp-btn:hover,
body.active-light-mode .btn-default:hover {
    color: #fff;
    box-shadow: 0 10px 24px rgba(44, 54, 145, .26);
}

body.active-light-mode .tmp-btn:focus,
body.active-light-mode .btn-default:focus {
    background: var(--nga-navy);
    color: #fff;
}

/* Corner radius: the template's `.round` modifier hardcodes 4px */
body.active-light-mode .tmp-btn.round,
body.active-light-mode .btn-default.round {
    border-radius: 6px;
}

/* Secondary / outline button */
body.active-light-mode .tmp-btn.btn-border,
body.active-light-mode .btn-default.btn-border {
    color: var(--nga-navy) !important;
    background: transparent;
    border-width: 1px;
    border-color: var(--nga-line-strong) !important;
    box-shadow: none;
}

body.active-light-mode .tmp-btn.btn-border:hover,
body.active-light-mode .btn-default.btn-border:hover {
    border-width: 1px;
}

body.active-light-mode .tmp-btn.btn-border:hover,
body.active-light-mode .btn-default.btn-border:hover {
    color: #fff !important;
    background-color: var(--nga-navy);
    border-color: var(--nga-navy) !important;
    box-shadow: 0 10px 24px rgba(44, 54, 145, .22);
}

body.active-light-mode .tmp-btn.btn-border::after,
body.active-light-mode .btn-default.btn-border::after {
    background: var(--nga-navy);
}

/* Circular video / zoom players */
body.active-light-mode .tmp-btn.rounded-player,
body.active-light-mode .btn-default.rounded-player {
    background: var(--nga-navy);
    box-shadow: 0 10px 30px rgba(44, 54, 145, .30);
}

body.active-light-mode .tmp-btn.rounded-player span i,
body.active-light-mode .btn-default.rounded-player span i {
    color: #fff !important;
}

body.active-light-mode .tmp-btn.rounded-player:hover,
body.active-light-mode .btn-default.rounded-player:hover {
    background: var(--nga-red);
    box-shadow: 0 12px 32px rgba(237, 31, 36, .32);
}

body.active-light-mode .tmp-btn.rounded-player.border,
body.active-light-mode .btn-default.rounded-player.border {
    border-color: #fff !important;
}

/* Inline "read more" text link */
body.active-light-mode .btn-read-more span,
body.active-light-mode .read-more-btn,
body.active-light-mode .discover-btn a {
    color: var(--nga-navy);
}

body.active-light-mode .link-hover a::after {
    background: var(--nga-navy);
}


/* ==========================================================================
   5. SECTION TITLES, SEPARATORS & BADGES
   ========================================================================== */
body.active-light-mode .tmp-section-title-border .subtitle,
body.active-light-mode .tmp-section-title-border .subtitle .subtitle-text,
body.active-light-mode .section-title .subtitle {
    color: var(--nga-navy) !important;
    font-weight: 700;
    letter-spacing: .14em;
    font-size: 12px;
}

body.active-light-mode .tmp-section-title-border .subtitle .number {
    color: var(--nga-red);
    opacity: 1;
}

body.active-light-mode .line-separator,
body.active-light-mode .pres-line-separator-wrapper.text-center .line-separator.line-right {
    background-image: linear-gradient(90deg, var(--nga-navy-200), rgba(44, 54, 145, 0));
    height: 1px;
}

body.active-light-mode .pres-line-separator-wrapper.text-center .line-separator.line-left {
    background-image: linear-gradient(-90deg, var(--nga-navy-200), rgba(44, 54, 145, 0));
}

body.active-light-mode .tmp-title-style-3,
body.active-light-mode .tmp-short-title {
    border-bottom-color: var(--nga-line);
}

/* Badges / tags */
body.active-light-mode .tmp-badge-2 {
    background: var(--nga-navy-50);
    color: var(--nga-navy) !important;
    border: 1px solid rgba(44, 54, 145, .14);
    font-weight: 600;
    letter-spacing: .06em;
}

body.active-light-mode .tmp-badge-2:hover {
    background: var(--nga-navy);
    color: #fff !important;
    border-color: var(--nga-navy);
}

body.active-light-mode .tag-news,
body.active-light-mode .popular-tag {
    background: var(--nga-red);
    color: #fff !important;
}


/* ==========================================================================
   6. CARDS & SURFACES
   ========================================================================== */

/* --- The template's gradient-border hover shell (.tmponhover) ----------- */
body.active-light-mode .tmponhover {
    background: var(--nga-line) !important;
    border-radius: var(--radius);
    box-shadow: var(--nga-shadow-sm);
    transition: box-shadow .45s cubic-bezier(.05, .2, .1, 1), transform .45s cubic-bezier(.05, .2, .1, 1);
}

body.active-light-mode .tmponhover::after {
    inset: 1px;
    background: var(--nga-surface);
    border-radius: calc(var(--radius) - 1px);
}

body.active-light-mode .tmponhover::before {
    background: radial-gradient(var(--nga-navy), rgba(44, 54, 145, .35) 35%, transparent 65%);
}

body.active-light-mode .tmponhover:hover {
    box-shadow: var(--nga-shadow-lg);
}

/* --- Service cards ------------------------------------------------------ */
body.active-light-mode .service.service__style--1 {
    padding: 36px 28px;
}

body.active-light-mode .service.service__style--1 .icon {
    width: 84px;
    height: 84px;
    /* the card is a flex column, so the tile has to refuse to be squashed */
    min-height: 84px;
    flex: 0 0 84px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    align-items: center;
    border-radius: 20px;
    background: var(--nga-navy-50);
    border: 1px solid rgba(44, 54, 145, .10);
    color: var(--nga-navy);
    transition: .45s cubic-bezier(.05, .2, .1, 1);
}

body.active-light-mode .service.service__style--1.text-left .icon,
body.active-light-mode .service.service__style--1.text-start .icon {
    margin-left: 0;
    margin-right: auto;
}

body.active-light-mode .service.service__style--1 .icon img {
    max-height: 44px;
    max-width: 44px !important;
    width: auto;
}

body.active-light-mode .service.service__style--1:hover .icon {
    background: var(--nga-navy);
    border-color: var(--nga-navy);
    color: #fff;
    transform: translateY(-2px);
}

/* the duotone mark flips to solid white once the tile fills with navy */
body.active-light-mode .service.service__style--1 .icon img {
    transition: filter .45s cubic-bezier(.05, .2, .1, 1);
}

body.active-light-mode .service.service__style--1:hover .icon img {
    filter: brightness(0) invert(1);
}

body.active-light-mode .service.service__style--1 .content .title {
    font-size: 20px;
    margin-bottom: 14px;
}

body.active-light-mode .service.service__style--1 .content .title a {
    color: var(--nga-ink);
}

body.active-light-mode .service.service__style--1 .content .title a:hover {
    color: var(--nga-navy);
}

body.active-light-mode .service.service__style--1 .content p {
    color: var(--nga-ink-500);
}

body.active-light-mode .service.service__style--1:hover {
    transform: translateY(-6px);
}

/* --- Counter / fun-fact cards ------------------------------------------ */
body.active-light-mode .signle-fun-facts-one {
    padding: 44px 30px;
}

body.active-light-mode .signle-fun-facts-one .icon {
    background: var(--nga-navy);
    box-shadow: 0 10px 26px rgba(44, 54, 145, .22);
}

body.active-light-mode .signle-fun-facts-one .title,
body.active-light-mode .counter-style-2 .count-number {
    color: var(--nga-navy) !important;
}

body.active-light-mode .signle-fun-facts-one span.bototm {
    color: var(--nga-ink-500);
    font-weight: 500;
}

/* --- Generic content cards --------------------------------------------- */
body.active-light-mode .card-box.card-style-1,
body.active-light-mode .box-card-style-default {
    background-color: var(--nga-surface);
    border: 1px solid var(--nga-line);
    border-radius: var(--radius);
    box-shadow: var(--nga-shadow-sm);
}

body.active-light-mode .card-box.card-style-1:hover,
body.active-light-mode .box-card-style-default:hover {
    border-color: var(--nga-navy-200);
    box-shadow: var(--nga-shadow-lg);
}

/* --- Portfolio / blog media cards -------------------------------------- */
body.active-light-mode .tmp-card .inner .thumbnail .card-image,
body.active-light-mode .tmp-card .inner .thumbnail .card-image a,
body.active-light-mode .tmp-card .inner .thumbnail .card-image img {
    border-radius: var(--radius);
}

body.active-light-mode .tmp-card .inner .thumbnail {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--nga-shadow-sm);
    background: var(--nga-surface-2);
}

body.active-light-mode .tmp-card:hover .inner .thumbnail {
    box-shadow: var(--nga-shadow-lg);
}

body.active-light-mode .tmp-card .inner .content .title a {
    color: var(--nga-ink);
}

body.active-light-mode .tmp-card .inner .content .title a:hover {
    color: var(--nga-navy);
}

body.active-light-mode .tmp-overlay {
    background: linear-gradient(180deg, rgba(16, 22, 50, 0) 40%, rgba(16, 22, 50, .45) 100%);
    opacity: 0;
    transition: .4s;
}

body.active-light-mode .tmp-card:hover .tmp-overlay {
    opacity: 1;
}

/* --- Accordion ---------------------------------------------------------- */
body.active-light-mode .tmp-accordion-style .card .card-header button {
    color: var(--nga-ink);
    font-weight: 600;
    padding-right: 30px;
}

body.active-light-mode .tmp-accordion-style .card .card-header button:not(.collapsed) {
    color: var(--nga-navy);
}

body.active-light-mode .tmp-accordion-style .card .card-header button::before {
    color: var(--nga-navy);
}

body.active-light-mode .tmp-accordion-style .card .card-body {
    border-top: 1px solid var(--nga-line);
    color: var(--nga-ink-500);
}

/* --- Sidebar widgets / detail panels ----------------------------------- */
body.active-light-mode .single-wrapper-details-right-p h4,
body.active-light-mode .tmp-single-widget .title,
body.active-light-mode .tmp-single-wized .wized-header .title {
    color: var(--nga-ink) !important;
}

body.active-light-mode .single-wrapper-details-right-p ul li {
    color: var(--nga-ink) !important;
    border-bottom: 1px solid var(--nga-line);
    font-weight: 600;
}

body.active-light-mode .single-wrapper-details-right-p ul li span {
    color: var(--nga-ink-500);
    font-weight: 400;
}

body.active-light-mode .tmp-single-wized .wized-body .single-categories li a {
    background: var(--nga-surface-2);
    border: 1px solid var(--nga-line);
    color: var(--nga-ink-500) !important;
}

body.active-light-mode .tmp-single-wized .wized-body .single-categories li a:hover {
    background: var(--nga-navy);
    border-color: var(--nga-navy);
    color: #fff !important;
}

/* --- "Call us today" widget: a navy block, the sidebar's single strong note */
body.active-light-mode .tmp-single-wized.contact-with-us-service.tmponhover {
    background: var(--nga-navy) !important;
    box-shadow: 0 18px 40px rgba(44, 54, 145, .22);
}

body.active-light-mode .tmp-single-wized.contact-with-us-service.tmponhover::after {
    background: linear-gradient(150deg, var(--nga-navy) 0%, var(--nga-navy-900) 100%);
}

body.active-light-mode .contact-with-us-service .title {
    color: #fff !important;
}

body.active-light-mode .contact-with-us-service .contact a {
    color: #fff;
}

body.active-light-mode .contact-with-us-service .contact a:hover {
    color: var(--nga-red);
}

body.active-light-mode .contact-with-us-service .contact-icon {
    background: #fff;
    color: var(--nga-navy) !important;
}

body.active-light-mode .contact-with-us-service .contact-icon i {
    color: var(--nga-navy) !important;
}

/* --- Pricing ------------------------------------------------------------ */
body.active-light-mode .pricing-table-items .pricing-table {
    border-radius: var(--radius);
}

body.active-light-mode .pricing-table-items .pricing-table .pricing-table-header h1 {
    color: var(--nga-navy);
}

body.active-light-mode .pricing-table-items .pricing-table ul li,
body.active-light-mode .pricing-table-items .info {
    color: var(--nga-ink-500);
}

body.active-light-mode .pricing-table-items .pricing-table .popular-tag {
    background: var(--nga-red);
    color: #fff !important;
}

body.active-light-mode .tmp-pricing .pricing-table-inner {
    background: var(--nga-surface);
    border: 1px solid var(--nga-line);
    border-radius: var(--radius);
    box-shadow: var(--nga-shadow-sm);
}

body.active-light-mode .tmp-pricing .pricing-table-inner:hover {
    border-color: var(--nga-navy-200);
    box-shadow: var(--nga-shadow-lg);
}

body.active-light-mode .tmp-pricing .pricing-table-inner .pricing-header .pricing span.price,
body.active-light-mode .tmp-pricing .pricing-table-inner .pricing-header .pricing span.currency {
    color: var(--nga-navy) !important;
}

body.active-light-mode .list-style--1 li,
body.active-light-mode .plan-offer-list li {
    color: var(--nga-ink-500);
}

body.active-light-mode .list-style--1 li i,
body.active-light-mode .plan-offer-list li i,
body.active-light-mode .feature-list-service li .icon i,
body.active-light-mode .list-icon li .icon i {
    color: #fff !important;
    background: var(--nga-navy);
}

body.active-light-mode .project-list-details li::before {
    color: var(--nga-navy);
}


/* ==========================================================================
   7. HERO / BANNER
   ========================================================================== */
body.active-light-mode .tmp-slider-style-1.with-bg-tin {
    background-image: url(../images/shape/03.webp);
    background-position: center top;
}

/* the stock backdrop carries a lavender wash - settle it onto brand navy */
body.active-light-mode .tmp-slider-style-1.with-bg-tin::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(44, 54, 145, .05) 0%, rgba(255, 255, 255, .85) 70%, #fff 100%);
    pointer-events: none;
    z-index: 0;
}

body.active-light-mode .tmp-slider-style-1 .container {
    position: relative;
    z-index: 2;
}

body.active-light-mode .slider-area .inner .title,
body.active-light-mode .slider-area .inner h1 {
    color: var(--nga-ink);
}

/* the rotating headline word - the one place red carries a full line of type */
body.active-light-mode .cd-headline .cd-words-wrapper b {
    color: var(--nga-red);
}

body.active-light-mode .cd-headline.clip .cd-words-wrapper::after {
    background-color: var(--nga-navy);
}

body.active-light-mode .slider-area .inner .description {
    color: var(--nga-ink-500);
}

/* decorative corner shapes: brand navy, dialled back so they stay decorative */
body.active-light-mode .banner-two-shape-control .shape-left-top img,
body.active-light-mode .banner-two-shape-control .shape-right-bottom img,
body.active-light-mode .inverweb-side-bar-close .shape-right-top img {
    opacity: .10;
}

body.active-light-mode .large-bg-area {
    border-radius: var(--radius-big);
    overflow: hidden;
    position: relative;
}

body.active-light-mode .large-bg-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 22, 50, .25) 0%, rgba(19, 26, 74, .55) 100%);
}


/* ==========================================================================
   8. CALL TO ACTION
   ========================================================================== */
body.active-light-mode .clltoaction-style-default.style-5 .content-wrapper {
    background: linear-gradient(160deg, var(--nga-navy-50) 0%, #fff 55%, var(--nga-navy-25) 100%);
    border: 1px solid var(--nga-line);
    border-radius: var(--radius-big);
    box-shadow: var(--nga-shadow-md);
}

body.active-light-mode .clltoaction-style-default .title {
    color: var(--nga-ink) !important;
}

body.active-light-mode .clltoaction-style-default .subtitle {
    color: var(--nga-ink-500) !important;
}

body.active-light-mode .clltoaction-style-default .content p {
    color: var(--nga-ink-500);
}

/* the backdrop shape ships with a lavender cast - pull it onto brand navy */
body.active-light-mode .bg-shape-area-cta-main img {
    filter: hue-rotate(-16deg) saturate(1.15);
    opacity: .55;
}

body.active-light-mode .total-join-students {
    color: var(--nga-ink) !important;
}

body.active-light-mode .avatar::before {
    background: var(--nga-navy);
    color: #fff !important;
}

body.active-light-mode .profile-share a img {
    border: 2px solid #fff;
    box-shadow: var(--nga-shadow-sm);
}

/* Full-bleed image CTA band on the service pages */
body.active-light-mode .bg-cta-modern {
    position: relative;
    border-radius: var(--radius-big);
    overflow: hidden;
}

body.active-light-mode .bg-cta-modern::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(19, 26, 74, .88) 0%, rgba(19, 26, 74, .62) 100%);
    z-index: 0;
}

body.active-light-mode .bg-cta-modern .container {
    position: relative;
    z-index: 2;
}

body.active-light-mode .call-to-action-modern-wrapper .title,
body.active-light-mode .call-to-action-modern-wrapper .right-wrapper p,
body.active-light-mode .call-to-action-modern-wrapper .right-wrapper p a {
    color: #fff !important;
}

body.active-light-mode .call-to-action-modern-wrapper .right-wrapper p a:hover {
    color: var(--nga-red) !important;
}

/* ---------------------------------------------------------------------------
   Photo sections that carry white type.

   The template's light mode flips [data-black-overlay] to a WHITE scrim, which
   erases white headlines over photography. These sections are meant to read as
   dark panels, so the scrim goes navy instead of white.
   --------------------------------------------------------------------------- */
body.active-light-mode .bg-cta-modern[data-black-overlay]::before,
body.active-light-mode .tmp-present-banner-area[data-black-overlay]::before,
body.active-light-mode .service-video-area [data-black-overlay]::before {
    background-color: var(--nga-navy-900) !important;
    opacity: .68 !important;
}

body.active-light-mode .tmp-present-banner-area {
    border-radius: var(--radius-big);
    overflow: hidden;
}

body.active-light-mode .present-banner-inner,
body.active-light-mode .present-banner-inner h2,
body.active-light-mode .present-banner-inner h3,
body.active-light-mode .present-banner-inner h4,
body.active-light-mode .present-banner-inner .title,
body.active-light-mode .present-banner-inner p,
body.active-light-mode .present-banner-inner .subtitle,
body.active-light-mode .present-banner-inner .btn-read-more span {
    color: #fff !important;
}

body.active-light-mode .present-banner-inner .btn-read-more span::after {
    background: #fff;
}

/* ---------------------------------------------------------------------------
   Standalone CTA panels.

   `.call-to-action-box` ships with no styling of its own and leans on a
   background image that isn't in the asset set, so it rendered as white type on
   white. Rebuilt as a navy panel — no missing asset, and it gives the service
   pages the same anchor the homepage CTA has.
   --------------------------------------------------------------------------- */
body.active-light-mode .call-to-action-box {
    background-color: var(--nga-navy);
    background-image: linear-gradient(140deg, var(--nga-navy) 0%, var(--nga-navy-900) 100%) !important;
    border-radius: var(--radius-big);
    padding: 64px 56px;
    box-shadow: 0 20px 44px rgba(19, 26, 74, .22);
    position: relative;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    body.active-light-mode .call-to-action-box {
        padding: 40px 24px;
    }
}

body.active-light-mode .call-to-action-box .title,
body.active-light-mode .call-to-action-box .subtitle,
body.active-light-mode .call-to-action-box .description,
body.active-light-mode .call-to-action-box p {
    color: #fff !important;
}

body.active-light-mode .call-to-action-box .subtitle,
body.active-light-mode .call-to-action-box .description {
    color: rgba(255, 255, 255, .82) !important;
}

/* Gradient pricing / CTA panel — the same navy treatment, so the two read as one family */
body.active-light-mode .tmp-pricing.with-gradient-bg,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover {
    background: linear-gradient(140deg, var(--nga-navy) 0%, var(--nga-navy-900) 100%) !important;
    border: 0;
    box-shadow: 0 20px 44px rgba(19, 26, 74, .22);
}

body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover::after {
    background: linear-gradient(140deg, var(--nga-navy) 0%, var(--nga-navy-900) 100%) !important;
    opacity: 1;
}

/* `.with-gradient-bg` marks the featured plan as well as standalone CTA panels;
   both become the same navy block, so the inner shell drops out of the way. */
body.active-light-mode .tmp-pricing.with-gradient-bg .pricing-table-inner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.active-light-mode .tmp-pricing.with-gradient-bg .title,
body.active-light-mode .tmp-pricing.with-gradient-bg .subtitle,
body.active-light-mode .tmp-pricing.with-gradient-bg p,
body.active-light-mode .tmp-pricing.with-gradient-bg li,
body.active-light-mode .tmp-pricing.with-gradient-bg .pricing-body .list-style--1 li,
body.active-light-mode .tmp-pricing.with-gradient-bg .pricing-table-inner .pricing-header .pricing span.price,
body.active-light-mode .tmp-pricing.with-gradient-bg .pricing-table-inner .pricing-header .pricing span.currency,
body.active-light-mode .tmp-pricing.with-gradient-bg .pricing span.price,
body.active-light-mode .tmp-pricing.with-gradient-bg .pricing span.currency {
    color: #fff !important;
}

body.active-light-mode .tmp-pricing.with-gradient-bg .description,
body.active-light-mode .tmp-pricing.with-gradient-bg .pricing .subtitle {
    color: rgba(255, 255, 255, .82) !important;
}

body.active-light-mode .tmp-pricing.with-gradient-bg .tmp-badge-2 {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    color: #fff !important;
}

body.active-light-mode .tmp-pricing.with-gradient-bg .list-style--1 li i,
body.active-light-mode .tmp-pricing.with-gradient-bg li i {
    background: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
}

body.active-light-mode .tmp-pricing.with-gradient-bg .tmp-btn.btn-border {
    color: #fff !important;
    background: transparent;
    border-color: rgba(255, 255, 255, .5) !important;
    box-shadow: none;
}

body.active-light-mode .tmp-pricing.with-gradient-bg .tmp-btn.btn-border:hover {
    background: #fff;
    color: var(--nga-navy) !important;
    border-color: #fff !important;
}

/* Inverted button for use on navy panels */
body.active-light-mode .tmp-btn.btn-white,
body.active-light-mode .call-to-action-box .tmp-btn,
body.active-light-mode .tmp-pricing.with-gradient-bg .tmp-btn {
    background: #fff;
    color: var(--nga-navy) !important;
    border-color: #fff !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

body.active-light-mode .tmp-btn.btn-white::after,
body.active-light-mode .call-to-action-box .tmp-btn::after,
body.active-light-mode .tmp-pricing.with-gradient-bg .tmp-btn::after {
    background: var(--nga-red);
}

body.active-light-mode .tmp-btn.btn-white:hover,
body.active-light-mode .call-to-action-box .tmp-btn:hover,
body.active-light-mode .tmp-pricing.with-gradient-bg .tmp-btn:hover {
    color: #fff !important;
    border-color: var(--nga-red) !important;
}


/* ==========================================================================
   9. PORTFOLIO FILTERS & PAGINATION
   ========================================================================== */
body.active-light-mode .filter-button-default button {
    color: var(--nga-ink-500);
    border: 1px solid transparent;
    font-weight: 500;
}

body.active-light-mode .filter-button-default button:hover {
    color: var(--nga-navy) !important;
    background: var(--nga-navy-50);
}

body.active-light-mode .filter-button-default button.is-checked {
    background: var(--nga-navy);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(44, 54, 145, .22);
}

body.active-light-mode .filter-button-default button::before {
    display: none;
}

body.active-light-mode .tmp-pagination li a {
    border: 1px solid var(--nga-line);
    color: var(--nga-ink-500);
    background: var(--nga-surface);
}

body.active-light-mode .tmp-pagination li a:hover,
body.active-light-mode .tmp-pagination li.active a {
    background: var(--nga-navy);
    border-color: var(--nga-navy);
    color: #fff !important;
}


/* ==========================================================================
   10. BLOG & ARTICLE
   ========================================================================== */
body.active-light-mode .post-page-banner .tmp-meta-list li,
body.active-light-mode .post-page-banner .tmp-meta-list li a {
    color: var(--nga-ink-500);
}

body.active-light-mode .post-page-banner .tmp-meta-list li i {
    background: var(--nga-navy-50);
    color: var(--nga-navy) !important;
}

body.active-light-mode .blog-details-content .category-meta span.text {
    color: var(--nga-ink) !important;
}

body.active-light-mode .blog-details-content blockquote,
body.active-light-mode blockquote {
    background: var(--nga-navy-25);
    border-left: 3px solid var(--nga-red);
    border-radius: var(--radius-small);
    color: var(--nga-ink);
}

body.active-light-mode .tagcloud a,
body.active-light-mode ul.categorys-widget-stndard li a {
    background: var(--nga-surface-2) !important;
    border: 1px solid var(--nga-line);
    color: var(--nga-ink-500);
}

body.active-light-mode .tagcloud a:hover,
body.active-light-mode ul.categorys-widget-stndard li a:hover {
    background: var(--nga-navy) !important;
    border-color: var(--nga-navy);
    color: #fff !important;
}

body.active-light-mode .comments-wrapper-main .comment-list .comment {
    border-bottom: 1px solid var(--nga-line);
}

body.active-light-mode .comment-author,
body.active-light-mode .comment-title {
    color: var(--nga-ink);
}

body.active-light-mode .comment-reply-link {
    color: #fff !important;
    background: var(--nga-navy);
}

body.active-light-mode .blog-search .search-button i {
    color: #fff !important;
    background: var(--nga-navy);
}


/* ==========================================================================
   11. FORMS
   ========================================================================== */
body.active-light-mode input[type=text],
body.active-light-mode input[type=password],
body.active-light-mode input[type=email],
body.active-light-mode input[type=number],
body.active-light-mode input[type=tel],
body.active-light-mode textarea,
body.active-light-mode select,
body.active-light-mode .form-group input,
body.active-light-mode .form-group textarea {
    background: var(--nga-surface);
    border: 1px solid var(--nga-line-strong);
    border-radius: var(--radius-small);
    color: var(--nga-ink);
    box-shadow: var(--nga-shadow-xs);
    transition: border-color .25s, box-shadow .25s;
}

body.active-light-mode input::placeholder,
body.active-light-mode textarea::placeholder {
    color: var(--nga-ink-300);
    opacity: 1;
}

body.active-light-mode input[type=text]:focus,
body.active-light-mode input[type=email]:focus,
body.active-light-mode input[type=tel]:focus,
body.active-light-mode textarea:focus,
body.active-light-mode select:focus,
body.active-light-mode .form-group input:focus,
body.active-light-mode .form-group textarea:focus {
    border-color: var(--nga-navy);
    box-shadow: 0 0 0 3px rgba(44, 54, 145, .12);
    outline: none;
}

body.active-light-mode .form-group.tmponhover {
    background: transparent !important;
    box-shadow: none;
}

body.active-light-mode .form-group.tmponhover::after,
body.active-light-mode .form-group.tmponhover::before {
    display: none;
}

body.active-light-mode label {
    color: var(--nga-ink-500);
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
body.active-light-mode .tmp-footer.footer-style-default,
body.active-light-mode .footer-style-default.variation-two {
    background: var(--nga-surface-2);
    border: 0;
    border-top: 1px solid var(--nga-line);
}

body.active-light-mode .footer-style-default .footer-top .tmp-footer-widget .title {
    color: var(--nga-ink);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.active-light-mode .footer-style-default .footer-top .tmp-footer-widget .subtitle,
body.active-light-mode .footer-style-default .footer-top .tmp-footer-widget .text-big {
    color: var(--nga-ink-500);
}

body.active-light-mode .footer-style-default .footer-top .tmp-footer-widget .footer-link li a {
    color: var(--nga-ink-500);
}

body.active-light-mode .footer-style-default .footer-top .tmp-footer-widget .footer-link li a:hover {
    color: var(--nga-navy);
}

body.active-light-mode .footer-style-default .shape-area {
    opacity: .35;
}

/* Social buttons */
body.active-light-mode .social-default li a {
    background: var(--nga-surface);
    border: 1px solid var(--nga-line);
    color: var(--nga-ink-500);
}

body.active-light-mode .social-default li a::after {
    background: var(--nga-navy);
}

body.active-light-mode .social-default li a:hover {
    color: #fff !important;
    border-color: var(--nga-navy);
}

/* Copyright strip - the page's navy anchor */
body.active-light-mode .copyright-style-one {
    background: var(--nga-navy-900);
    border-top: 0;
    padding: 22px 0;
}

body.active-light-mode .copyright-style-one .copyright-text,
body.active-light-mode .copyright-style-one .copyright-text a,
body.active-light-mode .copyright-style-one .ft-menu li a {
    color: rgba(255, 255, 255, .72);
}

body.active-light-mode .copyright-style-one .copyright-text a:hover,
body.active-light-mode .copyright-style-one .ft-menu li a:hover {
    color: #fff;
}

body.active-light-mode .copyright-style-one .ft-menu li+li::after {
    background: rgba(255, 255, 255, .22);
}

body.active-light-mode .copyright-style-one .link-hover a::after {
    background: #fff;
}


/* ==========================================================================
   13. IMAGE TREATMENT
   ========================================================================== */

/* Content photography reads as a deliberate object, not a floating rectangle */
body.active-light-mode .thumbnail img,
body.active-light-mode .large-image img,
body.active-light-mode .thumbnail-about-8 .large-image img,
body.active-light-mode .large-image-portfolio-details img,
body.active-light-mode .content-area .image img,
body.active-light-mode .story-image-container img {
    border-radius: var(--radius);
}

body.active-light-mode .thumbnail-about-8 .large-image,
body.active-light-mode .large-image-portfolio-details,
body.active-light-mode .tmp-portfolio-details-bento-image-area .thumbnail,
body.active-light-mode .content-area .image,
body.active-light-mode .tmp-faq-area .thumbnail {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--nga-shadow-md);
}

body.active-light-mode .thumbnail-about-8 .small-iamge-area img {
    border-radius: var(--radius);
    border: 6px solid #fff;
    box-shadow: var(--nga-shadow-lg);
}

/* Client logos ship as white artwork - the template inverts them; keep them
   a muted slate rather than pure black so the strip stays quiet. */
body.active-light-mode .brand-style-1 li a img,
body.active-light-mode .brand-style-2 li a img,
body.active-light-mode .brand-carousel-activation li a img {
    filter: brightness(0) saturate(100%) invert(30%) sepia(14%) saturate(1200%) hue-rotate(198deg) brightness(94%) contrast(92%);
    opacity: .62;
    transition: .4s;
}

body.active-light-mode .brand-style-1 li:hover a img,
body.active-light-mode .brand-style-2 li:hover a img {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(19%) sepia(66%) saturate(1900%) hue-rotate(226deg) brightness(80%) contrast(96%);
}

body.active-light-mode .brand-style-1 li {
    border-color: var(--nga-line);
}

/* Logo lock-up: the navy/red mark is the correct one on light surfaces */
body.active-light-mode .logo-light {
    display: none !important;
}

body.active-light-mode .logo-dark {
    display: block !important;
}

/* Footer and off-canvas lock-ups use the same proportional sizing */
body.active-light-mode .tmp-footer-widget .logo img.logo-dark,
body.active-light-mode .inverweb-side-bar-close .logo-side a img.logo-dark {
    height: 48px;
    max-height: 48px;
    width: auto;
}

/* The mark is a 1875x460 bitmap. Header, footer and off-canvas copies are
   sized explicitly, but the copy inside the mobile-menu panel was not - and
   because that panel still lays out while it sits off-screen, it stretched the
   document to 1875px and produced a horizontal scrollbar on the service-detail
   pages, which opt out of `overflow-x: hidden` to keep their sticky sidebars. */
body.active-light-mode .logo img,
body.active-light-mode .logo-side img {
    max-width: 100%;
    height: auto;
}

body.active-light-mode .popup-mobile-menu .inner .header-top .logo img {
    height: 42px;
    max-height: 42px;
    width: auto;
}

html:has(body.active-light-mode.overflow-x-visible),
html:has(body.active-light-mode.overflow-visible) {
    overflow-x: clip;
}

/* The decorative hero glow assets carry a lavender cast from the stock kit */
body.active-light-mode .tmp-slider-style-1 .slider-bg-dot-shape .blocksync-stars-area {
    opacity: .25;
}


/* ==========================================================================
   14. UTILITIES, OVERLAYS & CHROME
   ========================================================================== */
body.active-light-mode #scrollUp {
    background: var(--nga-navy);
    color: #fff;
    border-radius: var(--radius-small);
    box-shadow: 0 10px 26px rgba(44, 54, 145, .28);
}

body.active-light-mode #inverweb-load {
    background-color: #fff;
}

body.active-light-mode #inverweb-load .loader {
    color: var(--nga-navy) !important;
}

body.active-light-mode .cursor-inner {
    background: rgba(44, 54, 145, .45);
}

body.active-light-mode .cursor-outer {
    border: 2px solid rgba(44, 54, 145, .45) !important;
}

body.active-light-mode .show-on-scroll span a {
    background: var(--nga-navy);
    color: #fff;
    box-shadow: 0 8px 24px rgba(44, 54, 145, .24);
}

body.active-light-mode .mfp-bg {
    background: rgba(16, 22, 50, .72);
    backdrop-filter: blur(8px);
}

body.active-light-mode .tmp-slick-dot .slick-dots li button::after {
    box-shadow: inset 0 0 0 7px rgba(44, 54, 145, .28);
}

body.active-light-mode .tmp-slick-dot .slick-dots li.slick-active button::after {
    box-shadow: inset 0 0 0 2px var(--nga-navy) !important;
}

body.active-light-mode .tmp-slick-arrow button.slick-arrow {
    border: 1px solid var(--nga-line-strong);
    background: var(--nga-surface);
}

body.active-light-mode .tmp-slick-arrow button.slick-arrow i {
    color: var(--nga-navy);
}

body.active-light-mode .tmp-slick-arrow button.slick-arrow:hover {
    background: var(--nga-navy);
    border-color: var(--nga-navy);
}

body.active-light-mode .tmp-slick-arrow button.slick-arrow:hover i {
    color: #fff;
}

/* Contact blocks */
body.active-light-mode .contact-list h4,
body.active-light-mode .contact-icon i {
    color: var(--nga-navy);
}

body.active-light-mode .tmp-address .inner p a:hover {
    color: var(--nga-navy);
}

/* Section rhythm - alternating bands keep long pages from flattening out */
body.active-light-mode .tmp-counterup-area,
body.active-light-mode .tmp-brand-area {
    background: var(--nga-surface-2);
}

body.active-light-mode .tmp-counterup-area {
    padding-top: 90px;
}

/* WhatsApp float now sits on light backgrounds */
body.active-light-mode .whatsapp-float {
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
}


/* ==========================================================================
   15. "OUR STORY" MODULE (about page)
   ========================================================================== */
body.active-light-mode .story-text-item .description {
    color: var(--nga-ink-500);
}

body.active-light-mode .story-text-item .title {
    color: var(--nga-ink);
}

body.active-light-mode .year-label {
    color: var(--nga-navy);
}

body.active-light-mode .story-image-container {
    box-shadow: var(--nga-shadow-lg);
}

body.active-light-mode .sticky-stack {
    background: var(--nga-surface);
    border: 1px solid var(--nga-line);
    box-shadow: var(--nga-shadow-md);
}

body.active-light-mode .sticky-stack .year-badge {
    background: var(--nga-navy);
    color: #fff;
}


/* ==========================================================================
   16. ACCESSIBILITY
   ========================================================================== */
body.active-light-mode a:focus-visible,
body.active-light-mode button:focus-visible,
body.active-light-mode .tmp-btn:focus-visible {
    outline: 3px solid rgba(44, 54, 145, .45);
    outline-offset: 3px;
    border-radius: 4px;
}