/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: Blocksy Child Theme
Author: CreativeThemes & KanikaDigital
Author URI: https://creativethemes.com
Template: blocksy
Version: 1.4.4
Text Domain: blocksy-child
*/

:root {
  --c: #22d3ee;
  --m: #f472b6;
  --y: #fbbf24;
  --g: #34d399;
  --dark: #06051a;
  --dark2: #0c0a26;
  --glass: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.09);
}

/* Global Dark Theme Overrides */
html,
body,
#main-container,
.site-main,
.entry-content,
.elementor-page,
.elementor {
  background-color: #06051a !important;
  color: #ffffff;
}

/* ══ NAV ══ */
nav#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
	  padding: 22px max(64px, calc((100% - 1320px) / 2 + 16px));
/*   padding: 22px 64px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s ease;
  background: transparent;
  box-sizing: border-box;
}


nav#nav.sc {
  background: rgba(8, 6, 22, 0.95) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
/*   padding: 13px 64px; */
	  padding: 13px max(64px, calc((100% - 1320px) / 2 + 16px));
  border-bottom: 1px solid rgba(34, 211, 238, 0.09);
}

.nlogo-wrap {
  display: flex;
  align-items: center;
}

.nlogo-img {
  height: 42px;
  width: auto;
  display: block;
  transition: height 0.4s ease;
}

nav#nav.sc .nlogo-img {
  height: 34px;
}

.nlinks {
  display: flex !important;
  gap: 36px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

.nlinks li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nlinks a,
.nlinks li a {
  color: rgba(255, 255, 255, 0.5) !important;
  text-decoration: none !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  transition: color 0.3s ease !important;
  position: relative !important;
  display: inline-block !important;
}

.nlinks a::after,
.nlinks li a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 0 !important;
  height: 1px !important;
  background: var(--c) !important;
  transition: width 0.3s ease !important;
}

.nlinks a:hover,
.nlinks li a:hover {
  color: var(--c) !important;
}

.nlinks a:hover::after,
.nlinks li a:hover::after {
  width: 100% !important;
}

.ncta {
  padding: 10px 26px;
  background: linear-gradient(135deg, var(--c), #6d28d9);
  border: none;
  border-radius: 30px;
  color: #000000 !important;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.5px;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.38);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ncta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 36px rgba(34, 211, 238, 0.6);
  color: #000000 !important;
}

/* Mobile Toggle */
.n-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1000;
}

.n-mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.n-mobile-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.n-mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}

.n-mobile-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Drawer */
.n-mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background: rgba(8, 6, 22, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 998;
  padding: 100px 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-left: 1px solid rgba(34, 211, 238, 0.15);
  box-sizing: border-box;
}

.n-mobile-drawer.active {
  right: 0;
}

.nmobile-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nmobile-links a {
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nmobile-links a:hover {
  color: var(--c);
}

.nmobile-cta {
  margin-top: 10px;
  text-align: center;
  width: 100%;
}

body.n-drawer-open {
  overflow: hidden;
}

/* Mobile Responsive Adjustments */
@media (max-width: 920px) {
  nav#nav {
    padding: 13px 20px;
  }

  nav#nav.sc {
    padding: 11px 20px;
  }

  .nlinks,
  nav#nav>.ncta {
    display: none !important;
  }

  .n-mobile-toggle {
    display: flex;
  }
}

/* Hide stray accessibility buttons, close tooltips, or toggle close overlays */
.skip-link,
.ct-toggle-close,
.ct-search-close,
.ct-offcanvas-close,
[aria-label="Close"],
.close-button,
.ct-close,
.ct-icon-close,
[class*="toggle-close"] {
  display: none !important;
}

/* ═══════ HERO SECTION STYLES ═══════ */
section#hero,
#hero.hero-root,
#hero {
  position: relative !important;
  min-height: 100vh !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse 80% 80% at 60% 40%, #1a0a38 0%, #0a0620 50%, #06051a 100%) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force Elementor Container & .e-con-inner into 2-Column Grid */
#hero .hero-grid > .e-con-inner,
#hero .hero-grid.e-con,
#hero .hero-grid,
.hero-grid {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr !important;
  gap: 0 !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1320px !important;
  min-height: 100vh !important;
  padding: 0 64px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  flex-direction: row !important;
}

/* NAV Admin Bar Fix */
body.admin-bar nav#nav {
  top: 32px !important;
}

/* LEFT COLUMN - 50% */
body.admin-bar #hero .hero-left-text,
body.admin-bar .hero-left-text {
  padding-top: 132px !important;
}

#hero .hero-left-text.e-con,
#hero .hero-left-text,
.hero-left-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 100px !important;
  padding-bottom: 60px !important;
  padding-right: 40px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-column: 1 / 2 !important;
  box-sizing: border-box !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

#hero .hero-left-text>.elementor-widget,
#hero .hero-left-text>div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.htitle {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: -1.5px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.htitle .row {
  display: block !important;
  overflow: visible !important;
  padding-bottom: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

.htitle .r1 {
  font-size: clamp(2.4rem, 5.1vw, 5.1rem) !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

.htitle .r2,
.htitle .r3 {
  font-size: clamp(2.4rem, 5.1vw, 5.1rem) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  background: linear-gradient(135deg, var(--c) 0%, var(--m) 50%, var(--y) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% !important;
  animation: gsh 5s ease infinite !important;
}

.htitle .r2 .char,
.htitle .r3 .char {
  background: linear-gradient(135deg, var(--c) 0%, var(--m) 50%, var(--y) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% !important;
  animation: gsh 5s ease infinite !important;
}

.char {
  display: inline-block !important;
  opacity: 0;
  transform: translateY(110%) scale(0.85);
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.3s, -webkit-text-fill-color 0.3s, text-shadow 0.3s !important;
}

.char.on {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.char.on:hover {
  transform: translateY(-8px) scale(1.15) !important;
  color: var(--c) !important;
  -webkit-text-fill-color: var(--c) !important;
  text-shadow: 0 0 15px rgba(34, 211, 238, 0.6) !important;
  cursor: default !important;
}

@keyframes aUp {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gsh {

  0%,
  100% {
    background-position: 0%;
  }

  50% {
    background-position: 100%;
  }
}

.hsub {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1rem !important;
  color: rgba(255, 255, 255, 0.48) !important;
  line-height: 1.82 !important;
  width: 100% !important;
  max-width: 480px !important;
  margin-bottom: 36px !important;
  opacity: 0;
  animation: aUp 0.8s 0.85s forwards !important;
}

.hbtns {
  display: flex !important;
  gap: 13px !important;
  flex-wrap: wrap !important;
  margin-bottom: 48px !important;
  opacity: 0;
  animation: aUp 0.8s 1.05s forwards !important;
}

.bpri {
  padding: 14px 38px !important;
  background: linear-gradient(135deg, var(--c), #6d28d9) !important;
  border: none !important;
  border-radius: 50px !important;
  color: #000000 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 0 38px rgba(34, 211, 238, 0.38) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  letter-spacing: 0.3px !important;
}

.bpri::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent) !important;
  transition: 0.55s !important;
}

.bpri:hover::before {
  left: 100% !important;
}

.bpri:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 48px rgba(34, 211, 238, 0.52) !important;
  color: #000000 !important;
}

.bsec {
  padding: 14px 38px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.35s ease !important;
}

.bsec:hover {
  border-color: var(--c) !important;
  background: rgba(34, 211, 238, 0.06) !important;
  transform: translateY(-3px) !important;
  color: var(--c) !important;
}

/* STATS CARD COMPACT FIT (NOT FULL WIDTH) */
.hstats {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: max-content !important;
  max-width: 100% !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  opacity: 0;
  animation: aUp 0.8s 1.3s forwards !important;
  margin-top: 0 !important;
}

.hst {
  padding: 16px 28px !important;
  text-align: center !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

.hst+.hst::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 25% !important;
  height: 50% !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.hst-n {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: var(--c) !important;
}

.hst:nth-child(2) .hst-n {
  color: var(--m) !important;
}

.hst:nth-child(3) .hst-n {
  color: var(--y) !important;
}

.hst-l {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.65rem !important;
  color: rgba(255, 255, 255, 0.38) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

/* RIGHT COLUMN - 50% */
#hero .hero-right-vis.e-con,
#hero .hero-right-vis,
.hero-right-vis,
.hero-right-vis *,
.hero-right-vis .e-con,
.hero-right-vis .elementor-widget,
.hero-right-vis .elementor-widget-container,
.hero-right-vis .elementor-widget-html {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#hero .hero-right-vis {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  height: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-column: 2 / 3 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#hero .hero-right-vis > .elementor-widget,
#hero .hero-right-vis > .elementor-widget-container,
#hero .hero-right-vis > div {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: visible !important;
}

/* ═══════ STANDALONE GLOBE CONTAINER & CANVAS ═══════ */
.globe-wrapper,
.kd-globe {
  position: relative !important;
  width: 100% !important;
  height: 620px !important;
  max-height: 620px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#kd-hero-globe,
.globe-wrapper canvas,
.kd-globe canvas {
  width: min(600px, 100%) !important;
  height: min(600px, 100%) !important;
  max-width: 600px !important;
  max-height: 600px !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  z-index: 1 !important;
}

.cv-labels,
.kd-globe-labels {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  z-index: 3 !important;
}

.cvl,
.kd-cvl {
  position: absolute !important;
  padding: 6px 16px !important;
  border-radius: 30px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: cvFloat 3.2s ease-in-out infinite !important;
}

.cvl-c,
.kd-cyan {
  top: 16% !important;
  left: 2% !important;
  color: #22d3ee !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
  background: rgba(34, 211, 238, 0.08) !important;
}

.cvl-m,
.kd-magenta {
  top: 50% !important;
  right: -2% !important;
  color: #f472b6 !important;
  border: 1px solid rgba(244, 114, 182, 0.3) !important;
  background: rgba(244, 114, 182, 0.08) !important;
  animation-delay: 0.9s !important;
}

.cvl-y,
.kd-yellow {
  bottom: 16% !important;
  left: 4% !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  background: rgba(251, 191, 36, 0.08) !important;
  animation-delay: 1.8s !important;
}

.cvl-k,
.kd-black {
  top: 24% !important;
  right: 2% !important;
  color: #aaaaff !important;
  border: 1px solid rgba(170, 170, 255, 0.3) !important;
  background: rgba(170, 170, 255, 0.07) !important;
  animation-delay: 2.7s !important;
}

@keyframes cvFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.scue {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  color: rgba(255, 255, 255, 0.25) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

.sline {
  width: 1px !important;
  height: 42px !important;
  background: linear-gradient(to bottom, var(--c), transparent) !important;
  animation: sl 2.2s ease-in-out infinite !important;
}

@keyframes sl {

  0%,
  100% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Mobile Responsive Hero */
@media (max-width: 920px) {
  #hero {
    min-height: auto !important;
  }

  #hero .hero-grid,
  .hero-grid {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
    padding: 0 20px !important;
  }

  #hero .hero-left-text,
  .hero-left-text {
    order: 1 !important;
    padding-right: 0 !important;
    padding-top: 100px !important;
    padding-bottom: 32px !important;
    align-items: center !important;
    text-align: center !important;
  }

  #hero .hero-right-vis,
  .hero-right-vis {
    order: 2 !important;
    min-height: 340px !important;
  }

  .htitle .r1,
  .htitle .r2 {
    font-size: clamp(2.4rem, 10vw, 4.2rem) !important;
  }

  .hbtns {
    justify-content: center !important;
  }

  .scue {
    left: 50% !important;
  }
}

/* ═══════ STATS SECTION STYLES ═══════ */
.kd-stats-section,
section#stats,
#stats {
  padding: 80px 64px !important;
  background: #0c0a26 !important;
  position: relative !important;
  overflow: hidden !important;
}

#stats::before,
.kd-stats-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #22d3ee, #f472b6, transparent) !important;
  z-index: 2 !important;
  display: block !important;
}

.sc2 {
  padding: 38px 20px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 20px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.45s ease, box-shadow 0.45s ease !important;
  box-sizing: border-box !important;
}

.sc2::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  z-index: 10 !important;
  display: block !important;
}

.sc2:nth-child(1)::before, .sc2.d1::before { background: #22d3ee !important; }
.sc2:nth-child(2)::before, .sc2.d2::before { background: #f472b6 !important; }
.sc2:nth-child(3)::before, .sc2.d3::before { background: #fbbf24 !important; }
.sc2:nth-child(4)::before, .sc2.d4::before { background: #34d399 !important; }

.sc2:hover {
  transform: translateY(-12px) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important;
}

.snum,
.snum .elementor-heading-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 2.9rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-bottom: 9px !important;
}

.sc2.d1 .snum, .sc2.d1 .snum .elementor-heading-title, .sc2:nth-child(1) .snum { color: #22d3ee !important; }
.sc2.d2 .snum, .sc2.d2 .snum .elementor-heading-title, .sc2:nth-child(2) .snum { color: #f472b6 !important; }
.sc2.d3 .snum, .sc2.d3 .snum .elementor-heading-title, .sc2:nth-child(3) .snum { color: #fbbf24 !important; }
.sc2.d4 .snum, .sc2.d4 .snum .elementor-heading-title, .sc2:nth-child(4) .snum { color: #34d399 !important; }

.slbl,
.slbl .elementor-heading-title {
  font-family: 'Space Grotesk', sans-serif !important;
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.5px !important;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT / OUR STORY — COMPLETE LAYOUT FIX
   ═══════════════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────────────── */
.kd-about-section {
  width: 100% !important;
  padding: 118px 64px !important;
  background: #06051a !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ── Canvas ink-wave background ──────────────────────────────── */
#kd-about-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
}

/* ── Elementor direct children sit above canvas ──────────────── */
.kd-about-section > .e-con-inner,
.kd-about-section > .e-con {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Inner: TRUE 2-column grid, 1200px centered ──────────────── */
/* Override Elementor flex/boxed completely */
.kd-about-inner,
.kd-about-inner.e-con,
.kd-about-inner > .e-con-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 88px !important;
  align-items: center !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  flex-direction: unset !important;
}

/* ── Left column ─────────────────────────────────────────────── */
.kd-about-left,
.kd-about-left.e-con {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;          /* cancel any flex sizing from Elementor */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  position: static !important;   /* never absolute */
  left: auto !important;
  transform: none !important;
}

/* ── Right column ────────────────────────────────────────────── */
.kd-about-right,
.kd-about-right.e-con {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  position: static !important;
  transform: none !important;
}

/* ── Visual container (420px, relative) ─────────────────────── */
.kd-about-visual,
.kd-about-visual.e-con {
  position: relative !important;
  width: 100% !important;
  height: 420px !important;
  min-height: 420px !important;
  overflow: visible !important;   /* allow badges to peek outside */
  display: block !important;
  flex-direction: unset !important;
}

/* ── Glass panel (absolute fill, z-index 2) ──────────────────── */
.kd-about-visual > .e-con:first-child,
.kd-about-visual > .e-con[style*="position: absolute"],
.kd-about-visual > .e-con[style*="position:absolute"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
}

/* ── Gradient heading text ("Printing Excellence") ───────────── */
.kd-gc,
.kd-about-section .kd-gc {
  background: linear-gradient(135deg, #22D3EE 0%, #F472B6 60%, #FBBF24 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── "19" heading gradient ───────────────────────────────────── */
.kd-byr .elementor-heading-title {
  background: linear-gradient(135deg, #22D3EE, #F472B6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 7rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── Eyebrow row ("── OUR STORY") ───────────────────────────── */
/* The container holding divider + OUR STORY text */
.kd-about-left > .e-con:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  max-width: 100% !important;
  padding-bottom: 16px !important;
  flex-wrap: nowrap !important;
}

/* Divider inside eyebrow — the 24px cyan line */
.kd-about-left > .e-con:first-child .elementor-divider {
  width: 24px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* "OUR STORY" heading inside eyebrow */
.kd-about-left > .e-con:first-child .elementor-heading-title {
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Main heading ("19 Years of / Printing Excellence") ──────── */
.kd-about-left > .elementor-widget-heading {
  width: 100% !important;
  text-align: left !important;
}

/* ── Capability grid ─────────────────────────────────────────── */
.kd-about-capabilities,
.kd-about-capabilities.e-con {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 11px !important;
  margin-top: 28px !important;
  width: 100% !important;
  flex-direction: unset !important;
}

.kd-about-capabilities > .e-con {
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 9px !important;
}

/* ── Floating badges ─────────────────────────────────────────── */
.kd-about-badge,
.kd-about-badge.e-con {
  position: absolute !important;
  z-index: 20 !important;
  width: auto !important;
  white-space: nowrap !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.kd-about-badge-uv {
  top: 10% !important;
  left: -20px !important;
  right: auto !important;
  animation: fy 3.2s ease-in-out 0s infinite !important;
}

.kd-about-badge-size {
  top: 44% !important;
  right: -20px !important;
  left: auto !important;
  animation: fy 3.2s ease-in-out 1.1s infinite !important;
}

.kd-about-badge-warranty {
  bottom: 12% !important;
  left: 10px !important;
  right: auto !important;
  animation: fy 3.2s ease-in-out 2.2s infinite !important;
}

/* ── Decorative floating images ──────────────────────────────── */
.kd-about-image-1,
.kd-about-image-1.elementor-widget {
  position: absolute !important;
  top: -30px !important;
  right: -20px !important;
  left: auto !important;
  bottom: auto !important;
  width: 170px !important;
  height: 120px !important;
  z-index: 1 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
  opacity: 0.45 !important;
  transform: rotate(6deg) !important;
  animation: acFloat1 5s ease-in-out infinite !important;
}
.kd-about-image-1 img,
.kd-about-image-1 .elementor-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}

.kd-about-image-2,
.kd-about-image-2.elementor-widget {
  position: absolute !important;
  bottom: -20px !important;
  left: -35px !important;
  top: auto !important;
  right: auto !important;
  width: 190px !important;
  height: 135px !important;
  z-index: 1 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
  opacity: 0.45 !important;
  transform: rotate(-8deg) !important;
  animation: acFloat2 5.5s ease-in-out infinite !important;
}
.kd-about-image-2 img,
.kd-about-image-2 .elementor-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}

/* ── Floating keyframes ──────────────────────────────────────── */
@keyframes fy {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-11px); }
}

@keyframes acFloat1 {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50%       { transform: rotate(4deg) translateY(-8px); }
}

@keyframes acFloat2 {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%       { transform: rotate(-6deg) translateY(8px); }
}

/* ── Legacy .stag eyebrow ────────────────────────────────────── */
.stag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #22d3ee !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

.stag::before {
  content: '' !important;
  width: 24px !important;
  height: 1px !important;
  background: #22d3ee !important;
  flex-shrink: 0 !important;
}





.stit,
.stit h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1.9rem, 4.5vw, 3.3rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -1.5px !important;
  margin-bottom: 16px !important;
  color: #ffffff !important;
}

.gc {
  background: linear-gradient(135deg, var(--c, #22d3ee) 0%, var(--m, #f472b6) 60%, var(--y, #fbbf24) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.atxt p {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  line-height: 1.86 !important;
  font-size: 0.95rem !important;
  margin-bottom: 20px !important;
  max-width: 600px !important;
}

.fgrid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 11px !important;
  margin-top: 28px !important;
}

.fi {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.86rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: color 0.3s ease !important;
}

.fi:hover {
  color: var(--c, #22d3ee) !important;
}

.fd {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.avis {
  position: relative !important;
  min-height: 420px !important;
  width: 100% !important;
}

.about-collage {
  position: relative !important;
  width: 100% !important;
  height: 300px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  gap: 20px !important;
}

.ac-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex: 1 !important;
  height: 100% !important;
  position: relative !important;
}

.ac-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}

.ac-card:hover img {
  transform: scale(1.06) !important;
}

.c3d {
  width: 100% !important;
  padding: 30px 20px !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.07), rgba(244, 114, 182, 0.05)) !important;
  border: 1px solid rgba(34, 211, 238, 0.15) !important;
  border-radius: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.5s ease, box-shadow 0.5s ease !important;
}

.c3d::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(34, 211, 238, 0.1), transparent 60%) !important;
}

.byr {
  font-family: 'Inter', sans-serif !important;
  font-size: 5rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--c, #22d3ee), var(--m, #f472b6)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1 !important;
}

.yrs {
  color: rgba(255, 255, 255, 0.32) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  margin-top: 10px !important;
}

.fcs {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.fc {
  padding: 7px 16px !important;
  background: rgba(8, 6, 22, 0.92) !important;
  border-radius: 11px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.fc1 { color: var(--c, #22d3ee) !important; border: 1px solid rgba(34, 211, 238, 0.26) !important; }
.fc2 { color: var(--m, #f472b6) !important; border: 1px solid rgba(244, 114, 182, 0.26) !important; }
.fc3 { color: var(--y, #fbbf24) !important; border: 1px solid rgba(251, 191, 36, 0.26) !important; }

/* Responsive Adjustments for Stats & About */
@media (max-width: 920px) {
  /* Stats grid */
  #stats .sgrid.e-con,
  #stats .sgrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* About section */
  .kd-about-section {
    padding: 80px 20px !important;
    overflow-x: hidden !important;
  }

  /* Stack to single column */
  .kd-about-inner,
  .kd-about-inner.e-con,
  .kd-about-inner > .e-con-inner {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .kd-about-left,
  .kd-about-left.e-con,
  .kd-about-right,
  .kd-about-right.e-con {
    width: 100% !important;
    max-width: 100% !important;
  }

  .kd-about-visual,
  .kd-about-visual.e-con {
    height: 320px !important;
    min-height: 320px !important;
  }

  .kd-about-image-1 {
    width: 130px !important;
    height: 90px !important;
    top: -15px !important;
    right: 0 !important;
  }

  .kd-about-image-2 {
    width: 150px !important;
    height: 105px !important;
    bottom: -10px !important;
    left: 0 !important;
  }

  .kd-about-badge-uv  { left: 0 !important; }
  .kd-about-badge-size { right: 0 !important; }
}

@media (max-width: 580px) {
  /* Stats */
  #stats .sgrid.e-con,
  #stats .sgrid {
    grid-template-columns: 1fr !important;
  }

  .kd-stats-section,
  section#stats,
  #stats {
    padding: 50px 20px !important;
  }

  /* About */
  .kd-about-section {
    padding: 60px 16px !important;
  }

  .kd-about-capabilities,
  .kd-about-capabilities.e-con {
    grid-template-columns: 1fr !important;
  }

  .kd-about-visual,
  .kd-about-visual.e-con {
    height: 280px !important;
    min-height: 280px !important;
  }

  .kd-byr .elementor-heading-title {
    font-size: 5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   WHY CHOOSE US SECTION
   ═══════════════════════════════════════════════════════════════ */

.kd-why-section {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Canvas hex-grid background positioning is applied via Elementor's own
   per-widget custom_css (css_classes does not render as a literal DOM
   class on widgets in this Elementor version — only on containers). */

.kd-why-section > .e-con-inner,
.kd-why-section > .e-con {
  position: relative !important;
  z-index: 1 !important;
}

.kd-why-header {
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 58px !important;
  position: relative !important;
  z-index: 1 !important;
}

.kd-why-header .elementor-heading-title {
  text-align: center !important;
}

.kd-why-title .kd-gc {
  background: linear-gradient(135deg, #22D3EE 0%, #F472B6 60%, #FBBF24 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Cards grid ──
   Layout is entirely native Elementor Grid (container_type:grid on
   .kd-why-grid), configured in the editor: 3 columns desktop, 2 columns
   via grid_columns_grid_tablet at ≤1024px, 1 column at ≤767px — all
   native responsive controls, verified compiling to real
   grid-template-columns rules with no custom CSS involved. */

/* ── Card ── */
.kd-why-card,
.kd-why-card.e-con {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 20px !important;
  padding: 34px 28px !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.kd-why-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #22d3ee, #f472b6) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.4s ease !important;
}

.kd-why-card:hover {
  transform: translateY(-13px) scale(1.015) !important;
  border-color: rgba(34, 211, 238, 0.15) !important;
  box-shadow: 0 28px 54px rgba(0, 0, 0, 0.44), 0 0 36px rgba(34, 211, 238, 0.06) !important;
}

.kd-why-card:hover::after {
  transform: scaleX(1) !important;
}

.kd-why-card-title .elementor-heading-title {
  line-height: 1.3 !important;
}

.kd-why-card-desc p {
  margin: 0 !important;
}

/* ── Responsive ──
   Column count is handled entirely by Elementor's native Grid controls
   on .kd-why-grid (see comment above) — nothing to do here. Only section
   padding is handled in this stylesheet, since Elementor's padding
   setting on this container has no responsive variant configured. */
@media (max-width: 920px) {
  .kd-why-section {
    padding: 80px 20px !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 580px) {
  .kd-why-section {
    padding: 60px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OUR PROCESS SECTION
   ═══════════════════════════════════════════════════════════════ */

.kd-process-section {
  width: 100% !important;
  box-sizing: border-box !important;
}

.kd-process-header {
  width: 100% !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
}

.kd-process-title .kd-gc {
  background: linear-gradient(135deg, #22D3EE 0%, #F472B6 60%, #FBBF24 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.kd-process-step div.elementor-heading-title {
  white-space: nowrap !important;
}

/* Layout is native Elementor Flexbox (flex_direction:row + flex_wrap:wrap
   on the grid container, native width/width_tablet/width_mobile on each
   step) — same as the Why Choose Us cards above. */

.kd-process-step {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Connecting line + nodes (decorative, aligned to the vertical centre
   of the big step numbers' visible glyph ink) ── */
.kd-proc-line {
  position: absolute !important;
  left: 12.5% !important;
  right: 12.5% !important;
  top: 54px !important;
  height: 1px !important;
  background: linear-gradient(90deg, #22d3ee, #f472b6, #fbbf24, #34d399) !important;
  opacity: 0.18 !important;
}

.kd-proc-node {
  position: absolute !important;
  top: -2px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.35) !important;
  transform: translateX(-50%) !important;
}

.kd-proc-dot {
  position: absolute !important;
  top: -4.5px !important;
  left: 0 !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #22d3ee !important;
  box-shadow: 0 0 18px 4px rgba(34, 211, 238, 0.7) !important;
  animation: kdProcDot 4s linear infinite !important;
  pointer-events: none !important;
}

@keyframes kdProcDot {
  0% {
    left: 0%;
    background: #22d3ee;
    box-shadow: 0 0 18px 4px rgba(34, 211, 238, 0.7);
  }

  30% {
    background: #f472b6;
    box-shadow: 0 0 18px 4px rgba(244, 114, 182, 0.7);
  }

  60% {
    background: #fbbf24;
    box-shadow: 0 0 18px 4px rgba(251, 191, 36, 0.65);
  }

  85% {
    background: #34d399;
    box-shadow: 0 0 18px 4px rgba(52, 211, 153, 0.65);
  }

  100% {
    left: 100%;
    background: #22d3ee;
  }
}

/* ── Responsive ──
   Column count is handled natively: grid_columns_mobile (Elementor's own
   @media max-width:767px) collapses to 1 column, and a tablet-range-only
   custom_css rule (768–1024px) sets 2 columns — both live in the
   Elementor data, not here. The connecting line only makes sense across
   exactly 4 columns, so it's hidden for the same 1024px range the
   tablet/mobile layouts cover. */
@media (max-width: 1024px) {
  .kd-proc-line,
  .kd-proc-node,
  .kd-proc-dot {
    display: none !important;
  }
}

@media (max-width: 920px) {
  .kd-process-section {
    padding: 80px 20px !important;
    overflow-x: hidden !important;
  }

  .kd-process-header {
    margin-bottom: 56px !important;
  }
}

@media (max-width: 580px) {
  .kd-process-section {
    padding: 60px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   INTERACTIVE SHOWCASE SECTION
   Layout (2-column vertical tabs / content panel) is 100% native
   Elementor: the nested-tabs widget's own tabs_direction:"inline-start"
   setting produces the vertical split. Everything below is visual
   styling only (colors, borders, active-state glow, image treatment,
   card appearance) — no display/flex-direction/width overrides.
   ═══════════════════════════════════════════════════════════════ */

.kd-showcase-section {
  width: 100% !important;
  box-sizing: border-box !important;
}

.kd-showcase-header {
  width: 100% !important;
  text-align: center !important;
}

.kd-showcase-header .elementor-heading-title {
  text-align: center !important;
}

.kd-showcase-title .kd-gc {
  background: linear-gradient(135deg, #22D3EE 0%, #F472B6 60%, #FBBF24 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Tab nav list ── */
.elementor-element-fb70c7b .e-n-tabs-heading {
  gap: 10px !important;
}

.elementor-element-fb70c7b .e-n-tab-title {
  padding: 14px 18px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  text-align: left !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.35s ease !important;
}

.elementor-element-fb70c7b .e-n-tab-title:hover {
  border-color: rgba(34, 211, 238, 0.3) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  transform: translateX(5px) !important;
}

.elementor-element-fb70c7b .e-n-tab-title[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(244, 114, 182, 0.05)) !important;
  border-color: #22d3ee !important;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.15) !important;
  transform: translateX(8px) !important;
  color: #ffffff !important;
}

.elementor-element-fb70c7b .e-n-tab-title[aria-selected="true"]:hover {
  transform: translateX(8px) !important;
}

/* Thumbnail + title/subtitle inside each tab button, matching the
   reference's own .g-tab-thumb/.g-tab-info/.g-tab-name/.g-tab-desc
   markup — the tab_title field renders raw HTML unescaped, which is how
   the image gets into a native Elementor Tabs button in the first place. */
.elementor-element-fb70c7b .e-n-tab-title-text {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
}

.elementor-element-fb70c7b .g-tab-thumb {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.elementor-element-fb70c7b .e-n-tab-title[aria-selected="true"] .g-tab-thumb {
  border-color: #22d3ee !important;
}

.elementor-element-fb70c7b .g-tab-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.elementor-element-fb70c7b .g-tab-name {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.elementor-element-fb70c7b .g-tab-desc {
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.38) !important;
}

/* ── Active content panel card ── */
.elementor-element-fb70c7b .e-n-tabs-content > .e-con {
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: #0c0a26 !important;
  overflow: hidden !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6) !important;
}

/* ── Info block bottom rule (visual separator, not layout) ── */
.kd-showcase-info-grid {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-top: 20px !important;
}

@media (max-width: 767px) {
  .elementor-element-fb70c7b .e-n-tab-title {
    text-align: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OUR PRESENCE SECTION
   Main 2-column layout (map / cards) is native Elementor Flexbox;
   the 6 city cards use native Elementor Grid (container_type:grid).
   Everything below is visual styling only.
   ═══════════════════════════════════════════════════════════════ */

.kd-presence-section {
  width: 100% !important;
  box-sizing: border-box !important;
}

.kd-presence-header {
  width: 100% !important;
  text-align: center !important;
}

.kd-presence-header .elementor-heading-title {
  text-align: center !important;
}

.kd-presence-title .kd-presence-gc {
  background: linear-gradient(135deg, #22D3EE, #34D399) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.kd-presence-main-row {
  width: 100% !important;
}

/* ── City / coverage cards ── */
.kd-presence-card {
  padding: 16px 17px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.kd-presence-card:hover {
  border-color: #22d3ee !important;
  background: rgba(34, 211, 238, 0.04) !important;
  transform: translateX(5px) !important;
}

.kd-presence-card-newest {
  border-color: rgba(244, 114, 182, 0.2) !important;
  background: rgba(244, 114, 182, 0.03) !important;
}

.kd-presence-card-newest:hover {
  border-color: #f472b6 !important;
  background: rgba(244, 114, 182, 0.06) !important;
}

.kd-presence-coverage {
  background: rgba(34, 211, 238, 0.03) !important;
  border-color: rgba(34, 211, 238, 0.12) !important;
  padding: 18px !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .kd-presence-section {
    padding: 80px 20px !important;
    overflow-x: hidden !important;
  }

  .kd-presence-main-row {
    gap: 40px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OUR CLIENTELE SECTION
   The carousel itself (slide movement, autoplay, swipe, responsive
   slide count) is entirely the existing native Elementor Carousel
   widget — everything below is visual styling only: card appearance,
   circular icon badges, CMYK accent rotation, hover glow, and the
   stats bar (native Elementor Flexbox row).
   ═══════════════════════════════════════════════════════════════ */

.kd-clientele-section {
  width: 100% !important;
  box-sizing: border-box !important;
}

.kd-clientele-header {
  width: 100% !important;
  text-align: center !important;
  padding: 0 20px !important;
}

.kd-clientele-header .elementor-heading-title {
  text-align: center !important;
}

.kd-clientele-title .kd-clientele-gc {
  background: linear-gradient(135deg, #f472b6, #fbbf24) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.kd-clientele-carousel-wrap {
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ── CMYK accent rotation ── */
.kd-brand-c1 { --kd-accent: #22d3ee; --kd-ring-soft: rgba(34, 211, 238, .14); --kd-ring-strong: rgba(34, 211, 238, .32); }
.kd-brand-c2 { --kd-accent: #f472b6; --kd-ring-soft: rgba(244, 114, 182, .14); --kd-ring-strong: rgba(244, 114, 182, .32); }
.kd-brand-c3 { --kd-accent: #fbbf24; --kd-ring-soft: rgba(251, 191, 36, .12); --kd-ring-strong: rgba(251, 191, 36, .28); }
.kd-brand-c4 { --kd-accent: #34d399; --kd-ring-soft: rgba(52, 211, 153, .12); --kd-ring-strong: rgba(52, 211, 153, .28); }

/* ── Brand card ── */
.kd-brand-card {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 38px 22px 28px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 28px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.35s ease !important;
}

.kd-brand-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--kd-accent) !important;
  opacity: 0.9 !important;
  transition: opacity 0.35s ease !important;
}

.kd-brand-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px var(--kd-ring-soft) !important;
  border-color: var(--kd-accent) !important;
}

.kd-brand-card:hover::before {
  opacity: 1 !important;
}

.kd-brand-badge {
  width: 104px !important;
  height: 104px !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(0, 0, 0, 0.22) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 0 0 6px var(--kd-ring-soft), 0 10px 40px var(--kd-ring-soft) !important;
  color: var(--kd-accent) !important;
  transition: transform 0.35s ease, box-shadow 0.4s ease !important;
}

.kd-brand-card:hover .kd-brand-badge {
  transform: scale(1.08) !important;
  box-shadow: 0 0 0 10px var(--kd-ring-strong), 0 28px 70px var(--kd-ring-soft) !important;
}

.kd-brand-cat {
  color: var(--kd-accent) !important;
}

/* ── Stats bar ── */
.kd-clientele-stat {
  position: relative !important;
}

.kd-clientele-stat + .kd-clientele-stat::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 18% !important;
  height: 64% !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .kd-clientele-header {
    margin-bottom: 40px !important;
  }

  .kd-clientele-stats-bar {
    margin-top: 36px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT TESTIMONIALS SECTION
   ═══════════════════════════════════════════════════════════════ */

.kd-testimonials-section {
  width: 100% !important;
  box-sizing: border-box !important;
}

.kd-testimonials-title .kd-testimonials-gc {
  background: linear-gradient(135deg, #f472b6, #fbbf24) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Card ── */
.kd-testimonial-card {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 26px !important;
  padding: 40px 34px 34px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.45s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.35s ease !important;
}

.kd-testimonial-card::before {
  content: '\201C' !important;
  position: absolute !important;
  top: 10px !important;
  left: 22px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 6rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: var(--tqc, rgba(34, 211, 238, 0.1)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.kd-test-c1 { --tqc: rgba(34, 211, 238, 0.12); --tglow: rgba(34, 211, 238, 0.16); --tlin: #22d3ee; }
.kd-test-c2 { --tqc: rgba(244, 114, 182, 0.12); --tglow: rgba(244, 114, 182, 0.16); --tlin: #f472b6; }
.kd-test-c3 { --tqc: rgba(251, 191, 36, 0.1); --tglow: rgba(251, 191, 36, 0.13); --tlin: #fbbf24; }

.kd-testimonial-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--tlin, #22d3ee), transparent) !important;
  opacity: 0.65 !important;
  transition: opacity 0.4s ease !important;
}

.kd-testimonial-card:hover {
  transform: translateY(-14px) scale(1.02) !important;
  box-shadow: 0 36px 70px rgba(0, 0, 0, 0.65), 0 0 50px var(--tglow, rgba(34, 211, 238, 0.12)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.kd-testimonial-card:hover::after {
  opacity: 1 !important;
}

/* ── Avatar ── */
.kd-test-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--tlin, #22d3ee), rgba(255, 255, 255, 0.1)) !important;
  flex-shrink: 0 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.kd-testimonial-card:hover .kd-test-avatar {
  transform: scale(1.12) rotateY(16deg) !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .kd-testimonials-header {
    margin-bottom: 40px !important;
  }

  .kd-testimonial-card {
    padding: 32px 26px 26px !important;
  }
}

/* ═══════════════════════════════════════════════════
   CTA / FINAL CONTACT SECTION
═══════════════════════════════════════════════════ */

/* ── "Now Accepting Projects" pill ── */
.kd-cta-alive {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px;
  background: rgba(52, 211, 153, 0.07);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 40px;
  font-size: 0.68rem;
  color: #34d399;
  letter-spacing: 2px;
  text-transform: uppercase;
  width: fit-content;
}

.kd-cta-alive-dot,
.kd-cta-live-d {
  width: 7px;
  height: 7px;
  background: #34d399;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  animation: kd-cta-adot 1.5s ease-in-out infinite;
}

@keyframes kd-cta-adot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(1.9); }
}

/* ── Rotating word (CSS-only, matches reference exactly) ── */
.kd-cta-cycle {
  display: block;
  height: 1.05em;
  overflow: hidden;
  position: relative;
}

.kd-cta-words {
  display: flex;
  flex-direction: column;
  animation: kd-cta-wordcycle 7s steps(1, end) infinite;
}

@keyframes kd-cta-wordcycle {
  0%, 22% { transform: translateY(0); }
  25%, 47% { transform: translateY(-1.05em); }
  50%, 72% { transform: translateY(-2.1em); }
  75%, 97% { transform: translateY(-3.15em); }
  100% { transform: translateY(0); }
}

.kd-cta-words span {
  display: block;
  height: 1.05em;
  line-height: 1.05;
}

.cw1 { background: linear-gradient(135deg, #22d3ee, #6d28d9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cw2 { background: linear-gradient(135deg, #f472b6, #e879f9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cw3 { background: linear-gradient(135deg, #fbbf24, #34d399); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cw4 { background: linear-gradient(135deg, #34d399, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── Status line under the form card ── */
.kd-cta-live {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 16px;
  font-weight: 500;
}

/* ── Quick links (existing literal .cta-qrow/.cqk markup) ── */
.cta-qrow {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.cqk {
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
  white-space: nowrap;
  display: inline-block;
}

.cqk:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

/* ── Contact Form 7 styling (applies once the shortcode is filled in) ── */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta-form-split {
  display: flex;
  gap: 14px;
}

.cta-form-split > * {
  flex: 1;
  min-width: 0;
}

.kd-cta-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}

.kd-cta-form input[type="text"],
.kd-cta-form input[type="email"],
.kd-cta-form input[type="tel"],
.kd-cta-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 13px 16px;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.kd-cta-form textarea {
  min-height: 96px;
  resize: vertical;
}

.kd-cta-form input::placeholder,
.kd-cta-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.kd-cta-form input:focus,
.kd-cta-form textarea:focus {
  outline: none;
  border-color: #22d3ee;
  background: rgba(34, 211, 238, 0.04);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}

.wpcf7-submit {
  margin-top: 4px;
  width: 100%;
  padding: 15px 24px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #22d3ee, #6d28d9);
  color: #06051a;
  font-weight: 800;
  font-size: 0.93rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.wpcf7-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(34, 211, 238, 0.4);
  filter: brightness(1.08);
}

.wpcf7-spinner {
  margin: 8px auto 0;
}

.wpcf7-not-valid-tip {
  color: #f472b6;
  font-size: 0.72rem;
  margin-top: 4px;
}

.wpcf7-response-output {
  border-radius: 10px !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.8rem !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .cta-form-split {
    flex-direction: column;
    gap: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SITE FOOTER (Blocksy Footer Builder)
   ═══════════════════════════════════════════════════════════════ */

#footer.ct-footer {
  position: relative !important;
  overflow: hidden !important;
  background: #05040e !important;
}

#footer-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  display: block;
}

/* ── Hero tagline banner ── */
.ft-hero {
  padding: 76px 0 0;
  text-align: center;
}

.ft-sub-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.ft-sub-tag::before,
.ft-sub-tag::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  width: 48px;
}

/* ── CMYK dots strip ── */
.ft-cmyk-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 24px 0 0;
}

.ft-ck {
  flex: 1;
  height: 3px;
  transition: opacity 0.4s ease;
}

.ft-ck:hover {
  opacity: 0.6;
}

.ft-ck1 { background: linear-gradient(90deg, transparent, #22d3ee); opacity: 0.35; }
.ft-ck2 { background: #f472b6; opacity: 0.35; }
.ft-ck3 { background: #fbbf24; opacity: 0.35; }
.ft-ck4 { background: linear-gradient(90deg, #34d399, transparent); opacity: 0.35; }

/* Animated CMYK top line */
#footer.ct-footer::before {
  content: '';
  position: relative;
  z-index: 2;
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #22d3ee 20%, #f472b6 50%, #fbbf24 80%, transparent 100%);
  background-size: 200% 100%;
  opacity: 0.85;
  animation: kd-footer-line 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  #footer.ct-footer::before {
    animation: none;
  }
}

@keyframes kd-footer-line {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

#footer.ct-footer > [data-row] {
  position: relative;
  z-index: 2;
}

#footer.ct-footer > [data-row="top"] > .ct-container {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 72px;
}

/* ── Middle row: 4-column grid ── */
#footer.ct-footer > [data-row="middle"] > .ct-container {
  display: grid !important;
  grid-template-columns: 1.45fr 1fr 1fr 1.1fr;
  gap: 0;
  padding: 52px 72px;
  max-width: 1380px;
  margin: 0 auto;
}

#footer.ct-footer > [data-row="middle"] > .ct-container > [data-column] {
  padding: 0 36px;
}

#footer.ct-footer > [data-row="middle"] > .ct-container > [data-column]:first-child {
  padding-left: 0;
}

#footer.ct-footer > [data-row="middle"] > .ct-container > [data-column]:last-child {
  padding-right: 0;
}

#footer.ct-footer > [data-row="middle"] > .ct-container > [data-column] + [data-column] {
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

/* Column header */
.ft-col-h {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ft-col-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* About text + CMYK dots */
.ft-about {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.32);
  line-height: 1.78;
  margin: 0 0 22px;
  padding-right: 8px;
}

.ft-dots {
  display: flex;
  gap: 7px;
  margin-bottom: 20px;
}

.ft-d {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.ft-d:hover {
  transform: scale(1.6);
}

/* Contact card */
.ft-card {
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 18px;
  transition: border-color 0.35s ease, background 0.35s ease;
}

.ft-card:hover {
  border-color: rgba(34, 211, 238, 0.2);
  background: rgba(34, 211, 238, 0.04);
}

.ft-citem {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ft-cic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  transition: 0.3s ease;
}

.ft-card:hover .ft-cic {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(34, 211, 238, 0.28);
}

.ft-ctxt-main {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  display: block;
  line-height: 1.3;
}

.ft-ctxt-sub {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.28);
  margin-top: 2px;
  display: block;
}

/* Nav links */
.ft-links {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ft-link {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.3s ease, padding-left 0.3s ease, border-color 0.3s ease;
}

.ft-link:last-child {
  border-bottom: none;
}

.ft-link:hover {
  color: #fff;
  padding-left: 8px;
  border-color: rgba(255, 255, 255, 0.07);
}

.ft-link .ft-lk-arr {
  opacity: 0;
  transform: translateX(-4px);
  transition: 0.3s ease;
  color: #22d3ee;
  font-size: 0.7rem;
}

.ft-link:hover .ft-lk-arr {
  opacity: 1;
  transform: translateX(0);
}

/* Cities */
.ft-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.ft-city {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: default;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
  transition: 0.35s ease;
}

.ft-city:nth-child(1):hover,
.ft-city:nth-child(5):hover {
  border-color: #22d3ee;
  color: #22d3ee;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.22);
}

.ft-city:nth-child(2):hover {
  border-color: #f472b6;
  color: #f472b6;
  box-shadow: 0 0 16px rgba(244, 114, 182, 0.22);
}

.ft-city:nth-child(3):hover {
  border-color: #fbbf24;
  color: #fbbf24;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.18);
}

.ft-city:nth-child(4):hover,
.ft-city:nth-child(6):hover {
  border-color: #34d399;
  color: #34d399;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.18);
}

/* Get a Quote CTA */
.ft-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(135deg, #22d3ee, #6d28d9);
  color: #000;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.28);
  transition: 0.35s ease;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}

.ft-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: translateX(-100%);
  transition: 0.5s ease;
}

.ft-cta:hover::before {
  transform: translateX(100%);
}

.ft-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(34, 211, 238, 0.45);
}

/* Founded year card */
.ft-est-box {
  text-align: center;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.ft-est-yr {
  font-family: 'Inter', sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #22d3ee, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ft-est-lbl {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ── Bottom bar ── */
#footer.ct-footer > [data-row="bottom"] > .ct-container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1380px;
  margin: 0 auto;
  padding: 24px 72px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ct-footer-copyright {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.22);
  line-height: 1.6;
}

.ct-footer-copyright strong {
  color: rgba(34, 211, 238, 0.55);
  font-weight: 600;
}

.ft-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ft-blink {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
  transition: 0.3s ease;
  letter-spacing: 0.5px;
}

.ft-blink:hover {
  color: rgba(255, 255, 255, 0.55);
}

.ft-bsep {
  color: rgba(255, 255, 255, 0.1);
  font-size: 0.6rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  #footer.ct-footer > [data-row="middle"] > .ct-container {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
    padding: 48px 40px;
  }

  #footer.ct-footer > [data-row="middle"] > .ct-container > [data-column] {
    padding: 0 20px;
  }

  #footer.ct-footer > [data-row="middle"] > .ct-container > [data-column]:nth-child(odd) {
    border-left: none;
    padding-left: 0;
  }

  #footer.ct-footer > [data-row="bottom"] > .ct-container {
    padding: 24px 40px 32px;
  }
}

@media (max-width: 767px) {
  #footer.ct-footer > [data-row="middle"] > .ct-container {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 40px 24px 8px;
  }

  #footer.ct-footer > [data-row="middle"] > .ct-container > [data-column] {
    padding: 24px 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  #footer.ct-footer > [data-row="middle"] > .ct-container > [data-column]:first-child {
    border-top: none;
    padding-top: 0 !important;
  }

  #footer.ct-footer > [data-row="bottom"] > .ct-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 28px;
  }

  .ft-bar-right {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CTA CARD — button stack (replaces the CF7 form placeholder)
   ═══════════════════════════════════════════════════════════════ */

.cta-btn-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ctabtn-p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 24px;
  background: linear-gradient(135deg, #22d3ee, #6d28d9);
  border: none;
  border-radius: 14px;
  color: #000;
  font-weight: 800;
  font-size: 0.93rem;
  cursor: pointer;
  text-decoration: none;
  transition: 0.35s ease;
  position: relative;
  overflow: hidden;
}

.ctabtn-p::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-100%);
  transition: 0.55s ease;
}

.ctabtn-p:hover::before {
  transform: translateX(100%);
}

.ctabtn-p:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(34, 211, 238, 0.45);
}

.ctabtn-s {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  transition: 0.35s ease;
}

.ctabtn-s:hover {
  border-color: #f472b6;
  color: #f472b6;
  background: rgba(244, 114, 182, 0.04);
  transform: translateY(-2px);
}