/* ================================================================
   KATHAROS TECHNOLOGIES — RADICAL REDESIGN v4
   Aurora · Editorial · Zero-Image · Bold-Type · Ultra-Premium
   ================================================================
   Design language:
   · Hero: Deep void + animated aurora plasma blobs
   · Type: 80px+ headlines, tight −0.04em tracking, gradient clip
   · Services: Editorial numbered cards with gradient-left accent
   · Stats: Oversized gradient numerals on dark mesh
   · CTA: Full-bleed immersive band
   · Footer: Structured minimal
   ================================================================ */

/* ----------------------------------------------------------------
   0. Design Tokens (v4 layer)
---------------------------------------------------------------- */
:root {
  --v4-void:        #030d22;
  --v4-dark:        #060f2a;
  --v4-mid:         #0a1840;
  --v4-green:       #00A86B;
  --v4-green-lt:    #00e08e;
  --v4-blue:        #086ad8;
  --v4-blue-lt:     #3d8fe8;
  --v4-purple:      #7141e2;
  --v4-white:       #ffffff;
  --v4-off:         #f8fafc;
  --v4-surface:     #f1f5f9;
  --v4-border:      #e2e8f0;
  --v4-h:           #0a0f1e;
  --v4-body:        #334155;
  --v4-muted:       #64748b;

  /* Gradients */
  --v4-g-hero:   linear-gradient(160deg, #030d22 0%, #060f2a 55%, #0a1840 100%);
  --v4-g-brand:  linear-gradient(135deg, #086ad8 0%, #00A86B 100%);
  --v4-g-title:  linear-gradient(135deg, #ffffff 15%, #b4f0d5 55%, #00A86B 100%);
  --v4-g-dark:   linear-gradient(160deg, #030d22 0%, #0a1840 100%);
  --v4-g-warm:   linear-gradient(135deg, #7141e2 0%, #086ad8 50%, #00A86B 100%);

  /* Shadows */
  --v4-s-card:  0 1px 3px rgba(0,0,0,0.04), 0 4px 24px rgba(0,0,0,0.06);
  --v4-s-hover: 0 2px 8px rgba(0,0,0,0.04), 0 16px 48px rgba(0,0,0,0.12);
  --v4-s-dark:  0 20px 60px rgba(3,13,34,0.50);
  --v4-s-glow:  0 8px 32px rgba(0,168,107,0.28);

  /* Radii */
  --v4-r-sm:   6px;
  --v4-r-md:   12px;
  --v4-r-lg:   20px;
  --v4-r-xl:   28px;
  --v4-r-pill: 100px;

  /* Motion */
  --v4-ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --v4-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --v4-slow:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------------
   1. Aurora animation keyframes
---------------------------------------------------------------- */
@keyframes v4-blob1 {
  0%, 100% { transform: translate(0px,    0px)   scale(1.00); }
  25%       { transform: translate(70px,  -60px)  scale(1.12); }
  50%       { transform: translate(30px,   80px)  scale(0.92); }
  75%       { transform: translate(-60px, -30px)  scale(1.06); }
}
@keyframes v4-blob2 {
  0%, 100% { transform: translate(0px,    0px)   scale(1.00); }
  25%       { transform: translate(-80px,  55px)  scale(1.10); }
  50%       { transform: translate(55px,  -70px)  scale(0.90); }
  75%       { transform: translate(-30px,  40px)  scale(1.08); }
}
@keyframes v4-blob3 {
  0%, 100% { transform: translate(0px,    0px)   scale(1.00); }
  33%       { transform: translate(40px,   50px)  scale(1.15); }
  66%       { transform: translate(-50px, -30px)  scale(0.88); }
}
@keyframes v4-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v4-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes v4-pulse-ring {
  0%   { transform: scale(0.92); opacity: 0.80; }
  80%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ----------------------------------------------------------------
   2. Global
---------------------------------------------------------------- */
body {
  font-size: 16px !important;
  font-family: "Jost", sans-serif !important;
  color: var(--v4-body) !important;
  background: var(--v4-white) !important;
  margin-bottom: 0 !important;
  overflow-x: hidden !important;
}

/* ----------------------------------------------------------------
   3. Scrollbar
---------------------------------------------------------------- */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb {
  background: var(--v4-g-brand);
  border-radius: var(--v4-r-pill);
}

/* ----------------------------------------------------------------
   4. Selection
---------------------------------------------------------------- */
::selection      { background: rgba(0,168,107,0.18) !important; color: var(--v4-h) !important; }
::-moz-selection { background: rgba(0,168,107,0.18) !important; color: var(--v4-h) !important; }

/* ----------------------------------------------------------------
   5. Preloader
---------------------------------------------------------------- */
#preloader              { background: var(--v4-void) !important; }
#preloader .preloader   { transform: translate(-50%, -50%) !important; }
#preloader .preloader span { background: var(--v4-green) !important; }
#preloader .preloader span:last-child { background: var(--v4-blue) !important; }

/* ----------------------------------------------------------------
   6. Header — Crisp white, minimal
---------------------------------------------------------------- */
.header-section {
  position: fixed !important;
  top: 0 !important; left: 0 !important; width: 100% !important;
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  border-bottom: 1px solid rgba(226,232,240,0.80) !important;
  box-shadow: none !important;
  z-index: 9999 !important;
  transition: box-shadow 0.3s var(--v4-ease), background 0.3s var(--v4-ease) !important;
}
.header-section.sticky {
  background: rgba(255,255,255,1.00) !important;
  box-shadow: 0 1px 0 var(--v4-border), 0 8px 24px rgba(0,0,0,0.05) !important;
}
.header-wrap { padding: 14px 0 !important; transition: padding 0.28s var(--v4-ease) !important; }
.header-section.sticky .header-wrap { padding: 9px 0 !important; }
.header-logo img { width: 148px !important; transition: width 0.28s var(--v4-ease) !important; }
.header-section.sticky .header-logo img { width: 128px !important; }

/* ----------------------------------------------------------------
   7. Navigation
---------------------------------------------------------------- */
.header-menu .main-menu li {
  padding: 16px 16px !important;
}
.header-menu .main-menu li a {
  font-size: 13.5px !important; font-weight: 600 !important;
  letter-spacing: 0.01em !important; color: var(--v4-h) !important;
  transition: color 0.18s var(--v4-ease) !important;
  position: relative;
}
.header-menu .main-menu > li > a::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0; width: 0; height: 2px;
  background: var(--v4-g-brand); border-radius: var(--v4-r-pill);
  transition: width 0.28s var(--v4-ease) !important;
}
.header-menu .main-menu > li:hover > a::after,
.header-menu .main-menu > li.active-menu > a::after { width: 100%; }
.header-menu .main-menu li:hover > a,
.header-menu .main-menu li.active-menu > a { color: var(--v4-green) !important; }

/* Dropdown */
.header-menu .main-menu li .sub-menu {
  border-radius: var(--v4-r-lg) !important; border: 1px solid var(--v4-border) !important;
  border-top: 2px solid var(--v4-green) !important; box-shadow: var(--v4-s-hover) !important;
  background: #fff !important; padding: 6px 0 !important;
}
.header-menu .main-menu li .sub-menu li a {
  font-size: 13px !important; padding: 9px 20px !important;
  color: var(--v4-body) !important; font-weight: 500 !important;
  transition: color 0.15s, padding-left 0.2s !important;
}
.header-menu .main-menu li .sub-menu li a::after { display: none !important; }
.header-menu .main-menu li .sub-menu li a:hover {
  color: var(--v4-green) !important; padding-left: 26px !important;
}
/* Nav CTA */
.header-btn .btn {
  height: 38px !important; line-height: 38px !important; padding: 0 22px !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  border-radius: var(--v4-r-md) !important; background: var(--v4-g-brand) !important;
  box-shadow: 0 3px 12px rgba(8,106,216,0.28) !important;
  transition: transform 0.24s var(--v4-spring), box-shadow 0.24s var(--v4-ease) !important;
}
.header-btn .btn::before, .header-btn .btn::after { display: none !important; }
.header-btn .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 20px rgba(8,106,216,0.40) !important; color: #fff !important;
}
.header-toggle button span { background: var(--v4-green) !important; }

/* ----------------------------------------------------------------
   8. Buttons
---------------------------------------------------------------- */
.btn {
  border-radius: var(--v4-r-md) !important; font-size: 15px !important;
  font-weight: 600 !important; letter-spacing: 0.02em !important;
  height: 50px !important; line-height: 50px !important; padding: 0 36px !important;
  background: var(--v4-g-brand) !important;
  background-size: 200% auto !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(0,168,107,0.26) !important;
  transition:
    transform      0.26s var(--v4-spring),
    box-shadow     0.26s var(--v4-ease),
    background-pos 0.55s var(--v4-ease) !important;
  position: relative !important; overflow: hidden !important;
}
.btn::before, .btn::after { display: none !important; }
.btn:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 12px 30px rgba(0,168,107,0.40) !important;
  color: #fff !important;
}
.btn:active { transform: translateY(-1px) scale(1.00) !important; }
.btn-white {
  background: rgba(255,255,255,0.09) !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  color: #fff !important; box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
}
.btn-white:hover {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.65) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important; color: #fff !important;
}

/* ----------------------------------------------------------------
   9. HERO — Aurora Plasma (no image, pure CSS)
---------------------------------------------------------------- */
.techwix-hero-section-03 {
  background: var(--v4-void) !important;
  background-image: none !important;
  height: auto !important; min-height: 100vh !important;
  padding-top: 96px !important; padding-bottom: 100px !important;
  position: relative !important; overflow: hidden !important;
  display: flex !important; align-items: center !important;
}

/* Blue aurora blob — top-left */
.techwix-hero-section-03::before {
  content: '' !important;
  position: absolute !important;
  width: 900px !important; height: 900px !important;
  background: radial-gradient(circle at center,
    rgba(8,106,216,0.42) 0%, rgba(8,106,216,0.18) 35%, transparent 65%) !important;
  border-radius: 50% !important;
  top: -280px !important; left: -250px !important;
  filter: blur(70px) !important;
  animation: v4-blob1 18s ease-in-out infinite !important;
  pointer-events: none !important; z-index: 0 !important;
}
/* Green aurora blob — bottom-right */
.techwix-hero-section-03::after {
  content: '' !important;
  position: absolute !important;
  width: 750px !important; height: 750px !important;
  background: radial-gradient(circle at center,
    rgba(0,168,107,0.35) 0%, rgba(0,168,107,0.14) 40%, transparent 65%) !important;
  border-radius: 50% !important;
  bottom: -180px !important; right: -120px !important;
  filter: blur(80px) !important;
  animation: v4-blob2 22s ease-in-out infinite !important;
  pointer-events: none !important; z-index: 0 !important;
}

/* Hide all SVG shapes */
.techwix-hero-section-03 .shape-1,
.techwix-hero-section-03 .shape-2,
.techwix-hero-section-03 .shape-3,
.techwix-hero-section-03 .shape-4 { display: none !important; }

.techwix-hero-section-03 .container { position: relative !important; z-index: 2 !important; }
.techwix-hero-section-03 .row { position: relative !important; z-index: 2 !important; }

/* Sub-title badge */
.techwix-hero-section-03 .hero-content .sub-title {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: var(--v4-green-lt) !important;
  background: rgba(0,168,107,0.10) !important;
  border: 1px solid rgba(0,168,107,0.30) !important;
  padding: 8px 20px !important; border-radius: var(--v4-r-pill) !important;
  margin-bottom: 30px !important; font-family: "Barlow", sans-serif !important;
  animation: v4-fade-up 0.7s var(--v4-slow) both !important;
  animation-delay: 0.1s !important;
}
.techwix-hero-section-03 .hero-content .sub-title::before,
.techwix-hero-section-03 .hero-content .sub-title::after { display: none !important; }
/* Pulsing dot on badge */
.techwix-hero-section-03 .hero-content .sub-title::before {
  content: '' !important; display: inline-block !important;
  width: 7px !important; height: 7px !important;
  background: var(--v4-green-lt) !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
  box-shadow: 0 0 0 2px rgba(0,224,142,0.25) !important;
}

/* Headline — gradient text */
.techwix-hero-section-03 .hero-content .title {
  font-size: 76px !important; font-weight: 800 !important;
  line-height: 1.03 !important; letter-spacing: -0.038em !important;
  background: var(--v4-g-title) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 26px !important;
  animation: v4-fade-up 0.8s var(--v4-slow) both !important;
  animation-delay: 0.25s !important;
}
.techwix-hero-section-03 .hero-content .title::after { display: none !important; }

.techwix-hero-section-03 .hero-content p {
  font-size: 18px !important; color: rgba(255,255,255,0.66) !important;
  line-height: 1.72 !important; max-width: 520px !important;
  margin-bottom: 44px !important;
  animation: v4-fade-up 0.8s var(--v4-slow) both !important;
  animation-delay: 0.40s !important;
}
.techwix-hero-section-03 .hero-btn {
  animation: v4-fade-up 0.8s var(--v4-slow) both !important;
  animation-delay: 0.55s !important;
}
.techwix-hero-section-03 .hero-btn .btn {
  height: 54px !important; line-height: 54px !important; padding: 0 42px !important;
  font-size: 15px !important; border-radius: var(--v4-r-md) !important;
  box-shadow: 0 6px 28px rgba(8,106,216,0.45) !important;
}

/* Responsive hero */
@media (max-width: 1199px) {
  .techwix-hero-section-03 .hero-content .title { font-size: 58px !important; }
}
@media (max-width: 991px) {
  .techwix-hero-section-03 .hero-content .title { font-size: 46px !important; }
  .techwix-hero-section-03 { padding-bottom: 70px !important; }
}
@media (max-width: 767px) {
  .techwix-hero-section-03 .hero-content .title { font-size: 34px !important; line-height: 1.14 !important; }
  .techwix-hero-section-03 .hero-content p { font-size: 15px !important; }
}

/* ----------------------------------------------------------------
   10. Section Titles
---------------------------------------------------------------- */
.section-title { margin-bottom: 56px; }
.section-title .sub-title {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.20em !important; text-transform: uppercase !important;
  color: var(--v4-green) !important; font-family: "Barlow", sans-serif !important;
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
  margin-bottom: 16px !important;
}
.section-title .sub-title::before {
  content: '' !important; display: inline-block !important;
  width: 28px !important; height: 2px !important;
  background: var(--v4-g-brand) !important;
  border-radius: var(--v4-r-pill) !important; flex-shrink: 0;
}
.section-title.text-center .sub-title { justify-content: center !important; }
.section-title.text-center .sub-title::before { display: none !important; }

.section-title .title {
  font-size: 44px !important; font-weight: 800 !important;
  line-height: 1.14 !important; letter-spacing: -0.025em !important;
  color: var(--v4-h) !important; margin-bottom: 0 !important;
}
.section-title .title::after { display: none !important; }

/* Centred gradient underline */
.section-title.text-center .title::after {
  content: '' !important; display: block !important;
  width: 50px !important; height: 3px !important;
  background: var(--v4-g-brand) !important;
  border-radius: var(--v4-r-pill) !important;
  margin: 18px auto 0 !important;
}
/* White variants */
.section-title .title.white { color: #fff !important; }
.techwix-choose-us-section .section-title .sub-title { color: var(--v4-green-lt) !important; }
.techwix-choose-us-section .section-title .sub-title::before {
  background: linear-gradient(90deg, var(--v4-green-lt), var(--v4-blue-lt)) !important;
}
.techwix-choose-us-section .section-title .title { color: #fff !important; }

@media (max-width: 991px) { .section-title .title { font-size: 34px !important; } }
@media (max-width: 767px) { .section-title .title { font-size: 26px !important; } }

/* ----------------------------------------------------------------
   11. Section Spacing
---------------------------------------------------------------- */
.section-padding    { padding: 110px 0 !important; }
.section-padding-02 { padding: 90px 0  !important; }

/* ----------------------------------------------------------------
   12. SERVICE CARDS — Editorial Numbered
---------------------------------------------------------------- */
.techwix-service-section-03 {
  background: var(--v4-white) !important;
  background-image: none !important;
  padding: 90px 0 80px !important;
}
/* Reset CSS counter on the row wrapper */
.service-wrap-03 { counter-reset: v4-svc !important; }

.service-item-03 {
  background: var(--v4-white) !important;
  border: 1px solid var(--v4-border) !important;
  border-radius: var(--v4-r-lg) !important;
  box-shadow: var(--v4-s-card) !important;
  overflow: hidden !important;
  height: 100% !important;
  display: flex !important; flex-direction: column !important;
  position: relative !important;
  counter-increment: v4-svc !important;
  transition:
    transform    0.30s var(--v4-spring),
    box-shadow   0.30s var(--v4-ease),
    border-color 0.30s var(--v4-ease) !important;
}
/* Left gradient accent bar */
.service-item-03::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: var(--v4-g-brand) !important;
  border-radius: var(--v4-r-lg) 0 0 var(--v4-r-lg) !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  transition: transform 0.38s var(--v4-slow) !important;
}
.service-item-03:hover::before { transform: scaleY(1) !important; }
.service-item-03:hover {
  transform: translateY(-10px) !important;
  box-shadow: var(--v4-s-hover) !important;
  border-color: rgba(0,168,107,0.25) !important;
}

/* Icon area */
.service-item-03 .service-img {
  padding: 28px 24px 16px !important;
  background: none !important;
  border-bottom: none !important;
  position: relative !important;
}
/* Large editorial number */
.service-item-03 .service-img::after {
  content: "0" counter(v4-svc) !important;
  position: absolute !important;
  top: 14px !important; right: 18px !important;
  font-size: 72px !important; font-weight: 900 !important; line-height: 1 !important;
  font-family: "Barlow", sans-serif !important;
  color: transparent !important;
  -webkit-text-stroke: 1.2px rgba(8,106,216,0.09) !important;
  letter-spacing: -0.05em !important;
  user-select: none !important; pointer-events: none !important;
  transition: -webkit-text-stroke-color 0.30s var(--v4-ease) !important;
}
.service-item-03:hover .service-img::after {
  -webkit-text-stroke-color: rgba(0,168,107,0.16) !important;
}
.service-item-03 .service-img img {
  width: 48px !important; height: 48px !important; object-fit: contain !important;
  transition: transform 0.38s var(--v4-spring) !important;
}
.service-item-03:hover .service-img img { transform: scale(1.12) rotate(-4deg) !important; }

.service-item-03 .service-content {
  padding: 4px 24px 20px !important; flex: 1 !important;
  display: flex !important; flex-direction: column !important;
}
.service-item-03 .service-content .title {
  font-size: 16px !important; font-weight: 700 !important;
  color: var(--v4-h) !important; margin-bottom: 14px !important; line-height: 1.35 !important;
}
.service-item-03 .service-content .title a {
  color: var(--v4-h) !important;
  transition: color 0.18s var(--v4-ease) !important;
}
.service-item-03 .service-content .title a:hover { color: var(--v4-green) !important; }
.service-item-03 .service-content ul {
  padding: 0 !important; list-style: none !important; flex: 1 !important;
}
.service-item-03 .service-content ul li {
  font-size: 13.5px !important; color: var(--v4-body) !important;
  padding: 5px 0 !important; display: flex !important;
  align-items: flex-start !important; gap: 8px !important; line-height: 1.55 !important;
}
.service-item-03 .service-content ul li i {
  color: var(--v4-green) !important; font-size: 14px !important;
  flex-shrink: 0; margin-top: 1px;
}
.service-item-03 .read-more {
  padding: 14px 24px 22px !important;
  border-top: 1px solid var(--v4-border) !important;
  margin-top: 14px !important;
}
.service-item-03 .read-more a {
  color: var(--v4-green) !important; font-size: 13px !important; font-weight: 600 !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  transition: gap 0.18s, color 0.18s !important;
}
.service-item-03 .read-more a:hover { color: var(--v4-blue) !important; gap: 10px !important; }

/* ----------------------------------------------------------------
   13. About Section — Bold split layout
---------------------------------------------------------------- */
.techwix-about-section-04 { background: var(--v4-off) !important; }
.techwix-about-section-04 .shape-1 { display: none !important; }

.techwix-about-section-04 .section-title .title {
  font-size: 40px !important; line-height: 1.18 !important;
  letter-spacing: -0.022em !important;
}
.techwix-about-section-04 p.text {
  font-size: 16px !important; line-height: 1.80 !important;
  color: var(--v4-body) !important; margin-top: 22px !important;
}
/* About image stack */
.about-img-wrap { position: relative !important; display: block !important; }
.about-img.about-img-big {
  border-radius: var(--v4-r-xl) !important;
  overflow: hidden !important; box-shadow: var(--v4-s-dark) !important;
}
.about-img.about-img-big img { transition: transform 0.6s var(--v4-ease) !important; }
.about-img-wrap:hover .about-img-big img { transform: scale(1.04) !important; }
.about-img.about-img-sm {
  border-radius: var(--v4-r-lg) !important; overflow: hidden !important;
  box-shadow: var(--v4-s-dark) !important; border: 4px solid #fff !important;
}
/* Play button */
.play-btn-02 { position: relative !important; z-index: 3 !important; display: inline-flex !important; }
.play-btn-02 > a {
  background: var(--v4-g-brand) !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #fff !important; box-shadow: 0 0 0 14px rgba(0,168,107,0.12), var(--v4-s-dark) !important;
  transition: transform 0.26s var(--v4-spring), box-shadow 0.26s var(--v4-ease) !important;
  position: relative !important;
}
.play-btn-02 > a:hover {
  transform: scale(1.14) !important;
  box-shadow: 0 0 0 20px rgba(0,168,107,0.08), var(--v4-s-dark) !important;
}
/* Pulse rings */
.play-btn-02 > a::before,
.play-btn-02 > a::after {
  content: '' !important; position: absolute !important; border-radius: 50% !important;
  border: 1.5px solid rgba(0,168,107,0.35) !important;
  animation: v4-pulse-ring 2.4s ease-out infinite !important;
  pointer-events: none !important;
}
.play-btn-02 > a::before { inset: -14px !important; }
.play-btn-02 > a::after  { inset: -28px !important; animation-delay: 0.6s !important; }

/* ----------------------------------------------------------------
   14. Counter Stats — Dark Void + Aurora
---------------------------------------------------------------- */
.techwix-counter-section-02 {
  background: var(--v4-void) !important;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(8,106,216,0.28) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(0,168,107,0.22) 0%, transparent 50%),
    linear-gradient(160deg, #030d22 0%, #060f2a 100%) !important;
  position: relative !important; overflow: hidden !important;
  padding: 90px 0 !important;
}
.techwix-counter-section-02::before {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background:
    radial-gradient(circle at center, rgba(113,65,226,0.15) 0%, transparent 65%) !important;
  width: 700px !important; height: 700px !important;
  border-radius: 50% !important;
  top: -200px !important; right: 10% !important;
  filter: blur(80px) !important;
  animation: v4-blob3 25s ease-in-out infinite !important;
  pointer-events: none !important; z-index: 0 !important;
}
.techwix-counter-section-02 .container { position: relative !important; z-index: 1 !important; }
.techwix-counter-section-02 .counter-wrap { position: relative !important; z-index: 1 !important; }

.single-counter {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--v4-r-lg) !important;
  padding: 36px 28px !important;
  display: flex !important; align-items: center !important; gap: 22px !important;
  backdrop-filter: blur(10px) !important;
  transition:
    transform   0.28s var(--v4-spring),
    background  0.28s var(--v4-ease),
    border-color 0.28s var(--v4-ease) !important;
  cursor: default;
}
.single-counter:hover {
  background: rgba(255,255,255,0.07) !important;
  transform: translateY(-6px) !important;
  border-color: rgba(0,168,107,0.30) !important;
}
.single-counter .counter-img img {
  width: 44px !important; height: 44px !important; object-fit: contain !important;
  filter: brightness(0) invert(1) opacity(0.55) !important;
}
.single-counter .counter-content .counter {
  font-size: 56px !important; font-weight: 800 !important;
  line-height: 1 !important; display: block !important;
  background: var(--v4-g-brand) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important; font-family: "Barlow", sans-serif !important;
  letter-spacing: -0.03em !important;
}
.single-counter .counter-content p {
  color: rgba(255,255,255,0.50) !important; font-size: 11.5px !important;
  font-weight: 600 !important; letter-spacing: 0.10em !important;
  text-transform: uppercase !important; margin-top: 6px !important;
}

/* ----------------------------------------------------------------
   15. Choose Us — Image cards on dark
---------------------------------------------------------------- */
.techwix-choose-us-section {
  background: var(--v4-dark) !important; background-image: none !important;
  position: relative !important; overflow: hidden !important;
}
/* Subtle purple aurora */
.techwix-choose-us-section::before {
  content: '' !important; position: absolute !important;
  width: 600px !important; height: 600px !important;
  background: radial-gradient(circle at center, rgba(113,65,226,0.18) 0%, transparent 65%) !important;
  border-radius: 50% !important; top: -150px !important; left: 50% !important;
  transform: translateX(-50%) !important; filter: blur(90px) !important;
  pointer-events: none !important; z-index: 0 !important;
}
.techwix-choose-us-section .container { position: relative !important; z-index: 1 !important; }

.choose-us-item { height: 100%; }
.choose-us-img {
  border-radius: var(--v4-r-lg) !important; overflow: hidden !important;
  position: relative !important; border: 1px solid rgba(255,255,255,0.07) !important;
  transition: transform 0.30s var(--v4-spring), box-shadow 0.30s var(--v4-ease) !important;
}
.choose-us-img:hover {
  transform: translateY(-10px) !important;
  box-shadow: var(--v4-s-dark) !important; border-color: rgba(0,168,107,0.28) !important;
}
.choose-us-img a { display: block; overflow: hidden; }
.choose-us-img a img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform 0.60s var(--v4-ease) !important;
}
.choose-us-img:hover a img { transform: scale(1.07) !important; }
.choose-us-content {
  background: linear-gradient(180deg, transparent 0%, rgba(3,13,34,0.95) 100%) !important;
  border-radius: 0 0 var(--v4-r-lg) var(--v4-r-lg) !important;
  padding: 36px 20px 22px !important;
}
.choose-us-content .title {
  font-size: 17px !important; font-weight: 700 !important;
  color: #fff !important; margin-bottom: 8px !important;
}
.choose-us-content p {
  font-size: 13.5px !important; color: rgba(255,255,255,0.62) !important;
  line-height: 1.62 !important; margin: 0 !important;
}
.more-choose-content { margin-top: 40px !important; }
.more-choose-content p { color: rgba(255,255,255,0.55) !important; font-size: 15px !important; }
.more-choose-content p a {
  color: var(--v4-green-lt) !important; font-weight: 600 !important;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color 0.18s, gap 0.18s !important;
}
.more-choose-content p a:hover { color: #fff !important; gap: 11px !important; }

/* ----------------------------------------------------------------
   16. Skills Section — Clean, editorial
---------------------------------------------------------------- */
.techwix-skill-section-02 { background: var(--v4-white) !important; }

.skill-left .section-title .title {
  font-size: 38px !important; line-height: 1.22 !important; letter-spacing: -0.022em !important;
}
.experience-wrap {
  margin-top: 36px !important; display: flex !important;
  align-items: flex-start !important; gap: 26px !important;
}
.experience {
  background: var(--v4-g-brand) !important; border-radius: var(--v4-r-lg) !important;
  padding: 28px 22px !important; text-align: center !important;
  min-width: 118px !important; flex-shrink: 0 !important;
  box-shadow: var(--v4-s-glow) !important;
  transition: transform 0.28s var(--v4-spring) !important;
}
.experience:hover { transform: translateY(-4px) !important; }
.experience .number {
  font-size: 60px !important; font-weight: 800 !important; color: #fff !important;
  line-height: 1 !important; display: block !important;
  font-family: "Barlow", sans-serif !important; letter-spacing: -0.04em !important;
}
.experience span {
  color: rgba(255,255,255,0.80) !important; font-size: 12px !important;
  font-weight: 500 !important; display: block !important; margin-top: 5px !important;
  text-transform: uppercase !important; letter-spacing: 0.06em !important;
}
.experience-text p {
  font-size: 15px !important; color: var(--v4-body) !important; line-height: 1.78 !important;
}
.learn-more {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  color: var(--v4-green) !important; font-weight: 600 !important;
  font-size: 14px !important; margin-top: 16px !important;
  transition: gap 0.18s, color 0.18s !important;
}
.learn-more:hover { gap: 11px !important; color: var(--v4-blue) !important; }

/* Progress bars */
.skill-item { margin-bottom: 26px !important; }
.skill-item .title {
  display: flex !important; justify-content: space-between !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  color: var(--v4-h) !important; margin-bottom: 10px !important; letter-spacing: 0.01em !important;
}
.skill-item .bar-inner {
  background: var(--v4-surface) !important; border-radius: var(--v4-r-pill) !important;
  height: 6px !important; overflow: hidden !important;
}
.skill-item .progress-line {
  background: var(--v4-g-brand) !important; border-radius: var(--v4-r-pill) !important;
  height: 100% !important; box-shadow: 0 2px 8px rgba(0,168,107,0.30) !important;
}
.skill-item .skill-percent {
  font-size: 12px !important; font-weight: 700 !important;
  color: var(--v4-green) !important;
}

/* ----------------------------------------------------------------
   17. CTA Band — Full-bleed aurora
---------------------------------------------------------------- */
.techwix-cta-section-02 { padding: 0 0 90px !important; }
.techwix-cta-section-02 .cta-wrap {
  border-radius: var(--v4-r-xl) !important; overflow: hidden !important;
  background: var(--v4-void) !important;
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(8,106,216,0.38) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 50%, rgba(0,168,107,0.30) 0%, transparent 55%),
    linear-gradient(135deg, #030d22 0%, #0a1840 100%) !important;
  padding: 58px 60px !important;
  box-shadow: var(--v4-s-dark) !important; position: relative !important;
}
.techwix-cta-section-02 .row { position: relative !important; z-index: 1 !important; }
.techwix-cta-section-02 .cta-content {
  display: flex !important; align-items: center !important; gap: 22px !important;
}
.techwix-cta-section-02 .cta-icon img {
  width: 50px !important; filter: brightness(0) invert(1) opacity(0.75) !important;
}
.techwix-cta-section-02 .cta-content p {
  font-size: 24px !important; font-weight: 700 !important; color: #fff !important;
  font-family: "Barlow", sans-serif !important; line-height: 1.35 !important; margin: 0 !important;
}
.techwix-cta-section-02 .cta-btn { text-align: right !important; }
.techwix-cta-section-02 .cta-btn .btn-white {
  font-size: 18px !important; font-weight: 700 !important;
  white-space: nowrap !important; letter-spacing: 0.02em !important;
}
@media (max-width: 991px) {
  .techwix-cta-section-02 .cta-wrap { padding: 40px 32px !important; }
  .techwix-cta-section-02 .cta-content p { font-size: 19px !important; }
  .techwix-cta-section-02 .cta-btn { text-align: left !important; margin-top: 24px !important; }
}

/* ----------------------------------------------------------------
   18. Testimonials — Magazine cards
---------------------------------------------------------------- */
.techwix-testimonial-section-02,
.techwix-testimonial-section-03 { background: var(--v4-off) !important; }

.single-testimonial-02 {
  background: var(--v4-white) !important; border-radius: var(--v4-r-lg) !important;
  padding: 36px !important; border: 1px solid var(--v4-border) !important;
  box-shadow: var(--v4-s-card) !important;
  display: flex !important; flex-direction: column !important; gap: 18px !important;
  transition: transform 0.28s var(--v4-spring), box-shadow 0.28s var(--v4-ease) !important;
  position: relative !important;
}
/* Large quote mark */
.single-testimonial-02::before {
  content: '\201C' !important;
  position: absolute !important; top: 18px !important; right: 24px !important;
  font-size: 90px !important; line-height: 1 !important; font-family: Georgia, serif !important;
  color: transparent !important;
  background: var(--v4-g-brand) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important; opacity: 0.12 !important; pointer-events: none !important;
}
.single-testimonial-02:hover {
  transform: translateY(-6px) !important; box-shadow: var(--v4-s-hover) !important;
  border-color: rgba(0,168,107,0.22) !important;
}
.testimonial-thumb {
  width: 56px !important; height: 56px !important; border-radius: 50% !important;
  overflow: hidden !important; border: 2.5px solid rgba(0,168,107,0.25) !important;
  flex-shrink: 0 !important;
}
.testimonial-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.single-testimonial-02 .testimonial-content > img { display: none !important; }
.single-testimonial-02 .testimonial-content p {
  font-size: 15px !important; color: var(--v4-body) !important;
  line-height: 1.75 !important; font-style: italic !important;
}
.single-testimonial-02 .testimonial-content .name {
  font-weight: 700 !important; color: var(--v4-h) !important; font-size: 15px !important;
  display: block !important; margin-top: 10px !important;
}
.single-testimonial-02 .testimonial-content .designation {
  color: var(--v4-green) !important; font-size: 12px !important;
  font-weight: 500 !important; letter-spacing: 0.04em !important;
}

/* ----------------------------------------------------------------
   19. Brand Strip
---------------------------------------------------------------- */
.techwix-brand-section-03 {
  background: var(--v4-white) !important;
  border-top: 1px solid var(--v4-border) !important;
  border-bottom: 1px solid var(--v4-border) !important;
  padding: 42px 0 !important;
}
.single-brand img {
  max-height: 34px !important; object-fit: contain !important;
  filter: grayscale(100%) opacity(0.35) !important;
  transition: filter 0.28s var(--v4-ease), transform 0.28s var(--v4-spring) !important;
}
.single-brand:hover img { filter: grayscale(0%) opacity(0.95) !important; transform: scale(1.10) !important; }

/* ----------------------------------------------------------------
   20. Team Cards
---------------------------------------------------------------- */
.techwix-team-section { background: var(--v4-white) !important; }
.single-team {
  border-radius: var(--v4-r-lg) !important; overflow: hidden !important;
  background: var(--v4-white) !important; border: 1px solid var(--v4-border) !important;
  box-shadow: var(--v4-s-card) !important;
  transition: transform 0.28s var(--v4-spring), box-shadow 0.28s var(--v4-ease) !important;
}
.single-team:hover { transform: translateY(-8px) !important; box-shadow: var(--v4-s-hover) !important; border-color: rgba(0,168,107,0.20) !important; }
.single-team .team-img { overflow: hidden !important; }
.single-team .team-img img { transition: transform 0.55s var(--v4-ease) !important; }
.single-team:hover .team-img img { transform: scale(1.06) !important; }
.single-team .team-content { padding: 18px 20px 20px !important; border-top: 1px solid var(--v4-border) !important; }
.single-team .team-content .name a { color: var(--v4-h) !important; font-size: 15.5px !important; font-weight: 700 !important; transition: color 0.18s !important; }
.single-team .team-content .name a:hover { color: var(--v4-green) !important; }
.single-team .team-content .designation { color: var(--v4-green) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; }
.team-social .social { display: flex; gap: 6px; margin-top: 12px; }
.team-social .social li a {
  width: 30px; height: 30px; background: var(--v4-surface) !important;
  border-radius: var(--v4-r-sm) !important; display: flex !important;
  align-items: center; justify-content: center;
  color: var(--v4-muted) !important; font-size: 11px !important;
  transition: background 0.18s var(--v4-spring), color 0.18s, transform 0.18s var(--v4-spring) !important;
}
.team-social .social li a:hover { background: var(--v4-green) !important; color: #fff !important; transform: translateY(-2px) !important; }

/* ----------------------------------------------------------------
   21. Blog Cards
---------------------------------------------------------------- */
.techwix-blog-section { background: var(--v4-off) !important; }
.single-blog {
  background: var(--v4-white) !important; border-radius: var(--v4-r-lg) !important;
  overflow: hidden !important; border: 1px solid var(--v4-border) !important;
  box-shadow: var(--v4-s-card) !important;
  transition: transform 0.28s var(--v4-spring), box-shadow 0.28s var(--v4-ease) !important;
}
.single-blog:hover { transform: translateY(-8px) !important; box-shadow: var(--v4-s-hover) !important; border-color: rgba(0,168,107,0.20) !important; }
.single-blog .blog-image { overflow: hidden !important; position: relative !important; }
.single-blog .blog-image img { transition: transform 0.55s var(--v4-ease) !important; }
.single-blog:hover .blog-image img { transform: scale(1.06) !important; }
.single-blog .blog-image .top-meta .date { background: var(--v4-g-brand) !important; border-radius: var(--v4-r-md) !important; }
.single-blog .blog-content { padding: 22px !important; }
.single-blog .blog-content .title a { color: var(--v4-h) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.40 !important; transition: color 0.18s !important; }
.single-blog .blog-content .title a:hover { color: var(--v4-green) !important; }
.blog-meta { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-bottom: 10px !important; }
.blog-meta span { font-size: 12.5px !important; color: var(--v4-muted) !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.blog-meta span i { color: var(--v4-green) !important; }
.blog-meta span a { color: var(--v4-muted) !important; transition: color 0.15s !important; }
.blog-meta span a:hover { color: var(--v4-green) !important; }
.blog-btn-link { color: var(--v4-green) !important; font-weight: 600 !important; font-size: 13px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; transition: color 0.15s, gap 0.15s !important; }
.blog-btn-link:hover { color: var(--v4-blue) !important; gap: 10px !important; }

/* ----------------------------------------------------------------
   22. Pricing Cards
---------------------------------------------------------------- */
.techwix-pricing-section { background: var(--v4-off) !important; }
.single-pricing {
  background: var(--v4-white) !important; border-radius: var(--v4-r-xl) !important;
  border: 1px solid var(--v4-border) !important; box-shadow: var(--v4-s-card) !important;
  padding: 44px 36px !important; position: relative !important; overflow: hidden !important;
  transition: transform 0.30s var(--v4-spring), box-shadow 0.30s var(--v4-ease), border-color 0.30s !important;
}
.single-pricing::before {
  content: '' !important; position: absolute !important;
  top: 0; left: 0; right: 0; height: 4px !important;
  background: var(--v4-border) !important;
  transition: background 0.30s var(--v4-ease) !important;
}
.single-pricing:hover,
.single-pricing.active { transform: translateY(-14px) !important; box-shadow: var(--v4-s-hover) !important; border-color: rgba(0,168,107,0.28) !important; }
.single-pricing:hover::before,
.single-pricing.active::before { background: var(--v4-g-brand) !important; }
.single-pricing.active::after {
  content: 'Most Popular' !important; position: absolute !important;
  top: 18px; right: -28px;
  background: var(--v4-g-brand) !important; color: #fff !important;
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.08em !important;
  text-transform: uppercase !important; padding: 4px 38px !important;
  transform: rotate(35deg) !important; font-family: "Barlow", sans-serif !important;
}
.pricing-badge { text-align: center; margin-bottom: 22px !important; }
.pricing-badge .title { display: inline-block !important; background: var(--v4-surface) !important; color: var(--v4-muted) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 6px 20px !important; border-radius: var(--v4-r-pill) !important; font-family: "Barlow", sans-serif !important; transition: background 0.28s, color 0.28s !important; }
.single-pricing:hover .pricing-badge .title,
.single-pricing.active .pricing-badge .title { background: var(--v4-g-brand) !important; color: #fff !important; }
.pricing-price { text-align: center !important; margin-bottom: 26px !important; padding: 20px 0 !important; border-top: 1px solid var(--v4-border) !important; border-bottom: 1px solid var(--v4-border) !important; display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 3px !important; }
.pricing-price .currency { font-size: 22px !important; font-weight: 700 !important; color: var(--v4-h) !important; align-self: flex-start; margin-top: 10px; }
.pricing-price .price { font-size: 58px !important; font-weight: 800 !important; line-height: 1 !important; font-family: "Barlow", sans-serif !important; background: var(--v4-g-brand) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.pricing-price .price span { font-size: 14px !important; font-weight: 500 !important; -webkit-text-fill-color: var(--v4-muted) !important; background: none !important; }
.pricing-list { list-style: none !important; padding: 0 !important; margin: 0 0 26px !important; }
.pricing-list li { padding: 10px 0 !important; font-size: 14px !important; color: var(--v4-body) !important; border-bottom: 1px solid var(--v4-border) !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.pricing-list li:last-child { border-bottom: none !important; }
.pricing-list li::before { content: '' !important; width: 18px; height: 18px; flex-shrink: 0 !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300A86B' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/18px no-repeat !important; }
.pricing-btn .btn { width: 100% !important; }

/* ----------------------------------------------------------------
   23. Page Banners — Deep void + aurora
---------------------------------------------------------------- */
.page-banner-section {
  background: var(--v4-void) !important; background-image: none !important;
  min-height: 440px !important; padding-top: 110px !important; padding-bottom: 70px !important;
  position: relative !important; overflow: hidden !important;
  display: flex !important; align-items: center !important;
}
/* Blue aurora top-left */
.page-banner-section::before {
  content: '' !important; position: absolute !important;
  width: 700px !important; height: 700px !important;
  background: radial-gradient(circle at center, rgba(8,106,216,0.30) 0%, transparent 60%) !important;
  border-radius: 50% !important; top: -220px !important; left: -150px !important;
  filter: blur(75px) !important; pointer-events: none !important; z-index: 0 !important;
  animation: v4-blob1 20s ease-in-out infinite !important;
}
/* Green aurora bottom-right */
.page-banner-section::after {
  content: '' !important; position: absolute !important;
  width: 600px !important; height: 600px !important;
  background: radial-gradient(circle at center, rgba(0,168,107,0.22) 0%, transparent 60%) !important;
  border-radius: 50% !important; bottom: -180px !important; right: -80px !important;
  filter: blur(80px) !important; pointer-events: none !important; z-index: 0 !important;
  animation: v4-blob2 24s ease-in-out infinite !important;
}
.page-banner-section .shape-1, .page-banner-section .shape-2,
.page-banner-section .shape-3, .page-banner-section .shape-4 { display: none !important; }
.page-banner-section .container { position: relative !important; z-index: 2 !important; }

.page-banner .title {
  font-size: 50px !important; font-weight: 800 !important;
  letter-spacing: -0.030em !important; line-height: 1.10 !important;
  background: var(--v4-g-title) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.page-banner .breadcrumb { background: none !important; padding: 0 !important; margin-top: 14px !important; }
.page-banner .breadcrumb-item a { color: rgba(255,255,255,0.55) !important; font-size: 13.5px !important; transition: color 0.15s !important; }
.page-banner .breadcrumb-item a:hover { color: var(--v4-green-lt) !important; }
.page-banner .breadcrumb-item.active { color: var(--v4-green-lt) !important; font-size: 13.5px !important; font-weight: 500 !important; }
.page-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.28) !important; }

@media (max-width: 991px) { .page-banner-section { min-height: 360px !important; } .page-banner .title { font-size: 36px !important; } }
@media (max-width: 767px) { .page-banner-section { min-height: 290px !important; } .page-banner .title { font-size: 28px !important; } }

/* ----------------------------------------------------------------
   24. Contact
---------------------------------------------------------------- */
.single-contact-info {
  background: var(--v4-white) !important; border-radius: var(--v4-r-lg) !important;
  padding: 38px 20px !important; text-align: center !important;
  border: 1px solid var(--v4-border) !important; box-shadow: var(--v4-s-card) !important;
  transition: transform 0.28s var(--v4-spring), box-shadow 0.28s var(--v4-ease) !important;
}
.single-contact-info:hover { transform: translateY(-7px) !important; box-shadow: var(--v4-s-hover) !important; border-color: rgba(0,168,107,0.22) !important; }
.single-contact-info .info-icon {
  width: 68px; height: 68px;
  background: linear-gradient(135deg, rgba(8,106,216,0.06), rgba(0,168,107,0.06)) !important;
  border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center;
  margin: 0 auto 18px !important; border: 1px solid rgba(0,168,107,0.12) !important;
  transition: 0.28s var(--v4-ease) !important;
}
.single-contact-info:hover .info-icon { background: var(--v4-g-brand) !important; border-color: transparent !important; }
.single-contact-info:hover .info-icon img { filter: brightness(0) invert(1) !important; }
.single-contact-info .info-content .title { font-size: 16px !important; font-weight: 700 !important; color: var(--v4-h) !important; margin-bottom: 6px !important; }
.single-contact-info .info-content p { color: var(--v4-muted) !important; font-size: 14px !important; line-height: 1.65 !important; }
.contact-form-wrap {
  background: var(--v4-white) !important; border-radius: var(--v4-r-xl) !important;
  padding: 52px !important; box-shadow: var(--v4-s-hover) !important;
  border: 1px solid var(--v4-border) !important;
}
.single-form input, .single-form textarea {
  border: 1.5px solid var(--v4-border) !important; border-radius: var(--v4-r-md) !important;
  padding: 14px 16px !important; font-size: 14.5px !important; color: var(--v4-body) !important;
  background: var(--v4-off) !important; height: auto !important; line-height: 1.55 !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
.single-form input:focus, .single-form textarea:focus {
  border-color: var(--v4-green) !important;
  box-shadow: 0 0 0 3px rgba(0,168,107,0.14) !important;
  background: var(--v4-white) !important; outline: none !important;
}
.single-form label { font-size: 11.5px !important; font-weight: 600 !important; color: var(--v4-muted) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; margin-bottom: 7px !important; }
.form-btn .btn { width: 100% !important; }
@media (max-width: 767px) { .contact-form-wrap { padding: 30px 20px !important; } }

/* ----------------------------------------------------------------
   25. Footer — Structured minimal navy
---------------------------------------------------------------- */
.footer-section-03 {
  background: var(--v4-void) !important; background-image: var(--v4-g-dark) !important;
  position: relative !important;
}
.footer-section-03::before {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(8,106,216,0.10) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.footer-section-03 > * { position: relative !important; z-index: 1 !important; }

.footer-widget-about .footer-logo img { width: 140px !important; margin-bottom: 18px !important; }
.footer-widget-about > p { color: rgba(255,255,255,0.48) !important; font-size: 13.5px !important; line-height: 1.75 !important; }
.footer-social .social { display: flex; gap: 8px; margin-top: 20px; }
.footer-social .social li a {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: var(--v4-r-md) !important; display: flex !important;
  align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55) !important; font-size: 12px !important;
  transition: background 0.18s var(--v4-spring), color 0.18s, transform 0.18s var(--v4-spring) !important;
}
.footer-social .social li a:hover { background: var(--v4-green) !important; border-color: var(--v4-green) !important; color: #fff !important; transform: translateY(-3px) !important; }
.footer-widget-title {
  font-size: 11px !important; font-weight: 700 !important; color: #fff !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  margin-bottom: 20px !important; padding-bottom: 14px !important; position: relative !important;
}
.footer-widget-title::after { content: '' !important; position: absolute !important; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--v4-g-brand); border-radius: var(--v4-r-pill); }
.widget-link .link li { margin-bottom: 8px !important; }
.widget-link .link li a { color: rgba(255,255,255,0.48) !important; font-size: 13.5px !important; transition: color 0.15s, padding-left 0.15s !important; }
.widget-link .link li a:hover { color: rgba(255,255,255,0.85) !important; padding-left: 5px !important; }
.widget-info ul li { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 14px !important; }
.widget-info .info-icon { width: 33px; height: 33px; background: rgba(0,168,107,0.10) !important; border-radius: var(--v4-r-sm) !important; display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(0,168,107,0.16) !important; }
.widget-info .info-icon i { color: var(--v4-green) !important; font-size: 13px !important; }
.widget-info .info-text span, .widget-info .info-text a { color: rgba(255,255,255,0.48) !important; font-size: 13.5px !important; transition: color 0.15s !important; }
.widget-info .info-text a:hover { color: var(--v4-green-lt) !important; }
.footer-copyright-area { border-top: 1px solid rgba(255,255,255,0.06) !important; padding: 20px 0 !important; margin-top: 40px !important; }
.copyright-text p { color: rgba(255,255,255,0.30) !important; font-size: 12.5px !important; }

/* ----------------------------------------------------------------
   26. Back to Top
---------------------------------------------------------------- */
.progress-wrap { width: 44px !important; height: 44px !important; background: var(--v4-g-brand) !important; border: none !important; border-radius: 50% !important; bottom: 30px !important; right: 30px !important; box-shadow: var(--v4-s-glow) !important; transition: transform 0.26s var(--v4-spring), box-shadow 0.26s !important; }
.progress-wrap:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(0,168,107,0.45) !important; }
.progress-wrap::after { color: #fff !important; font-size: 15px !important; }
.progress-wrap svg path { stroke: rgba(255,255,255,0.25) !important; }

/* ----------------------------------------------------------------
   27. Swiper Pagination
---------------------------------------------------------------- */
.swiper-pagination .swiper-pagination-bullet-active { background-color: var(--v4-green) !important; }
.swiper-pagination .swiper-pagination-bullet-active::after { border-color: var(--v4-green) !important; }

/* ----------------------------------------------------------------
   28. Scroll Progress Bar
---------------------------------------------------------------- */
#kt-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--v4-g-brand); z-index: 999999; border-radius: 0 var(--v4-r-pill) var(--v4-r-pill) 0; box-shadow: 0 0 8px rgba(0,168,107,0.55); transition: width 0.08s linear; pointer-events: none; }

/* ----------------------------------------------------------------
   29. Hero scroll-down indicator
---------------------------------------------------------------- */
.kt-scroll-down { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; opacity: 0.65; transition: opacity 0.28s var(--v4-ease); }
.kt-scroll-down:hover { opacity: 1; }
.kt-scroll-down .kt-sd-line { display: block; width: 1px; height: 38px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.55)); animation: v4-sd-line 1.8s ease-in-out infinite; }
.kt-scroll-down .kt-sd-chevron { display: block; width: 9px; height: 9px; border-right: 1.5px solid rgba(255,255,255,0.55); border-bottom: 1.5px solid rgba(255,255,255,0.55); transform: rotate(45deg); animation: v4-sd-chev 1.8s ease-in-out infinite; }
@keyframes v4-sd-line { 0%,100%{opacity:.20;transform:scaleY(.6)} 50%{opacity:.80;transform:scaleY(1)} }
@keyframes v4-sd-chev { 0%,100%{opacity:.20;transform:rotate(45deg) translateY(-3px)} 50%{opacity:.90;transform:rotate(45deg) translateY(3px)} }

/* ----------------------------------------------------------------
   30. Service Sidebar
---------------------------------------------------------------- */
.service-navigation { border-radius: var(--v4-r-lg) !important; border: 1px solid var(--v4-border) !important; box-shadow: var(--v4-s-card) !important; padding: 26px !important; background: var(--v4-white) !important; position: sticky !important; top: 96px !important; }
.service-navigation .widget-title { font-size: 16px !important; font-weight: 700 !important; color: var(--v4-h) !important; margin-bottom: 16px !important; padding-bottom: 14px !important; border-bottom: 1px solid var(--v4-border) !important; }
.service-nav-item { margin-bottom: 7px !important; }
.service-nav-link { background: var(--v4-off) !important; border-radius: var(--v4-r-md) !important; border: 1px solid var(--v4-border) !important; color: var(--v4-body) !important; font-size: 14px !important; font-weight: 500 !important; padding: 12px 16px !important; transition: all 0.26s var(--v4-spring) !important; }
.service-nav-link:hover, .service-nav-link.active { background: var(--v4-g-brand) !important; border-color: transparent !important; color: #fff !important; transform: translateX(5px) !important; box-shadow: var(--v4-s-glow) !important; }

/* ----------------------------------------------------------------
   31. Accessibility
---------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--v4-green) !important; outline-offset: 3px !important; border-radius: 3px; }

/* ----------------------------------------------------------------
   32. Reduce Motion
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------
   33. iOS safe area
---------------------------------------------------------------- */
@media (max-width: 575px) { .footer-copyright-area { padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; } }

/* ----------------------------------------------------------------
   34. Utility
---------------------------------------------------------------- */
.field-validation-error { color: #ef4444 !important; font-size: 12px !important; }
.text-gradient { background: var(--v4-g-brand) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }

/* ================================================================
   35. SERVICE PAGE — Ultra-Premium Cards (.choose-us-item-02)
   Used on /service and /about pages
================================================================ */

/* Section background — clean off-white */
.techwix-choose-us-section-04 {
  background: var(--v4-off) !important;
  background-image: none !important;
  padding: 100px 0 !important;
  position: relative !important;
}
.techwix-choose-us-section-04::before { display: none !important; }
.techwix-choose-us-section-04 .container { position: relative !important; z-index: 1 !important; }

/* Section heading above grid */
.techwix-choose-us-section-04 .choose-us-wrap > .section-title {
  text-align: center !important; margin-bottom: 60px !important;
}

/* Card counter reset */
.techwix-choose-us-section-04 .choose-us-content-wrap { counter-reset: v4-svc-pg !important; }
.techwix-choose-us-section-04 .choose-us-item-02 { counter-increment: v4-svc-pg !important; }

/* Card base */
.techwix-choose-us-section-04 .choose-us-item-02 {
  background: var(--v4-white) !important;
  border: 1px solid var(--v4-border) !important;
  border-radius: var(--v4-r-xl) !important;
  padding: 38px 30px 32px !important;
  height: 100% !important; min-height: 260px !important;
  display: flex !important; flex-direction: column !important;
  position: relative !important; overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 28px rgba(0,0,0,0.05) !important;
  transition:
    transform    0.32s var(--v4-spring),
    box-shadow   0.32s var(--v4-ease),
    border-color 0.32s var(--v4-ease) !important;
  margin-bottom: 28px !important;
}
/* Gradient top accent bar — grows on hover */
.techwix-choose-us-section-04 .choose-us-item-02::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: var(--v4-g-brand) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.40s var(--v4-slow) !important;
  border-radius: var(--v4-r-xl) var(--v4-r-xl) 0 0 !important;
}
/* Large faded number — editorial decoration */
.techwix-choose-us-section-04 .choose-us-item-02::after {
  content: "0" counter(v4-svc-pg) !important;
  position: absolute !important;
  bottom: 10px !important; right: 18px !important;
  font-size: 76px !important; font-weight: 900 !important; line-height: 1 !important;
  font-family: "Barlow", sans-serif !important; letter-spacing: -0.05em !important;
  color: transparent !important;
  -webkit-text-stroke: 1.2px rgba(8,106,216,0.07) !important;
  pointer-events: none !important; user-select: none !important;
  transition: -webkit-text-stroke-color 0.32s var(--v4-ease) !important;
}
.techwix-choose-us-section-04 .choose-us-item-02:hover::before { transform: scaleX(1) !important; }
.techwix-choose-us-section-04 .choose-us-item-02:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04), 0 24px 60px rgba(0,0,0,0.12) !important;
  border-color: rgba(0,168,107,0.28) !important;
}
.techwix-choose-us-section-04 .choose-us-item-02:hover::after {
  -webkit-text-stroke-color: rgba(0,168,107,0.13) !important;
}

/* Icon tile */
.techwix-choose-us-section-04 .choose-us-img {
  width: 70px !important; height: 70px !important; flex-shrink: 0 !important;
  background: linear-gradient(135deg, rgba(8,106,216,0.07) 0%, rgba(0,168,107,0.07) 100%) !important;
  border: 1px solid rgba(8,106,216,0.10) !important;
  border-radius: var(--v4-r-lg) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-bottom: 22px !important;
  transition:
    background   0.30s var(--v4-ease),
    transform    0.32s var(--v4-spring),
    border-color 0.30s var(--v4-ease) !important;
}
.techwix-choose-us-section-04 .choose-us-item-02:hover .choose-us-img {
  background: var(--v4-g-brand) !important;
  border-color: transparent !important;
  transform: scale(1.10) rotate(-5deg) !important;
}
.techwix-choose-us-section-04 .choose-us-img svg {
  transition: filter 0.28s var(--v4-ease) !important;
}
.techwix-choose-us-section-04 .choose-us-item-02:hover .choose-us-img svg {
  filter: brightness(0) invert(1) !important;
}
.techwix-choose-us-section-04 .choose-us-img img {
  width: 36px !important; height: 36px !important; object-fit: contain !important;
  transition: filter 0.28s var(--v4-ease) !important;
}
.techwix-choose-us-section-04 .choose-us-item-02:hover .choose-us-img img {
  filter: brightness(0) invert(1) !important;
}

/* Title */
.techwix-choose-us-section-04 .choose-us-content .title {
  font-size: 17px !important; font-weight: 700 !important;
  color: var(--v4-h) !important; margin-bottom: 12px !important; line-height: 1.35 !important;
}
.techwix-choose-us-section-04 .choose-us-content .title a {
  color: var(--v4-h) !important; transition: color 0.18s var(--v4-ease) !important;
}
.techwix-choose-us-section-04 .choose-us-content .title a:hover { color: var(--v4-green) !important; }

/* Description */
.techwix-choose-us-section-04 .choose-us-content p {
  font-size: 14px !important; color: var(--v4-body) !important;
  line-height: 1.75 !important; flex: 1 !important; margin-bottom: 0 !important;
}

/* "Learn more →" injected link */
.techwix-choose-us-section-04 .choose-us-content {
  flex: 1 !important; display: flex !important; flex-direction: column !important;
}
.techwix-choose-us-section-04 .choose-us-content::after {
  content: 'Explore service →' !important;
  display: block !important; margin-top: 18px !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--v4-green) !important; letter-spacing: 0.02em !important;
  transition: color 0.18s, letter-spacing 0.20s !important;
}
.techwix-choose-us-section-04 .choose-us-item-02:hover .choose-us-content::after {
  color: var(--v4-blue) !important; letter-spacing: 0.05em !important;
}

/* Row spacing */
.techwix-choose-us-section-04 .row { row-gap: 0 !important; }

/* Also beautify .choose-us-item-02 on the About page (section without -04 class) */
.techwix-choose-us-section:not(.techwix-choose-us-section-04) .choose-us-item-02 {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--v4-r-lg) !important;
  padding: 28px 22px !important;
  transition: background 0.26s var(--v4-ease), border-color 0.26s var(--v4-ease), transform 0.28s var(--v4-spring) !important;
}
.techwix-choose-us-section:not(.techwix-choose-us-section-04) .choose-us-item-02:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(0,168,107,0.28) !important;
  transform: translateY(-5px) !important;
}
.techwix-choose-us-section:not(.techwix-choose-us-section-04) .choose-us-img {
  width: 56px !important; height: 56px !important; flex-shrink: 0 !important;
  background: rgba(0,168,107,0.10) !important;
  border: 1px solid rgba(0,168,107,0.18) !important;
  border-radius: var(--v4-r-md) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background 0.28s var(--v4-ease), transform 0.28s var(--v4-spring) !important;
}
.techwix-choose-us-section:not(.techwix-choose-us-section-04) .choose-us-item-02:hover .choose-us-img {
  background: var(--v4-green) !important; transform: scale(1.10) !important;
}
.techwix-choose-us-section:not(.techwix-choose-us-section-04) .choose-us-content .title a {
  color: #fff !important; font-size: 15px !important; font-weight: 600 !important;
}
.techwix-choose-us-section:not(.techwix-choose-us-section-04) .choose-us-content p {
  color: rgba(255,255,255,0.55) !important; font-size: 13.5px !important; line-height: 1.65 !important;
}

/* ================================================================
   36. SERVICE PAGE v2 — Premium Components
   kt-svc-hero · kt-eyebrow · kt-aurora-text · kt-stat-chip
   kt-svc-intro · kt-section-badge · kt-svc-grid · kt-svc-card
   kt-svc-card--dark · kt-svc-cta-band · kt-btn-brand
================================================================ */

/* ── Hero ─────────────────────────────────────────────────────── */
.kt-svc-hero {
  min-height: 560px;
  background: var(--v4-g-hero);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 120px 0 80px;
}
/* Aurora blobs */
.kt-svc-hero__blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none;
}
.kt-svc-hero__blob--1 {
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(8,106,216,0.35) 0%, transparent 70%);
  top: -160px; left: -160px;
  animation: v4-blob1 18s ease-in-out infinite;
}
.kt-svc-hero__blob--2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(0,168,107,0.28) 0%, transparent 70%);
  bottom: -140px; right: -100px;
  animation: v4-blob2 22s ease-in-out infinite;
}
.kt-svc-hero__blob--3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(113,65,226,0.20) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: v4-blob3 14s ease-in-out infinite;
}
.kt-svc-hero .container { position: relative; z-index: 2; }
.kt-svc-hero__inner { text-align: center; max-width: 780px; margin: 0 auto; }

/* Eyebrow */
.kt-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,168,107,0.10);
  border: 1px solid rgba(0,168,107,0.22);
  border-radius: var(--v4-r-pill);
  padding: 6px 16px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #6ee7b7;
  margin-bottom: 24px;
}
/* Aurora gradient em text */
.kt-aurora-text {
  font-style: normal;
  background: var(--v4-g-title);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Hero title */
.kt-svc-hero__title {
  font-family: "Barlow", sans-serif;
  font-size: clamp(40px, 5.5vw, 68px);
  font-weight: 800; line-height: 1.10;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 22px;
}
/* Hero desc */
.kt-svc-hero__desc {
  font-size: 17px; color: rgba(255,255,255,0.62);
  line-height: 1.75; max-width: 600px; margin: 0 auto 28px;
}
/* Breadcrumb */
.kt-svc-hero__breadcrumb {
  background: transparent !important; padding: 0 !important; margin-bottom: 40px !important;
  justify-content: center;
}
.kt-svc-hero__breadcrumb .breadcrumb-item a { color: rgba(255,255,255,0.50); font-size: 13px; }
.kt-svc-hero__breadcrumb .breadcrumb-item a:hover { color: var(--v4-green-lt); }
.kt-svc-hero__breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,0.28); font-size: 13px; }
.kt-svc-hero__breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.20); }

/* Stat chips */
.kt-svc-hero__stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.kt-stat-chip {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--v4-r-lg);
  padding: 14px 24px;
  min-width: 110px;
  backdrop-filter: blur(12px);
  transition: background 0.22s var(--v4-ease), border-color 0.22s var(--v4-ease), transform 0.22s var(--v4-spring);
}
.kt-stat-chip:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(0,168,107,0.30);
  transform: translateY(-3px);
}
.kt-stat-chip strong {
  font-family: "Barlow", sans-serif;
  font-size: 26px; font-weight: 800; line-height: 1;
  background: var(--v4-g-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kt-stat-chip span {
  font-size: 11px; color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px;
}

/* ── Section Intro ────────────────────────────────────────────── */
.kt-svc-intro {
  background: var(--v4-white);
  padding: 88px 0 60px;
}
.kt-section-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(8,106,216,0.08), rgba(0,168,107,0.08));
  border: 1px solid rgba(0,168,107,0.20);
  border-radius: var(--v4-r-pill);
  padding: 5px 18px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--v4-green);
  margin-bottom: 20px;
}
.kt-svc-intro__title {
  font-family: "Barlow", sans-serif;
  font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 800; line-height: 1.18; letter-spacing: -0.025em;
  color: var(--v4-h);
  margin-bottom: 18px;
}
.kt-svc-intro__desc {
  font-size: 16px; color: var(--v4-muted); line-height: 1.75; max-width: 560px; margin: 0 auto;
}

/* ── Cards Grid ───────────────────────────────────────────────── */
.kt-svc-grid {
  background: var(--v4-off);
  padding: 20px 0 100px;
}
/* Card */
.kt-svc-card {
  background: var(--v4-white);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-r-xl);
  padding: 40px 32px 32px;
  height: 100%;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03), 0 8px 32px rgba(0,0,0,0.05);
  transition:
    transform    0.32s var(--v4-spring),
    box-shadow   0.32s var(--v4-ease),
    border-color 0.30s var(--v4-ease);
}
/* Ghost card number — top-right watermark */
.kt-svc-card__num {
  position: absolute; top: 14px; right: 20px;
  font-family: "Barlow", sans-serif;
  font-size: 72px; font-weight: 900; line-height: 1; letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(8,106,216,0.07);
  pointer-events: none; user-select: none;
  transition: -webkit-text-stroke-color 0.30s var(--v4-ease);
}
/* Top gradient sweep on hover */
.kt-svc-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--v4-g-brand);
  border-radius: var(--v4-r-xl) var(--v4-r-xl) 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.42s var(--v4-slow);
}
.kt-svc-card:hover::before { transform: scaleX(1); }
.kt-svc-card:hover {
  transform: translateY(-14px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04), 0 28px 64px rgba(0,0,0,0.13);
  border-color: rgba(0,168,107,0.24);
}
.kt-svc-card:hover .kt-svc-card__num {
  -webkit-text-stroke-color: rgba(0,168,107,0.13);
}
/* Icon tile */
.kt-svc-card__icon {
  width: 72px; height: 72px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(8,106,216,0.07) 0%, rgba(0,168,107,0.07) 100%);
  border: 1px solid rgba(8,106,216,0.10);
  border-radius: var(--v4-r-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px;
  transition: background 0.28s var(--v4-ease), border-color 0.28s, transform 0.32s var(--v4-spring);
}
.kt-svc-card:hover .kt-svc-card__icon {
  background: var(--v4-g-brand);
  border-color: transparent;
  transform: scale(1.10) rotate(-6deg);
}
.kt-svc-card__icon svg {
  transition: filter 0.26s var(--v4-ease);
}
.kt-svc-card:hover .kt-svc-card__icon svg {
  filter: brightness(0) invert(1);
}
/* Title */
.kt-svc-card__title {
  font-size: 18px; font-weight: 700; line-height: 1.32; margin-bottom: 12px;
}
.kt-svc-card__title a {
  color: var(--v4-h); transition: color 0.18s var(--v4-ease);
}
.kt-svc-card__title a:hover { color: var(--v4-green); }
/* Description */
.kt-svc-card__desc {
  font-size: 14px; color: var(--v4-body); line-height: 1.78;
  flex: 1; margin-bottom: 22px;
}
/* Explore link */
.kt-svc-card__link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--v4-green);
  letter-spacing: 0.02em; margin-top: auto;
  transition: color 0.18s var(--v4-ease), gap 0.22s var(--v4-spring);
  text-decoration: none;
}
.kt-svc-card__link:hover { color: var(--v4-blue); gap: 12px; }
.kt-svc-card__link svg { flex-shrink: 0; transition: transform 0.22s var(--v4-spring); }
.kt-svc-card__link:hover svg { transform: translateX(4px); }

/* Dark CTA card (9th cell) */
.kt-svc-card--dark {
  background: var(--v4-g-dark) !important;
  border-color: rgba(255,255,255,0.06) !important;
  justify-content: center !important;
  padding: 44px 36px !important;
  overflow: visible !important;
}
.kt-svc-card--dark__glow {
  position: absolute; inset: -1px; border-radius: inherit;
  background: var(--v4-g-brand); opacity: 0; z-index: -1;
  transition: opacity 0.30s var(--v4-ease);
  pointer-events: none;
}
.kt-svc-card--dark:hover .kt-svc-card--dark__glow { opacity: 0.12; }
.kt-svc-card--dark:hover {
  border-color: rgba(0,168,107,0.30) !important;
}
.kt-svc-card--dark__tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--v4-green); margin-bottom: 16px;
}
.kt-svc-card--dark__heading {
  font-family: "Barlow", sans-serif;
  font-size: 22px; font-weight: 800; line-height: 1.28; letter-spacing: -0.02em;
  color: #fff; margin-bottom: 14px;
}
.kt-svc-card--dark__body {
  font-size: 14px; color: rgba(255,255,255,0.50); line-height: 1.75; margin-bottom: 28px;
}
.kt-svc-card--dark__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--v4-g-brand);
  border-radius: var(--v4-r-pill);
  padding: 13px 26px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  text-decoration: none;
  transition: opacity 0.20s var(--v4-ease), transform 0.22s var(--v4-spring), box-shadow 0.22s;
  box-shadow: 0 4px 20px rgba(0,168,107,0.28);
}
.kt-svc-card--dark__btn:hover {
  opacity: 0.92; color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,168,107,0.38);
}
.kt-svc-card--dark__btn svg { flex-shrink: 0; transition: transform 0.22s var(--v4-spring); }
.kt-svc-card--dark__btn:hover svg { transform: translateX(4px); }

/* ── CTA Band ─────────────────────────────────────────────────── */
.kt-svc-cta-band {
  background: var(--v4-g-hero);
  padding: 72px 0;
  position: relative; overflow: hidden;
}
.kt-svc-cta-band::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--v4-g-brand); opacity: 0.40;
}
.kt-svc-cta-band::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--v4-g-brand); opacity: 0.40;
}
.kt-svc-cta-band__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.kt-svc-cta-band__heading {
  font-family: "Barlow", sans-serif;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800; letter-spacing: -0.02em;
  color: #fff; margin-bottom: 8px;
}
.kt-svc-cta-band__sub {
  font-size: 15px; color: rgba(255,255,255,0.50); line-height: 1.65; margin: 0;
}
.kt-svc-cta-band__actions {
  display: flex; align-items: center; gap: 24px; flex-shrink: 0; flex-wrap: wrap;
}
.kt-btn-brand {
  display: inline-flex; align-items: center;
  background: var(--v4-g-brand);
  border-radius: var(--v4-r-pill);
  padding: 14px 30px;
  font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(0,168,107,0.28);
  transition: opacity 0.20s, transform 0.22s var(--v4-spring), box-shadow 0.22s;
}
.kt-btn-brand:hover {
  opacity: 0.90; color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(0,168,107,0.38);
}
.kt-svc-cta-band__phone {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.70);
  text-decoration: none;
  transition: color 0.18s var(--v4-ease);
}
.kt-svc-cta-band__phone:hover { color: var(--v4-green-lt); }
.kt-svc-cta-band__phone svg { flex-shrink: 0; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 991px) {
  .kt-svc-hero { min-height: 480px; padding: 100px 0 70px; }
  .kt-svc-cta-band__inner { flex-direction: column; text-align: center; }
  .kt-svc-cta-band__copy { text-align: center; }
  .kt-svc-cta-band__actions { justify-content: center; }
}
@media (max-width: 767px) {
  .kt-svc-hero { min-height: 420px; padding: 90px 0 60px; }
  .kt-svc-hero__stats { gap: 8px; }
  .kt-stat-chip { min-width: 90px; padding: 12px 16px; }
  .kt-stat-chip strong { font-size: 22px; }
  .kt-svc-card { padding: 30px 24px 26px; }
}

/* ================================================================
   37. INNER PAGE HERO — kt-page-hero
   Shared aurora banner for About / Contact / Choose Us / etc.
================================================================ */
.kt-page-hero {
  background: var(--v4-g-hero);
  min-height: 380px;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 110px 0 70px;
  text-align: center;
}
.kt-page-hero .container { position: relative; z-index: 2; }
.kt-page-hero__inner { max-width: 680px; margin: 0 auto; }
.kt-page-hero__title {
  font-family: "Barlow", sans-serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800; line-height: 1.12; letter-spacing: -0.03em;
  color: #fff; margin-bottom: 18px;
}
.kt-page-hero__desc {
  font-size: 16px; color: rgba(255,255,255,0.58);
  line-height: 1.75; max-width: 540px; margin: 0 auto 28px;
}
@media (max-width: 767px) {
  .kt-page-hero { min-height: 320px; padding: 90px 0 60px; }
  .kt-page-hero__title { font-size: clamp(28px, 8vw, 44px); }
}

/* ================================================================
   38. HOME PAGE HERO — kt-home-hero
   Full-bleed aurora hero with split layout + floating stat cards
================================================================ */
.kt-home-hero {
  min-height: 100vh;
  background: var(--v4-g-hero);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 140px 0 100px;
}
/* Reuse blob classes from kt-svc-hero */
.kt-home-hero__blob {
  position: absolute; border-radius: 50%;
  filter: blur(100px); pointer-events: none;
}
.kt-home-hero__blob--1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(8,106,216,0.38) 0%, transparent 70%);
  top: -200px; left: -200px;
  animation: v4-blob1 20s ease-in-out infinite;
}
.kt-home-hero__blob--2 {
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(0,168,107,0.30) 0%, transparent 70%);
  bottom: -180px; right: -120px;
  animation: v4-blob2 24s ease-in-out infinite;
}
.kt-home-hero__blob--3 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(113,65,226,0.18) 0%, transparent 70%);
  top: 40%; left: 40%;
  animation: v4-blob3 16s ease-in-out infinite;
}
.kt-home-hero .container { position: relative; z-index: 2; }
.kt-home-hero__row { min-height: 500px; }
/* Text column */
.kt-home-hero__text { padding-right: 20px; }
.kt-home-hero__title {
  font-family: "Barlow", sans-serif;
  font-size: clamp(42px, 5.8vw, 74px);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.035em;
  color: #fff; margin-bottom: 24px;
}
.kt-home-hero__desc {
  font-size: 17px; color: rgba(255,255,255,0.58);
  line-height: 1.78; max-width: 520px; margin-bottom: 36px;
}
/* CTA buttons */
.kt-home-hero__btns {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.kt-home-hero__ghost-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--v4-r-pill); padding: 13px 24px;
  text-decoration: none;
  transition: color 0.20s, border-color 0.20s, background 0.20s;
}
.kt-home-hero__ghost-btn:hover {
  color: #fff; border-color: rgba(0,168,107,0.50);
  background: rgba(0,168,107,0.08);
}
.kt-home-hero__ghost-btn svg { transition: transform 0.22s var(--v4-spring); }
.kt-home-hero__ghost-btn:hover svg { transform: translateX(4px); }
/* Right cards panel */
.kt-home-hero__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-left: 20px;
  position: relative;
}
.kt-hero-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--v4-r-lg);
  padding: 22px 20px;
  display: flex; align-items: center; gap: 14px;
  backdrop-filter: blur(16px);
  transition: background 0.22s, border-color 0.22s, transform 0.28s var(--v4-spring);
}
.kt-hero-card:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(0,168,107,0.28);
  transform: translateY(-4px);
}
.kt-hero-card__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: rgba(255,255,255,0.07);
  border-radius: var(--v4-r-md);
  display: flex; align-items: center; justify-content: center;
}
.kt-hero-card strong {
  display: block;
  font-family: "Barlow", sans-serif;
  font-size: 26px; font-weight: 800;
  background: var(--v4-g-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.kt-hero-card span {
  display: block;
  font-size: 11px; color: rgba(255,255,255,0.42);
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px;
}
/* Staggered offset for visual interest */
.kt-hero-card--1 { transform: translateY(-8px); }
.kt-hero-card--3 { transform: translateY(-8px); }
.kt-hero-card--1:hover, .kt-hero-card--3:hover { transform: translateY(-14px); }
/* Trust badge below cards */
.kt-home-hero__trust {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,0.38);
  padding: 0 4px;
}
@media (max-width: 991px) {
  .kt-home-hero { min-height: unset; padding: 110px 0 80px; }
  .kt-home-hero__row { min-height: unset; }
  .kt-home-hero__text { padding-right: 0; text-align: center; }
  .kt-home-hero__btns { justify-content: center; }
  .kt-home-hero__desc { margin-left: auto; margin-right: auto; }
}

/* ================================================================
   39. CONTACT PAGE — premium info cards + form
================================================================ */
.contact-info-section {
  background: var(--v4-white);
  padding: 80px 0 60px !important;
}
.single-contact-info {
  background: var(--v4-white);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-r-xl);
  padding: 40px 28px 36px;
  transition: transform 0.28s var(--v4-spring), box-shadow 0.28s, border-color 0.28s;
  box-shadow: var(--v4-s-card);
  position: relative; overflow: hidden;
}
.single-contact-info::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--v4-g-brand);
  border-radius: var(--v4-r-xl) var(--v4-r-xl) 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.36s var(--v4-slow);
}
.single-contact-info:hover::before { transform: scaleX(1); }
.single-contact-info:hover {
  transform: translateY(-10px);
  box-shadow: var(--v4-s-hover);
  border-color: rgba(0,168,107,0.20);
}
.info-icon {
  width: 68px; height: 68px;
  background: linear-gradient(135deg, rgba(8,106,216,0.08) 0%, rgba(0,168,107,0.08) 100%);
  border: 1px solid rgba(8,106,216,0.12);
  border-radius: var(--v4-r-lg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  transition: background 0.26s, transform 0.28s var(--v4-spring);
}
.single-contact-info:hover .info-icon {
  background: var(--v4-g-brand);
  transform: scale(1.08) rotate(-5deg);
}
.single-contact-info:hover .info-icon svg { filter: brightness(0) invert(1); }
.info-content .title {
  font-size: 16px !important; font-weight: 700 !important;
  color: var(--v4-h) !important; margin-bottom: 8px !important;
}
.info-content p { font-size: 14px !important; color: var(--v4-muted) !important; }
/* Contact form section */
.techwix-contact-section .contact-form-wrap {
  background: var(--v4-white);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-r-xl);
  padding: 52px 48px;
  box-shadow: var(--v4-s-card);
}
.techwix-contact-section .heading-wrap .sub-title {
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 0.09em !important; text-transform: uppercase !important;
  color: var(--v4-green) !important;
  background: linear-gradient(135deg, rgba(8,106,216,0.08), rgba(0,168,107,0.08));
  border: 1px solid rgba(0,168,107,0.20);
  border-radius: var(--v4-r-pill);
  padding: 5px 18px !important;
  display: inline-block; margin-bottom: 14px;
}
.techwix-contact-section .heading-wrap .title {
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 800 !important; letter-spacing: -0.025em !important;
  color: var(--v4-h) !important; margin-bottom: 32px !important;
}
.techwix-contact-section .single-form input,
.techwix-contact-section .single-form textarea {
  background: var(--v4-surface) !important;
  border: 1.5px solid var(--v4-border) !important;
  border-radius: var(--v4-r-md) !important;
  padding: 14px 18px !important;
  font-size: 14px !important; color: var(--v4-h) !important;
  transition: border-color 0.20s, box-shadow 0.20s !important;
}
.techwix-contact-section .single-form input:focus,
.techwix-contact-section .single-form textarea:focus {
  border-color: var(--v4-green) !important;
  box-shadow: 0 0 0 3px rgba(0,168,107,0.12) !important;
  outline: none !important;
}
.techwix-contact-section .form-btn .btn {
  background: var(--v4-g-brand) !important;
  border: none !important; border-radius: var(--v4-r-pill) !important;
  padding: 14px 40px !important;
  font-weight: 700 !important; font-size: 14px !important;
  color: #fff !important;
  box-shadow: 0 4px 24px rgba(0,168,107,0.28) !important;
  transition: opacity 0.20s, transform 0.22s var(--v4-spring) !important;
}
.techwix-contact-section .form-btn .btn:hover {
  opacity: 0.88 !important; transform: translateY(-2px) !important;
}