/* ================================================================
   KATHAROS TECHNOLOGIES — COMPLETE REDESIGN v3
   White-First · Enterprise Grade · Modern SaaS Aesthetic
   Logo always on white. Navy for drama. Green for action.
   ================================================================ */

/* ----------------------------------------------------------------
   1. CSS Design Tokens
---------------------------------------------------------------- */
:root {
  --kt-green:         #00A86B;
  --kt-green-light:   #00c47d;
  --kt-green-dark:    #007a4d;
  --kt-blue:          #086ad8;
  --kt-blue-light:    #3d8fe8;
  --kt-blue-dark:     #054fa3;
  --kt-navy:          #000c29;
  --kt-navy-mid:      #0a1940;

  --kt-grad-primary:  linear-gradient(135deg, #086ad8 0%, #00A86B 100%);
  --kt-grad-accent:   linear-gradient(195deg, #00A86B 0%, #42b9ff 100%);
  --kt-grad-dark:     linear-gradient(160deg, #000c29 0%, #0a1940 100%);
  --kt-grad-hero:     linear-gradient(125deg, rgba(0,12,41,0.80) 0%, rgba(8,106,216,0.55) 55%, rgba(0,168,107,0.35) 100%);
  --kt-grad-overlay:  linear-gradient(180deg, transparent 0%, rgba(0,12,41,0.90) 100%);

  --kt-off-white:     #f8fafc;
  --kt-light-bg:      #f1f5f9;
  --kt-border:        #e2e8f0;
  --kt-border-dark:   #cbd5e1;
  --kt-text:          #334155;
  --kt-text-muted:    #64748b;
  --kt-heading:       #0f172a;

  --kt-shadow-xs:     0 1px 3px rgba(0,0,0,0.07);
  --kt-shadow-sm:     0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --kt-shadow-md:     0 8px 24px rgba(8,106,216,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --kt-shadow-lg:     0 16px 48px rgba(8,106,216,0.14), 0 4px 16px rgba(0,0,0,0.08);
  --kt-shadow-xl:     0 24px 64px rgba(8,106,216,0.18), 0 8px 24px rgba(0,0,0,0.10);
  --kt-glow-green:    0 0 0 3px rgba(0,168,107,0.22);
  --kt-glow-blue:     0 0 0 3px rgba(8,106,216,0.22);

  --kt-r-sm:    6px;
  --kt-r-md:    12px;
  --kt-r-lg:    18px;
  --kt-r-xl:    24px;
  --kt-r-pill:  100px;

  --kt-ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --kt-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --kt-t-fast:  0.18s;
  --kt-t-base:  0.30s;
  --kt-t-slow:  0.50s;
}

/* ----------------------------------------------------------------
   2. Global Refinements
---------------------------------------------------------------- */
body {
  color: #4c4d56 !important;
  margin-bottom: 0 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* ----------------------------------------------------------------
   3. Premium Custom Scrollbar
---------------------------------------------------------------- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--kt-off-white); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--kt-blue) 0%, var(--kt-green) 100%);
  border-radius: var(--kt-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--kt-green-dark); }

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

/* ----------------------------------------------------------------
   5. Preloader — Brand Styled
   NOTE: Do NOT set display with !important — jQuery fadeOut sets
   display:none and !important would prevent it from hiding.
---------------------------------------------------------------- */
#preloader {
  background: var(--kt-navy) !important;
  /* No display override — jQuery needs to set display:none on fadeOut */
}
#preloader .preloader {
  /* Keep original position:absolute / top:50% / left:50% centering */
  width: 64px !important;
  height: 64px !important;
  transform: translate(-50%, -50%) !important;
}
#preloader .preloader span {
  background: var(--kt-green) !important;
  opacity: 0.85;
}
#preloader .preloader span:last-child {
  background: var(--kt-blue) !important;
}

/* ----------------------------------------------------------------
   6. Header — Fixed Glassmorphism
---------------------------------------------------------------- */
.header-section {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226,232,240,0.80) !important;
  box-shadow: var(--kt-shadow-xs) !important;
  z-index: 9999 !important;
  transition:
    background     var(--kt-t-base) var(--kt-ease),
    box-shadow     var(--kt-t-base) var(--kt-ease),
    border-color   var(--kt-t-base) var(--kt-ease) !important;
}

.header-section.sticky {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  box-shadow: 0 4px 24px rgba(8,106,216,0.11), 0 1px 6px rgba(0,0,0,0.06) !important;
  border-bottom-color: var(--kt-border) !important;
}

.header-wrap {
  padding: 16px 0 !important;
  transition: padding var(--kt-t-base) var(--kt-ease) !important;
}
.header-section.sticky .header-wrap { padding: 12px 0 !important; }

.header-logo a img {
  width: 155px !important;
  transition: width var(--kt-t-base) var(--kt-ease) !important;
}
.header-section.sticky .header-logo a img { width: 135px !important; }

/* ----------------------------------------------------------------
   7. Navigation — Premium Interactions
---------------------------------------------------------------- */
.header-menu .main-menu li {
  padding: 20px 22px !important;
}
@media only screen and (max-width: 1199px) {
  .header-menu .main-menu li { padding: 20px 16px !important; }
}

.header-menu .main-menu li a {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--kt-heading) !important;
  transition: color var(--kt-t-fast) var(--kt-ease) !important;
  position: relative;
}

.header-menu .main-menu > li > a::after {
  content: '' !important;
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--kt-grad-primary);
  border-radius: var(--kt-r-pill);
  transition: width var(--kt-t-base) var(--kt-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.active-menu > a { color: var(--kt-green) !important; }
.header-menu .main-menu li:hover > a          { color: var(--kt-green) !important; }

/* Dropdown */
.header-menu .main-menu li .sub-menu {
  border-top: 2px solid var(--kt-green) !important;
  border-radius: var(--kt-r-md) !important;
  border-left: 1px solid var(--kt-border) !important;
  border-right: 1px solid var(--kt-border) !important;
  border-bottom: 1px solid var(--kt-border) !important;
  box-shadow: var(--kt-shadow-lg) !important;
  padding: 10px 0 !important;
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  transition: opacity 0.22s var(--kt-ease), top 0.22s var(--kt-ease), visibility 0.22s var(--kt-ease) !important;
}
.header-menu .main-menu li .sub-menu li a {
  font-size: 13.5px !important;
  padding: 9px 24px !important;
  color: var(--kt-text) !important;
  font-weight: 500 !important;
  transition: color var(--kt-t-fast) var(--kt-ease), padding-left var(--kt-t-fast) var(--kt-ease) !important;
}
.header-menu .main-menu li .sub-menu li a:hover {
  color: var(--kt-green) !important;
  padding-left: 30px !important;
}
.header-menu .main-menu li .sub-menu li a::after { display: none !important; }

/* "Get Started" CTA Button in header */
.header-btn { margin-left: 20px !important; }
.header-btn .btn {
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--kt-r-md) !important;
  background: var(--kt-grad-primary) !important;
  box-shadow: 0 4px 18px rgba(8,106,216,0.32) !important;
  letter-spacing: 0.025em !important;
  transition: transform var(--kt-t-base) var(--kt-spring), box-shadow var(--kt-t-base) var(--kt-ease) !important;
}
.header-btn .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(8,106,216,0.42) !important;
  color: #fff !important;
}
.header-btn .btn::before,
.header-btn .btn::after { display: none !important; }

/* Search icon */
.header-search .search-btn:hover { color: var(--kt-green) !important; }

/* Hamburger */
.header-toggle button span {
  background: var(--kt-green) !important;
  border-radius: 3px !important;
  transition: background var(--kt-t-fast) var(--kt-ease) !important;
}

/* ----------------------------------------------------------------
   8. Mobile Offcanvas — Premium Dark Panel
---------------------------------------------------------------- */
.offcanvas {
  background: linear-gradient(160deg, var(--kt-navy) 0%, var(--kt-navy-mid) 100%) !important;
  border: none !important;
  box-shadow: var(--kt-shadow-xl) !important;
  max-width: 310px !important;
}
.offcanvas-header {
  padding: 22px 26px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.offcanvas-header .offcanvas-logo a img { width: 135px; }
.offcanvas-header .close-btn {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--kt-r-md) !important;
  color: rgba(255,255,255,0.75) !important;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--kt-t-fast) var(--kt-ease) !important;
}
.offcanvas-header .close-btn:hover {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
}
.offcanvas-body { padding: 16px 0 !important; }

.offcanvas-menu .main-menu > li > a {
  color: rgba(255,255,255,0.82) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 13px 26px !important;
  display: block;
  transition: color var(--kt-t-fast) var(--kt-ease) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.offcanvas-menu .main-menu > li > a:hover { color: var(--kt-green) !important; }
.offcanvas-menu .main-menu li .sub-menu li a {
  color: rgba(255,255,255,0.55) !important;
  font-size: 13px !important;
  padding: 10px 26px 10px 42px !important;
  border-bottom: none;
}
.offcanvas-menu .main-menu li .sub-menu li a:hover { color: var(--kt-green) !important; }

/* ----------------------------------------------------------------
   9. Button System — Premium
---------------------------------------------------------------- */
.btn {
  border-radius: var(--kt-r-md) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  height: 52px !important;
  line-height: 52px !important;
  padding: 0 42px !important;
  background: var(--kt-grad-accent) !important;
  box-shadow: 0 4px 18px rgba(0,168,107,0.28) !important;
  overflow: hidden !important;
  position: relative !important;
  transition:
    transform    var(--kt-t-base) var(--kt-spring),
    box-shadow   var(--kt-t-base) var(--kt-ease) !important;
}

/* Shimmer effect on hover */
.btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -120% !important;
  width: 80% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.55s var(--kt-ease) !important;
  border-radius: 0 !important; bottom: auto !important; right: auto !important;
}
.btn::after { display: none !important; }
.btn:hover::before { left: 140% !important; right: auto !important; }
.btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(0,168,107,0.38) !important;
  color: #fff !important;
}
.btn:active { transform: translateY(-1px) !important; }

.btn-white {
  background: rgba(255,255,255,0.12) !important;
  border: 1.5px solid rgba(255,255,255,0.45) !important;
  color: #fff !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
}
.btn-white:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.70) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

/* ----------------------------------------------------------------
   10. Hero Section — Full-Bleed Premium
---------------------------------------------------------------- */
.techwix-hero-section-03 {
  height: auto !important;
  min-height: 100vh !important;
  padding-top: 90px !important;
  background-size: cover !important;
  background-position: center center !important;
  position: relative !important;
  overflow: hidden !important;
}
.techwix-hero-section-03::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--kt-grad-hero);
  z-index: 1;
}
.techwix-hero-section-03 > .shape-1,
.techwix-hero-section-03 > .shape-2,
.techwix-hero-section-03 > .shape-3,
.techwix-hero-section-03 > .shape-4 { opacity: 0.08 !important; }

.techwix-hero-section-03 .container {
  position: relative;
  z-index: 2;
}
.techwix-hero-section-03 .hero-content .sub-title {
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--kt-green-light) !important;
  background: rgba(0,168,107,0.14) !important;
  border: 1px solid rgba(0,168,107,0.30) !important;
  display: inline-block !important;
  padding: 6px 18px !important;
  border-radius: var(--kt-r-pill) !important;
  margin-bottom: 22px !important;
  font-weight: 700 !important;
  font-family: "Barlow", sans-serif !important;
  backdrop-filter: blur(8px);
}
.techwix-hero-section-03 .hero-content .title {
  font-size: 58px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 22px !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 3px 24px rgba(0,0,0,0.18) !important;
}
@media only screen and (max-width: 1199px) {
  .techwix-hero-section-03 .hero-content .title { font-size: 46px !important; }
}
@media only screen and (max-width: 767px) {
  .techwix-hero-section-03 .hero-content .title { font-size: 34px !important; }
  .techwix-hero-section-03 { min-height: 80vh !important; }
}
.techwix-hero-section-03 .hero-content p {
  font-size: 18px !important;
  color: rgba(255,255,255,0.82) !important;
  line-height: 1.70 !important;
  margin-bottom: 36px !important;
  max-width: 500px;
}
.techwix-hero-section-03 .hero-btn .btn {
  background: var(--kt-grad-primary) !important;
  height: 54px !important;
  line-height: 54px !important;
  padding: 0 42px !important;
  font-size: 16px !important;
  border-radius: var(--kt-r-md) !important;
  box-shadow: 0 8px 32px rgba(8,106,216,0.45) !important;
}
.techwix-hero-section-03 .hero-btn .btn:hover {
  box-shadow: 0 14px 40px rgba(8,106,216,0.55) !important;
}

/* ----------------------------------------------------------------
   11. Section Titles — Premium Treatment
---------------------------------------------------------------- */
.section-title .sub-title {
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  font-family: "Barlow", sans-serif !important;
  color: var(--kt-green) !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.section-title .sub-title::before {
  content: '' !important;
  display: inline-block !important;
  width: 28px; height: 2px !important;
  background: var(--kt-grad-primary) !important;
  border-radius: var(--kt-r-pill) !important;
  flex-shrink: 0;
}
.section-title .sub-title::after { display: none !important; }
.section-title .title {
  font-size: 40px !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  color: var(--kt-heading) !important;
  letter-spacing: -0.018em !important;
}
@media only screen and (max-width: 991px) {
  .section-title .title { font-size: 33px !important; }
}
@media only screen and (max-width: 767px) {
  .section-title .title { font-size: 27px !important; line-height: 1.30 !important; }
}

/* ----------------------------------------------------------------
   12. Service Cards — Premium Glass Lift
---------------------------------------------------------------- */
.techwix-service-section-03 {
  background-size: cover !important;
  background-position: center !important;
  padding: 80px 0 60px !important;
}
.service-item-03 {
  border-radius: var(--kt-r-lg) !important;
  background: rgba(255,255,255,0.97) !important;
  border: 1px solid var(--kt-border) !important;
  box-shadow: var(--kt-shadow-sm) !important;
  overflow: hidden !important;
  transition:
    transform   var(--kt-t-base) var(--kt-spring),
    box-shadow  var(--kt-t-base) var(--kt-ease),
    border-color var(--kt-t-base) var(--kt-ease) !important;
}
.service-item-03:hover {
  transform: translateY(-10px) !important;
  box-shadow: var(--kt-shadow-xl) !important;
  border-color: rgba(0,168,107,0.28) !important;
}
.service-item-03 .service-img {
  transition: background var(--kt-t-base) var(--kt-ease) !important;
}
.service-item-03:hover .service-img {
  background: linear-gradient(135deg, rgba(8,106,216,0.10) 0%, rgba(0,168,107,0.10) 100%) !important;
}
.service-item-03 .service-content .title a {
  color: var(--kt-heading) !important;
  font-weight: 700 !important;
  transition: color var(--kt-t-fast) var(--kt-ease) !important;
}
.service-item-03 .service-content .title a:hover { color: var(--kt-green) !important; }
.service-item-03 .service-content ul li {
  color: var(--kt-text) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}
.service-item-03 .read-more a {
  color: var(--kt-green) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--kt-t-fast) var(--kt-ease), gap var(--kt-t-fast) var(--kt-ease) !important;
}
.service-item-03 .read-more a:hover { color: var(--kt-blue) !important; gap: 10px; }

/* ----------------------------------------------------------------
   13. About Section — Polished
---------------------------------------------------------------- */
.techwix-about-section-04,
.techwix-about-section-07 {
  background: var(--kt-off-white);
}
.techwix-about-section-04 .section-title .title,
.techwix-about-section-07 .section-title .title {
  font-size: 37px !important;
  line-height: 1.22 !important;
}
.techwix-about-section-04 .text,
.techwix-about-section-07 p:not(.breadcrumb-item) {
  font-size: 15px !important;
  line-height: 1.80 !important;
  color: var(--kt-text) !important;
}
.about-img {
  border-radius: var(--kt-r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--kt-shadow-lg) !important;
}
.about-img img { transition: transform 0.60s var(--kt-ease) !important; }
.about-img:hover img { transform: scale(1.04) !important; }

.play-btn-02 a {
  background: var(--kt-grad-primary) !important;
  box-shadow: 0 0 0 14px rgba(0,168,107,0.14), var(--kt-shadow-lg) !important;
  transition: transform var(--kt-t-base) var(--kt-spring), box-shadow var(--kt-t-base) var(--kt-ease) !important;
}
.play-btn-02 a:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 0 0 20px rgba(0,168,107,0.10), var(--kt-shadow-xl) !important;
}

/* ----------------------------------------------------------------
   14. Counter Section — Impactful Dark
---------------------------------------------------------------- */
.techwix-counter-section-02 {
  background: linear-gradient(135deg, #000c29 0%, #0a1940 55%, #0c2a65 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.techwix-counter-section-02::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(8,106,216,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0,168,107,0.10) 0%, transparent 50%);
  pointer-events: none;
}
.techwix-counter-section-02 .counter-wrap { position: relative; z-index: 1; }

.single-counter {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 32px 24px !important;
  border-radius: var(--kt-r-lg) !important;
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(10px) !important;
  transition: transform var(--kt-t-base) var(--kt-spring), background var(--kt-t-base) var(--kt-ease) !important;
}
.single-counter:hover {
  background: rgba(255,255,255,0.09) !important;
  transform: translateY(-5px) !important;
  border-color: rgba(0,168,107,0.35) !important;
}
.single-counter .counter-img img {
  width: 44px; height: 44px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.70) !important;
}
.single-counter .counter-content .counter {
  font-size: 50px !important;
  font-weight: 800 !important;
  line-height: 1.0 !important;
  display: block !important;
  background: var(--kt-grad-accent) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.single-counter .counter-content p {
  color: rgba(255,255,255,0.65) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ----------------------------------------------------------------
   15. Choose Us Section — Premium Overlay Cards
---------------------------------------------------------------- */
.techwix-choose-us-section {
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
}
.techwix-choose-us-section::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,12,41,0.80) 0%, rgba(8,106,216,0.55) 100%);
}
.techwix-choose-us-section .section-title { position: relative; z-index: 1; }
.techwix-choose-us-section .section-title .sub-title { color: var(--kt-green-light) !important; }
.techwix-choose-us-section .section-title .sub-title::before { background: linear-gradient(90deg, var(--kt-green), var(--kt-blue)); }
.techwix-choose-us-section .section-title .title { color: #ffffff !important; }

.choose-us-item { position: relative; z-index: 1; }
.choose-us-img {
  border-radius: var(--kt-r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--kt-shadow-lg) !important;
  transition: transform var(--kt-t-base) var(--kt-spring), box-shadow var(--kt-t-base) var(--kt-ease) !important;
}
.choose-us-img:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--kt-shadow-xl) !important;
}
.choose-us-img a img { transition: transform 0.60s var(--kt-ease) !important; }
.choose-us-img:hover a img { transform: scale(1.06) !important; }
.choose-us-content {
  background: linear-gradient(180deg, transparent 0%, rgba(0,12,41,0.93) 100%) !important;
  border-radius: 0 0 var(--kt-r-lg) var(--kt-r-lg) !important;
  padding: 30px 22px !important;
}
.choose-us-content .title {
  font-size: 17px !important;
  color: #fff !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
.choose-us-content p {
  color: rgba(255,255,255,0.72) !important;
  font-size: 13.5px !important;
  line-height: 1.60 !important;
}
.more-choose-content { position: relative; z-index: 1; }
.more-choose-content p { color: rgba(255,255,255,0.75) !important; }
.more-choose-content p a {
  color: var(--kt-green-light) !important;
  font-weight: 600 !important;
  transition: color var(--kt-t-fast) var(--kt-ease), letter-spacing var(--kt-t-fast) var(--kt-ease) !important;
}
.more-choose-content p a:hover {
  color: #fff !important;
  letter-spacing: 0.02em !important;
}

/* ----------------------------------------------------------------
   16. Skills Section — Premium Progress
---------------------------------------------------------------- */
.techwix-skill-section-02 { background: #ffffff; }
.skill-left .section-title .title { font-size: 35px !important; line-height: 1.25 !important; }

.experience-wrap { display: flex; align-items: flex-start; gap: 24px; margin-top: 28px; }
.experience {
  background: var(--kt-grad-primary) !important;
  border-radius: var(--kt-r-lg) !important;
  padding: 28px 24px !important;
  box-shadow: var(--kt-shadow-lg) !important;
  min-width: 130px;
  text-align: center;
  transition: transform var(--kt-t-base) var(--kt-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;
}
.experience span {
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  display: block;
  margin-top: 6px;
}
.experience-text p { font-size: 14.5px !important; color: var(--kt-text) !important; line-height: 1.75 !important; }
.learn-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--kt-green) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
  margin-top: 14px !important;
  transition: gap var(--kt-t-fast) var(--kt-ease), color var(--kt-t-fast) var(--kt-ease) !important;
}
.learn-more:hover { color: var(--kt-blue) !important; gap: 12px !important; }

.skill-item { margin-bottom: 22px !important; }
.skill-item .title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--kt-heading) !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 10px !important;
}
.skill-item .bar-inner {
  background: var(--kt-light-bg) !important;
  border-radius: var(--kt-r-pill) !important;
  height: 7px !important;
  overflow: hidden !important;
}
.skill-item .progress-line {
  background: var(--kt-grad-primary) !important;
  border-radius: var(--kt-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(--kt-green) !important;
}

/* ----------------------------------------------------------------
   17. CTA Section — Bold Gradient Band
---------------------------------------------------------------- */
.techwix-cta-section-02 { padding: 0 0 80px !important; }
.techwix-cta-section-02 .cta-wrap {
  border-radius: var(--kt-r-xl) !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 50px 56px !important;
  box-shadow: var(--kt-shadow-xl) !important;
  background-size: cover !important;
  background-position: center !important;
}
.techwix-cta-section-02 .cta-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(0,12,41,0.90) 0%, rgba(8,106,216,0.78) 100%);
}
.techwix-cta-section-02 .row { position: relative; z-index: 1; }
.techwix-cta-section-02 .cta-content {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}
.techwix-cta-section-02 .cta-icon img {
  width: 52px !important;
  filter: brightness(0) invert(1) opacity(0.85) !important;
}
.techwix-cta-section-02 .cta-content p {
  font-size: 23px !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-family: "Barlow", sans-serif !important;
  line-height: 1.35 !important;
}
.techwix-cta-section-02 .cta-btn { text-align: right; }
@media only screen and (max-width: 991px) {
  .techwix-cta-section-02 .cta-wrap { padding: 40px 32px !important; }
  .techwix-cta-section-02 .cta-content p { font-size: 18px !important; }
}
@media only screen and (max-width: 767px) {
  .techwix-cta-section-02 .cta-wrap { padding: 32px 22px !important; }
}

/* ----------------------------------------------------------------
   18. Testimonial — Elevated Cards
---------------------------------------------------------------- */
.single-testimonial-02 {
  background: #fff !important;
  border-radius: var(--kt-r-lg) !important;
  padding: 34px !important;
  box-shadow: var(--kt-shadow-md) !important;
  border: 1px solid var(--kt-border) !important;
  transition: transform var(--kt-t-base) var(--kt-spring), box-shadow var(--kt-t-base) var(--kt-ease) !important;
}
.single-testimonial-02:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--kt-shadow-lg) !important;
  border-color: rgba(0,168,107,0.22) !important;
}
.single-testimonial-02 .testimonial-content p {
  color: var(--kt-text) !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  font-style: italic !important;
}
.single-testimonial-02 .testimonial-content .name {
  color: var(--kt-heading) !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
}
.single-testimonial-02 .testimonial-content .designation {
  color: var(--kt-green) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ----------------------------------------------------------------
   19. Brand Section — Refined Partner Strip
---------------------------------------------------------------- */
.techwix-brand-section-03 {
  background: var(--kt-off-white) !important;
  border-top: 1px solid var(--kt-border) !important;
  border-bottom: 1px solid var(--kt-border) !important;
}
.single-brand img {
  filter: grayscale(100%) opacity(0.42) !important;
  max-height: 38px !important;
  object-fit: contain !important;
  transition: filter var(--kt-t-base) var(--kt-ease), transform var(--kt-t-base) var(--kt-ease) !important;
}
.single-brand:hover img {
  filter: grayscale(0%) opacity(1) !important;
  transform: scale(1.07) !important;
}

/* ----------------------------------------------------------------
   20. Team Cards — Premium
---------------------------------------------------------------- */
.single-team {
  border-radius: var(--kt-r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--kt-shadow-sm) !important;
  border: 1px solid var(--kt-border) !important;
  transition: transform var(--kt-t-base) var(--kt-spring), box-shadow var(--kt-t-base) var(--kt-ease) !important;
  background: #fff !important;
}
.single-team:hover {
  transform: translateY(-7px) !important;
  box-shadow: var(--kt-shadow-xl) !important;
}
.single-team .team-img img { transition: transform 0.55s var(--kt-ease) !important; }
.single-team:hover .team-img img { transform: scale(1.05) !important; }
.single-team .team-content { padding: 20px 22px !important; }
.single-team .team-content .name a {
  color: var(--kt-heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  transition: color var(--kt-t-fast) var(--kt-ease) !important;
}
.single-team .team-content .name a:hover { color: var(--kt-green) !important; }
.single-team .team-content .designation {
  color: var(--kt-green) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.team-social .social { display: flex; gap: 7px; margin-top: 12px; }
.team-social .social li a {
  width: 30px; height: 30px;
  background: var(--kt-light-bg) !important;
  border-radius: var(--kt-r-sm) !important;
  display: flex !important;
  align-items: center; justify-content: center;
  color: var(--kt-text-muted) !important;
  font-size: 12px !important;
  transition: background var(--kt-t-fast) var(--kt-spring), color var(--kt-t-fast) var(--kt-ease), transform var(--kt-t-fast) var(--kt-spring) !important;
}
.team-social .social li a:hover {
  background: var(--kt-green) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

/* ----------------------------------------------------------------
   21. Blog Cards — Premium
---------------------------------------------------------------- */
.single-blog {
  border-radius: var(--kt-r-lg) !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: var(--kt-shadow-sm) !important;
  border: 1px solid var(--kt-border) !important;
  transition: transform var(--kt-t-base) var(--kt-spring), box-shadow var(--kt-t-base) var(--kt-ease) !important;
}
.single-blog:hover {
  transform: translateY(-7px) !important;
  box-shadow: var(--kt-shadow-xl) !important;
  border-color: rgba(0,168,107,0.22) !important;
}
.single-blog .blog-image img { transition: transform 0.55s var(--kt-ease) !important; }
.single-blog:hover .blog-image img { transform: scale(1.06) !important; }
.single-blog .blog-image .top-meta .date {
  background: var(--kt-grad-primary) !important;
  border-radius: var(--kt-r-md) !important;
}
.single-blog .blog-content { padding: 22px !important; }
.single-blog .blog-content .title a {
  color: var(--kt-heading) !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  transition: color var(--kt-t-fast) var(--kt-ease) !important;
}
.single-blog .blog-content .title a:hover { color: var(--kt-green) !important; }
.blog-btn-link {
  color: var(--kt-green) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color var(--kt-t-fast) var(--kt-ease), gap var(--kt-t-fast) var(--kt-ease) !important;
}
.blog-btn-link:hover { color: var(--kt-blue) !important; gap: 10px !important; }

/* ----------------------------------------------------------------
   22. Page Banner — Immersive Header
---------------------------------------------------------------- */
.page-banner-section {
  min-height: 560px !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 90px !important;
}
@media only screen and (max-width: 1199px) {
  .page-banner-section { min-height: 460px !important; }
}
@media only screen and (max-width: 991px) {
  .page-banner-section { min-height: 380px !important; }
}
.page-banner-section::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,12,41,0.83) 0%, rgba(8,106,216,0.58) 100%);
  z-index: 1;
}
.page-banner-section .container { position: relative; z-index: 2; }
.page-banner-section > .shape-1,
.page-banner-section > .shape-2,
.page-banner-section > .shape-3,
.page-banner-section > .shape-4 { opacity: 0.07 !important; }

.page-banner .title {
  color: #fff !important;
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 3px 20px rgba(0,0,0,0.20) !important;
}
@media only screen and (max-width: 767px) {
  .page-banner .title { font-size: 30px !important; }
  .page-banner-section { min-height: 260px !important; }
}
.page-banner .breadcrumb { background: none !important; padding: 0 !important; margin-top: 12px !important; }
.page-banner .breadcrumb-item a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 13.5px !important;
  transition: color var(--kt-t-fast) var(--kt-ease) !important;
}
.page-banner .breadcrumb-item a:hover { color: var(--kt-green-light) !important; }
.page-banner .breadcrumb-item.active {
  color: var(--kt-green-light) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}
.page-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.35) !important; }

/* ----------------------------------------------------------------
   23. Contact Form — Premium Inputs
---------------------------------------------------------------- */
.contact-info-section { background: var(--kt-off-white) !important; }
.single-contact-info {
  border-radius: var(--kt-r-lg) !important;
  padding: 38px 22px !important;
  background: #fff !important;
  border: 1px solid var(--kt-border) !important;
  box-shadow: var(--kt-shadow-sm) !important;
  transition: transform var(--kt-t-base) var(--kt-spring), box-shadow var(--kt-t-base) var(--kt-ease) !important;
}
.single-contact-info:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--kt-shadow-lg) !important;
  border-color: rgba(0,168,107,0.28) !important;
}
.single-contact-info .info-icon {
  width: 70px !important; height: 70px !important;
  background: linear-gradient(135deg, rgba(8,106,216,0.08) 0%, rgba(0,168,107,0.08) 100%) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 18px !important;
  border: 1px solid rgba(0,168,107,0.15) !important;
  transition: var(--kt-t-base) var(--kt-ease) !important;
}
.single-contact-info:hover .info-icon {
  background: var(--kt-grad-primary) !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: 17px !important;
  font-weight: 700 !important;
  color: var(--kt-heading) !important;
  margin-bottom: 6px !important;
}
.single-contact-info .info-content p {
  color: var(--kt-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.contact-form-wrap {
  background: #fff !important;
  border-radius: var(--kt-r-xl) !important;
  padding: 48px !important;
  box-shadow: var(--kt-shadow-xl) !important;
  border: 1px solid var(--kt-border) !important;
}
@media only screen and (max-width: 767px) {
  .contact-form-wrap { padding: 30px 20px !important; }
}
.contact-form-wrap .heading-wrap .sub-title {
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  color: var(--kt-green) !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.contact-form-wrap .heading-wrap .sub-title::before,
.contact-form-wrap .heading-wrap .sub-title::after {
  content: '' !important;
  display: inline-block !important;
  width: 22px !important;
  height: 2px !important;
  background: var(--kt-grad-primary) !important;
  border-radius: var(--kt-r-pill) !important;
}
.contact-form-wrap .heading-wrap .title {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--kt-heading) !important;
  margin-top: 10px !important;
}
.single-form input,
.single-form textarea {
  border: 1.5px solid var(--kt-border) !important;
  border-radius: var(--kt-r-md) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  color: var(--kt-text) !important;
  background: var(--kt-off-white) !important;
  height: auto !important;
  line-height: 1.55 !important;
  margin-bottom: 14px !important;
  transition: border-color var(--kt-t-fast) var(--kt-ease), box-shadow var(--kt-t-fast) var(--kt-ease) !important;
}
.single-form input:focus,
.single-form textarea:focus {
  border-color: var(--kt-green) !important;
  box-shadow: var(--kt-glow-green) !important;
  background: #fff !important;
  outline: none !important;
}
.form-btn .btn { width: 100% !important; }

/* ----------------------------------------------------------------
   24. Footer — Premium Dark Depth
---------------------------------------------------------------- */
.footer-section-03 {
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
}
.footer-section-03::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(170deg, rgba(0,12,41,0.97) 0%, rgba(0,12,41,0.99) 100%);
}
.footer-section-03 > * { position: relative; z-index: 1; }
.footer-widget-about .footer-logo img { width: 140px !important; margin-bottom: 18px !important; }
.footer-widget-about > p,
.footer-widget-about p i {
  color: rgba(255,255,255,0.60) !important;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
}
.footer-social .social { display: flex; gap: 9px; margin-top: 20px; }
.footer-social .social li a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: var(--kt-r-md) !important;
  display: flex !important; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65) !important;
  font-size: 13px !important;
  transition: background var(--kt-t-fast) var(--kt-spring), color var(--kt-t-fast) var(--kt-ease), transform var(--kt-t-fast) var(--kt-spring) !important;
}
.footer-social .social li a:hover {
  background: var(--kt-green) !important;
  border-color: var(--kt-green) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

.footer-widget-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 22px !important;
  padding-bottom: 14px !important;
  position: relative !important;
}
.footer-widget-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--kt-grad-primary);
  border-radius: var(--kt-r-pill);
}

.widget-link .link li { margin-bottom: 9px !important; }
.widget-link .link li a {
  color: rgba(255,255,255,0.58) !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  transition: color var(--kt-t-fast) var(--kt-ease), padding-left var(--kt-t-fast) var(--kt-ease) !important;
}
.widget-link .link li a:hover {
  color: rgba(255,255,255,0.90) !important;
  padding-left: 5px !important;
}

.widget-info ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 13px !important;
  margin-bottom: 14px !important;
}
.widget-info .info-icon {
  width: 36px; height: 36px;
  background: rgba(0,168,107,0.12) !important;
  border-radius: var(--kt-r-md) !important;
  display: flex !important; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(0,168,107,0.18) !important;
}
.widget-info .info-icon i { color: var(--kt-green) !important; font-size: 14px !important; }
.widget-info .info-text span,
.widget-info .info-text a {
  color: rgba(255,255,255,0.62) !important;
  font-size: 13.5px !important;
  transition: color var(--kt-t-fast) var(--kt-ease) !important;
}
.widget-info .info-text a:hover { color: var(--kt-green-light) !important; }

.footer-copyright-area {
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  margin-top: 40px !important;
  padding: 22px 0 !important;
}
.copyright-text p {
  color: rgba(255,255,255,0.40) !important;
  font-size: 13px !important;
}

/* ----------------------------------------------------------------
   25. Back-to-Top — Premium Styled
---------------------------------------------------------------- */
.progress-wrap {
  width: 46px !important; height: 46px !important;
  bottom: 30px !important; right: 30px !important;
  background: var(--kt-grad-primary) !important;
  border: none !important;
  box-shadow: var(--kt-shadow-lg) !important;
  border-radius: 50% !important;
  transition: transform var(--kt-t-base) var(--kt-spring), box-shadow var(--kt-t-base) var(--kt-ease) !important;
}
.progress-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--kt-shadow-xl) !important;
}
.progress-wrap::after { color: #fff !important; font-size: 16px !important; }
.progress-wrap svg path { stroke: rgba(255,255,255,0.30) !important; }

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

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

/* ----------------------------------------------------------------
   28. Hero section padding for non-hero top pages (page-banner)
     The fixed header is ~72px tall; page-banner adds own padding.
---------------------------------------------------------------- */
.main-wrapper > .section:first-child:not(.techwix-hero-section-03):not(.page-banner-section) {
  padding-top: 90px !important;
}

/* ----------------------------------------------------------------
   29. Smooth image rendering
---------------------------------------------------------------- */
img { image-rendering: -webkit-optimize-contrast; }

/* ----------------------------------------------------------------
   30. Sub-menu animation polish
---------------------------------------------------------------- */
.header-menu .main-menu li .sub-menu li:hover > a::after { display: none !important; }

/* ----------------------------------------------------------------
   31. Service detail page hero compensation
---------------------------------------------------------------- */
.techwix-service-section { padding-top: 50px; }

/* ----------------------------------------------------------------
   32. Form validation color polish
---------------------------------------------------------------- */
.field-validation-error { color: #ef4444 !important; font-size: 12px !important; }

/* ================================================================
   PREMIUM ENHANCEMENT — ROUND 2
   Additional components, polish & UX depth
   ================================================================ */

/* ----------------------------------------------------------------
   33. Scroll Progress Bar (injected by premium.js)
---------------------------------------------------------------- */
#kt-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--kt-grad-primary);
  z-index: 999999;
  border-radius: 0 var(--kt-r-pill) var(--kt-r-pill) 0;
  box-shadow: 0 0 10px rgba(0,168,107,0.55);
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ----------------------------------------------------------------
   34. Hero Scroll-Down Indicator (injected by premium.js)
---------------------------------------------------------------- */
.kt-scroll-down {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--kt-t-base) var(--kt-ease);
}
.kt-scroll-down:hover { opacity: 1; }
.kt-scroll-down .kt-sd-line {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.65));
  animation: kt-sd-line 1.8s ease-in-out infinite;
}
.kt-scroll-down .kt-sd-chevron {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid rgba(255,255,255,0.65);
  border-bottom: 1.5px solid rgba(255,255,255,0.65);
  transform: rotate(45deg);
  animation: kt-sd-chevron 1.8s ease-in-out infinite;
}
@keyframes kt-sd-line {
  0%, 100% { opacity: 0.25; transform: scaleY(0.6); }
  50%       { opacity: 0.85; transform: scaleY(1); }
}
@keyframes kt-sd-chevron {
  0%, 100% { opacity: 0.25; transform: rotate(45deg) translateY(-3px); }
  50%       { opacity: 0.90; transform: rotate(45deg) translateY(3px); }
}
@media (max-width: 767px) { .kt-scroll-down { bottom: 24px; } }

/* ----------------------------------------------------------------
   35. Section Title — Centred variant
---------------------------------------------------------------- */
.section-title.text-center .sub-title {
  justify-content: center !important;
}
/* Remove left-bar for centred sub-titles — looks odd centred */
.section-title.text-center .sub-title::before { display: none !important; }
/* Small gradient rule below the title when centred */
.section-title.text-center .title {
  display: block;
}
.section-title.text-center .title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--kt-grad-primary);
  border-radius: var(--kt-r-pill);
  margin: 14px auto 0;
}

/* ----------------------------------------------------------------
   36. Section spacing normalisation
---------------------------------------------------------------- */
.section-padding    { padding: 100px 0 !important; }
.section-padding-02 { padding: 80px 0  !important; }

/* ----------------------------------------------------------------
   37. Pricing Cards — Premium
---------------------------------------------------------------- */
.techwix-pricing-section { background: var(--kt-off-white) !important; }

.single-pricing {
  background: #ffffff !important;
  border-radius: var(--kt-r-xl) !important;
  border: 1px solid var(--kt-border) !important;
  box-shadow: var(--kt-shadow-sm) !important;
  padding: 44px 36px !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform    var(--kt-t-base) var(--kt-spring),
    box-shadow   var(--kt-t-base) var(--kt-ease),
    border-color var(--kt-t-base) var(--kt-ease) !important;
}
/* Top accent stripe */
.single-pricing::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--kt-border);
  transition: background var(--kt-t-base) var(--kt-ease);
}
.single-pricing:hover,
.single-pricing.active {
  transform: translateY(-12px) !important;
  box-shadow: var(--kt-shadow-xl) !important;
  border-color: rgba(0,168,107,0.28) !important;
}
.single-pricing:hover::before,
.single-pricing.active::before { background: var(--kt-grad-primary) !important; }
.single-pricing.active { border-color: rgba(8,106,216,0.25) !important; }

/* "Most popular" badge */
.single-pricing.active::after {
  content: 'Most Popular';
  position: absolute;
  top: 18px; right: -28px;
  background: var(--kt-grad-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 38px;
  transform: rotate(35deg);
  font-family: "Barlow", sans-serif;
}

.pricing-badge { text-align: center; margin-bottom: 24px !important; }
.pricing-badge .title {
  display: inline-block !important;
  background: var(--kt-light-bg) !important;
  color: var(--kt-text-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(--kt-r-pill) !important;
  font-family: "Barlow", sans-serif !important;
  transition: background var(--kt-t-base) var(--kt-ease), color var(--kt-t-base) var(--kt-ease) !important;
}
.single-pricing:hover .pricing-badge .title,
.single-pricing.active .pricing-badge .title {
  background: var(--kt-grad-primary) !important;
  color: #fff !important;
}

.pricing-price {
  text-align: center !important;
  margin-bottom: 28px !important;
  padding: 20px 0 !important;
  border-top: 1px solid var(--kt-border) !important;
  border-bottom: 1px solid var(--kt-border) !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
}
.pricing-price .currency {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--kt-heading) !important;
  line-height: 1 !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(--kt-grad-primary) !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(--kt-text-muted) !important;
  background: none !important;
  letter-spacing: 0.02em !important;
}

.pricing-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
}
.pricing-list li {
  padding: 11px 0 !important;
  font-size: 14px !important;
  color: var(--kt-text) !important;
  border-bottom: 1px solid var(--kt-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.5 !important;
}
.pricing-list li:last-child { border-bottom: none !important; }
.pricing-list li::before {
  content: '' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px; height: 18px;
  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;
  flex-shrink: 0 !important;
}

.pricing-btn .btn {
  width: 100% !important;
  justify-content: center !important;
}

/* ----------------------------------------------------------------
   38. Service Detail — Sidebar Navigation
---------------------------------------------------------------- */
.service-navigation {
  border-radius: var(--kt-r-lg) !important;
  border: 1px solid var(--kt-border) !important;
  box-shadow: var(--kt-shadow-md) !important;
  padding: 28px !important;
  background: #fff !important;
  position: sticky !important;
  top: 100px !important;
}
.service-navigation .widget-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--kt-heading) !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--kt-border) !important;
  letter-spacing: -0.01em !important;
}
.service-nav-item { margin-bottom: 8px !important; }
.service-nav-link {
  background: var(--kt-off-white) !important;
  border-radius: var(--kt-r-md) !important;
  border: 1px solid var(--kt-border) !important;
  color: var(--kt-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 13px 18px !important;
  transition:
    all var(--kt-t-base) var(--kt-spring) !important;
}
.service-nav-link:hover,
.service-nav-link.active {
  background: var(--kt-grad-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: translateX(5px) !important;
  box-shadow: var(--kt-shadow-md) !important;
}
.service-nav-link:hover i,
.service-nav-link.active i { color: rgba(255,255,255,0.85) !important; }

/* ----------------------------------------------------------------
   39. Testimonial — Avatar & Quote treatment
---------------------------------------------------------------- */
.single-testimonial-02 {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.testimonial-thumb {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 3px solid rgba(0,168,107,0.25) !important;
  box-shadow: var(--kt-shadow-sm) !important;
  flex-shrink: 0 !important;
}
.testimonial-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Quote icon treatment */
.single-testimonial-02 .testimonial-content > img {
  width: 36px !important;
  height: auto !important;
  opacity: 0.35 !important;
  margin-bottom: 14px !important;
  filter: hue-rotate(130deg) saturate(3) !important;
}
.single-testimonial-02 .testimonial-content p {
  position: relative;
  padding-left: 0;
}

/* ----------------------------------------------------------------
   40. Blog Meta — author/date bar
---------------------------------------------------------------- */
.blog-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}
.blog-meta span {
  font-size: 12.5px !important;
  color: var(--kt-text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.blog-meta span i { color: var(--kt-green) !important; font-size: 11px !important; }
.blog-meta span a {
  color: var(--kt-text-muted) !important;
  transition: color var(--kt-t-fast) var(--kt-ease) !important;
}
.blog-meta span a:hover { color: var(--kt-green) !important; }

/* ----------------------------------------------------------------
   41. Form label premium treatment
---------------------------------------------------------------- */
.single-form label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--kt-text-muted) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 7px !important;
}

/* ----------------------------------------------------------------
   42. CTA phone button — readable & premium
---------------------------------------------------------------- */
.cta-btn .btn-white {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}

/* ----------------------------------------------------------------
   43. Section background alternation — visual rhythm
---------------------------------------------------------------- */
.techwix-testimonial-section-02.techwix-testimonial-section-03 {
  background: var(--kt-off-white) !important;
}
.techwix-team-section { background: #ffffff !important; }
.techwix-blog-section { background: var(--kt-off-white) !important; }

/* ----------------------------------------------------------------
   44. Service detail page — content typography
---------------------------------------------------------------- */
.service-details-content h2,
.service-details-content h3,
.service-details-content h4 {
  color: var(--kt-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  margin-bottom: 14px !important;
}
.service-details-content p {
  font-size: 15px !important;
  line-height: 1.82 !important;
  color: var(--kt-text) !important;
  margin-bottom: 18px !important;
}
.service-details-content ul li {
  font-size: 14.5px !important;
  color: var(--kt-text) !important;
  line-height: 1.70 !important;
  margin-bottom: 6px !important;
}
.service-details-content ul li::marker { color: var(--kt-green) !important; }

/* ----------------------------------------------------------------
   45. Policy / Legal pages — body-copy readability
---------------------------------------------------------------- */
.techwix-policy-section h2 {
  font-size: 25px !important;
  font-weight: 700 !important;
  color: var(--kt-heading) !important;
  margin: 36px 0 14px !important;
  letter-spacing: -0.015em !important;
}
.techwix-policy-section p,
.techwix-policy-section li {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--kt-text) !important;
}
.techwix-policy-section a {
  color: var(--kt-green) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ----------------------------------------------------------------
   46. Play button pulse rings
---------------------------------------------------------------- */
.play-btn-02 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.play-btn-02::before,
.play-btn-02::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(0,168,107,0.35);
  animation: kt-pulse 2.2s ease-out infinite;
}
.play-btn-02::before { inset: -10px; }
.play-btn-02::after  { inset: -22px; animation-delay: 0.55s; }
@keyframes kt-pulse {
  0%   { transform: scale(0.92); opacity: 0.75; }
  80%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ----------------------------------------------------------------
   47. Top-level nav items — consistent font size across breakpoints
---------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
  .header-menu .main-menu li a { font-size: 13.5px !important; }
}

/* ----------------------------------------------------------------
   48. Mobile: bottom-safe padding for iOS home indicator
---------------------------------------------------------------- */
@media only screen and (max-width: 575px) {
  .footer-copyright-area { padding-bottom: max(22px, env(safe-area-inset-bottom)) !important; }
}

/* ----------------------------------------------------------------
   49. Reduce-motion — honour OS preference
---------------------------------------------------------------- */
@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;
  }
}

/* ----------------------------------------------------------------
   50. General anchor micro-interaction for body content
---------------------------------------------------------------- */
.service-details-content a:not(.btn),
.techwix-policy-section a:not(.btn) {
  color: var(--kt-green) !important;
  text-underline-offset: 2px !important;
  transition: color var(--kt-t-fast) var(--kt-ease) !important;
}
.service-details-content a:not(.btn):hover,
.techwix-policy-section a:not(.btn):hover {
  color: var(--kt-blue) !important;
}

/* ----------------------------------------------------------------
   51. Section divider — subtle between alternating bg sections
---------------------------------------------------------------- */
.kt-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kt-border), transparent);
}

/* ----------------------------------------------------------------
   52. About section — stat overlay box on image
---------------------------------------------------------------- */
.about-img-wrap { position: relative; display: inline-block; width: 100%; }

.about-experience-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--kt-grad-primary);
  border-radius: var(--kt-r-lg);
  padding: 22px 26px;
  box-shadow: var(--kt-shadow-lg);
  text-align: center;
  min-width: 130px;
}
.about-experience-badge .number {
  display: block;
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-family: "Barlow", sans-serif;
}
.about-experience-badge .label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 5px;
}

/* ----------------------------------------------------------------
   53. Table styles (for policy / blog)
---------------------------------------------------------------- */
.content-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 24px 0;
}
.content-table th {
  background: var(--kt-navy) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  text-align: left !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}
.content-table td {
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--kt-border) !important;
  color: var(--kt-text) !important;
}
.content-table tr:nth-child(even) td { background: var(--kt-off-white) !important; }
.content-table tr:hover td { background: rgba(0,168,107,0.05) !important; }

/* ----------------------------------------------------------------
   54. Notification / alert banners
---------------------------------------------------------------- */
.kt-alert {
  border-radius: var(--kt-r-md);
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid;
  margin-bottom: 16px;
}
.kt-alert-success {
  background: rgba(0,168,107,0.08);
  border-color: rgba(0,168,107,0.30);
  color: var(--kt-green-dark);
}
.kt-alert-error {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.30);
  color: #b91c1c;
}
.kt-alert-info {
  background: rgba(8,106,216,0.08);
  border-color: rgba(8,106,216,0.30);
  color: var(--kt-blue-dark);
}

/* ----------------------------------------------------------------
   55. Contact form success state
---------------------------------------------------------------- */
.contact-form-success {
  text-align: center;
  padding: 40px 20px;
}
.contact-form-success .success-icon {
  width: 70px; height: 70px;
  background: var(--kt-grad-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 28px;
  color: #fff;
}

/* ----------------------------------------------------------------
   56. "Work with us" / choose-us text list items
---------------------------------------------------------------- */
.choose-us-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.80) !important;
  font-size: 14.5px !important;
  line-height: 1.60 !important;
}
.choose-us-list li::before {
  content: '' !important;
  width: 20px; height: 20px;
  background: rgba(0,168,107,0.20) !important;
  border: 1px solid rgba(0,168,107,0.40) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background-image: 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") !important;
  background-size: 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-top: 2px !important;
}