/* ===========================================================================
   Dark / light mode
   ===========================================================================
   The site is designed light (with a dark hero). This file is the dark half:
   everything under html[data-theme="dark"] recolours a light surface, its
   text and its borders. Light mode is simply the absence of these rules, so
   nothing here can change how the light site looks.

   Loaded last (layouts/app.blade.php) so it wins over page stylesheets.
   The switch is js/sis-theme.js; the button is partials/_theme_toggle.

   Palette — one set of tokens, used everywhere below:
   =========================================================================== */

html[data-theme="dark"] {
    --d-bg: #070a12;          /* page — the hero's own base colour */
    --d-bg-2: #0b0f1a;        /* alternate section band */
    --d-surface: #111624;     /* cards */
    --d-surface-2: #171d2e;   /* raised / hovered cards, inputs */
    --d-line: rgba(255, 255, 255, .09);
    --d-line-2: rgba(255, 255, 255, .16);
    --d-text: #f2f4f8;        /* headings */
    --d-body: #b4bccb;        /* paragraphs */
    --d-mute: #8a93a6;        /* captions, labels */
    color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   The switch
   --------------------------------------------------------------------------- */

.sis-theme-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .85);
    color: #14141c;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: auto;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s ease, color .3s ease, border-color .3s ease;
}

.sis-theme-toggle:hover { transform: scale(1.08) rotate(-8deg); }
.sis-theme-toggle:focus-visible { outline: 2px solid #e93b6e; outline-offset: 3px; }

.sis-theme-toggle svg {
    position: absolute;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}

/* light mode shows the moon (tap for dark); dark mode shows the sun */
.sis-theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.4); }

html[data-theme="dark"] .sis-theme-toggle {
    background: rgba(20, 24, 38, .72);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
    color: #ffd27a;
}

html[data-theme="dark"] .sis-theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.4); }
html[data-theme="dark"] .sis-theme-toggle__sun { opacity: 1; transform: none; }

/* where it sits in each header */
.sis-nav__actions { display: flex; align-items: center; gap: 14px; }
.tp-header-right .sis-theme-toggle { margin-left: 14px; }

@media (max-width: 1199px) {
    .tp-header-right .sis-theme-toggle { margin-left: auto; margin-right: 12px; }
}

@media (max-width: 991px) {
    .sis-theme-toggle { width: 42px; height: 42px; }
    .sis-nav__actions { gap: 10px; }
}

/* ---------------------------------------------------------------------------
   The change itself
   --------------------------------------------------------------------------- */

/* circle reveal (View Transitions): the new page sits on top and is unclipped
   by js/sis-theme.js; the old one just waits underneath */
html.sis-theme-swap::view-transition-old(root),
html.sis-theme-swap::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
html.sis-theme-swap::view-transition-old(root) { z-index: 1; }
html.sis-theme-swap::view-transition-new(root) { z-index: 2; }

/* fallback: a plain cross-fade of colours */
html.sis-theme-fade,
html.sis-theme-fade *,
html.sis-theme-fade *::before,
html.sis-theme-fade *::after {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, fill .4s ease !important;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

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

html[data-theme="dark"] {
    --tp-text-body: var(--d-body);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--d-text); }

html[data-theme="dark"] p { color: var(--d-body); }

html[data-theme="dark"] ::selection { background: rgba(233, 59, 110, .45); color: #fff; }

/* ---------------------------------------------------------------------------
   Header, mega menu, mobile menu
   --------------------------------------------------------------------------- */

/* the white wordmark everywhere; the dark one is unreadable on a dark page */
html[data-theme="dark"] #header-sticky .sis-mark--dark,
html[data-theme="dark"] #header-sticky.header-sticky .sis-mark--dark { display: none !important; }
html[data-theme="dark"] #header-sticky .sis-mark--light,
html[data-theme="dark"] #header-sticky.header-sticky .sis-mark--light { display: inline-block !important; }

/* inner pages: menu text at rest */
html[data-theme="dark"] .tp-header-menu nav ul li a { color: rgba(255, 255, 255, .88) !important; }
html[data-theme="dark"] .tp-header-menu nav ul li a:hover { color: #fff !important; }

html[data-theme="dark"] #header-sticky.sis-header-light .tp-btn-sky-border {
    color: #fff !important;
    background-image: linear-gradient(var(--d-bg), var(--d-bg)), linear-gradient(135deg, #ff4d94, #f99d4e);
}

/* scrolled: the pill behind the logo turns to dark glass */
html[data-theme="dark"] #header-sticky.header-sticky .tp-header-logo a {
    background: rgba(20, 24, 38, .7);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* mega menu */
html[data-theme="dark"] .tp-megamenu,
html[data-theme="dark"] #header-sticky.header-sticky .tp-megamenu {
    background: rgba(13, 17, 28, .92) !important;
    border-top-color: rgba(255, 255, 255, .08);
    border-bottom-color: rgba(255, 255, 255, .06);
    box-shadow: 0 60px 120px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .mega-menu-item { border-right-color: var(--d-line); }
html[data-theme="dark"] .mega-menu-icon { border-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .mega-menu-title { color: #fff; }
html[data-theme="dark"] .mega-menu-list li a { color: rgba(255, 255, 255, .62) !important; }
html[data-theme="dark"] .mega-menu-list li a:hover { color: #fff !important; }

/* mobile menu */
html[data-theme="dark"] .tp-offcanvas-wrapper { background: var(--d-bg-2); }
html[data-theme="dark"] .tp-offcanvas-close-btn { color: #fff; }
html[data-theme="dark"] .tp-offcanvas-logo img { content: url("../img/logo/logo-white.png"); }
html[data-theme="dark"] .tp-offcanvas-menu ul li > a { color: rgba(255, 255, 255, .86); border-color: var(--d-line); }
html[data-theme="dark"] .tp-offcanvas-menu ul li.is-active > a,
html[data-theme="dark"] .tp-offcanvas-menu ul li.active > a { color: #ff7aa8; }
html[data-theme="dark"] .tp-offcanvas-menu .tp-submenu li a:hover { background-color: var(--d-surface-2); color: #fff; }
html[data-theme="dark"] .tp-offcanvas-menu .tp-menu-close,
html[data-theme="dark"] .tp-offcanvas-menu .tp-menu-close i { color: rgba(255, 255, 255, .7); border-color: var(--d-line-2); }
html[data-theme="dark"] .body-overlay { background: rgba(0, 0, 0, .6); }

/* ---------------------------------------------------------------------------
   Home — roadmap
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .roadmap-area { background: var(--d-bg); }
html[data-theme="dark"] .roadmap-line { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .roadmap-node__card {
    background: var(--d-surface);
    border-color: color-mix(in srgb, var(--roadmap-accent, #ff4d94) 42%, var(--d-surface));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .roadmap-node__title { color: var(--d-text); }
html[data-theme="dark"] .roadmap-node__desc { color: var(--d-body); }
html[data-theme="dark"] .roadmap-node__chip {
    background: color-mix(in srgb, var(--roadmap-accent, #ff4d94) 16%, var(--d-surface));
    border-color: color-mix(in srgb, var(--roadmap-accent, #ff4d94) 30%, var(--d-surface));
}
html[data-theme="dark"] .roadmap-progress__of { color: var(--d-mute); }
html[data-theme="dark"] .roadmap-progress__pips i { background: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .roadmap-progress__pips i.is-done { background: color-mix(in srgb, var(--roadmap-accent) 55%, var(--d-bg)); }
html[data-theme="dark"] .roadmap-progress__pips i.is-now { background: var(--roadmap-accent); }

/* ---------------------------------------------------------------------------
   Home — statement + stats
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .impact-area { background: var(--d-bg); }
html[data-theme="dark"] .impact-intro-text { color: var(--d-text); }
html[data-theme="dark"] .impact-label { color: var(--d-mute); }
html[data-theme="dark"] .impact-card {
    background: var(--d-surface) !important;
    border-color: var(--d-line) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .impact-card:hover { border-color: #ff4d94 !important; box-shadow: 0 40px 100px rgba(255, 77, 148, .18); }
html[data-theme="dark"] .impact-number { color: var(--d-text); }
html[data-theme="dark"] .impact-desc { color: var(--d-body); }

/* ---------------------------------------------------------------------------
   Portfolio (home section + /portfolio) — css/portfolio.css is driven by
   variables, so most of it is re-pointed here in one block
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .pf-page,
html[data-theme="dark"] .pf-embed {
    --pf-ink: #f2f4f8;
    --pf-body: #b4bccb;
    --pf-muted: #8a93a6;
    --pf-line: rgba(255, 255, 255, .09);
    --pf-bg: #0b0f1a;
}
html[data-theme="dark"] .pf-hero { background: var(--d-bg); }
html[data-theme="dark"] .pf-hero__eyebrow { background: var(--d-surface); box-shadow: none; }
html[data-theme="dark"] .pf-sec--white { background: var(--d-bg); }
html[data-theme="dark"] .pf-w-card { background: var(--d-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .pf-w-card:hover { box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .pf-w-card__shot { background: #0d111c; }
html[data-theme="dark"] .pf-tabs { background: var(--d-surface); border-color: var(--d-line); }
html[data-theme="dark"] .pf-tabs__tab { color: var(--d-body); }
html[data-theme="dark"] .pf-tabs__tab:hover { color: #fff; }
html[data-theme="dark"] .pf-tabs__tab.is-active { color: #fff; }
html[data-theme="dark"] .pf-tabs__n { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .pf-empty { color: var(--d-body); background: rgba(255, 77, 148, .06); }

/* case-study cards: the two light colourways go dark; brand, sunset,
   midnight and dark already are */
html[data-theme="dark"] .pf-s-card {
    --c-bg: #111624;
    --c-dim: #8a93a6;
    --c-chip: rgba(255, 255, 255, .07);
    --c-shot: rgba(255, 255, 255, .05);
    box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .8);
}
html[data-theme="dark"] .pf-s-card--blush {
    --c-bg: linear-gradient(160deg, #2a1422, #141019 75%);
    --c-fg: #fff;
    --c-soft: rgba(255, 255, 255, .78);
    --c-dim: rgba(255, 255, 255, .6);
    --c-chip: rgba(255, 77, 148, .18);
    --c-chip-fg: #ffc1da;
    --c-shot: rgba(255, 255, 255, .05);
    --c-shot-line: rgba(255, 143, 184, .25);
    --c-accent: #ff7aa8;
    border-color: rgba(255, 143, 184, .22);
}
html[data-theme="dark"] .pf-s-card--brand { --c-bg: linear-gradient(135deg, #ff4d94, #f99d4e); --c-dim: rgba(255, 255, 255, .75); --c-chip: rgba(255, 255, 255, .2); --c-shot: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .pf-s-card--sunset { --c-bg: linear-gradient(135deg, #f99d4e, #ff4d94); --c-dim: rgba(255, 255, 255, .78); --c-chip: rgba(255, 255, 255, .22); --c-shot: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .pf-s-card--dark { --c-bg: #161a2b; --c-dim: rgba(255, 255, 255, .6); --c-chip: rgba(255, 77, 148, .18); }
html[data-theme="dark"] .pf-s-card--midnight { --c-bg: linear-gradient(160deg, #241c3f, #141627 70%); --c-dim: rgba(255, 255, 255, .6); --c-chip: rgba(249, 157, 78, .18); }
html[data-theme="dark"] .pf-s-card--dark,
html[data-theme="dark"] .pf-s-card--midnight { border: 1px solid rgba(255, 255, 255, .08); }

/* ---------------------------------------------------------------------------
   Home — pricing
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .sis-pricing { background: var(--d-bg); }
html[data-theme="dark"] .sis-pricing__eyebrow { color: var(--d-text); }
html[data-theme="dark"] .sis-pricing__title { color: var(--d-text); }
html[data-theme="dark"] .sis-pricing__lede,
html[data-theme="dark"] .sis-plans__note,
html[data-theme="dark"] .sis-pricing__foot { color: var(--d-body); }
html[data-theme="dark"] .sis-pricing__foot a { color: #ff7aa8; }
html[data-theme="dark"] .sis-toggle__label { color: var(--d-mute); }
html[data-theme="dark"] .sis-toggle__label.is-active { color: var(--d-text); }
html[data-theme="dark"] .sis-toggle__switch { background: var(--d-surface-2); border-color: var(--d-line-2); }
html[data-theme="dark"] .sis-toggle__knob { background: #fff; }
html[data-theme="dark"] .sis-pricing.is-annual .sis-toggle__knob { background: linear-gradient(125deg, #f99d4e, #e93b6e); }
html[data-theme="dark"] .sis-toggle__save { color: #ffb37a; background: rgba(249, 157, 78, .14); }
html[data-theme="dark"] .sis-ptabs { background: var(--d-surface); border-color: var(--d-line); }
html[data-theme="dark"] .sis-ptabs__tab { color: var(--d-body); }
html[data-theme="dark"] .sis-ptabs__tab:hover { color: #fff; }
html[data-theme="dark"] .sis-ptabs__tab.is-active { color: #fff; }

html[data-theme="dark"] .sis-plan:not(.is-popular) {
    background: var(--d-surface);
    border-color: var(--d-line);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .sis-plan:not(.is-popular) .sis-plan__tag { color: #ffb37a; background: rgba(249, 157, 78, .14); }
html[data-theme="dark"] .sis-plan:not(.is-popular) .sis-plan__amount,
html[data-theme="dark"] .sis-plan:not(.is-popular) .sis-plan__name { color: var(--d-text); }
html[data-theme="dark"] .sis-plan:not(.is-popular) .sis-plan__cycle { color: var(--d-mute); }
html[data-theme="dark"] .sis-plan:not(.is-popular) .sis-plan__blurb { color: var(--d-body); }
html[data-theme="dark"] .sis-plan:not(.is-popular) .sis-plan__features li { color: #dfe3ec; }
html[data-theme="dark"] .sis-plan:not(.is-popular) .sis-plan__cta { color: #ffb37a; background: rgba(249, 157, 78, .14); }
html[data-theme="dark"] .sis-plan:not(.is-popular) .sis-plan__cta:hover,
html[data-theme="dark"] .sis-plan:not(.is-popular) .sis-plan__cta:focus-visible { color: #fff; background: linear-gradient(125deg, #f99d4e, #e93b6e); }

/* hovered side plan = the brand gradient, exactly as in light mode */
html[data-theme="dark"] .sis-plan:not(.is-popular):hover { border-color: transparent; box-shadow: 0 30px 60px -20px rgba(233, 59, 110, .55); }
html[data-theme="dark"] .sis-plan:not(.is-popular):hover .sis-plan__amount,
html[data-theme="dark"] .sis-plan:not(.is-popular):hover .sis-plan__name,
html[data-theme="dark"] .sis-plan:not(.is-popular):hover .sis-plan__features li { color: #fff; }
html[data-theme="dark"] .sis-plan:not(.is-popular):hover .sis-plan__cycle,
html[data-theme="dark"] .sis-plan:not(.is-popular):hover .sis-plan__blurb { color: rgba(255, 255, 255, .85); }
html[data-theme="dark"] .sis-plan:not(.is-popular):hover .sis-plan__tag { background: rgba(255, 255, 255, .16); color: #fff; }
html[data-theme="dark"] .sis-plan:not(.is-popular):hover .sis-plan__cta { background: #fff; color: #e9601f; }

/* ---------------------------------------------------------------------------
   Home — testimonials (the paper pages become slate)
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .tstory {
    background:
        radial-gradient(55% 45% at 10% 5%, rgba(255, 77, 148, .1), transparent 70%),
        radial-gradient(45% 45% at 92% 95%, rgba(249, 157, 78, .09), transparent 70%),
        var(--d-bg);
}
html[data-theme="dark"] .tstory__title { color: var(--d-text); }
html[data-theme="dark"] .tpanel__label { color: var(--d-mute); }
html[data-theme="dark"] .tpanel__stack::before { background: #161c2c; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .tpanel__stack::after { background: #1b2234; }
html[data-theme="dark"] .tleaf__front { box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .07); }
html[data-theme="dark"] .tleaf__back--paper {
    background:
        repeating-linear-gradient(180deg, transparent 0 33px, rgba(255, 255, 255, .035) 33px 34px),
        linear-gradient(270deg, #161c2c, #111624);
}
html[data-theme="dark"] .tpage--paper {
    color: #e6e9f0;
    background:
        repeating-linear-gradient(180deg, transparent 0 33px, rgba(255, 255, 255, .035) 33px 34px),
        linear-gradient(90deg, #141a2a 0%, #111624 100%);
}
html[data-theme="dark"] .tpage--paper p { color: #e6e9f0; }
html[data-theme="dark"] .tpage__stars .is-off { color: rgba(255, 255, 255, .16); }
html[data-theme="dark"] .tpage__who b { color: #fff; }
html[data-theme="dark"] .tpage__who small { color: var(--d-mute); }
html[data-theme="dark"] .tpage__num { color: rgba(255, 255, 255, .3); }
html[data-theme="dark"] .tstory__count { color: var(--d-mute); }
html[data-theme="dark"] .tstory__count b { color: var(--d-text); }
html[data-theme="dark"] .tstory__bar { background: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .tstory__hint { color: var(--d-mute); }

/* ---------------------------------------------------------------------------
   Home — Google section. color-scheme on the root reaches the embedded page,
   so Google draws its own dark theme; only the frame around it changes here.
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .ghub {
    background: radial-gradient(50% 40% at 50% 60%, rgba(66, 133, 244, .1), transparent 70%), var(--d-bg);
}
html[data-theme="dark"] .ghub__ticker { background: #0d111c; border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); }
html[data-theme="dark"] .ghub__live { box-shadow: 12px 0 24px #0d111c; }
html[data-theme="dark"] .ghub__frame { background: #121212; }
/* Google serves its light page whatever the embedder asks for, so the frame
   is inverted: white becomes near-black and the hues are turned back round */
html[data-theme="dark"] .ghub__iframe { background: #fff; filter: invert(.93) hue-rotate(180deg); }

/* ---------------------------------------------------------------------------
   Footer (its colours are inline in partials/_footer, hence !important)
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .tp-footer-area {
    background: var(--d-bg) !important;
    color: var(--d-body) !important;
    border-top: 1px solid var(--d-line);
}
html[data-theme="dark"] .tp-footer-big-title,
html[data-theme="dark"] .tp-footer-widget-title-2,
html[data-theme="dark"] .tp-footer-branding-text { color: var(--d-text); }
html[data-theme="dark"] .tp-footer-social-2 a { background: var(--d-surface-2); color: #fff; }
html[data-theme="dark"] .tp-footer-social-2 a:hover { background: #fff; color: #0b0f1a; }
html[data-theme="dark"] .tp-footer-widget-menu-list-2 ul li a,
html[data-theme="dark"] .tp-footer-widget-info-2 a,
html[data-theme="dark"] .tp-footer-widget-info-2 p { color: var(--d-body); }
html[data-theme="dark"] .tp-footer-widget-menu-list-2 ul li a:hover,
html[data-theme="dark"] .tp-footer-widget-info-2 a:hover { color: #ff7aa8; }
html[data-theme="dark"] .tp-footer-area p[style] { color: var(--d-mute) !important; }
html[data-theme="dark"] .tp-footer-area p[style] span { color: var(--d-text) !important; }
html[data-theme="dark"] .tp-footer-scroll-btn { background: var(--d-surface-2); border-color: var(--d-line-2); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .tp-footer-scroll-btn:hover { background: #fff; color: #0b0f1a; }

/* ---------------------------------------------------------------------------
   Shared theme pieces (css/main.css)
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .tp-section-title,
html[data-theme="dark"] .tp-section-title.fs-44,
html[data-theme="dark"] .tp-section-subtitle,
html[data-theme="dark"] .tp-section-subtitle.fs-17 { color: var(--d-text); }
html[data-theme="dark"] .tp-section-subtitle.fs-17.pre-circle::before { background-color: var(--d-text); }
html[data-theme="dark"] .tp-section-subtitle.st { color: var(--d-body); }

html[data-theme="dark"] .tp-btn-sky-border { color: #fff; border-color: rgba(255, 255, 255, .5); }
html[data-theme="dark"] .tp-btn-sky-border:hover { background-color: #fff; color: #0b0f1a; }

/* mobile "Menu" button on inner pages */
html[data-theme="dark"] .tp-header-14-bar-wrap .tp-header-8-bar { border-color: rgba(255, 255, 255, .25); }
html[data-theme="dark"] .tp-header-14-bar-wrap .tp-header-8-bar span { color: #fff; }

/* ---------------------------------------------------------------------------
   About
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .about-hero-premium { background: var(--d-bg); }
html[data-theme="dark"] .about-hero-bg-grid { background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, .06) 1px, transparent 0); }
html[data-theme="dark"] .about-hero-tag { color: var(--d-mute); }
html[data-theme="dark"] .about-hero-title,
html[data-theme="dark"] .hero-title-kinetic { color: var(--d-text); }
html[data-theme="dark"] .about-sub-label span { background: var(--d-surface-2); color: var(--d-body); }
html[data-theme="dark"] .about-hero-description p { color: var(--d-body); }
html[data-theme="dark"] .about-hero-ticker-wrap { border-top-color: var(--d-line); }
html[data-theme="dark"] .kinetic-bg-text { color: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .kinetic-bg-text.outline { -webkit-text-stroke-color: rgba(255, 255, 255, .1); color: transparent; }

html[data-theme="dark"] .about-refined-wrap { background: var(--d-bg); }
html[data-theme="dark"] .refined-heading { color: var(--d-text); }
html[data-theme="dark"] .refined-main-text,
html[data-theme="dark"] .refined-main-text p { color: var(--d-body); }
html[data-theme="dark"] .refined-img-inner { box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .mission-pillars-grid { border-top-color: var(--d-line); }
html[data-theme="dark"] .pillar-item { border-bottom-color: var(--d-line); }
html[data-theme="dark"] .pillar-icon { background: rgba(233, 59, 110, .12); }
html[data-theme="dark"] .pillar-item:hover .pillar-icon { background: #e93b6e; }
html[data-theme="dark"] .pillar-info h4 { color: var(--d-text); }
html[data-theme="dark"] .pillar-info p { color: var(--d-body); }
html[data-theme="dark"] .refined-philosophy-box { background: var(--d-surface); border: 1px solid var(--d-line); }
html[data-theme="dark"] .refined-philosophy-box h3 { color: var(--d-text); }
html[data-theme="dark"] .refined-philosophy-box p { color: var(--d-body); }

/* "How we take your business…" service list */
html[data-theme="dark"] .creative-service-subtitle-box .tp-section-subtitle,
html[data-theme="dark"] .creative-service-title-box .tp-section-title,
html[data-theme="dark"] .creative-service-top-content p,
html[data-theme="dark"] .creative-service-title,
html[data-theme="dark"] .creative-service-content > span,
html[data-theme="dark"] .creative-service-item.about-us-4 .creative-service-content > span,
html[data-theme="dark"] .creative-service-item.about-us-4 .creative-service-category span { color: var(--d-text); }
html[data-theme="dark"] .creative-service-subtitle-box .tp-section-subtitle.fs-17.pre-circle::before,
html[data-theme="dark"] .creative-service-item.about-us-4 .creative-service-category span::before { background-color: var(--d-text); }
html[data-theme="dark"] .creative-service-item.about-us-4 { border-color: var(--d-line-2); }
html[data-theme="dark"] .creative-service-item.about-us-4 .creative-service-title a {
    background: linear-gradient(#ff7aa8, #ff7aa8) left no-repeat, #f2f4f8;
    background-size: 0% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-theme="dark"] .creative-service-item.about-us-4:hover .creative-service-title a { background-size: 100% 100%; }
html[data-theme="dark"] .creative-service-item.about-us-4 .creative-service-link a { color: #fff; border-color: var(--d-line-2); }

/* the three tinted panels (innovation · growth · brand). Their tint is passed
   as --ff-bg from the markup so that this file can replace it. */
.tp-funfact-green-wrap[style*="--ff-bg"] { background: var(--ff-bg) !important; border: none !important; }
html[data-theme="dark"] .tp-funfact-area { background: var(--d-bg); }
html[data-theme="dark"] .tp-funfact-green-wrap,
html[data-theme="dark"] .tp-funfact-green-wrap[style*="--ff-bg"] {
    background: linear-gradient(135deg, rgba(32, 201, 151, .09) 0%, var(--d-bg) 70%) !important;
}
html[data-theme="dark"] .tp-funfact-green-wrap.pink-style[style*="--ff-bg"] {
    background: linear-gradient(135deg, rgba(249, 157, 78, .1) 0%, var(--d-bg) 70%) !important;
}
html[data-theme="dark"] .tp-funfact-green-wrap.yellow-style[style*="--ff-bg"] {
    background: linear-gradient(135deg, rgba(233, 59, 110, .1) 0%, var(--d-bg) 70%) !important;
}
html[data-theme="dark"] .funfact-visual-art { background: var(--d-surface); border: 1px solid var(--d-line); }
html[data-theme="dark"] .f-eyebrow[style] { color: var(--d-text) !important; }
html[data-theme="dark"] .f-title { color: var(--d-text); }
html[data-theme="dark"] .f-desc { color: var(--d-body); }
html[data-theme="dark"] .f-tags span { background: var(--d-surface-2); color: var(--d-text); }
html[data-theme="dark"] .f-tags.tech span { background: #fff; color: #0b0f1a; }
html[data-theme="dark"] .f-tags.impact span { background: rgba(233, 59, 110, .12); color: #ff7aa8; border-color: rgba(233, 59, 110, .25); }
html[data-theme="dark"] .coord { color: var(--d-mute); background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .bit,
html[data-theme="dark"] .m-bit:nth-child(3),
html[data-theme="dark"] .b-bit:nth-child(3) { background: #fff; color: #0b0f1a; }

/* design thinking process */
html[data-theme="dark"] .tp-work-area,
html[data-theme="dark"] .process-modern-bg { background: var(--d-bg); }
html[data-theme="dark"] .process-kinetic-bg { color: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .process-intro-text { color: var(--d-body); }
html[data-theme="dark"] .tp-work-item { border-color: var(--d-bg); background-color: var(--d-surface); }
html[data-theme="dark"] .process-card-modern { background: transparent; border: 1px solid var(--d-line); }
html[data-theme="dark"] .process-card-glass { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .process-card-modern:hover { border-color: rgba(233, 59, 110, .4); box-shadow: 0 40px 80px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .process-card-modern:hover .process-card-glass { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .process-card-modern .tp-work-number { background: #fff; color: #0b0f1a; }
html[data-theme="dark"] .process-card-modern .tp-work-number i { color: #0b0f1a; }
html[data-theme="dark"] .process-card-modern:hover .tp-work-number { background: #e93b6e; color: #fff; }
html[data-theme="dark"] .process-card-modern:hover .tp-work-number i { color: #fff; }
html[data-theme="dark"] .tp-work-title { color: var(--d-text); }
html[data-theme="dark"] .tp-work-content p { color: var(--d-body); }
html[data-theme="dark"] .process-tag-list span { background: rgba(255, 255, 255, .07); color: var(--d-mute); }
html[data-theme="dark"] .process-card-modern:hover .process-tag-list span { background: rgba(233, 59, 110, .16); color: #ff7aa8; }
html[data-theme="dark"] .glass-visual-container { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .09); box-shadow: 0 40px 100px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .floating-tech-card { background: var(--d-surface-2); border-color: var(--d-line); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .art-grid-dots { background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); }

/* ---------------------------------------------------------------------------
   Contact
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .hero-banner-premium { background: var(--d-bg); }
html[data-theme="dark"] .premium-contact-area,
html[data-theme="dark"] .tp-contact-info-pills { background: var(--d-bg); }
html[data-theme="dark"] .premium-contact-glass {
    background: var(--d-surface);
    border-color: var(--d-line);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .contact-form-premium { background: var(--d-surface); }
html[data-theme="dark"] .contact-map-premium { background: #0d111c; }
html[data-theme="dark"] .form-title { color: var(--d-text); }

html[data-theme="dark"] .form-group-modern input,
html[data-theme="dark"] .form-group-modern textarea,
html[data-theme="dark"] .form-group-modern select {
    color: var(--d-text);
    border-bottom-color: rgba(255, 255, 255, .14) !important;
}
html[data-theme="dark"] .form-group-modern.is-focused input,
html[data-theme="dark"] .form-group-modern.is-focused textarea { border-bottom-color: transparent !important; }
html[data-theme="dark"] .form-group-modern label,
html[data-theme="dark"] .form-group-modern select + label { color: var(--d-mute); }
html[data-theme="dark"] .form-group-modern.is-focused label,
html[data-theme="dark"] .form-group-modern.has-value label,
html[data-theme="dark"] .form-group-modern input:focus + label,
html[data-theme="dark"] .form-group-modern textarea:focus + label,
html[data-theme="dark"] .form-group-modern select:focus + label { color: #ff7aa8; }
html[data-theme="dark"] .form-group-modern select option { background: var(--d-surface-2); color: var(--d-text); }
html[data-theme="dark"] .form-group-modern.is-disabled label { color: rgba(255, 255, 255, .25) !important; }
/* browsers paint autofilled fields pale yellow/blue; keep them on the theme */
html[data-theme="dark"] .form-group-modern input:-webkit-autofill {
    -webkit-text-fill-color: var(--d-text);
    -webkit-box-shadow: 0 0 0 1000px var(--d-surface) inset !important;
    caret-color: var(--d-text);
}

html[data-theme="dark"] .contact-info-card-premium { background: var(--d-surface); border-color: var(--d-line); }
html[data-theme="dark"] .contact-info-card-premium:hover { border-color: #e93b6e; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .card-icon-wrap { background: var(--d-surface-2); }
html[data-theme="dark"] .contact-info-card-premium:hover .card-icon-wrap { background: linear-gradient(135deg, #e93b6e 0%, #f99d4e 100%); }
html[data-theme="dark"] .card-label { color: var(--d-mute); }
html[data-theme="dark"] .card-value { color: var(--d-text); }
html[data-theme="dark"] .card-value:hover { color: #ff7aa8; }
html[data-theme="dark"] .card-sub-text { color: var(--d-body); }
html[data-theme="dark"] .social-label { color: var(--d-body); }
html[data-theme="dark"] .social-pill { background: var(--d-surface-2); color: #fff; }
html[data-theme="dark"] .social-pill:hover { background: #fff; color: #0b0f1a; }
html[data-theme="dark"] .social-pill.fb:hover { background: #1877f2; color: #fff; }
html[data-theme="dark"] .social-pill.ig:hover { background: #e4405f; color: #fff; }
html[data-theme="dark"] .social-pill.th:hover { background: #fff; color: #000; }
html[data-theme="dark"] .social-pill.pn:hover { background: #e60023; color: #fff; }
html[data-theme="dark"] .social-pill.li:hover { background: #0077b5; color: #fff; }
html[data-theme="dark"] .social-pill.tp:hover { background: #00b67a; color: #fff; }

/* ---------------------------------------------------------------------------
   Services (list page)
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .tp-inner-service-area { background: var(--d-bg); }
html[data-theme="dark"] .service-nav-item { color: var(--d-mute); }
html[data-theme="dark"] .service-nav-item.active { color: #ff7aa8; }
html[data-theme="dark"] .service-main-title { color: var(--d-text); }
html[data-theme="dark"] .service-desc-modern { color: var(--d-body); }
html[data-theme="dark"] .service-features-list { border-top-color: var(--d-line); }
html[data-theme="dark"] .service-feature-row { border-bottom-color: var(--d-line); }
html[data-theme="dark"] .feature-label { color: var(--d-text); }
html[data-theme="dark"] .feature-num,
html[data-theme="dark"] .feature-icon-minimal { color: var(--d-mute); }
html[data-theme="dark"] .service-feature-row:hover .feature-label,
html[data-theme="dark"] .service-feature-row:hover .feature-num { color: #fff; }
html[data-theme="dark"] .service-nav-item-modern a { color: var(--d-body) !important; }
html[data-theme="dark"] .service-nav-item-modern.active a,
html[data-theme="dark"] .service-nav-item-modern:hover a {
    color: #fff !important;
    background: var(--d-surface-2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* "Have a great project?" strip */
html[data-theme="dark"] .premium-ticker-wrapper { background: var(--d-bg-2); border-color: var(--d-line); }
html[data-theme="dark"] .ticker-text { color: transparent; -webkit-text-stroke-color: rgba(255, 255, 255, .28); }
html[data-theme="dark"] .ticker-text:hover { color: #e93b6e; -webkit-text-stroke-color: #e93b6e; }
html[data-theme="dark"] .ticker-text-huge { color: rgba(255, 255, 255, .03); -webkit-text-stroke-color: rgba(255, 255, 255, .22); }

/* ---------------------------------------------------------------------------
   Service detail pages (one template, every service)
   Some headings carry inline colours in the markup, hence the [style] rules.
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .hero-tagline { color: var(--d-mute); }
html[data-theme="dark"] .hero-stat-card { background: var(--d-surface); border-color: var(--d-line); box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .hero-stat-card:hover { border-color: rgba(249, 157, 78, .35); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .stat-num-large { color: var(--d-text); }
html[data-theme="dark"] .stat-label-modern { color: var(--d-mute); }

/* overview */
html[data-theme="dark"] .service-overview-premium { background: var(--d-bg); }
html[data-theme="dark"] .overview-mesh-bg {
    background:
        radial-gradient(circle at 30% 20%, rgba(249, 157, 78, .08) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(233, 59, 110, .08) 0%, transparent 40%);
}
html[data-theme="dark"] .overview-label { background: rgba(249, 157, 78, .1); border-color: rgba(249, 157, 78, .25); }
html[data-theme="dark"] .overview-title-modern,
html[data-theme="dark"] .overview-title-modern[style] { color: var(--d-text) !important; }
html[data-theme="dark"] .overview-text-reveal,
html[data-theme="dark"] .overview-text-reveal p { color: var(--d-body); }
html[data-theme="dark"] .approach-item { background: var(--d-surface); border-color: var(--d-line); }
html[data-theme="dark"] .approach-item:hover { border-color: rgba(249, 157, 78, .4); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .approach-icon-box { background: rgba(249, 157, 78, .12); }
html[data-theme="dark"] .approach-content h5 { color: var(--d-text); }
html[data-theme="dark"] .approach-content p { color: var(--d-body); }

/* solution cards */
html[data-theme="dark"] .pp-service-details-solution-ptb { background: var(--d-bg); }
html[data-theme="dark"] .solution-tilt-card { background: var(--d-surface); border-color: var(--d-line); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .solution-tilt-card:hover { box-shadow: 0 40px 100px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .solution-card-bg-number { color: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .solution-card-title { color: var(--d-text); }
html[data-theme="dark"] .solution-card-list li { color: var(--d-body); }

/* the sideways feature panels */
html[data-theme="dark"] .feature-panel { background: var(--d-bg); border-right-color: var(--d-line); }
html[data-theme="dark"] .feature-bg-text { color: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .feature-number { color: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .feature-title:not(.moving-gradient-text) { color: var(--d-text) !important; }
html[data-theme="dark"] .feature-text { color: var(--d-body); }
html[data-theme="dark"] .feature-icon-box { background: var(--d-surface); border-color: var(--d-line); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .feature-list li { color: var(--d-text); }
html[data-theme="dark"] .feature-illustration { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .4)); }

/* technology cloud */
html[data-theme="dark"] .tech-cloud-area { background: var(--d-bg); }
html[data-theme="dark"] .tech-cloud-area .tp-section-title[style] { color: var(--d-text) !important; }
html[data-theme="dark"] .tech-cloud-area p[style] { color: var(--d-body) !important; }
html[data-theme="dark"] .tech-nebula-container { background: radial-gradient(circle at center, rgba(249, 157, 78, .14) 0%, transparent 70%); }
html[data-theme="dark"] .tech-tag { background: rgba(23, 29, 46, .85); border-color: var(--d-line-2); color: var(--d-text); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .tech-tag:hover { background: var(--tp-theme-primary); border-color: var(--tp-theme-primary); }
html[data-theme="dark"] .tech-card-info,
html[data-theme="dark"] .tech-card-info h6,
html[data-theme="dark"] .tech-card-info span { color: var(--d-text); }
html[data-theme="dark"] .tech-card-icon[style*="#111"] { background: #fff !important; color: #0b0f1a !important; }

/* FAQ */
html[data-theme="dark"] .modern-faq-section { background: var(--d-bg); }
html[data-theme="dark"] .faq-item-premium { background: var(--d-surface); border-color: var(--d-line); box-shadow: 0 5px 15px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .faq-item-premium:hover { border-color: rgba(249, 157, 78, .45); box-shadow: 0 20px 40px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .faq-question { color: var(--d-text); }
html[data-theme="dark"] .faq-icon-toggle { background: rgba(249, 157, 78, .14); }
html[data-theme="dark"] .faq-content-premium { background: rgba(249, 157, 78, .03); }
html[data-theme="dark"] .faq-answer-inner { border-top-color: var(--d-line); }
html[data-theme="dark"] .faq-answer { color: var(--d-body); }
html[data-theme="dark"] .glass-accordion .accordion-items.faq-active { border-color: var(--d-line-2); box-shadow: 0 15px 35px rgba(0, 0, 0, .4); }

/* closing call to action */
html[data-theme="dark"] .sleek-cta-area { background: var(--d-bg-2); }
html[data-theme="dark"] .cta-reveal-wrapper { background: var(--d-surface); border-color: var(--d-line); box-shadow: 0 40px 100px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .cta-title-large { color: var(--d-text); }
html[data-theme="dark"] .cta-content-inner p { color: var(--d-body); }
html[data-theme="dark"] .cta-button-glow:hover { background: #fff; color: #0b0f1a; }

/* older service-page pieces still used on a few pages */
html[data-theme="dark"] .atropos-card-icon,
html[data-theme="dark"] .atropos-card-title { color: var(--d-text); }
html[data-theme="dark"] .atropos-card-text { color: var(--d-body); }
html[data-theme="dark"] .services-horizontal-area,
html[data-theme="dark"] .h-slide-item,
html[data-theme="dark"] .tech-marquee-area,
html[data-theme="dark"] .innovation-frontier-area { background: var(--d-bg); border-color: var(--d-line); }
html[data-theme="dark"] .h-title,
html[data-theme="dark"] .tech-item,
html[data-theme="dark"] .metric-value { color: var(--d-text); }
html[data-theme="dark"] .h-desc { color: var(--d-body); }
html[data-theme="dark"] .h-link { color: var(--d-text); border-bottom-color: var(--d-text); }
html[data-theme="dark"] .stat-chip,
html[data-theme="dark"] .modern-glass-panel { background: var(--d-surface); border-color: var(--d-line); color: var(--d-text); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .innovation-card { background: var(--d-surface) !important; border-color: var(--d-line) !important; }
html[data-theme="dark"] .innovation-card p { color: var(--d-body) !important; }
html[data-theme="dark"] .metric-badge { background: var(--d-surface-2); color: var(--d-text); }
html[data-theme="dark"] .metric-bar { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .card-footer-wrap { border-top-color: var(--d-line); }
html[data-theme="dark"] .modern-btn-dark { background: #fff; color: #0b0f1a; }
html[data-theme="dark"] .circuit-bg { background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px); }

/* inner-page heroes and the services sidebar */
html[data-theme="dark"] .hero-text-modern { color: var(--d-body); }
html[data-theme="dark"] .hero-badge-modern { background: rgba(249, 157, 78, .1); border-color: rgba(249, 157, 78, .25); }
html[data-theme="dark"] .hero-mouse-spotlight { background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(249, 157, 78, .07) 0%, transparent 50%); }
html[data-theme="dark"] .sidebar-glass-effect { background: rgba(255, 255, 255, .04); border-color: var(--d-line); }
html[data-theme="dark"] .sidebar-progress-track { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .nav-dot { background: rgba(255, 255, 255, .3); }
html[data-theme="dark"] .tp-service-item { background-color: var(--d-surface); border-color: var(--d-line-2); }
html[data-theme="dark"] .tp-service-title,
html[data-theme="dark"] .tp-service-title a { color: var(--d-text); }
html[data-theme="dark"] .tp-service-content p { color: var(--d-body); }
html[data-theme="dark"] .tp-service-btn a { color: #ff7aa8; }
html[data-theme="dark"] .tech-card-icon[style*="#000"] { background: #fff !important; color: #0b0f1a !important; }

/* home page mobile menu (the full-screen one) */
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-bg.is-left { background: var(--d-bg-2); }
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-bg.is-right { background-color: var(--d-surface); }
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-logo .logo-1 { display: block !important; }
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-logo .logo-2 { display: none !important; }
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu > nav > ul > li > a { color: rgba(255, 255, 255, .38); }
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu > nav > ul > li.is-active > a,
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu > nav > ul > li > a:hover { color: #fff; }
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu > nav > ul > li.is-active .tp-menu-close i,
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu .tp-menu-close i { color: rgba(255, 255, 255, .8); }
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu > nav > ul > li > ul > li > a { color: rgba(255, 255, 255, .8); }
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu .tp-submenu li a { color: rgba(255, 255, 255, .7); }
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu .tp-submenu li a:hover { color: #fff; }
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-close-btn,
html[data-theme="dark"] .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-close-btn .text { color: #fff; }