/* DBell Creations — bridge for pages whose content still uses the Bootstrap
   template markup. Loaded after dbell-dark.css and the recolored legacy CSS
   (css/legacy-dark/) so template components read as part of the dark theme. */

.dx-legacy { color: #C3CDD7; font-family: var(--font); font-size: 16px; line-height: 1.65; }
.dx-legacy h1, .dx-legacy h2, .dx-legacy h3, .dx-legacy h4, .dx-legacy h5, .dx-legacy h6,
.dx-legacy .h1, .dx-legacy .h2, .dx-legacy .h3, .dx-legacy .h4, .dx-legacy .h5, .dx-legacy .h6 { font-family: var(--font) !important; color: #fff; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.dx-legacy h2, .dx-legacy .h2 { letter-spacing: -.03em; }
.dx-legacy p, .dx-legacy li, .dx-legacy a, .dx-legacy button, .dx-legacy input, .dx-legacy textarea, .dx-legacy select, .dx-legacy label, .dx-legacy td, .dx-legacy th, .dx-legacy small, .dx-legacy strong, .dx-legacy blockquote { font-family: var(--font); }
.dx-legacy p, .dx-legacy li { color: inherit; }
.dx-legacy strong, .dx-legacy b { color: #fff; }
.dx-legacy a:not(.btn):not([class*="dx-"]) { color: var(--blue-hi); }
.dx-legacy a:not(.btn):not([class*="dx-"]):hover { color: #9BDCF8; }
.dx-legacy .lead { color: var(--text); }
.dx-legacy hr { border-color: var(--line); opacity: 1; }
.dx-legacy img { max-width: 100%; height: auto; }

/* Bootstrap colour utilities */
.dx-legacy .text-dark, .dx-legacy .text-body, .dx-legacy .text-black { color: var(--text) !important; }
.dx-legacy .text-muted, .dx-legacy .text-secondary, .dx-legacy .text-black-50, .dx-legacy .text-body-secondary { color: var(--muted) !important; }
.dx-legacy .text-primary, .dx-legacy .text-info { color: var(--blue) !important; }
.dx-legacy .text-white-50 { color: var(--muted) !important; }
.dx-legacy .bg-white, .dx-legacy .bg-body, .dx-legacy .bg-transparent { background: transparent !important; }
.dx-legacy .bg-light { background: var(--surface) !important; }
.dx-legacy .bg-dark { background: var(--bg-deep) !important; }
.dx-legacy .bg-primary, .dx-legacy .bg-secondary, .dx-legacy .bg-info { background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(56, 182, 240, .18), transparent 70%), #0F1D29 !important; color: var(--text); }
.dx-legacy .border, .dx-legacy .border-top, .dx-legacy .border-bottom, .dx-legacy .border-start, .dx-legacy .border-end, .dx-legacy .border-light { border-color: var(--line) !important; }
.dx-legacy .border-primary, .dx-legacy .border-secondary { border-color: var(--blue) !important; }
.dx-legacy .shadow, .dx-legacy .shadow-sm, .dx-legacy .shadow-lg { box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6) !important; }
.dx-legacy .rounded { border-radius: var(--r) !important; }
.dx-legacy .container-xxl.bg-white, .dx-legacy > .container-xxl { background: transparent !important; }

/* Cards and template blocks */
.dx-legacy .card, .dx-legacy .service-item, .dx-legacy .feature-item, .dx-legacy .value-card, .dx-legacy .stat-box,
.dx-legacy .testimonial-item, .dx-legacy .team-item, .dx-legacy .pricing-card, .dx-legacy .case-study-row,
.dx-legacy .project-card, .dx-legacy .portfolio-item, .dx-legacy .db-feature-card, .dx-legacy .resource-card,
.dx-legacy .blog-card, .dx-legacy .tool-card, .dx-legacy .contact-card, .dx-legacy .contact-item {
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important;
  color: #C3CDD7; box-shadow: none !important; transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.dx-legacy .card:hover, .dx-legacy .service-item:hover, .dx-legacy .feature-item:hover, .dx-legacy .pricing-card:hover,
.dx-legacy .project-card:hover, .dx-legacy .db-feature-card:hover, .dx-legacy .resource-card:hover, .dx-legacy .tool-card:hover { border-color: #2B4A60 !important; transform: translateY(-3px); }
.dx-legacy .card-header, .dx-legacy .card-footer { background: var(--card) !important; border-color: var(--line) !important; color: var(--text); }
.dx-legacy .card-body { color: inherit; }
.dx-legacy .service-icon, .dx-legacy .feature-icon, .dx-legacy .btn-square { background: var(--blue-soft) !important; color: var(--blue) !important; border-radius: 14px !important; }
.dx-legacy .service-icon i, .dx-legacy .feature-icon i { color: var(--blue) !important; }
.dx-legacy .section-title, .dx-legacy .db-service-eyebrow { font-family: var(--mono) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--blue) !important; }
.dx-legacy .section-title span, .dx-legacy .section-title::before, .dx-legacy .section-title::after { background: var(--blue) !important; }

/* Buttons */
.dx-legacy .btn { border-radius: 12px !important; font-weight: 600; font-family: var(--font); transition: transform .25s var(--ease), background .25s, border-color .25s, color .25s; }
.dx-legacy .btn:hover { transform: translateY(-2px); }
.dx-legacy .btn-primary, .dx-legacy .btn-secondary, .dx-legacy .btn-warning, .dx-legacy .btn-info, .dx-legacy .btn-success, .dx-legacy .db-service-primary {
  background: var(--blue) !important; border-color: var(--blue) !important; color: var(--blue-ink) !important; }
.dx-legacy .btn-primary:hover, .dx-legacy .btn-secondary:hover, .dx-legacy .btn-warning:hover, .dx-legacy .btn-info:hover, .dx-legacy .btn-success:hover, .dx-legacy .db-service-primary:hover { background: var(--blue-hi) !important; border-color: var(--blue-hi) !important; }
.dx-legacy .btn-outline-primary, .dx-legacy .btn-outline-secondary, .dx-legacy .btn-outline-light, .dx-legacy .btn-outline-dark, .dx-legacy .btn-light, .dx-legacy .btn-dark, .dx-legacy .db-service-secondary {
  background: rgba(255, 255, 255, .02) !important; border: 1px solid var(--line-2) !important; color: #fff !important; }
.dx-legacy .btn-outline-primary:hover, .dx-legacy .btn-outline-secondary:hover, .dx-legacy .btn-outline-light:hover, .dx-legacy .btn-outline-dark:hover, .dx-legacy .btn-light:hover, .dx-legacy .btn-dark:hover, .dx-legacy .db-service-secondary:hover { background: rgba(255, 255, 255, .07) !important; border-color: #3D4B5C !important; }
.dx-legacy .btn-link { color: var(--blue-hi) !important; }

/* Forms */
.dx-legacy .form-control, .dx-legacy .form-select, .dx-legacy input[type="text"], .dx-legacy input[type="email"], .dx-legacy input[type="tel"],
.dx-legacy input[type="url"], .dx-legacy input[type="number"], .dx-legacy input[type="search"], .dx-legacy textarea, .dx-legacy select {
  background-color: var(--card) !important; border: 1px solid var(--line-2) !important; color: #fff !important; border-radius: 12px !important; min-height: 48px;
}
.dx-legacy textarea { min-height: 120px; }
.dx-legacy .form-control::placeholder, .dx-legacy input::placeholder, .dx-legacy textarea::placeholder { color: var(--faint) !important; }
.dx-legacy .form-control:focus, .dx-legacy .form-select:focus, .dx-legacy input:focus, .dx-legacy textarea:focus, .dx-legacy select:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 4px rgba(56, 182, 240, .15) !important; outline: none; }
.dx-legacy .form-floating > label { color: var(--faint); }
.dx-legacy .form-label, .dx-legacy label { color: var(--text-2); }
.dx-legacy .form-check-input { background-color: var(--card); border-color: var(--line-2); }
.dx-legacy .form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.dx-legacy select option { background: var(--card); color: #fff; }

/* Tables, lists, accordions, alerts */
.dx-legacy .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, .02); --bs-table-hover-bg: rgba(255, 255, 255, .04); color: #C3CDD7; border-color: var(--line); }
.dx-legacy .table > :not(caption) > * > * { background-color: transparent !important; color: inherit; border-color: var(--line) !important; }
.dx-legacy .table thead th, .dx-legacy .table-light, .dx-legacy .table-primary { background: var(--card) !important; color: #fff !important; }
.dx-legacy .list-group-item { background: var(--surface) !important; border-color: var(--line) !important; color: #C3CDD7 !important; }
.dx-legacy .accordion-item { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; margin-bottom: 10px; overflow: hidden; }
.dx-legacy .accordion-button { background: var(--surface) !important; color: #fff !important; font-weight: 600; box-shadow: none !important; }
.dx-legacy .accordion-button::after { filter: invert(1) hue-rotate(180deg) brightness(1.4); }
.dx-legacy .accordion-body { color: var(--muted); }
.dx-legacy .alert { background: var(--surface) !important; border: 1px solid var(--line-2) !important; color: var(--text) !important; border-radius: var(--r) !important; }
.dx-legacy .badge { border-radius: 999px; }
.dx-legacy .badge.bg-primary, .dx-legacy .badge.bg-secondary { background: var(--blue-soft) !important; color: var(--blue) !important; }
.dx-legacy .progress { background: var(--card); border-radius: 999px; }
.dx-legacy .progress-bar { background: var(--blue) !important; }
.dx-legacy .breadcrumb-item, .dx-legacy .breadcrumb-item a, .dx-legacy .breadcrumb-item + .breadcrumb-item::before { color: var(--faint) !important; }
.dx-legacy .nav-tabs, .dx-legacy .nav-pills { border-color: var(--line); }
.dx-legacy .nav-tabs .nav-link, .dx-legacy .nav-pills .nav-link { color: var(--text-2) !important; border-radius: 10px; }
.dx-legacy .nav-tabs .nav-link.active, .dx-legacy .nav-pills .nav-link.active { background: var(--blue) !important; color: var(--blue-ink) !important; border-color: var(--blue) !important; }
.dx-legacy .modal-content, .dx-legacy .dropdown-menu { background: var(--card); border: 1px solid var(--line-2); color: var(--text); }
.dx-legacy blockquote { border-left: 3px solid var(--blue); padding-left: 18px; color: var(--text); }
.dx-legacy code { background: #151C25; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: #D7E2EC; }

/* Carousels render as a static grid (no carousel script on the new theme) */
.dx-legacy .owl-carousel { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.dx-legacy .owl-carousel > * { min-width: 0; }

/* Section rhythm */
.dx-legacy > .container-xxl:first-child, .dx-legacy > section:first-child { padding-top: 24px; }
.dx-legacy--nohero { padding-top: 32px; }
.dx-legacy .container-xxl.py-5 + .container-xxl.py-5 { border-top: 1px solid var(--line); }

/* Section labels: inline eyebrow, not a bar */
.dx-legacy .section-title { display: inline-flex !important; align-items: center; gap: 10px; width: auto !important; max-width: 100%; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 14px; }
.dx-legacy .section-title span, .dx-legacy .section-title > span { width: 18px !important; height: 1px !important; margin: 0 !important; position: static !important; display: inline-block; opacity: .7; }
.dx-legacy .section-title::before, .dx-legacy .section-title::after { display: none !important; }
.dx-legacy .text-center .section-title, .dx-legacy .section-title.justify-content-center { margin-left: auto; margin-right: auto; }
.dx-legacy .text-center > .section-title { display: flex !important; justify-content: center; }

/* Keep content on the same measure as the header */
.dx-legacy .container, .dx-legacy .container-lg, .dx-legacy .container-xl, .dx-legacy .container-xxl > .container { max-width: 1240px !important; }

/* Headings stay white like the rest of the theme (accent spans inside keep their colour) */
.dx-page-hero h1 { color: #fff !important; }
.dx-legacy h1, .dx-legacy h2, .dx-legacy h3, .dx-legacy h4, .dx-legacy h5, .dx-legacy h6 { color: #fff !important; }
.dx-legacy h1 .text-primary, .dx-legacy h2 .text-primary, .dx-legacy h2 span[class*="text-"], .dx-legacy h1 em, .dx-legacy h2 em { color: var(--blue) !important; }

/* Tall screenshots: show them at a readable size instead of filling the page */
.dx-legacy .row > [class*="col-"] > img.img-fluid { max-height: 720px; width: auto; margin-inline: auto; display: block; border-radius: var(--r-lg); }