/* =========================================================================
   Dhanfy — Redesign Theme
   Loaded LAST, after all legacy vendor CSS, so it wins the cascade and
   re-skins the existing Bootstrap/Vuesax/themefisher markup without any
   HTML/PHP changes. Nothing below removes functionality — it only
   restyles existing classes (cards, buttons, tables, forms, sidebar,
   topbar, badges, alerts) plus the DataTables and Bootstrap datepicker
   plugin chrome that a few pages rely on.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Dark navy theme (v2) — flipped from the original light palette so the
   admin panel and logged-in user site match the marketing site's dark
   theme. Because almost every rule in this file was already written
   against these variables (a deliberate choice from the first redesign
   pass), changing the values here re-themes cards, tables, forms, the
   sidebar, topbar, badges, alerts and buttons everywhere in one place —
   no need to touch the ~45 individual view files. The "soft" variants
   below are solid (opaque) dark tints rather than translucent, both so
   they still work as opaque gradient stops (login/auth page backgrounds)
   and so badge/alert chips read as an intentional dark chip rather than a
   washed-out translucent smear. */
:root {
  --dh-bg: #0a0e27;
  --dh-surface: #121a3a;
  --dh-surface-2: #161f45;
  --dh-border: rgba(255, 255, 255, 0.1);
  --dh-text: #eef1fb;
  --dh-text-muted: #9aa3c7;
  --dh-accent: #6366f1;
  --dh-accent-dark: #8385f5;
  --dh-accent-soft: #1e2153;
  --dh-accent-soft-text: #a5b4fc;
  --dh-accent-glow: rgba(99, 102, 241, 0.35);
  --dh-success: #22c55e;
  --dh-success-soft: #0f2e22;
  --dh-success-soft-text: #6ee7b7;
  --dh-danger: #f87171;
  --dh-danger-soft: #3a1418;
  --dh-danger-soft-text: #fca5a5;
  --dh-warning: #fbbf24;
  --dh-warning-soft: #3a2a08;
  --dh-warning-soft-text: #fcd34d;
  --dh-info: #38bdf8;
  --dh-info-soft: #0c2836;
  --dh-info-soft-text: #7dd3fc;
  --dh-radius-sm: 8px;
  --dh-radius: 12px;
  --dh-radius-lg: 16px;
  --dh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --dh-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --dh-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --dh-sidebar-bg: #0d1330;
  --dh-sidebar-text: #c7cce3;
  --dh-sidebar-text-active: #ffffff;
}

* { box-sizing: border-box; }

html body,
body#body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: var(--dh-bg) !important;
  color: var(--dh-text) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.brand-text, .card-title, .menu-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
  color: var(--dh-text) !important;
  letter-spacing: -0.01em;
}
/* Explicit px sizes for every heading level — the underlying page CSS sizes
   headings in rem too, against that same broken 10px/14px root, so without
   this override every heading on the site would also render far smaller
   than it looks like it should. */
h1 { font-size: 32px !important; }
h2 { font-size: 28px !important; }
h3 { font-size: 22px !important; }
h4 { font-size: 18px !important; }
h5 { font-size: 15px !important; }
h6 { font-size: 13px !important; }

a { color: var(--dh-accent); }
a:hover { color: var(--dh-accent-dark); }

/* Several stat/data tiles on the user site (.dash / .dash1) intentionally
   use a dark navy or indigo background with a page-level <style> block, and
   put their labels in <h4 class="title">. The global heading rule above
   forces dark text everywhere, which made those labels unreadable on their
   own dark tiles (dark text on dark background). Force them back to white,
   scoped only to those tiles so section headings elsewhere stay dark-on-light. */
.dash h1, .dash h2, .dash h3, .dash h4, .dash h5, .dash h6, .dash .title,
.dash1 h1, .dash1 h2, .dash1 h3, .dash1 h4, .dash1 h5, .dash1 h6, .dash1 .title {
  color: #ffffff !important;
}
/* Footer copyright text (h5/h6) sits on the dark footer background too */
footer#footer h1, footer#footer h2, footer#footer h3,
footer#footer h4, footer#footer h5, footer#footer h6 {
  color: var(--dh-sidebar-text) !important;
}
footer#footer h6 a { color: #ffffff !important; }

/* ---------- Cards ---------- */
.card {
  background: var(--dh-surface) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius) !important;
  box-shadow: var(--dh-shadow-sm) !important;
  margin-bottom: 24px;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--dh-border) !important;
  padding: 20px 24px !important;
}
.card-header .card-title, .card-header h4 {
  font-size: 16.8px !important;
  margin: 0 !important;
}
.card-body, .card-content .card-body, .card-block {
  padding: 24px !important;
}
.card.bg-authentication { box-shadow: var(--dh-shadow-lg) !important; border-radius: var(--dh-radius-lg) !important; overflow: hidden; }
/* The admin login's branding image is uploaded by the site owner (Company
   Info settings) — if it's a graphic with a baked-in white background
   (like the ISO badge images on the marketing site), floating it directly
   on the new dark login card would look like a stray white box. Give it
   the same light backdrop treatment defensively; harmless if the image
   already has a transparent background. */
.card.bg-authentication img[alt="branding logo"] {
  background: #ffffff;
  border-radius: var(--dh-radius);
  padding: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--dh-radius-sm) !important;
  font-weight: 600 !important;
  padding: 10.4px 20.8px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  height: auto !important;
  max-width: 100%;
  word-break: break-word;
  transition: all 0.15s ease;
  box-shadow: none !important;
}
/* Small inline icon/action buttons (table row actions etc.) should stay
   compact — the rules above are for full-size text buttons. */
.btn.btn-sm, .btn-icon {
  padding: 6.4px 9.6px !important;
  font-size: 14.4px !important;
}
/* .btn-fw ("fixed width") is the vendor class most row-action buttons
   (Edit, on nearly every admin table) carry — it pins the button to a
   narrow fixed px width that was sized for the old, much smaller padding/
   font. With this theme's larger button padding, that fixed width is no
   longer wide enough, so "Edit" wraps into "Edi"/"t" and blows up the row
   height on every single admin table. Let it size to its content instead. */
.btn.btn-fw {
  width: auto !important;
  white-space: nowrap !important;
  padding: 6.4px 12px !important;
  font-size: 14.4px !important;
}
/* Row-action buttons (Edit/Delete/Earning etc. in admin tables) sit right
   next to each other in the markup with no spacing at all — give them a
   consistent gap so they don't read as one squeezed-together block. */
.table td .btn {
  margin: 2px 6px 2px 0 !important;
}
.table td .btn:last-child {
  margin-right: 0 !important;
}
.btn-primary {
  background-color: var(--dh-accent) !important;
  border-color: var(--dh-accent) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--dh-accent-dark) !important;
  border-color: var(--dh-accent-dark) !important;
}
.btn-danger { background-color: var(--dh-danger) !important; border-color: var(--dh-danger) !important; }
.btn-success { background-color: var(--dh-success) !important; border-color: var(--dh-success) !important; }
.btn-info { background-color: var(--dh-info) !important; border-color: var(--dh-info) !important; }
.btn-icon.scroll-top { background-color: var(--dh-accent) !important; border-radius: 50% !important; }

/* Custom (non-Bootstrap) button classes used across the public/user pages
   (btn-main, btn_half, signin_btn, start_btn). These carry the base .btn
   class too, but a few pages also define their own fixed width/font-size
   for them in a page-level <style> block, which can force text to overflow
   the button on smaller screens. The double-class selectors below have
   higher specificity than those single-class page rules, so they safely
   win the cascade without editing every page. */
.btn.btn-main, .btn.signin_btn, .btn.start_btn {
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  height: auto !important;
  line-height: 1.4 !important;
  font-size: 16px !important;
  padding: 10.4px 20.8px !important;
  word-break: break-word;
}
/* btn_half is used in pairs (e.g. "Transfer To Bank" / "View Detail" side by
   side on the dashboard tiles) — the class name says "half" for a reason.
   Forcing width:auto here (like the other custom button classes above) made
   the pair too wide to fit together, so they wrapped onto a second line and
   made that tile taller than its neighbors, throwing off row alignment.
   Give these an actual ~47% width with wrapping allowed inside the button
   instead, so the pair stays side by side at any reasonable tile width. */
.btn.btn_half {
  display: inline-block;
  width: 47%;
  max-width: 100%;
  white-space: normal !important;
  height: auto !important;
  line-height: 1.3 !important;
  font-size: 14.4px !important;
  padding: 8px 10px !important;
  margin-bottom: 6px;
  vertical-align: top;
  word-break: break-word;
}
/* These four custom classes are the ones several user-site pages set to a
   plain dark gray (#2e2e2e) via an inline style= attribute — that read
   fine as a dark button on the old light page, but nearly disappears
   against the new dark page background. A class selector with !important
   beats a plain inline style (which has none), so this repaints them with
   the same accent gradient used on the marketing buttons without touching
   the .php files. */
.btn.btn-main, .btn.signin_btn, .btn.start_btn, .btn.btn_half {
  background: linear-gradient(90deg, var(--dh-accent), #8b5cf6) !important;
  border: none !important;
  color: #ffffff !important;
}
.btn.btn-main:hover, .btn.signin_btn:hover, .btn.start_btn:hover, .btn.btn_half:hover {
  filter: brightness(1.1);
  color: #ffffff !important;
}
.btn.btn-main:disabled, .btn.btn-main[disabled] { filter: grayscale(0.6) brightness(0.7); }

/* The dashboard/work/transfer-to-bank stat tiles (.dash, .dash1) are
   themselves painted with an indigo/violet background, so a button in the
   same indigo/violet gradient all but disappears on top of it (barely any
   contrast between the two). These tiles are the only place that gradient
   button sits directly on a same-color background, so just for buttons
   inside them: swap to a solid white pill with accent-colored text --
   high contrast against the tile, still reads as "on brand" with the same
   accent color, and doesn't touch how these buttons look anywhere else on
   the site (e.g. the login/hero buttons on the plain dark page background,
   which already contrast fine). */
.dash .btn.btn-main, .dash .btn.signin_btn, .dash .btn.start_btn, .dash .btn.btn_half,
.dash1 .btn.btn-main, .dash1 .btn.signin_btn, .dash1 .btn.start_btn, .dash1 .btn.btn_half {
  background: #ffffff !important;
  color: var(--dh-accent) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.dash .btn.btn-main:hover, .dash .btn.signin_btn:hover, .dash .btn.start_btn:hover, .dash .btn.btn_half:hover,
.dash1 .btn.btn-main:hover, .dash1 .btn.signin_btn:hover, .dash1 .btn.start_btn:hover, .dash1 .btn.btn_half:hover {
  background: #f3f4f6 !important;
  color: var(--dh-accent-dark) !important;
  filter: none;
}
.dash .btn.btn-main:disabled, .dash .btn.btn-main[disabled],
.dash1 .btn.btn-main:disabled, .dash1 .btn.btn-main[disabled] {
  background: #d1d5db !important;
  color: #6b7280 !important;
  filter: none;
  box-shadow: none;
}

/* Equal-height cards: the dashboard/work stat tiles sit in a plain
   Bootstrap .row (not flex by default in this template), so one tile with
   more content or wrapped buttons grows taller while its neighbors don't,
   breaking the row's alignment. Where a row contains these tiles, make it
   a flex row so every tile in it matches the tallest one. */
.row:has(> [class*="col-"] > .service-item) {
  display: flex;
  flex-wrap: wrap;
}
.row:has(> [class*="col-"] > .service-item) > [class*="col-"] {
  display: flex;
}
.service-item.dash, .service-item.dash1 {
  width: 100%;
}

/* ---------- Forms ---------- */
.form-control {
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-sm) !important;
  padding: 10.4px 14.4px !important;
  font-size: 16px !important;
  color: var(--dh-text) !important;
  background-color: var(--dh-surface) !important;
}
.form-control:focus {
  border-color: var(--dh-accent) !important;
  box-shadow: 0 0 0 3px var(--dh-accent-glow) !important;
}
label { font-weight: 600 !important; color: var(--dh-text-muted) !important; font-size: 14.4px !important; }
.form-label-group label { color: var(--dh-text-muted) !important; }

/* ---------- Tables / DataTables ---------- */
.table { color: var(--dh-text) !important; font-size: 15.2px !important; }
.table thead th {
  background: var(--dh-bg) !important;
  border-bottom: 1px solid var(--dh-border) !important;
  color: var(--dh-text-muted) !important;
  font-size: 13.1px !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700 !important;
  padding: 13.6px 16px !important;
}
.table td { padding: 13.6px 16px !important; border-top: 1px solid var(--dh-border) !important; vertical-align: middle !important; font-size: 15.2px !important; }
/* Let wide tables scroll horizontally instead of squeezing/breaking on small screens */
.table-responsive { -webkit-overflow-scrolling: touch; }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--dh-bg) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-sm) !important;
  padding: 6.4px 11.2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--dh-accent) !important;
  border-color: var(--dh-accent) !important;
  color: #fff !important;
  border-radius: 6px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  margin: 0 2px;
}

/* ---------- Badges / Alerts ---------- */
.badge { border-radius: 999px !important; font-weight: 600 !important; padding: 0.35em 0.75em !important; }
.badge-primary { background-color: var(--dh-accent-soft) !important; color: var(--dh-accent-soft-text) !important; }
.badge-success { background-color: var(--dh-success-soft) !important; color: var(--dh-success-soft-text) !important; }
.badge-danger { background-color: var(--dh-danger-soft) !important; color: var(--dh-danger-soft-text) !important; }
.badge-warning { background-color: var(--dh-warning-soft) !important; color: var(--dh-warning-soft-text) !important; }
.alert { border-radius: var(--dh-radius-sm) !important; border: none !important; font-size: 14.4px !important; }
.alert-danger { background-color: var(--dh-danger-soft) !important; color: var(--dh-danger-soft-text) !important; }
.alert-success { background-color: var(--dh-success-soft) !important; color: var(--dh-success-soft-text) !important; }

/* ---------- Admin: sidebar (.main-menu) ---------- */
.main-menu {
  background: var(--dh-sidebar-bg) !important;
  border: none !important;
  box-shadow: none !important;
}
.main-menu .navbar-header { background: transparent !important; border: none !important; }
.main-menu .navbar-header .brand-text { color: #fff !important; font-size: 18.4px !important; }
.main-menu .shadow-bottom { display: none !important; }
/* The vendor template's own <ul class="navigation navigation-main"> carries a
   hardcoded white background, which sits on top of and completely hides the
   dark sidebar background above — this was the main reason the admin
   redesign wasn't visible at all. Strip every nested background inside the
   sidebar back to transparent so the dark .main-menu background shows through. */
.main-menu .navigation,
.main-menu .navigation-main,
.main-menu ul,
.main-menu li,
.main-menu .main-menu-content {
  background: transparent !important;
}
.main-menu .navigation > li > a {
  color: var(--dh-sidebar-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  opacity: 1 !important;
  border-radius: var(--dh-radius-sm);
  margin: 2px 12px;
  padding: 10.4px 12px !important;
}
/* This was accidentally also getting the link's own padding/margin above,
   which double-stacked with the icon's margin and made the icon-to-label
   gap far wider than intended (and pushed long labels into truncating). */
.main-menu .navigation > li > a span,
.main-menu .navigation > li > a .menu-title {
  color: var(--dh-sidebar-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.main-menu .navigation > li > a i,
.main-menu .navigation > li > a .feather {
  color: var(--dh-sidebar-text) !important;
  opacity: 1 !important;
  margin-right: 8px !important;
}
.main-menu .navigation > li.active > a,
.main-menu .navigation > li > a:hover {
  background: rgba(91, 95, 245, 0.18) !important;
  color: var(--dh-sidebar-text-active) !important;
}
/* The label span has its own explicit color (see above, needed to stop it
   getting the link's padding/margin) which otherwise blocks it inheriting
   the active/hover white text color from the rules above. */
.main-menu .navigation > li.active > a span,
.main-menu .navigation > li.active > a .menu-title,
.main-menu .navigation > li > a:hover span,
.main-menu .navigation > li > a:hover .menu-title {
  color: var(--dh-sidebar-text-active) !important;
}
.main-menu .navigation > li.active > a i,
.main-menu .navigation > li.active > a .feather,
.main-menu .navigation > li > a:hover i,
.main-menu .navigation > li > a:hover .feather {
  color: var(--dh-accent) !important;
}
/* Sidebar collapse/close toggle icon — force visible on the new dark
   sidebar background regardless of the vendor theme's default icon color */
.main-menu .nav-toggle .feather,
.main-menu .modern-nav-toggle i {
  color: #fff !important;
}

/* ---------- Admin: topbar ---------- */
.header-navbar {
  background: var(--dh-surface) !important;
  border-bottom: 1px solid var(--dh-border) !important;
  box-shadow: none !important;
}
.header-navbar .user-name { color: var(--dh-text) !important; font-weight: 600 !important; }
.header-navbar .user-status { color: var(--dh-text-muted) !important; }
.dropdown-menu {
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius) !important;
  box-shadow: var(--dh-shadow) !important;
}
.content-wrapper, .app-content { background: var(--dh-bg) !important; }

/* ---------- Footer (admin) ---------- */
footer.footer { background: transparent !important; color: var(--dh-text-muted) !important; border-top: 1px solid var(--dh-border); }

/* ---------- Website (logged-in user pages): topbar ---------- */
header.navigation.navbar {
  background-color: var(--dh-sidebar-bg) !important;
  border: none !important;
  box-shadow: var(--dh-shadow) !important;
}
header.navigation.navbar .navbar-brand img { height: 40px !important; }
header.navigation .nav.navbar-nav.menu > li > a {
  color: var(--dh-sidebar-text) !important;
  font-weight: 600 !important;
  font-size: 16.8px !important;
}
header.navigation .nav.navbar-nav.menu > li.active > a,
header.navigation .nav.navbar-nav.menu > li > a:hover {
  color: #fff !important;
}
header.navigation .dropdown-menu { background: var(--dh-surface) !important; }
header.navigation .dropdown-menu li a { color: var(--dh-text) !important; font-size: 16px !important; }

/* Mobile hamburger toggle on the public site — the default icon-bar color
   from the old template can be invisible against the new dark navbar */
header.navigation .navbar-toggle { border-color: rgba(255,255,255,0.3) !important; }
header.navigation .navbar-toggle .icon-bar { background-color: #fff !important; }
header.navigation .navbar-collapse { background-color: var(--dh-sidebar-bg) !important; }

/* ---------- Website: footer ---------- */
footer#footer, footer#footer .footer-bottom {
  background-color: var(--dh-sidebar-bg) !important;
  color: var(--dh-sidebar-text) !important;
}
footer#footer a { color: #fff !important; }

/* ---------- Login page ---------- */
body.blank-page { background: linear-gradient(135deg, var(--dh-accent-soft) 0%, var(--dh-bg) 60%) !important; }

/* Sign-in / forgot-password / change-password pages use a section with a
   large hardcoded stock photo background (unrelated to the app, from the
   original template) behind the form card. Replace it with the same clean
   gradient used on the admin login page so these feel like the same product. */
.call-to-action.section {
  background-image: none !important;
  background: linear-gradient(135deg, var(--dh-accent-soft) 0%, var(--dh-bg) 60%) !important;
}

/* ---------- Website: rounded boxes ----------
   Several public/user-site elements (stat tiles, captcha display, notice
   cards, the sign-in/forgot-password panel) are plain bordered boxes in the
   original template with no border-radius at all, which reads as very
   sharp/blocky next to the rest of the new rounded design system. None of
   these properties are set on these classes elsewhere, so adding
   border-radius here is a pure addition, not an override fight. */
.dash, .dash1, .service-item, .captcha, .notice {
  border-radius: var(--dh-radius) !important;
  overflow: hidden;
}
.call-to-action .container {
  background-color: var(--dh-surface) !important;
  border-radius: var(--dh-radius) !important;
  padding: 30px !important;
  box-shadow: var(--dh-shadow-lg) !important;
}

/* Every form on the user site (profile, support, sign-in, forgot/change
   password) sits on the plain page background with no visual container at
   all — that reads as an unfinished, bare page. Give the form/contact
   columns an actual card so these pages match the modern surfaces used
   elsewhere (admin cards, dash tiles etc). */
div.contact-form, div.contact-details {
  background: var(--dh-surface) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius) !important;
  box-shadow: var(--dh-shadow-sm) !important;
  padding: 28px !important;
  margin-top: 20px;
}
div.contact-form h5 { color: var(--dh-text-muted) !important; font-size: 13.6px !important; text-transform: uppercase; letter-spacing: .03em; }

/* Support page: "Contact Details" and the inquiry form sit side by side as
   siblings in a plain (non-flex) Bootstrap row — .contact-form/.contact-
   details carry the col-md-6 class directly, there's no separate wrapper
   column like the dashboard tiles have. Because the row isn't flex, the
   taller card (usually Contact Details once the address wraps to 2-3
   lines) doesn't stretch the shorter one to match, so they end up visibly
   uneven heights. Flex the row so both match the tallest one — this only
   changes vertical stretch, the existing col-md-* class still controls
   each card's width, so the side-by-side layout is unaffected. */
.row:has(> div.contact-form),
.row:has(> div.contact-details) {
  display: flex;
  flex-wrap: wrap;
}
.row:has(> div.contact-form) > .title,
.row:has(> div.contact-details) > .title {
  flex: 0 0 100%;
  width: 100%;
}
.row:has(> div.contact-form),
.row:has(> div.contact-details) {
  align-items: stretch;
}

/* Several public-site content sections use the vendor's "padding ptb-xs-40"
   class pair for top/bottom breathing room, but neither class actually
   exists in any of the site's stylesheets (checked) -- so these sections
   get zero padding, and content like the Contact page's "Send Message"
   button ends up flush against the very bottom of the section with no
   space below it before the page ends. Give the class real padding. */
section.padding {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* Support page "Contact Details" list — the vendor CSS renders the address/
   phone/email in ALL CAPS (hard to read for things like street addresses)
   and lays icon + text out as plain inline content, so a wrapped second
   line of text sits flush left instead of lining up under the first line.
   Switch to normal case and a flex layout so the icon gets a fixed column
   and wrapped text stays indented under itself, not under the icon. */
.contact-short-info {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  text-transform: none !important;
}
.contact-short-info li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  line-height: 1.5;
  text-transform: none !important;
}
.contact-short-info li:last-child { margin-bottom: 0; }
.contact-short-info li i {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  margin-top: 3px;
  color: var(--dh-accent);
}
.contact-short-info li span { flex: 1; }

/* The section-title underline (<div class="border">) is hardcoded green
   from the old template's default palette on every page that uses the
   "<h2>...</h2><div class="border">" title pattern — recolor to the new
   accent so it doesn't clash with the rest of the indigo theme. */
.title .border { background-color: var(--dh-accent) !important; }

/* ---------- Body text legibility ---------- */
p, li, .card-text, .content-header-title, .card-body p { font-size: 16px; }
small, .text-muted { color: var(--dh-text-muted) !important; }

/* ---------- Known page-specific overrides ----------
   A handful of pages (transfer_to_bank.php, work.php, today_work.php) embed
   their own <style> block with a fixed captcha font-size / button width.
   These selectors use an extra ancestor (body) so their specificity beats
   those page-level rules without editing every page file. */
body .captcha { font-size: 40px !important; padding: 16px !important; word-break: break-all; }
body .start_btn { width: auto !important; font-size: 16.8px !important; padding: 10.4px 24px !important; }
body .dash, body .dash1 { padding: 18px !important; }

/* work.php's captcha number box keeps its own light-yellow inline
   background (style="background-color: #fff5c3") from the original
   template, but body#body sets a near-white text color (--dh-text) for
   the new dark theme. That combination is ~1:1 contrast — the digits are
   essentially invisible against the pale-yellow box. Force a dark color
   here since this box's background is always light. */
body .captcha { color: #1a1a2e !important; }

/* ---------- Responsive / Mobile ---------- */
@media (max-width: 991px) {
  .wrap, .container { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 767px) {
  h1 { font-size: 25.6px !important; }
  h2 { font-size: 21.6px !important; }
  h3 { font-size: 19.2px !important; }
  .card-header, .card-body, .card-content .card-body, .card-block { padding: 17.6px !important; }
  .btn { font-size: 15.2px !important; padding: 9.6px 16px !important; }
  /* Only the full-width CTA-style buttons stack edge-to-edge on mobile —
     small inline action/icon buttons (table row actions etc.) keep their
     natural size so table layouts don't break. */
  .btn.btn-main, .btn.btn_half, .btn.signin_btn, .btn.start_btn {
    width: 100% !important;
    margin-bottom: 8px;
  }
  .table thead th, .table td { padding: 9.6px 8px !important; font-size: 13.6px !important; }
  body .captcha { font-size: 28px !important; padding: 12px !important; letter-spacing: 2px; }
  .login-card, .card.bg-authentication { padding: 20px !important; }
  header.navigation .navbar-brand img { height: 32px !important; }
  .main-menu .navbar-header .brand-text { font-size: 16px !important; }
}
@media (max-width: 575px) {
  body .dash, body .dash1 { padding: 14px !important; }
  .card-header, .card-body, .card-content .card-body, .card-block { padding: 14.4px !important; }
}

/* ---------- Misc polish ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #3a4270; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* Give the (already dark-colored, per-page) dashboard stat tiles a visible
   edge now that the page around them is dark too — previously they only
   needed to stand out against a light page, so no border was necessary. */
.dash, .dash1 { border: 1px solid var(--dh-border); }

/* ---------- Defensive dark overrides for vendor/plugin chrome not
   otherwise touched by this file (dropdown items, modals, select2,
   pagination, tabs, tooltips/popovers, breadcrumbs). These components
   render via Bootstrap 4 / the select2 plugin's own CSS, which ships
   hardcoded light colors — without these, they'd show as light artifacts
   on the new dark theme the same way the marketing-site bugs did. Not
   verified against a live logged-in session (no login credentials used,
   per policy) — flagged to the site owner as needing a live spot-check. */
.dropdown-item { color: var(--dh-text) !important; }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--dh-accent-soft) !important;
  color: var(--dh-text) !important;
}
.dropdown-divider { border-color: var(--dh-border) !important; }

.modal-content {
  background-color: var(--dh-surface) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius) !important;
}
.modal-header, .modal-footer { border-color: var(--dh-border) !important; }
.modal-title { color: var(--dh-text) !important; }
.modal-backdrop.show { opacity: 0.7 !important; }
.close { color: var(--dh-text) !important; text-shadow: none !important; opacity: 0.7; }
.close:hover { opacity: 1; color: var(--dh-text) !important; }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--dh-surface) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-sm) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dh-text) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--dh-text-muted) transparent transparent transparent !important; }
.select2-dropdown {
  background-color: var(--dh-surface) !important;
  border: 1px solid var(--dh-border) !important;
  color: var(--dh-text) !important;
}
.select2-search--dropdown .select2-search__field {
  background-color: var(--dh-bg) !important;
  border: 1px solid var(--dh-border) !important;
  color: var(--dh-text) !important;
}
.select2-results__option { color: var(--dh-text) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--dh-accent) !important;
  color: #ffffff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--dh-accent-soft) !important; }

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter label { color: var(--dh-text-muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--dh-accent-soft) !important;
  border-color: var(--dh-accent) !important;
  color: var(--dh-text) !important;
}

.nav-tabs { border-bottom-color: var(--dh-border) !important; }
.nav-tabs .nav-link { color: var(--dh-text-muted) !important; border: none !important; }
.nav-tabs .nav-link.active {
  color: var(--dh-accent) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--dh-accent) !important;
}

.pagination .page-link {
  background-color: var(--dh-surface) !important;
  border-color: var(--dh-border) !important;
  color: var(--dh-text) !important;
}
.pagination .page-item.active .page-link {
  background-color: var(--dh-accent) !important;
  border-color: var(--dh-accent) !important;
  color: #ffffff !important;
}
.pagination .page-item.disabled .page-link { background-color: var(--dh-bg) !important; color: var(--dh-text-muted) !important; }

.breadcrumb { background-color: transparent !important; }
.breadcrumb-item, .breadcrumb-item a { color: var(--dh-text-muted) !important; }
.breadcrumb-item.active { color: var(--dh-text) !important; }

.tooltip-inner { background-color: var(--dh-surface-2) !important; color: var(--dh-text) !important; }
.popover {
  background-color: var(--dh-surface) !important;
  border: 1px solid var(--dh-border) !important;
}
.popover-body { color: var(--dh-text) !important; }

hr { border-color: var(--dh-border) !important; }

/* =========================================================================
   PUBLIC MARKETING SITE (captcha.dhanfy.in root) — header1.php / footer1.php
   This is a totally different legacy template family (Bootstrap 3 /
   "bootsnav" + Revolution Slider) from the logged-in user site above, so it
   gets its own section, scoped entirely under body.dh-marketing (a class
   added only to header1.php's <body> tag) so none of this leaks onto the
   logged-in dashboard's light theme. Dark navy theme matching a reference
   design the site owner supplied. Root font-size on this template is a
   normal unhacked 16px (verified live), so px values below are plain, not
   a rem-bug workaround like the other two templates.

   Two things are deliberately NOT fabricated here even though the
   reference image has them: specific numeric trust stats ("10K+ Happy
   Members", "99.9% Payment Success") aren't backed by any real figure
   anywhere in the current site content, so they're left out rather than
   invented — the trust chips below reuse only claims already made
   elsewhere on the real site (secure login, instant/24hr withdrawal, no
   minimum target), just reworded for the hero. */

body.dh-marketing {
  --dhm-bg: #0a0e27;
  --dhm-bg-alt: #0d1330;
  --dhm-surface: #121a3a;
  --dhm-surface-2: #161f45;
  --dhm-border: rgba(255,255,255,.08);
  --dhm-border-strong: rgba(255,255,255,.16);
  --dhm-text: #eef1fb;
  --dhm-text-muted: #9aa3c7;
  --dhm-accent: #6366f1;
  --dhm-accent-2: #8b5cf6;
  --dhm-cyan: #22d3ee;
  --dhm-gradient: linear-gradient(90deg, #3b82f6, #8b5cf6);
  background-color: var(--dhm-bg) !important;
  color: var(--dhm-text) !important;
}
body.dh-marketing h1, body.dh-marketing h2, body.dh-marketing h3,
body.dh-marketing h4, body.dh-marketing h5, body.dh-marketing h6 {
  color: var(--dhm-text) !important;
}
body.dh-marketing p { color: var(--dhm-text-muted); }

/* Hide the legacy Revolution Slider hero and the now-duplicated "IT
   Consulting" text block — both kept in the DOM untouched, just hidden,
   since their content moved into the new static .dh-hero above them. */
body.dh-marketing .main-banner.banner_up,
body.dh-marketing #rev_slider_34_1_wrapper,
body.dh-marketing .dh-legacy-hidden { display: none !important; }

/* --- Top info bar + main nav --- */
body.dh-marketing .middel-part__block {
  background: var(--dhm-bg-alt) !important;
  border-bottom: 1px solid var(--dhm-border) !important;
  padding: 6px 0 !important;
}
/* The address text is long enough that, together with "Call Us" and
   "Mail Us", the three items don't all fit on one line at common desktop
   widths. The vendor markup relies on plain inline wrapping for this,
   which drops the "Mail Us" item into an awkward spot half-overlapping
   the phone item instead of a clean new row.
   A first attempt used flexbox wrap, but independently right-aligning
   each wrapped row left "Mail Us" mis-matched against "Call Us" above
   it (different text widths -> different left edges) and stranded the
   divider that used to sit after the phone item. A 2-column/2-row grid
   fixes this properly without touching the markup: address occupies
   column 1 spanning both rows (vertically centered, single divider on
   its right), and Call Us / Mail Us share column 2 so their icons line
   up in one clean stack. */
body.dh-marketing .top-info__block ul {
  display: grid !important;
  grid-template-columns: auto auto !important;
  column-gap: 22px !important;
  row-gap: 4px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
body.dh-marketing .top-info__block ul li {
  display: inline-flex !important;
  align-items: center;
  border-right: none !important;
}
body.dh-marketing .top-info__block ul li:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  padding-right: 22px;
  border-right: 1px solid var(--dhm-border-strong) !important;
}
body.dh-marketing .top-info__block ul li:nth-child(2) { grid-column: 2; grid-row: 1; }
body.dh-marketing .top-info__block ul li:nth-child(3) { grid-column: 2; grid-row: 2; }
body.dh-marketing .top-info__block ul li p,
body.dh-marketing .top-info__block ul li p span,
body.dh-marketing .top-info__block ul li a { color: var(--dhm-text-muted) !important; font-size: 12.8px !important; }
body.dh-marketing .top-info__block ul li i {
  color: #ffffff !important;
  background: var(--dhm-gradient);
  width: 26px;
  height: 26px;
  font-size: 11px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  /* The vendor CSS gives this icon a hardcoded margin-top: -25px, a hack
     from the old layout that nudged it upward against a differently
     structured row. It fights the flex/grid centering used above (both
     here and in the .contact-info list), visibly shoving the icon above
     its text instead of centered against it. Neutralize it. */
  margin-top: 0 !important;
}
body.dh-marketing .logo a {
  background: rgba(255,255,255,.95);
  padding: 6px 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
}
/* The vendor template also paints the whole .logo column (not just the
   link) with a hardcoded white background — on the old light nav this
   was invisible, but on the dark nav it shows as a large stray white
   rectangle behind the pill above. The pill on `.logo a` already gives
   the logo image its contrast backdrop, so the column itself should be
   transparent. */
body.dh-marketing .logo { background: transparent !important; }
body.dh-marketing .navbar-toggle { border-color: var(--dhm-border-strong) !important; }
body.dh-marketing .navbar-toggle i { color: var(--dhm-text) !important; }
body.dh-marketing .main_nav { background: var(--dhm-bg) !important; box-shadow: 0 1px 0 var(--dhm-border); }
/* Bootstrap's .d-flex on this nav list only sets display:flex -- it never
   sets align-items, which defaults to "stretch". That stretches every
   <li> (including the Login / Register pill) to the full height of the
   nav bar, but nothing then centers the pill's own (shorter) content
   inside that stretched space, so it can sit off-center vertically.
   Center everything explicitly instead of relying on the default. */
body.dh-marketing .navbar-nav.mobile-menu { align-items: center !important; }
body.dh-marketing .navbar-nav.mobile-menu > li { display: flex; align-items: center; }
body.dh-marketing .navbar-nav.mobile-menu > li > a:not(.btn) {
  color: var(--dhm-text) !important;
  font-weight: 600 !important;
  transition: color .15s ease;
}
body.dh-marketing .navbar-nav.mobile-menu > li > a:not(.btn):hover,
body.dh-marketing .navbar-nav.mobile-menu > li.active > a:not(.btn) { color: var(--dhm-cyan) !important; }
body.dh-marketing .navbar-nav.mobile-menu > li > a.btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  border: 1px solid transparent !important;
  transition: transform .15s ease, filter .15s ease;
}
body.dh-marketing .navbar-nav.mobile-menu > li > a.btn:hover { transform: translateY(-1px); filter: brightness(1.1); }

/* Merged "Login / Register" trigger + hover dropdown (desktop). The trigger
   is a <span>, not a link — clicking it does nothing on its own, it just
   reveals the two real links below on hover, so there's no dead click or
   premature navigation before the menu opens. */
body.dh-marketing .dh-login-dropdown { position: relative; }
body.dh-marketing .dh-login-trigger {
  background: var(--dhm-gradient) !important;
  color: #ffffff !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.dh-marketing .dh-login-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--dhm-surface);
  border: 1px solid var(--dhm-border-strong);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 50;
}
body.dh-marketing .dh-login-dropdown:hover .dh-login-menu,
body.dh-marketing .dh-login-dropdown:focus-within .dh-login-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
body.dh-marketing .dh-login-menu a.btn {
  background: transparent !important;
  color: var(--dhm-text) !important;
  border: 1px solid var(--dhm-border-strong) !important;
  border-radius: 10px !important;
  text-align: left;
  width: 100%;
  margin: 0 !important;
}
body.dh-marketing .dh-login-menu a.btn:hover { border-color: var(--dhm-cyan) !important; }
/* Mobile: the hover interaction doesn't exist, so keep the menu permanently
   open (stacked, always tappable) — same two real links, same behavior as
   before this change, just grouped under the merged trigger visually. */
@media (max-width: 991px) {
  /* On mobile the dropdown menu is always open (below), so the trigger
     itself would be a dead second "button" with no destination of its own
     — hide it and show only the two real, always-tappable links. */
  body.dh-marketing .dh-login-trigger { display: none; }
  body.dh-marketing .dh-login-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    margin-top: 0;
    border: none;
    padding: 6px 0 0;
  }
  body.dh-marketing .dh-login-menu a.btn { text-align: center; }
}

/* --- New static hero (home page only — .dh-hero markup added in home.php) --- */
body.dh-marketing .dh-hero {
  background:
    radial-gradient(1100px 480px at 12% -10%, rgba(99,102,241,.25), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(139,92,246,.18), transparent 55%),
    var(--dhm-bg);
  padding: 70px 0 60px;
  overflow: hidden;
}
body.dh-marketing .dh-hero-grid { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
body.dh-marketing .dh-hero-copy { flex: 1 1 460px; min-width: 300px; }
body.dh-marketing .dh-hero-visual { flex: 1 1 400px; min-width: 280px; position: relative; display: flex; justify-content: center; }
body.dh-marketing .dh-badge {
  display: inline-block;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.4);
  color: #a5b4fc;
  font-size: 12.8px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
body.dh-marketing .dh-hero-title {
  font-size: 44px !important;
  line-height: 1.15 !important;
  margin-bottom: 18px !important;
  color: #ffffff !important;
}
body.dh-marketing .dh-gradient-text {
  background: var(--dhm-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.dh-marketing .dh-hero-sub {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--dhm-text-muted) !important;
  max-width: 520px;
  margin-bottom: 26px !important;
}
body.dh-marketing .dh-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
body.dh-marketing .dh-btn-primary {
  background: var(--dhm-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 13px 28px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 30px rgba(99,102,241,.35);
  transition: transform .15s ease, filter .15s ease;
}
body.dh-marketing .dh-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
body.dh-marketing .dh-btn-outline {
  background: transparent !important;
  color: var(--dhm-text) !important;
  border: 1px solid var(--dhm-border-strong) !important;
  border-radius: 999px !important;
  padding: 13px 28px !important;
  font-weight: 600 !important;
  transition: border-color .15s ease, transform .15s ease;
}
body.dh-marketing .dh-btn-outline:hover { border-color: var(--dhm-cyan) !important; transform: translateY(-2px); }
body.dh-marketing .dh-trust-row { list-style: none; display: flex; gap: 22px; flex-wrap: wrap; padding: 0; margin: 0; }
body.dh-marketing .dh-trust-row li { font-size: 13.6px; color: var(--dhm-text-muted); display: flex; align-items: center; gap: 6px; }
body.dh-marketing .dh-trust-row li i { color: var(--dhm-cyan); }

/* CSS/SVG laptop-mockup approximation of the reference's stock illustration */
body.dh-marketing .dh-mock-laptop { width: 100%; max-width: 420px; }
body.dh-marketing .dh-mock-screen {
  background: linear-gradient(160deg, #131a3d, #0d1330);
  border: 1px solid var(--dhm-border-strong);
  border-radius: 14px 14px 4px 4px;
  padding: 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
body.dh-marketing .dh-mock-chart svg { width: 100%; height: 140px; display: block; }
body.dh-marketing .dh-mock-base {
  height: 12px;
  width: 92%;
  margin: 0 auto;
  background: linear-gradient(180deg, #1c2550, #0d1330);
  border-radius: 0 0 10px 10px;
}
body.dh-marketing .dh-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--dhm-surface);
  border: 1px solid var(--dhm-border-strong);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
body.dh-marketing .dh-float-badge i { font-size: 18px; color: var(--dhm-cyan); }
body.dh-marketing .dh-float-badge strong { display: block; font-size: 15px; color: #ffffff; }
body.dh-marketing .dh-float-badge span { display: block; font-size: 11.5px; color: var(--dhm-text-muted); }
body.dh-marketing .dh-float-1 { top: -14px; right: 20px; }
body.dh-marketing .dh-float-2 { top: 90px; right: -20px; }
body.dh-marketing .dh-float-3 { bottom: -14px; left: -14px; }

/* Mac-window title bar + a live-looking stat readout inside the mockup
   screen, closer to the reference's dashboard-style laptop illustration. */
body.dh-marketing .dh-mock-winbar { display: flex; gap: 6px; margin-bottom: 14px; }
body.dh-marketing .dh-mock-winbar span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
body.dh-marketing .dh-mock-readout { margin-bottom: 10px; }
body.dh-marketing .dh-mock-readout-label { display: block; font-size: 11.5px; color: var(--dhm-text-muted); }
body.dh-marketing .dh-mock-readout strong { display: block; font-size: 26px; color: #ffffff; line-height: 1.3; }
body.dh-marketing .dh-mock-readout-sub { display: block; font-size: 11.5px; color: var(--dhm-text-muted); }

/* --- Section titles / underline --- */
body.dh-marketing .section-title_home h2,
body.dh-marketing .headeing h2,
body.dh-marketing .block-title h2,
body.dh-marketing .title_row h1,
body.dh-marketing .title_row h1 span { color: #ffffff !important; }
body.dh-marketing .section-title_home .b-line,
body.dh-marketing .headeing .b-line {
  background: var(--dhm-gradient) !important;
  height: 3px;
  border-radius: 4px !important;
}
body.dh-marketing .section-title_home p { color: var(--dhm-text-muted) !important; }
body.dh-marketing .block-title.v-line { border-left-color: var(--dhm-accent) !important; }

/* Small uppercase "— OUR COMMUNITY —" style eyebrow label used above each
   home-page section heading, matching the reference's two-tier heading
   pattern (label + larger headline on Community; label alone on Work /
   Testimonials). */
body.dh-marketing .dh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dhm-cyan);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
body.dh-marketing .dh-eyebrow::before,
body.dh-marketing .dh-eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--dhm-cyan);
  opacity: .5;
}
body.dh-marketing .dh-section-title-lg {
  font-size: 34px !important;
  color: #ffffff !important;
  margin-bottom: 14px !important;
}

/* Trust stat bar (10K+ / 99.9% / ₹500 / 100%) between the community cards
   and the "Our Work" section. */
body.dh-marketing .dh-stats-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
  margin-top: 40px;
  padding: 26px 20px;
  border: 1px solid rgba(99,102,241,.35);
  border-radius: 18px;
  background: rgba(99,102,241,.06);
}
body.dh-marketing .dh-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.dh-marketing .dh-stat i {
  font-size: 20px;
  color: var(--dhm-cyan);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(34,211,238,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.dh-marketing .dh-stat strong { display: block; font-size: 22px; color: #ffffff; line-height: 1.2; }
body.dh-marketing .dh-stat span { display: block; font-size: 12.8px; color: var(--dhm-text-muted); }

/* Testimonial quote icon + star rating row */
body.dh-marketing .testimonial_blog { position: relative; }
body.dh-marketing .dh-quote-icon {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 26px;
  color: rgba(99,102,241,.35);
}
body.dh-marketing .dh-stars { color: #fbbf24; font-size: 13px; margin: 6px 0 10px; letter-spacing: 2px; }

/* --- "IT Consulting" copy + Franchisee page paragraphs (both use .faq) --- */
body.dh-marketing .faq p { color: var(--dhm-text-muted) !important; line-height: 1.7 !important; }
body.dh-marketing .faq h3 {
  color: #ffffff !important;
  margin-top: 28px !important;
  padding-left: 14px;
  border-left: 4px solid var(--dhm-accent);
}

/* --- Home page: "Our Community" / "Our Work" cards --- */
body.dh-marketing .row:has(> .col-lg-4 > .feature-box) { counter-reset: dh-card; display: flex; flex-wrap: wrap; }
body.dh-marketing .col-lg-4:has(> .feature-box) { counter-increment: dh-card; }
body.dh-marketing .feature-box {
  background: var(--dhm-surface) !important;
  border: 1px solid var(--dhm-border) !important;
  border-radius: 16px !important;
  padding: 30px 26px !important;
  height: 100%;
  position: relative;
  transition: transform .15s ease, border-color .15s ease;
}
body.dh-marketing .feature-box:hover { transform: translateY(-4px); border-color: var(--dhm-accent) !important; }
body.dh-marketing .feature-box::after {
  content: counter(dh-card, decimal-leading-zero);
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dhm-text-muted);
  opacity: .6;
}
body.dh-marketing .dh-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.35);
  color: var(--dhm-cyan);
  font-size: 20px;
}
body.dh-marketing .feature-box .content h3 { color: #ffffff !important; font-size: 18.5px !important; margin: 14px 0 10px !important; }
body.dh-marketing .feature-box .content p { color: var(--dhm-text-muted) !important; line-height: 1.6; margin-bottom: 0; }
body.dh-marketing .feature-box .content img,
body.dh-marketing .feature-box .content video { border-radius: 10px !important; width: 100%; }

/* --- Home page: testimonials --- */
body.dh-marketing .bg_Testimonial { background: linear-gradient(160deg, var(--dhm-bg-alt), var(--dhm-bg)) !important; }
body.dh-marketing .testimonial_blog {
  background: var(--dhm-surface) !important;
  border: 1px solid var(--dhm-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.35) !important;
}
body.dh-marketing .testimonial_blog h3 { color: #ffffff !important; }
body.dh-marketing .testimonial_blog .author_detail p { color: var(--dhm-text-muted) !important; line-height: 1.6; }
body.dh-marketing .testimonial_blog .author_pic img { border-radius: 50% !important; border: 2px solid var(--dhm-accent); }

/* --- Sub-pages: How To Work FAQ-style list --- */
body.dh-marketing .panel-body {
  background: var(--dhm-surface) !important;
  border: 1px solid var(--dhm-border) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  margin-bottom: 14px !important;
}
body.dh-marketing .panel-body:last-child { margin-bottom: 0 !important; }
body.dh-marketing .panel-body .panel-title { color: var(--dhm-cyan) !important; font-size: 16.8px !important; margin-bottom: 8px !important; }
body.dh-marketing .panel-body p { color: var(--dhm-text-muted) !important; margin-bottom: 0; line-height: 1.6; }

/* --- Joining Plan page --- */
body.dh-marketing .blog-post {
  background: var(--dhm-surface) !important;
  border: 1px solid var(--dhm-border) !important;
  border-radius: 16px !important;
  padding: 30px !important;
}
body.dh-marketing .blog-post h2 { color: #ffffff !important; }
body.dh-marketing .blog-post img { border-radius: 10px !important; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
body.dh-marketing .blog-post-hr hr { border-color: var(--dhm-border) !important; opacity: .5; }

/* --- Contact Us (marketing) page: the "Get In Touch" form and the
   "Contact Info" list. This form/list live inside the header1/footer1
   template only (form.contact-form here, vs. the logged-in support page's
   div.contact-form styled elsewhere in this file) so it's scoped by tag to
   stay independent of that other rule. */
body.dh-marketing form.contact-form { background: transparent !important; }
body.dh-marketing form.contact-form .form-field { margin-bottom: 18px !important; }
body.dh-marketing form.contact-form .input-sm.form-full,
body.dh-marketing form.contact-form textarea.form-full {
  background: var(--dhm-surface) !important;
  border: 1px solid var(--dhm-border-strong) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: var(--dhm-text) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.dh-marketing form.contact-form .input-sm.form-full::placeholder,
body.dh-marketing form.contact-form textarea.form-full::placeholder { color: var(--dhm-text-muted) !important; }
body.dh-marketing form.contact-form .input-sm.form-full:focus,
body.dh-marketing form.contact-form textarea.form-full:focus {
  border-color: var(--dhm-accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.25) !important;
  outline: none !important;
}
body.dh-marketing .btn-text {
  background: var(--dhm-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 13px 30px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  /* Vendor style.css sets line-height:50px + height:50px on .btn-text
     (its own zero-padding vertical-centering hack). We override the
     padding above for a bigger pill, but the vendor's fixed line-height/
     height still applied on top, forcing a 50px line-box inside a
     padding-shrunk content box and pushing the text down off-center.
     Let padding do the centering instead. */
  line-height: normal !important;
  height: auto !important;
  transition: filter .15s ease, transform .15s ease;
}
body.dh-marketing .btn-text:disabled { opacity: .5; cursor: not-allowed; }

/* Sign Up page: mobile-number input paired with an inline "Send/Verify
   OTP" button, plus the small status line and helper note under it. */
body.dh-marketing .dh-otp-row { display: flex; gap: 10px; align-items: center; }
body.dh-marketing .dh-otp-row .input-sm.form-full { flex: 1; margin-bottom: 0; }
body.dh-marketing .dh-otp-btn {
  flex-shrink: 0;
  background: var(--dhm-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
body.dh-marketing .dh-otp-btn:disabled { opacity: .6; cursor: not-allowed; }
body.dh-marketing .dh-otp-status { display: block; margin-top: 6px; font-size: 13px; }
body.dh-marketing .dh-signup-note { color: var(--dhm-text-muted); font-size: 13px; margin-top: 14px; line-height: 1.5; }
body.dh-marketing .btn-text:hover { filter: brightness(1.08); transform: translateY(-1px); }

body.dh-marketing .contact-info ul.info li {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
body.dh-marketing .contact-info ul.info li:last-child { margin-bottom: 0; }
body.dh-marketing .contact-info ul.info li .icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(99,102,241,.15);
  color: var(--dhm-cyan) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
/* `.content` is a class the vendor also uses for card bodies elsewhere
   (e.g. the feature cards), which carry a hefty 30px top/bottom padding
   meant for a card layout. That padding leaked into this icon list too,
   pushing the text ~30px below the icon's top edge and making the icon
   look stranded above the text instead of aligned with it. This list's
   `.content` never needs card padding, so zero it out; align-items:
   center above then centers the icon cleanly against the text block. */
body.dh-marketing .contact-info ul.info li .content { padding: 0 !important; }
body.dh-marketing .contact-info ul.info li .content p { color: var(--dhm-text-muted) !important; margin-bottom: 4px; line-height: 1.5; }
body.dh-marketing .contact-info .event-social li {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--dhm-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  transition: background-color .15s ease;
}
body.dh-marketing .contact-info .event-social li:hover { background: rgba(99,102,241,.2); }
body.dh-marketing .contact-info .event-social li a { color: var(--dhm-text) !important; }

/* --- Footer polish --- */
body.dh-marketing .footer { background: var(--dhm-bg-alt) !important; border-top: 1px solid var(--dhm-border) !important; }
body.dh-marketing .footer .footer_logo > a {
  background: rgba(255,255,255,.95);
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
}
body.dh-marketing .footer .footercolor { color: var(--dhm-text-muted) !important; }
body.dh-marketing .footer h4.footercolor { color: #ffffff !important; font-weight: 700 !important; }
body.dh-marketing .footer a.footercolor:hover { color: var(--dhm-cyan) !important; }
body.dh-marketing .dh-footer-tagline { color: var(--dhm-text-muted) !important; font-size: 13.6px; margin-top: 10px; max-width: 260px; }
body.dh-marketing .footer_logo ul li a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--dhm-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dhm-text) !important;
  margin-right: 6px;
  transition: background-color .15s ease, border-color .15s ease;
}
body.dh-marketing .footer_logo ul li a:hover { background: rgba(99,102,241,.2); border-color: var(--dhm-accent); }
body.dh-marketing .bottom-footer { background: var(--dhm-bg) !important; border-top: 1px solid var(--dhm-border) !important; }
body.dh-marketing .bottom-footer p a { color: var(--dhm-text-muted) !important; }

/* --- Responsive --- */
@media (max-width: 991px) {
  body.dh-marketing .dh-hero-grid { flex-direction: column; }
  body.dh-marketing .dh-hero-visual { margin-top: 30px; }
  body.dh-marketing .top-info__block { text-align: left !important; margin-top: 8px; }
  body.dh-marketing .top-info__block ul { display: flex; flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 767px) {
  body.dh-marketing .dh-hero-title { font-size: 32px !important; }
  body.dh-marketing .feature-box, body.dh-marketing .panel-body, body.dh-marketing .blog-post { padding: 18px !important; }
  body.dh-marketing .navbar-nav.mobile-menu > li > a.btn { display: inline-block; margin: 4px 6px 4px 0; }
  /* Floating badges fight the mockup for space at narrow widths — hide
     rather than force an awkward reflow. */
  body.dh-marketing .dh-float-badge { display: none; }
}

/* --- Fixes found on live re-check after the dark theme went up --- */

/* 1) The vendor template draws a big white diagonal wedge behind the logo
   via .logo::after (a decorative accent meant for a light nav — it was
   invisible before because everything around it was already white).
   Match it to the top-bar's own background so it blends away instead of
   showing as a stray white shape on the new dark nav. */
body.dh-marketing .logo::after { background: var(--dhm-bg-alt) !important; }

/* 1b) The REAL source of the big stray white rectangle in the top bar
   turned out to be a separate pseudo-element: `.middel-part__block::before`
   (851px wide, white, positioned top:0/left:0) sitting behind everything
   in the top info bar. The `.logo::after` fix above only masked part of
   it with a dark diagonal wedge; the rest still showed as solid white.
   (The `.logo` column itself was also given a transparent background
   above, so only the intentional white logo "pill" on `.logo a` shows.) */
body.dh-marketing .middel-part__block::before { background: transparent !important; }

/* 2) "Our Community" (home) sits in a `.gray-bg`/`.service_sec` section
   that had its own light-gray background from the vendor CSS — missed in
   the first pass, so the (white) heading/body text was unreadable against
   it. */
body.dh-marketing .gray-bg,
body.dh-marketing .service_sec { background: var(--dhm-bg-alt) !important; }

/* 3) Testimonial text sat in `.author_detail`, which carries its own
   hardcoded white background from the vendor CSS — this is what was
   showing as a white block next to the (correctly dark) card edge. */
body.dh-marketing .author_detail { background: transparent !important; }

/* 4) Contact Us "Contact Info" column: the list wrapper has a hardcoded
   white background and each item has a light #eee bottom divider from the
   vendor CSS. */
body.dh-marketing .contact-info { background: transparent !important; }
body.dh-marketing .contact-info ul.info li {
  border-bottom: 1px solid var(--dhm-border) !important;
  padding-bottom: 14px;
}

/* 5) "Our Work" tiles hold real image files (ISO certification badges)
   that are themselves white-background graphics — floating them directly
   on a dark card reads as a broken/unstyled box. Give them an intentional
   light backdrop instead of fighting the image content. */
body.dh-marketing .feature-box .content img {
  background: #ffffff;
  border-radius: 12px !important;
  padding: 18px;
}
body.dh-marketing .feature-box .content video {
  border: 1px solid var(--dhm-border);
}