/*
Theme Name:  OceanWP Child
Theme URI:   https://oceanwp.org/
Description: Child theme for OceanWP. Put all custom CSS and template overrides here so parent theme updates never wipe them.
Author:      Zaheen
Template:    oceanwp
Version:     2.5.6
Text Domain: oceanwp-child
*/

/* ============================================================
   ZaheenLabs design system — brand tokens
   ============================================================ */
:root {
  --zl-ink: #090915;
  --zl-lime: #C3FD95;
  --zl-grey: #757781;
  --zl-purple: #8387C9;
  --zl-radius: 16px;
  --zl-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   Buttons — static hover glow, no movement
   ============================================================ */
.elementor-button:hover,
.elementor-button:focus-visible {
  box-shadow: 0 6px 24px rgba(195, 253, 149, .35);
}
.elementor-button:focus-visible {
  outline: 2px solid var(--zl-lime);
  outline-offset: 2px;
}

/* Pagination dots in brand lime */
.elementor-widget-loop-carousel .swiper-pagination-bullet {
  background: var(--zl-grey);
  opacity: .5;
  
}
.elementor-widget-loop-carousel .swiper-pagination-bullet-active {
  background: var(--zl-lime);
  opacity: 1;
  width: 20px;
  border-radius: 6px;
}

/* ============================================================
   Sticky glass header
   Enable in Elementor: edit the Header template > section >
   Advanced > Motion Effects > Sticky: Top. This class appears
   automatically once the page is scrolled.
   ============================================================ */
.elementor-sticky--effects {
  background: rgba(9, 9, 21, .82) !important;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(9, 9, 21, .28);
  
}

/* ============================================================
   Grain overlay on dark sections — stops flat navy looking cheap.
   Applied to the whole page very faintly; pure decoration.
   ============================================================ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Forminator forms — brand focus states
   ============================================================ */
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus {
  border-color: var(--zl-lime) !important;
  box-shadow: 0 0 0 3px rgba(195, 253, 149, .22) !important;
}

/* ============================================================
   Helper classes — apply via Elementor > Advanced > CSS Classes
   ------------------------------------------------------------
   .zl-gray-hover   on the Advisors image/card: grayscale until hover
   .zl-glow         lime radial glow behind a hero element
   ============================================================ */
.zl-gray-hover img {
  filter: grayscale(1);
  
}
.zl-gray-hover:hover img {
  filter: grayscale(0);
}
.zl-glow {
  position: relative;
}
.zl-glow::before {
  content: "";
  position: absolute;
  inset: -15% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 55% at 50% 45%, rgba(195, 253, 149, .18), transparent 70%);
}

/* ============================================================
   GLOBAL ANIMATION KILL SWITCH (temporary)
   Neutralizes Elementor's built-in motion without editing pages:
   - Motion Effects (scroll parallax / scale / rotate on circles,
     images, cards)
   - Entrance animations (fadeInLeft etc.)
   Delete this whole block to bring the original effects back.
   ============================================================ */
.elementor-motion-effects-element,
.elementor-motion-effects-layer {
  transform: none !important;
}
.elementor-invisible {
  visibility: visible !important;
}
.elementor-widget.animated,
.elementor-element.animated {
  animation: none !important;
  opacity: 1 !important;
}

/* ============================================================
   Footer redesign — dark ink anchor (same in both themes).
   Scoped to the footer chrome container (logo/menus/newsletter/
   social/legal). The Contact Us card above it is left untouched.
   ============================================================ */
/* Full-bleed: strip OceanWP's footer wrapper padding/margins */
#footer { background: #090915 !important; }
#footer #footer-inner { padding: 0 !important; }
#footer #footer-widgets { margin: 0 !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; }
#footer .elementor-element-1173035 {
  background: linear-gradient(180deg, #0B0B18 0%, #090915 100%) !important;
  position: relative;
  overflow: hidden;
  /* true full-bleed regardless of boxed wrappers */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
}
/* Contact Us section: full-bleed, squared corners (content stays boxed) */
#footer .elementor-element-3c9850a {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
}
/* lime hairline across the top */
#footer .elementor-element-1173035::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--zl-lime), transparent);
  opacity: .55;
}
/* giant faint wordmark behind the content */
#footer .elementor-element-1173035::after {
  content: "ZAHEEN";
  position: absolute;
  bottom: -0.2em; left: 50%;
  transform: translateX(-50%);
  font-family: 'pp-neue-machina-rg', 'Bricolage Grotesque', sans-serif;
  font-size: clamp(90px, 16vw, 240px);
  line-height: 1;
  letter-spacing: .04em;
  color: #FFFFFF;
  opacity: .035;
  pointer-events: none;
  white-space: nowrap;
}
/* text */
#footer .elementor-element-1173035 .elementor-heading-title { color: #E8EDF2 !important; }
#footer .elementor-element-1173035 h4.elementor-heading-title { color: var(--zl-lime) !important; }
#footer .elementor-element-1173035 p.elementor-heading-title { color: #787D8C !important; font-size: 13px; }
/* menu links */
#footer .elementor-element-1173035 .elementor-nav-menu a {
  color: #B9BDC9 !important;
  transition: color .2s ease;
}
#footer .elementor-element-1173035 .elementor-nav-menu a:hover { color: var(--zl-lime) !important; }
/* logo: keep the ORIGINAL colors (lime mark + dark text) readable on
   the dark ground by seating it on a soft light chip, sized like the
   navbar logo */
#footer .elementor-element-1173035 .elementor-widget-theme-site-logo img {
  filter: none !important;
  height: 50px !important;
  width: auto !important;
  background: #FAFAFC;
  padding: 8px 14px;
  border-radius: 12px;
}
/* content stays boxed and centered (like the metrics bar) */
/* newsletter field + button */
#footer .elementor-element-1173035 input[type="email"],
#footer .elementor-element-1173035 input[type="text"] {
  background: #15152A !important;
  border: 1px solid #2A2A45 !important;
  color: #E8EDF2 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
}
#footer .elementor-element-1173035 input::placeholder { color: #787D8C !important; opacity: 1; }
#footer .elementor-element-1173035 input:focus {
  border-color: var(--zl-lime) !important;
  box-shadow: 0 0 0 3px rgba(195, 253, 149, .18) !important;
  outline: none !important;
}
#footer .elementor-element-1173035 button[type="submit"],
#footer .elementor-element-1173035 .elementor-button {
  background: var(--zl-lime) !important;
  color: var(--zl-ink) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
#footer .elementor-element-1173035 button[type="submit"]:hover,
#footer .elementor-element-1173035 .elementor-button:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(195, 253, 149, .30) !important;
}
/* social icons: dark chips, lime on hover */
#footer .elementor-element-1173035 .elementor-social-icon {
  background-color: #15152A !important;
  border: 1px solid #2A2A45;
  transition: background-color .2s ease, border-color .2s ease;
}
#footer .elementor-element-1173035 .elementor-social-icon:hover {
  background-color: var(--zl-lime) !important;
  border-color: var(--zl-lime);
}
#footer .elementor-element-1173035 .elementor-social-icon i,
#footer .elementor-element-1173035 .elementor-social-icon svg { color: #E8EDF2; fill: #E8EDF2; }
#footer .elementor-element-1173035 .elementor-social-icon:hover i,
#footer .elementor-element-1173035 .elementor-social-icon:hover svg { color: var(--zl-ink); fill: var(--zl-ink); }

/* Featured + Advisors loop grids: keep inside the boxed content width
   (their sections were sized extra-wide for the old carousel peek) */
.elementor-element-88a9194,
.elementor-element-a5193a4 {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  transform: none !important;
}
.elementor-element-88a9194 .elementor-loop-container,
.elementor-element-a5193a4 .elementor-loop-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
/* cards fill their grid track instead of keeping fixed carousel widths */
.elementor-element-88a9194 .e-loop-item,
.elementor-element-a5193a4 .e-loop-item {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* the card containers inside each loop item go fluid too */
.elementor-element-88a9194 .e-loop-item > .elementor-element,
.elementor-element-a5193a4 .e-loop-item > .elementor-element {
  --content-width: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Kill horizontal overflow site-wide: absolutely-positioned dot/circle
   decorations and 100vw full-bleed sections must never create a
   sideways scrollbar or shift the layout. */
html, body {
  overflow-x: clip;
}

/* Social icons: one canonical style on every page and instance
   (some widget styles only exist in the Home page's generated CSS). */
.elementor-widget-social-icons .elementor-social-icons-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start !important;
}
.elementor-widget-social-icons .elementor-social-icon {
  --icon-size: 15px;
  --icon-padding: 12px;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #0909151F !important;
  border-radius: 10px !important;
}
.elementor-widget-social-icons .elementor-social-icon i {
  color: var(--zl-ink, #090915) !important;
  font-size: 17px !important;
}
.elementor-widget-social-icons .elementor-social-icon svg {
  fill: var(--zl-ink, #090915) !important;
  width: 17px !important;
  height: 17px !important;
}
html[data-zl-theme="dark"] .elementor-widget-social-icons .elementor-social-icon {
  background-color: rgba(232, 237, 242, .10) !important;
}
html[data-zl-theme="dark"] .elementor-widget-social-icons .elementor-social-icon i {
  color: #E8EDF2 !important;
}
html[data-zl-theme="dark"] .elementor-widget-social-icons .elementor-social-icon svg {
  fill: #E8EDF2 !important;
}

/* About page: decorative circle/line images are absolutely positioned
   with a z-index above the copy (invisible on light, obvious on dark).
   Keep decorations behind, content in front. */
.elementor-853 .elementor-widget-image.elementor-absolute {
  z-index: 0 !important;
}
.elementor-853 .elementor-widget-heading,
.elementor-853 .elementor-widget-text-editor,
.elementor-853 .elementor-widget-button,
.elementor-853 .elementor-widget-image-box,
.elementor-853 .elementor-widget-loop-carousel,
.elementor-853 .elementor-widget-loop-grid {
  position: relative;
  z-index: 2;
}

/* Featured page: no dot grids over the features grid */
.elementor-2803 .elementor-element-c7de821 .elementor-widget-image img[src*="Group-1171272"] {
  display: none !important;
}

/* Testimonial sections: the old slider layout's absolutely-positioned
   circle decorations land on top of the heading after the grid
   restructure — hide those, and draw the decorations where they
   belong instead: lime circle below the cards on the left, dot grid
   in the opposite corner (same language as the other sections). */
.zl-testi-section .elementor-widget-image,
.zl-testi-section .elementor-widget-image-carousel {
  display: none !important;
}
/* ...but never hide images that live inside the testimonial cards */
.zl-testi-section .e-loop-item .elementor-widget-image {
  display: block !important;
}
.zl-testi-section .elementor-widget-heading {
  position: relative;
  z-index: 5;
}
/* full-bleed like the other sections, squared corners. The light
   background lived on an inner container (boxed + rounded, covering
   the decorations) — carry it on the section itself instead and make
   the inner wrappers transparent. */
.zl-testi-section {
  position: relative;
  overflow: hidden;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
  background: #EFEFF6 !important;
  padding-top: 56px;
  padding-bottom: 56px;
}
html[data-zl-theme="dark"] .zl-testi-section {
  background: #10101F !important;
}
.zl-testi-section > .e-con-inner {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.zl-testi-section > .e-con-inner > .e-con,
.zl-testi-section > .e-con-inner > .e-con > .e-con {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
.zl-testi-section > .e-con-inner {
  position: relative;
  z-index: 1;
}
/* (old lime-circle/dot-grid pseudo decorations removed — the section
   now carries the same ornaments as Our Advisors; see the
   "Testimonials decorations" block further down) */

/* Testimonial grids (About + Home, converted from slider):
   boxed, centered, fluid cards */
.zl-testi-grid .elementor-loop-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.zl-testi-grid .e-loop-item {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.zl-testi-grid .e-loop-item > .elementor-element {
  --content-width: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.elementor-2952 .elementor-element.elementor-element-6b93f49 {
  padding-top: 72px !important;
}

/* ============================================================
   Our Solutions carousel: cards on one aligned line (no zigzag),
   equal heights, balanced padding, soft hover lift
   ============================================================ */
.elementor-2952 .elementor-element.elementor-element-273b186 {
  --padding-top: 40px;
  --padding-bottom: 40px;
}
.elementor-2952 .elementor-element-3a6afc5 .swiper-slide {
  height: auto;
  top: 0;
}
.elementor-2952 .elementor-element-3a6afc5 .swiper-slide .elementor-element-87fe91d {
  height: 100%;
  box-shadow: 0 6px 24px rgba(9, 9, 21, .06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.elementor-2952 .elementor-element-3a6afc5 .swiper-slide:hover .elementor-element-87fe91d {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(9, 9, 21, .12);
}

/* Add your custom CSS below this line. */

/* ============================================================
   Sticky Glass Header & Nav Polish
   ============================================================ */
/* The real navbar IS the OceanWP #site-header (transparent overlay with
   logo + WP menu + Contact button). It is absolutely positioned, so
   switching it to fixed makes it sticky with no layout jump.
   (OceanWP's #wrap{overflow:hidden} rules out position:sticky.) */
#site-header.transparent-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999 !important;
  transition: background-color .25s ease, box-shadow .25s ease;
}
/* Glass background once the page is scrolled (class set by theme-toggle.js) */
html.zl-scrolled #site-header.transparent-header {
  background-color: rgba(250, 250, 252, .88);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(9, 9, 21, .10);
}
html[data-zl-theme="dark"].zl-scrolled #site-header.transparent-header {
  background-color: rgba(9, 9, 21, .85);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}
/* Toggle as a menu item in the OceanWP menu — center it on the 74px row */
#site-navigation-wrap .dropdown-menu > li.zl-toggle-li {
  display: inline-flex !important;
  align-items: center !important;
  height: 74px;
  float: none;
  vertical-align: top;
}

/* Eliminate rectangular active box outline when clicking nav links */
.elementor-nav-menu .elementor-item:focus,
.elementor-nav-menu .elementor-item:active,
.elementor-nav-menu .elementor-item.elementor-item-active,
#site-navigation-wrap .dropdown-menu > li.current-menu-item > a,
#site-navigation-wrap .dropdown-menu > li > a:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ============================================================
   Navbar Theme Toggle Styling
   ============================================================ */
/* Sliding sun/moon pill toggle: sun knob (orange) in light mode,
   moon knob (dark gray) slides right in dark mode. */
.zl-theme-toggle {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  vertical-align: middle !important;
  width: 68px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  background: #f2f2f0 !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .12),
              inset 0 -1px 2px rgba(255, 255, 255, .8) !important;
  cursor: pointer !important;
  margin-left: 12px !important;
  overflow: hidden !important;
  transition: background 0.25s ease, box-shadow 0.25s ease !important;
}

/* Sliding knob */
.zl-theme-toggle .zl-tt-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f5b942, #e8961e);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .25),
              inset 0 1px 1px rgba(255, 255, 255, .35);
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), background 0.25s ease;
  z-index: 1;
}
.zl-theme-toggle.is-dark .zl-tt-knob {
  transform: translateX(34px);
  background: linear-gradient(180deg, #5c5c5c, #3d3d3d);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45),
              inset 0 1px 1px rgba(255, 255, 255, .12);
}

/* Sun / moon icons in the track */
.zl-theme-toggle .zl-tt-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  pointer-events: none;
  transition: color 0.25s ease;
}
.zl-theme-toggle .zl-tt-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}
/* Light mode: sun sits on the orange knob (white), moon is a muted outline */
.zl-theme-toggle .zl-tt-sun { color: #fff; }
.zl-theme-toggle .zl-tt-moon { color: #8a8a86; }
/* Dark mode: moon sits on the gray knob (white), sun goes muted */
.zl-theme-toggle.is-dark .zl-tt-sun { color: #6b6b68; }
.zl-theme-toggle.is-dark .zl-tt-moon { color: #f5f5f2; }

.zl-theme-toggle:hover .zl-tt-knob {
  filter: brightness(1.06);
}
.zl-theme-toggle:focus-visible {
  outline: 2px solid var(--zl-lime, #C3FD95) !important;
  outline-offset: 2px !important;
}

/* Dark theme: darken the track */
html[data-zl-theme="dark"] .zl-theme-toggle {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, .06) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55),
              inset 0 -1px 1px rgba(255, 255, 255, .05) !important;
}

/* Center the whole menu row (links + toggle) on one axis */
ul.elementor-nav-menu:has(li.zl-toggle-li) {
  display: flex !important;
  align-items: center !important;
}
li.zl-toggle-li {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  vertical-align: middle !important;
  list-style: none !important;
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* ============================================================
   Hero Section Text Accent — colored words, no highlight block.
   Light theme uses a deeper leaf green (pale lime is unreadable
   on the light hero); dark theme uses the true brand lime.
   ============================================================ */
.zl-hero-highlight,
mark.zl-lime,
.zl-accent,
mark {
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline !important;
  font-weight: inherit !important;
  /* Marker underline: a thick lime swipe under the bottom third of
     the letters. Wrapping lines each get their own swipe. */
  background: linear-gradient(transparent 64%, var(--zl-lime, #C3FD95) 64%, var(--zl-lime, #C3FD95) 94%, transparent 94%) !important;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
/* Dark theme: the phrase itself goes lime, no swipe needed */
html[data-zl-theme="dark"] .zl-hero-highlight,
html[data-zl-theme="dark"] mark.zl-lime,
html[data-zl-theme="dark"] .zl-accent,
html[data-zl-theme="dark"] mark {
  background: transparent !important;
  color: var(--zl-lime, #C3FD95) !important;
}

/* Hide broken / empty image placeholders */
img:not([src]),
img[src=""],
img[src="#"] {
  display: none !important;
}


/* ============================================================
   Our Solutions Image Overlay Fix (Remove Slanted Green Bar)
   Strictly scoped ONLY to section 2952
   ============================================================ */
.elementor-2952 .elementor-element.elementor-element-65790df {
  display: none !important;
}

/* ============================================================
   Recommended Professional Sections (Metrics, Testimonials, FAQ)
   ============================================================ */
.zl-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Testimonials + FAQ: near-full-width layout with edge-hugging headings,
   matching the News & Insights / Advisors sections */
.zl-testimonials-section .zl-container,
.zl-faq-section .zl-container {
  max-width: none;
  padding: 0 40px;
}
.zl-testimonials-section,
.zl-faq-section {
  padding-top: 56px !important;
}
.zl-testimonials-section .zl-shead,
.zl-faq-section .zl-shead {
  margin-bottom: 36px;
}

/* 1. Metrics Section */
.zl-metrics-section {
  background: var(--zl-ink, #090915);
  color: #fff;
  padding: 48px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.zl-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.zl-metric-card {
  padding: 16px;
}
.zl-metric-val {
  font-family: 'pp-neue-machina-rg', sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--zl-lime, #C3FD95);
  margin-bottom: 16px;
}
.zl-metric-lbl {
  font-size: 14px;
  color: #B9BDC9;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* 2. Testimonials Section */
.zl-testimonials-section {
  padding: 80px 0;
  background: rgba(9, 9, 21, 0.03);
}

/* Decorations: lime circles + dot grids, like the other sections */
.zl-testimonials-section,
.zl-faq-section {
  position: relative;
  overflow: hidden;
}
.zl-testimonials-section .zl-container,
.zl-faq-section .zl-container {
  position: relative;
  z-index: 1;
}
.zl-testimonials-section::before {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: var(--zl-lime, #C3FD95);
  right: -140px; top: -120px;
  opacity: .85;
}
.zl-testimonials-section::after {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  left: 0; bottom: 0;
  background-image: url("../../uploads/2025/02/Group-1171272628.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
}
.zl-faq-section::before {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 46px solid var(--zl-lime, #C3FD95);
  left: -160px; bottom: -160px;
  opacity: .85;
}
.zl-faq-section::after {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  right: 0; top: 0;
  background-image: url("../../uploads/2025/02/Group-1171272628.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}
.zl-shead {
  text-align: left;
  margin-bottom: 48px;
}
.zl-eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zl-grey, #757781);
  font-weight: 500;
  display: block;
  margin-bottom: 10px;
}
/* match the site's section headings exactly: the global headings font
   (pp-neue-machina-rg via OceanWP) at the News/Advisors scale */
.zl-shead h2 {
  font-family: 'pp-neue-machina-rg', sans-serif;
  font-size: clamp(38px, 4.5vw, 60px);
  font-weight: 600;
  color: var(--zl-ink, #090915);
  line-height: 1.05;
  margin: 0 0 12px;
}
.zl-shead .zl-eyebrow {
  margin-bottom: 0;
  order: 2;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-family: 'Bricolage Grotesque', sans-serif;
}
/* sub-line sits under the heading, small grey — like other sections */
.zl-shead {
  display: flex;
  flex-direction: column;
}
.zl-shead h2 { order: 1; }
.zl-testi-card p,
.zl-faq-item p {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  color: var(--zl-grey, #757781);
  line-height: 1.6;
}
.zl-faq-item summary {
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--zl-ink, #090915);
}
html[data-zl-theme="dark"] .zl-faq-item summary { color: #E8EDF2; }
html[data-zl-theme="dark"] .zl-testi-card p,
html[data-zl-theme="dark"] .zl-faq-item p { color: #B9BDC9; }
.zl-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.zl-testi-card {
  background: #ffffff;
  border: 1px solid #E7E8EF;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(9, 9, 21, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
html[data-zl-theme="dark"] .zl-testi-card {
  background: #15152a;
  border-color: #242440;
}
.zl-stars {
  color: #FFB800;
  font-size: 18px;
  margin-bottom: 14px;
}
.zl-testi-card p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.zl-user {
  display: flex;
  align-items: center;
  gap: 14px;
}
.zl-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--zl-lime, #C3FD95);
  color: var(--zl-ink, #090915);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.zl-user strong {
  display: block;
  font-size: 14px;
}
.zl-user span {
  font-size: 12px;
  color: #757781;
}

/* 3. FAQ Section */
.zl-faq-section {
  /* bottom stays tight against the Contact Us section below */
  padding: 80px 0 32px;
}
.zl-faq-item:last-child {
  margin-bottom: 0;
}
.zl-faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.zl-faq-item {
  background: #ffffff;
  border: 1px solid #E7E8EF;
  border-radius: 16px;
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color 0.2s;
}
html[data-zl-theme="dark"] .zl-faq-item {
  background: #15152a;
  border-color: #242440;
}
.zl-faq-item summary {
  font-weight: 600;
  font-size: 17px;
  outline: none;
  cursor: pointer;
}
.zl-faq-item p {
  margin-top: 12px;
  font-size: 15px;
  color: #757781;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .zl-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .zl-testimonials-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Solutions cards (loop template 1394) — used by the homepage
   carousel and the Our Solutions page grid
   ============================================================ */
.e-loop-item.elementor-1394 .elementor-element-87fe91d {
  height: 100%;
  border: 1px solid #E7E8EF;
  box-shadow: 0 6px 24px rgba(9, 9, 21, .05);
  transition: transform .35s var(--zl-ease), box-shadow .35s var(--zl-ease), border-color .35s var(--zl-ease);
}
.e-loop-item.elementor-1394:hover .elementor-element-87fe91d {
  box-shadow: 0 16px 36px rgba(9, 9, 21, .12);
  border-color: var(--zl-lime);
}
html[data-zl-theme="dark"] .e-loop-item.elementor-1394 .elementor-element-87fe91d {
  border-color: #242440;
}
/* card image fills the card width instead of the fixed 262px */
.e-loop-item.elementor-1394 .elementor-element-c9ba3b6,
.e-loop-item.elementor-1394 .elementor-element-c9ba3b6 img {
  width: 100% !important;
}
/* lift on hover only in the grid (the carousel would clip the shadow) */
.elementor-3298 .e-loop-item.elementor-1394:hover .elementor-element-87fe91d {
  transform: translateY(-6px);
}

/* ============================================================
   About section (home) — "Shaping the Future of Learning!"
   fb113fd = dark section wrapper
   fb7d060 = text column | e158b64 eyebrow | 8ed3241 heading |
   0b5f6fc body copy | 03bf7ee/7d3e37d photo + coordinates chip
   ============================================================ */
.elementor-element-fb113fd {
  min-height: auto !important;
  padding-top: 72px !important;
  padding-bottom: 72px !important;
  gap: 64px;
}

/* Text column: comfortable measure, vertically centered */
.elementor-element-fb113fd .elementor-element-fb7d060 {
  max-width: 620px;
  justify-content: center !important;
  align-content: center !important;
}

/* Eyebrow: "< About Us >" -> lime, uppercase, tracked out */
.elementor-element-e158b64 .elementor-heading-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--zl-lime, #C3FD95) !important;
  margin-bottom: 6px !important;
}

/* Main heading: big, white, tight leading, lime accent bar under it */
.elementor-element-8ed3241 .elementor-heading-title {
  font-size: clamp(34px, 3.6vw, 52px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em;
  margin: 10px 0 14px !important;
  position: relative;
  padding-bottom: 22px;
}
.elementor-element-8ed3241 .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--zl-lime, #C3FD95), rgba(195, 253, 149, .15));
}

/* Body copy: soft gray, airy line-height, spaced paragraphs */
.elementor-element-fb113fd .elementor-element-0b5f6fc {
  color: #B9BDC9 !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
}
.elementor-element-fb113fd .elementor-element-0b5f6fc p {
  margin: 0 0 18px !important;
}
.elementor-element-fb113fd .elementor-element-0b5f6fc p:last-child {
  margin-bottom: 0 !important;
}

/* Photo: rounded with a soft lime-tinted frame */
.elementor-element-fb113fd .elementor-element-03bf7ee img,
.elementor-element-fb113fd .elementor-element-aaa8de1 img {
  border-radius: var(--zl-radius, 16px);
}
.elementor-element-fb113fd .elementor-element-03bf7ee {
  border-radius: var(--zl-radius, 16px);
}

/* Coordinates chip under the photo: quiet mono-style caption */
.elementor-element-7d3e37d .elementor-heading-title {
  font-size: 12px !important;
  letter-spacing: .14em !important;
  color: #787D8C !important;
}

/* Tablet/mobile: tighten the section, keep the heading readable */
@media (max-width: 1024px) {
  .elementor-element-fb113fd {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    gap: 40px;
  }
  .elementor-element-fb113fd .elementor-element-fb7d060 {
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .elementor-element-fb113fd {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .elementor-element-8ed3241 .elementor-heading-title {
    font-size: 30px !important;
  }
  .elementor-element-fb113fd .elementor-element-0b5f6fc {
    font-size: 16px !important;
  }
}

/* ============================================================
   Section spacing — kill the oversized min-heights that create
   huge empty bands above/below content.
   fa7f410 = "What people say about us?" (testimonials)
   ============================================================ */
/* same rhythm as News & Insights (its visual gap above the heading is
   ~50px; our two-line heading carries more line-height overhead, so a
   smaller padding lands the same visual gap) */
.elementor-element-fa7f410 {
  position: relative;
  min-height: auto !important;
  padding-top: 20px !important;
  padding-bottom: 50px !important;
}

/* ------------------------------------------------------------
   Testimonials decorations — same three ornaments as the
   Advisors section (dot grid top-left, purple ring bottom-left,
   lime circles bottom-right). Done in CSS because the section's
   full-size gray inner card (534dbf3) paints over absolutely
   positioned Elementor image widgets.
   ------------------------------------------------------------ */
/* dot grid sits behind the heading (on the inner container, above the
   section background, behind the content) */
.elementor-element-fa7f410 .elementor-element-534dbf3 {
  isolation: isolate;
  position: relative;
  /* the inner wrapper carries a fixed 650px min-height from Elementor —
     far taller than the cards, leaving a dead band of gray */
  --min-height: auto;
  min-height: auto !important;
}
/* heading block: trim its 60px top padding and the heading widget's
   own 75px top margin */
.elementor-element-fa7f410 .elementor-element-63d9a7d {
  --padding-top: 0px !important;
}
.elementor-element-fa7f410 .elementor-element-e294929 > .elementor-widget-container {
  margin-top: 0 !important;
}
/* carousel: shrink the 100px band reserved under the cards for dots */
.elementor-element-fa7f410 .elementor-element-c74614a {
  --swiper-pagination-spacing: 32px;
}
.elementor-element-fa7f410 .elementor-element-534dbf3::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 298px;
  height: 312px;
  background: url("../../uploads/2025/02/Group-1171272628.png") no-repeat left top / contain;
  z-index: -1;
  pointer-events: none;
}
/* purple ring hugs the section's bottom-left corner.
   Elementor's .e-con:before overlay rule pins container ::before to
   top:0 full-size — force our geometry over it. */
.elementor-element-fa7f410::before {
  content: "" !important;
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 125px !important;
  height: 262px !important;
  background: url("../../uploads/2025/02/Ellipse-3.png") no-repeat left bottom / contain !important;
  border: none !important;
  opacity: 1 !important;
  z-index: 0;
  pointer-events: none;
}
/* lime circles bleed off the section's bottom-right edge */
.elementor-element-fa7f410::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 570px;
  height: 398px;
  background: url("../../uploads/2025/02/Group-1171272632.png") no-repeat right bottom / contain;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 767px) {
  .elementor-element-fa7f410::before,
  .elementor-element-fa7f410::after,
  .elementor-element-fa7f410 .elementor-element-534dbf3::before {
    display: none;
  }
}

/* ============================================================
   Our Solutions (6b93f49) — decorative dots + circle band
   (the "View All Solutions" button was removed from the page).
   Images ship with the theme uploads; urls are relative to this
   stylesheet so they work on any domain.
   ============================================================ */
.elementor-element-6b93f49 {
  position: relative;
}
/* dot grid, top-right */
.elementor-element-6b93f49::before {
  content: "";
  position: absolute;
  top: 44px;
  right: 52px;
  width: 160px;
  height: 120px;
  background: url("../../uploads/2025/02/Group-1171272628.png") no-repeat center / contain;
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}
/* circle band, bottom-right edge */
.elementor-element-6b93f49::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 36px;
  width: 90px;
  height: 200px;
  background: url("../../uploads/2025/02/Rectangle-3-1.png") no-repeat right center / contain;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) {
  .elementor-element-6b93f49::before,
  .elementor-element-6b93f49::after {
    display: none;
  }
}

/* ============================================================
   About page — "Guiding Every Step" carousel: cards on one line
   with consistent heights (zigzag CSS removed from Customizer)
   ============================================================ */
.elementor-element-c8acf3d .swiper-slide {
  height: auto;
  top: 0;
  display: flex;
  flex-direction: column;
}
.elementor-element-c8acf3d .swiper-slide > .e-con {
  flex: 1;
}

/* ============================================================
   Solution detail template (single post, Solutions category)
   Body copy comes from the post editor — keep it readable no
   matter what blocks the author uses.
   ============================================================ */
.zl-sol-content {
  color: #3D3F4B;
  font-size: 16px;
  line-height: 1.7;
  max-width: 620px;
}
.zl-sol-content p { margin: 0 0 16px; }
.zl-sol-content h2,
.zl-sol-content h3,
.zl-sol-content h4 {
  color: #090915;
  font-weight: 600;
  margin: 26px 0 10px;
}
.zl-sol-content h2 { font-size: 26px; }
.zl-sol-content h3 { font-size: 20px; }
.zl-sol-content ul,
.zl-sol-content ol {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}
.zl-sol-content li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}
.zl-sol-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--zl-lime);
  box-shadow: inset 0 0 0 4px #fff;
  border: 1px solid #090915;
}
.zl-sol-content ol { counter-reset: zl-step; }
.zl-sol-content ol li::before {
  counter-increment: zl-step;
  content: counter(zl-step);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: #8387C9;
}
.zl-sol-content img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}
.zl-sol-image img {
  width: 100%;
  box-shadow: 0 16px 40px rgba(9, 9, 21, .12);
}
html[data-zl-theme="dark"] .zl-sol-content { color: #B9BDC9; }
html[data-zl-theme="dark"] .zl-sol-content h2,
html[data-zl-theme="dark"] .zl-sol-content h3,
html[data-zl-theme="dark"] .zl-sol-content h4 { color: #E8EDF2; }
html[data-zl-theme="dark"] .zl-sol-content ul li::before { box-shadow: inset 0 0 0 4px #15152a; }





/* ============================================================
   About page (853) — spacing cleanup + hero clip + square
   Contact Us corners
   ------------------------------------------------------------
   The About Us (9f4a1ab), Process Overview (0b07a34) and Why
   Choose Us (95def00) sections carry fixed min-heights (797/900/
   797px) far taller than their content, leaving dead bands; the
   text columns then compensate with negative top margins. Drop
   both so each section hugs its content on the 50px rhythm.
   ============================================================ */
.elementor-element-9f4a1ab,
.elementor-element-0b07a34,
.elementor-element-95def00 {
  min-height: auto !important;
}
.elementor-element-9f4a1ab .elementor-element-c836b76,
.elementor-element-9f4a1ab .elementor-element-00bd612,
.elementor-element-95def00 .elementor-element-593aa69,
.elementor-element-95def00 .elementor-element-fb30050 {
  min-height: auto !important;
}
.elementor-element-00bd612,
.elementor-element-fb30050 {
  margin-top: 0 !important;
}

/* Hero: its decorations (dot grid offset -248px below the section)
   spill over the metrics bar underneath — clip them at the hero edge */
.elementor-element-3278250 {
  overflow: hidden;
}

/* Contact Us (footer template): square the inner card's 30px radius
   on every page, and drop the 30px top padding whose gap shows the
   page background as a stray band above the section */
#footer .elementor-element-e031197 {
  border-radius: 0 !important;
}
#footer .elementor-element-3c9850a {
  padding-top: 0 !important;
  margin-top: 0 !important;
  --padding-top: 0px;
  gap: 0 !important;
}
#footer .elementor-element-3c9850a > .e-con-inner {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#footer .elementor-element-e031197 {
  margin-top: 0 !important;
}
/* no gap between the page content and the footer's Contact Us block */
#footer,
#footer #footer-widgets,
#main {
  margin-bottom: 0 !important;
}
#footer {
  margin-top: 0 !important;
}
#main {
  padding-bottom: 0 !important;
}

/* ============================================================
   Dark theme refinements (kept here, not in the generated
   dark.css, so regeneration can't wipe them; the `body` in the
   selectors out-specifies dark.css's rules)
   ============================================================ */
/* 1. The white dot-grid decorations glow on the dark ground — drop
   them (image widgets by filename + the CSS-drawn copies) */
html[data-zl-theme="dark"] img[src*="1171272628"],
html[data-zl-theme="dark"] img[src*="1171272629"] {
  display: none !important;
}
html[data-zl-theme="dark"] .elementor-element-6b93f49::before,
html[data-zl-theme="dark"] .elementor-element-fa7f410 .elementor-element-534dbf3::before,
html[data-zl-theme="dark"] .zl-faq-section::after,
html[data-zl-theme="dark"] .zl-testimonials-section::after {
  display: none !important;
}

/* 2. Cards sink into the background — give every card surface a
   slightly lighter fill and a visible border */
html[data-zl-theme="dark"] body .e-loop-item {
  background-color: #171732 !important;
  border: 1px solid #2e2e52;
  border-radius: var(--zl-radius, 16px);
}
html[data-zl-theme="dark"] body .e-loop-item .elementor-element-87fe91d {
  background-color: #171732 !important;
  border-color: #2e2e52 !important;
}
html[data-zl-theme="dark"] body .zl-faq-item {
  background: #171732 !important;
  border: 1px solid #2e2e52 !important;
}
/* metrics: same flat band as light mode (no tile boxes) — just lifted
   a step off the page ground so it still reads as a band */
html[data-zl-theme="dark"] body .zl-metrics-section {
  background: #12122a;
  border-top-color: #2a2a4a;
  border-bottom-color: #2a2a4a;
}
html[data-zl-theme="dark"] body .zl-metric-card {
  background: none;
  border: 0;
}

/* 3. Lime everywhere reads as monochrome — headings default to warm
   white; lime stays for accents, eyebrows and metric values */
html[data-zl-theme="dark"] body h1,
html[data-zl-theme="dark"] body h2,
html[data-zl-theme="dark"] body h3 {
  color: #e8edf2 !important;
}
html[data-zl-theme="dark"] body .zl-accent,
html[data-zl-theme="dark"] body .zl-eyebrow,
html[data-zl-theme="dark"] body .zl-metric-val {
  color: var(--zl-lime, #C3FD95) !important;
}
/* the consultation strip keeps its lime line on ink */
html[data-zl-theme="dark"] body .elementor-element-47cba1a .elementor-heading-title,
html[data-zl-theme="dark"] body .elementor-element-d735754 .elementor-heading-title {
  color: var(--zl-lime, #C3FD95) !important;
}

/* 4. Contact Us wrapper: its light background frames the dark card
   with a white border band in dark mode — darken the whole wrapper */
html[data-zl-theme="dark"] #footer .elementor-element-3c9850a {
  background-color: #0b0b18 !important;
}

/* 5. Buttons: the kit default is lime fill + ink text, but dark.css
   whitens every button label (unreadable on lime). Ink on lime;
   white stays only on the purple-filled buttons. body.elementor-kit-697
   is needed to out-specify dark.css's kit rule. */
html[data-zl-theme="dark"] body.elementor-kit-697 .elementor-button,
html[data-zl-theme="dark"] body.elementor-kit-697 .elementor-button:hover,
html[data-zl-theme="dark"] body.elementor-kit-697 .elementor-button:focus {
  color: #090915 !important;
}
html[data-zl-theme="dark"] body.elementor-kit-697 .elementor-button svg {
  fill: #090915;
}
html[data-zl-theme="dark"] body.elementor-kit-697 .elementor-element-8f8bfaa .elementor-button,
html[data-zl-theme="dark"] body.elementor-kit-697 .elementor-element-a776c3d .elementor-button,
html[data-zl-theme="dark"] body.elementor-kit-697 .elementor-element-7c22ef2 .elementor-button,
html[data-zl-theme="dark"] body.elementor-kit-697 .elementor-1173 .elementor-button,
html[data-zl-theme="dark"] body.elementor-kit-697 .elementor-1394 .elementor-button {
  color: #ffffff !important;
}
html[data-zl-theme="dark"] body.elementor-kit-697 .elementor-1173 .elementor-button svg,
html[data-zl-theme="dark"] body.elementor-kit-697 .elementor-1394 .elementor-button svg {
  fill: #ffffff;
}

/* 6. "Our Solutions": dark.css pins the heading lime, and the lime
   blob (8a3f00c) sits right behind the word — white text, dimmed blob */
html[data-zl-theme="dark"] body .elementor-element-e102371 .elementor-heading-title {
  color: #e8edf2 !important;
  /* ink halo keeps the white letters legible where they cross the
     lime blob behind the heading */
  text-shadow: 0 1px 0 #090915, 0 0 3px #090915, 0 0 14px rgba(9, 9, 21, .85);
}
/* the lime band ("circle band") at the section's bottom-right reads as
   a stray bright slab behind the cards on the dark ground — hide it */
html[data-zl-theme="dark"] .elementor-element-6b93f49::after {
  display: none !important;
}

/* 7. Contact form fields + social chips vanish on the dark card */
html[data-zl-theme="dark"] #footer .elementor-element-fee4e8f .elementor-field-group .elementor-field,
html[data-zl-theme="dark"] #footer .elementor-element-fee4e8f .elementor-field-group textarea.elementor-field {
  background-color: #0f0f22 !important;
  border: 1px solid #3a3a5c !important;
  color: #e8edf2 !important;
}
html[data-zl-theme="dark"] #footer .elementor-element-fee4e8f .elementor-field::placeholder {
  color: #8a8fa3 !important;
  opacity: 1;
}
html[data-zl-theme="dark"] #footer .elementor-element-fee4e8f .elementor-field:focus {
  border-color: var(--zl-lime, #C3FD95) !important;
  box-shadow: 0 0 0 3px rgba(195, 253, 149, .2);
}
html[data-zl-theme="dark"] #footer .elementor-element-8e7b107 .elementor-social-icon {
  background-color: #2a2a48 !important;
}
html[data-zl-theme="dark"] #footer .elementor-element-8e7b107 .elementor-social-icon i {
  color: #e8edf2 !important;
}
html[data-zl-theme="dark"] #footer .elementor-element-8e7b107 .elementor-social-icon svg {
  fill: #e8edf2 !important;
}
html[data-zl-theme="dark"] #footer .elementor-element-8e7b107 .elementor-social-icon:hover {
  background-color: var(--zl-lime, #C3FD95) !important;
}
html[data-zl-theme="dark"] #footer .elementor-element-8e7b107 .elementor-social-icon:hover i {
  color: #090915 !important;
}
html[data-zl-theme="dark"] #footer .elementor-element-8e7b107 .elementor-social-icon:hover svg {
  fill: #090915 !important;
}

/* ============================================================
   Testimonials decorations, class-scoped — the block above targets
   the homepage's element IDs only; these structural equivalents
   deliver the SAME ornaments to the exact copies on the Featured
   and News & Insights pages (and re-apply harmlessly on Home).
   ============================================================ */
.zl-testi-section > .e-con-inner > .e-con {
  isolation: isolate;
  position: relative;
  --min-height: auto;
  min-height: auto !important;
}
.zl-testi-section > .e-con-inner > .e-con > .e-con:first-child {
  --padding-top: 0px !important;
}
.zl-testi-section .elementor-widget-heading > .elementor-widget-container {
  margin-top: 0 !important;
}
.zl-testi-section .elementor-widget-loop-carousel {
  --swiper-pagination-spacing: 32px;
}
/* dot grid behind the heading */
.zl-testi-section > .e-con-inner > .e-con::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 298px;
  height: 312px;
  background: url("../../uploads/2025/02/Group-1171272628.png") no-repeat left top / contain;
  z-index: -1;
  pointer-events: none;
}
/* purple ring bottom-left */
.zl-testi-section::before {
  content: "" !important;
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 125px !important;
  height: 262px !important;
  background: url("../../uploads/2025/02/Ellipse-3.png") no-repeat left bottom / contain !important;
  border: none !important;
  opacity: 1 !important;
  z-index: 0;
  pointer-events: none;
}
/* lime circles bottom-right */
.zl-testi-section::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 570px;
  height: 398px;
  background: url("../../uploads/2025/02/Group-1171272632.png") no-repeat right bottom / contain;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 767px) {
  .zl-testi-section::before,
  .zl-testi-section::after,
  .zl-testi-section > .e-con-inner > .e-con::before {
    display: none;
  }
}


/* ============================================================
   Single post page (Elementor single template 2461 "Blog_detail")
   Classes are set on the template widgets: .zl-post-wrap / -side /
   -main / -back / -meta / -title / -excerpt / -hero / -content.
   ============================================================ */
.zl-post-wrap { --zl-post-gap: 56px; gap: var(--zl-post-gap); padding-top: 40px; }
.zl-post-wrap .e-con-inner { gap: var(--zl-post-gap); }

/* Back button — pill, arrow slides on hover */
.zl-back .elementor-button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 22px 10px 16px; border-radius: 999px;
  background: #fff; color: var(--zl-ink);
  border: 1px solid rgba(9,9,21,.10); box-shadow: 0 6px 20px rgba(9,9,21,.06);
  font-weight: 600; font-size: 14px; letter-spacing: .01em;
  transition: transform .25s var(--zl-ease), box-shadow .25s var(--zl-ease), border-color .25s;
}
.zl-back .elementor-button:hover { border-color: var(--zl-purple); box-shadow: 0 10px 28px rgba(131,135,201,.25); transform: translateX(-2px); }
.zl-back .elementor-button-icon { transition: transform .25s var(--zl-ease); }
.zl-back .elementor-button:hover .elementor-button-icon { transform: translateX(-3px); }

/* Meta row: category chip · date · author */
.zl-post-meta { margin-top: 28px; }
.zl-post-meta .elementor-icon-list-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.zl-post-meta .elementor-icon-list-item { font-size: 14px; color: var(--zl-grey); }
.zl-post-meta .elementor-icon-list-item:not(:last-child)::after { content: none; }
.zl-post-meta .elementor-post-info__terms-list-item,
.zl-post-meta .elementor-icon-list-item:first-child a {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--zl-lime); color: var(--zl-ink) !important;
  font-weight: 600; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
}
.zl-post-meta .elementor-icon-list-item:nth-child(n+2)::before {
  content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--zl-purple); margin-right: 14px; vertical-align: middle;
}

/* Title & lead */
.zl-post-title .elementor-heading-title {
  font-size: clamp(34px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -.02em;
  margin: 14px 0 0; max-width: 20ch;
}
.zl-post-excerpt { margin-top: 18px; }
.zl-post-excerpt .elementor-widget-container {
  font-size: 19px; line-height: 1.55; color: var(--zl-grey); max-width: 62ch;
  padding-left: 18px; border-left: 3px solid var(--zl-lime);
}

/* Featured image */
.zl-post-hero { margin-top: 36px; }
.zl-post-hero img {
  width: 100%; aspect-ratio: 16 / 8; object-fit: cover;
  border-radius: calc(var(--zl-radius) + 8px);
  box-shadow: 0 30px 60px -30px rgba(9,9,21,.45);
}

/* Article body typography */
.zl-post-content { margin-top: 44px; max-width: 72ch; }
.zl-post-content .elementor-widget-container { font-size: 17.5px; line-height: 1.75; color: #2a2b38; }
.zl-post-content p { margin: 0 0 1.35em; }
.zl-post-content p.zl-lead { font-size: 20px; line-height: 1.6; color: var(--zl-ink); font-weight: 500; }
.zl-post-content h2 {
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -.015em;
  margin: 2.2em 0 .7em; padding-top: .6em; position: relative;
}
.zl-post-content h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px;
  background: var(--zl-lime); border-radius: 2px;
}
.zl-post-content h3 { font-size: 22px; margin: 1.8em 0 .5em; }
.zl-post-content ul, .zl-post-content ol { margin: 0 0 1.5em; padding-left: 0; list-style: none; }
.zl-post-content li { position: relative; padding-left: 30px; margin-bottom: .6em; }
.zl-post-content ul li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 14px; border-radius: 50%;
  background: var(--zl-lime); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--zl-purple);
}
.zl-post-content ol { counter-reset: zl; }
.zl-post-content ol li { counter-increment: zl; }
.zl-post-content ol li::before { content: counter(zl, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--zl-purple); font-weight: 700; }
.zl-post-content blockquote {
  margin: 2em 0; padding: 26px 30px 26px 34px; position: relative;
  background: linear-gradient(135deg, rgba(131,135,201,.12), rgba(195,253,149,.18));
  border-left: 0; border-radius: var(--zl-radius);
  font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--zl-ink);
}
.zl-post-content blockquote::before {
  content: "\201C"; position: absolute; left: 14px; top: -8px; font-size: 64px; line-height: 1;
  color: var(--zl-purple); opacity: .55; font-family: Georgia, serif;
}
.zl-post-content blockquote p { margin: 0; }
.zl-post-content strong { color: var(--zl-ink); }
.zl-post-content a { color: var(--zl-purple); text-decoration: underline; text-underline-offset: 3px; }
.zl-post-content img { border-radius: var(--zl-radius); }

/* Sidebar — sticky, tidy recent posts */
.zl-post-side { position: sticky; top: 110px; align-self: flex-start; }
.zl-post-side .elementor-widget-social-icons .elementor-social-icon { transition: transform .2s var(--zl-ease), background .2s; }
.zl-post-side .elementor-widget-social-icons .elementor-social-icon:hover { transform: translateY(-2px); }
.zl-post-side .elementor-loop-container .e-loop-item { transition: transform .25s var(--zl-ease); }
.zl-post-side .elementor-loop-container .e-loop-item:hover { transform: translateX(4px); }

/* Responsive */
@media (max-width: 1024px) {
  .zl-post-wrap > .e-con-inner, .zl-post-wrap { flex-direction: column; }
  .zl-post-wrap .e-con-inner > .e-con { width: 100% !important; }
  .zl-post-side { position: static; order: 2; }
  .zl-post-main { order: 1; }
}
@media (max-width: 767px) {
  .zl-post-wrap { padding-top: 20px; }
  .zl-post-content .elementor-widget-container { font-size: 16.5px; }
  .zl-post-excerpt .elementor-widget-container { font-size: 17px; }
  .zl-post-hero img { aspect-ratio: 4 / 3; }
}

/* Dark theme */
[data-zl-theme="dark"] .zl-back .elementor-button { background: #141428; color: #fff; border-color: rgba(255,255,255,.12); box-shadow: none; }
[data-zl-theme="dark"] .zl-post-content .elementor-widget-container,
[data-zl-theme="dark"] .zl-post-content p.zl-lead,
[data-zl-theme="dark"] .zl-post-content strong,
[data-zl-theme="dark"] .zl-post-content blockquote { color: #e6e6f0; }
[data-zl-theme="dark"] .zl-post-content ul li::before { box-shadow: inset 0 0 0 4px #0f0f1e, 0 0 0 1px var(--zl-purple); }
[data-zl-theme="dark"] .zl-post-excerpt .elementor-widget-container { color: #b3b4c4; }

.zl-post-content li, .zl-post-content ul, .zl-post-content ol { font-family: inherit; font-size: inherit; line-height: inherit; }

/* ---- Single post: spacing & share icons (round 2) ---- */
.zl-post-wrap {
  padding: 48px clamp(20px, 5vw, 96px) 96px !important;
  gap: clamp(32px, 4vw, 72px);
}
.zl-post-wrap > .e-con-inner { max-width: 1320px; margin: 0 auto; gap: clamp(32px, 4vw, 72px); }
.zl-post-main { padding: 0 !important; }
.zl-post-side { padding: 0 !important; gap: 0; }
.zl-post-side > .elementor-element { margin-bottom: 0; }
.zl-post-content { margin-bottom: 40px; }
.zl-post-content h2:first-child { margin-top: 0; }

/* Share card */
.zl-post-side > .e-con:first-child {
  flex-direction: column !important; align-items: flex-start !important;
  gap: 14px !important; padding: 24px !important;
  border-radius: var(--zl-radius) !important;
  background: linear-gradient(135deg, rgba(131,135,201,.14), rgba(195,253,149,.16)) !important;
  border: 1px solid rgba(9,9,21,.06);
}
.zl-post-side > .e-con:first-child .elementor-widget-heading { order: -1; }
.zl-post-side > .e-con:first-child .elementor-heading-title {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--zl-grey);
}
.zl-post-side .elementor-widget-social-icons .elementor-social-icons-wrapper {
  display: flex !important; grid-template-columns: none !important; gap: 10px !important; justify-content: flex-start;
}
.zl-post-side .elementor-widget-social-icons .elementor-grid-item { margin: 0 !important; }
.zl-post-side .elementor-widget-social-icons .elementor-social-icon {
  width: 46px !important; height: 46px !important; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50% !important; background: var(--zl-ink) !important;
  box-shadow: 0 8px 18px -8px rgba(9,9,21,.5);
  transition: transform .22s var(--zl-ease), background .22s, box-shadow .22s;
}
.zl-post-side .elementor-widget-social-icons .elementor-social-icon svg,
.zl-post-side .elementor-widget-social-icons .elementor-social-icon i {
  width: 18px; height: 18px; fill: #fff !important; color: #fff !important; font-size: 18px;
}
.zl-post-side .elementor-widget-social-icons .elementor-social-icon:hover {
  background: var(--zl-lime) !important; transform: translateY(-3px);
  box-shadow: 0 12px 22px -8px rgba(195,253,149,.7);
}
.zl-post-side .elementor-widget-social-icons .elementor-social-icon:hover svg,
.zl-post-side .elementor-widget-social-icons .elementor-social-icon:hover i { fill: var(--zl-ink) !important; color: var(--zl-ink) !important; }

/* Recent posts */
.zl-post-side .elementor-widget-heading .elementor-heading-title { margin-top: 32px; }
.zl-post-side .elementor-loop-container { gap: 0 !important; }
.zl-post-side .elementor-loop-container .e-loop-item { padding: 18px 0 !important; border-bottom: 1px solid rgba(9,9,21,.08); }

/* Sections below the article */
.elementor-2461 .elementor-element-755c352 { padding-top: 64px !important; padding-bottom: 64px !important; }

@media (max-width: 767px) {
  .zl-post-wrap { padding: 24px 20px 56px !important; }
}
[data-zl-theme="dark"] .zl-post-side > .e-con:first-child { border-color: rgba(255,255,255,.08); }
[data-zl-theme="dark"] .zl-post-side .elementor-widget-social-icons .elementor-social-icon { background: #1d1d36 !important; }
[data-zl-theme="dark"] .zl-post-side .elementor-loop-container .e-loop-item { border-color: rgba(255,255,255,.1); }

/* share icons: uploaded SVGs carry their own path fills */
.zl-post-side .elementor-widget-social-icons .elementor-social-icon svg path { fill: #fff !important; }
.zl-post-side .elementor-widget-social-icons .elementor-social-icon:hover svg path { fill: var(--zl-ink) !important; }

/* ---- Single post: decorations behind content, section separation (round 3) ---- */
/* The ring artwork was the wrap's background image at full size; it showed
   through translucent cards. Move it into a faint, clipped pseudo layer and
   lift all content above it. */
.zl-post-wrap { background-image: none !important; position: relative; overflow: hidden; isolation: isolate; }
.zl-post-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../../uploads/2025/03/Group-2-2.png") no-repeat right -120px top -80px / 1100px auto;
  opacity: .28;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}
.zl-post-wrap > .e-con-inner, .zl-post-main, .zl-post-side { position: relative; z-index: 1; }
[data-zl-theme="dark"] .zl-post-wrap::before { opacity: .12; }

/* Opaque cards so nothing bleeds through */
.zl-post-side > .e-con:first-child { background: #F4F4FB !important; }
[data-zl-theme="dark"] .zl-post-side > .e-con:first-child { background: #16162c !important; }
.zl-post-side .elementor-loop-container .e-loop-item { background: transparent; }

/* Back button text/icon colours in both themes */
.zl-back .elementor-button, .zl-back .elementor-button .elementor-button-text, .zl-back .elementor-button svg { color: var(--zl-ink); fill: var(--zl-ink); }
[data-zl-theme="dark"] .zl-back .elementor-button,
[data-zl-theme="dark"] .zl-back .elementor-button .elementor-button-text { color: #fff !important; }
[data-zl-theme="dark"] .zl-back .elementor-button svg { fill: #fff !important; }

/* "More News & Insights" — distinct band so it reads as its own section,
   clearly separate from the Contact Us block that follows. */
.elementor-2461 .elementor-element-755c352 {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 0; padding: 88px clamp(20px, 5vw, 96px) 96px !important;
  background: linear-gradient(180deg, #F4F4FB 0%, #EEEFF8 100%) !important;
  border-top: 1px solid rgba(9,9,21,.06);
}
.elementor-2461 .elementor-element-755c352::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--zl-lime), var(--zl-purple)); z-index: 2;
}
.elementor-2461 .elementor-element-755c352 .elementor-element-8969efb,
.elementor-2461 .elementor-element-755c352 .elementor-element-315d8da { z-index: 0 !important; opacity: .6; pointer-events: none; }
.elementor-2461 .elementor-element-755c352 .elementor-widget-heading,
.elementor-2461 .elementor-element-755c352 .elementor-widget-loop-carousel { position: relative; z-index: 1; }
[data-zl-theme="dark"] .elementor-2461 .elementor-element-755c352 {
  background: linear-gradient(180deg, #11112a 0%, #0c0c1e 100%) !important;
  border-top-color: rgba(255,255,255,.08);
}

/* ---- Single post: sticky sidebar, recent-post cards, carousel numbers (round 4) ---- */
/* The card number ("01") is an absolutely positioned heading inside each
   loop item; a broad rule above made every heading in the section relative.
   Restore it. */
.elementor-2461 .elementor-element-755c352 .e-loop-item .elementor-absolute { position: absolute !important; }

/* Sticky sidebar: overflow:hidden on the wrap killed position:sticky. */
.zl-post-wrap { overflow: clip !important; }
.zl-post-wrap > .e-con-inner { align-items: flex-start; }
.zl-post-side {
  position: sticky !important; top: 100px; align-self: flex-start;
  max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; padding-bottom: 8px !important;
}
.zl-post-side::-webkit-scrollbar { display: none; }

/* Recent posts — compact cards */
.zl-post-side .elementor-widget-loop-grid .elementor-loop-container { gap: 12px !important; }
.zl-post-side .elementor-loop-container .e-loop-item { padding: 0 !important; border: 0 !important; }
.zl-post-side .e-loop-item > .e-con {
  padding: 0 !important; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid rgba(9,9,21,.08);
  box-shadow: 0 1px 2px rgba(9,9,21,.04);
  transition: transform .25s var(--zl-ease), box-shadow .25s var(--zl-ease), border-color .25s;
}
.zl-post-side .e-loop-item > .e-con > .e-con-inner {
  display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 10px 14px 10px 10px;
}
.zl-post-side .e-loop-item:hover > .e-con { transform: translateY(-2px); border-color: var(--zl-purple); box-shadow: 0 14px 28px -14px rgba(131,135,201,.55); }
.zl-post-side .e-loop-item .elementor-widget-image { flex: 0 0 76px; width: 76px !important; max-width: 76px; margin: 0; }
.zl-post-side .e-loop-item .elementor-widget-image img {
  width: 76px; height: 76px; object-fit: cover; border-radius: 10px; display: block;
  transition: transform .4s var(--zl-ease);
}
.zl-post-side .e-loop-item:hover .elementor-widget-image img { transform: scale(1.06); }
.zl-post-side .e-loop-item .e-con.e-child { flex: 1 1 auto; min-width: 0; padding: 0 !important; gap: 6px; }
.zl-post-side .e-loop-item .elementor-widget-theme-post-title { width: 100% !important; }
.zl-post-side .e-loop-item .elementor-heading-title {
  font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; color: var(--zl-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zl-post-side .e-loop-item .elementor-heading-title a { color: inherit; }
.zl-post-side .e-loop-item .elementor-widget-post-info { width: 100% !important; }
.zl-post-side .e-loop-item .elementor-post-info { display: flex; align-items: center; gap: 10px; }
.zl-post-side .e-loop-item .elementor-icon-list-item { font-size: 12px !important; color: var(--zl-grey) !important; }
.zl-post-side .e-loop-item .elementor-icon-list-item::after { content: none !important; }
.zl-post-side .e-loop-item .elementor-post-info__terms-list-item {
  display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--zl-lime);
  color: var(--zl-ink) !important; font-size: 10.5px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.zl-post-side .e-loop-item time { color: var(--zl-grey) !important; font-size: 12px; }
.zl-post-side .e-loop-item a { text-decoration: none; }
.zl-post-side .elementor-loop-container .e-loop-item:hover { transform: none; }

[data-zl-theme="dark"] .zl-post-side .e-loop-item > .e-con { background: #16162c; border-color: rgba(255,255,255,.08); }
[data-zl-theme="dark"] .zl-post-side .e-loop-item .elementor-heading-title,
[data-zl-theme="dark"] .zl-post-side .e-loop-item .elementor-heading-title a { color: #fff; }
[data-zl-theme="dark"] .zl-post-side .e-loop-item time,
[data-zl-theme="dark"] .zl-post-side .e-loop-item .elementor-icon-list-item { color: #b3b4c4 !important; }

@media (max-width: 1024px) {
  .zl-post-side { position: static !important; max-height: none; overflow: visible; }
}

/* Featured + News & Insights: no dot grid behind the testimonial heading */
.elementor-2803 .zl-testi-section > .e-con-inner > .e-con::before,
.elementor-2056 .zl-testi-section > .e-con-inner > .e-con::before {
  display: none !important;
}

/* ============================================================
   RESPONSIVE LAYER
   The desktop design uses fixed pixel widths (574px text columns,
   805px headings, absolute decorations) with no mobile overrides,
   so on phones everything overflowed the right edge and even pushed
   the hamburger menu off-screen. These rules make every container,
   widget and grid fluid below the tablet breakpoint.
   ============================================================ */
@media (max-width: 1024px) {
  /* containers + widgets: never wider than the screen */
  .e-con,
  .e-con-inner,
  .e-con.e-child {
    --width: 100% !important;
    --content-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .elementor-widget,
  .elementor-widget__width-initial,
  .elementor-widget__width-auto {
    --container-widget-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .e-con > .e-con-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* full-bleed helpers stay full-bleed but never exceed the screen */
  .zl-testi-section,
  #footer .elementor-element-1173035,
  #footer .elementor-element-3c9850a {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  /* long headings wrap instead of overflowing */
  h1, h2, h3, .elementor-heading-title {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  /* rows of columns stack */
  .e-con[class*="e-con"] > .e-con-inner,
  .e-con.e-flex > .e-con-inner {
    flex-wrap: wrap !important;
  }
  /* absolutely positioned decorations mostly clutter small screens */
  .elementor-widget-image.elementor-absolute {
    display: none !important;
  }
  /* images inside content are fluid */
  .elementor-widget-image img,
  .elementor-widget-theme-post-featured-image img {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  /* type scale for phones */
  h1, h1.elementor-heading-title { font-size: clamp(30px, 8.5vw, 40px) !important; line-height: 1.1 !important; }
  h2, h2.elementor-heading-title { font-size: clamp(26px, 7.5vw, 34px) !important; line-height: 1.15 !important; }
  h3, h3.elementor-heading-title { font-size: clamp(19px, 5.5vw, 24px) !important; line-height: 1.25 !important; }
  .zl-shead h2 { font-size: clamp(30px, 8vw, 38px) !important; }
  /* sections breathe less on phones */
  .e-con.e-parent { --padding-top: 40px; --padding-bottom: 40px; }
  /* stats bar: 2 columns, smaller numbers */
  .zl-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .zl-metric-val { font-size: 30px !important; }
  .zl-metric-lbl { font-size: 12px !important; }
  /* injected sections: full-width containers */
  .zl-container { padding: 0 20px !important; }
  .zl-testimonials-section .zl-container,
  .zl-faq-section .zl-container { padding: 0 20px !important; }
  .zl-faq-section::before, .zl-faq-section::after,
  .zl-testimonials-section::before, .zl-testimonials-section::after { display: none !important; }
  /* footer: stack the columns, center the legal line */
  #footer .elementor-element-1173035 .e-con-inner > .e-con { flex-direction: column !important; }
  #footer .elementor-element-1173035 .elementor-widget-theme-site-logo img { height: 42px !important; }
  #footer .elementor-element-1173035::after { font-size: 26vw; }
  /* social icons wrap nicely */
  .elementor-widget-social-icons .elementor-social-icons-wrapper { gap: 8px; }
  /* testimonial slider: hide the oversized bottom-right circles */
  .zl-testi-section::after { display: none !important; }
}

/* ---- Mobile header: hamburger + theme toggle side by side ---- */
@media (max-width: 959px) {
  #site-header.transparent-header #site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    min-height: 64px;
  }
  .oceanwp-mobile-menu-icon.mobile-right {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 14px;
    transform: none !important;
  }
  .oceanwp-mobile-menu-icon a.mobile-menu {
    color: var(--zl-ink, #090915);
    font-size: 22px;
  }
  html[data-zl-theme="dark"] .oceanwp-mobile-menu-icon a.mobile-menu { color: #E8EDF2; }
  .zl-theme-toggle { margin-left: 0 !important; }
}

/* Solution detail hero: breathing room below the header now the eyebrow is gone */
.elementor-3315 .elementor-element-sd1col { padding-top: clamp(48px, 7vw, 110px) !important; }

/* ============================================================
   Legal pages (Privacy Policy, post 29) — .zl-legal-* layout
   Header band → sticky "On this page" TOC + sectioned content
   ============================================================ */
/* header band */
.zl-legal-hero {
  --padding-top: 0px; --padding-bottom: 0px;
  padding: 120px 40px 56px !important;
  background: #F5F5FA;
  position: relative;
  overflow: hidden;
  align-items: flex-start !important;
  gap: 14px;
}
.zl-legal-hero::after {
  /* soft lime arc in the corner, clipped */
  content: "";
  position: absolute;
  right: -160px; top: -160px;
  width: 460px; height: 460px;
  border-radius: 50%;
  border: 60px solid var(--zl-lime, #C3FD95);
  opacity: .55;
  pointer-events: none;
}
.zl-legal-hero > .e-con-inner,
.zl-legal-hero > * { position: relative; z-index: 1; }
.zl-legal-back .elementor-button {
  background: transparent !important;
  color: var(--zl-grey, #757781) !important;
  border: 1px solid #D9DBE6 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
.zl-legal-back .elementor-button:hover {
  border-color: var(--zl-ink, #090915) !important;
  color: var(--zl-ink, #090915) !important;
}
.zl-legal-eyebrow .elementor-heading-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: #5E8F3A !important;
  margin: 18px 0 0 !important;
}
.zl-legal-title .elementor-heading-title {
  font-family: 'pp-neue-machina-rg', 'Bricolage Grotesque', sans-serif;
  font-size: clamp(44px, 6vw, 84px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.01em;
  color: var(--zl-ink, #090915) !important;
  margin: 0 !important;
}
.zl-legal-metawrap p.zl-legal-meta {
  margin: 0;
  font-size: 15px;
  color: var(--zl-grey, #757781);
}
.zl-legal-metawrap p.zl-legal-meta strong { color: var(--zl-ink, #090915); font-weight: 600; }

/* body: TOC + content */
.zl-legal-body {
  --padding-top: 0px; --padding-bottom: 0px;
  padding: 64px 40px 96px !important;
  gap: 56px;
  align-items: flex-start !important;
}
.zl-legal-toc {
  width: 280px !important;
  max-width: 280px !important;
  flex: 0 0 280px !important;
  position: sticky;
  top: 110px;
  gap: 12px;
  padding: 22px 22px 18px !important;
  background: #FFFFFF;
  border: 1px solid #E7E8EF;
  border-radius: var(--zl-radius, 16px);
  box-shadow: 0 6px 24px rgba(9, 9, 21, .05);
}
.zl-legal-toc-title .elementor-heading-title {
  font-size: 12px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--zl-grey, #757781) !important;
  margin: 0 !important;
}
.zl-legal-toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.zl-legal-toc-list li { margin: 0; padding: 0; }
.zl-legal-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--zl-ink, #090915);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.zl-legal-toc-list a:hover { background: #F0F1F7; }
.zl-legal-toc-num {
  font-family: 'pp-neue-machina-rg', monospace;
  font-size: 11px;
  color: #5E8F3A;
  min-width: 20px;
}
.zl-legal-helpwrap p.zl-legal-help {
  margin: 8px 0 0;
  padding-top: 14px;
  border-top: 1px solid #E7E8EF;
  font-size: 13px;
  color: var(--zl-grey, #757781);
}
.zl-legal-helpwrap a { color: #5E8F3A; font-weight: 600; text-decoration: none; }

.zl-legal-content {
  flex: 1 1 auto !important;
  max-width: 760px;
  gap: 18px;
}
.zl-legal-section {
  --padding-top: 0px; --padding-bottom: 0px;
  padding: 28px 30px !important;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid #E7E8EF;
  border-radius: var(--zl-radius, 16px);
  scroll-margin-top: 110px;
}
.zl-legal-h .elementor-heading-title {
  font-size: 24px !important;
  line-height: 1.25 !important;
  color: var(--zl-ink, #090915) !important;
  margin: 0 !important;
}
.zl-legal-p p {
  font-size: 16.5px;
  line-height: 1.75;
  color: #4B4E5C;
  margin: 0 0 14px;
}
.zl-legal-p p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
  .zl-legal-body { flex-direction: column !important; gap: 28px; padding: 40px 24px 64px !important; }
  .zl-legal-toc { position: static; width: 100% !important; max-width: none !important; flex-basis: auto !important; }
  .zl-legal-hero { padding: 100px 24px 40px !important; }
}
@media (max-width: 767px) {
  .zl-legal-toc { display: none !important; }
  .zl-legal-section { padding: 22px 20px !important; }
}

/* dark theme */
html[data-zl-theme="dark"] .zl-legal-hero { background: #10101f; }
html[data-zl-theme="dark"] .zl-legal-hero::after { opacity: .25; }
html[data-zl-theme="dark"] .zl-legal-back .elementor-button {
  border-color: #3a3a5c !important;
  color: #b9bdc9 !important;
}
html[data-zl-theme="dark"] .zl-legal-back .elementor-button:hover {
  border-color: var(--zl-lime, #C3FD95) !important;
  color: var(--zl-lime, #C3FD95) !important;
}
html[data-zl-theme="dark"] body .zl-legal-eyebrow .elementor-heading-title,
html[data-zl-theme="dark"] .zl-legal-toc-num,
html[data-zl-theme="dark"] .zl-legal-helpwrap a { color: var(--zl-lime, #C3FD95) !important; }
html[data-zl-theme="dark"] .zl-legal-metawrap p.zl-legal-meta strong { color: #e8edf2; }
html[data-zl-theme="dark"] .zl-legal-toc,
html[data-zl-theme="dark"] .zl-legal-section {
  background: #15152a;
  border-color: #2e2e52;
  box-shadow: none;
}
html[data-zl-theme="dark"] .zl-legal-title .elementor-heading-title,
html[data-zl-theme="dark"] .zl-legal-h .elementor-heading-title {
  color: #e8edf2 !important;
}
html[data-zl-theme="dark"] body.elementor-kit-697 .zl-legal-back .elementor-button {
  color: #b9bdc9 !important;
}
html[data-zl-theme="dark"] body.elementor-kit-697 .zl-legal-back .elementor-button:hover {
  color: var(--zl-lime, #C3FD95) !important;
}
html[data-zl-theme="dark"] .zl-legal-toc-list a { color: #e8edf2; }
html[data-zl-theme="dark"] .zl-legal-toc-list a:hover { background: #1f1f3a; }
html[data-zl-theme="dark"] .zl-legal-helpwrap p.zl-legal-help { border-top-color: #2e2e52; }
html[data-zl-theme="dark"] .zl-legal-p p { color: #b9bdc9; }

@media (max-width: 767px) {
  /* card number badges (01/02…) were pinned by desktop px offsets and
     clipped at the left edge — anchor them top-right on phones */
  .e-loop-item .elementor-widget-heading.elementor-absolute {
    left: auto !important;
    right: 16px !important;
    top: 16px !important;
  }
  /* footer links stay readable in the stacked mobile menu */
  #footer .elementor-element-1173035 a { color: #B9BDC9 !important; }
}

/* ============================================================
   Mobile round 2
   ============================================================ */
@media (max-width: 767px) {
  /* Solutions: show ALL cards stacked instead of a 1-up autoplay slider
     (arrows/dots are off on this carousel, so users could not browse) */
  .elementor-element-3a6afc5 .swiper-wrapper,
  .elementor-element-3a6afc5 .swiper-wrapper.swiper-wrapper {
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    gap: 18px;
  }
  .elementor-element-3a6afc5 .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
  }
  .elementor-element-3a6afc5 .swiper { overflow: visible !important; }
  .elementor-element-3a6afc5 .elementor-swiper-button { display: none !important; }

  /* card number badges: drop them on phones (they escaped the cards) */
  .e-loop-item .elementor-widget-heading.elementor-absolute { display: none !important; }

  /* hamburger: compact, icon only */
  .oceanwp-mobile-menu-icon a.mobile-menu { font-size: 18px !important; }
  .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-text { display: none !important; }

  /* footer: tidy stacked layout */
  #footer .elementor-element-1173035 .e-con,
  #footer .elementor-element-1173035 .e-con-inner {
    min-height: auto !important;
    --min-height: auto !important;
  }
  #footer .elementor-element-1173035 > .e-con-inner {
    padding: 36px 20px 28px !important;
    gap: 20px !important;
  }
  #footer .elementor-element-1173035 .e-con-inner > .e-con { gap: 18px !important; }
  #footer .elementor-element-1173035::after { display: none; }           /* watermark */
  #footer .elementor-element-1173035 .elementor-widget-theme-site-logo { text-align: left; }
  #footer .elementor-element-1173035 .elementor-nav-menu--layout-horizontal ul { flex-wrap: wrap; gap: 4px 18px; }
  #footer .elementor-element-1173035 .elementor-nav-menu a { padding: 4px 0 !important; font-size: 14px; }
  #footer .elementor-element-1173035 .elementor-widget-image.elementor-absolute { display: none !important; }
  #footer .elementor-element-1173035 input[type="email"] { width: 100% !important; }
  #footer .elementor-element-1173035 p.elementor-heading-title { font-size: 12px; line-height: 1.5; }

  /* theme toggle lives in the footer on phones */
  .zl-toggle-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #B9BDC9;
    font-size: 13px;
    margin-top: 6px;
  }
  .zl-toggle-footer .zl-theme-toggle { margin: 0 !important; }
}

@media (max-width: 767px) {
  /* stacked Solutions: hide Swiper's infinite-loop clone slides */
  .elementor-element-3a6afc5 .swiper-slide-duplicate { display: none !important; }
  /* footer mobile menu: plain links, no dropdown boxes */
  #footer .elementor-element-1173035 .elementor-nav-menu--dropdown,
  #footer .elementor-element-1173035 .elementor-nav-menu--dropdown a,
  #footer .elementor-element-1173035 .elementor-nav-menu--dropdown li {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  #footer .elementor-element-1173035 .elementor-nav-menu--dropdown a {
    color: #B9BDC9 !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
  }
  #footer .elementor-element-1173035 .elementor-menu-toggle { display: none !important; }
  #footer .elementor-element-1173035 .elementor-nav-menu--dropdown { display: block !important; position: static !important; }
}

/* Mobile header: hamburger pinned to the right edge */
@media (max-width: 959px) {
  #site-header.transparent-header #site-header-inner { justify-content: flex-start; }
  #site-header.transparent-header #site-navigation-wrap { display: none !important; }
  .oceanwp-mobile-menu-icon.mobile-right { margin-left: auto !important; }
}

/* Contact section on phones: full-width SEND button, breathing room above footer */
@media (max-width: 767px) {
  #footer .elementor-element-3c9850a > .e-con-inner {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }
  #footer .elementor-element-3c9850a .elementor-widget-form .elementor-field-type-submit,
  #footer .elementor-element-3c9850a .elementor-button-wrapper {
    width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  #footer .elementor-element-3c9850a .elementor-widget-form button[type="submit"],
  #footer .elementor-element-3c9850a .elementor-button {
    width: 100% !important;
    justify-content: center !important;
    margin: 6px 0 0 !important;
  }
}