/* ============================================================
   iOSS Dark Theme — Complete Design System
   ============================================================ */

/* ============================================================
   HOME — "WATCH VIDEO" MODAL
   Pops from a tiny point at the centre and scales up to fill the
   whole screen. All !important so it beats Bootstrap's modal CSS
   (which loads deferred, after this inlined block).
   ============================================================ */
.video-pop-modal { padding: 0 !important; }
.video-pop-modal .modal-dialog {
  max-width: 100% !important;
  width: 100vw !important;
  height: 100vh;
  min-height: 100vh !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transform: scale(0.12) !important;
  opacity: 0;
  transition: transform 0.55s cubic-bezier(.16,1,.3,1), opacity 0.4s ease !important;
}
.video-pop-modal.show .modal-dialog {
  transform: scale(1) !important;
  opacity: 1;
}
.video-pop-modal .modal-content {
  width: 100%;
  height: 100%;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.video-pop-modal .modal-header {
  position: absolute;
  top: 0; right: 0;
  padding: 16px 20px !important;
  border: 0 !important;
  z-index: 5;
}
.video-pop-modal .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}
.video-pop-modal .btn-close:hover { opacity: 1; transform: scale(1.1); }
.video-pop-modal .modal-body {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.video-pop-modal .modal-body iframe {
  width: min(96vw, 170.6vh) !important;   /* largest 16:9 that fits the screen */
  max-width: 96vw;
  max-height: 92vh;
  aspect-ratio: 16 / 9;
  height: auto !important;
  border: 0 !important;
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
/* Darken the backdrop so the video reads against it */
.modal-backdrop.show { opacity: 0.88 !important; }

/* ============================================================
   PAGE TRANSITION — fade-out on submenu click only.
   The fade-IN was removed because external CSS loads after inline
   CSS via the print-media trick; while waiting, the body would
   appear unstyled. A fade-in on top of FOUC just confuses the
   visible sequence. The body-leaving fade-out remains so submenu
   clicks don't feel abrupt.
   ============================================================ */
body.page-leaving {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease-in, transform 180ms ease-in;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.page-leaving { transition: opacity 80ms linear; transform: none; }
}

:root {
  --r: #e14646;
  --rd: #9f0000;
  --bg: #060810;
  --bg2: #0b0d1f;
  --bg3: #0f1225;
  --glow: rgba(225,70,70,0.18);
  --txt: #f0f0f0;
  --muted: #9aa0b4;

  /* Glassmorphism system */
  --glass:        rgba(255,255,255,0.05);
  --glass-2:      rgba(255,255,255,0.07);
  --glass-red:    rgba(225,70,70,0.07);
  --card:         rgba(255,255,255,0.04);
  --border:       rgba(255,255,255,0.10);
  --border-red:   rgba(225,70,70,0.28);
  --glass-blur:   blur(18px) saturate(160%);
  --glass-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.07) inset;
  --glass-shadow-hover: 0 8px 40px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.10) inset;
  --glass-shine:  linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 40%, transparent 70%);
}

/* ============================================================
   GLOBAL RESET / BASE
   ============================================================ */
/* html + body bg with !important and hex literal — paints on the very
   first frame, before any custom property resolves, and survives any
   later cascade override from external stylesheets that may load after
   the inline block. The compound `html body` selector raises specificity
   above any single-element body rule from legacy CSS files. */
html {
  background: #060810 !important;
}
html body {
  background: #060810 !important;
}
body {
  color: var(--txt) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  /* `clip` prevents horizontal scroll WITHOUT turning <body> into a scroll
     container — `hidden` would, which breaks position:sticky (e.g. the team
     page tab bar) in Firefox/Safari. Matches the homepage's body + <main>. */
  overflow-x: clip;
}

/* ============================================================
   SCROLLBAR — black track, red gradient thumb (dark mode)
   ============================================================ */
/* Red scrollbar in DARK mode only; light mode keeps the browser default. */
html[data-theme="dark"] {
  color-scheme: dark;                    /* render native UI (scrollbar gutter) in the dark palette */
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: var(--r) #07070d;     /* thumb / track */
}
html[data-theme="dark"]::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="dark"]::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #07070d;
}
html[data-theme="dark"]::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--r) 0%, var(--rd) 100%);
  border-radius: 8px;
  border: 2px solid #07070d;             /* inset look against the black track */
}
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff5a5a 0%, var(--r) 100%);
}
html[data-theme="dark"]::-webkit-scrollbar-corner,
[data-theme="dark"] ::-webkit-scrollbar-corner { background: #07070d; }

/* Light mode: force a clean scrollbar (light track + soft grey bar). Setting
   color-scheme:light makes the browser paint native UI in the light palette, so
   the OS dark-mode track can never bleed a black bar into the light theme; the
   explicit light track colour is the belt-and-braces fallback. */
html[data-theme="light"] {
  color-scheme: light;
  scrollbar-width: thin;
  scrollbar-color: #c2c5cc #eef0f3;      /* thumb / light track */
}
html[data-theme="light"]::-webkit-scrollbar,
[data-theme="light"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="light"]::-webkit-scrollbar-track,
[data-theme="light"] ::-webkit-scrollbar-track { background: #eef0f3; }
html[data-theme="light"]::-webkit-scrollbar-thumb,
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #c2c5cc;
  border-radius: 8px;
  border: 3px solid transparent;         /* padding so the bar looks slimmer */
  background-clip: padding-box;
}
html[data-theme="light"]::-webkit-scrollbar-thumb:hover,
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #a8acb5;
  border: 3px solid transparent;
  background-clip: padding-box;
}
html[data-theme="light"]::-webkit-scrollbar-corner,
[data-theme="light"] ::-webkit-scrollbar-corner { background: #eef0f3; }

/* ============================================================
   LIGHT-MODE POLISH — AI Chatbot product page (.bc template).
   The glass boxes use --bc-bd: var(--color-border), which is nearly
   invisible in light mode, so the page reads flat. Give them a soft
   light-grey border and drop a warm "paper" band behind the variety
   section ("Types of AI Chatbots" — section #3, holds .cb-card).
   Light mode only; scoped to this page (roll out once approved).
   ============================================================ */
html[data-theme="light"] .prod-ai-chatbot-development .bc { --bc-bd: #e2dfd5; }
/* Warm "paper" band on ALTERNATE content sections (the 3rd, 5th, 7th — the hero
   is section 1 and isn't .bc-sec, so it's skipped; the CTA at 8 stays clean).
   Boxes inside turn white so they pop on the band. LIGHT MODE ONLY — dark mode
   keeps the transparent dark canvas untouched. */
html[data-theme="light"] .prod-ai-chatbot-development .bc-sec:nth-of-type(odd) {
    background: #f4f3ee;
    --bc-glass: #ffffff;
}

/* ============================================================
   LIGHT-MODE POLISH — E-Commerce Software product page (.bc).
   Mirrors the AI-Chatbot treatment: warm #f4f3ee "paper" bands on
   alternate content sections (the cards flip to solid white to pop
   on the band) with softened warm borders. The full-page left/right
   guide-rails are lifted ABOVE the now-opaque bands so the
   homepage-style lines keep passing across the cream instead of
   being hidden behind it. LIGHT MODE ONLY — dark mode is untouched.
   ============================================================ */
html[data-theme="light"] .prod-e-commerce-software .bc { --bc-bd: #e2dfd5; }
/* Warm band on alternate content sections inside .ec-below (the scroll-over
   region): 1st/3rd/5th → Platforms, Business-goal/CMS, Get-In-Touch. The
   intro section above .ec-below stays clean so the hero reads uninterrupted. */
html[data-theme="light"] .prod-e-commerce-software .ec-below .bc-sec:nth-of-type(odd) {
    background: #f4f3ee;
    --bc-glass: #ffffff;
}
/* .ec-below carries a solid bg (for the sticky-banner scroll-over) that hides
   the rails; lift the rails above it so the guide-lines cross the bands. They
   are 1.5px and sit in the outer gutter, clear of the centred content column. */
html[data-theme="light"] .prod-e-commerce-software .bc-rails { z-index: 2; }

/* ---- Get In Touch: left-align the panel content (both themes) ----
   The .bc-cpanel panels are flex columns, so the eyebrow pill stretches
   full width and the legacy .sub/.getInTochSecCust styles centre the
   sub-text. Pin the eyebrow to the start and force the copy left. */
.prod-e-commerce-software .getInTochSecCust .bc-cpanel,
.prod-e-commerce-software .getInTochSecCust .bc-cpanel h3,
.prod-e-commerce-software .getInTochSecCust .bc-cpanel p,
.prod-e-commerce-software .getInTochSecCust .bc-cpanel .psub {
    text-align: left !important;
}
.prod-e-commerce-software .getInTochSecCust .bc-cpanel .bc-eyebrow {
    align-self: flex-start;
}

/* ============================================================
   Taxi / Cab Management Software (product, .bc design) — readability.
   The hero chips, the SVG city-map and the contact form's "Send" label
   all inherited the dark-first --muted (#9aa0b4) / 5%-opacity-on-text
   fills, which wash out on the light surfaces.
   ============================================================ */
/* Hero feature chips (Real-time GPS Tracking, etc.) — readable in light mode. */
html[data-theme="light"] .bc .bc-tag { color: #46484d !important; }

/* Live-tracking map: the city blocks fill with var(--color-text) @ 5% — on a
   light card that's near-invisible. Give the blocks + streets real definition. */
html[data-theme="light"] .tx-block  { fill: #e6e8ec !important; opacity: 1 !important; }
html[data-theme="light"] .tx-street { stroke: #d2d5da !important; }

/* Contact form "Send" button — keep the label white on the red button in BOTH
   themes (a stray --muted greyed the inner <span>, so the button color:#fff
   alone wasn't reaching the text). */
.bc .getInTochSecCust .btn-danger,
.bc .getInTochSecCust .btn-danger * { color: #fff !important; }

/* ---- Get In Touch contact form — DARK MODE ----------------------
   The legacy style.css styles `.getInTochSecCust` light-first with
   HARDCODED colours: white section (#fff), white .col-md-7 card,
   white inputs, dark label/heading text. The injected Bootstrap
   form (.form-control/.form-select/.form-label, contact-page layout)
   also keeps its white defaults. On the .bc service pages (e.g.
   /services/mobile-application-development) none of this was
   re-skinned for dark mode, so the whole panel stayed light while
   the rest of the page went dark. Re-skin to the .bc dark tokens.
   Scoped to dark theme only — light mode is untouched. ------------- */
html[data-theme="dark"] .getInTochSecCust {
    background-color: transparent;
    border-bottom-color: var(--bc-bd, rgba(244,244,245,0.14));
}
html[data-theme="dark"] .getInTochSecCust .col-md-7 {
    background: var(--bc-glass, #17171a);
    opacity: 1;
    border: 1px solid var(--bc-bd, rgba(244,244,245,0.14));
    box-shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .getInTochSecCust h4,
html[data-theme="dark"] .getInTochSecCust h6,
html[data-theme="dark"] .getInTochSecCust label,
html[data-theme="dark"] .getInTochSecCust .form-label,
html[data-theme="dark"] .getInTochSecCust .form-group label {
    color: var(--bc-ink, #f4f4f5) !important;
}
html[data-theme="dark"] .getInTochSecCust input,
html[data-theme="dark"] .getInTochSecCust textarea,
html[data-theme="dark"] .getInTochSecCust .form-control,
html[data-theme="dark"] .getInTochSecCust .form-select {
    background-color: rgba(255,255,255,0.04) !important;
    color: var(--bc-ink, #f4f4f5) !important;
    border: 1px solid var(--bc-bd, rgba(244,244,245,0.16)) !important;
}
html[data-theme="dark"] .getInTochSecCust input::placeholder,
html[data-theme="dark"] .getInTochSecCust textarea::placeholder,
html[data-theme="dark"] .getInTochSecCust .form-control::placeholder {
    color: var(--bc-mut, #a1a1aa) !important;
}
html[data-theme="dark"] .getInTochSecCust input:focus,
html[data-theme="dark"] .getInTochSecCust textarea:focus,
html[data-theme="dark"] .getInTochSecCust .form-control:focus,
html[data-theme="dark"] .getInTochSecCust .form-select:focus {
    background-color: rgba(255,255,255,0.06) !important;
    border-color: var(--bc-red, #e14646) !important;
    box-shadow: 0 0 0 0.2rem rgba(225,70,70,0.18) !important;
    color: var(--bc-ink, #f4f4f5) !important;
}
/* Bootstrap's caret SVG is dark — swap for a light one so it shows on the dark select.
   The .bc service/product pages re-style the select with the `background` SHORTHAND
   (background:var(--color-bg)!important), which resets background-repeat to `repeat`.
   This rule only set background-image, so the single caret tiled right across the
   field. Pin repeat/position/size (and pad room for it) so it stays one arrow. */
html[data-theme="dark"] .getInTochSecCust .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 12px !important;
    padding-right: 40px !important;
}
html[data-theme="dark"] .getInTochSecCust select option {
    background-color: #17171a;
    color: #f4f4f5;
}

/* ── Form success messages (themed, theme-aware) ──────────────────────
   Bootstrap's .alert-success is light-green and clashes with the dark/red
   site theme. Retheme every Livewire form's @if($submitted) confirmation:
   dark-glass card in dark mode, clean white card in light mode. Text colours
   are forced !important to beat the global h1..h6{color:#fff!important} and
   p{color:var(--muted)!important} rules. Covers contact-form, general-interest-
   form, job-application-form and custom-form (all use .alert.alert-success). */
.alert-success {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 16px !important;
    color: rgba(244,244,245,0.66) !important;
}
.alert-success .text-success,
.alert-success .fa-circle-check { color: #2ec36b !important; }
.alert-success h2,
.alert-success h3,
.alert-success h4 { color: #f4f4f5 !important; font-weight: 700 !important; margin-top: 6px; }
.alert-success p { color: rgba(244,244,245,0.66) !important; margin-bottom: 0; }
/* Light mode → clean white card with dark text */
html[data-theme="light"] .alert-success {
    background: #fff !important;
    border-color: rgba(17,17,26,0.10) !important;
    box-shadow: 0 18px 50px -30px rgba(20,20,45,0.22) !important;
}
html[data-theme="light"] .alert-success h2,
html[data-theme="light"] .alert-success h3,
html[data-theme="light"] .alert-success h4 { color: #14161a !important; }
html[data-theme="light"] .alert-success p { color: #6f6f72 !important; }
/* The "Let's Talk" modal is always dark — keep the success dark-glass even
   when the page itself is in light mode (higher specificity beats the rule above). */
html[data-theme="light"] .ioss-contact-modal .alert-success {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: none !important;
}
html[data-theme="light"] .ioss-contact-modal .alert-success h2,
html[data-theme="light"] .ioss-contact-modal .alert-success h3,
html[data-theme="light"] .ioss-contact-modal .alert-success h4 { color: #f4f4f5 !important; }
html[data-theme="light"] .ioss-contact-modal .alert-success p { color: rgba(244,244,245,0.66) !important; }

/* GLOBAL native <select> dropdown fix (all pages). The open option list is
   OS-rendered: by default the options inherit the select's light text on a
   white system popup → faint/invisible in dark mode (only the highlighted row
   shows). Force a dark popup with light text for EVERY select sitewide (the
   rule above only covered the contact form). */
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    background-color: #17171a !important;
    color: #f4f4f5 !important;
}

/* Direct Selling Software light-mode bands now live self-contained in its
   redesign file (database/seeders/redesign-content/direct-selling-software.html)
   so a re-seed reinforces them — see RedesignContentSeeder. */

/* ============================================================
   RED AI GRID TEXTURE — woven crosshatch + central red glow.
   Reusable decorative backdrop; drop `dt-red-texture` on any
   section/banner that should carry the lit-grid look. The grid
   is built from two crosshatch scales (fine + coarse) layered
   over a red->black radial so it reads as woven light.
   ============================================================ */
.dt-red-texture {
  position: relative;
  background-color: #170509;
  background-image:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(255,120,120,0.42), transparent 62%),
    linear-gradient(rgba(255,90,90,0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,90,90,0.11) 1px, transparent 1px),
    linear-gradient(rgba(255,70,70,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,70,70,0.06) 1px, transparent 1px),
    radial-gradient(ellipse 78% 95% at 50% 0%, #7a0e16 0%, #2a060b 48%, #07070d 100%);
  background-size:
    100% 100%,
    22px 22px, 22px 22px,
    88px 88px, 88px 88px,
    100% 100%;
  background-position: center top;
}

h1, h2, h3, h4, h5, h6 {
  color: #fff !important;
}

p {
  color: var(--muted) !important;
}

a {
  color: var(--txt);
  text-decoration: none;
}

/* ============================================================
   GRID BACKGROUND
   ============================================================ */
.dt-grid-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(225,70,70,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(225,70,70,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.dt-grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(225,70,70,0.10) 0%, transparent 70%);
}

.dt-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.dt-orb-1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(225,70,70,0.13), transparent);
  top: -200px; right: -120px;
}
.dt-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(80,40,160,0.09), transparent);
  bottom: 10%; left: -150px;
}
.dt-orb-3 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(225,70,70,0.08), transparent);
  top: 42%; right: -130px;
}

/* ---- Gradient glows removed per request (all viewports) -------------------
   Strip the decorative radial-gradient fills off the orb/blob FX. These
   elements are *only* the gradient glow, so removing the fill makes them render
   nothing. `.dt-orb*` is defined above in this file; `.bc-blob*` is authored
   in-body (Products/Industries/Services page bodies, mirrored across the
   redesign-content / industries-content seeders), so `!important` is required
   to beat those in-body rules from here in <head>. (`.dt-orbit-dot` is a
   different element and is intentionally left alone.) */
.dt-orb-1, .dt-orb-2, .dt-orb-3,
.bc-blob, .bc-blob-1, .bc-blob-2, .bc-blob-3 { background: none !important; }

/* ---- Light mode: remove the decorative rounded radial-gradient glows --------
   The ::before/::after "glow blobs" (red/accent radial-gradients on card
   corners, CTA panels and hero/section backdrops across about-us, products,
   all-services and the .bc service / industry pages) are tuned for the dark
   canvas; in light mode they read as stray pink smudges. Strip them in LIGHT
   mode ONLY — dark mode is unchanged. They're authored in-body in the
   redesign-content / industries-content seeder page bodies, so the
   html[data-theme="light"] scope + !important are needed to beat those in-body
   rules from here in <head>. (The request started from .au-vm-card::before.) */
html[data-theme="light"] .au-vm-card::before,
html[data-theme="light"] .au-card::after,
html[data-theme="light"] .au-cta::before,
html[data-theme="light"] .asx .cta-card::before,
html[data-theme="light"] .asx .bf-left::after,
html[data-theme="light"] .asx .sv.icn::after,
html[data-theme="light"] .pf-hero::before,
html[data-theme="light"] .pf-hero-visual::before,
html[data-theme="light"] .pf-band::before,
html[data-theme="light"] .pf-prod-media::after,
html[data-theme="light"] .ec-statcard::after,
html[data-theme="light"] .bc-cta::before,
html[data-theme="light"] .bcwrap .nm-rcard::after { display: none !important; }

/* ============================================================
   HEADER / NAV — glassmorphism
   ============================================================ */
.fixed_header {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  z-index: 9999 !important;
}
.iossHeaderSec {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* Scrolled — glass effect on ::before so header has NO backdrop-filter
   This prevents the fixed stacking context from breaking the dropdown's blur */
.iossHeaderSec.header-scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45) !important;
  animation: dtHeaderSlideDown 0.35s ease !important;
}

/* Glass blur layer — pseudo-element keeps backdrop-filter off the stacking context */
.iossHeaderSec.header-scrolled::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 26, 0.52);
  backdrop-filter: blur(32px) saturate(200%) brightness(1.18);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.18);
  pointer-events: none;
  z-index: -1;
}

/* Top shimmer line */
.iossHeaderSec.header-scrolled::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 35%, rgba(225,70,70,0.35) 65%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

@keyframes dtHeaderSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.iossHeaderSec .navbar { box-shadow: none !important; }
.iossHeaderSec .navbar-brand img { filter: brightness(1.1); }

/* ============================================================
   NAVBAR EXPAND-LG — inlined so the desktop menu renders correctly
   on first paint. Bootstrap's CSS is deferred (loads with media=print
   /onload), so without this the menu briefly shows its mobile state
   (hamburger + stacked items) before snapping to the desktop bar.
   This mirrors Bootstrap's .navbar-expand-lg, so there is no conflict
   once Bootstrap finally arrives.
   ============================================================ */
.iossHeaderSec .navbar-collapse.collapse:not(.show) { display: none; }
@media (min-width: 992px) {
  .iossHeaderSec .navbar-toggler { display: none !important; }
  .iossHeaderSec .navbar-collapse,
  .iossHeaderSec .navbar-collapse.collapse:not(.show) {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
  }
  .iossHeaderSec .navbar-nav { flex-direction: row !important; flex-wrap: nowrap; }
  .iossHeaderSec .navbar-collapse .ml-auto { margin-left: auto !important; }
}

.iossHeaderSec .nav-link {
  color: rgba(200,205,230,0.7) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: color 0.2s !important;
  padding: 6px 14px !important;
}
.iossHeaderSec .nav-link:hover,
.iossHeaderSec .nav-link.active { color: #fff !important; }

/* ============================================================
   MEGA MENU — glassmorphism
   ============================================================ */
.iossHeaderSec .navbar-nav .nav-item.dropdown { position: relative; }

/* Glass panel */
.iossHeaderSec .dt-megamenu {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s cubic-bezier(.16,1,.3,1) !important;

  /* glassmorphism */
  background: rgba(12, 14, 30, 0.52) !important;
  backdrop-filter: blur(36px) saturate(200%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(36px) saturate(200%) brightness(1.1) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 18px !important;
  padding: 6px !important;
  z-index: 99999 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 32px 72px rgba(0,0,0,0.6),
    0 0 60px rgba(225,70,70,0.05) !important;
  min-width: 240px !important;
  /* Was overflow:hidden — keeps the ambient orb (::after) inside the
     rounded panel. Disabled because the sub-children flyout panel
     extends outside the dropdown horizontally and would be clipped.
     The orb is now constrained to inside the panel via tighter
     positioning + clipping below. */
}

/* Inner highlight shimmer (top edge) */
.iossHeaderSec .dt-megamenu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 40%, rgba(225,70,70,0.4) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Ambient glow orb inside panel — positioned fully inside the rounded
   shape so we don't depend on overflow:hidden (which would clip the
   sub-children flyout). */
.iossHeaderSec .dt-megamenu::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 140px; height: 140px;
  background: radial-gradient(circle at top right, rgba(225,70,70,0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
  border-top-right-radius: 18px;
}

.iossHeaderSec .dt-megamenu.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Desktop: dropdowns open ONLY when JS adds .dt-mega-open after a brief
   hover-intent delay (see header.blade.php scripts). Pure CSS :hover is
   intentionally NOT an opener — :hover is re-evaluated by the browser on
   the new DOM after page navigation, so a cursor parked over any nav-link
   after a click would auto-open that dropdown with no user input. The
   intent delay (~150ms) makes incidental cursor positions a no-op while
   keeping the hover affordance for users who actually pause on a parent.
   Touch / mobile uses the same .dt-mega-open class (toggled on tap). */
@media (min-width: 992px) {
  .iossHeaderSec .nav-item.dropdown.dt-mega-open > .dt-megamenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }
  /* Bridge the 12px gap between the nav-link and the panel so the cursor
     can move from link to panel without losing hover. The bridge is only
     rendered when the dropdown is open, so it doesn't capture pointer events
     against an invisible panel. */
  .iossHeaderSec .nav-item.dropdown {
    position: relative;
  }
  .iossHeaderSec .nav-item.dropdown.dt-mega-open::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
    background: transparent;
  }
}
/* Touch-device fallback (no hover): JS toggles .dt-mega-open on tap.
   We apply the show styles outside the desktop media query so they work
   on any viewport size when the JS path is active. */
.iossHeaderSec .nav-item.dropdown.dt-mega-open > .dt-megamenu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Click-on-child suppression: when the user clicks any link inside a
   megamenu, JS adds .dt-mega-suppress to the parent <li>. This forces
   the panel to hide instantly (no transition) regardless of :hover or
   .dt-mega-open — fixes the bug where the dropdown stayed visible
   during the brief moment between click and page navigation. */
.iossHeaderSec .nav-item.dropdown.dt-mega-suppress > .dt-megamenu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* ============================================================
   MOBILE / TABLET (< 992px) — Bootstrap collapses the navbar
   into a hamburger menu. The mega-menu CSS above was designed
   for desktop hover with absolute positioning + fixed widths;
   here we override it for the stacked-vertical mobile layout.
   ============================================================ */
@media (max-width: 991.98px) {
  /* Toggler button — visible against the dark background */
  .iossHeaderSec .navbar-toggler {
    border: 1px solid rgba(255,255,255,0.2) !important;
    padding: 6px 10px !important;
    background: rgba(255,255,255,0.04) !important;
  }
  .iossHeaderSec .navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(225,70,70,0.35) !important; }
  .iossHeaderSec .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    filter: none !important;
  }

  /* Collapsed nav panel — glassy background, scrollable when content overflows.
     `overscroll-behavior: contain` keeps the scroll trapped inside the menu;
     reaching the menu's top or bottom does NOT chain into the page scroll
     (otherwise scrolling past the last menu item starts scrolling the page).
     Override the inherited legacy .navbar-collapse ul { background:#fff } rule
     from combined.min.css, which would otherwise paint the entire menu white. */
  .iossHeaderSec .navbar-collapse {
    background: rgba(8, 10, 26, 0.94) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    margin-top: 12px;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 10px 6px !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .iossHeaderSec .navbar-collapse ul,
  .iossHeaderSec .navbar-collapse ul#menu-primary {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Top-level nav items stack vertically with comfortable tap targets */
  .iossHeaderSec .navbar-nav { width: 100%; }
  .iossHeaderSec .navbar-nav .nav-item { width: 100%; }
  .iossHeaderSec .nav-link {
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 10px;
    color: rgba(220,225,248,0.92) !important;
  }
  .iossHeaderSec .nav-link.dt-nav-parent::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    float: right;
    font-size: 11px;
    margin-top: 5px;
    color: rgba(255,255,255,0.5);
    transition: transform 0.25s ease;
  }
  .iossHeaderSec .nav-item.dropdown.dt-mega-open > .dt-nav-parent::after {
    transform: rotate(180deg);
    color: var(--r);
  }
  .iossHeaderSec .nav-link.dropdown-toggle::after {
    display: none !important; /* hide Bootstrap's default caret, we use FA chevron */
  }

  /* MEGA MENU PANEL — drop absolute positioning, become inline accordion content.
     We override the !important rules from the desktop block above. */
  .iossHeaderSec .dt-megamenu {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 0;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255,255,255,0.02) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, opacity 0.25s ease !important;
  }
  /* When open: expand inline, no centering transform */
  .iossHeaderSec .nav-item.dropdown.dt-mega-open > .dt-megamenu,
  .iossHeaderSec .nav-item.dropdown.show > .dt-megamenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    max-height: 80vh;
    padding: 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  /* Suppress everything not explicitly opened (kills any leftover desktop :hover state) */
  .iossHeaderSec .dt-megamenu::before,
  .iossHeaderSec .dt-megamenu::after { display: none !important; }
  .iossHeaderSec .nav-item.dropdown:hover::after { display: none !important; }

  /* Header / item grid: single column, no fixed widths */
  .dt-mega-head { padding: 10px 12px 6px; margin-bottom: 2px; }
  .dt-mega-head-label { font-size: 12px; letter-spacing: 1.5px; }
  .dt-mega-head-count { font-size: 10px; }
  .dt-mega-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .dt-mega-1col, .dt-mega-2col { width: 100% !important; grid-template-columns: none !important; }
  .dt-mega-item {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
  }
  .dt-mega-item:hover {
    background: rgba(225,70,70,0.07) !important;
    border-color: rgba(225,70,70,0.18) !important;
  }
  .dt-mega-icon { width: 32px; height: 32px; min-width: 32px; font-size: 12px; }
  .dt-mega-label { font-size: 13px; }
  .dt-mega-desc { font-size: 10.5px; }

  /* "Let's Talk" CTA — sits INSIDE the hamburger panel as the last item,
     after all the nav links. Natural button width (auto), aligned with the
     other menu items. Hidden on desktop by legacy combined.min.css. */
  .iossHeaderSec .navbar-collapse .displyNoneBtn {
    display: block !important;
    padding: 10px 16px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .iossHeaderSec .navbar-collapse .displyNoneBtn a {
    display: inline-block;
    text-decoration: none;
  }
  .iossHeaderSec .navbar-collapse .displyNoneBtn .btn {
    width: auto;
    padding: 8px 20px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    white-space: nowrap;
  }
}

/* Panel header */
.dt-mega-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative;
  z-index: 2;
}
.dt-mega-head-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--r);
}
.dt-mega-head-count {
  font-size: 10px;
  color: rgba(255,255,255,0.18);
  font-weight: 500;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 2px 8px;
}

/* Grid layouts */
.dt-mega-grid {
  display: grid;
  gap: 3px;
  padding: 4px;
  position: relative;
  z-index: 2;
}
.dt-mega-1col { grid-template-columns: 1fr; width: 268px; }
.dt-mega-2col { grid-template-columns: repeat(2, 1fr); width: 560px; }

/* Individual item — glass card */
.dt-mega-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 13px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.dt-mega-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}
.dt-mega-item:hover {
  background: rgba(225,70,70,0.09) !important;
  border-color: rgba(225,70,70,0.22) !important;
  box-shadow: 0 4px 20px rgba(225,70,70,0.1) !important;
}

/* Icon bubble */
.dt-mega-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: rgba(225,70,70,0.1);
  border: 1px solid rgba(225,70,70,0.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--r);
  font-size: 14px;
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.dt-mega-item:hover .dt-mega-icon {
  background: rgba(225,70,70,0.22);
  box-shadow: 0 0 16px rgba(225,70,70,0.25);
}

/* Text */
.dt-mega-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.dt-mega-label {
  display: block;
  color: rgba(220,225,248,0.88);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.18s;
}
.dt-mega-desc {
  display: block;
  color: rgba(130,140,175,0.65);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-mega-item:hover .dt-mega-label { color: #fff; }
.dt-mega-item:hover .dt-mega-desc  { color: rgba(180,190,220,0.7); }

/* ============================================================
   MEGA MENU — sub-children flyout panel
   ============================================================
   When a child has its own children (configured in nav admin
   under "Sub-children"), the card becomes a flyout trigger.
   The sub-children panel opens to the side of the parent
   dropdown on hover — right by default, JS flips to left if
   the right side would overflow the viewport (see end of
   resources/views/components/header.blade.php).

   Visual link to the parent is via:
     - chevron caret on the card (rotates 90° on hover)
     - matching highlight on the card while flyout is open
     - notch on the flyout panel pointing toward the card */

.dt-mega-has-flyout {
  cursor: default !important;
  position: relative;
  /* Card itself defaults to overflow:hidden (to clip the ::before glow
     gradient against the rounded corner). For flyout-bearing cards we
     need overflow visible so the sub-children panel can extend out to
     the side. The ::before stays inside via its own border-radius +
     inset:0, so removing the clip here is visually safe. */
  overflow: visible !important;
}
/* Hover-bridge — fills the 14px gap between the card and the flyout
   so the cursor moving from one to the other never lands on "nothing"
   and lose :hover. The bridge is the card's ::after pseudo-element so
   hovering it counts as hovering the parent card (which keeps the
   flyout's CSS hover rule active). Slightly wider than the visible
   gap to add a forgiving margin. Mirrored on the left side for the
   .dt-mega-flyout-left variant. */
.dt-mega-has-flyout::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 18px;
  height: 100%;
  /* invisible but hit-testable */
}
.dt-mega-has-flyout.dt-mega-flyout-left::after {
  left: auto;
  right: 100%;
}
.dt-mega-section-link {
  color: rgba(220,225,248,0.92) !important;
  text-decoration: none;
  transition: color 0.18s ease;
}
.dt-mega-section-link:hover { color: #fff !important; }

/* Caret on the right of the card, indicating "more inside" */
.dt-mega-flyout-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: rgba(180,190,220,0.55);
  transition: color 0.18s ease, transform 0.25s ease, right 0.25s ease;
  pointer-events: none;
}
.dt-mega-has-flyout:hover .dt-mega-flyout-caret,
.dt-mega-has-flyout:focus-within .dt-mega-flyout-caret {
  color: var(--r);
  right: 6px;
}

/* Flyout panel itself */
.dt-mega-flyout {
  position: absolute;
  top: -6px;
  left: calc(100% + 14px); /* default: open to the right */
  min-width: 220px;
  max-width: 280px;
  padding: 10px 8px 8px;
  border-radius: 14px;
  background: rgba(12, 14, 30, 0.62) !important;
  backdrop-filter: blur(36px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter: blur(36px) saturate(200%) brightness(1.1);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 24px 56px rgba(0,0,0,0.55),
    0 0 40px rgba(225,70,70,0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s cubic-bezier(.16,1,.3,1);
  z-index: 100001;
}
/* Notch pointing back at the parent card */
.dt-mega-flyout::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid rgba(255,255,255,0.09);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  transform: rotate(45deg);
  backdrop-filter: inherit;
}
/* Left-positioned variant (JS adds this class when right would overflow) */
.dt-mega-has-flyout.dt-mega-flyout-left .dt-mega-flyout {
  left: auto;
  right: calc(100% + 14px);
  transform: translateX(6px);
}
.dt-mega-has-flyout.dt-mega-flyout-left .dt-mega-flyout::before {
  left: auto;
  right: -6px;
  border-left: 0;
  border-bottom: 0;
  border-right: 1px solid rgba(255,255,255,0.09);
  border-top: 1px solid rgba(255,255,255,0.09);
}

/* Reveal on hover / focus of the parent card */
.dt-mega-has-flyout:hover > .dt-mega-flyout,
.dt-mega-has-flyout:focus-within > .dt-mega-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.dt-mega-flyout-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--r);
  padding: 4px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
}
.dt-mega-flyout-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}
.dt-mega-flyout-list li { margin: 0; padding: 0; }
.dt-mega-flyout-list a {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  color: rgba(200,210,235,0.85);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
}
.dt-mega-flyout-list a:hover {
  color: #fff;
  background: rgba(225,70,70,0.10);
  padding-left: 14px;
}

/* Touch / narrow viewports: flyout would clip off-screen. Fall back
   to displaying the sub-children inline under the parent card,
   appended below the desc. Disable the flyout positioning entirely. */
@media (max-width: 991.98px) {
  .dt-mega-flyout-caret { display: none; }
  .dt-mega-flyout {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    margin-top: 6px;
    padding: 6px 4px;
    background: rgba(255,255,255,0.03) !important;
    backdrop-filter: none;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.06);
  }
  .dt-mega-flyout::before { display: none; }
  .dt-mega-flyout-head { display: none; }
  .dt-mega-flyout-list a { font-size: 13px; padding: 6px 10px; }
}

/* Fallback Bootstrap dropdown-item */
.iossHeaderSec .dropdown-item {
  color: var(--muted) !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
}
.iossHeaderSec .dropdown-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
}

.iossHeaderSec .navbar-toggler {
  border-color: var(--border) !important;
}
.iossHeaderSec .navbar-toggler-icon {
  filter: invert(1);
}

/* CTA button in nav */
.displyNoneBtn .btn {
  background: linear-gradient(135deg, var(--r), var(--rd)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 9px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.displyNoneBtn .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(225,70,70,0.35) !important;
}

/* ============================================================
   TAG / SECTION LABELS
   ============================================================ */
.dt-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--r);
  margin-bottom: 14px;
}
.dt-tag::before, .dt-tag::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--r);
}

/* ============================================================
   SECTION PADDING
   ============================================================ */
.dt-section {
  position: relative;
  z-index: 1;
  padding: 100px 0;
}
.dt-section-sm {
  position: relative;
  z-index: 1;
  padding: 60px 0;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.dt-hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
}

.dt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(225,70,70,0.10);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(225,70,70,0.28);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--r);
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(225,70,70,0.08);
}
.dt-pulse-dot {
  width: 7px; height: 7px;
  background: var(--r);
  border-radius: 50%;
  animation: dtPulse 2s infinite;
}
@keyframes dtPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.45; transform:scale(1.35); }
}

.dt-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  font-weight: 600 !important;
  line-height: 1.13 !important;
  letter-spacing: -0.03em !important;
  color: #fff !important;
  margin-bottom: 0;
}
.dt-hero h1 span { color: var(--r); }

.dt-hero .hero-sub {
  font-size: 1.05rem !important;
  color: var(--muted) !important;
  line-height: 1.8 !important;
  margin: 20px 0 32px !important;
  max-width: 540px;
}

.dt-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--r), var(--rd));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.dt-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(225,70,70,0.4);
  color: #fff;
}

.dt-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  text-decoration: none;
  box-shadow: var(--glass-shadow);
}
.dt-btn-ghost:hover {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  box-shadow: var(--glass-shadow-hover);
  color: #fff;
}

/* Social links in hero */
.dt-social-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}
.dt-social-row .label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}
.dt-social-row a {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.dt-social-row a:hover { color: #fff; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.07); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }

/* Hero visual – rotating rings */
.dt-hero-visual {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dt-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  animation: dtSpin linear infinite;
}
.dt-ring-1 { width:340px;height:340px;border-color:rgba(225,70,70,0.13);animation-duration:26s; }
.dt-ring-2 { width:255px;height:255px;border-color:rgba(225,70,70,0.22);animation-duration:19s;animation-direction:reverse; }
.dt-ring-3 { width:170px;height:170px;border-color:rgba(225,70,70,0.38);animation-duration:13s; }
@keyframes dtSpin { to { transform:rotate(360deg); } }

.dt-core {
  width:106px;height:106px;
  background:linear-gradient(135deg,rgba(225,70,70,0.28),rgba(225,70,70,0.05));
  border:1px solid rgba(225,70,70,0.5);
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:900;color:var(--r);
  position:relative;z-index:2;
  animation:dtFloat 4s ease-in-out infinite;
}
@keyframes dtFloat {
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-13px);}
}
.dt-orbit-dot {
  position:absolute;width:10px;height:10px;
  background:var(--r);border-radius:50%;
  box-shadow:0 0 14px var(--r);
}
.dt-orbit-dot:nth-child(1){top:10px;left:50%;transform:translateX(-50%);}
.dt-orbit-dot:nth-child(2){bottom:10px;right:50%;transform:translateX(50%);}
.dt-orbit-dot:nth-child(3){left:10px;top:50%;transform:translateY(-50%);}

/* ============================================================
   STATS BAR
   ============================================================ */
.dt-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 56px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.dt-stat-item {
  background: rgba(255,255,255,0.04);
  padding: 28px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.dt-stat-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-stat-num {
  display: block;
  font-size: 2rem;
  font-weight: 600;
  color: var(--r) !important;
  line-height: 1;
}
.dt-stat-lbl {
  display: block;
  font-size: 11px;
  color: var(--muted) !important;
  margin-top: 6px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.dt-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media(max-width:991px) {
  .dt-about-grid { grid-template-columns:1fr; gap:40px; }
}

.dt-about-stat-box {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}
.dt-about-stat-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(225,70,70,0.07), transparent 60%);
}
.dt-about-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.dt-about-stat-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.06) inset;
  position: relative;
  overflow: hidden;
}
.dt-about-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-about-stat-card:hover {
  border-color: var(--border-red);
  background: rgba(225,70,70,0.07);
  box-shadow: 0 4px 20px rgba(225,70,70,0.12), 0 1px 0 rgba(255,255,255,0.08) inset;
}
.dt-about-stat-num {
  display: block;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--r) !important;
  line-height: 1;
}
.dt-about-stat-lbl {
  font-size: 12px;
  color: var(--muted) !important;
  margin-top: 6px;
  line-height: 1.4;
}

.dt-about-badges {
  display: flex;
  gap: 16px;
  margin-top: 28px;
}
.dt-about-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  flex: 1;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.dt-about-badge i {
  font-size: 18px;
  color: var(--r);
}
.dt-about-badge span {
  font-size: 12px;
  color: var(--muted) !important;
  font-weight: 500;
}

/* ============================================================
   CTA STRIP
   ============================================================ */
.dt-cta-strip {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 48px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}
/* Woven red AI-grid texture, anchored to the right of the banner and
   faded out toward the left so the heading/body stay fully legible. */
.dt-cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 85% at 92% 45%, rgba(255,110,110,0.22), transparent 70%),
    linear-gradient(rgba(255,90,90,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,90,90,0.10) 1px, transparent 1px),
    linear-gradient(rgba(255,70,70,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,70,70,0.05) 1px, transparent 1px);
  background-size:
    100% 100%,
    22px 22px, 22px 22px,
    88px 88px, 88px 88px;
  -webkit-mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.22) 45%, #000 100%);
          mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.22) 45%, #000 100%);
  pointer-events: none;
}
.dt-cta-strip h3 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 8px;
}
.dt-cta-strip p {
  font-size: 0.9rem !important;
  color: var(--muted) !important;
  margin: 0;
}
@media(max-width:767px) {
  .dt-cta-strip { padding: 28px 24px; text-align:center; }
}

/* ============================================================
   CTA — PLAIN / SIMPLE variant (home page)
   A flat, low-ornament banner: no glass blur or radial glow,
   just a clean bordered panel with a red accent edge. Sits
   quietly within the page while still drawing the eye.
   ============================================================ */
.dt-cta-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-left: 3px solid var(--r);
  border-radius: 14px;
  padding: 32px 36px;
}
.dt-cta-simple__content {
  flex: 1 1 440px;
  min-width: 0;
}
.dt-cta-simple h3 {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.35;
  margin: 0 0 8px;
}
.dt-cta-simple p {
  font-size: 0.92rem !important;
  color: var(--muted) !important;
  margin: 0;
  max-width: 62ch;
}
.dt-cta-simple__action {
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .dt-cta-simple {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 22px;
    gap: 18px;
  }
  .dt-cta-simple__action { width: 100%; }
  .dt-cta-simple__action .dt-btn-primary {
    display: block;
    text-align: center;
  }
}

/* ============================================================
   AI / FEATURE CARDS
   ============================================================ */
.dt-section-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 40px;
}

.dt-feature-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  height: 100%;
  transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
  cursor: default;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.07) inset;
}
.dt-feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-feature-card:hover {
  border-color: rgba(225,70,70,0.35);
  background: rgba(225,70,70,0.07);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(225,70,70,0.12), 0 1px 0 rgba(255,255,255,0.09) inset;
}
.dt-feature-icon {
  width: 38px; height: 38px;
  background: rgba(225,70,70,0.12);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--r);
  margin-bottom: 14px;
}
.dt-feature-card h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-bottom: 7px;
  line-height: 1.4;
}
.dt-feature-card p {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  line-height: 1.65 !important;
  margin: 0;
}

/* ============================================================
   AI DIAGRAM — 3-col CSS grid hub-spoke (no absolute positioning)
   ============================================================ */
.dt-ai-panel {
  position: relative;
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: visible;
  padding: 36px 28px;
  box-shadow: var(--glass-shadow);
}
.dt-ai-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(225,70,70,0.11), transparent 65%);
  pointer-events: none;
}

/* 3-column grid: left-nodes | center-spine | right-nodes */
.dt-ai-grid {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 1;
}

/* Left node stack */
.dt-ai-left,
.dt-ai-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Individual node cards */
.dt-ai-nc {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 14px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.5;
  transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.3s;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.07) inset;
}
.dt-ai-nc:hover {
  border-color: rgba(225,70,70,0.4);
  color: #fff;
  background: rgba(225,70,70,0.09);
  box-shadow: 0 4px 20px rgba(225,70,70,0.15), 0 1px 0 rgba(255,255,255,0.08) inset;
}
.dt-ai-nc i {
  font-size: 15px;
  color: var(--r);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* Right-side nodes: icon on right side */
.dt-ai-right .dt-ai-nc {
  flex-direction: row-reverse;
  text-align: right;
}

/* Center spine */
.dt-ai-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 100%;
}

/* Connector lines + dots from left nodes → hub */
.dt-ai-left .dt-ai-nc {
  position: relative;
}
.dt-ai-left .dt-ai-nc::after {
  content: '';
  position: absolute;
  right: -29px;  /* bridge to spine edge */
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 1.5px;
  background: linear-gradient(to right, rgba(225,70,70,0.2), rgba(225,70,70,0.5));
}
.dt-ai-right .dt-ai-nc {
  position: relative;
}
.dt-ai-right .dt-ai-nc::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 1.5px;
  background: linear-gradient(to left, rgba(225,70,70,0.2), rgba(225,70,70,0.5));
}

/* Vertical line through the spine */
.dt-ai-vline {
  flex: 1;
  width: 1.5px;
  background: linear-gradient(to bottom, transparent, rgba(225,70,70,0.4), transparent);
  min-height: 40px;
}

/* Hub circle */
.dt-ai-hub {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(225,70,70,0.32), rgba(225,70,70,0.08));
  border: 1.5px solid rgba(225,70,70,0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--r);
  text-align: center;
  line-height: 1.2;
  animation: dtFloat 4s ease-in-out infinite;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(225,70,70,0.15);
}

.ioss-diagram-container { position:relative; width:100%; height:100%; }

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.dt-services-bg {
  background: rgba(0,0,0,0.25);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.dt-service-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  height: 100%;
  transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
  cursor: default;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}
.dt-service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-service-card:hover {
  border-color: rgba(225,70,70,0.38);
  background: rgba(225,70,70,0.07);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(225,70,70,0.14), 0 1px 0 rgba(255,255,255,0.10) inset;
}
.dt-service-icon {
  width: 56px; height: 56px;
  background: rgba(225,70,70,0.10);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.dt-service-icon svg path { fill: var(--r) !important; }
.dt-service-card h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 10px;
}
.dt-service-card p {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  margin: 0;
}

.dt-services-btn {
  margin-top: 44px;
  text-align: center;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.dt-timeline-section {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* JS-generated timeline class overrides — all !important to beat inline bg */
.ioss_timeline-card {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: border-color 0.3s, background 0.3s !important;
}
.ioss_timeline-card h5 {
  color: #fff !important;
  font-size: 15px !important;
  margin-bottom: 8px;
}
.ioss_timeline-card p {
  color: var(--muted) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

/* default state */
.ioss-bg-card-default {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}
/* highlighted / hover state */
.ioss-bg-card-highlight {
  background: rgba(225,70,70,0.09) !important;
  border-color: rgba(225,70,70,0.4) !important;
  box-shadow: 0 0 30px rgba(225,70,70,0.08) !important;
  transform: scale(1.01) !important;
}

/* year column */
.ioss_year-text {
  color: var(--muted) !important;
}
.ioss-active-year .ioss_year-text {
  color: var(--r) !important;
  font-weight: 700 !important;
}

/* arrow pointer — must match card background */
.ioss_card-arrow {
  background-color: var(--bg3) !important;
}
.ioss-active-year .ioss_card-arrow {
  background-color: rgba(225,70,70,0.09) !important;
}

/* nav arrows */
.ioss_nav-control {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}
.ioss_nav-control:hover {
  background: rgba(225,70,70,0.10) !important;
  border-color: var(--border-red) !important;
  box-shadow: 0 4px 20px rgba(225,70,70,0.15) !important;
}
.ioss_nav-control .ioss_chevron {
  border-color: var(--muted) !important;
}
.ioss_nav-control:hover .ioss_chevron {
  border-color: var(--r) !important;
}

/* timeline vertical line */
.ioss_timeline-line { background: rgba(225,70,70,0.35) !important; }

/* timeline dot */
.ioss_timeline-dot {
  border-color: var(--bg2) !important;
  box-shadow: 0 0 0 1px var(--r), 0 0 8px rgba(225,70,70,0.4) !important;
}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.dt-choose-section {
  background: rgba(0,0,0,0.2);
}
.dt-choose-num {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1px solid var(--border-red);
  background: rgba(225,70,70,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--r);
  margin: 0 auto 16px;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.dt-choose-item:hover .dt-choose-num {
  background: rgba(225,70,70,0.18);
  border-color: var(--r);
  transform: scale(1.06);
}
.dt-choose-name {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff !important;
  margin-top: 10px;
}

/* ============================================================
   PRODUCTS TABS
   ============================================================ */
.dt-products-section {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.dt-product-nav .nav-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 8px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.25s !important;
  text-align: left;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.06) inset !important;
}
.dt-product-nav .nav-link:hover {
  border-color: var(--border-red) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
}
.dt-product-nav .nav-link.active {
  background: rgba(225,70,70,0.10) !important;
  border-color: rgba(225,70,70,0.4) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(225,70,70,0.12), 0 1px 0 rgba(255,255,255,0.08) inset !important;
}
.dt-product-nav .nav-link i {
  width: 32px; height: 32px;
  background: rgba(225,70,70,0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--r);
  flex-shrink: 0;
  font-size: 14px;
}

.dt-preview-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}
.dt-preview-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-preview-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 20px 0 12px;
}
.dt-preview-desc {
  font-size: 13.5px !important;
  color: var(--muted) !important;
  line-height: 1.75 !important;
}
.dt-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--r) !important;
  border-bottom: 1px solid rgba(225,70,70,0.3);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.dt-read-more:hover { border-color: var(--r); color: var(--r) !important; }

.dt-dashboard-img {
  border-radius: 12px;
  border: 1px solid var(--border);
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  margin-bottom: 20px;
}

/* Mobile accordion */
.mobileAccordion .accordion-item {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}
.mobileAccordion .accordion-button {
  background: rgba(255,255,255,0.04) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
.mobileAccordion .accordion-button:not(.collapsed) {
  background: rgba(225,70,70,0.10) !important;
  color: var(--r) !important;
}
.mobileAccordion .accordion-button::after {
  filter: invert(1);
}
.mobileAccordion .accordion-body {
  background: var(--bg2) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}
.mobileAccordion .accordion-body h3 {
  font-size: 16px !important;
  color: #fff !important;
  margin-bottom: 10px;
}
.mobileAccordion .accordion-body img {
  margin-top: 16px;
  border-radius: 10px;
  width: 100%;
}

/* ============================================================
   SECURITY SECTION
   ============================================================ */
.dt-security-section {
  background: var(--bg);
}
.dt-sec-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}
.dt-sec-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-sec-badges {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.dt-sec-badge {
  width: 100px; height: 100px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.dt-sec-badge:hover {
  border-color: var(--border-red);
  background: rgba(225,70,70,0.07);
  box-shadow: 0 4px 16px rgba(225,70,70,0.1);
}
.dt-sec-badge img { width: 64px; filter: brightness(1.2); }
.dt-sec-labels {
  display: flex;
  gap: 24px;
  justify-content: center;
}
.dt-sec-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted) !important;
  text-align: center;
  width: 100px;
  text-transform: uppercase;
}
.dt-compliance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dt-compliance-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--muted) !important;
}
.dt-compliance-list li i {
  color: var(--r);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.dt-compliance-list li strong {
  color: #fff !important;
}

/* ============================================================
   LOCATIONS SECTION
   ============================================================ */
.dt-locations-section {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.dt-location-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
  cursor: default;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.dt-locations-section .row { align-items: stretch; }
.dt-locations-section [class*="col-"] { display: flex; }
.dt-location-card > p { margin-top: auto; }
.dt-location-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-location-card:hover {
  border-color: var(--border-red);
  background: rgba(225,70,70,0.07);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(225,70,70,0.12), 0 1px 0 rgba(255,255,255,0.09) inset;
}
.dt-location-card img {
  width: 52px;
  height: auto;
  margin-bottom: 14px;
  border-radius: 4px;
}
.dt-location-card h5 {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: #fff !important;
  margin-bottom: 8px;
}
.dt-location-card p {
  font-size: 12px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  margin: 0;
}
.dt-location-card a {
  color: var(--muted) !important;
  font-size: 12px;
  transition: color 0.2s;
}
.dt-location-card a:hover { color: var(--r) !important; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.dt-about-hero {
  position: relative;
  z-index: 1;
  padding: 56px 0 60px;
  background: transparent;
}
.dt-about-hero h2 {
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}
.dt-about-hero p {
  font-size: 1rem !important;
  color: var(--muted) !important;
  line-height: 1.8 !important;
  max-width: 520px;
}

.dt-why-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  height: 100%;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}
.dt-why-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-why-card:hover {
  border-color: rgba(225,70,70,0.35);
  background: rgba(225,70,70,0.07);
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover);
}
.dt-why-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 16px;
  filter: hue-rotate(0deg) brightness(1.1);
}
.dt-why-card h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 8px;
}
.dt-why-card p {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  margin: 0;
}

/* History timeline - about page */
.dt-history-section {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* The about "Our History" timeline now uses the .th-* year scrubber, defined
   inline in the about-us body (redesign-content/about-us.html). The old
   .dt-htimeline / .dt-htl-* horizontal-rail CSS that lived here was removed
   when that section was replaced. */

/* Stats grid about page */
.dt-company-stats {
  background: rgba(0,0,0,0.25);
}
.dt-company-stat-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 20px;
  text-align: center;
  transition: all 0.3s;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.dt-company-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-company-stat-card:hover {
  border-color: var(--border-red);
  background: rgba(225,70,70,0.07);
  box-shadow: 0 8px 32px rgba(225,70,70,0.10), 0 1px 0 rgba(255,255,255,0.09) inset;
  transform: translateY(-3px);
}
.dt-company-stat-card h5 {
  font-size: 2rem !important;
  font-weight: 600 !important;
  color: var(--r) !important;
  line-height: 1;
  margin-bottom: 8px;
}
.dt-company-stat-card p {
  font-size: 12px !important;
  color: var(--muted) !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0;
}

/* Vision / Mission */
.dt-vis-mis-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.dt-vis-mis-card:hover {
  border-color: var(--border-red);
  box-shadow: 0 8px 32px rgba(225,70,70,0.10), 0 1px 0 rgba(255,255,255,0.09) inset;
  transform: translateY(-3px);
}
.dt-vis-mis-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(225,70,70,0.12), transparent);
  border-radius: 50%;
}
.dt-vis-mis-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-vis-mis-card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-bottom: 18px;
  filter: brightness(1.1);
  position: relative;
  z-index: 1;
}
.dt-vis-mis-card h4 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--r) !important;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.dt-vis-mis-card p {
  font-size: 14px !important;
  color: var(--muted) !important;
  line-height: 1.8 !important;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ============================================================
   ABOUT — "OUR STORY" IMAGE COLLAGE + MISSION OVERLAY
   ============================================================ */
.dt-story-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 20px;
  align-items: stretch;
}
.dt-story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--glass-shadow);
  display: block;
}
.dt-story-img--tall { min-height: 440px; }
.dt-story-media-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Cap the upper image so the Mission card below is always given room
   (previously the image's 1fr grid track absorbed all the stretch
   height and could squeeze the card out of view). */
.dt-story-media-col .dt-story-img {
  flex: 0 0 auto;
  height: 230px;
  min-height: 0;
}
.dt-story-media-col .dt-mission-card { flex: 1 1 auto; }

/* Mission card — gradient accent panel echoing the reference layout */
.dt-mission-card {
  background: linear-gradient(135deg, var(--r), var(--rd));
  border-radius: 18px;
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(225,70,70,0.28);
}
.dt-mission-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.dt-mission-card h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
  position: relative; z-index: 1;
}
.dt-mission-card p {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.7 !important;
  margin: 0;
  position: relative; z-index: 1;
}

@media (max-width: 767px) {
  .dt-story-grid { grid-template-columns: 1fr; }
  .dt-story-img--tall { min-height: 280px; }
}

/* ============================================================
   ABOUT — IMAGE + TEXT FEATURE BAND
   ============================================================ */
.dt-feature-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.dt-feature-band--rev .dt-feature-band-media { order: 2; }
.dt-feature-band-media {
  position: relative;
}
.dt-feature-band-media img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--glass-shadow);
  display: block;
}
.dt-feature-band-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle at 70% 90%, rgba(225,70,70,0.18), transparent 55%);
  pointer-events: none;
}
.dt-feature-band h3 {
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.dt-feature-band p {
  font-size: 14.5px !important;
  color: var(--muted) !important;
  line-height: 1.85 !important;
  margin: 0 0 14px;
}
.dt-feature-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.dt-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 16px;
}
.dt-feature-pill i { color: var(--r); font-size: 13px; }

@media (max-width: 991px) {
  .dt-feature-band { grid-template-columns: 1fr; gap: 32px; }
  .dt-feature-band--rev .dt-feature-band-media { order: 0; }
}

/* ============================================================
   ABOUT — BENTO ACHIEVEMENTS (stats + testimonials mix)
   ============================================================ */
.dt-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.dt-bento-card {
  grid-column: span 2;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  transition: border-color .3s, transform .3s, box-shadow .3s, background .3s;
}
.dt-bento-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-bento-card:hover {
  border-color: var(--border-red);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(225,70,70,0.12);
}
.dt-bento-card--wide { grid-column: span 3; }

/* Stat content */
.dt-bento-num {
  font-size: clamp(2.1rem, 3.4vw, 2.9rem) !important;
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  position: relative; z-index: 1;
}
.dt-bento-label {
  font-size: 13.5px !important;
  color: var(--muted) !important;
  margin: 0;
  position: relative; z-index: 1;
}

/* Light / white card variant — alternated between the dark cards */
.dt-bento-card--light {
  background: #f3f4f7;
  border-color: rgba(255,255,255,0.6);
}
.dt-bento-card--light::after {
  background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, transparent 55%);
}
.dt-bento-card--light:hover {
  border-color: rgba(225,70,70,0.45);
  box-shadow: 0 14px 38px rgba(0,0,0,0.30);
}
.dt-bento-card--light .dt-bento-num   { color: #0e1020 !important; }
.dt-bento-card--light .dt-bento-label { color: #565d72 !important; }
.dt-bento-card--light .dt-bento-quote { color: #14162a !important; }
.dt-bento-card--light .dt-bento-author strong { color: #14162a; }
.dt-bento-card--light .dt-bento-author span   { color: #565d72; }
.dt-bento-card--light .dt-bento-author img { border-color: rgba(0,0,0,0.10); }

/* Red highlight card */
.dt-bento-card--red {
  background: linear-gradient(150deg, var(--r), var(--rd));
  border-color: transparent;
}
.dt-bento-card--red::after { background: none; }
.dt-bento-card--red::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.dt-bento-card--red:hover { box-shadow: 0 16px 44px rgba(225,70,70,0.40); }
.dt-bento-card--red .dt-bento-num { color: #fff !important; }
.dt-bento-card--red .dt-bento-label { color: rgba(255,255,255,0.92) !important; }

/* Testimonial card */
.dt-bento-card--quote { justify-content: space-between; }
.dt-bento-quote {
  font-size: 15.5px !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1.6 !important;
  margin: 0;
  position: relative; z-index: 1;
}
.dt-bento-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  position: relative; z-index: 1;
}
.dt-bento-author img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.dt-bento-author strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.dt-bento-author span {
  color: var(--muted);
  font-size: 12.5px;
}

@media (max-width: 991px) {
  .dt-bento { grid-template-columns: repeat(2, 1fr); }
  .dt-bento-card,
  .dt-bento-card--wide { grid-column: span 1; }
}
@media (max-width: 575px) {
  .dt-bento { grid-template-columns: 1fr; }
  .dt-bento-card,
  .dt-bento-card--wide { grid-column: span 1; min-height: 200px; }
}

/* ============================================================
   ABOUT — TEAM PREVIEW STRIP
   ============================================================ */
.dt-team-mini-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  height: 100%;
}
.dt-team-mini-card:hover {
  border-color: var(--border-red);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(225,70,70,0.14);
}
.dt-team-mini-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  filter: grayscale(0.15);
  transition: filter 0.3s;
}
.dt-team-mini-card:hover .dt-team-mini-photo { filter: grayscale(0); }
.dt-team-mini-body { padding: 16px 18px; }
.dt-team-mini-body h5 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 3px;
}
.dt-team-mini-body span {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
}

/* ============================================================
   ABOUT — CLOSING CTA BAND
   ============================================================ */
.dt-cta-band {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 56px 56px;
  text-align: center;
  box-shadow: var(--glass-shadow);
}
.dt-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(225,70,70,0.16), transparent 70%);
  pointer-events: none;
}
.dt-cta-band h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  position: relative; z-index: 1;
}
.dt-cta-band p {
  font-size: 15px !important;
  color: var(--muted) !important;
  max-width: 540px;
  margin: 0 auto 28px;
  position: relative; z-index: 1;
}
.dt-cta-band .btn {
  position: relative; z-index: 1;
}
@media (max-width: 767px) {
  .dt-cta-band { padding: 40px 24px; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.dt-contact-hero {
  position: relative;
  z-index: 1;
  /* Top padding clears the fixed site header (~76px from top) with breathing
     room; without this the hero badge/title slide under the navbar. */
  padding: 120px 0 40px;
}

/* Quick-contact channel cards (hero) */
.dt-contact-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 30px 24px;
  height: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .3s, background .3s, box-shadow .3s;
}
.dt-contact-channel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-contact-channel:hover {
  border-color: var(--border-red);
  background: rgba(225,70,70,0.06);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(225,70,70,0.14);
}
.dt-contact-channel-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(225,70,70,0.12);
  border: 1px solid rgba(225,70,70,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--r);
  font-size: 22px;
  position: relative; z-index: 1;
}
.dt-contact-channel h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 4px 0 0 !important;
  position: relative; z-index: 1;
}
.dt-contact-channel p {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  margin: 0 !important;
  position: relative; z-index: 1;
}
.dt-contact-channel a {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  position: relative; z-index: 1;
  transition: color .2s;
}
.dt-contact-channel a:hover { color: var(--r); }
.dt-contact-hero h2 {
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}
.dt-contact-hero p {
  font-size: 1rem !important;
  color: var(--muted) !important;
  line-height: 1.8 !important;
}

.dt-contact-info-box {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px;
  height: 100%;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.dt-contact-info-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
  z-index: 0;
}
.dt-contact-info-box > * { position: relative; z-index: 1; }

.dt-location-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.dt-location-item:last-child { border-bottom: none; }
.dt-location-item img {
  width: 32px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 3px;
}
.dt-location-item h5 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 4px;
}
.dt-location-item p {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  margin: 0;
  line-height: 1.6;
}
.dt-location-item a {
  color: var(--muted) !important;
  font-size: 12px;
  transition: color 0.2s;
}
.dt-location-item a:hover { color: var(--r) !important; }

.dt-contact-detail-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.dt-contact-detail-row:last-child { border-bottom: none; }
.dt-contact-icon {
  width: 36px; height: 36px;
  background: rgba(225,70,70,0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--r);
  font-size: 14px;
  flex-shrink: 0;
}
.dt-contact-detail-row span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted) !important;
  display: block;
  margin-bottom: 4px;
}
.dt-contact-detail-row a,
.dt-contact-detail-row p {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--txt) !important;
  margin: 0 !important;
  line-height: 1.6;
}
.dt-contact-detail-row a:hover { color: var(--r) !important; }

/* Contact-detail block on product pages (.bc-cd-*, e.g. direct-selling): its
   label/value weights (700/600) live in the page's in-body <style>, so a plain
   rule here would lose on source order — !important drops the bold to a normal
   weight at ALL widths, matching the .dt-contact-detail-row block above. */
.bc-cd-item .lbl,
.bc-cd-social .sl { font-weight: 500 !important; }
.bc-cd-item .val,
.bc-cd-item a { font-weight: 400 !important; }

/* Contact form wrapper */
.dt-contact-form-box {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.dt-contact-form-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
  z-index: 0;
}
.dt-contact-form-box > * { position: relative; z-index: 1; }
.dt-contact-form-box h2 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 24px;
}

/* Livewire form inputs override */
.dt-contact-form-box input,
.dt-contact-form-box textarea,
.dt-contact-form-box select,
.contactFormBg input,
.contactFormBg textarea,
.contactFormBg select {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border-radius: 8px !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}
.dt-contact-form-box input::placeholder,
.dt-contact-form-box textarea::placeholder,
.contactFormBg input::placeholder,
.contactFormBg textarea::placeholder {
  color: var(--muted) !important;
}
.dt-contact-form-box input:focus,
.dt-contact-form-box textarea:focus,
.contactFormBg input:focus,
.contactFormBg textarea:focus {
  border-color: rgba(225,70,70,0.45) !important;
  box-shadow: 0 0 0 3px rgba(225,70,70,0.10) !important;
  outline: none !important;
}
.dt-contact-form-box label,
.contactFormBg label {
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.dt-contact-form-box .btn-danger,
.contactFormBg .btn-danger,
.dt-contact-form-box button[type="submit"],
.contactFormBg button[type="submit"] {
  background: linear-gradient(135deg, var(--r), var(--rd)) !important;
  border: none !important;
  /* Force white label — beats the global `.primaryBtn button{color:#e14646}`
     rule that otherwise paints the text red-on-red and makes it disappear. */
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 10px 28px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.dt-contact-form-box .btn-danger:hover,
.contactFormBg .btn-danger:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(225,70,70,0.4) !important;
}

/* Social row inside the info panel */
.dt-contact-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.dt-contact-social > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.dt-contact-social .dt-contact-social-links { display: flex; gap: 10px; }
.dt-contact-social a {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--txt) !important;
  font-size: 14px;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.dt-contact-social a:hover {
  background: var(--r);
  border-color: var(--r);
  color: #fff !important;
  transform: translateY(-2px);
}

/* Supporting image inside the info panel */
.dt-contact-info-img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 14px;
  margin-top: 24px;
  border: 1px solid var(--border);
  display: block;
}

/* Office locations — one neat panel, borderless multi-column list */
.dt-offices-panel {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 44px 48px;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.dt-offices-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.dt-offices-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 34px 48px;
}
/* Each office = open text block, no card/box, with a thin red accent rule */
.dt-offices-list .dt-location-item {
  display: block;
  padding: 2px 0 2px 16px;
  background: none;
  border: none;
  border-left: 2px solid rgba(225,70,70,0.45);
  box-shadow: none;
  border-radius: 0;
}
.dt-offices-list .dt-loc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.dt-offices-list .dt-loc-head img {
  width: 30px;
  height: 21px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex: 0 0 auto;
  margin: 0;
}
.dt-offices-list .dt-loc-head h5 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.3px;
  margin: 0 !important;
}
.dt-offices-list .dt-location-item p {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  margin: 0 0 10px !important;
}
.dt-offices-list .dt-location-item a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--muted) !important;
  transition: color .2s;
}
.dt-offices-list .dt-location-item a i { color: #25D366; }
.dt-offices-list .dt-location-item a:hover { color: var(--r) !important; }

@media (max-width: 575px) {
  .dt-offices-panel { padding: 30px 24px; }
}

/* CTA band — icon + action row enhancements */
.dt-cta-icon {
  width: 62px; height: 62px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(225,70,70,0.28), rgba(225,70,70,0.08));
  border: 1px solid rgba(225,70,70,0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--r);
  font-size: 24px;
  margin-bottom: 18px;
  position: relative; z-index: 1;
  box-shadow: 0 8px 26px rgba(225,70,70,0.18);
}
.dt-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative; z-index: 1;
  margin-top: 4px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footerSec {
  background: var(--bg2) !important;
  border-top: 1px solid var(--border) !important;
}
.footerSec .footerHeaderSec {
  text-align: center;
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
}
.footerSec .footerHeaderSec h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-bottom: 8px;
}
.footerSec .footerHeaderSec h4 {
  font-size: 1rem !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  margin-bottom: 24px;
}
.footerSec .footerBtn .btn {
  background: linear-gradient(135deg, var(--r), var(--rd)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 12px 32px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.footerSec .footerBtn .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(225,70,70,0.4) !important;
}

.footerSec .footerFirstPart p {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  margin: 12px 0 16px !important;
}
.footerSec h5 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--r) !important;
  margin-bottom: 16px;
}
.footerSec .menuLists ul { list-style: none; padding: 0; margin: 0; }
.footerSec .menuLists li { margin-bottom: 8px; }
.footerSec .menuLists li a {
  font-size: 13px !important;
  color: var(--muted) !important;
  transition: color 0.2s !important;
}
.footerSec .menuLists li a:hover { color: #fff !important; }

.footerSec .callUsSec,
.footerSec .mailSec {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.footerSec .callUsSec i,
.footerSec .mailSec i {
  color: var(--r) !important;
  font-size: 14px;
}
.footerSec .callUsSec span,
.footerSec .callUsSec a,
.footerSec .mailSec span,
.footerSec .mailSec a {
  font-size: 13px !important;
  color: var(--muted) !important;
  transition: color 0.2s !important;
}
.footerSec .callUsSec a:hover,
.footerSec .mailSec a:hover { color: #fff !important; }

.footerSec .footerSocialMedia {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.footerSec .footerSocialMedia > div {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.footerSec .footerSocialMedia > div:hover {
  border-color: var(--border-red) !important;
  background: rgba(225,70,70,0.10) !important;
  box-shadow: 0 4px 16px rgba(225,70,70,0.12) !important;
}
.footerSec .footerSocialMedia a { color: var(--muted) !important; font-size: 14px; }
.footerSec .footerSocialMedia a:hover { color: var(--r) !important; }

.footerSec .productsLogos {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 32px 0;
}
.footerSec .productsLogos img {
  filter: brightness(0.6) !important;
  transition: filter 0.2s !important;
}
.footerSec .productsLogos img:hover {
  filter: brightness(1) !important;
}

.footerSec .footerAdditionalMenu {
  padding-bottom: 24px;
}
.footerSec .footerAdditionalMenu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.footerSec .footerAdditionalMenu li,
.footerSec .footerAdditionalMenu a {
  font-size: 12px !important;
  color: var(--muted) !important;
  transition: color 0.2s !important;
}
.footerSec .footerAdditionalMenu a:hover { color: #fff !important; }

.copyrightSec {
  background: #03040c !important;
  border-top: 1px solid var(--border) !important;
  padding: 20px 0 !important;
}
.copyrightSec h5, .copyrightSec h6 {
  font-size: 13px !important;
  color: var(--muted) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}
.copyrightSec strong { color: var(--r) !important; }
.copyRightHeadSub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
   MODAL OVERRIDES
   ============================================================ */
.discoverModal .modal-content {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  overflow: hidden;
}
.discoverModal .modalRowFirstSec {
  background: linear-gradient(160deg, rgba(225,70,70,0.18), rgba(225,70,70,0.06)) !important;
  padding: 32px !important;
  height: 100%;
}
.discoverModal h4, .discoverModal h5 {
  color: #fff !important;
}
.discoverModal p { color: var(--muted) !important; font-size: 13px !important; }
.discoverModal .discoverPhoneSec,
.discoverModal .discoverEmailSec,
.discoverModal .discoverLocationSec {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted) !important;
}
.discoverModal .discoverPhoneSec i,
.discoverModal .discoverEmailSec i,
.discoverModal .discoverLocationSec i {
  color: var(--r) !important;
  margin-top: 2px;
}
.discoverModal .headCloseBtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px 0;
}
.discoverModal .btn-close { filter: invert(1); }
.discoverModal input,
.discoverModal textarea,
.discoverModal select {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--border) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
.discoverModal input::placeholder,
.discoverModal textarea::placeholder { color: var(--muted) !important; }
.discoverModal label { color: var(--muted) !important; font-size: 13px !important; }
.discoverModal .btn-danger,
.discoverModal button[type="submit"] {
  background: linear-gradient(135deg, var(--r), var(--rd)) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.modal { --bs-modal-bg: transparent; }

/* Watch video modal */
#watchvideoModal .modal-content {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
}
#watchvideoModal .modal-header {
  border-bottom: 1px solid var(--border) !important;
}
#watchvideoModal .btn-close { filter: invert(1); }

/* ============================================================
   BREADCRUMB (static/raw pages)
   ============================================================ */
.breadcrumb-item a { color: var(--r) !important; }
.breadcrumb-item.active { color: var(--muted) !important; }
.breadcrumb-item+.breadcrumb-item::before { color: var(--muted) !important; }
.page-hero-bg, .sub-banner, .aboutSecPage, .contacPageSec {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ============================================================
   MISC / SCROLL INDICATOR
   ============================================================ */
.middle { display: flex; justify-content: center; margin-top: 48px; }
.mouse {
  width: 22px; height: 36px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  position: relative;
}
.mouse::before {
  content: '';
  width: 4px; height: 8px;
  background: var(--r);
  border-radius: 4px;
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  animation: scrollDown 1.6s ease-in-out infinite;
}
@keyframes scrollDown {
  0% { opacity:1; top:6px; }
  100% { opacity:0; top:18px; }
}

/* ============================================================
   SECTION HEADING HELPER CLASSES
   ============================================================ */
.dt-mini-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--r);
  margin-bottom: 14px;
}
.dt-mini-head::before, .dt-mini-head::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1.5px;
  background: var(--r);
}
.dt-main-title {
  font-size: clamp(1.5rem, 3vw, 2.3rem) !important;
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}
.dt-sub-text {
  font-size: 15px !important;
  color: var(--muted) !important;
  line-height: 1.75 !important;
  max-width: 540px;
}

/* ============================================================
   LEGAL PAGES (terms, privacy, refund, cookie) — home dt-theme shell
   Self-contained dark-glass layout matching pages/home: decorative
   grid + orbs behind a centred header (eyebrow + title + breadcrumb)
   and the policy copy inside one reading card.

   Theme-aware: the global dt-* tokens are dark-only, so the legal
   surface / ink / border are re-declared here as local --lg-* tokens
   with a light-mode override — the same base-dark + html[data-theme=
   "light"] pattern the navbar, footer and .bc product pages use. Dark
   is the default, so dark mode is visually identical to before.
   ============================================================ */
.dt-legal {
  --lg-card:   var(--card);     /* rgba(255,255,255,0.04) */
  --lg-ink:    #ffffff;         /* headings / title */
  --lg-strong: var(--txt);      /* <strong> */
  --lg-mut:    var(--muted);    /* body + list copy */
  --lg-bd:     var(--border);
  --lg-shadow: var(--glass-shadow);
  --lg-blur:   var(--glass-blur);
  /* clear the fixed .site-navbar (top:18px + bar height) like .bc-hero */
  padding: 150px 0 90px;
}
html[data-theme="light"] .dt-legal {
  --lg-card:   #ffffff;
  --lg-ink:    #181818;
  --lg-strong: #181818;
  --lg-mut:    #46484d;
  --lg-bd:     rgba(108,111,118,0.20);
  --lg-shadow: 0 24px 60px -28px rgba(20,20,45,0.26), 0 2px 6px rgba(20,20,45,0.05);
  --lg-blur:   none;            /* solid card — no glass blur needed on white */
}

.dt-legal-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}
/* Override the global .dt-main-title (#fff !important) so the page title
   switches to dark ink in light mode. */
.dt-legal .dt-main-title { color: var(--lg-ink) !important; }
.dt-legal-head .dt-main-title { margin-bottom: 18px; }

/* Breadcrumb — muted with a red current page */
.dt-legal-crumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--lg-mut);
}
.dt-legal-crumb a {
  color: var(--lg-mut) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.dt-legal-crumb a:hover { color: var(--r) !important; }
.dt-legal-crumb .sep { opacity: 0.5; }
.dt-legal-crumb .current { color: var(--r); font-weight: 600; }

/* Reading card — narrowed for comfortable line length */
.dt-legal-card {
  max-width: 920px;
  margin: 0 auto;
  background: var(--lg-card);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-bd);
  border-radius: 20px;
  padding: 48px 52px;
  box-shadow: var(--lg-shadow);
}

/* Legal typography inside the card */
.dt-legal-card p {
  color: var(--lg-mut) !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  margin: 0 0 18px;
}
.dt-legal-card > :last-child { margin-bottom: 0; }
.dt-legal-card h2,
.dt-legal-card h3 {
  color: var(--lg-ink) !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em;
  margin: 32px 0 14px;
}
.dt-legal-card h2:first-child,
.dt-legal-card h3:first-child { margin-top: 0; }
.dt-legal-card strong { color: var(--lg-strong); font-weight: 600; }
.dt-legal-card a {
  color: var(--r);
  text-decoration: none;
  transition: opacity 0.2s;
}
.dt-legal-card a:hover { text-decoration: underline; }

/* Lists — red dot markers with a soft glow ring */
.dt-legal-card ul,
.dt-legal-card ol {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.dt-legal-card li {
  position: relative;
  color: var(--lg-mut);
  font-size: 15px;
  line-height: 1.8;
  padding-left: 30px;
  margin-bottom: 14px;
}
.dt-legal-card li:last-child { margin-bottom: 0; }
.dt-legal-card ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--r);
  box-shadow: 0 0 0 4px rgba(225,70,70,0.15);
}
.dt-legal-card ol { counter-reset: dt-legal-ol; }
.dt-legal-card ol li { counter-increment: dt-legal-ol; }
.dt-legal-card ol li::before {
  content: counter(dt-legal-ol);
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(225,70,70,0.12);
  color: var(--r);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767.98px) {
  .dt-legal { padding: 120px 0 60px; }
  .dt-legal-card { padding: 30px 22px; border-radius: 16px; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.dt-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}
.z1 { position: relative; z-index: 1; }

/* Responsive */
@media (max-width: 991.98px) {
  /* Hero no longer needs a full viewport once the visual is hidden */
  .dt-hero { min-height: auto; padding: 110px 0 60px; }
  /* AI automation diagram: full-width panel, give node text more room */
  .dt-ai-grid { grid-template-columns: 1fr 56px 1fr; }
  .dt-ai-nc { font-size: 12px; padding: 14px 12px; }
}

@media (max-width: 767px) {
  .dt-stats-bar { grid-template-columns: repeat(2,1fr); }
  .dt-about-badges { flex-direction: column; }
  .dt-hero-visual { height: 280px; }
  .dt-ring-1 { width:220px;height:220px; }
  .dt-ring-2 { width:165px;height:165px; }
  .dt-ring-3 { width:110px;height:110px; }
  .dt-core { width:80px;height:80px;font-size:18px; }
  .dt-section { padding: 60px 0; }
  .dt-section-sm { padding: 44px 0; }

  /* AI automation diagram → stack vertically, drop the centre spine and
     the absolutely-positioned connector lines so nothing overlaps. */
  .dt-ai-panel { padding: 26px 18px; }
  .dt-ai-grid { grid-template-columns: 1fr; gap: 14px; }
  .dt-ai-spine { display: none; }
  .dt-ai-left,
  .dt-ai-right { gap: 14px; }
  .dt-ai-right .dt-ai-nc { flex-direction: row; text-align: left; }
  .dt-ai-left .dt-ai-nc::after,
  .dt-ai-right .dt-ai-nc::before { display: none; }

  /* CTA strip buttons go full width so they don't overflow */
  .dt-cta-strip .dt-btn-primary { display: block; text-align: center; }
}

@media (max-width: 479.98px) {
  /* Single-column stats on the narrowest phones to avoid cramped numbers */
  .dt-stats-bar { grid-template-columns: 1fr 1fr; }
  .dt-about-stat-grid { gap: 14px; }
  .dt-about-stat-card { padding: 18px 14px; }
  .dt-stat-num { font-size: 1.7rem; }
  .dt-section { padding: 48px 0; }
  .dt-hero { padding: 96px 0 48px; }
  .dt-service-card { padding: 24px 20px; }
}

/* About page – hide old legacy wrappers that are now replaced */
.aboutSecPageParent .bannerAboutBg .aboutUsImg img { opacity: 0.8; filter: drop-shadow(0 0 30px rgba(225,70,70,0.25)); }

/* ==========================================================================
   PRODUCT PAGES — dark-theme overlay for imported WP content
   Scoped under .dt-product-content so home/services stay unaffected.
   ========================================================================== */
.dt-product-content {
  position: relative;
  z-index: 1;
  color: var(--muted);
  background: transparent;
  padding-top: 110px;
}

/* Kill light/white backgrounds inherited from the legacy WP theme */
.dt-product-content section,
.dt-product-content .container,
.dt-product-content .container-fluid,
.dt-product-content .row,
.dt-product-content [class*="-sec"],
.dt-product-content [class*="Sec"],
.dt-product-content [class*="_sec"],
.dt-product-content [class*="BodySec"],
.dt-product-content [class*="weProvide"],
.dt-product-content [class*="whyDirectSelling"],
.dt-product-content [class*="directWhyChoose"],
.dt-product-content [class*="WhyChoose"],
.dt-product-content [class*="featuresBox"],
.dt-product-content [class*="Banner"],
.dt-product-content [class*="banner"] {
  background: transparent !important;
  background-image: none !important;
  color: inherit;
}

/* Section spacing matching home page rhythm */
.dt-product-content section {
  padding: 70px 0;
  position: relative;
  z-index: 1;
}
.dt-product-content section:first-of-type { padding-top: 40px; }

/* Headings — light, dt typography */
.dt-product-content h1,
.dt-product-content h2,
.dt-product-content h3,
.dt-product-content h4,
.dt-product-content h5,
.dt-product-content h6 {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
.dt-product-content h1 { font-size: clamp(1.8rem, 3.6vw, 3rem) !important; line-height: 1.15; margin-bottom: 18px; }
.dt-product-content h2 { font-size: clamp(1.4rem, 2.4vw, 2rem) !important; line-height: 1.2;  margin-bottom: 14px; }
.dt-product-content h3 { font-size: 1.25rem !important; margin-bottom: 12px; }
.dt-product-content h4 { font-size: 1.05rem !important; margin-bottom: 10px; }
.dt-product-content h1 strong,
.dt-product-content h2 strong { color: var(--r) !important; }

/* Body copy + lists */
.dt-product-content p,
.dt-product-content li,
.dt-product-content span,
.dt-product-content small,
.dt-product-content td,
.dt-product-content th,
.dt-product-content label {
  color: var(--muted) !important;
}
.dt-product-content p { line-height: 1.75; margin-bottom: 14px; }
.dt-product-content ul,
.dt-product-content ol { padding-left: 1.25rem; }
.dt-product-content li { margin-bottom: 6px; }
.dt-product-content strong { color: #fff !important; }
/* GLOBAL tick fix (all pages): the `.dt-product-content span{var(--muted)}` reset
   above greys the check chips' <span> (.ck / .df-tick) AND the <i> check inside,
   washing the tick out — worst in light mode. Re-assert the WHITE check on its
   red chip. Ticks only; higher specificity beats the muted reset in any order. */
.dt-product-content .ck, .dt-product-content .df-tick,
.dt-product-content .ck i, .dt-product-content .df-tick i { color: #fff !important; }

/* Links */
.dt-product-content a:not(.btn):not(button):not([class*="dt-"]) {
  color: var(--r);
  text-decoration: none;
  transition: color .2s;
}
.dt-product-content a:not(.btn):not(button):not([class*="dt-"]):hover { color: #fff; }

/* Glassmorphism for legacy card/box/panel wrappers
   (anything that looks like a "card" or "box" container). The :not()
   chain excludes the testimonial cards on /products — those are an
   intentional white card design that bring their own styling and would
   otherwise pick up the dark glass + 22px padding from this wildcard
   since "testimonial-card", "testimonial-card__head", etc. all contain
   the "-card" substring. */
.dt-product-content .card:not([class*="testimonial-card"]),
.dt-product-content .box,
.dt-product-content [class*="-card"]:not([class*="testimonial-card"]),
.dt-product-content [class*="_card"]:not([class*="testimonial-card"]),
.dt-product-content [class*="-box"]:not(.dt-about-stat-box):not(.dt-cta-strip),
.dt-product-content [class*="featuresBox"],
.dt-product-content [class*="directWhyChoose"] > div,
.dt-product-content [class*="WhyChoose"] > div,
.dt-product-content [class*="weProvide"] [class*="col-"] > div,
.dt-product-content .row [class*="col-"] > .accordion-item {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  padding: 22px;
  color: var(--muted) !important;
  transition: transform .25s, border-color .25s, background .25s;
}
.dt-product-content .card:not([class*="testimonial-card"]):hover,
.dt-product-content [class*="-card"]:not([class*="testimonial-card"]):hover,
.dt-product-content [class*="_card"]:not([class*="testimonial-card"]):hover {
  border-color: rgba(225,70,70,0.35) !important;
  background: rgba(225,70,70,0.07) !important;
  transform: translateY(-3px);
}

/* Buttons — red gradient like dt-btn-primary */
.dt-product-content .btn,
.dt-product-content button.btn-danger,
.dt-product-content button.btn-primary,
.dt-product-content .btn-danger,
.dt-product-content .btn-primary {
  background: linear-gradient(135deg, var(--r), var(--rd)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  box-shadow: 0 8px 24px rgba(225,70,70,0.30);
  transition: transform .2s, box-shadow .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dt-product-content .btn:hover,
.dt-product-content button.btn-danger:hover,
.dt-product-content button.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(225,70,70,0.42);
  color: #fff !important;
}

/* Tabs / pills */
.dt-product-content .nav-pills .nav-link,
.dt-product-content [class*="nav-link"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: 10px !important;
  margin-bottom: 8px;
  padding: 12px 16px;
}
.dt-product-content .nav-pills .nav-link.active,
.dt-product-content [class*="nav-link"].active {
  background: linear-gradient(135deg, rgba(225,70,70,0.18), rgba(159,0,0,0.10)) !important;
  border-color: rgba(225,70,70,0.35) !important;
  color: #fff !important;
}

/* Tab content panel that holds active pill body */
.dt-product-content .tab-content,
.dt-product-content [class*="tab-pane"] {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  color: var(--muted);
}

/* Tables */
.dt-product-content table {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.dt-product-content th {
  color: #fff !important;
  background: rgba(255,255,255,0.04);
  font-weight: 600 !important;
  padding: 14px 16px;
  text-align: left;
}
.dt-product-content td {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}

/* Images */
.dt-product-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.dt-product-content img.banner-img,
.dt-product-content img[src*="banner"] {
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

/* FAQ accordions */
.dt-product-content .accordion-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  margin-bottom: 12px;
  overflow: hidden;
}
.dt-product-content .accordion-button {
  background: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 18px 22px !important;
  box-shadow: none !important;
}
.dt-product-content .accordion-button:not(.collapsed) {
  background: rgba(225,70,70,0.08) !important;
  color: #fff !important;
}
.dt-product-content .accordion-button::after { filter: invert(1) brightness(2); }
.dt-product-content .accordion-body { color: var(--muted) !important; padding: 6px 22px 22px !important; }

/* Contact form panel injected at bottom */
.dt-product-content .getinTochSecCust,
.dt-product-content .getInTochSecCust { margin-top: 40px; padding: 60px 0; }
.dt-product-content .getinTochSecCust .col-md-5,
.dt-product-content .getInTochSecCust .col-md-5,
.dt-product-content .getinTochSecCust .col-md-7,
.dt-product-content .getInTochSecCust .col-md-7 {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

@media (max-width: 767px) {
  .dt-product-content section { padding: 50px 0; }
  .dt-product-content { padding-top: 90px; }
}

/* ==========================================================================
   PRODUCT PAGES — Override legacy underscore-named light backgrounds
   The imported WP <style> blocks paint white/light-pink onto class names
   like .bot_service_box, .company_experience .box_container, .all_type,
   .why_ioss_ai, .integrations, .main_feature, .cta-lms, .step-proces,
   .foot-cta_getstrat. These don't match the existing [class*="-box"]
   hyphen wildcards, so we neutralize them here.
   ========================================================================== */

/* Strip light backgrounds from section-level legacy wrappers */
.dt-product-content .company_experience,
.dt-product-content .all_type,
.dt-product-content .why_ioss_ai,
.dt-product-content .integrations,
.dt-product-content .main_feature,
.dt-product-content .gradient_bg_vertical,
.dt-product-content .features,
.dt-product-content .step-proces-container,
.dt-product-content .bot_service_box {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Glassmorphism for legacy card containers */
.dt-product-content .company_experience .box_container,
.dt-product-content .bot_service_box .items.box,
.dt-product-content .all_type .boxy_items,
.dt-product-content .why_ioss_ai .why_ioss_boxes .item_box,
.dt-product-content .features .features_main .right-side,
.dt-product-content .integrations .scrolly_container .scroll_item,
.dt-product-content .step-proces,
.dt-product-content .foot-cta_getstrat,
.dt-product-content .cta-lms {
  background: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform .25s, border-color .25s, background .25s;
}

.dt-product-content .bot_service_box .items.box:hover,
.dt-product-content .all_type .boxy_items:hover,
.dt-product-content .why_ioss_ai .why_ioss_boxes .item_box:hover,
.dt-product-content .integrations .scrolly_container .scroll_item:hover {
  border-color: rgba(225,70,70,0.35) !important;
  background: rgba(225,70,70,0.07) !important;
  transform: translateY(-3px);
}

/* Inner stat-tiles inside the white stats box (e.g. 5000+ / 1000K+) */
.dt-product-content .company_experience .box_container .items {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

/* Force text colors inside legacy cards — legacy CSS sets dark navy/grey
   which becomes invisible on the dark background. */
.dt-product-content .bot_service_box .items.box h3,
.dt-product-content .bot_service_box .items.box h4,
.dt-product-content .all_type .boxy_items h3,
.dt-product-content .all_type .boxy_items h4,
.dt-product-content .why_ioss_ai .why_ioss_boxes .item_box h3,
.dt-product-content .why_ioss_ai .why_ioss_boxes .item_box h4,
.dt-product-content .integrations .scrolly_container .scroll_item h3,
.dt-product-content .integrations .scrolly_container .scroll_item h4,
.dt-product-content .features .features_main .right-side h3,
.dt-product-content .features .features_main .right-side h4,
.dt-product-content .step-proces h3,
.dt-product-content .step-proces h4,
.dt-product-content .foot-cta_getstrat h3,
.dt-product-content .foot-cta_getstrat h4,
.dt-product-content .company_experience .box_container .items span:nth-child(1) {
  color: #fff !important;
}

.dt-product-content .bot_service_box .items.box p,
.dt-product-content .all_type .boxy_items p,
.dt-product-content .why_ioss_ai .why_ioss_boxes .item_box p,
.dt-product-content .integrations .scrolly_container .scroll_item p,
.dt-product-content .features .features_main .right-side p,
.dt-product-content .step-proces p,
.dt-product-content .foot-cta_getstrat p,
.dt-product-content .company_experience .box_container .items span,
.dt-product-content .company_experience .box_container .items span:nth-child(2) {
  color: var(--muted) !important;
}

/* Headline accent — coloured eyebrow labels remain branded red */
.dt-product-content .heading_seccondary span,
.dt-product-content .heading_seccondary > span:first-child {
  color: var(--r) !important;
}
.dt-product-content .heading_seccondary h2,
.dt-product-content .heading_seccondary h3 {
  color: #fff !important;
}

/* Counter numerals / red text accents kept on brand red */
.dt-product-content .red_text,
.dt-product-content .sec_color {
  color: var(--r) !important;
}

/* Avatar icon tiles — keep the brand red square but tighten on dark */
.dt-product-content .bot_service_box .items.box .avathar,
.dt-product-content .all_type .boxy_items .avathar {
  background-color: var(--r) !important;
  box-shadow: 0 6px 18px rgba(225,70,70,0.30);
}

/* ==========================================================================
   PRODUCT PAGES — Broader cleanup of legacy WP class backgrounds.
   Catches the lowercase-sec, Bg/Box-suffix, and product-specific class
   names from public/assets/css/style.css that fall outside the earlier
   wildcards. Uses case-insensitive [class*="..." i] flags. Applies to all
   8 seeded products (desklog, taxi, flight, ecommerce, lms, direct-selling,
   designflow, ai-chatbot).
   ========================================================================== */

/* Strip all light/white backgrounds from legacy section/box wrappers */
.dt-product-content [class*="sec" i]:not([class*="dt-"]):not(.dt-cta-strip),
.dt-product-content [class*="Bg"]:not([class*="banner" i]):not([class*="dt-"]),
.dt-product-content [class*="bg" i]:not([class*="banner" i]):not([class*="dt-"]):not([class*="gradient" i]),
.dt-product-content [class*="Box" i]:not([class*="banner" i]):not([class*="dt-"]):not(.bx-ai-check),
.dt-product-content [class*="Tracking"],
.dt-product-content [class*="weProvide" i],
.dt-product-content [class*="directWhy" i],
.dt-product-content [class*="directSelling" i],
.dt-product-content [class*="desklog" i],
.dt-product-content [class*="cab" i],
.dt-product-content [class*="duffel"],
.dt-product-content [class*="easy-Journey"],
.dt-product-content [class*="flight"],
.dt-product-content [class*="ecommerce" i],
.dt-product-content [class*="ecoomerce" i],
.dt-product-content [class*="student" i],
.dt-product-content [class*="lms" i],
.dt-product-content [class*="benifits" i],
.dt-product-content [class*="crm" i],
.dt-product-content [class*="bot_service"],
.dt-product-content .all_type,
.dt-product-content .features,
.dt-product-content .integrations,
.dt-product-content .why_ioss_ai,
.dt-product-content .gradient_bg_vertical,
.dt-product-content .main_feature,
.dt-product-content .diffrntTypesTracking,
.dt-product-content .PlatformDesklogsec,
.dt-product-content .PlatformDesklogFeature,
.dt-product-content .step-proces-container,
.dt-product-content .employeeSummarySec,
.dt-product-content .desklogRealTimeFeat,
.dt-product-content .ai_bot_faq,
.dt-product-content .faq-blog-ai {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Card-like containers — give them the dark glassmorphism look */
.dt-product-content .desklogFeatureBackbg,
.dt-product-content .desklogFeatureDetail,
.dt-product-content .employeeSummarySec summary,
.dt-product-content .employeeSummarySec details,
.dt-product-content .cabPanelBgBox,
.dt-product-content .cabGlimpsSec .glimpzBox,
.dt-product-content .glimpzBox,
.dt-product-content .ecommerceBgBox,
.dt-product-content .ecommerceOurServicebgBox,
.dt-product-content .studentTrackingBgBox,
.dt-product-content .whyCrmBgBox,
.dt-product-content .crmDoBox,
.dt-product-content .benifitsResourcesBox,
.dt-product-content .duffel-integra-box,
.dt-product-content .easy-Journey-box,
.dt-product-content .features-image_icon,
.dt-product-content .ioss-feature-card,
.dt-product-content .ioss-preview-card,
.dt-product-content .ioss-card,
.dt-product-content .ioss-sec-compliance-card,
.dt-product-content .ioss-bg-card-highlight,
.dt-product-content .ioss_timeline-card,
.dt-product-content .item_box,
.dt-product-content .scroll_item,
.dt-product-content .step-proces,
.dt-product-content .foot-cta_getstrat {
  background: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform .25s, border-color .25s, background .25s;
}

.dt-product-content .desklogFeatureBackbg:hover,
.dt-product-content .cabPanelBgBox:hover,
.dt-product-content .glimpzBox:hover,
.dt-product-content .ecommerceBgBox:hover,
.dt-product-content .studentTrackingBgBox:hover,
.dt-product-content .whyCrmBgBox:hover,
.dt-product-content .crmDoBox:hover,
.dt-product-content .benifitsResourcesBox:hover,
.dt-product-content .duffel-integra-box:hover,
.dt-product-content .easy-Journey-box:hover,
.dt-product-content .ioss-feature-card:hover,
.dt-product-content .ioss-preview-card:hover,
.dt-product-content .ioss-card:hover,
.dt-product-content .ioss-bg-card-highlight:hover {
  border-color: rgba(225,70,70,0.35) !important;
  background: rgba(225,70,70,0.07) !important;
  transform: translateY(-3px);
  filter: none !important;
}

/* Force headings + body text inside legacy product cards to be visible */
.dt-product-content .desklogFeatureBackbg h3,
.dt-product-content .desklogFeatureBackbg h4,
.dt-product-content .desklogFeatureBackbg h5,
.dt-product-content .desklogFeatureBackbg h6,
.dt-product-content .desklogFeatureDetail h3,
.dt-product-content .desklogFeatureDetail h4,
.dt-product-content .desklogFeatureSec h3,
.dt-product-content .desklogFeatureSec h4,
.dt-product-content .emplyeeprdHeadPara h3,
.dt-product-content .emplyeeprdHeadPara h4,
.dt-product-content .diffrntTypesHeadText h3,
.dt-product-content .diffrntTypesHeadText h4,
.dt-product-content .PlatformDesklogHeadPara h3,
.dt-product-content .PlatformDesklogHeadPara h4,
.dt-product-content .desklogDataPrivacyHeadSec h3,
.dt-product-content .desklogDataPrivacyHeadSec h4,
.dt-product-content .tryFreeDemoSec h3,
.dt-product-content .tryFreeDemoSec h4,
.dt-product-content .employeeandProductHeadSec h3,
.dt-product-content .employeeandProductHeadSec h4,
.dt-product-content .cabPanelBgBox h3,
.dt-product-content .cabPanelBgBox h4,
.dt-product-content .cabPanelBgBox h5,
.dt-product-content .glimpzBox h3,
.dt-product-content .glimpzBox h4,
.dt-product-content .glimpzBox h5,
.dt-product-content .ecommerceBgBox h3,
.dt-product-content .ecommerceBgBox h4,
.dt-product-content .ecommerceBgBox h5,
.dt-product-content .studentTrackingBgBox h3,
.dt-product-content .studentTrackingBgBox h4,
.dt-product-content .studentTrackingBgBox h5,
.dt-product-content .whyCrmBgBox h3,
.dt-product-content .whyCrmBgBox h4,
.dt-product-content .whyCrmBgBox h5,
.dt-product-content .crmDoBox h3,
.dt-product-content .crmDoBox h4,
.dt-product-content .crmDoBox h5,
.dt-product-content .benifitsResourcesBox h3,
.dt-product-content .benifitsResourcesBox h4,
.dt-product-content .benifitsResourcesBox h5,
.dt-product-content .duffel-integra-box h3,
.dt-product-content .duffel-integra-box h4,
.dt-product-content .duffel-integra-box h5,
.dt-product-content .easy-Journey-box h3,
.dt-product-content .easy-Journey-box h4,
.dt-product-content .easy-Journey-box h5,
.dt-product-content .ioss-feature-card h3,
.dt-product-content .ioss-feature-card h4,
.dt-product-content .ioss-feature-card h5,
.dt-product-content .ioss_timeline-card h3,
.dt-product-content .ioss_timeline-card h4,
.dt-product-content .ioss_timeline-card h5,
.dt-product-content .employeeSummarySec summary,
.dt-product-content .employeeSummarySec h3,
.dt-product-content .employeeSummarySec h4,
.dt-product-content .bannerHeadDetails h2,
.dt-product-content .bannerHeadDetails h3 {
  color: #fff !important;
}

.dt-product-content .desklogFeatureBackbg p,
.dt-product-content .desklogFeatureDetail p,
.dt-product-content .desklogFeatureSec p,
.dt-product-content .desklogBodySec p,
.dt-product-content .emplyeeprdHeadPara,
.dt-product-content .emplyeeprdHeadPara p,
.dt-product-content .diffrntTypesHeadText p,
.dt-product-content .PlatformDesklogHeadPara p,
.dt-product-content .desklogDataPrivacyHeadSec p,
.dt-product-content .tryFreeDemoSec p,
.dt-product-content .employeeandProductHeadSec p,
.dt-product-content .employeeandProductSec p,
.dt-product-content .employeeSummarySec p,
.dt-product-content .employeeSummarySec details,
.dt-product-content .cabPanelBgBox p,
.dt-product-content .glimpzBox p,
.dt-product-content .ecommerceBgBox p,
.dt-product-content .studentTrackingBgBox p,
.dt-product-content .whyCrmBgBox p,
.dt-product-content .crmDoBox p,
.dt-product-content .benifitsResourcesBox p,
.dt-product-content .duffel-integra-box p,
.dt-product-content .easy-Journey-box p,
.dt-product-content .ioss-feature-card p,
.dt-product-content .ioss_timeline-card p,
.dt-product-content .bannerHeadDetails,
.dt-product-content .bannerHeadDetails p {
  color: var(--muted) !important;
}

/* Loose text nodes inside product sections (legacy uses raw text in divs) */
.dt-product-content .desklogBodySec,
.dt-product-content .emplyeeprdHeadPara,
.dt-product-content .diffrntTypesHeadText,
.dt-product-content .PlatformDesklogHeadPara,
.dt-product-content .desklogDataPrivacyHeadSec,
.dt-product-content .tryFreeDemoSec,
.dt-product-content .employeeandProductHeadSec,
.dt-product-content .desklogFeatureDetail,
.dt-product-content .cabPnelHead,
.dt-product-content .cabGlimpsHeadText {
  color: var(--muted) !important;
}

/* Owl carousel item cards inside product pages */
.dt-product-content .owl-carousel .item,
.dt-product-content .owl-carousel .scroll_item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}

/* ==========================================================================
   BLOG BODY — keep imported images inside the article column.
   Legacy WP imgs carry width="946|958|1030" HTML attrs, and the parent
   .news-details-container uses display:inline-block which lets it grow
   to the image's native width and overflow the page. Force the wrapper
   to block + max-width:100% so it can't outgrow its column, and cap
   every image at the column width while keeping the existing width:100%
   fill behaviour from style.css.
   ========================================================================== */
.news-details-container {
  display: block !important;
  max-width: 100%;
  overflow-x: clip;
}
.news-details-container img,
.news-details-container svg,
.news-details-container iframe,
.news-details-container video {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}

/* (Removed: legacy "INTERVIEW PHASES" dark-skin overrides. The redesigned
   /interview-phases page — static-pages/interview-phases.html — is now fully
   self-contained and theme-aware, so these high-specificity .dt-product-content
   #content rules only fought it: forcing the intro/button text to #d6d6d8 / red
   and wrapping .ip-body in a dark-glass "outer box". Page owns its own styling.) */

/* ============================================================
   LEGAL PAGES — Cookie types table
   ============================================================ */
.legal-cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-size: .92rem;
}
.legal-cookie-table thead tr {
  background: linear-gradient(135deg, var(--r), var(--rd));
}
.legal-cookie-table thead th {
  padding: 12px 18px;
  text-align: left;
  color: #fff;
  font-weight: 700;
  letter-spacing: .03em;
  font-size: .85rem;
  text-transform: uppercase;
}
.legal-cookie-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .18s;
}
.legal-cookie-table tbody tr:hover {
  background: var(--glass-2);
}
.legal-cookie-table tbody td {
  padding: 12px 18px;
  color: var(--txt);
  vertical-align: top;
  line-height: 1.55;
}
.legal-cookie-table tbody td:first-child {
  font-weight: 600;
  color: var(--r);
  white-space: nowrap;
}
@media (max-width: 575px) {
  .legal-cookie-table,
  .legal-cookie-table thead,
  .legal-cookie-table tbody,
  .legal-cookie-table th,
  .legal-cookie-table td,
  .legal-cookie-table tr { display: block; }
  .legal-cookie-table thead { display: none; }
  .legal-cookie-table tbody td {
    padding: 8px 14px;
    white-space: normal;
  }
  .legal-cookie-table tbody td:first-child::before {
    content: attr(data-label) ': ';
    font-weight: 700;
    color: var(--r);
  }
  .legal-cookie-table tbody tr {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
}

/* ============================================================
   MOBILE — GLASSY / SHINY CARDS
   Touch devices never fire :hover, so the glass cards otherwise
   sit flat. On phones we bake the "lit glass" look in by default:
   a diagonal highlight + soft vertical sheen layered into the
   background, a brighter rim, and an inset top highlight so each
   card reads as a polished pane of glass. Layered backgrounds are
   used (not ::before/::after) to avoid clashing with the shine
   pseudo-elements some of these cards already define.
   ============================================================ */
@media (max-width: 767.98px) {
  .dt-feature-card,
  .dt-service-card,
  .dt-about-stat-card,
  .dt-sec-card,
  .dt-preview-card,
  .dt-ai-panel,
  .dt-choose-item {
    background:
      linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 30%, transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
      rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    box-shadow:
      0 8px 26px rgba(0,0,0,0.45),
      0 1px 0 rgba(255,255,255,0.22) inset,
      0 -16px 28px -18px rgba(255,255,255,0.10) inset !important;
  }

  /* A crisp specular streak running across the top edge of each card. */
  .dt-feature-card,
  .dt-service-card,
  .dt-about-stat-card,
  .dt-sec-card,
  .dt-preview-card {
    position: relative;
    overflow: hidden;
  }
  .dt-feature-card::before,
  .dt-service-card::before {
    background:
      linear-gradient(115deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.04) 22%, transparent 50%) !important;
  }
}