/*--------------------------------------------------------------
  DevZoic — Light Mode Override
  Loads AFTER style.css + all module CSS
  Flips the dark template to a premium light-mode design
--------------------------------------------------------------*/

/* ============================================================
   1. CSS VARIABLES — LIGHT PALETTE
   ============================================================ */
:root {
  /* Override template dark colors */
  --techguru-gray: #5A6477;
  --techguru-gray-rgb: 90, 100, 119;
  --techguru-black: #0B192C;
  --techguru-black-rgb: 11, 25, 44;
  --techguru-white: #ffffff;
  --techguru-white-rgb: 255, 255, 255;
  --techguru-base: #38B249;
  --techguru-base-rgb: 56, 178, 73;

  /* NEW light-mode tokens */
  --dz-bg-primary: #ffffff;
  --dz-bg-alt: #F7F8FC;
  --dz-bg-soft: #EDFBEF;
  --dz-text-heading: #0B192C;
  --dz-text-body: #4A5568;
  --dz-text-muted: #8896A6;
  --dz-border: #E8ECF1;
  --dz-card-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  --dz-card-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.10);
}


/* ============================================================
   2. BODY & GLOBAL
   ============================================================ */
body {
  background-color: var(--dz-bg-primary);
  color: var(--dz-text-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dz-text-heading);
}

a {
  color: var(--techguru-base);
}

p {
  color: var(--dz-text-body);
}

/* Preloader — light */
.loader {
  background: #fff;
}

/* ============================================================
   3. SECTION TITLES
   ============================================================ */
.section-title__title {
  color: var(--dz-text-heading);
}

.section-title__title span {
  color: var(--techguru-base);
}

.section-title__tagline {
  background: linear-gradient(270deg, #38B249 0%, #2E8B2E 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-title__tagline-shape-1,
.section-title__tagline-shape-2 {
  background: linear-gradient(270deg, #38B249 0%, #2E8B2E 100%);
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.thm-btn {
  background: linear-gradient(270deg, #38B249 0%, #2E8B2E 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(56, 178, 73, 0.25);
  border-radius: 12px !important;
  white-space: nowrap !important;
}

.thm-btn:hover {
  color: #fff;
  box-shadow: 0 6px 28px rgba(56, 178, 73, 0.4);
}

.thm-btn::before,
.thm-btn::after {
  background-color: #2E8B2E;
}

/* Global outline button support */
.thm-btn.dz-btn-outline {
  background: transparent !important;
  color: var(--techguru-base) !important;
  border: 2px solid var(--techguru-base) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 23px 15px !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  font-weight: 600 !important;
}

.thm-btn.dz-btn-outline svg {
  transition: transform 0.3s ease !important;
  color: var(--techguru-base) !important;
}

.thm-btn.dz-btn-outline:hover {
  background: var(--techguru-base) !important;
  color: #fff !important;
  border-color: var(--techguru-base) !important;
  box-shadow: 0 8px 20px rgba(56, 178, 73, 0.2) !important;
}

.thm-btn.dz-btn-outline:hover svg {
  transform: scale(1.1) rotate(5deg) !important;
  color: #fff !important;
}

/* ============================================================
   5. HEADER — LIGHT TOP BAR + LIGHT NAV
   ============================================================ */

/* ---------- Logo visibility ---------- */
/* By default: show black logo, hide white logo (for inner pages) */
.dz-logo-white {
  display: none !important;
}
.dz-logo-black {
  display: block !important;
}

/* Top bar */
.main-menu__top {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.main-menu__top:before {
  background-color: transparent !important;
}

.main-menu__top-social a {
  color: #475569 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.main-menu__top-social a:hover {
  color: #fff !important;
  border-color: var(--techguru-base) !important;
}

.main-menu__top-social a:before {
  background-color: var(--techguru-base) !important;
}

.main-menu__top-menu li a {
  color: #475569 !important;
}

.main-menu__top-menu li a:hover {
  color: var(--techguru-base) !important;
}

.main-menu__top-menu li:before {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.main-menu__contact-list li .text p,
.main-menu__contact-list li .text p a {
  color: #475569 !important;
}

.main-menu__contact-list li .text p a:hover {
  color: var(--techguru-base) !important;
}

.main-menu__contact-list li .icon i,
.main-menu__contact-list li .icon span {
  color: var(--techguru-base) !important;
}

.main-menu__contact-list li:before {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Client Login Button */
.dz-client-login-btn {
  color: var(--techguru-base) !important;
  border: 1px solid rgba(56, 178, 73, 0.3) !important;
  background-color: transparent !important;
}

.dz-client-login-btn:hover {
  background: linear-gradient(135deg, #38B249, #2E8B2E) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Main nav wrapper */
.main-menu__wrapper {
  background-color: #fff;
}

.main-menu__wrapper:before {
  border-bottom-color: var(--dz-border);
}

/* Nav links */
.main-menu .main-menu__list > li > a,
.stricky-header .main-menu__list > li > a {
  color: var(--dz-text-heading);
}

.main-menu .main-menu__list > li.current > a,
.main-menu .main-menu__list > li:hover > a,
.stricky-header .main-menu__list > li.current > a,
.stricky-header .main-menu__list > li:hover > a {
  color: var(--techguru-base);
}

.main-menu .main-menu__list > li.dropdown > a:after {
  color: var(--dz-text-heading);
}

.main-menu .main-menu__list > li.current > a::after,
.main-menu .main-menu__list > li:hover > a::after,
.stricky-header .main-menu__list > li.current > a::after,
.stricky-header .main-menu__list > li:hover > a::after {
  color: var(--techguru-base);
}

/* Dropdown menus */
.main-menu .main-menu__list > li > ul,
.main-menu .main-menu__list > li > ul > li > ul,
.stricky-header .main-menu__list > li > ul,
.stricky-header .main-menu__list > li > ul > li > ul {
  background-color: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--dz-border);
}

.main-menu .main-menu__list > li > ul > li > a,
.main-menu .main-menu__list > li > ul > li > ul > li > a,
.stricky-header .main-menu__list > li > ul > li > a,
.stricky-header .main-menu__list > li > ul > li > ul > li > a {
  color: var(--dz-text-body);
  background-color: #fff;
}

.main-menu .main-menu__list > li > ul > li:hover > a,
.main-menu .main-menu__list > li > ul > li > ul > li:hover > a,
.stricky-header .main-menu__list > li > ul > li:hover > a,
.stricky-header .main-menu__list > li > ul > li > ul > li:hover > a {
  background-color: var(--dz-bg-alt);
  color: var(--techguru-base);
}

/* Sticky header */
.stricky-header {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.stricky-header.main-menu {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dz-border);
}

/* Search icon */
.main-menu__search {
  color: var(--dz-text-heading);
}

.main-menu__search:hover {
  color: var(--techguru-base);
}

/* Mobile nav toggler */
.main-menu .mobile-nav__toggler {
  color: var(--dz-text-heading);
}

.main-menu .mobile-nav__toggler:hover {
  color: var(--techguru-base);
}

/* ---------- HOMEPAGE TRANSPARENT HEADER ---------- */
/* Top bar on homepage: dark translucent glass */
.page-home .main-header .main-menu__top {
  background-color: rgba(11, 25, 44, 0.5) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-home .main-header .main-menu__top:before {
  background-color: transparent !important;
}

.page-home .main-header .main-menu__top-social a {
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.page-home .main-header .main-menu__top-social a:hover {
  color: #fff !important;
  border-color: var(--techguru-base) !important;
}

.page-home .main-header .main-menu__contact-list li .text p,
.page-home .main-header .main-menu__contact-list li .text p a {
  color: rgba(255, 255, 255, 0.7) !important;
}

.page-home .main-header .main-menu__contact-list li .text p a:hover {
  color: var(--techguru-base) !important;
}

.page-home .main-header .main-menu__contact-list li .icon i {
  color: rgba(255, 255, 255, 0.5) !important;
}

.page-home .main-header .main-menu__contact-list li:before {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.page-home .main-header .main-menu__top-menu li a {
  color: rgba(255, 255, 255, 0.7) !important;
}

.page-home .main-header .main-menu__top-menu li a:hover {
  color: var(--techguru-base) !important;
}

.page-home .main-header .main-menu__top-menu li:before {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.page-home .main-header .dz-client-login-btn {
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.page-home .main-header .dz-client-login-btn:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #38B249, #2E8B2E) !important;
  border-color: transparent !important;
}

/* Nav wrapper on homepage: fully transparent */
.page-home .main-header .main-menu__wrapper {
  background-color: transparent !important;
}

.page-home .main-header .main-menu__wrapper:before {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* White logo on homepage, hide black */
.page-home .main-header .dz-logo-white {
  display: block !important;
}
.page-home .main-header .dz-logo-black {
  display: none !important;
}

/* White nav links on homepage */
.page-home .main-header .main-menu .main-menu__list > li > a {
  color: #ffffff !important;
}

.page-home .main-header .main-menu .main-menu__list > li.current > a,
.page-home .main-header .main-menu .main-menu__list > li:hover > a {
  color: var(--techguru-base) !important;
}

.page-home .main-header .main-menu .main-menu__list > li.dropdown > a:after {
  color: rgba(255, 255, 255, 0.6) !important;
}

.page-home .main-header .main-menu .main-menu__list > li.current > a::after,
.page-home .main-header .main-menu .main-menu__list > li:hover > a::after {
  color: var(--techguru-base) !important;
}

/* Mobile toggler on homepage */
.page-home .main-header .mobile-nav__toggler {
  color: #ffffff !important;
}

/* CTA button on homepage nav */
.page-home .main-header .main-menu__btn-box .thm-btn {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.page-home .main-header .main-menu__btn-box .thm-btn:hover {
  background: var(--techguru-base) !important;
  border-color: var(--techguru-base) !important;
}

/* Sticky header on homepage — revert to solid white */
.page-home .stricky-header.stricked-menu.main-menu {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.page-home .stricky-header .main-menu__list > li > a {
  color: var(--dz-text-heading) !important;
}

.page-home .stricky-header .main-menu__list > li.current > a,
.page-home .stricky-header .main-menu__list > li:hover > a {
  color: var(--techguru-base) !important;
}

/* ============================================================
   6. HERO / SLIDER — LIGHT MODE
   ============================================================ */
.main-slider {
  background: radial-gradient(circle at 10% 20%, rgba(56, 178, 73, 0.15) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(46, 139, 46, 0.10) 0%, transparent 45%),
              linear-gradient(135deg, #070f1e 0%, #0B192C 100%) !important;
  position: relative;
  overflow: hidden;
}

.main-slider .swiper-slide {
  background-color: transparent !important;
}

.main-slider__title {
  color: #ffffff !important;
  font-size: 50px !important;
  font-weight: 600 !important;
  letter-spacing: -1.2px;
  line-height: 1.18;
}

.main-slider__title span {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  color: var(--techguru-base) !important;
}

.main-slider__sub-title {
  color: #38B249 !important;
}

.main-slider__text {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Subtitle badge — sleek frosted pill */
.main-slider__sub-title-box {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 100px !important;
  padding: 6px 18px 6px 12px !important;
  gap: 8px !important;
}

/* Kill the base template's gradient border pseudo-element */
.main-slider__sub-title-box:before {
  display: none !important;
}

.main-slider__sub-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(56, 178, 73, 0.20);
  flex-shrink: 0;
}

.main-slider__sub-title-icon svg {
  color: var(--techguru-base);
  display: block;
  width: 11px;
  height: 11px;
}

.main-slider__sub-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-transform: capitalize;
}

/* Gradient blur shape — soft nebula glow */
.main-slider__shape-2 {
  display: block !important;
  background: linear-gradient(270deg, rgba(56, 178, 73, 0.25) 0%, rgba(46, 139, 46, 0.18) 100%) !important;
  filter: blur(120px) !important;
  width: 400px !important;
  height: 400px !important;
  opacity: 0.8 !important;
}

/* Hero image gradient fade — softened with taller gradient */
.main-slider__img {
  max-width: 580px !important;
  width: 100% !important;
  bottom: -40px !important;
}

.main-slider__img img {
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.main-slider__img::before {
  background: linear-gradient(0deg, #0B192C 15%, rgba(11, 25, 44, 0) 85%) !important;
}

/* Trust badges in slider */
.main-slider__trust-badges {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.main-slider__trust-number {
  color: #ffffff !important;
}

.main-slider__trust-label {
  color: rgba(255, 255, 255, 0.5) !important;
}

.main-slider__trust-divider {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Outline button on dark background */
.main-slider .dz-btn-outline {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
}

.main-slider .dz-btn-outline:hover {
  background: var(--techguru-base) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Ensure outline button arrow also turns white on hover */
.main-slider .dz-btn-outline .icon-right-arrow {
  color: inherit !important;
}

/* GitHub & OpenAI SVGs are black — invert to white */
.icon-github img,
.icon-ai img {
  filter: brightness(0) invert(1) !important;
}

/* Shield-check icon — removed (template leftover) */
.main-slider__shield-check-icon {
  display: none !important;
}

/* Hero background shapes hidden for custom interactive particles */
.main-slider__shape-1,
.main-slider__shape-3,
.main-slider__shape-4,
.main-slider__shape-5 {
  display: none !important;
}

/* Floating Tech Icons styling */
.dz-floating-icons {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.dz-float-icon {
  position: absolute;
  pointer-events: none;
  transition: transform 0.3s ease;
  width: 48px; /* Uniform consistent sizing */
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
}

.dz-float-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Hide broken image placeholders */
.dz-float-icon img[alt]::after {
  display: block;
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
}

.icon-laravel {
  top: 20%;
  left: 6%;
  opacity: 0.38;
  animation: float-icon-bob-1 8s ease-in-out infinite;
}
.icon-python {
  top: 30%;
  right: 38%;
  opacity: 0.35;
  animation: float-icon-bob-2 10s ease-in-out infinite;
}
.icon-react {
  top: 55%;
  left: 4%;
  opacity: 0.40;
  animation: float-icon-bob-3 12s ease-in-out infinite;
}
.icon-node {
  top: 72%;
  right: 6%;
  opacity: 0.36;
  animation: float-icon-bob-4 9s ease-in-out infinite alternate;
}
.icon-db {
  top: 84%;
  right: 15%;
  opacity: 0.34;
  animation: float-icon-bob-1 11s ease-in-out infinite alternate;
}
.icon-github {
  top: 36%;
  right: 30%;
  opacity: 0.32;
  animation: float-icon-bob-2 14s ease-in-out infinite alternate;
}
.icon-ai {
  top: 48%;
  right: 13%;
  opacity: 0.34;
  animation: float-icon-bob-3 11s ease-in-out infinite alternate;
}
.icon-flutter {
  top: 25%;
  left: 22%;
  opacity: 0.35;
  animation: float-icon-bob-4 10s ease-in-out infinite;
}
.icon-docker {
  top: 22%;
  right: 8%;
  opacity: 0.32;
  animation: float-icon-bob-1 9s ease-in-out infinite;
}
.icon-ts {
  top: 84%;
  left: 4%;
  opacity: 0.38;
  animation: float-icon-bob-2 12s ease-in-out infinite;
}
.icon-figma {
  top: 38%;
  left: 8%;
  opacity: 0.32;
  animation: float-icon-bob-3 13s ease-in-out infinite;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

@keyframes float-icon-bob-1 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(4deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes float-icon-bob-2 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(-5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes float-icon-bob-3 {
  0% { transform: translateX(0px) translateY(0px) rotate(0deg); }
  50% { transform: translateX(12px) translateY(-18px) rotate(3deg); }
  100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
}
@keyframes float-icon-bob-4 {
  0% { transform: translateX(0px) translateY(0px) rotate(0deg); }
  50% { transform: translateX(-10px) translateY(-22px) rotate(-4deg); }
  100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
}

/* Pagination bullets */
#main-slider-pagination .swiper-pagination-bullet {
  border-color: var(--techguru-base);
  background-color: transparent;
}

#main-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--techguru-base);
}

#main-slider-pagination .swiper-pagination-bullet::before {
  border-color: var(--techguru-base);
}

#main-slider-pagination:before {
  background-color: rgba(56, 178, 73, 0.1);
}

/* ---------- Hero-to-Section Wave Divider ---------- */
.dz-hero-divider {
  position: relative;
  margin-top: -80px;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
}

.dz-hero-divider svg {
  display: block;
  width: 100%;
  height: 80px;
}

/* ============================================================
   7. TRUSTED BY SECTION — LIGHT
   ============================================================ */
.dz-trusted {
  background: var(--dz-bg-alt) !important;
}

.dz-trusted__heading {
  color: var(--dz-text-muted) !important;
}

.dz-trusted__card {
  background: #fff !important;
  border-color: var(--dz-border) !important;
}

.dz-trusted__name {
  color: var(--dz-text-heading) !important;
}

.dz-trusted__card--more {
  background: var(--dz-bg-soft) !important;
}

.dz-trusted__more {
  color: var(--techguru-base) !important;
}

/* ============================================================
   8. SERVICES SECTION — LIGHT
   ============================================================ */
.servces-one {
  background-color: var(--dz-bg-primary);
}

@media (min-width: 1200px) {
  .servces-one__top .row {
    display: flex !important;
    align-items: center !important;
  }
  .servces-one__top-right {
    margin-top: 0 !important;
    padding-left: 32px !important;
    border-left: 2px solid rgba(56, 178, 73, 0.25) !important;
  }
}

.servces-one__top-text {
  color: var(--dz-text-body) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-weight: 500 !important;
  letter-spacing: -0.1px !important;
}

/* Service cards — light */
.dz-svc-card {
  position: relative !important;
  background: #fff !important;
  border: 1px solid rgba(11, 25, 44, 0.05) !important;
  border-radius: 20px !important;
  border-image: none !important;
  box-shadow: 0 10px 30px rgba(11, 25, 44, 0.03), 0 1px 3px rgba(11, 25, 44, 0.01) !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.dz-svc-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #38B249, #2E8B2E) !important;
  z-index: 2 !important;
  transition: all 0.3s ease !important;
}

.dz-svc-card::before {
  content: '' !important;
  position: absolute !important;
  top: -50px !important;
  left: -50px !important;
  width: 200px !important;
  height: 200px !important;
  background: radial-gradient(circle, rgba(56, 178, 73, 0.06) 0%, transparent 70%) !important;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: 50% !important;
}

.dz-svc-card:hover {
  border-color: rgba(56, 178, 73, 0.28) !important;
  box-shadow: 0 24px 48px -12px rgba(56, 178, 73, 0.12), 0 12px 24px -16px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-8px) !important;
}

.dz-svc-card:hover::after {
  height: 6px !important;
  box-shadow: 0 2px 8px rgba(56, 178, 73, 0.25) !important;
}

.dz-svc-card:hover::before {
  transform: scale(1.4) translate(15px, 15px) !important;
}

.dz-svc-card__icon-wrap {
  position: relative !important;
  z-index: 1 !important;
  background: var(--dz-bg-alt) !important;
  border: 1px solid var(--dz-border) !important;
  border-radius: 16px !important;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.dz-svc-card:hover .dz-svc-card__icon-wrap {
  background: var(--dz-bg-soft) !important;
  border-color: rgba(56, 178, 73, 0.35) !important;
  box-shadow: 0 8px 20px rgba(56, 178, 73, 0.15) !important;
}

.dz-svc-card__icon-wrap img,
.dz-svc-card__icon-wrap svg {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dz-svc-card:hover .dz-svc-card__icon-wrap svg {
  transform: scale(1.1) rotate(6deg) !important;
}

.dz-svc-card__body {
  position: relative !important;
  z-index: 1 !important;
}

.dz-svc-card__title {
  color: var(--dz-text-heading) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  transition: all 0.3s ease !important;
  margin-bottom: 12px !important;
}

.dz-svc-card:hover .dz-svc-card__title {
  transform: translateX(4px) !important;
  color: #38B249 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
}

.dz-svc-card__text {
  color: var(--dz-text-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

.dz-svc-card__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.dz-svc-card__tags span {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: var(--dz-bg-alt) !important;
  color: var(--dz-text-body) !important;
  border: 1px solid var(--dz-border) !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.dz-svc-card__tags span:hover {
  transform: translateY(-3px) scale(1.05) !important;
  color: #38B249 !important;
  border-color: rgba(56, 178, 73, 0.3) !important;
  background: var(--dz-bg-soft) !important;
  box-shadow: 0 4px 10px rgba(56, 178, 73, 0.12) !important;
}

.dz-svc-card:hover .dz-svc-card__tags span {
  border-color: rgba(11, 25, 44, 0.08) !important;
}

.dz-tag-icon {
  opacity: 0.85 !important;
  transition: transform 0.2s ease !important;
}

.dz-svc-card__tags span:hover .dz-tag-icon {
  transform: scale(1.1) !important;
  opacity: 1 !important;
}

.dz-svc-card__arrow {
  background: #fff !important;
  border: 1px solid var(--dz-border) !important;
  color: var(--dz-text-muted) !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.dz-svc-card:hover .dz-svc-card__arrow {
  background: #38B249 !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: scale(1.1) rotate(45deg) !important;
  box-shadow: 0 4px 12px rgba(56, 178, 73, 0.25) !important;
}

/* Tech cards on service detail pages — light */
.dz-tech-card {
  background: #fff !important;
  border-color: var(--dz-border) !important;
  backdrop-filter: none !important;
  box-shadow: var(--dz-card-shadow) !important;
}

.dz-tech-card:hover {
  border-color: rgba(56, 178, 73, 0.25) !important;
  background: var(--dz-bg-soft) !important;
  box-shadow: var(--dz-card-shadow-hover) !important;
}

.dz-tech-card__name {
  color: var(--dz-text-heading) !important;
}

.dz-tech-card:hover .dz-tech-card__name {
  color: var(--dz-text-heading) !important;
}

/* Service detail sidebar — light */
.services-details__services-list-box {
  background-color: var(--dz-bg-alt) !important;
}

.services-details__services-list-title {
  color: var(--dz-text-heading) !important;
  border-bottom-color: var(--dz-border) !important;
}

.services-details__services-list li a {
  background-color: #fff !important;
  color: var(--dz-text-body) !important;
  border: 1px solid var(--dz-border) !important;
}

.services-details__services-list li.active a,
.services-details__services-list li:hover a {
  color: #fff !important;
}

.services-details__title-1,
.services-details__title-2,
.services-details__title-3,
.services-details__title-4 {
  color: var(--dz-text-heading) !important;
}

.services-details__bdr {
  background-color: var(--dz-border) !important;
}

.services-details__points-two li .content h5 {
  color: var(--dz-text-heading) !important;
}

.services-four__points-box li .content h4 {
  color: var(--dz-text-heading) !important;
}

/* Services list (services page) */
.services-one__services-single {
  border-bottom-color: var(--dz-border);
}

.services-one__title a {
  color: var(--dz-text-heading);
}

.services-one__title a:hover {
  color: var(--techguru-base);
}

.services-one__text {
  color: var(--dz-text-body);
}

/* Service count numbers (01, 02, 03, 04) — green gradient in light mode */
.services-one__count::before {
  color: var(--techguru-base) !important;
  font-weight: 700 !important;
}

/* Arrow circle border — green in light mode */
.services-one__arrow a {
  color: var(--dz-text-heading) !important;
}

.services-one__arrow a:before {
  background: linear-gradient(135deg, var(--techguru-base), #2E8B2E) border-box !important;
}

.services-one__services-list li:hover .services-one__arrow a {
  background-color: var(--techguru-base) !important;
  color: #fff !important;
}

.servces-one__shape-2 {
  opacity: 0.05;
}

/* Hide template decorative shapes (shield icon at top, lock at bottom, floating shape) */
.servces-one__shape-1,
.servces-one__shape-3,
.servces-one__img-2 {
  display: none !important;
}

/* Premium image container */
.servces-one__img-box {
  margin-right: 0 !important;
}

.servces-one__img {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(56, 178, 73, 0.08) !important;
}

.servces-one__img > img {
  border-radius: 16px !important;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.servces-one__img:hover > img {
  transform: scale(1.03) !important;
}

/* Premium service list items */
.services-one__services-single {
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--dz-border) !important;
  transition: all 0.3s ease !important;
}

.services-one__services-list li:last-child .services-one__services-single {
  border-bottom: none !important;
}

.services-one__services-list li:hover .services-one__services-single {
  padding-left: 12px !important;
}

/* ============================================================
   9. SLIDING TEXT / MARQUEE — LIGHT
   ============================================================ */
.sliding-text {
  background: linear-gradient(270deg, rgba(56, 178, 73, 0.06) 0%, rgba(46, 139, 46, 0.03) 100%);
  border-top: 1px solid var(--dz-border);
  border-bottom: 1px solid var(--dz-border);
}

.sliding-text__title {
  color: var(--dz-text-heading) !important;
  -webkit-text-stroke-color: var(--dz-text-heading) !important;
  background: linear-gradient(266.69deg, rgba(0, 0, 0, 0.04) 2.9%, rgba(0, 0, 0, 0.01) 96.45%);
}

.sliding-text__title::after {
  background: linear-gradient(90deg, rgba(56, 178, 73, 0.2), rgba(56, 178, 73, 0.05)) border-box !important;
}

.sliding-text__list li span {
  border-color: var(--dz-border);
  background: var(--dz-bg-alt);
}

.sliding-text__list li span.dz-marquee-icon {
  background: var(--dz-bg-soft) !important;
  border-color: rgba(56, 178, 73, 0.2) !important;
}

.dz-marquee-icon img {
  filter: none !important;
}

/* Sliding text two & three */
.sliding-text-two__title,
.sliding-text-three__title {
  color: var(--dz-text-heading) !important;
}

.dz-marquee-icon img {
  filter: none !important;
}

/* ============================================================
   10. ABOUT SECTION — LIGHT
   ============================================================ */
.about-one {
  background-color: var(--dz-bg-alt);
  padding: 100px 0 80px !important;
}

.about-one__text {
  color: var(--dz-text-body);
}

.about-one__shape-1 {
  opacity: 0.05;
}

/* About stats */
.dz-about-stats {
  background: #ffffff !important;
  border: 1px solid rgba(11, 25, 44, 0.05) !important;
  border-radius: 20px !important;
  padding: 24px 32px !important;
  box-shadow: 0 12px 30px rgba(11, 25, 44, 0.03) !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  margin: 32px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.dz-about-stats::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--techguru-base), transparent) !important;
  opacity: 0.7 !important;
}

.dz-about-stats__number {
  font-size: 32px !important;
  background: linear-gradient(135deg, var(--techguru-base), #2E8B2E) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
}

.dz-about-stats__label {
  color: var(--dz-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

.dz-about-stats__divider {
  background: linear-gradient(180deg, transparent, rgba(56, 178, 73, 0.2), transparent) !important;
  width: 1px !important;
  height: 40px !important;
}

/* About points */
.about-one__points li {
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.about-one__points li+li {
  margin-top: 0 !important;
}

.about-one__points li:hover {
  background: #ffffff !important;
  border-color: rgba(56, 178, 73, 0.08) !important;
  box-shadow: 0 10px 30px rgba(11, 25, 44, 0.03) !important;
  transform: translateX(6px) !important;
}

.about-one__points li .content h3 {
  color: var(--dz-text-heading);
  margin-bottom: 4px !important;
  transition: color 0.3s ease !important;
}

.about-one__points li:hover .content h3 {
  color: var(--techguru-base) !important;
}

.about-one__points li .content p {
  color: var(--dz-text-body);
  margin: 0 !important;
}

.about-one__points li .icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--dz-bg-soft) !important;
  border: 1px solid rgba(56, 178, 73, 0.15) !important;
  top: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}

.about-one__points li .icon span {
  font-size: 14px !important;
  color: var(--techguru-base) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.about-one__points li:hover .icon {
  background: var(--techguru-base) !important;
  border-color: var(--techguru-base) !important;
  transform: scale(1.1) !important;
}

.about-one__points li:hover .icon span {
  color: #ffffff !important;
}

/* Call support / email box */
.about-one__btn-and-call-box {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  margin-top: 30px !important;
}

.about-one__btn-box {
  flex-shrink: 0 !important;
}

.about-one__btn-box .thm-btn {
  white-space: nowrap !important;
}

.about-one__call-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
}

.about-one__call-box:hover {
  background: rgba(56, 178, 73, 0.04) !important;
}

.about-one__call-box .icon {
  background: var(--dz-bg-soft) !important;
  border: 1px solid rgba(56, 178, 73, 0.15) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.about-one__call-box .icon::before {
  display: none !important;
}

.about-one__call-box .icon span {
  color: var(--techguru-base) !important;
  font-size: 18px !important;
  transition: all 0.3s ease !important;
}

.about-one__call-box:hover .icon {
  background: var(--techguru-base) !important;
  border-color: var(--techguru-base) !important;
}

.about-one__call-box:hover .icon span {
  color: #fff !important;
  transform: scale(1.1) !important;
}

.about-one__call-box .content span {
  color: var(--dz-text-muted);
  font-size: 12px !important;
}

.about-one__call-box .content p {
  margin: 0 !important;
}

.about-one__call-box .content p a {
  color: var(--dz-text-heading);
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
}

.about-one__call-box .content p a:hover {
  color: var(--techguru-base) !important;
}

/* ============================================================
   11. COUNTER SECTION — LIGHT
   ============================================================ */
.dz-counter-v3 {
  background-color: var(--dz-bg-primary) !important;
  padding: 120px 0 100px !important;
}

/* Tagline pill badge */
.dz-counter-v3 .section-title__tagline-shape-1,
.dz-counter-v3 .section-title__tagline-shape-2,
.counter-one .section-title__tagline-shape-1,
.counter-one .section-title__tagline-shape-2 {
  display: none !important;
}

.dz-counter-v3 .section-title__tagline,
.counter-one .section-title__tagline {
  background: var(--dz-bg-soft) !important;
  color: var(--techguru-base) !important;
  -webkit-text-fill-color: var(--techguru-base) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  padding: 8px 20px !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  border: 1px solid rgba(56, 178, 73, 0.15) !important;
  margin-bottom: 20px !important;
}

/* Card - Modern glassmorphism and soft glow shadow */
.dz-counter-v3__card {
  background: #ffffff !important;
  border: 1px solid rgba(11, 25, 44, 0.06) !important;
  border-radius: 24px !important;
  padding: 48px 24px 40px !important;
  box-shadow: 0 12px 30px -10px rgba(11, 25, 44, 0.04), 0 4px 12px -5px rgba(11, 25, 44, 0.02) !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.4s ease, 
              border-color 0.4s ease !important;
  overflow: hidden !important;
}

/* Spring transition hover lift */
.dz-counter-v3__card:hover {
  transform: translateY(-10px) scale(1.03) !important;
}

.dz-counter-v3__accent {
  height: 4px !important;
  border-radius: 0 0 4px 4px !important;
}

/* Icon - default */
.dz-counter-v3__icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  background: var(--dz-bg-alt) !important;
  border: 1px solid var(--dz-border) !important;
  color: var(--dz-text-heading) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  margin-bottom: 24px !important;
}

.dz-counter-v3__icon svg {
  width: 28px !important;
  height: 28px !important;
  transition: transform 0.4s ease !important;
}

.dz-counter-v3__card:hover .dz-counter-v3__icon {
  transform: scale(1.1) rotate(8deg) !important;
  border-color: transparent !important;
}

.dz-counter-v3__card:hover .dz-counter-v3__icon svg {
  transform: scale(1.05) !important;
}

/* Typography styles */
.dz-counter-v3__num {
  align-items: baseline !important;
  justify-content: center !important;
  gap: 2px !important;
  margin-bottom: 12px !important;
  min-height: auto !important;
}

.dz-counter-v3__num h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 72px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -1.5px !important;
}

.dz-counter-v3__num span {
  font-family: 'Outfit', sans-serif !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.dz-counter-v3__label {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--dz-text-muted) !important;
  transition: color 0.3s ease !important;
  margin-top: 4px !important;
}

.dz-counter-v3__card:hover .dz-counter-v3__label {
  color: var(--dz-text-heading) !important;
}

/* ============================================================
   THEME COLOR VARIATIONS (HOME PAGE)
   ============================================================ */

/* Card 1: Emerald Accent */
.dz-counter-v3__card--cyan .dz-counter-v3__accent {
  background: linear-gradient(90deg, #10B981, #059669) !important;
}
.dz-counter-v3__card--cyan:hover {
  border-color: rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 22px 45px -15px rgba(16, 185, 129, 0.16), 0 0 0 1px rgba(16, 185, 129, 0.05) inset !important;
}
.dz-counter-v3__card--cyan .dz-counter-v3__icon {
  color: #10B981 !important;
}
.dz-counter-v3__card--cyan:hover .dz-counter-v3__icon {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  color: #ffffff !important;
}
.dz-counter-v3__card--cyan .dz-counter-v3__num h3,
.dz-counter-v3__card--cyan .dz-counter-v3__num h3.odometer,
.dz-counter-v3__card--cyan .dz-counter-v3__num h3.odometer * {
  background: linear-gradient(135deg, #0B192C 40%, #10B981 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.dz-counter-v3__card--cyan .dz-counter-v3__num span {
  color: #10B981 !important;
}

/* Card 2: Brand Green Accent */
.dz-counter-v3__card--pink .dz-counter-v3__accent {
  background: linear-gradient(90deg, #38B249, #2E8B2E) !important;
}
.dz-counter-v3__card--pink:hover {
  border-color: rgba(56, 178, 73, 0.25) !important;
  box-shadow: 0 22px 45px -15px rgba(56, 178, 73, 0.16), 0 0 0 1px rgba(56, 178, 73, 0.05) inset !important;
}
.dz-counter-v3__card--pink .dz-counter-v3__icon {
  color: #38B249 !important;
}
.dz-counter-v3__card--pink:hover .dz-counter-v3__icon {
  background: linear-gradient(135deg, #38B249, #2E8B2E) !important;
  color: #ffffff !important;
}
.dz-counter-v3__card--pink .dz-counter-v3__num h3,
.dz-counter-v3__card--pink .dz-counter-v3__num h3.odometer,
.dz-counter-v3__card--pink .dz-counter-v3__num h3.odometer * {
  background: linear-gradient(135deg, #0B192C 40%, #38B249 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.dz-counter-v3__card--pink .dz-counter-v3__num span {
  color: #38B249 !important;
}

/* Card 3: Deep Teal Accent */
.dz-counter-v3__card--amber .dz-counter-v3__accent {
  background: linear-gradient(90deg, #0D9488, #0F766E) !important;
}
.dz-counter-v3__card--amber:hover {
  border-color: rgba(13, 148, 136, 0.25) !important;
  box-shadow: 0 22px 45px -15px rgba(13, 148, 136, 0.16), 0 0 0 1px rgba(13, 148, 136, 0.05) inset !important;
}
.dz-counter-v3__card--amber .dz-counter-v3__icon {
  color: #0D9488 !important;
}
.dz-counter-v3__card--amber:hover .dz-counter-v3__icon {
  background: linear-gradient(135deg, #0D9488, #0F766E) !important;
  color: #ffffff !important;
}
.dz-counter-v3__card--amber .dz-counter-v3__num h3,
.dz-counter-v3__card--amber .dz-counter-v3__num h3.odometer,
.dz-counter-v3__card--amber .dz-counter-v3__num h3.odometer * {
  background: linear-gradient(135deg, #0B192C 40%, #0D9488 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.dz-counter-v3__card--amber .dz-counter-v3__num span {
  color: #0D9488 !important;
}

/* Card 4: Forest Green Accent */
.dz-counter-v3__card--green .dz-counter-v3__accent {
  background: linear-gradient(90deg, #22C55E, #15803D) !important;
}
.dz-counter-v3__card--green:hover {
  border-color: rgba(34, 197, 94, 0.25) !important;
  box-shadow: 0 22px 45px -15px rgba(34, 197, 94, 0.16), 0 0 0 1px rgba(34, 197, 94, 0.05) inset !important;
}
.dz-counter-v3__card--green .dz-counter-v3__icon {
  color: #22C55E !important;
}
.dz-counter-v3__card--green:hover .dz-counter-v3__icon {
  background: linear-gradient(135deg, #22C55E, #15803D) !important;
  color: #ffffff !important;
}
.dz-counter-v3__card--green .dz-counter-v3__num h3,
.dz-counter-v3__card--green .dz-counter-v3__num h3.odometer,
.dz-counter-v3__card--green .dz-counter-v3__num h3.odometer * {
  background: linear-gradient(135deg, #0B192C 40%, #22C55E 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.dz-counter-v3__card--green .dz-counter-v3__num span {
  color: #22C55E !important;
}


/* ============================================================
   ABOUT PAGE COUNTER (counter-one) REDESIGN
   ============================================================ */
.counter-one {
  background-color: var(--dz-bg-primary) !important;
  padding: 0 !important;
}

.counter-one__wrap {
  background-color: var(--dz-bg-alt) !important;
  border: 1px solid var(--dz-border) !important;
  border-radius: 28px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02) !important;
  padding: 100px 0 !important;
}

.counter-one__bg-shape,
.counter-one__shape-1,
.counter-one__shape-2 {
  opacity: 0.04 !important;
}

/* Horizontal card style for About stats */
.counter-one__single {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 32px 28px !important;
  background: #ffffff !important;
  border: 1px solid rgba(11, 25, 44, 0.06) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px -8px rgba(11, 25, 44, 0.04) !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.4s ease,
              border-color 0.4s ease !important;
  margin-bottom: 30px !important;
  height: calc(100% - 30px) !important;
  overflow: hidden !important;
}

/* Slide-in Top Accent Line */
.counter-one__single::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50px !important;
  height: 4px !important;
  border-radius: 0 0 4px 4px !important;
  transition: width 0.4s ease !important;
  z-index: 2 !important;
}

.counter-one__single:hover {
  transform: translateY(-8px) scale(1.02) !important;
}

.counter-one__single:hover::before {
  width: 100% !important;
}

/* About Icons */
.counter-one__icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  background: var(--dz-bg-alt) !important;
  border: 1px solid var(--dz-border) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  z-index: 1 !important;
}

.counter-one__icon::before,
.counter-one__icon::after {
  display: none !important;
}

.counter-one__icon span {
  font-size: 26px !important;
  background: none !important;
  -webkit-text-fill-color: var(--dz-text-heading) !important;
  color: var(--dz-text-heading) !important;
  transition: all 0.4s ease !important;
}

.counter-one__single:hover .counter-one__icon {
  transform: scale(1.1) rotate(8deg) !important;
  border-color: transparent !important;
}

.counter-one__single:hover .counter-one__icon span,
.counter-one .row > div .counter-one__single:hover .counter-one__icon span {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Typography styles (About) */
.counter-one__count-box {
  align-items: baseline !important;
  gap: 2px !important;
}

.counter-one__count-box h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
}

.counter-one__count-box span {
  font-family: 'Outfit', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.counter-one__text {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--dz-text-muted) !important;
  margin: 4px 0 0 0 !important;
  transition: color 0.3s ease !important;
}

.counter-one__single:hover .counter-one__text {
  color: var(--dz-text-heading) !important;
}

/* ============================================================
   ABOUT PAGE COLUMNS THEMES (USING :NTH-CHILD)
   ============================================================ */

/* Theme 1: Column 1 - Emerald */
.counter-one .row > div:nth-child(1) .counter-one__single::before {
  background: linear-gradient(90deg, #10B981, #059669) !important;
}
.counter-one .row > div:nth-child(1) .counter-one__single:hover {
  border-color: rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 22px 45px -15px rgba(16, 185, 129, 0.16), 0 0 0 1px rgba(16, 185, 129, 0.05) inset !important;
}
.counter-one .row > div:nth-child(1) .counter-one__icon span {
  -webkit-text-fill-color: #10B981 !important;
  color: #10B981 !important;
}
.counter-one .row > div:nth-child(1) .counter-one__single:hover .counter-one__icon {
  background: linear-gradient(135deg, #10B981, #059669) !important;
}
.counter-one .row > div:nth-child(1) .counter-one__count-box h3,
.counter-one .row > div:nth-child(1) .counter-one__count-box h3.odometer,
.counter-one .row > div:nth-child(1) .counter-one__count-box h3.odometer * {
  background: linear-gradient(135deg, #0B192C 40%, #10B981 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.counter-one .row > div:nth-child(1) .counter-one__count-box span {
  color: #10B981 !important;
}

/* Theme 2: Column 2 - Brand Green */
.counter-one .row > div:nth-child(2) .counter-one__single::before {
  background: linear-gradient(90deg, #38B249, #2E8B2E) !important;
}
.counter-one .row > div:nth-child(2) .counter-one__single:hover {
  border-color: rgba(56, 178, 73, 0.25) !important;
  box-shadow: 0 22px 45px -15px rgba(56, 178, 73, 0.16), 0 0 0 1px rgba(56, 178, 73, 0.05) inset !important;
}
.counter-one .row > div:nth-child(2) .counter-one__icon span {
  -webkit-text-fill-color: #38B249 !important;
  color: #38B249 !important;
}
.counter-one .row > div:nth-child(2) .counter-one__single:hover .counter-one__icon {
  background: linear-gradient(135deg, #38B249, #2E8B2E) !important;
}
.counter-one .row > div:nth-child(2) .counter-one__count-box h3,
.counter-one .row > div:nth-child(2) .counter-one__count-box h3.odometer,
.counter-one .row > div:nth-child(2) .counter-one__count-box h3.odometer * {
  background: linear-gradient(135deg, #0B192C 40%, #38B249 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.counter-one .row > div:nth-child(2) .counter-one__count-box span {
  color: #38B249 !important;
}

/* Theme 3: Column 3 - Teal */
.counter-one .row > div:nth-child(3) .counter-one__single::before {
  background: linear-gradient(90deg, #0D9488, #0F766E) !important;
}
.counter-one .row > div:nth-child(3) .counter-one__single:hover {
  border-color: rgba(13, 148, 136, 0.25) !important;
  box-shadow: 0 22px 45px -15px rgba(13, 148, 136, 0.16), 0 0 0 1px rgba(13, 148, 136, 0.05) inset !important;
}
.counter-one .row > div:nth-child(3) .counter-one__icon span {
  -webkit-text-fill-color: #0D9488 !important;
  color: #0D9488 !important;
}
.counter-one .row > div:nth-child(3) .counter-one__single:hover .counter-one__icon {
  background: linear-gradient(135deg, #0D9488, #0F766E) !important;
}
.counter-one .row > div:nth-child(3) .counter-one__count-box h3,
.counter-one .row > div:nth-child(3) .counter-one__count-box h3.odometer,
.counter-one .row > div:nth-child(3) .counter-one__count-box h3.odometer * {
  background: linear-gradient(135deg, #0B192C 40%, #0D9488 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.counter-one .row > div:nth-child(3) .counter-one__count-box span {
  color: #0D9488 !important;
}

/* Theme 4: Column 4 - Forest Green */
.counter-one .row > div:nth-child(4) .counter-one__single::before {
  background: linear-gradient(90deg, #22C55E, #15803D) !important;
}
.counter-one .row > div:nth-child(4) .counter-one__single:hover {
  border-color: rgba(34, 197, 94, 0.25) !important;
  box-shadow: 0 22px 45px -15px rgba(34, 197, 94, 0.16), 0 0 0 1px rgba(34, 197, 94, 0.05) inset !important;
}
.counter-one .row > div:nth-child(4) .counter-one__icon span {
  -webkit-text-fill-color: #22C55E !important;
  color: #22C55E !important;
}
.counter-one .row > div:nth-child(4) .counter-one__single:hover .counter-one__icon {
  background: linear-gradient(135deg, #22C55E, #15803D) !important;
}
.counter-one .row > div:nth-child(4) .counter-one__count-box h3,
.counter-one .row > div:nth-child(4) .counter-one__count-box h3.odometer,
.counter-one .row > div:nth-child(4) .counter-one__count-box h3.odometer * {
  background: linear-gradient(135deg, #0B192C 40%, #22C55E 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.counter-one .row > div:nth-child(4) .counter-one__count-box span {
  color: #22C55E !important;
}


/* ============================================================
   RESPONSIVE OVERRIDES (STATS/COUNTER)
   ============================================================ */
@media (max-width: 991px) {
  .dz-counter-v3 {
    padding: 80px 0 60px !important;
  }
  .dz-counter-v3__num h3 {
    font-size: 56px !important;
  }
  .dz-counter-v3__card {
    padding: 36px 20px 30px !important;
  }
}

@media (max-width: 575px) {
  .dz-counter-v3__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .dz-counter-v3__card {
    padding: 24px 12px 20px !important;
    border-radius: 16px !important;
  }
  .dz-counter-v3__icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }
  .dz-counter-v3__icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  .dz-counter-v3__num h3 {
    font-size: 32px !important;
    letter-spacing: -0.5px !important;
  }
  .dz-counter-v3__num span {
    font-size: 18px !important;
  }
  .dz-counter-v3__label {
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
  }
}

@media (max-width: 480px) {
  .dz-counter-v3__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .dz-counter-v3__card {
    padding: 16px 12px 14px !important;
    border-radius: 14px !important;
  }
  .dz-counter-v3__icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
  }
  .dz-counter-v3__icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .counter-one__single {
    gap: 14px !important;
    padding: 16px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    height: calc(100% - 16px) !important;
  }
  .counter-one__icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
  }
  .counter-one__icon span {
    font-size: 20px !important;
  }
  .counter-one__count-box h3 {
    font-size: 30px !important;
  }
  .counter-one__count-box span {
    font-size: 20px !important;
  }
  .counter-one__text {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }
}

/* ============================================================
   12. PROCESS SECTION — LIGHT
   ============================================================ */
.process-one {
  background-color: var(--dz-bg-alt) !important;
  padding: 120px 0 100px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Tagline badge styles */
.process-one .section-title__tagline-shape-1,
.process-one .section-title__tagline-shape-2 {
  display: none !important;
}

.process-one .section-title__tagline {
  background: var(--dz-bg-soft) !important;
  color: var(--techguru-base) !important;
  -webkit-text-fill-color: var(--techguru-base) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  padding: 8px 20px !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  border: 1px solid rgba(56, 178, 73, 0.15) !important;
  margin-bottom: 20px !important;
}

/* Text and headings */
.process-one__text {
  color: var(--dz-text-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin-bottom: 30px !important;
}

/* Timeline center line styling (centered) */
.process-one__process-list::before {
  content: "" !important;
  position: absolute !important;
  width: 3px !important;
  height: 300px !important;
  background: linear-gradient(180deg, rgba(56, 178, 73, 0.05) 0%, var(--techguru-base) 50%, rgba(56, 178, 73, 0.05) 100%) !important;
  left: 50% !important;
  top: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

/* Timeline step list item settings (centered with tight gap) */
.process-one__process-list li {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 55px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.process-one__process-list li:nth-child(1),
.process-one__process-list li:nth-child(2),
.process-one__process-list li:nth-child(3) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.process-one__process-list li+li {
  margin-top: 24px !important;
}

/* Timeline step cards styling (tighter layout) */
.process-one__process-content {
  position: relative !important;
  display: block !important;
  background: #ffffff !important;
  border: 1px solid rgba(11, 25, 44, 0.05) !important;
  border-radius: 18px !important;
  padding: 20px 24px !important;
  box-shadow: 0 8px 24px -10px rgba(11, 25, 44, 0.05), 0 2px 6px -4px rgba(11, 25, 44, 0.02) !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.4s ease,
              border-color 0.4s ease !important;
  max-width: 360px !important;
  width: 100% !important;
  z-index: 2 !important;
}

.process-one__process-list li:hover .process-one__process-content {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: rgba(56, 178, 73, 0.25) !important;
  box-shadow: 0 16px 32px -12px rgba(56, 178, 73, 0.14), 0 0 0 1px rgba(56, 178, 73, 0.04) inset !important;
}

/* Timeline node rings styling (tighter centering) */
.process-one__process-content::before {
  content: "" !important;
  position: absolute !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 4px solid var(--techguru-base) !important;
  box-shadow: 0 0 8px rgba(56, 178, 73, 0.3) !important;
  top: 50% !important;
  left: -38.5px !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Right side dot alignment for step 2 */
.process-one__process-list li:nth-child(2) .process-one__process-content::before {
  left: auto !important;
  right: -38.5px !important;
}

/* Pulse ring glow on hover */
.process-one__process-list li:hover .process-one__process-content::before {
  background: var(--techguru-base) !important;
  transform: translateY(-50%) scale(1.3) !important;
  box-shadow: 0 0 12px var(--techguru-base) !important;
}

/* Outline numbers styling (smaller size) */
.process-one__process-count::before {
  font-size: 80px !important;
  line-height: 80px !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
  background: linear-gradient(180deg, rgba(11, 25, 44, 0.15) 0%, rgba(11, 25, 44, 0) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  display: inline-block !important;
}

.process-one__process-list li:hover .process-one__process-count::before {
  background: linear-gradient(180deg, var(--techguru-base) 0%, rgba(56, 178, 73, 0.05) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  transform: scale(1.08) rotate(-3deg) !important;
}

/* Card inside typography (tighter size) */
.process-one__process-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 19px !important;
  line-height: 26px !important;
  font-weight: 800 !important;
  color: var(--dz-text-heading) !important;
  margin-bottom: 8px !important;
  transition: color 0.3s ease !important;
}

.process-one__process-list li:hover .process-one__process-title {
  color: var(--techguru-base) !important;
}

.process-one__process-text {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--dz-text-body) !important;
  margin: 0 !important;
}

/* Button interactive overrides */
.process-one__btn-box .thm-btn {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 100px !important;
  padding: 15px 35px !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 10px 25px -5px rgba(56, 178, 73, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.process-one__btn-box .thm-btn:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 15px 30px -5px rgba(56, 178, 73, 0.45) !important;
}

.process-one__shape-1 {
  opacity: 0.05 !important;
}

.process-one__shape-2,
.process-one__shape-3 {
  opacity: 0.03 !important;
}

.process-one__bg-shape {
  opacity: 0.02 !important;
}

/* Responsive adjustments for process section */
@media (max-width: 767px) {
  .process-one {
    padding: 60px 0 50px !important;
  }
  .process-one__process-list li {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .process-one__process-list li:nth-child(1),
  .process-one__process-list li:nth-child(2),
  .process-one__process-list li:nth-child(3) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .process-one__process-list li:nth-child(2) .process-one__process-content {
    text-align: left !important;
  }
  .process-one__process-content {
    max-width: 100% !important;
    padding: 20px 24px !important;
    border-radius: 16px !important;
  }
  .process-one__process-list li+li {
    margin-top: 16px !important;
  }
  
  /* Absolute watermark step numbers on mobile (occupies 0px vertical height) */
  .process-one__process-count {
    position: absolute !important;
    right: 20px !important;
    top: 15px !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }
  .process-one__process-count::before {
    font-size: 48px !important;
    line-height: 48px !important;
    font-weight: 900 !important;
    background: linear-gradient(180deg, var(--techguru-base) 0%, rgba(56, 178, 73, 0.1) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    opacity: 0.18 !important;
    transform: none !important;
  }
  .process-one__process-list li:hover .process-one__process-count::before {
    transform: none !important;
  }
}

/* ============================================================
   13. PORTFOLIO SECTION — LIGHT
   ============================================================ */
.portfolio-showcase {
  background: var(--dz-bg-primary) !important;
}

/* Portfolio project cards */
.dz-port-card {
  background: #fff !important;
  border: 1px solid var(--dz-border) !important;
  box-shadow: var(--dz-card-shadow) !important;
}

.dz-port-card:hover {
  box-shadow: var(--dz-card-shadow-hover) !important;
  border-color: rgba(56, 178, 73, 0.2) !important;
}

.dz-port-card__title {
  color: var(--dz-text-heading) !important;
}

.dz-port-card__desc {
  color: var(--dz-text-body) !important;
}

.dz-port-card__industry {
  color: var(--techguru-base) !important;
}

.dz-port-card__tags span {
  background: var(--dz-bg-alt) !important;
  color: var(--dz-text-body) !important;
  border-color: var(--dz-border) !important;
}

/* ============================================================
   14. TESTIMONIAL SECTION — LIGHT
   ============================================================ */
.testimonial-one {
  background-color: var(--dz-bg-alt);
}

.testimonial-one__content-box {
  background: #fff;
  border: 1px solid var(--dz-border);
  box-shadow: var(--dz-card-shadow);
}

.testimonial-one__text {
  color: var(--dz-text-body);
}

.testimonial-one__client-info h3 {
  color: var(--dz-text-heading);
}

.testimonial-one__client-info p {
  color: var(--dz-text-muted);
}

/* ============================================================
   15. FAQ SECTION — LIGHT
   ============================================================ */
.faq-one {
  background-color: var(--dz-bg-primary) !important;
}

.faq-one::before {
  background-color: transparent !important;
}

.faq-one__shape-1,
.faq-one__shape-2 {
  opacity: 0.06 !important;
}

/* Accordion — faq-one variant */
.faq-one .faq-one-accrodion .accrodion {
  background: #fff !important;
  border: 1px solid var(--dz-border) !important;
  box-shadow: var(--dz-card-shadow) !important;
}

.faq-one .faq-one-accrodion .accrodion.active {
  background: var(--dz-bg-soft) !important;
  border-color: rgba(56, 178, 73, 0.25) !important;
}

.faq-one .faq-one-accrodion .accrodion-title h4 {
  color: var(--dz-text-heading) !important;
}

.faq-one .faq-one-accrodion .accrodion-title h4::before {
  color: var(--dz-text-heading) !important;
  background-color: var(--dz-bg-alt) !important;
}

.faq-one .faq-one-accrodion .accrodion.active .accrodion-title h4::before {
  color: #fff !important;
  background-color: var(--techguru-base) !important;
}

.faq-one .faq-one-accrodion .accrodion-content p {
  color: var(--dz-text-body) !important;
}

/* Accordion — faq-two variant (used in home FAQ) */
.faq-two {
  background: transparent !important;
}

.faq-two__bdr {
  background-color: var(--dz-border) !important;
}

.faq-two__contact .content p a {
  color: var(--dz-text-heading) !important;
}

/* faq-two__right accordion (service detail + home) */
.faq-two__right .faq-one-accrodion .accrodion {
  background: #fff !important;
  backdrop-filter: none !important;
  border: 1px solid var(--dz-border) !important;
  box-shadow: var(--dz-card-shadow) !important;
}

.faq-two__right .faq-one-accrodion .accrodion:hover {
  border-color: rgba(56, 178, 73, 0.2) !important;
  background: #fff !important;
}

.faq-two__right .faq-one-accrodion .accrodion.active {
  background: var(--dz-bg-soft) !important;
  border-color: rgba(56, 178, 73, 0.3) !important;
  box-shadow: 0 4px 20px rgba(56, 178, 73, 0.08) !important;
}

.faq-two__right .faq-one-accrodion .accrodion-title h4 {
  color: var(--dz-text-heading) !important;
}

.faq-two__right .faq-one-accrodion .accrodion.active .accrodion-title h4 {
  color: var(--dz-text-heading) !important;
}

.faq-two__right .faq-one-accrodion .accrodion-title h4::before {
  color: var(--dz-text-body) !important;
  background: var(--dz-bg-alt) !important;
  border-color: var(--dz-border) !important;
}

.faq-two__right .faq-one-accrodion .accrodion:hover .accrodion-title h4::before {
  border-color: rgba(56, 178, 73, 0.3) !important;
  color: var(--dz-text-heading) !important;
}

.faq-two__right .faq-one-accrodion .accrodion-content .inner {
  border-top-color: var(--dz-border) !important;
}

.faq-two__right .faq-one-accrodion .accrodion-content p {
  color: var(--dz-text-body) !important;
}

/* FAQ page background */
.faq-page {
  background: var(--dz-bg-primary) !important;
}

/* Generic accrodion fallback */
.accrodion {
  background: #fff !important;
  border: 1px solid var(--dz-border) !important;
}

.accrodion.active {
  border-color: rgba(56, 178, 73, 0.3) !important;
}

.accrodion-title h4 {
  color: var(--dz-text-heading) !important;
}

.accrodion-content .inner p {
  color: var(--dz-text-body) !important;
}

.accrodion-title h4 {
  color: var(--dz-text-heading) !important;
}

.accrodion-content .inner p {
  color: var(--dz-text-body) !important;
}

/* ============================================================
   16. NEWSLETTER / CTA SECTION
   ============================================================ */
.newsletter-one__title {
  color: #fff;
}

.newsletter-one__text {
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   17. PAGE HEADER — LIGHT
   ============================================================ */
.page-header {
  position: relative;
  background-color: #F7F8FC;
  padding-top: 150px !important;
  padding-bottom: 0 !important;
  min-height: 380px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden;
  border-bottom: 1px solid var(--dz-border);
  z-index: 1;
}

@media only screen and (max-width: 767px) {
  .page-header {
    padding-top: 110px !important;
    min-height: 280px !important;
  }
}

.page-header__bg {
  display: block !important;
  opacity: 0.9 !important;
}

.page-header__bg::before {
  background: linear-gradient(90deg, rgba(247, 248, 252, 0.96) 0%, rgba(247, 248, 252, 0.6) 100%) !important;
  transform: none !important;
}

.page-header__bg::after {
  background: none !important;
}

.page-header__inner {
  position: relative;
  z-index: 2;
}

.page-header__inner h2 {
  font-size: 48px !important;
  font-weight: 700 !important;
  letter-spacing: -1.5px !important;
  color: var(--dz-text-heading) !important;
  margin-bottom: 16px !important;
  line-height: 1.2 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.thm-breadcrumb__box {
  background-color: rgba(56, 178, 73, 0.06) !important;
  border: 1px solid rgba(56, 178, 73, 0.15) !important;
  border-radius: 30px !important;
  padding: 6px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.thm-breadcrumb {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.thm-breadcrumb li {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--dz-text-body) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.thm-breadcrumb li a {
  color: var(--dz-text-body) !important;
  transition: color 0.3s !important;
}

.thm-breadcrumb li a:hover {
  color: var(--techguru-base) !important;
}

.thm-breadcrumb li .icon-right-arrow-1 {
  font-size: 10px !important;
  color: var(--dz-text-muted) !important;
}

/* ============================================================
   18. CONTACT SECTION — LIGHT
   ============================================================ */
.contact-one {
  background-color: var(--dz-bg-primary);
}

.contact-one__bg-shape {
  opacity: 0.03;
}

.contact-one__left {
  background: #fff;
  border: 1px solid var(--dz-border);
  box-shadow: var(--dz-card-shadow);
}

.contact-one__left-shape-1,
.contact-one__left-shape-2 {
  opacity: 0.05;
}

.contact-one__from-title {
  color: var(--dz-text-heading);
}

.contact-one__input-title {
  color: var(--dz-text-heading);
}

.contact-one__input-box input,
.contact-one__input-box textarea {
  background-color: var(--dz-bg-alt) !important;
  border: 1px solid var(--dz-border) !important;
  color: var(--dz-text-heading) !important;
}

.contact-one__input-box input:focus,
.contact-one__input-box textarea:focus {
  border-color: var(--techguru-base) !important;
}

.contact-one__input-icon span {
  color: var(--techguru-base);
}

.contact-one__text {
  color: var(--dz-text-body);
}

.contact-one__list li .content h4 {
  color: var(--dz-text-heading);
}

.contact-one__list li .content p,
.contact-one__list li .content p a {
  color: var(--dz-text-body);
}

.contact-one__list li .content p a:hover {
  color: var(--techguru-base);
}

.contact-one__list li .icon span {
  color: #fff !important;
}

/* Nice select override */
.nice-select {
  background-color: var(--dz-bg-alt) !important;
  border: 1px solid var(--dz-border) !important;
  color: var(--dz-text-body) !important;
}

.nice-select .list {
  background-color: #fff !important;
  border: 1px solid var(--dz-border) !important;
  box-shadow: var(--dz-card-shadow) !important;
}

.nice-select .list .option {
  color: var(--dz-text-body) !important;
}

.nice-select .list .option:hover,
.nice-select .list .option.selected {
  background-color: var(--dz-bg-alt) !important;
  color: var(--techguru-base) !important;
}

/* ============================================================
   19. TEAM SECTION — LIGHT
   ============================================================ */
.team-page {
  background-color: var(--dz-bg-primary);
}

.team-page__shape-1 {
  opacity: 0.05;
}

.team-one__single {
  background: var(--dz-bg-primary);
  border: 1px solid var(--dz-border);
  box-shadow: var(--dz-card-shadow);
  border-radius: 20px !important;
  padding: 16px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.team-one__single:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(56, 178, 73, 0.35) !important;
  box-shadow: 0 12px 30px rgba(56, 178, 73, 0.12) !important;
}

.team-one__img-box {
  position: relative;
  border-radius: 16px !important;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
}

.team-one__img {
  border-radius: 16px !important;
  width: 100%;
  height: 100%;
}

.team-one__img img {
  border-radius: 16px !important;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-one__single:hover .team-one__img img {
  transform: scale(1.06) !important;
}

/* Glassmorphic floating social bar */
.team-one__social-box-inner {
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;
  padding: 12px !important;
  display: flex !important;
  justify-content: center !important;
  background: linear-gradient(to top, rgba(11, 25, 44, 0.6) 0%, rgba(11, 25, 44, 0) 100%) !important;
  opacity: 0 !important;
  transition: all 0.4s ease-in-out !important;
  pointer-events: none;
}

.team-one__single:hover .team-one__social-box-inner {
  opacity: 1 !important;
  pointer-events: auto;
}

.team-one__social-box {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(56, 178, 73, 0.2) !important;
  border-radius: 30px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
  padding: 8px 18px !important;
  width: auto !important;
  height: auto !important;
  transform: translateY(15px) !important;
  opacity: 1 !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.team-one__single:hover .team-one__social-box {
  transform: translateY(0) !important;
}

.team-one__social {
  display: flex !important;
  align-items: center !important;
}

.team-one__social a {
  font-size: 20px !important;
  color: var(--dz-text-heading) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.team-one__social a:hover {
  color: var(--techguru-base) !important;
  transform: scale(1.15) !important;
}

/* Content block styling */
.team-one__content {
  padding: 16px 8px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 0 !important;
  background: transparent !important;
}

.team-one__title-box {
  width: 100% !important;
  background: transparent !important;
}

.team-one__sub-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--techguru-base) !important;
  margin-bottom: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.team-one__sub-title span {
  width: 5px !important;
  height: 5px !important;
  background-color: var(--techguru-base) !important;
  border-radius: 50% !important;
}

.team-one__title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--dz-text-heading) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.team-member-bio {
  font-size: 13px !important;
  color: var(--dz-text-body) !important;
  line-height: 1.5 !important;
  margin-top: 10px !important;
  opacity: 0.8 !important;
}

/* ============================================================
   20. FOOTER — KEEP DARK (Contrast Anchor)
   ============================================================ */
/* The footer stays dark — no overrides needed.
   Just ensure proper isolation. */
.site-footer {
  --techguru-gray: #CBD5E0;
  --techguru-gray-rgb: 203, 213, 224;
  background-color: var(--techguru-black);
  color: var(--techguru-gray);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  color: #fff;
}

.site-footer p,
.site-footer a:not(.thm-btn):not(.site-footer__btn) {
  color: var(--techguru-gray);
}

.site-footer a:not(.thm-btn):not(.site-footer__btn):hover {
  color: var(--techguru-base);
}

.footer-widget__title {
  color: #fff !important;
}

.footer-widget__quick-links-list li a {
  color: var(--techguru-gray) !important;
}

.footer-widget__quick-links-list li a:hover {
  color: var(--techguru-base) !important;
}

.footer-widget__contact-list li .text p,
.footer-widget__contact-list li .text p a {
  color: var(--techguru-gray) !important;
}

.footer-widget__contact-list li .icon-box p {
  color: #fff !important;
}

.site-footer__copyright-text {
  color: var(--techguru-gray) !important;
}

.site-footer__copyright-text a {
  color: var(--techguru-base) !important;
}

/* Footer tech items */
.footer-tech-item span {
  color: var(--techguru-gray) !important;
}

.site-footer__social-title {
  color: #fff !important;
}

/* ============================================================
   21. MOBILE NAV — KEEP DARK (overlay)
   ============================================================ */
/* Mobile nav stays dark for contrast/focus */

/* ============================================================
   22. SCROLL TO TOP
   ============================================================ */
.scroll-to-top {
  background: linear-gradient(135deg, #38B249, #2E8B2E);
  box-shadow: 0 4px 20px rgba(56, 178, 73, 0.3);
}

.scroll-to-top:hover {
  box-shadow: 0 8px 30px rgba(56, 178, 73, 0.5);
}

/* ============================================================
   23. WHATSAPP BUTTON — SLIGHT REFINEMENT
   ============================================================ */
.whatsapp-float {
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35);
}

.whatsapp-float__tooltip {
  background: var(--dz-text-heading);
}

.whatsapp-float__tooltip::after {
  border-right-color: var(--dz-text-heading);
}

/* ============================================================
   24. CAROUSEL DOT STYLES
   ============================================================ */
.carousel-dot-style.owl-carousel .owl-dot.active {
  background-color: var(--techguru-base);
}

/* ============================================================
   25. SEARCH POPUP
   ============================================================ */
.search-popup .color-layer {
  background-color: var(--techguru-base);
}

/* ============================================================
   26. GOOGLE MAP SECTION
   ============================================================ */
.contact-page-google-map {
  background-color: var(--dz-bg-alt);
}

/* ============================================================
   27. CUSTOM CURSOR
   ============================================================ */
.custom-cursor__cursor {
  border-color: var(--techguru-base);
}

.custom-cursor__cursor-two {
  background-color: var(--techguru-base);
}

/* ============================================================
   28. OWL NAV & CAROUSEL ARROWS
   ============================================================ */
.owl-nav button {
  background: #fff !important;
  border: 1px solid var(--dz-border) !important;
  color: var(--dz-text-heading) !important;
}

.owl-nav button:hover {
  background: var(--techguru-base) !important;
  border-color: var(--techguru-base) !important;
  color: #fff !important;
}

/* ============================================================
   29. ABOUT PAGE — LIGHT
   ============================================================ */
.about-two,
.about-three {
  background-color: var(--dz-bg-primary);
}

/* ============================================================
   30. BRAND / CLIENT LOGOS
   ============================================================ */
.brand-one {
  background-color: var(--dz-bg-alt);
}

/* ============================================================
   31. SIDEBAR WIDGET (Kept dark)
   ============================================================ */
.xs-sidebar-group.isActive .xs-sidebar-widget {
  background-color: var(--techguru-black);
}

/* ============================================================
   32. SERVICE DETAIL PAGES — LIGHT
   ============================================================ */
.services-details {
  background-color: var(--dz-bg-primary);
}

.services-details__content h3 {
  color: var(--dz-text-heading);
}

.services-details__content p {
  color: var(--dz-text-body);
}

/* ============================================================
   33. PRIVACY / TERMS PAGES — LIGHT
   ============================================================ */
.privacy-content,
.terms-content {
  color: var(--dz-text-body);
}

.privacy-content h2,
.privacy-content h3,
.terms-content h2,
.terms-content h3 {
  color: var(--dz-text-heading);
}

/* ============================================================
   34. MISC OVERRIDES
   ============================================================ */
/* Shadow box (used on dropdowns) */
.shadow-box {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* Template shape overlays — soften for light bg */
.servces-one__shape-3 {
  mix-blend-mode: multiply !important;
  filter: invert(1) hue-rotate(180deg) !important;
  opacity: 0.35 !important;
}

/* Fix marquee text icons in light mode */
.sliding-text__list li h2 {
  color: var(--dz-text-heading);
}

.about-one__left-img-box {
  border-radius: 24px !important;
  overflow: visible !important;
  background: linear-gradient(145deg, #090e1a 0%, #050810 100%) !important;
  padding: 24px !important;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.25), 0 0 50px rgba(56, 178, 73, 0.08) !important;
  border: 1px solid rgba(56, 178, 73, 0.15) !important;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  position: relative !important;
}

.about-one__left-img-box:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: rgba(56, 178, 73, 0.3) !important;
  box-shadow: 0 40px 80px -20px rgba(56, 178, 73, 0.18), 0 0 60px rgba(56, 178, 73, 0.12) !important;
}

.about-one__left-img img {
  border-radius: 14px !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.about-one__right {
  position: relative !important;
  z-index: 1 !important;
}

.about-one__right::before {
  content: '' !important;
  position: absolute !important;
  top: -40px !important;
  right: -40px !important;
  width: 300px !important;
  height: 300px !important;
  background: radial-gradient(circle, rgba(56, 178, 73, 0.06) 0%, transparent 70%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Floating Badges */
.dz-floating-badge {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
  box-shadow: 0 15px 30px rgba(11, 25, 44, 0.1) !important;
  z-index: 10 !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.dz-floating-badge--top-left {
  top: 30px !important;
  left: -20px !important;
}

.dz-floating-badge--bottom-right {
  bottom: 30px !important;
  right: -20px !important;
  background: rgba(9, 14, 26, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.dz-floating-badge:hover {
  transform: translateY(-6px) scale(1.05) !important;
  box-shadow: 0 20px 40px rgba(11, 25, 44, 0.15) !important;
}

.dz-floating-badge__icon {
  color: var(--techguru-base) !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
}

.dz-floating-badge__content {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.dz-floating-badge__title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--dz-text-heading) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.dz-floating-badge--bottom-right .dz-floating-badge__title {
  color: #fff !important;
}

.dz-floating-badge__desc {
  font-size: 10px !important;
  color: var(--dz-text-muted) !important;
  white-space: nowrap !important;
  margin-top: 2px !important;
}

.dz-floating-badge--bottom-right .dz-floating-badge__desc {
  color: rgba(255, 255, 255, 0.6) !important;
}

.dz-floating-badge__pulse {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: var(--techguru-base) !important;
  position: relative !important;
  box-shadow: 0 0 0 0 rgba(56, 178, 73, 0.7) !important;
  animation: dzPulse 1.8s infinite !important;
}

@keyframes dzPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(56, 178, 73, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(56, 178, 73, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(56, 178, 73, 0);
  }
}

/* Service detail hover image fix */
.services-one__hover-img {
  display: none;
}

/* Odometer in light mode */
.odometer {
  color: var(--dz-text-heading);
}

/* ============================================================
   35. INTER FONT INTEGRATION
   ============================================================ */
/* Applied via master.blade.php — Inter for body, Space Grotesk for headings */
body {
  font-family: 'Inter', 'Space Grotesk', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.section-title__title,
.main-slider__title,
.page-header__inner h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* ============================================================
   36. RESPONSIVE — HERO & HEADER MOBILE OVERRIDES
   ============================================================ */

/* ---------- Tablet (768px – 991px) ---------- */
@media only screen and (max-width: 991px) {
  /* Hide floating tech icons on tablet and below */
  .dz-floating-icons {
    display: none !important;
  }

  /* Reduce hero title size */
  .main-slider__title {
    font-size: 40px !important;
    letter-spacing: -0.8px;
  }

  /* Reduce particles canvas density handled via JS, but also reduce opacity */
  #particles-js {
    opacity: 0.5;
  }

  /* Subtitle badge — tighter on tablet */
  .main-slider__sub-title-box {
    padding: 4px 14px 4px 8px !important;
    gap: 6px !important;
  }

  .main-slider__sub-title {
    font-size: 12px !important;
  }

  .main-slider__sub-title-icon svg {
    width: 12px;
    height: 12px;
  }
}

/* ---------- Mobile (max 767px) ---------- */
@media only screen and (max-width: 767px) {
  /* Hero title — much smaller, tighter */
  .main-slider__title {
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
    line-height: 1.22;
  }

  /* Remove <br> tags in title for natural flow */
  .main-slider__title br {
    display: none;
  }

  /* Subtitle badge — compact mobile */
  .main-slider__sub-title-box {
    padding: 3px 12px 3px 7px !important;
    gap: 5px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  .main-slider__sub-title {
    font-size: 11px !important;
    letter-spacing: 0.3px;
  }

  .main-slider__sub-title-icon svg {
    width: 11px;
    height: 11px;
  }

  /* Body text — tighter */
  .main-slider__text {
    font-size: 14px !important;
    line-height: 1.6;
  }

  .main-slider__text br {
    display: none;
  }

  /* Trust badges — scale down */
  .main-slider__trust-badges {
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  .main-slider__trust-number {
    font-size: 20px !important;
  }

  .main-slider__trust-label {
    font-size: 10px !important;
  }

  /* Hero divider — shorter on mobile */
  .dz-hero-divider {
    margin-top: -40px;
  }

  .dz-hero-divider svg {
    height: 40px;
  }

  /* Particles — lighter on mobile for performance */
  #particles-js {
    opacity: 0.35;
  }

  /* Homepage header — simpler on mobile */
  .page-home .main-header .main-menu__wrapper {
    background-color: rgba(11, 25, 44, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ---------- Small Mobile (max 480px) ---------- */
@media only screen and (max-width: 480px) {
  .main-slider__title {
    font-size: 26px !important;
  }

  .main-slider__text {
    font-size: 13px !important;
  }

  /* Buttons — stack and full width */
  .main-slider__btn-and-trustpilot-box {
    gap: 12px !important;
  }

  .main-slider__btn-box .thm-btn,
  .main-slider__btn-box .dz-btn-outline {
    font-size: 14px !important;
    padding: 12px 24px !important;
  }

  .main-slider__trust-number {
    font-size: 18px !important;
  }

  .main-slider__trust-label {
    font-size: 9px !important;
  }

  .main-slider__trust-divider {
    height: 28px !important;
  }
}

/* ============================================================
   37. HTML DASHBOARD & WORKFLOW MOCKUPS (HERO SECTION)
   ============================================================ */
.dz-dash-mockup {
  position: absolute !important;
  right: 0 !important;
  bottom: 30px !important;
  width: 100% !important;
  max-width: 610px !important;
  z-index: 10 !important;
  display: block !important;
  font-family: 'Inter', sans-serif !important;
}

@media (max-width: 991px) {
  .dz-dash-mockup {
    display: none !important;
  }
}

/* Kill the gradient fade overlay inherited from .main-slider__img — it clips the floating cards */
.dz-dash-mockup::before {
  display: none !important;
  content: none !important;
}

@media (min-width: 1400px) {
  .dz-dash-mockup {
    max-width: 650px !important;
    bottom: 20px !important;
  }
}

/* Subtle breathing glow on the browser frame */
@keyframes dzBrowserGlow {
  0%, 100% { box-shadow: 0 40px 80px rgba(0, 0, 0, 0.65), 0 0 40px rgba(56, 178, 73, 0.06); }
  50% { box-shadow: 0 40px 80px rgba(0, 0, 0, 0.65), 0 0 55px rgba(56, 178, 73, 0.14), 0 0 100px rgba(56, 178, 73, 0.04); }
}

.dz-dash-mockup__browser {
  background: #090e17 !important; /* Deep black-navy window backdrop */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.65), 0 0 40px rgba(56, 178, 73, 0.08) !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transform: none !important;
  transform-style: flat !important;
  animation: dzBrowserGlow 5s ease-in-out infinite !important;

  transition: box-shadow 0.6s ease !important;
}

.dz-dash-mockup:hover .dz-dash-mockup__browser {
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.65), 0 0 60px rgba(56, 178, 73, 0.18) !important;
}

.dz-dash-mockup__header {
  display: flex !important;
  align-items: center !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: 16px !important;
}

.dz-dash-mockup__dots {
  display: flex !important;
  gap: 6px !important;
}

.dz-dash-mockup__dots span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.dot-red { background-color: #ff5f56 !important; }
.dot-yellow { background-color: #ffbd2e !important; }
.dot-green { background-color: #27c93f !important; }

.dz-dash-mockup__address-bar {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.02) !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.2) !important;
  flex: 1 !important;
  text-align: center !important;
  font-family: monospace !important;
  letter-spacing: 0.5px !important;
  min-height: 22px !important;
}

.dz-dash-mockup__body {
  padding: 16px 20px 18px !important;
}

.dz-dash-mockup__title-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}

.dz-dash-mockup__title-bar h3 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: -0.3px !important;
}

.status-badge {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.status-badge::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}

/* Pulsing Sonar Badge Bullets */
@keyframes dzPulseLive {
  0% { box-shadow: 0 0 0 0 rgba(56, 178, 73, 0.75); }
  70% { box-shadow: 0 0 0 6px rgba(56, 178, 73, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 178, 73, 0); }
}

@keyframes dzPulseActive {
  0% { box-shadow: 0 0 0 0 rgba(0, 198, 255, 0.75); }
  70% { box-shadow: 0 0 0 6px rgba(0, 198, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 198, 255, 0); }
}

.status-badge--live {
  background-color: rgba(56, 178, 73, 0.12) !important;
  color: #38B249 !important;
  border: 1px solid rgba(56, 178, 73, 0.2) !important;
}
.status-badge--live::before {
  background-color: #38B249 !important;
  animation: dzPulseLive 2s infinite !important;
}

.status-badge--active {
  background-color: rgba(0, 198, 255, 0.12) !important;
  color: #00C6FF !important;
  border: 1px solid rgba(0, 198, 255, 0.2) !important;
}
.status-badge--active::before {
  background-color: #00C6FF !important;
  animation: dzPulseActive 2s infinite !important;
}

/* Stats Row */
.dz-dash-mockup__stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.stat-card {
  background: #111723 !important; /* Premium dark background for cards */
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 14px 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.stat-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(56, 178, 73, 0.25) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(56, 178, 73, 0.1) !important;
}

.stat-card__num {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.stat-card__label {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.2px !important;
}

/* Utility Text Colors for Mockup */
.dz-dash-mockup .text-green {
  color: #38B249 !important;
}
.dz-dash-mockup .text-blue {
  color: #00C6FF !important;
}

/* Chart Box */
.dz-dash-mockup__chart-box {
  background: #111723 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  padding: 18px 20px !important;
}

.chart-header {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
}

.chart-bars {
  display: flex !important;
  justify-content: space-between !important;
  align-items: stretch !important;  /* STRETCH so children get explicit height for percentage to resolve */
  height: 90px !important;
  padding-bottom: 4px !important;
  /* Grid lines background for high-fidelity tool look */
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 100% 22px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.chart-bar-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;  /* Bars grow upward from bottom */
  gap: 4px !important;
  flex: 1 !important;
}

/* Subtle shimmer animation for bars */
@keyframes dzBarShimmer {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.chart-bar {
  background: linear-gradient(180deg, #38B249 0%, rgba(56, 178, 73, 0.35) 100%) !important;
  width: 22px !important;
  min-height: 6px !important;
  border-radius: 4px 4px 0 0 !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-origin: bottom !important;
  /* No scaleY animation — Swiper fade breaks it. Bars are visible immediately. */
}

.chart-bar:hover {
  background: linear-gradient(180deg, #4ade80 0%, #38B249 100%) !important;
  filter: drop-shadow(0 0 12px rgba(74, 222, 128, 0.7)) !important;
  transform: scaleY(1.08) !important;
  cursor: pointer !important;
}

/* Staggered shimmer on bar groups */
.chart-bar-wrap:nth-child(odd) .chart-bar {
  animation: dzBarShimmer 3s ease-in-out 0.2s infinite !important;
}
.chart-bar-wrap:nth-child(even) .chart-bar {
  animation: dzBarShimmer 3s ease-in-out 1.5s infinite !important;
}

.chart-month {
  font-size: 9px !important;
  color: rgba(255, 255, 255, 0.3) !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}

/* Asynchronous Floating Animations for Cards */
@keyframes dzFloatCardY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes dzFloatCardX {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-6px) translateX(6px); }
}

/* Floating Cards with Glassmorphism & Green Border */
.dz-dash-mockup__floating-card {
  position: absolute !important;
  background: rgba(9, 14, 23, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(56, 178, 73, 0.35) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  z-index: 20 !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 15px rgba(56, 178, 73, 0.05) !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.card-top-right .dz-dash-mockup__floating-card-inner {
  animation: dzFloatCardY 4.5s ease-in-out infinite !important;
}

.card-bottom-left .dz-dash-mockup__floating-card-inner {
  animation: dzFloatCardX 5.5s ease-in-out infinite !important;
}

.dz-dash-mockup:hover .dz-dash-mockup__floating-card {
  border-color: rgba(56, 178, 73, 0.6) !important;
}

.dz-dash-mockup:hover .card-top-right {
  transform: translate(8px, -8px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 178, 73, 0.2) !important;
}

.dz-dash-mockup:hover .card-bottom-left {
  transform: translate(-8px, 8px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 178, 73, 0.2) !important;
}

.card-top-right {
  top: -20px !important;
  right: -20px !important;
  min-width: 160px !important;
}

.card-bottom-left {
  bottom: -18px !important;
  left: -20px !important;
  min-width: 180px !important;
}

.card-title {
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-weight: 700 !important;
}

.card-value {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.card-bold {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

.card-desc {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-weight: 500 !important;
}

/* AI Workflow Canvas (Slide 2) */
.dz-dash-mockup__flow-editor {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  background: #111723 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  padding: 24px 14px !important;
  gap: 6px !important;
}

.flow-node {
  background: #161f30 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  flex: 1 1 0 !important;  /* Equal width for all cards */
  min-width: 0 !important;
  min-height: 60px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.flow-node:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45) !important;
}

.flow-node__header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

.flow-node__header svg {
  color: var(--techguru-base) !important;
  flex-shrink: 0 !important;
}

.flow-node__body {
  font-size: 9px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-top: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.node-trigger { border-left: 3px solid #38B249 !important; }
.node-action { border-left: 3px solid #00C6FF !important; }
.node-success { border-left: 3px solid #38B249 !important; }

/* Moving Dashed Pipelines for SVG Connections */
@keyframes dzFlowLine {
  to {
    stroke-dashoffset: -24;
  }
}

.dz-flow-line-wrap {
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 36px !important;
}

.dz-flow-line {
  overflow: visible !important;
}

.dz-flow-line__pulse {
  animation: dzFlowLine 1.5s linear infinite !important;
}

/* ============================================================
   24. TEAM PAGE FILTER TABS
   ============================================================ */
.dz-team-tabs-wrapper {
  margin-top: -20px;
  margin-bottom: 50px !important;
  display: flex;
  justify-content: center;
}

.dz-team-tabs {
  display: inline-flex;
  background-color: var(--dz-bg-alt);
  padding: 6px;
  border-radius: 30px;
  border: 1px solid var(--dz-border);
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dz-team-tab-btn {
  border: none;
  background: transparent;
  padding: 10px 24px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--dz-text-body);
  border-radius: 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dz-team-tab-btn:hover {
  color: var(--techguru-base);
}

.dz-team-tab-btn.active {
  background: linear-gradient(270deg, #38B249 0%, #2E8B2E 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(56, 178, 73, 0.2);
}

.team-member-col {
  transition: opacity 0.4s ease, transform 0.4s ease;
}