/* =====================================================================
   Digibiz theme
   Loaded after styles.css on every page. Restyles the template in the
   Digibiz navy / blue / peach palette with Lexend type.
   ===================================================================== */

:root {
  /* palette (from the logo) */
  --db-navy: #0A1638;
  --db-navy-2: #0F1D47;
  --db-navy-3: #142659;
  --db-blue: #014EF9;
  --db-blue-hover: #1C60FF;
  --db-blue-text: #6D97FF;
  --db-peach: #CEAFA4;
  --db-paper: #EEF1F8;
  --db-muted: #9AA6C6;
  --db-line: rgba(238, 241, 248, 0.10);
  --db-line-strong: rgba(238, 241, 248, 0.18);
  --db-radius: 18px;
  --db-radius-sm: 12px;
  --db-shadow: 0 30px 60px -30px rgba(0, 6, 30, 0.6);

  /* map onto the template's variables */
  --primary: var(--db-blue);
  --main-blue-1: var(--db-blue-text);
  --main-dark: var(--db-navy);
  --dark-2: var(--db-navy-2);
  --page-blue: var(--db-navy);
  --page-blue-mid: var(--db-navy);
  --page-blue-deep: var(--db-navy);
  --stroke-2: var(--db-line);
  --line: var(--db-line);
  --surface: #C9D3EC;   /* used by the template for soft light text */
  --ink: var(--db-paper);
  --white: #FFFFFF;
  --page-bg-image:
    radial-gradient(1100px circle at 85% -10%, rgba(1, 78, 249, 0.20), transparent 60%),
    radial-gradient(800px circle at -10% 35%, rgba(1, 78, 249, 0.10), transparent 60%),
    radial-gradient(700px circle at 100% 100%, rgba(206, 175, 164, 0.06), transparent 60%);
}

/* ---------- Base type ---------- */
body, button, input, select, textarea,
.font-family-2, h1, h2, h3, h4, h5, h6 {
  font-family: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif !important;
}
body { color: var(--db-paper); font-weight: 300; }
p, .desc, .body-2, li { line-height: 1.65; }
p { color: rgba(238, 241, 248, 0.78); font-weight: 300; }
h1, h2, h3, h4, h5, h6 { color: #fff; letter-spacing: -0.02em; }
h1 .fw-3, h2 .fw-3, .title .fw-3 { font-weight: 300 !important; }
.fw-6, .fw-7 { font-weight: 500 !important; }
::selection { background: var(--db-blue); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--db-peach);
  outline-offset: 3px;
}

/* Decorative ring shapes from the template: removed for a cleaner look */
.mask, .page-title-home .mask { display: none !important; }

/* ---------- Trustpilot strip ---------- */
.trustpilot-bar {
  background: #071030;
  color: var(--db-paper);
  border-bottom: 1px solid var(--db-line);
}
.trustpilot-bar-inner { font-family: "Lexend", sans-serif; font-weight: 400; font-size: 13px; min-height: 36px; }
.trustpilot-bar-copy, .trustpilot-bar-brand { color: var(--db-paper); }
.trustpilot-bar-copy strong { font-weight: 500; letter-spacing: 0; }
.trustpilot-bar-brand { font-weight: 500; letter-spacing: 0; }
.trustpilot-bar-star, .trustpilot-bar-mark { background-color: #00B67A; border-radius: 3px; }

/* ---------- Top bar + header ---------- */
.top-bar {
  background: transparent !important;
  border-bottom: 1px solid var(--db-line) !important;
}
.top-bar, .top-bar a, .top-bar span, .top-bar p { color: var(--db-muted) !important; font-size: 13px !important; }
.top-bar a:hover { color: #fff !important; }
.top-bar i { color: var(--db-blue-text) !important; }

.header { border-bottom: 1px solid var(--db-line) !important; }
.header-sticky.header-bg {
  background-color: rgba(10, 22, 56, 0.82) !important;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.header .header-left, .header .header-right { border-color: var(--db-line) !important; }
.header .logo-header { border-color: var(--db-line) !important; }
.main-menu .navigation > li > a, .header .main-menu a {
  font-weight: 400 !important;
  color: rgba(238, 241, 248, 0.82);
  letter-spacing: 0;
}
.main-menu .navigation > li > a:hover, .header .main-menu a:hover { color: #fff; }
.current-menu-item > a { color: #fff !important; }
.current-menu-item > a::before { background-color: var(--db-blue) !important; }
.sub-menu {
  background: var(--db-navy-2) !important;
  border: 1px solid var(--db-line) !important;
  border-radius: var(--db-radius-sm) !important;
  box-shadow: var(--db-shadow) !important;
}
.sub-menu a { color: rgba(238, 241, 248, 0.82) !important; }
.sub-menu a:hover { color: #fff !important; }
.header .mobile-button, .header .header-right .btn-canvas, .tf-btn-menu {
  background: transparent !important;
  border-color: var(--db-line) !important;
}
.mobile-button span, .mobile-button::before, .mobile-button::after { background-color: #fff !important; }

/* ---------- Buttons ---------- */
.tf-btn {
  background-color: var(--db-blue) !important;
  border-radius: 999px !important;
  padding: 16px 30px;
  font-weight: 500 !important;
  box-shadow: 0 10px 30px -12px rgba(1, 78, 249, 0.7);
}
.tf-btn::before { display: none !important; }
.tf-btn span, .tf-btn i { color: #fff !important; }
.tf-btn:hover { background-color: var(--db-blue-hover) !important; transform: translateY(-1px); }
.tf-btn.style-2, .tf-btn.style-border, .tf-btn.btn-border {
  background: transparent !important;
  border: 1px solid var(--db-line-strong) !important;
  box-shadow: none;
}

/* ---------- Headings & labels ---------- */
.heading-section .sub-title,
.top-page-title .sub-title,
.sub-title.body-2 {
  color: var(--db-peach) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  font-size: 13px !important;
}
.heading-section .title { letter-spacing: -0.025em !important; line-height: 1.12 !important; }
.heading-section .title span { letter-spacing: -0.015em !important; color: rgba(238, 241, 248, 0.72); }

/* Highlight word (e.g. "DIGITAL" in the hero): gradient text instead of a box */
.highlight {
  background: linear-gradient(90deg, #3E7BFF 0%, #8FB1FF 55%, var(--db-peach) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 0 !important;
  letter-spacing: 0 !important;
  font-weight: 500;
}

/* ---------- Hero ---------- */
.page-title-home { padding-top: 90px !important; }
.page-title-home .top-page-title .title {
  font-size: clamp(44px, 6.4vw, 92px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  font-weight: 500 !important;
}
.page-title-home .content-left .desc p {
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: rgba(238, 241, 248, 0.75);
}
.hero-video-wrap .hero-video,
.hero-video-wrap {
  border-radius: var(--db-radius) !important;
  overflow: hidden;
}
.hero-video-wrap {
  border: 1px solid var(--db-line-strong) !important;
  background: var(--db-navy-2) !important;
  padding: 8px !important;
  box-shadow: var(--db-shadow), 0 0 0 1px rgba(1, 78, 249, 0.08);
}
.hero-video-wrap .hero-video { border-radius: 12px !important; }
.hero-partners { border-top: 1px solid var(--db-line) !important; }
.hero-partners-label { color: var(--db-muted) !important; letter-spacing: 0.08em; font-weight: 400 !important; }
.hero-partners-logos img { opacity: 0.85; }

/* ---------- Page titles on inner pages ---------- */
.page-title, .page-title-inner, .tf-page-title {
  border-bottom: 1px solid var(--db-line);
}

/* ---------- Marquee big text ---------- */
.tf-marquee, .tf-marquee * { letter-spacing: -0.03em; }
.tf-marquee .marquee-child-item, .tf-marquee .marquee-child-item * { font-weight: 500 !important; }
.tf-marquee .text-stroke, .tf-marquee .stroke, .tf-marquee .color-stroke {
  -webkit-text-stroke-color: rgba(238, 241, 248, 0.25) !important;
}

/* ---------- Cards: services, team, posts, pricing, testimonials ---------- */
.services-item,
.team-item,
.tf-post-list,
.tf-post-grid,
.pricing-item,
.testimonial-item.style-2,
.box-icon,
.accordion-item,
.tf-sidebar .sidebar-item,
.counter-item.style-2 {
  background: linear-gradient(180deg, rgba(20, 38, 89, 0.55), rgba(15, 29, 71, 0.55)) !important;
  border: 1px solid var(--db-line) !important;
  border-radius: var(--db-radius) !important;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.services-item:hover, .team-item:hover, .tf-post-list:hover, .tf-post-grid:hover, .pricing-item:hover {
  border-color: rgba(1, 78, 249, 0.55) !important;
  transform: translateY(-3px);
  box-shadow: var(--db-shadow);
}
.services-item img, .team-item img, .tf-post-list img, .tf-post-grid img { border-radius: var(--db-radius-sm); }
.services-item .title, .services-item h5, .services-item h4 { font-weight: 500 !important; letter-spacing: -0.01em; }

/* Services grid wrapper borders */
.section-services .wrap-services, .section-services .grid-services,
.section-services [class*="services-wrap"] {
  border-color: var(--db-line) !important;
}

/* Counter cards (homepage "100+ businesses" etc.) */
.counter-item.style-2 { padding: 34px 30px !important; }
.counter-item.style-2.style-bg-primary {
  background: linear-gradient(160deg, #0B47E0 0%, var(--db-blue) 55%, #3E7BFF 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 30px 60px -30px rgba(1, 78, 249, 0.8);
}
.counter-item.style-2 .icon {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.counter-item.style-2 .icon i { color: #fff !important; }
.counter-item.style-2 .number, .counter-item.style-2 .title-counter,
.counter-item.style-2 h6, .counter-item.style-2 span { color: #fff !important; }
.counter-item .number-counter { font-weight: 500 !important; letter-spacing: -0.03em; }
.counter-item .color-primary { color: var(--db-blue-text) !important; }

.section-counting .box-logo {
  background: var(--db-navy-2) !important;
  border: 1px solid var(--db-line-strong);
}
.section-counting .box-avatar {
  background: rgba(10, 22, 56, 0.86) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--db-line-strong);
  border-radius: var(--db-radius) !important;
}
.section-counting .image img, .section-company .image img, .image-section img {
  border-radius: var(--db-radius) !important;
}

/* Accordion (Mission / Vision ...) */
.accordion-item { margin-bottom: 12px; padding: 4px 22px !important; }
.accordion-item * { border-color: transparent !important; }
.accordion-item .accordion-button, .accordion-item .title { font-weight: 500 !important; color: #fff !important; }

/* ---------- CTA strip ---------- */
.wg-cta {
  background: linear-gradient(90deg, var(--db-navy-2), var(--db-navy-3)) !important;
  border-top: 1px solid var(--db-line);
  border-bottom: 1px solid var(--db-line);
}
.wg-cta *, .wg-cta a { color: var(--db-paper) !important; }
.wg-cta .title span { color: #fff !important; text-decoration-color: var(--db-blue) !important; text-underline-offset: 4px; }
.wg-cta .icon i { color: var(--db-blue-text) !important; }

/* ---------- Team ---------- */
.team-item .name, .team-item h5, .team-item h6 { font-weight: 500 !important; }
.team-item .position, .team-item p { color: var(--db-muted) !important; }

/* ---------- Projects ---------- */
.section-project .project-item, .project-item, .tf-project-item {
  border-radius: var(--db-radius) !important;
  overflow: hidden;
  border: 1px solid var(--db-line) !important;
  background: var(--db-navy-2) !important;
}

/* ---------- Testimonials ---------- */
.testimonial-item .text, .testimonial-item p { font-weight: 300 !important; line-height: 1.55 !important; color: #fff !important; }
.testimonial-item .icon i, .testimonial-item .icon-quote { color: var(--db-blue-text) !important; }
.swiper-pagination-bullet { background: var(--db-muted) !important; opacity: .4; }
.swiper-pagination-bullet-active { background: var(--db-blue) !important; opacity: 1; }

/* ---------- Contact form block ---------- */
.form-contact-us, .section-form .section-form-content {
  background: var(--db-navy-2) !important;
  border: 1px solid var(--db-line-strong) !important;
  border-radius: var(--db-radius) !important;
  box-shadow: var(--db-shadow);
}
.form-contact-us *, .section-form .section-form-content h2,
.section-form .section-form-content h3, .section-form .section-form-content p { color: var(--db-paper) !important; }
.form-contact-us .title, .section-form-content .title { color: #fff !important; font-weight: 500 !important; }

input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="password"], textarea, select, .nice-select {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--db-line-strong) !important;
  border-radius: var(--db-radius-sm) !important;
  color: #fff !important;
  font-weight: 300 !important;
}
input::placeholder, textarea::placeholder { color: #7381A8 !important; }
input:focus, textarea:focus, select:focus, .nice-select:focus, .nice-select.open {
  border-color: var(--db-blue-text) !important;
  background-color: rgba(1, 78, 249, 0.08) !important;
  box-shadow: none !important;
}
.nice-select .current { color: #fff !important; }
.nice-select .list {
  background: var(--db-navy-2) !important;
  border: 1px solid var(--db-line-strong) !important;
  border-radius: var(--db-radius-sm) !important;
}
.nice-select .option { color: var(--db-paper) !important; background: transparent !important; }
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
  background: rgba(1, 78, 249, 0.2) !important;
}
.form-contact-us i, .form-contact-us .icon { color: var(--db-muted) !important; }

/* ---------- Blog ---------- */
.tf-post-list .post-content .title a, .tf-post-grid .title a { font-weight: 500 !important; letter-spacing: -0.01em; }
.tf-post-list .post-date, .tf-post-list .post-meta, .tf-post-list .post-meta * { color: var(--db-muted) !important; }
.tf-post-list .image, .tf-post-list .image img { background-color: var(--db-navy-3) !important; }
.category-post .item, .tags .item {
  background: rgba(1, 78, 249, 0.14) !important;
  border: 1px solid rgba(1, 78, 249, 0.25);
  color: #fff !important;
  border-radius: 999px !important;
}
.btn-read-more, .tf-post-list .btn-read, a.read-more, .tf-post-list a[class*="read"] {
  border-color: var(--db-line-strong) !important;
  border-radius: 999px !important;
}

/* ---------- Pricing ---------- */
.pricing-item.style-popular {
  border-color: rgba(1, 78, 249, 0.7) !important;
  box-shadow: 0 30px 70px -30px rgba(1, 78, 249, 0.6);
}

/* ---------- Footer ---------- */
.footer {
  background: linear-gradient(180deg, transparent, rgba(5, 12, 34, 0.75) 30%) !important;
  border-top: 1px solid var(--db-line);
}
.footer .footer-middle { border-color: var(--db-line) !important; }
.footer h5, .footer h6, .footer .title, .footer .footer-heading, .footer .title-mobile {
  color: #fff !important;
  font-weight: 500 !important;
  letter-spacing: 0;
}
.footer a, .footer li, .footer p, .footer span { color: rgba(238, 241, 248, 0.7); font-weight: 300; }
.footer a:hover { color: #fff !important; }
.footer .footer-bottom, .footer .bottom-footer { border-top: 1px solid var(--db-line) !important; }
.footer .footer-bottom *, .footer .bottom-footer * { color: var(--db-muted) !important; font-size: 14px; }

/* Newsletter (Brevo / Sendinblue) */
.sib-form, #sib-container, .sib-form .entry__field, .sib-form-block {
  background: transparent !important;
  border: 0 !important;
  font-family: "Lexend", sans-serif !important;
}
.sib-form .input, .sib-form input {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--db-line-strong) !important;
  border-radius: 999px !important;
  color: #fff !important;
}
.sib-form-message-panel svg, .sib-form-message-panel__inner svg, .sib-icon, .sib-hide-loader-icon {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
}
.sib-form-message-panel { border-radius: var(--db-radius-sm) !important; }

/* ---------- Misc ---------- */
.line, hr { border-color: var(--db-line) !important; }
.progress-wrap, .scroll-to-top, #scroll-top, .go-top {
  box-shadow: inset 0 0 0 1px var(--db-line-strong) !important;
  background: rgba(10, 22, 56, 0.8) !important;
}
.progress-wrap svg.progress-circle path { stroke: var(--db-blue) !important; }
#loading, #loading-center { background: var(--db-navy) !important; }
.loader { border-color: rgba(255, 255, 255, 0.1) !important; border-top-color: var(--db-blue) !important; }
.color-primary { color: var(--db-blue-text) !important; }
.bg-primary, .style-bg-primary { background-color: var(--db-blue) !important; }
.offcanvas, .canvas-mb, .mobile-nav-wrap, .offcanvas-menu {
  background: var(--db-navy) !important;
  border-color: var(--db-line) !important;
}
.modal-content {
  background: var(--db-navy-2) !important;
  border: 1px solid var(--db-line-strong) !important;
  border-radius: var(--db-radius) !important;
  color: var(--db-paper);
}

/* ---------- Location links block (footer) ---------- */
.db-locations {
  border-top: 1px solid var(--db-line);
  padding: 28px 0 8px;
  margin-top: 40px;
}
.db-locations h2 {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--db-peach) !important;
  margin: 0 0 16px;
}
.db-locations ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
}
.db-locations a {
  font-size: 14px;
  color: rgba(238, 241, 248, 0.6) !important;
  text-decoration: none;
}
.db-locations a:hover { color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .services-item, .team-item, .tf-post-list, .tf-post-grid, .pricing-item, .tf-btn { transition: none !important; transform: none !important; }
}

/* ---------- Pass 2 fixes ---------- */
/* light-surface counter card -> navy */
.counter-item.style-2.style-bg-surface { background: linear-gradient(180deg, rgba(20,38,89,.7), rgba(15,29,71,.7)) !important; }

/* Contact form fields (template forces white) */
.form-contact-us input, .form-contact-us textarea, .form-contact-us .nice-select,
.form-contact-us select {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
  border: 1px solid var(--db-line-strong) !important;
  border-radius: var(--db-radius-sm) !important;
}
.form-contact-us textarea::placeholder, .form-contact-us input::placeholder { color: #7381A8 !important; }
.form-contact-us .nice-select span, .form-contact-us .nice-select .current { color: rgba(238,241,248,.75) !important; }
.form-contact-us .nice-select::after, .nice-select::after { border-color: var(--db-muted) !important; }

/* Mega-menu (burger) button */
.megamenu-btn {
  background: transparent !important;
  border-left: 1px solid var(--db-line);
  padding: 33px 32px !important;
}
.megamenu-btn .burger span { background-color: #fff !important; height: 2px !important; border-radius: 2px; }
.megamenu-btn:hover .burger span { background-color: var(--db-blue-text) !important; }

/* Big marquee words: quieter, more editorial */
.big-text, .tf-marquee .big-text {
  font-weight: 500 !important;
  letter-spacing: -0.045em !important;
  color: rgba(238, 241, 248, 0.92);
}
.big-text .text-stroke, .text-stroke {
  color: transparent !important;
  -webkit-text-stroke: 1.5px rgba(238, 241, 248, 0.22);
}
.tf-marquee .icon, .tf-marquee i { color: var(--db-blue) !important; }

/* Footer back-to-top */
.footer-go-top { border-color: var(--db-line-strong) !important; background: var(--db-navy) !important; }
.footer-go-top::before { background-color: var(--db-blue) !important; width: 52px !important; height: 52px !important; }
.footer-go-top i { color: #fff !important; }

/* Footer link colours */
.footer-content li a { color: rgba(238, 241, 248, 0.7) !important; }
.footer-content li a:hover { color: #fff !important; }
.footer .locations-contact .address, .footer .locations-contact a { color: rgba(238,241,248,.8) !important; }
.footer .locations-contact .title { color: #fff !important; }

/* Brevo newsletter: only show messages when Brevo activates them */
.sib-form-message-panel { display: none; }
.sib-form-message-panel.sib-form-message-panel--active { display: block; }
.sib-form .sib-container--vertical form { display: flex; gap: 10px; align-items: stretch; }
.sib-form .entry__field { position: relative; }
.sib-form .entry__field i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--db-muted); }
.sib-form .entry__field input.input { padding: 15px 18px 15px 46px !important; width: 100%; min-width: 220px; }
.sib-form .sib-form-block__button { height: 100%; }
.sib-hide-loader-icon { display: none !important; }

/* ---------- Pass 3 ---------- */
/* Lexend everywhere except icon fonts */
body *:not(i):not(svg):not(svg *):not(.db-typer):not(.db-typer *):not([class^="icon-"]):not([class*=" icon-"]):not([class^="fa"]):not([class*=" fa-"]) {
  font-family: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif !important;
}
.input--hidden { display: none !important; }
.sib-form .sib-container--vertical form > div:first-of-type { display: contents; }
.sib-form .flex-grow-1 { flex: 1 1 auto; }

/* =====================================================================
   Pass 4: motion background, tidier cards, logo sizing
   ===================================================================== */

/* ---------- Animated background ---------- */
.db-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.db-bg-glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.db-bg-glow-1 {
  width: 70vmax; height: 70vmax; top: -30vmax; right: -20vmax;
  background: radial-gradient(circle, rgba(1, 78, 249, 0.30) 0%, rgba(1, 78, 249, 0) 62%);
  animation: dbDrift1 28s ease-in-out infinite alternate;
}
.db-bg-glow-2 {
  width: 60vmax; height: 60vmax; bottom: -30vmax; left: -25vmax;
  background: radial-gradient(circle, rgba(62, 123, 255, 0.20) 0%, rgba(62, 123, 255, 0) 60%);
  animation: dbDrift2 34s ease-in-out infinite alternate;
}
.db-bg-glow-3 {
  width: 45vmax; height: 45vmax; top: 35%; left: 45%;
  background: radial-gradient(circle, rgba(206, 175, 164, 0.10) 0%, rgba(206, 175, 164, 0) 60%);
  animation: dbDrift3 40s ease-in-out infinite alternate;
}
@keyframes dbDrift1 { to { transform: translate3d(-12vw, 14vh, 0) scale(1.12); } }
@keyframes dbDrift2 { to { transform: translate3d(14vw, -10vh, 0) scale(1.1); } }
@keyframes dbDrift3 { to { transform: translate3d(-18vw, -12vh, 0) scale(0.9); } }

.db-bg-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(238, 241, 248, 0.09) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
  animation: dbGrid 60s linear infinite;
}
@keyframes dbGrid { to { background-position: 28px 280px; } }

.db-bg-ribbons {
  position: absolute; inset: -10% -5%;
  width: 110%; height: 120%;
  opacity: 0.9;
}
.db-bg-ribbons path {
  fill: none;
  stroke: url(#dbRib);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 900 500;
  animation: dbFlow 14s linear infinite;
}
.db-bg-ribbons path:nth-child(2) { stroke-width: 1.1; opacity: .8; animation-duration: 16s; }
.db-bg-ribbons path:nth-child(3) { stroke-width: .9; opacity: .6; animation-duration: 18s; }
.db-bg-ribbons path:nth-child(4) { stroke-width: .8; opacity: .45; animation-duration: 20s; }
.db-bg-ribbons path:nth-child(5) { stroke-width: .7; opacity: .3; animation-duration: 22s; }
.db-rib-set { animation: dbSway 18s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes dbFlow { to { stroke-dashoffset: -1400; } }
@keyframes dbSway { to { transform: translateY(-40px) scaleY(1.06); } }

@media (max-width: 767px) {
  .db-bg-ribbons { inset: 10% -40% auto; width: 180%; height: 70%; }
}
@media (prefers-reduced-motion: reduce) {
  .db-bg *, .db-bg-ribbons path, .db-rib-set { animation: none !important; }
}

/* ---------- Logo (same artwork as the maintenance page) ---------- */
.logo-header img, .header .logo img { height: 38px !important; width: auto !important; max-width: none; }
.footer img[src*="digibiz-logo"] { height: 42px; width: auto; }
.offcanvas img[src*="digibiz-logo"], .canvas-mb img[src*="digibiz-logo"] { height: 34px; width: auto; }

/* ---------- Services grid: equal, evenly spaced cards ---------- */
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0 !important;
}
.services-grid > [class*="col-"] { width: auto !important; max-width: none !important; padding: 0 !important; flex: none !important; }
.services-grid .services-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 34px 32px 30px !important;
}
.services-item .icon {
  width: 56px !important; height: 56px;
  display: grid !important; place-items: center;
  border-radius: 16px;
  background: rgba(1, 78, 249, 0.14);
  border: 1px solid rgba(62, 123, 255, 0.35);
  margin-bottom: 26px !important;
}
.services-item .icon i { font-size: 22px !important; color: #9DB9FF !important; }
.services-item:hover .icon { background: var(--db-blue); border-color: var(--db-blue); }
.services-item:hover .icon i { color: #fff !important; }
.services-item h6, .services-item h6 a { font-size: 19px !important; line-height: 1.35 !important; margin-bottom: 10px; color: #fff !important; }
.services-item .desc { color: rgba(238, 241, 248, 0.7) !important; font-size: 15px; line-height: 1.65 !important; margin-bottom: 24px; }
.services-item .image {
  display: block;
  margin-top: auto !important;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--db-line);
  aspect-ratio: 3 / 2;
  background: #06102B;
}
.services-item .image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.services-item:hover .image img { transform: scale(1.04); }
.services-item .bottom-item { margin-top: 22px !important; }
.tf-btn-readmore {
  display: inline-flex !important; align-items: center; gap: 10px;
  border: 1px solid var(--db-line-strong);
  border-radius: 999px;
  padding: 7px 16px 7px 8px;
  color: #fff !important;
  transition: border-color .3s, background .3s;
}
.tf-btn-readmore .plus {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--db-blue); color: #fff !important;
  font-size: 15px; line-height: 1; border: 0 !important;
}
.tf-btn-readmore .text { display: inline !important; font-size: 14px; color: #fff !important; opacity: 1 !important; width: auto !important; }
.tf-btn-readmore:hover { border-color: var(--db-blue); background: rgba(1, 78, 249, 0.12); }

@media (max-width: 1199px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .services-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Other card groups: consistent heights and spacing ---------- */
.wg-counter.g-30 { gap: 20px !important; }
.wg-counter .counter-item.style-2 { flex: 1 1 0; }
.sw-team .team-item, .sw-project .swiper-slide > *, .tf-post-list { height: 100%; }
.section-blog .tf-post-list { overflow: hidden; padding: 12px !important; gap: 20px; }
.section-blog .tf-post-list .post-content { padding: 18px 10px 18px 14px; }
.section-blog .tf-post-list .image { border-radius: 14px; overflow: hidden; }
.team-item { padding: 12px 12px 22px !important; }
.team-item .image, .team-item .image img { border-radius: 12px; overflow: hidden; }
.testimonial-item { border-radius: var(--db-radius); }

/* Read-more pill: always show the label */
.tf-btn-readmore, .tf-btn-readmore:hover {
  width: auto !important; height: auto !important;
  justify-content: flex-start !important;
  padding: 6px 16px 6px 6px !important;
  position: relative;
}
.tf-btn-readmore .plus, .tf-btn-readmore:hover .plus {
  position: static !important; transform: none !important; left: auto !important;
}
.tf-btn-readmore .text, .tf-btn-readmore:hover .text {
  position: static !important; transform: none !important;
  opacity: 1 !important; visibility: visible !important; padding-left: 0 !important;
}
.tf-btn-readmore::before, .tf-btn-readmore::after { display: none !important; }

/* Hero: no divider, clear actions */
.page-title-home .desc { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 34px !important; }
.db-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.db-btn-ghost {
  display: inline-flex; align-items: center;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid var(--db-line-strong);
  color: #fff !important;
  font-weight: 400;
  transition: border-color .3s, background .3s;
}
.db-btn-ghost:hover { border-color: rgba(238,241,248,.45); background: rgba(255,255,255,.04); }

/* =====================================================================
   Pass 5: calmer palette. Blue is reserved for buttons and key accents;
   cards and surfaces are neutral navy with peach details.
   ===================================================================== */
:root {
  --db-card: rgba(255, 255, 255, 0.028);
  --db-card-2: rgba(255, 255, 255, 0.045);
  --db-card-line: rgba(255, 255, 255, 0.08);
  --page-bg-image:
    radial-gradient(1000px circle at 85% -10%, rgba(1, 78, 249, 0.10), transparent 60%),
    radial-gradient(700px circle at 100% 100%, rgba(206, 175, 164, 0.05), transparent 60%);
}

/* softer moving background */
.db-bg-glow-1 { background: radial-gradient(circle, rgba(1, 78, 249, 0.14) 0%, rgba(1, 78, 249, 0) 62%); }
.db-bg-glow-2 { background: radial-gradient(circle, rgba(62, 123, 255, 0.08) 0%, rgba(62, 123, 255, 0) 60%); }
.db-bg-glow-3 { background: radial-gradient(circle, rgba(206, 175, 164, 0.09) 0%, rgba(206, 175, 164, 0) 60%); }
.db-bg-grid { background-image: radial-gradient(rgba(238, 241, 248, 0.06) 1px, transparent 1.2px); }
.db-bg-ribbons { opacity: .55; }

/* neutral cards everywhere */
.services-item,
.team-item,
.tf-post-list,
.tf-post-grid,
.pricing-item,
.testimonial-item.style-2,
.box-icon,
.accordion-item,
.tf-sidebar .sidebar-item,
.counter-item.style-2.style-bg-surface,
.form-contact-us,
.section-form .section-form-content,
.sidebar-banner,
.wg-details .according-item,
.project-item, .tf-project-item, .section-project .project-item {
  background: var(--db-card) !important;
  border-color: var(--db-card-line) !important;
}
.services-item:hover, .team-item:hover, .tf-post-list:hover, .tf-post-grid:hover, .pricing-item:hover {
  border-color: rgba(206, 175, 164, 0.35) !important;
  background: var(--db-card-2) !important;
}

/* service icons in peach */
.services-item .icon {
  background: rgba(206, 175, 164, 0.08) !important;
  border-color: rgba(206, 175, 164, 0.22) !important;
}
.services-item .icon i { color: var(--db-peach) !important; }
.services-item:hover .icon { background: var(--db-peach) !important; border-color: var(--db-peach) !important; }
.services-item:hover .icon i { color: var(--db-navy) !important; }
.services-item .image { background: #070F28; border-color: var(--db-card-line); }

/* read-more pill: white dot, peach on hover */
.tf-btn-readmore { border-color: var(--db-card-line) !important; }
.tf-btn-readmore .plus { background: #fff !important; color: var(--db-navy) !important; }
.tf-btn-readmore:hover { border-color: rgba(206, 175, 164, 0.45) !important; background: rgba(206, 175, 164, 0.06) !important; }
.tf-btn-readmore:hover .plus { background: var(--db-peach) !important; }

/* CTA strip: neutral */
.wg-cta { background: rgba(255, 255, 255, 0.03) !important; }
.wg-cta .icon i { color: var(--db-peach) !important; }
.wg-cta .title span { text-decoration-color: var(--db-peach) !important; }

/* inputs: neutral focus */
input:focus, textarea:focus, select:focus, .nice-select:focus, .nice-select.open,
.form-contact-us input:focus, .form-contact-us textarea:focus {
  border-color: rgba(206, 175, 164, 0.6) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* small accents that were blue -> peach / white */
.counter-item .color-primary, .color-primary { color: #fff !important; }
.testimonial-item .icon i, .testimonial-item .icon-quote { color: var(--db-peach) !important; }
.swiper-pagination-bullet-active { background: var(--db-peach) !important; }
.current-menu-item > a::before { background-color: var(--db-peach) !important; }
.megamenu-btn:hover .burger span { background-color: var(--db-peach) !important; }
.tf-marquee .icon, .tf-marquee i { color: var(--db-peach) !important; }
.category-post .item, .tags .item {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--db-card-line) !important;
}
.process-item .icon, .features-item .number-features {
  background: rgba(206, 175, 164, 0.1) !important;
  color: var(--db-peach) !important;
  border-color: rgba(206, 175, 164, 0.25) !important;
}
.hero-video-wrap { background: var(--db-card) !important; box-shadow: var(--db-shadow) !important; }
.highlight { background: linear-gradient(90deg, #5A8BFF 0%, #A9BEF2 50%, var(--db-peach) 100%); -webkit-background-clip: text; background-clip: text; }

/* keep one strong blue moment: the primary counter + buttons */
.counter-item.style-2.style-bg-primary { box-shadow: 0 30px 60px -34px rgba(1, 78, 249, 0.55); }
.db-locations { padding-bottom: 56px !important; margin-bottom: 0 !important; }
.db-locations ul { gap: 10px 26px !important; }

/* Location pages: link lists as tidy pills */
.db-service-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0 !important; padding: 0; }
.db-service-links li { margin: 0 !important; }
.db-service-links a {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--db-card-line);
  background: var(--db-card);
  color: rgba(238, 241, 248, 0.85) !important;
  font-size: 14px;
  transition: border-color .3s, color .3s;
}
.db-service-links a:hover { border-color: rgba(206, 175, 164, 0.5); color: #fff !important; }

/* breadcrumbs and sidebar banner */
.page-breadkcum, .breadkcum .page-breadkcum { color: var(--db-peach) !important; }
.breadkcum .dot { background: var(--db-muted) !important; }
.sidebar-banner, .sidebar-banner .box-content {
  background: linear-gradient(160deg, rgba(1, 78, 249, 0.18), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid var(--db-card-line) !important;
  border-radius: var(--db-radius) !important;
}
.sidebar-banner .sub-title { color: var(--db-peach) !important; }

/* Hero copy: shorter on phones */
.db-desc-short { display: none; }
@media (max-width: 767px) {
  .db-desc-full { display: none; }
  .db-desc-short { display: inline; }
  .page-title-home .content-left .desc p { font-size: 17px !important; line-height: 1.6 !important; }
  .db-hero-actions .tf-btn, .db-hero-actions .db-btn-ghost { flex: 1 1 auto; justify-content: center; }
}

/* "100+ Trusted Clients" card: tidier underline */
.section-counting .box-avatar .text img { opacity: .5; }
@media (max-width: 767px) {
  .db-hero-actions > a { flex: 1 1 140px !important; max-width: none !important; justify-content: center !important; text-align: center; }
}

/* ---------- Footer: services / locations / industries ---------- */
.db-locations {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
}
.db-loc-group ul { display: flex; flex-direction: column; gap: 9px !important; }
@media (max-width: 991px) { .db-locations { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .db-locations { grid-template-columns: 1fr; } }

/* ---------- Article styles (guides / blog) ---------- */
.db-article { color: rgba(238, 241, 248, 0.82); }
.db-article p, .db-article li { font-size: 16px; line-height: 1.75 !important; margin-bottom: 14px; }
.db-article .db-lead { font-size: 19px; color: #fff; margin-bottom: 28px; }
.db-article h2 { font-size: 28px !important; font-weight: 500 !important; margin: 44px 0 14px; letter-spacing: -0.02em; }
.db-article-h3, .db-article h3 { font-size: 19px !important; font-weight: 500 !important; margin: 26px 0 8px; color: #fff; }
.db-list { padding-left: 0; margin: 0 0 10px; }
.db-list li { position: relative; padding-left: 22px; list-style: none; }
.db-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--db-peach); }
.db-article strong { color: #fff; font-weight: 500; }
.db-table-wrap { overflow-x: auto; margin: 18px 0 8px; border: 1px solid var(--db-card-line); border-radius: var(--db-radius-sm); }
.db-table { width: 100%; min-width: 560px; table-layout: auto; border: 0 !important; }
.db-table th, .db-table td { border: 0 !important; border-bottom: 1px solid var(--db-card-line) !important; padding: 14px 16px; font-size: 15px; line-height: 1.5; vertical-align: top; }
.db-table th { color: var(--db-peach); font-weight: 400; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; background: var(--db-card); }
.db-table td:first-child { color: #fff; }
.db-table td:nth-child(2) { color: #fff; white-space: nowrap; font-weight: 500; }
.db-table tr:last-child td { border-bottom: 0 !important; }
.db-callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  margin: 30px 0; padding: 24px 26px;
  border-radius: var(--db-radius);
  background: linear-gradient(135deg, rgba(1, 78, 249, 0.18), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--db-card-line);
}
.db-callout p { margin: 0; max-width: 46ch; }
.db-inline-link { color: #fff !important; text-decoration: underline; text-decoration-color: var(--db-peach); text-underline-offset: 3px; }
.db-inline-link:hover { color: var(--db-peach) !important; }
.mt-20 { margin-top: 20px; }

/* ---------- Typewriter label beside service icons ---------- */
.services-item .db-card-top { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; min-height: 56px; }
.services-item .db-card-top .icon { margin-bottom: 0 !important; flex: none; }
.db-typer {
  display: inline-flex; align-items: center;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: 14px; letter-spacing: 0.02em;
  color: var(--db-peach);
  white-space: nowrap; min-width: 0; overflow: hidden;
}
.db-typer-text { font-family: inherit !important; }
.db-caret {
  display: inline-block; width: 2px; height: 1.15em; margin-left: 3px;
  background: var(--db-peach); opacity: 0;
}
.db-typer.is-typing .db-caret { opacity: 1; }
.db-typer.is-done .db-caret { animation: dbBlink 1s steps(1) infinite; opacity: 1; }
@keyframes dbBlink { 50% { opacity: 0; } }
.services-item:hover .db-typer { color: #fff; }
.services-item:hover .db-caret { background: #fff; }
@media (max-width: 400px) { .db-typer { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .db-typer.is-done .db-caret { animation: none; } }

/* Form spam trap + messages */
.db-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.flat-alert { border-radius: var(--db-radius-sm); padding: 14px 44px 14px 16px; position: relative; font-size: 15px; line-height: 1.5; }
.flat-alert.msg-success { background: rgba(0, 182, 122, 0.12); border: 1px solid rgba(0, 182, 122, 0.4); color: #9FE3C6 !important; }
.flat-alert.msg-error { background: rgba(255, 120, 100, 0.10); border: 1px solid rgba(255, 120, 100, 0.4); color: #FFB4A8 !important; }

/* =====================================================================
   Case study layout (db-cs)
   ===================================================================== */
.db-cs { padding-top: 70px; }
.db-cs-eyebrow { color: var(--db-peach) !important; font-size: 13px !important; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px !important; font-weight: 400; }
.db-cs-intro { max-width: 860px; margin: 0 auto 56px; text-align: center; }
.db-cs-title { font-size: clamp(32px, 4.6vw, 58px) !important; line-height: 1.08 !important; font-weight: 500 !important; letter-spacing: -0.03em !important; margin: 0 0 22px; }
.db-cs-title span { color: rgba(238, 241, 248, 0.7); font-weight: 300; }
.db-cs-lead { font-size: 18px !important; line-height: 1.7 !important; color: rgba(238, 241, 248, 0.78); margin: 0 auto 32px; max-width: 720px; }
.db-cs-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.db-cs-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 40px; padding: 0;
  border: 1px solid var(--db-card-line); border-radius: var(--db-radius);
  background: var(--db-card); overflow: hidden;
}
.db-cs-meta > div { padding: 22px 26px; border-left: 1px solid var(--db-card-line); }
.db-cs-meta > div:first-child { border-left: 0; }
.db-cs-meta dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--db-muted); font-weight: 400; margin-bottom: 6px; }
.db-cs-meta dd { margin: 0; color: #fff; font-weight: 400; font-size: 16px; }
.db-cs-meta a { color: #fff !important; text-decoration: underline; text-decoration-color: var(--db-peach); text-underline-offset: 3px; }

.db-cs-shot { margin: 0; border-radius: var(--db-radius); overflow: hidden; border: 1px solid var(--db-card-line); background: #0B1430; box-shadow: var(--db-shadow); }
.db-cs-shot img { display: block; width: 100%; height: auto; }
.db-cs-shot figcaption { padding: 14px 18px; font-size: 14px; color: var(--db-muted); border-top: 1px solid var(--db-card-line); background: var(--db-card); }
.db-cs-shot-hero { margin: 0 0 90px; }
.db-browser { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #0E1A3E; border-bottom: 1px solid var(--db-card-line); }
.db-browser span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.db-browser span:nth-child(1) { background: #FF5F57; } .db-browser span:nth-child(2) { background: #FEBC2E; } .db-browser span:nth-child(3) { background: #28C840; }
.db-browser em { font-style: normal; font-size: 12px; color: var(--db-muted); margin-left: 12px; padding: 3px 14px; border-radius: 999px; background: rgba(255,255,255,.05); }

.db-cs-split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px 70px; margin-bottom: 90px; align-items: start; }
.db-cs h3 { font-size: clamp(26px, 3vw, 38px) !important; font-weight: 500 !important; letter-spacing: -0.02em; line-height: 1.15 !important; margin: 0 0 14px; color: #fff; }
.db-cs-text p, .db-cs-sub, .db-cs-result p { font-size: 17px !important; line-height: 1.75 !important; color: rgba(238,241,248,.78); }
.db-cs-text strong { color: #fff; font-weight: 500; }
.db-cs-section { margin-bottom: 90px; }
.db-cs-sub { max-width: 720px; margin: 0 0 30px; }
.db-cs-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.db-cs-feature { padding: 28px; border-radius: var(--db-radius); border: 1px solid var(--db-card-line); background: var(--db-card); transition: border-color .3s, background .3s; }
.db-cs-feature:hover { border-color: rgba(206,175,164,.35); background: var(--db-card-2); }
.db-cs-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(206,175,164,.08); border: 1px solid rgba(206,175,164,.22); margin-bottom: 18px; }
.db-cs-ico i { color: var(--db-peach); font-size: 18px; }
.db-cs-feature h4 { font-size: 18px !important; font-weight: 500 !important; margin: 0 0 8px; color: #fff; }
.db-cs-feature p { font-size: 15px !important; line-height: 1.65 !important; color: rgba(238,241,248,.7); margin: 0; }
.db-cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.db-cs-result {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px 60px; align-items: center;
  padding: clamp(28px, 4vw, 52px); margin-bottom: 70px;
  border-radius: calc(var(--db-radius) + 6px);
  background: linear-gradient(135deg, rgba(1, 78, 249, .22), rgba(255, 255, 255, .03) 60%);
  border: 1px solid var(--db-card-line);
}
.db-cs-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.db-cs-checks li { position: relative; padding-left: 32px; color: #fff; font-size: 16px; }
.db-cs-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--db-peach); }
.db-cs-checks li::after { content: ""; position: absolute; left: 7px; top: 6px; width: 6px; height: 10px; border: solid var(--db-navy); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.db-cs-cta { text-align: center; padding: 70px 20px 20px; border-top: 1px solid var(--db-card-line); }
.db-cs-cta p { color: rgba(238,241,248,.75); font-size: 17px; max-width: 560px; margin: 0 auto 28px; }

@media (max-width: 991px) {
  .db-cs-meta { grid-template-columns: 1fr 1fr; }
  .db-cs-meta > div:nth-child(3) { border-left: 0; }
  .db-cs-meta > div:nth-child(n+3) { border-top: 1px solid var(--db-card-line); }
  .db-cs-split, .db-cs-result { grid-template-columns: 1fr; }
  .db-cs-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .db-cs { padding-top: 40px; }
  .db-cs-features, .db-cs-grid { grid-template-columns: 1fr; }
  .db-cs-shot-hero, .db-cs-section, .db-cs-split { margin-bottom: 60px; }
  .db-cs-actions > a { flex: 1 1 160px; justify-content: center; text-align: center; }
}

/* Case study: mobile refinements */
.db-cs-zoom { display: block; position: relative; cursor: zoom-in; }
.db-cs-zoom::after {
  content: "Tap to enlarge"; position: absolute; right: 10px; bottom: 10px;
  font-size: 12px; color: #fff; background: rgba(10, 22, 56, .78);
  padding: 5px 10px; border-radius: 999px; opacity: 0; transition: opacity .3s;
}
.db-cs-zoom:hover::after { opacity: 1; }
@media (max-width: 640px) {
  .db-cs-meta { grid-template-columns: 1fr; }
  .db-cs-meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 18px; border-left: 0 !important; border-top: 1px solid var(--db-card-line); }
  .db-cs-meta > div:first-child { border-top: 0; }
  .db-cs-meta dt { margin: 0; flex: none; }
  .db-cs-meta dd { text-align: right; font-size: 15px; word-break: break-word; }
  .db-cs-zoom::after { opacity: 1; }
  .db-cs-title { font-size: 32px !important; }
  .db-cs-lead { font-size: 16px !important; }
  .db-browser em { font-size: 11px; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 640px) {
  .db-cs-actions { flex-direction: column; align-items: stretch; }
  .db-cs-actions > a { width: 100% !important; max-width: none !important; justify-content: center !important; }
}
@media (max-width: 640px) { .db-cs-actions > a { flex: 0 0 auto !important; } }

/* Case study results strip */
.db-cs-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.db-cs-stats > div { padding: 22px 24px; border-radius: var(--db-radius-sm); background: rgba(10, 22, 56, 0.55); border: 1px solid var(--db-card-line); }
.db-cs-stats strong { display: block; font-size: clamp(30px, 4vw, 46px); font-weight: 500; letter-spacing: -0.03em; color: #fff; line-height: 1.05; }
.db-cs-stats span { display: block; margin-top: 6px; color: var(--db-peach); font-size: 14px; }
@media (max-width: 640px) { .db-cs-stats { grid-template-columns: 1fr; } }

/* Homepage case study slider: show the whole screenshot */
.sw-project .project-item { align-items: center; }
.sw-project .project-item .image {
  aspect-ratio: 16 / 9;
  height: auto !important;
  align-self: center;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--db-card-line);
  margin: 10px !important;
}
.sw-project .project-item .image img {
  width: 100%; height: 100% !important;
  object-fit: cover; object-position: left top;
  transition: transform .6s ease;
}
.sw-project .project-item:hover .image img { transform: scale(1.03); }