/* =========================================================
   ClixLogix Homepage Styles — v3.0.0
   Pixel-perfect match to XD reference (1600px artboard)
   Font: Cabin (per XD spec)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/* ---------- CSS Variables (matching reference) ---------- */
:root {
  --hp-font: 'Cabin', sans-serif;
  --hp-orange: #E8611A;
  --hp-orange-light: #F4943E;
  --hp-orange-dark: #C94E10;
  --hp-dark: #142533;
  --hp-dark-bg: #000000;
  --hp-text: #898D90;
  --hp-text-light: #999;
  --hp-white: #fff;
  --hp-light-bg: #F8F8F8;
  --hp-border: #E8E8E8;
  --hp-max-w: 1140px;
  /* Hoist Reviews-page tokens so .clx-breadcrumb (and any other
     component using these vars outside the .clx-rev wrapper) resolves
     correctly on every page. They also exist scoped on .clx-rev below. */
  --rev-orange: #FA4900;
  --rev-dark:   #142533;
  --rev-text:   #6F7A82;
  --rev-muted:  #98A0A6;
  --rev-rule:   #ECECEC;
}

/* ==========================================================
   GLOBAL: Override Elementor / Theme defaults on homepage
   ========================================================== */
/* Fix ALL heading colors — the theme sets a blue default */
body.page .elementor-heading-title,
body.page .elementor h1,
body.page .elementor h2,
body.page .elementor h3,
body.page .elementor h4,
body.page .elementor h5,
body.page .elementor h6 {
  color: var(--hp-dark) !important;
}
/* White headings for any section with a dark background — higher specificity */
body.page .clx-dark-section .elementor-heading-title,
body.page .clx-dark-section h1, body.page .clx-dark-section h2,
body.page .clx-dark-section h3, body.page .clx-dark-section h4,
body.page .clx-dark-section h5, body.page .clx-dark-section h6,
body.page .clx-solutions-section .elementor-heading-title,
body.page .clx-solutions-section h1, body.page .clx-solutions-section h2,
body.page .clx-solutions-section h3, body.page .clx-solutions-section h4,
body.page .clx-solutions-section h5, body.page .clx-solutions-section h6,
body.page .clx-why-section .elementor-heading-title,
body.page .clx-why-section h1, body.page .clx-why-section h2,
body.page .clx-why-section h3, body.page .clx-why-section h4,
body.page .clx-why-section h5, body.page .clx-why-section h6 {
  color: var(--hp-white) !important;
}
/* Also target text in dark sections */
body.page .clx-dark-section .elementor-text-editor,
body.page .clx-dark-section .elementor-text-editor p,
body.page .clx-solutions-section .elementor-text-editor,
body.page .clx-solutions-section .elementor-text-editor p {
  color: rgba(255,255,255,.6) !important;
}
body.page .clx-why-section .elementor-text-editor,
body.page .clx-why-section .elementor-text-editor p {
  color: rgba(255,255,255,.5) !important;
}

/* Apply Cabin font to all homepage content */
body.elementor-page .elementor-section,
body.elementor-page .elementor-section * {
  font-family: var(--hp-font) !important;
}

/* Force max-width on every top-level homepage section.
   This file only loads on the homepage, so there's no spillover to inner
   pages. Every homepage section (built via clx_section) uses layout=full_width
   so the section background spans the viewport while the inner content
   container is clamped to 1140px by this rule. */
body.elementor-page .elementor-top-section > .elementor-container {
  max-width: var(--hp-max-w) !important;
  margin: 0 auto;
  padding: 0 20px;
}
/* Remove Elementor widget bottom margin */
body.elementor-page .elementor-widget {
  margin-bottom: 0;
}


/* ---------- CTA link style — matches .clx-about-cta ---------- */
.clx-lc,
.clx-lc:hover,
.clx-lc:focus,
.clx-lc:active,
.clx-lc:visited {
  color: #FA4900 !important;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  display: inline-block;
  text-decoration: underline !important;
  text-decoration-color: #FA4900 !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 9px;
}
.clx-lc::after {
  content: '\2192';
  display: inline-block;
  margin-left: 14px;
  text-decoration: none;
  font-size: 1.15em;
  font-weight: 900;
  -webkit-text-stroke: 1px #FA4900;
  line-height: 1;
  vertical-align: -1px;
  transition: transform 0.25s ease;
}
.clx-lc:hover::after {
  transform: translateX(5px);
}
/* CTA label for a service with no hub page yet — rendered as a <span>.
   Reads as a muted label: no orange, no → arrow, no pointer. */
.clx-lc--static {
  color: var(--hp-text) !important;
  cursor: default;
}
.clx-lc--static::after {
  content: none !important;
}
/* Consistent bottom spacing below every .clx-lc CTA (homepage, about-us,
   how-we-work, our-team, etc.) so the link doesn't sit flush against the
   next section. Applies both to the widget and inner container so nothing
   else overrides or margin-collapses. */
body.elementor-page .elementor-widget-text-editor:has(a.clx-lc),
body.elementor-page .elementor-widget:has(> .elementor-widget-container > p > a.clx-lc) {
  padding-bottom: 32px !important;
}

/* Shared split-row pattern (clx-split-row) — heading + inner 2-col with
   image on one side, text on the other. Image fills its column full
   height via object-fit cover; text column is vertically centered so
   both sides sit level. Add `clx-split-row` to the outer section on any
   page that needs this layout. */
.clx-split-row .elementor-inner-section > .elementor-container {
  align-items: stretch !important;
  gap: 3em !important;
}
/* Zero per-post column inner padding so gap on the container is the only
   spacing between image and text (otherwise bfee720 gets double gap from
   its 3em right-padding on 48710f2). */
.clx-split-row .elementor-inner-section > .elementor-container > .elementor-column > .elementor-element-populated {
  padding: 0 !important;
}
.clx-split-row .elementor-widget-image,
.clx-split-row .elementor-widget-image > .elementor-widget-container {
  height: 100% !important;
}
.clx-split-row .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 16px !important;
}
.clx-split-row .elementor-inner-section > .elementor-container > .elementor-column > .elementor-element-populated {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Permanent fix for FAQ accordion content rendering bold after clone:
   pp-advanced-accordion (PowerPack) inherits a bold default from some
   parent rule when its styling settings aren't carried through a deep
   clone of the widget JSON. Force regular weight on tab-content text
   globally — keeps <strong>/<b> bold so intentional emphasis still works. */
.pp-advanced-accordion .pp-accordion-tab-content,
.pp-advanced-accordion .pp-accordion-tab-content p,
.elementor-widget-pp-advanced-accordion .pp-accordion-tab-content,
.elementor-widget-pp-advanced-accordion .pp-accordion-tab-content p {
  font-weight: 400 !important;
}

/* CTA alignment — right-align the link only, never inherit to surrounding text.
   For widget-containers that hold ONLY a .clx-lc (the inline style="text-align:right"
   wrappers in PHP already take care of those). For the about button widget, right-align
   the button wrapper. For CTAs embedded inside cards (tech cards etc.), float right
   so the title/body/benefits above it keep their left alignment. */
body.page .clx-about-cta .elementor-button-wrapper {
  text-align: right !important;
}
body.page .clx-tech-card,
body.page .clx-process-step {
  display: flex;
  flex-direction: column;
}
body.page .clx-tech-card .clx-lc,
body.page .clx-process-step .clx-lc {
  align-self: flex-end;
  margin-top: auto;
}

/* Orange // prefix */
.clx-sl2 {
  color: var(--hp-orange);
  font-weight: 700;
  font-style: normal;
}


/* =========================================================
   1. HERO SECTION
   ========================================================= */
.clx-hero-section {
  position: relative;
  overflow: visible !important;
  padding: 70px 0 70px !important;
  min-height: 600px;
  background: var(--hp-white) !important;
}
/* Prevent horizontal scrollbar from the bleeding cube */
body.page {
  overflow-x: hidden;
}
.clx-hero-section > .elementor-container {
  position: relative;
  z-index: 2;
  text-align: center;
}
/* Hero label "Leading" — Cabin, Italic - 28px, Clixlogix orange */
body.page .clx-hero-label .elementor-heading-title {
  font-family: var(--hp-font) !important;
  font-style: italic;
  font-weight: 400;
  font-size: 28px !important;
  line-height: 84px !important;
  letter-spacing: -0.84px;
  margin-bottom: 4px;
  background: linear-gradient(90deg, #ff9900 0%, #f57e07 40%, #ef4e07 75%, #fa4900 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
/* Hero h1 — Cabin, Medium - 62px, #142533 */
.clx-hero-title .elementor-heading-title {
  font-family: var(--hp-font) !important;
  font-weight: 500 !important;
  font-size: 62px !important;
  line-height: 66px !important;
  color: #142533 !important;
  letter-spacing: -1.86px;
  margin: 0 auto 24px;
  max-width: 900px;
}
.clx-hero-title .clx-hero-break {
  display: block;
}

/* Typewriter */
.clx-tw-container .elementor-widget-container {
  text-align: center;
}
/* Typewriter — Cabin, Regular - 26px, #142533 */
.clx-tw-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--hp-font) !important;
  font-size: 26px;
  color: #142533;
  font-weight: 400;
  letter-spacing: -0.78px;
  margin-top: 20px;
}
.clx-tw-box {
  border: 1px solid var(--hp-border);
  border-radius: 4px;
  padding: 12px 20px;
  position: relative;
  min-width: 190px;
  text-align: left;
  display: inline-block;
}
.clx-tw-label {
  position: absolute;
  top: -14px;
  left: 14px;
  font-size: 12px;
  color: #000248;
  font-weight: 400;
  background: var(--hp-white);
  padding: 0 4px;
  letter-spacing: -0.5px;
}
.clx-tw-text {
  color: #F57E07;
  font-weight: 500;
  font-style: italic;
  font-size: 26px;
}
.clx-tw-cursor {
  display: inline-block;
  width: 1px;
  height: 25px;
  background: var(--hp-orange);
  animation: clx-blink 1s infinite;
  vertical-align: middle;
  margin-left: 7px;
  transform: skewX(-12deg);
}
@keyframes clx-blink {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Hero decorative images (injected via homepage.js) */
.clx-hero-stripes-wrap {
  overflow: visible;
  z-index: 5 !important;
}
.clx-hero-stripes {
  object-fit: contain;
}
.clx-hc {
  max-width: none !important;
  height: auto !important;
}
.clx-hc4 {
  position: absolute;
  right: -97px;
  top: 415px;
  width: 330px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(-40px 23px 46px rgba(245,124,6,0.16));
}

/* Cube float — subtle drift + rotate, offset phases so they don't march in lockstep */
.clx-hc4 {
  animation: clx-float-4 2.8s ease-in-out -0.6s infinite alternate;
  transform-origin: center center;
  will-change: transform;
}
.clx-hc1 {
  animation: clx-float-1 2.4s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
}
.clx-hc2 {
  animation: clx-float-2 2s ease-in-out -0.3s infinite alternate;
  transform-origin: center center;
  will-change: transform;
}
.clx-hc5 {
  animation: clx-float-5 3.2s ease-in-out -0.9s infinite alternate;
  transform-origin: center center;
  will-change: transform;
}
@keyframes clx-float-4 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(-6px, -14px, 0) rotate(2deg); }
}
@keyframes clx-float-1 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(3px, -8px, 0) rotate(-1.5deg); }
}
@keyframes clx-float-2 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(-4px, 6px, 0) rotate(3deg); }
}
@keyframes clx-float-5 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(5px, -10px, 0) rotate(-2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .clx-hc1, .clx-hc2, .clx-hc4, .clx-hc5 { animation: none !important; }
}

/* ---------- Laptop screens — scale decorations ---------- */
@media (max-width: 1600px) {
  .clx-logo img,
  .clx-nav .clx-logo img,
  .clx-logo a img {
    height: 45px !important;
  }
}
/* ---------- Laptop / 13" screens (≤1440px) ---------- */
@media (max-width: 1440px) {
  .clx-logo img,
  .clx-nav .clx-logo img,
  .clx-logo a img {
    height: 38px !important;
  }
  /* Ratings bar — sized via clamp() in base rules */
  .clx-hero-section {
    min-height: 480px !important;
    padding: 45px 0 45px !important;
  }
  body.page .clx-hero-label .elementor-heading-title {
    font-size: 22px !important;
    line-height: 50px !important;
  }
  .clx-hero-title .elementor-heading-title {
    font-size: 46px !important;
    line-height: 52px !important;
    margin-bottom: 16px;
    max-width: 720px;
  }
  .clx-tw-row {
    font-size: 20px;
    margin-top: 14px;
  }
  .clx-tw-text {
    font-size: 20px !important;
  }
  .clx-tw-box {
    min-width: 150px;
    padding: 8px 14px;
  }
  .clx-tw-label {
    font-size: 10px !important;
    top: -10px !important;
  }
  /* Move stripes to touch edge of "S" in heading */
  .clx-hero-stripes {
    left: -10px !important;
    width: 240px !important;
    height: 320px !important;
  }
  .clx-hc1 {
    left: 15px !important;
    top: 245px !important;
    width: 125px !important;
  }
  .clx-hc4 {
    width: 220px !important;
    top: 340px !important;
    right: -60px !important;
  }
  .clx-logo-slider {
    margin-top: -20px !important;
    z-index: 3 !important;
  }
  .clx-logo-item {
    min-width: 140px !important;
    padding: 8px 16px !important;
  }
  body.page .clx-logo-slider .clx-logo-marquee .clx-logo-item img,
  .clx-logo-item img {
    height: 32px !important;
  }
}
/* ---------- Small laptop / 13" (≤1280px) ---------- */
@media (max-width: 1280px) {
  .clx-logo img,
  .clx-nav .clx-logo img,
  .clx-logo a img {
    height: 45px !important;
    margin-right: 100px;
  }
  .clx-hero-section {
    min-height: 440px !important;
    padding: 30px 0 30px !important;
  }
  .clx-hero-title .elementor-heading-title {
    font-size: 38px !important;
    line-height: 44px !important;
  }
  body.page .clx-hero-label .elementor-heading-title {
    font-size: 17px !important;
    line-height: 40px !important;
  }
  .clx-tw-row {
    font-size: 17px;
    margin-top: 8px;
  }
  .clx-tw-text {
    font-size: 17px !important;
  }
  .clx-hero-stripes {
    left: 141px !important;
    width: 200px !important;
    height: 270px !important;
  }
  .clx-hc1 {
    left: 232px !important;
    top: 210px !important;
    width: 100px !important;
  }
  .clx-hc5 {
    display: none !important;
  }
  .clx-hc4 {
    width: 180px !important;
    top: 290px !important;
    right: -70px !important;
  }
  .clx-logo-slider {
    margin-top: -10px !important;
    z-index: 3 !important;
  }
  .clx-logo-item {
    min-width: 200px !important;
    padding: 0px 35px !important;
  }
  body.page .clx-logo-slider .clx-logo-marquee .clx-logo-item img,
  .clx-logo-item img {
    height: 35px !important;
  }
  .clx-logo-slider {
    padding-top: 10px !important;
    padding-bottom: 40px !important;
  }
  .clx-logo-marquee {
    max-width: 1140px !important;
    margin-left: 173px !important;
    margin-right: auto !important;
    padding: 0 !important;
  }
  /* Ratings bar — sized via clamp() in base rules */
}
@media (max-width: 768px) {
  .clx-hero-stripes-wrap,
  .clx-hero-stripes,
  .clx-hc {
    display: none !important;
  }
}

/* =========================================================
   HERO — mobile typography (≤767px)
   Word-break: long words like "Development" and "Transformation" were
   splitting mid-character because the hero column collapsed below 200px
   on iPhone widths. Force word-boundary wrapping and a fluid font size
   so the headline stays legible at every mobile width.
   ========================================================= */
@media (max-width: 767px) {
  #hero-designed-component .clx-hero-title .elementor-heading-title {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    font-size: clamp(24px, 7.2vw, 32px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
  }
  #hero-designed-component .clx-hero-label .elementor-heading-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.08em !important;
  }
}


/* =========================================================
   LOGO SLIDER — PowerPack Logo Carousel
   ========================================================= */
.clx-logo-slider {
  padding: 0 0 60px !important;
  margin-top: -110px !important;
  position: relative;
  z-index: 2;
  background: transparent !important;
}
/* Logo marquee — slow, smooth, infinite scroll with fade edges */
.clx-logo-marquee {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.clx-logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: clx-marquee 45s linear infinite;
}
.clx-logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 10px 30px;
  position: relative;
}
body.page .clx-logo-slider .clx-logo-marquee .clx-logo-item img,
.clx-logo-item img {
  height: 40px;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  transition: opacity .3s, filter .3s;
}
/* Override PP grayscale filter on our custom marquee */
.clx-logo-marquee .clx-logo-item img {
  filter: none !important;
}
@keyframes clx-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.clx-logo-slider .pp-slider-arrow,
.clx-logo-slider .swiper-pagination,
.clx-logo-slider .pp-swiper-button {
  display: none !important;
}
/* Hide original Swiper elements (marquee replaces .swiper-wrapper) */
.clx-logo-slider .swiper-wrapper {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
.clx-logo-slider .clx-logo-marquee {
  visibility: visible !important;
  height: auto !important;
  overflow: hidden !important;
}


/* =========================================================
   2. RATINGS BAR
   ========================================================= */
.clx-ratings-section {
  position: relative;
  z-index: 10;
  margin-top: -20px !important;
  padding: 0 !important;
  background: transparent !important;
}
.clx-ratings-section .elementor-widget-wrap {
  padding-bottom: 10px !important;
}
.clx-ratings-bar > .elementor-container,
.clx-ratings-section > .elementor-container {
  max-width: clamp(440px, 33vw, 700px) !important;
  background: #F8F8F8;
  border-radius: 16px;
  box-shadow:
    0 35px 50px -18px rgba(0, 0, 0, 0.7),
    0 20px 30px -15px rgba(0, 0, 0, 0.55),
    18px 25px 35px -15px rgba(0, 0, 0, 0.45);
  padding: clamp(18px, 1.6vw, 28px) clamp(24px, 2.5vw, 48px) !important;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.clx-ratings-section .elementor-column {
  text-align: center;
  position: relative;
  padding: 0 clamp(8px, 1vw, 20px);
}
.clx-ratings-section .elementor-column > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.7vw, 14px);
  padding: 0 !important;
}
.clx-ratings-section .elementor-column .elementor-widget {
  margin: 0 !important;
}
.clx-ratings-section .elementor-column .elementor-widget-image {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clx-ratings-section .elementor-column:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 10%;
  height: 80%;
  width: 1px;
  background: #E0E0E0;
}
.clx-ratings-section .elementor-image img,
.clx-ratings-section .elementor-widget-image img {
  max-width: clamp(80px, 9vw, 160px) !important;
  max-height: clamp(20px, 1.6vw, 30px) !important;
  height: auto !important;
  width: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}
/* Per-logo size tuning: nth-child(1)=Trustpilot, (2)=Clutch, (3)=GoodFirms, (4)=Upwork */
.clx-ratings-section .elementor-column:nth-child(1) .elementor-widget-image img { max-height: clamp(39px, 3vw, 50px) !important; max-width: clamp(146px, 12vw, 189px) !important; }
.clx-ratings-section .elementor-column:nth-child(2) .elementor-widget-image img { max-height: clamp(16px, 1.4vw, 25px) !important; }
.clx-ratings-section .elementor-column:nth-child(3) .elementor-widget-image img { max-height: clamp(19px, 1.55vw, 28px) !important; }
.clx-ratings-section .elementor-column:nth-child(4) .elementor-widget-image img { max-height: clamp(19px, 1.55vw, 28px) !important; }
.clx-ratings-section .elementor-star-rating {
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 2px;
  justify-content: center;
  white-space: nowrap;
  display: flex !important;
  flex-wrap: nowrap !important;
}
.clx-stars-wrap { text-align: center; }
.clx-stars {
  position: relative;
  display: inline-block;
  font-size: clamp(13px, 1.15vw, 20px);
  letter-spacing: 3px;
  line-height: 1;
}
.clx-stars-bg,
.clx-stars-fill {
  display: inline-block;
  white-space: nowrap;
}
.clx-stars-bg { color: #D8D8D8; }
.clx-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}
.clx-rating-green .clx-stars-fill { color: #00B67A; }
.clx-rating-red   .clx-stars-fill { color: #FF3D2E; }
.clx-rating-yellow .clx-stars-fill { color: #F5A623; }
.clx-rating-lgreen .clx-stars-fill { color: #6FDA44; }
.clx-rating-value .elementor-heading-title {
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 700;
  line-height: 1;
  color: #142533 !important;
}
.clx-ratings-section .clx-rating-value > .elementor-widget-container {
  padding-top: 6px;
}


/* =========================================================
   3. DARK STATS + ABOUT
   ========================================================= */
.clx-dark-section {
  background: var(--hp-dark-bg) !important;
}
.clx-stats-row {
  padding-top: 106px !important;
  padding-bottom: 56px !important;
  margin-top: -50px !important;
  position: relative;
  z-index: 1;
}
.clx-stats-row > .elementor-container {
  display: flex !important;
  justify-content: space-between;
  gap: 20px;
}
.clx-stats-row .elementor-column {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.clx-stat-text > .elementor-widget-container {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
}
.clx-stat-label {
  display: inline-block;
  flex: 1;
}
.clx-stat-dot {
  width: 20px !important;
  height: 22px !important;
  min-width: 22px;
  background-color: transparent !important;
  background-image: url('assets/homepage/circle-3d-icon-1.png');
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  border-radius: 0 !important;
  display: inline-block;
  flex-shrink: 0;
  filter: drop-shadow(-17px 17px 18px #03080B);
  margin-top: 5px;
}
.clx-stat-dot-1,
.clx-stat-dot-2,
.clx-stat-dot-3,
.clx-stat-dot-4 { background-image: url('assets/homepage/circle-3d-icon-1.png') !important; }
.clx-stat-text,
.clx-stat-text .elementor-widget-container,
.clx-stat-text .elementor-text-editor,
.clx-stat-text .elementor-text-editor p {
  color: #FFFFFF !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  letter-spacing: -0.78px !important;
}

.clx-about-section {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
/* About heading — white on dark */
.clx-about-heading .elementor-heading-title {
  font-size: 52px !important;
  font-weight: 500 !important;
  color: var(--hp-white) !important;
  line-height: 56px !important;
  letter-spacing: -1.56px;
}
/* About text */
.clx-about-text,
.clx-about-text .elementor-widget-container,
.clx-about-text p {
  color: #FFFFFF !important;
  font-size: 18px;
  line-height: 28px;
}
.clx-about-text p {
  margin-bottom: 28px;
}

/* CTA button styled as orange link with underline (NOT filled button) */
.clx-about-cta .elementor-button-wrapper {
  text-align: right;
}
.clx-about-cta a.elementor-button,
.clx-about-cta a.elementor-button:hover,
.clx-about-cta a.elementor-button:focus,
.clx-about-cta a.elementor-button:active,
.clx-about-cta a.elementor-button:visited,
.clx-about-cta a.elementor-button-link,
.clx-about-cta a.elementor-button-link:hover,
.clx-about-cta .elementor-button-content-wrapper,
.clx-about-cta .elementor-button-content-wrapper:hover {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  color: #FA4900 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  fill: none !important;
  outline: none !important;
}
.clx-about-cta a.elementor-button::before,
.clx-about-cta a.elementor-button::after,
.clx-about-cta a.elementor-button:hover::before,
.clx-about-cta a.elementor-button:hover::after {
  background: none !important;
  background-color: transparent !important;
  content: none !important;
  display: none !important;
}
.clx-about-cta .elementor-button-text {
  text-decoration: underline;
  text-decoration-color: #FA4900;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 9px;
}
.clx-about-cta .elementor-button-text::after {
  content: '\2192';
  display: inline-block;
  margin-left: 14px;
  text-decoration: none;
  font-size: 1.15em;
  font-weight: 900;
  -webkit-text-stroke: 1px #FA4900;
  line-height: 1;
  vertical-align: -1px;
  transition: transform 0.25s ease;
}
.clx-about-cta .elementor-button:hover .elementor-button-text::after {
  transform: translateX(5px);
}


/* =========================================================
   4. SERVICE EXPERTISE — Tabs
   ========================================================= */
.clx-service-section {
  padding: 56px 0 !important;
  background: #F8F8F8 !important;
  position: relative;
}
.clx-service-heading .elementor-heading-title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px;
  color: var(--hp-dark) !important;
  margin: 0 0 24px;
}
/* "Our Service Expertise" intro — full width. Same 18/28 body
   typography as the other section intros (.clx-tp-sub etc.) but with
   no max-width cap, so the keyword-rich intro spans the section. */
.clx-service-sub,
.clx-service-sub .elementor-widget-container,
.clx-service-sub p {
  color: var(--hp-text);
  font-size: 18px;
  line-height: 28px;
  max-width: none;
  margin: 0 0 32px;
}
/* Tighten the top/bottom space around every section heading globally */
.clx-service-heading,
.clx-emerging-heading,
.clx-tech-heading,
.clx-process-heading,
.clx-cs-heading,
.clx-tes-heading,
.clx-industry-heading,
.clx-why-heading,
.clx-faq-heading,
.clx-recognitions-heading,
.clx-about-heading {
  margin: 0 !important;
  padding: 0 !important;
}
.clx-service-heading .elementor-heading-title,
.clx-emerging-heading .elementor-heading-title,
.clx-tech-heading .elementor-heading-title,
.clx-process-heading .elementor-heading-title,
.clx-cs-heading .elementor-heading-title,
.clx-tes-heading .elementor-heading-title,
.clx-industry-heading .elementor-heading-title,
.clx-why-heading .elementor-heading-title,
.clx-faq-heading .elementor-heading-title,
.clx-recognitions-heading .elementor-heading-title,
.clx-tp-heading .elementor-heading-title,
.clx-kaizen-heading .elementor-heading-title,
.clx-casestudies-heading .elementor-heading-title,
.clx-testimonials-heading .elementor-heading-title,
.clx-industries-heading .elementor-heading-title,
.clx-security-heading .elementor-heading-title,
.clx-blogs-heading .elementor-heading-title,
.clx-map-heading .elementor-heading-title,
.clx-contact-heading .elementor-heading-title,
.clx-solutions-heading .elementor-heading-title,
.clx-about-heading .elementor-heading-title {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}
/* GLOBAL design system heading rule — every section heading on the page
   uses the same typography, regardless of which one was set up earlier with
   different (older 30/34px) values. */
body.page .clx-service-heading .elementor-heading-title,
body.page .clx-emerging-heading .elementor-heading-title,
body.page .clx-tech-heading .elementor-heading-title,
body.page .clx-process-heading .elementor-heading-title,
body.page .clx-cs-heading .elementor-heading-title,
body.page .clx-tes-heading .elementor-heading-title,
body.page .clx-industry-heading .elementor-heading-title,
body.page .clx-industries-heading .elementor-heading-title,
body.page .clx-security-heading .elementor-heading-title,
body.page .clx-why-heading .elementor-heading-title,
body.page .clx-faq-heading .elementor-heading-title,
body.page .clx-recognitions-heading .elementor-heading-title,
body.page .clx-tp-heading .elementor-heading-title,
body.page .clx-kaizen-heading .elementor-heading-title,
body.page .clx-casestudies-heading .elementor-heading-title,
body.page .clx-testimonials-heading .elementor-heading-title,
body.page .clx-blogs-heading .elementor-heading-title,
body.page .clx-map-heading .elementor-heading-title,
body.page .clx-contact-heading .elementor-heading-title,
body.page .clx-solutions-heading .elementor-heading-title,
body.page .clx-about-heading .elementor-heading-title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  margin: 0 0 24px !important;
}

/* Tabs widget — dark vertical sidebar + transparent content area */
.clx-service-tabs .elementor-tabs {
  display: flex !important;
  gap: 0;
  flex-direction: row !important;
  align-items: center !important;
  position: relative;
}
.clx-service-tabs .elementor-tabs-wrapper {
  width: 280px !important;
  min-width: 280px;
  flex-shrink: 0;
  background: #16202E !important;
  border-radius: 25px;
  padding: 50px 0;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  z-index: 2;
  border: none !important;
  position: relative;
  overflow: visible !important;
  min-height: 520px;
}
.clx-service-tabs .elementor-tab-title {
  display: block !important;
  padding: 14px 25px !important;
  color: rgba(255,255,255,.6) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
  background: transparent !important;
  text-align: left !important;
  width: 100%;
  position: relative;
}
.clx-service-tabs .elementor-tab-title:last-of-type {
  border-bottom: none !important;
}
.clx-service-tabs .elementor-tab-title:hover {
  color: var(--hp-white) !important;
}
.clx-service-tabs .elementor-tab-title.elementor-active {
  position: relative;
  width: calc(100% + 30px) !important;
  margin-right: -30px;
  z-index: 10;
  background: linear-gradient(86deg, #F57E07 0%, #FA4900 100%) !important;
  color: #FFFFFF !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
  padding-right: 40px !important;
  text-align: left !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  filter: drop-shadow(0 18px 24px rgba(3, 8, 11, 0.55));
}
.clx-service-tabs .elementor-tab-title a {
  color: inherit !important;
}
.clx-service-tabs .elementor-tab-title::before {
  display: none !important;
}
.clx-service-tabs .elementor-tabs-content-wrapper {
  flex: 1;
  padding: 40px 55px;
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 14px !important;
  margin-left: -10px;
  align-self: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  min-height: 480px;
}
.clx-service-tabs .elementor-tab-content {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.clx-service-tabs .elementor-tab-content .clx-lc {
  float: right;
  margin-top: 8px;
}
.clx-service-tabs .elementor-tab-content::after {
  content: '';
  display: block;
  clear: both;
}
.clx-service-tabs .elementor-tab-mobile-title {
  display: none !important;
}

/* Service card content styling */
.clx-sc-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.9px;
  color: var(--hp-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.clx-sc-desc {
  color: var(--hp-text);
  font-size: 15px;
  line-height: 26px;
  margin-bottom: 24px;
  font-family: 'DM Sans', sans-serif;
}
.clx-sc-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 50px;
  margin-bottom: 28px;
}
.clx-sc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--hp-dark);
  text-decoration: none;
}
.clx-sc-link::before {
  content: '\25B8';
  color: var(--hp-orange);
  font-size: 13px;
}
.clx-sc-link:hover {
  color: var(--hp-orange);
}
/* Speciality with no dedicated page yet — rendered as a <span> instead
   of an <a>. Keep the ▸ bullet + text styling, drop the link
   affordances (hover colour shift, pointer cursor). */
.clx-sc-link--static {
  cursor: default;
}
.clx-sc-link--static:hover {
  color: var(--hp-dark);
}
/* Orange 3D cube decoration at the bottom-left of the dark tab card */
.clx-service-tabs .elementor-tabs-wrapper::after {
  content: '';
  position: absolute;
  left: -92px;
  bottom: -102px;
  width: 160px;
  height: 168px;
  background: url('assets/homepage/cube-3d-icon-floating-new.png') no-repeat center/contain;
  background-image: image-set(
    url('assets/homepage/cube-3d-icon-floating-new.png') 1x,
    url('assets/homepage/cube-3d-icon-floating-new@2x.png') 2x
  );
  z-index: 3;
  pointer-events: none;
}


/* =========================================================
   5. EMERGING TECHNOLOGIES
   ========================================================= */
.clx-emerging-section {
  /* Gray (#F8F8F8) so the glassmorphic .svc-card surface + soft shadow
     read the same as the services-page card section. The next section
     (Technologies & Platforms) is set white to keep the alternation. */
  background: #F8F8F8 !important;
}
.clx-emerging-heading .elementor-heading-title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px;
  color: var(--hp-dark) !important;
  margin: 0 0 24px !important;
}
.clx-emerging-sub,
.clx-emerging-sub .elementor-widget-container,
.clx-emerging-sub p {
  color: var(--hp-text);
  font-size: 18px;
  line-height: 28px;
  max-width: 750px;
  margin: 0;
}
/* The .clx-tech-card-grid grid rules force every text-editor widget's
   container to display:flex (so card widgets fill their column). The
   intro widget inherits that, which laid its two <p> paragraphs side
   by side in a row. Force column direction so the paragraphs stack,
   and add the inter-paragraph gap (the rule above zeroes p margins). */
.clx-emerging-sub > .elementor-widget-container { flex-direction: column; }
.clx-emerging-sub p + p { margin-top: 16px; }
.clx-emerging-logo {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 28px;
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
}

/* Tech cards grid */
.clx-tech-card-grid > .elementor-container {
  gap: 24px;
  align-items: stretch !important;
}
.clx-tech-card-grid .elementor-column {
  padding: 0 !important;
  display: flex !important;
}
.clx-tech-card-grid .elementor-column > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column;
  width: 100%;
}
.clx-tech-card-grid .elementor-widget-text-editor {
  flex: 1;
  display: flex;
}
.clx-tech-card-grid .elementor-widget-text-editor > .elementor-widget-container {
  flex: 1;
  display: flex;
}
.clx-tech-card-grid .elementor-widget-text-editor .clx-tech-card {
  flex: 1;
  width: 100%;
}
/* Emerging Technologies cards adopt the services-page `.svc-card`
   pattern. `.svc-card-icon` overhangs the card top by 52px, so each
   card needs top clearance inside the homepage emerging grid — 64px
   absorbs the overhang (52px) plus breathing room and keeps the icon
   clear of the row / section above. */
.clx-tech-card-grid .elementor-widget-text-editor .svc-card {
  flex: 1;
  width: 100%;
  /* 40px top margin clears the floating icon. With a43b187's 36px top
     padding this makes the 76px row gap below. */
  margin-top: 40px;
}
/* Emerging-tech card spacing — matched to the services-page card grid:
   24px column gap, 76px row gap, 56px section top/bottom padding.
   - The 24px column gap comes from the flex `gap` below. The two
     sections' "Columns Gap" Elementor setting is forced to "No Gap"
     by migration 2026-05-21-homepage-emerging-columns-gap-none.php —
     otherwise Elementor pads every widget-wrap by 10px, inflating the
     gap to 44px and the row gap to 96px.
   - The block lives in two stacked Elementor sections (b3cca6a =
     heading + row 1, a43b187 = row 2). Reset their paddings so the
     section opens/closes at 56px and the row gap = a43b187 top (36)
     + the card's 40px margin-top = 76px. */
.clx-emerging-section.elementor-element-b3cca6a { padding: 56px 0 0 !important; }
.clx-emerging-section.elementor-element-a43b187 { padding: 36px 0 56px !important; }
/* Emerging-tech icons render smaller than the full services-page
   138px .svc-card-icon — scope the box down here. Adjust the px below
   to resize. */
.clx-emerging-section .svc-card-icon {
  width: 82px;
  height: 82px;
  top: -38px;
  right: 24px;
}
.clx-emerging-section .svc-card-icon img {
  width: 82px !important;
  height: 82px !important;
  /* Shadow scaled ~0.6x from the base .svc-card-icon drop-shadow
     (0 12px 20px) so it stays proportional on the smaller 82px icon. */
  filter: drop-shadow(0px 7px 12px rgba(232, 120, 20, 0.45));
}

/* Individual tech card — icon block on TOP, heading + body below. Mirrors
   the .svc-card pattern used in the services-page "Inside Our AI Powered
   Delivery System" component so the homepage and services page share the
   same card visual language. */
.clx-tech-card {
  --clx-card-radius: 20px;
  --clx-card-pad-x: 28px;
  --clx-card-pad-y: 32px;
  --clx-badge-size: 80px;
  background: #F8F8F8;
  border-radius: var(--clx-card-radius);
  padding: var(--clx-card-pad-y) var(--clx-card-pad-x);
  position: relative;
  min-height: 480px;
  overflow: visible;
  display: flex !important;
  flex-direction: column !important;
}
/* Icon block sits at the top of the card as a normal flow element. The
   3D-icon image is centred inside on a transparent background so the
   icon's natural shadow shows through. */
.clx-tech-card-badge {
  position: static;
  width: var(--clx-badge-size);
  height: var(--clx-badge-size);
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px 0;
  padding: 0;
  z-index: auto;
}
.clx-tech-card-badge .clx-tech-card-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Heading sits below the icon, full card width — no right-padding cutout
   so the longest label ("// Blockchain") stays on a single line. */
.clx-tech-card h3,
.clx-tech-card .clx-sc-title {
  padding-right: 0;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2 !important;
  letter-spacing: -0.6px;
  color: var(--hp-dark) !important;
  word-break: normal;
  overflow-wrap: break-word;
}
/* Description and benefits flow normally below the heading */
.clx-tech-card p,
.clx-tech-card .clx-benefits-label,
.clx-tech-card .clx-benefit-item {
  padding-right: 0;
}
/* EXPLORE MORE pinned to the bottom-right of the card regardless of content length.
   line-height: 1 collapses the link's line-box so the visible text sits flush with
   the bottom padding, matching the heading's flush top. */
.clx-tech-card .clx-lc {
  margin-top: auto !important;
  align-self: flex-end !important;
  line-height: 1 !important;
}
.clx-tech-card p {
  color: var(--hp-text);
  font-size: 15px;
  line-height: 26px;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 16px;
}
.clx-benefits-label {
  font-weight: 700;
  font-size: 15px;
  line-height: 26px;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 8px;
  color: var(--hp-text);
}
.clx-benefit-item {
  display: flex;
  gap: 8px;
  font-size: 15px;
  line-height: 26px;
  font-family: 'DM Sans', sans-serif;
  color: var(--hp-text);
  margin-bottom: 6px;
}
.clx-benefit-item::before {
  content: '\25B8';
  color: var(--hp-orange);
  flex-shrink: 0;
  margin-top: 1px;
}
.clx-tech-card-placeholder {
  background: transparent !important;
  border: 1.5px dashed var(--hp-border) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  border-radius: 14px;
}


/* =========================================================
   6. TECHNOLOGIES & PLATFORMS
   ========================================================= */
.clx-tp-section {
  /* White — the Emerging Technologies section above is now gray, so
     Technologies & Platforms flips to white to keep the section
     background alternation. */
  background: #FFFFFF !important;
}
.clx-tp-heading .elementor-heading-title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px;
  color: var(--hp-dark) !important;
  margin: 0 0 24px !important;
}
.clx-tp-sub,
.clx-tp-sub .elementor-widget-container,
.clx-tp-sub p {
  color: var(--hp-text);
  font-size: 18px;
  line-height: 28px;
  max-width: 750px;
  margin: 0;
}
.clx-tp-header > .elementor-container {
  align-items: center;
}
.clx-tp-image-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}
.clx-tp-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
  margin-top: -40px;
  pointer-events: none;
}
.clx-tp-header > .elementor-container {
  overflow: visible !important;
}
.clx-tp-tabs-row {
  position: relative;
  overflow: visible !important;
  margin-top: 0 !important;
}
/* Prevent any of the tabs panel inner containers from clipping
   the hover popup when it extends below the card grid. Includes all
   Elementor wrapper containers that might set overflow: hidden. */
.clx-tp-tabs,
.clx-tp-panels,
.clx-tp-panel,
.clx-tp-group,
.clx-tp-cards,
.clx-tp-tabs-row .elementor-container,
.clx-tp-tabs-row .elementor-row,
.clx-tp-tabs-row .elementor-column,
.clx-tp-tabs-row .elementor-column-wrap,
.clx-tp-tabs-row .elementor-widget-wrap,
.clx-tp-tabs-row .elementor-widget,
.clx-tp-tabs-row .elementor-widget-text-editor,
.clx-tp-tabs-row .elementor-widget-container {
  overflow: visible !important;
}
/* Stabilise the tabbed section height so switching tabs doesn't cause
   the Custom Solutions section below to jump up or down. The tallest
   panel (Machine Learning & AI) renders around 720px, so we set a
   min-height that accommodates it plus the 200px reserved below for
   hover popups from the bottom row. Shorter tabs pick up the extra
   whitespace uniformly. Mobile layout uses natural height. */
@media (min-width: 901px) {
  .clx-tp-panels {
    min-height: 720px;
    padding-bottom: 20px;
  }
  /* Cards in the LAST group of a panel flip their hover popup to appear
     ABOVE the card instead of below, so the popup stays inside the
     section and never overflows into Custom Solutions below (which has
     decorative elements sensitive to layout changes). */
  .clx-tp-group:last-child .clx-tp-card-popup {
    top: auto;
    bottom: calc(100% + 10px);
    transform: translateY(4px);
  }
  .clx-tp-group:last-child .clx-tp-card.clx-tp-has-popup:hover .clx-tp-card-popup {
    transform: translateY(0);
  }
}

/* Designed-component warning banner — only rendered in the Elementor editor iframe
   (the clx_editor_only shortcode returns empty on the live frontend) */
.clx-editor-notice {
  display: block;
  background: repeating-linear-gradient(45deg, #FFF8E1, #FFF8E1 10px, #FFECB3 10px, #FFECB3 20px);
  border: 2px dashed #FA4900;
  border-radius: 10px;
  padding: 14px 20px;
  margin: 0 0 24px;
  font-family: 'Cabin', sans-serif;
  color: #5D4037;
  max-width: 880px;
}
.clx-editor-notice strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #BF360C;
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.clx-editor-notice .clx-editor-notice-body {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: #5D4037;
}
.clx-editor-notice code {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: Menlo, Monaco, 'Courier New', monospace;
  font-size: 12px;
  color: #BF360C;
}

/* Tabs widget — sidebar nav + vertical divider + content panel */
.clx-tp-tabs {
  display: flex;
  gap: 0;
  align-items: flex-start;
}
/* Sidebar — numbered category list */
.clx-tp-nav {
  flex: 0 0 32%;
  list-style: none;
  margin: 0;
  padding: 0 32px 0 0;
  border-right: 1px solid #E5E7EB;
}
.clx-tp-nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.clx-tp-nav-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EFEFEF;
  color: #B0B0B0;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.clx-tp-nav-label {
  font-size: 19px;
  color: #6B7280;
  font-weight: 400;
  line-height: 1.3;
  transition: color 0.2s ease, font-weight 0.2s ease;
}
/* Small laptops / 13" MacBook range: shrink sidebar label a touch so
   long category names like "Data Management & Storage" stay on one line. */
@media (min-width: 901px) and (max-width: 1280px) {
  .clx-tp-nav-label {
    font-size: 17px;
  }
}
.clx-tp-nav-item:hover .clx-tp-nav-label {
  color: var(--hp-dark);
}
.clx-tp-nav-item.is-active .clx-tp-nav-num {
  background: #E8491D;
  color: #FFFFFF;
}
.clx-tp-nav-item.is-active .clx-tp-nav-label {
  color: var(--hp-dark);
  font-weight: 700;
}

/* Sub-nav — only visible when the parent is active */
.clx-tp-nav-sub-wrap {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.clx-tp-nav-sub-wrap.is-active {
  display: block;
}
.clx-tp-subnav {
  list-style: none;
  padding: 4px 0 8px 52px;
  margin: 0;
  border-left: 1px dashed #E5E7EB;
  margin-left: 18px;
}
.clx-tp-nav-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.clx-tp-nav-sub .clx-tp-nav-num {
  width: 28px;
  height: 28px;
  font-size: 12px;
  background: #EFEFEF;
  color: #B0B0B0;
}
.clx-tp-nav-sub .clx-tp-nav-label {
  font-size: 16px;
  color: #6B7280;
  font-weight: 400;
}
.clx-tp-nav-sub:hover .clx-tp-nav-label {
  color: var(--hp-dark);
}
.clx-tp-nav-sub.is-active .clx-tp-nav-num {
  background: #E8491D;
  color: #FFFFFF;
}
.clx-tp-nav-sub.is-active .clx-tp-nav-label {
  color: var(--hp-dark);
  font-weight: 600;
}

/* Content panel */
.clx-tp-panels {
  flex: 1;
  padding-left: 40px;
  min-width: 0;
}
.clx-tp-panel {
  display: none;
}
.clx-tp-panel.is-active {
  display: block;
}
.clx-tp-panel-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--hp-dark);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.5px;
}
/* Tighten the text widget wrapper above the tab area */
.clx-tp-tabs-wrap,
.clx-tp-tabs-wrap > .elementor-widget-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.clx-tp-group {
  margin-bottom: 28px;
}
.clx-tp-group:last-child {
  margin-bottom: 0;
}
.clx-tp-group-label {
  font-size: 14px;
  color: #6B7280;
  font-weight: 500;
  margin-bottom: 12px;
}
.clx-tp-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.clx-tp-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EFEFEF;
  border: 2px solid transparent;
  border-radius: 14px;
  width: 116px;
  height: 72px;
  padding: 14px 18px;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}
.clx-tp-card:hover {
  border-color: #FA4900;
}
.clx-tp-card.clx-tp-has-popup:hover {
  z-index: 20;
}
.clx-tp-card-icon {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* FlutterFlow's source PNG has heavy transparent padding around the glyph,
   so it renders much smaller than peers. Scale it up to compensate. */
.clx-tp-card-icon[alt="FlutterFlow"] {
  transform: scale(2.2);
}

/* Hover popup — description panel that appears below the card */
.clx-tp-card-popup {
  position: absolute;
  top: auto;
  bottom: calc(100% + 10px);
  left: 0;
  width: 360px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 20px 22px;
  background: #FFFFFF;
  border: 2px solid #FA4900;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  pointer-events: none;
  z-index: 30;
  box-sizing: border-box;
}
.clx-tp-card.clx-tp-has-popup:hover .clx-tp-card-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.clx-tp-card-popup-name {
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 8px;
}
.clx-tp-card-popup-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #3A3A3A;
}

/* Tablet + mobile: anchor the popup to the whole .clx-tp-cards grid
   instead of the individual card. Popup spans the full grid width and
   appears below the grid, so it's always fully visible regardless of
   which card the user hovers or where that card sits in the row. */
@media (max-width: 900px) {
  .clx-tp-cards {
    position: relative;
  }
  .clx-tp-card {
    position: static;
  }
  .clx-tp-card-popup {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    padding: 16px 18px;
  }
  .clx-tp-card-popup-name {
    font-size: 15px;
    margin-bottom: 6px;
  }
  .clx-tp-card-popup-desc {
    font-size: 13px;
    line-height: 1.5;
  }
}


/* =========================================================
   7. CUSTOM SOLUTIONS (Dark)
   ========================================================= */
.clx-solutions-section {
  background: #000000 !important;
  position: relative;
  overflow: visible !important;
}
.clx-solutions-heading .elementor-heading-title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: #FFFFFF !important;
}
.clx-solutions-heading .clx-sol-break {
  display: block;
  line-height: 1.28 !important;
  margin-bottom: 12px;
}
.clx-solutions-sub,
.clx-solutions-sub .elementor-widget-container,
.clx-solutions-sub p {
  color: #FFFFFF !important;
  font-size: 18px;
  line-height: 28px;
  max-width: 525px;
  margin: 0;
}

/* 4×4 grid container */
.clx-solutions-grid-wrap {
  position: relative;
}
.clx-sol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}
.clx-sol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #222222;
  border: 1px solid #333333;
  border-radius: 20px;
  padding: 22px 22px 22px 22px;
  min-height: 142px;
  text-decoration: none !important;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}
.clx-sol-card:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  transform: translateY(-2px);
}
.clx-sol-icon {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  filter: grayscale(100%) brightness(0.8) opacity(0.7);
  transition: filter 0.25s ease;
}
.clx-sol-card:hover .clx-sol-icon {
  /* Force any icon to brand orange #FA4900 via filter chain */
  filter: brightness(0) saturate(100%) invert(38%) sepia(99%) saturate(4000%) hue-rotate(8deg) brightness(101%) contrast(103%) !important;
}
.clx-sol-name,
.clx-sol-card .clx-sol-name {
  font-size: 18px !important;
  font-weight: 400 !important;
  font-family: 'Cabin', sans-serif !important;
  color: #999999;
  line-height: 1.3 !important;
  margin-top: 14px;
  transition: color 0.25s ease;
}
.clx-sol-card:hover .clx-sol-name {
  color: #FA4900 !important;
  font-weight: 500;
}
.clx-sol-arrow {
  position: absolute;
  bottom: 16px;
  right: 18px;
  color: #FA4900;
  font-size: 16px;
  line-height: 1;
}

/* CTA right-aligned below the grid (matches every other section's CTA) */
.clx-solutions-cta-wrap {
  text-align: right;
}
.clx-solutions-cta-row .clx-lc {
  display: inline-block;
}

/* 3D triangle decoration top-left of the section */
.clx-sol-deco {
  position: absolute;
  top: -370px;
  left: -19px;
  width: 252px !important;
  height: 252px !important;
  background: url('assets/homepage/triangle-3d-floating-icon.png') no-repeat center/contain;
  background-image: image-set(
    url('assets/homepage/triangle-3d-floating-icon.png') 1x,
    url('assets/homepage/triangle-3d-floating-icon@2x.png') 2x
  );
  filter: drop-shadow(60px 69px 46px rgba(245, 124, 6, 0.16));
  pointer-events: none;
  z-index: 2;
}
/* Make sure no ancestor clips the decoration */
.clx-solutions-grid-wrap,
.clx-solutions-grid-wrap > .elementor-widget-container,
.clx-solutions-grid-section,
.clx-solutions-grid-section > .elementor-container,
.clx-solutions-grid-section .elementor-column,
.clx-solutions-grid-section .elementor-widget-wrap,
.clx-solutions-grid-section .elementor-widget {
  overflow: visible !important;
}


/* =========================================================
   8. SECURE PROJECT SUCCESS (Kaizen)
   ========================================================= */
.clx-kaizen-section {
  background: var(--hp-white) !important;
}
.clx-kaizen-heading .elementor-heading-title {
  font-size: 34px !important;
  font-weight: 500 !important;
  line-height: 1.28 !important;
  color: var(--hp-dark) !important;
  margin-bottom: 16px;
}
.clx-kaizen-text .elementor-text-editor,
.clx-kaizen-text .elementor-text-editor p {
  color: var(--hp-text);
  font-size: 13px;
  line-height: 1.85;
  margin-bottom: 14px;
}
.clx-kaizen-text a {
  color: var(--hp-dark);
  font-weight: 600;
  text-decoration: underline;
  display: inline;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
.clx-kaizen-image img {
  border-radius: 12px !important;
  width: 100%;
}

/* Process steps */
/* Two-column header (left text 40 / right image 60) */
.clx-kaizen-heading .elementor-heading-title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: var(--hp-dark) !important;
  margin: 0 0 24px !important;
}
.clx-kaizen-text,
.clx-kaizen-text .elementor-widget-container,
.clx-kaizen-text p {
  color: var(--hp-text);
  font-size: 18px;
  line-height: 28px;
  max-width: 520px;
}
.clx-kaizen-text p {
  margin: 0 0 16px;
}
.clx-kaizen-image-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
/* clx-kaizen-flip — flipped layout (image left / copy right, ET page).
   Image hugs the left edge; the image column is sized in _elementor_data
   so the image lands at ~530px (the Maturity Atlas card width). */
.clx-kaizen-flip .clx-kaizen-image-wrap { justify-content: flex-start; }
/* 48px gap between image and copy (20px column gap + 28px) — matches
   the Maturity Atlas section's text-to-card spacing */
.clx-kaizen-flip .clx-kaizen-heading,
.clx-kaizen-flip .clx-kaizen-text { padding-left: 28px; }
/* clx-kaizen-hm = the mobile-only heading copy (sits above the image);
   hidden on desktop. clx-kaizen-hd = the desktop heading (in the copy
   column). Gives heading -> image -> intro once the section stacks. */
.clx-kaizen-flip .clx-kaizen-hm { display: none; }
@media (max-width: 1024px) {
  .clx-kaizen-flip .clx-kaizen-hm { display: block; }
  .clx-kaizen-flip .clx-kaizen-hd { display: none; }
  .clx-kaizen-flip .clx-kaizen-heading,
  .clx-kaizen-flip .clx-kaizen-text { padding-left: 0; }
}
.clx-kaizen-image {
  max-width: 100%;
  height: auto;
  display: block;
}
.clx-kaizen-header > .elementor-container {
  align-items: center;
}

/* 8-card process grid (2 rows × 4 cols) */
.clx-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.clx-process-step {
  position: relative;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 32px 28px 28px;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  overflow: hidden;
  min-height: 240px;
}
.clx-process-step h4,
.clx-process-step p {
  text-align: left !important;
  align-self: stretch;
}
.clx-process-num {
  position: absolute;
  top: 24px;
  right: 28px;
  font-size: 88px;
  font-weight: 700;
  color: #EEF0F2;
  line-height: 0.78;
  pointer-events: none;
  user-select: none;
  letter-spacing: -3px;
}
.clx-process-step h4 {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 700;
  color: var(--hp-dark) !important;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.5px;
}
.clx-process-step p {
  position: relative;
  z-index: 1;
  color: var(--hp-text);
  font-size: 15px;
  line-height: 26px;
  font-family: 'DM Sans', sans-serif;
  margin: 0 0 20px;
}
.clx-process-step .clx-lc {
  margin-top: auto !important;
  align-self: flex-end !important;
}


/* =========================================================
   9. CASE STUDIES
   ========================================================= */
.clx-casestudies-section {
  padding: 56px 0 !important;
  background: #F8F8F8 !important;
  border-top: none !important;
}
.clx-casestudies-cta-wrap {
  text-align: right;
}
/* Heading on the gray section background */
body.page .clx-casestudies-section .section-title,
body.page .clx-casestudies-section .section-title .title,
body.page .clx-casestudies-section .section-title h2,
body.page .clx-casestudies-section h2,
body.page .clx-casestudies-section h2.title,
body.page .clx-casestudies-section .axil-portfolio-area h2,
body.page .clx-casestudies-section .axil-portfolio-area .title {
  color: var(--hp-dark) !important;
}
body.page .clx-casestudies-section .section-title p,
body.page .clx-casestudies-section .section-title span,
body.page .clx-casestudies-section .axil-portfolio-area p {
  color: var(--hp-text) !important;
  font-size: 18px !important;
  line-height: 28px !important;
  max-width: 750px !important;
  margin: 0 auto 32px !important;
}
/* Hide every spacer the keystroke widget injects so our 56/56 section wins */
body.page .clx-casestudies-section .axil-portfolio-area,
body.page .clx-casestudies-section .axil-portfolio-area.ax-section-gap,
body.page .clx-casestudies-section .ax-section-gap,
body.page .clx-casestudies-section .ax-section-gapTop,
body.page .clx-casestudies-section .ax-section-gapBottom,
body.page .clx-casestudies-section .bg-color-lightest {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}
body.page .clx-casestudies-section .axil-masonary-wrapper,
body.page .clx-casestudies-section .axil-masonary-wrapper > .row,
body.page .clx-casestudies-section .container,
body.page .clx-casestudies-section .section-title {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.page .clx-casestudies-section .section-title .title,
body.page .clx-casestudies-section .section-title h2 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding-top: 0 !important;
}
body.page .clx-casestudies-section .mesonry-list.mt--20,
body.page .clx-casestudies-section .mesonry-list {
  margin-top: 32px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.page .clx-casestudies-section .axil-portfolio-area .row,
body.page .clx-casestudies-section .axil-portfolio-area > .container,
body.page .clx-casestudies-section .axil-portfolio-area .col-12,
body.page .clx-casestudies-section .axil-portfolio-area .col-lg-12,
body.page .clx-casestudies-section .portfolio-wrapper,
body.page .clx-casestudies-section .axil-portfolio-area,
body.page .clx-casestudies-section .elementor-widget-keystroke-project,
body.page .clx-casestudies-section .elementor-widget-keystroke-project > .elementor-widget-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.page .clx-casestudies-section .portfolio,
body.page .clx-casestudies-section .portfolio .inner,
body.page .clx-casestudies-section .portfolio .inner .port-overlay-info,
body.page .clx-casestudies-section .portfolio .technologies-image,
body.page .clx-casestudies-section .portfolio .repeating-hover-effect {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Kill WOW.js entrance animations so the section doesn't fade/slide on scroll */
body.page .clx-casestudies-section .wow,
body.page .clx-casestudies-section .animated {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
  transition: none !important;
}
.clx-casestudies-section .axil-portfolio-area .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
.clx-casestudies-section .section-title .sub-title,
.clx-casestudies-section .section-title .extra07-color {
  display: none !important;
}
.clx-casestudies-section .section-title .title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: var(--hp-dark) !important;
  margin: 0 0 16px !important;
}
.clx-casestudies-section .section-title p {
  color: var(--hp-text) !important;
  font-size: 18px !important;
  line-height: 28px !important;
  max-width: 750px !important;
  margin: 0 auto 32px !important;
}
.clx-casestudies-section {
  padding: 56px 0 !important;
  background: #F8F8F8 !important;
  border-top: none !important;
}
.clx-casestudies-cta-wrap {
  text-align: right;
}
/* Heading on the gray section background */
body.page .clx-casestudies-section .section-title,
body.page .clx-casestudies-section .section-title .title,
body.page .clx-casestudies-section .section-title h2,
body.page .clx-casestudies-section h2,
body.page .clx-casestudies-section h2.title,
body.page .clx-casestudies-section .axil-portfolio-area h2,
body.page .clx-casestudies-section .axil-portfolio-area .title {
  color: var(--hp-dark) !important;
}
body.page .clx-casestudies-section .section-title p,
body.page .clx-casestudies-section .section-title span,
body.page .clx-casestudies-section .axil-portfolio-area p {
  color: var(--hp-text) !important;
  font-size: 18px !important;
  line-height: 28px !important;
  max-width: 750px !important;
  margin: 0 auto 32px !important;
}
body.page .clx-casestudies-section .axil-portfolio-area,
body.page .clx-casestudies-section .axil-portfolio-area.ax-section-gap,
body.page .clx-casestudies-section .ax-section-gap,
body.page .clx-casestudies-section .ax-section-gapTop,
body.page .clx-casestudies-section .ax-section-gapBottom,
body.page .clx-casestudies-section .bg-color-lightest {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}
body.page .clx-casestudies-section .axil-masonary-wrapper,
body.page .clx-casestudies-section .axil-masonary-wrapper > .row,
body.page .clx-casestudies-section .container,
body.page .clx-casestudies-section .section-title {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.page .clx-casestudies-section .section-title .title,
body.page .clx-casestudies-section .section-title h2 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding-top: 0 !important;
}
body.page .clx-casestudies-section .mesonry-list.mt--20,
body.page .clx-casestudies-section .mesonry-list {
  margin-top: 32px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.page .clx-casestudies-section .axil-portfolio-area .row,
body.page .clx-casestudies-section .axil-portfolio-area > .container,
body.page .clx-casestudies-section .axil-portfolio-area .col-12,
body.page .clx-casestudies-section .axil-portfolio-area .col-lg-12,
body.page .clx-casestudies-section .portfolio-wrapper,
body.page .clx-casestudies-section .axil-portfolio-area,
body.page .clx-casestudies-section .elementor-widget-keystroke-project,
body.page .clx-casestudies-section .elementor-widget-keystroke-project > .elementor-widget-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.page .clx-casestudies-section .portfolio,
body.page .clx-casestudies-section .portfolio .inner,
body.page .clx-casestudies-section .portfolio .inner .port-overlay-info,
body.page .clx-casestudies-section .portfolio .technologies-image,
body.page .clx-casestudies-section .portfolio .repeating-hover-effect {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.page .clx-casestudies-section .wow,
body.page .clx-casestudies-section .animated {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
  transition: none !important;
}
.clx-casestudies-section .axil-portfolio-area .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
.clx-casestudies-section .section-title .sub-title,
.clx-casestudies-section .section-title .extra07-color {
  display: none !important;
}
.clx-casestudies-section .section-title .title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: var(--hp-dark) !important;
  margin: 0 0 16px !important;
}
.clx-casestudies-section .section-title p {
  color: var(--hp-text) !important;
  font-size: 18px !important;
  line-height: 28px !important;
  max-width: 750px !important;
  margin: 0 auto 32px !important;
}
/* Force 2-col masonry layout */
.clx-case-studies .portfolio-wrapper {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.page .clx-casestudies-section .portfolio,
body.page .clx-casestudies-section .portfolio.portfolio-33-33,
body.page .clx-casestudies-section .mesonry-list.grid-metro3 .portfolio-33-33,
body.page .clx-casestudies-section .mesonry-list.grid-metro3 .resizer {
  width: 50% !important;
  max-width: 50% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 16px !important;
  float: none !important;
}
.clx-case-studies .portfolio .inner,
.clx-case-studies .portfolio .thumb {
  width: 100%;
}
.clx-case-studies .portfolio .thumb img {
  width: 100% !important;
  height: auto !important;
  border-radius: 16px;
  display: block;
}
.clx-case-studies .portfolio .inner,
.clx-case-studies .portfolio .thumb {
  width: 100%;
}
.clx-case-studies .portfolio .thumb img {
  width: 100% !important;
  height: auto !important;
  border-radius: 16px;
  display: block;
}
/* Logos row: theme stock makes .repeating-hover-effect img position:absolute
   with no parent height, so at narrow widths icons spill out of flow and
   visually overlap the next masonry-stacked card. Reserve a row height. */
.clx-casestudies-section .technologies-image {
  min-height: 32px;
  margin-top: 18px;
}
.clx-casestudies-section .repeating-hover-effect {
  min-height: 28px;
}
/* =========================================================
   Case Studies — small-breakpoint responsive fix (<=575px)
   Mirrored from site-wide.css. homepage.css enqueues at higher
   priority on many inner pages (services, about-us, mission,
   how-we-work, our-team, culture, partnership, reviews, ai-
   software) and would otherwise override the site-wide fix
   at equal specificity. Keep the two blocks in sync.
   ========================================================= */
@media (max-width: 575px) {

  body.page .clx-casestudies-section .section-title .title,
  body .clx-casestudies-section .section-title .title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.page .clx-casestudies-section .mesonry-list.grid-metro3 {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  body.page .clx-casestudies-section .mesonry-list.grid-metro3 .resizable,
  body.page .clx-casestudies-section .mesonry-list.grid-metro3 .portfolio {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.page .clx-casestudies-section .portfolio .inner {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(20, 24, 40, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.page .clx-casestudies-section .portfolio .thumb {
    order: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  body.page .clx-casestudies-section .portfolio .thumb img,
  body.page .clx-casestudies-section .portfolio .thumb img.wp-post-image {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
  }

  body.page .clx-casestudies-section .portfolio .port-overlay-info {
    order: 1 !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    padding: 18px 20px 20px !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.page .clx-casestudies-section .portfolio .hover-action {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  body.page .clx-casestudies-section .portfolio .hover-action .title,
  body.page .clx-casestudies-section .portfolio .port-title {
    font-size: 17px !important;
    line-height: 1.3 !important;
    color: #14243a !important;
    margin: 0 !important;
  }

  body.page .clx-casestudies-section .portfolio .category-info,
  body.page .clx-casestudies-section .portfolio .categorie {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #6b7280 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  body.page .clx-casestudies-section .portfolio .category-info .category,
  body.page .clx-casestudies-section .portfolio span.category {
    color: #6b7280 !important;
  }

  body.page .clx-casestudies-section .portfolio .technologies-image,
  body.page .clx-casestudies-section .portfolio .technologies-image.d-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 12px !important;
    margin-top: 4px !important;
    border-top: 1px solid #eef0f4 !important;
  }
  body.page .clx-casestudies-section .portfolio .technologies-image img {
    height: 22px !important;
    width: auto !important;
    max-width: 60px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 360px) {
  body.page .clx-casestudies-section .section-title .title,
  body .clx-casestudies-section .section-title .title {
    font-size: 24px !important;
  }
  body.page .clx-casestudies-section .portfolio .thumb img {
    height: 180px !important;
  }
  body.page .clx-casestudies-section .portfolio .port-overlay-info {
    padding: 16px 16px 18px !important;
  }
}
/* Original case study placeholder (kept for backwards compat) */
.clx-cs-container {
  display: flex;
  gap: 40px;
  align-items: center;
  position: relative;
  background: #FFFFFF;
  border-left: 4px solid #FA4900;
  border-radius: 0 20px 20px 0;
  padding: 40px 40px 40px 48px;
  box-shadow: 0 18px 40px rgba(20, 37, 51, 0.06);
  overflow: hidden;
}
.clx-cs-content {
  flex: 1 1 55%;
  min-width: 0;
  order: 1;
}
.clx-cs-image {
  flex: 0 0 40%;
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clx-cs-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}
/* Title — bold black, big */
.clx-cs-content h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hp-dark);
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}
/* Tags — comma-separated plain text, no pills */
.clx-cs-tags {
  display: block;
  font-size: 14px;
  color: var(--hp-text);
  margin-bottom: 18px;
}
.clx-cs-tag {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--hp-text);
  font-weight: 400;
}
.clx-cs-tag + .clx-cs-tag::before {
  content: ', ';
}
.clx-cs-tag img {
  display: none;
}
/* Optional small logo row (rendered if available) */
.clx-cs-logos {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  filter: grayscale(100%);
  opacity: 0.6;
}
.clx-cs-logos img {
  height: 22px;
  width: auto;
}
/* Hide the description paragraph from JS — keystroke style only shows title + tags */
.clx-cs-content > p {
  display: none;
}
/* Pagination dots */
.clx-cs-dots {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.clx-cs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hp-border);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: 0.3s;
}
.clx-cs-dot.active { background: #FA4900; }


/* =========================================================
   10. TESTIMONIALS
   ========================================================= */
.clx-testimonials-section {
  padding: 56px 0 !important;
  background: var(--hp-white) !important;
}
.clx-testimonials-heading .elementor-heading-title {
  font-size: 34px !important;
  font-weight: 500 !important;
  color: var(--hp-dark) !important;
  margin-bottom: 6px;
}
.clx-testimonials-sub .elementor-text-editor,
.clx-testimonials-sub .elementor-text-editor p {
  color: var(--hp-text);
  font-size: 13px;
  margin-bottom: 32px;
}

/* Testimonial cards */
.clx-tes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.clx-tes-card {
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 24px 20px;
}
.clx-tes-card p {
  color: var(--hp-text);
  font-size: 12px;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 16px;
}
.clx-tes-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.clx-tes-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--hp-light-bg);
}
.clx-tes-stars {
  color: #F5A623;
  font-size: 13px;
  margin-bottom: 1px;
}
.clx-tes-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--hp-dark);
}
.clx-tes-role {
  font-size: 11px;
  color: var(--hp-text-light);
}
.clx-tes-company {
  color: var(--hp-orange);
  font-weight: 600;
}


/* =========================================================
   11. WHY CLIXLOGIX (Dark)
   ========================================================= */
.clx-why-section {
  background: var(--hp-dark-bg) !important;
  padding: 56px 0 !important;
}
.clx-why-heading .elementor-heading-title {
  font-size: 34px !important;
  font-weight: 500 !important;
  color: var(--hp-white) !important;
  margin-bottom: 6px;
}
.clx-why-sub,
.clx-why-sub .elementor-widget-container,
.clx-why-sub p,
.clx-why-sub .elementor-text-editor,
.clx-why-sub .elementor-text-editor p {
  color: #FFFFFF !important;
  font-size: 18px !important;
  line-height: 28px !important;
  margin: 0 0 40px !important;
  max-width: 525px;
}
.clx-why-sub {
  margin-bottom: 0 !important;
}
.clx-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 80px;
  margin-bottom: 32px;
}
.clx-why-item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #FFFFFF;
  font-size: 18px;
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  line-height: 1.4;
}
/* Use the same orange gradient dot as the stats row */
.clx-why-item .clx-stat-dot {
  flex-shrink: 0;
}


/* =========================================================
   12. INDUSTRIES — same structure as Custom Solutions, white bg + gray cards
   ========================================================= */
.clx-industries-section {
  background: #FFFFFF !important;
}
.clx-industries-sub,
.clx-industries-sub .elementor-widget-container,
.clx-industries-sub p {
  color: var(--hp-text) !important;
  font-size: 18px;
  line-height: 28px;
  max-width: 525px;
  margin: 0;
}
/* 4×3 grid — each card is a native Elementor image-box widget.
   The grid layout is achieved by overriding the column's default flex layout to CSS grid. */
.clx-industries-grid-section > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget-wrap,
.clx-industries-grid-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  align-content: start !important;
}
/* Each image-box widget = one industry card */
.clx-industries-grid-section .elementor-widget-image-box {
  position: relative;
  background: #F8F8F8;
  border: 1px solid #EAEAEA;
  border-radius: 20px;
  padding: 22px 22px 22px 22px;
  min-height: 142px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  overflow: hidden;
  width: auto !important;
  max-width: 100% !important;
}
.clx-industries-grid-section .elementor-widget-image-box:hover {
  background: #FFFFFF;
  border-color: #FA4900;
  transform: translateY(-2px);
}
.clx-industries-grid-section .elementor-widget-image-box a,
.clx-industries-grid-section .elementor-widget-image-box a:hover {
  text-decoration: none !important;
}
.clx-industries-grid-section .elementor-image-box-wrapper {
  text-align: left !important;
  display: block !important;
  height: 100%;
}
/* Icon */
.clx-industries-grid-section .elementor-image-box-img {
  width: 32px !important;
  margin: 0 !important;
  display: block !important;
}
.clx-industries-grid-section .elementor-image-box-img img {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain;
  display: block;
  filter: grayscale(100%) brightness(0.8) opacity(0.7);
  transition: filter 0.25s ease;
}
.clx-industries-grid-section .elementor-widget-image-box:hover .elementor-image-box-img img {
  filter: brightness(0) saturate(100%) invert(38%) sepia(99%) saturate(4000%) hue-rotate(8deg) brightness(101%) contrast(103%) !important;
}
/* Title (card name) */
.clx-industries-grid-section .elementor-image-box-content {
  display: block !important;
  padding: 0 !important;
}
.clx-industries-grid-section .elementor-image-box-title {
  font-size: 18px !important;
  font-weight: 400 !important;
  font-family: 'Cabin', sans-serif !important;
  color: #999999 !important;
  line-height: 1.3 !important;
  margin: 14px 0 0 !important;
  transition: color 0.25s ease, font-weight 0.25s ease;
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding-right: 26px;
}
.clx-industries-grid-section .elementor-widget-image-box:hover .elementor-image-box-title {
  color: var(--hp-dark) !important;
  font-weight: 500 !important;
}
.clx-industries-grid-section .elementor-image-box-title a,
.clx-industries-grid-section .elementor-image-box-title a:hover {
  color: inherit !important;
  text-decoration: none !important;
}
/* Bottom-right orange arrow rendered as a pseudo-element on the widget wrapper */
.clx-industries-grid-section .elementor-widget-image-box::after {
  content: "\25B8";
  position: absolute;
  bottom: 14px;
  right: 16px;
  color: #FA4900;
  font-size: 16px;
  line-height: 1;
  transition: transform .2s ease;
}
.clx-industries-grid-section .elementor-widget-image-box:hover::after {
  transform: translateX(4px);
}
/* Right-aligned CTA below the grid */
.clx-industries-cta-wrap {
  text-align: right;
}


/* =========================================================
   13. BLOGS — PowerPack Posts
   ========================================================= */
.clx-blogs-section {
  padding: 56px 0 !important;
  background: #F8F8F8 !important;
}
.clx-blogs-heading .elementor-heading-title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: var(--hp-dark) !important;
  margin: 0 0 16px !important;
}
.clx-blogs-sub {
  font-size: 18px !important;
  line-height: 28px !important;
  font-family: 'Cabin', sans-serif !important;
  color: var(--hp-text) !important;
  max-width: 720px;
  margin: 0 0 40px !important;
}
/* Custom blog card grid */
.clx-blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.clx-blog-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  height: 100%;
}
.clx-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,.18);
}
.clx-blog-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #EFEFEF;
}
.clx-blog-thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0));
  pointer-events: none;
}
.clx-blog-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.clx-blog-card:hover .clx-blog-thumb img {
  transform: scale(1.06);
}
.clx-blog-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.clx-blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cabin', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.clx-blog-cat {
  color: #FA4900;
}
.clx-blog-date {
  color: #999999;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 500;
  font-size: 13px;
}
.clx-blog-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #D8D8D8;
}
.clx-blog-title {
  font-size: 20px !important;
  line-height: 28px !important;
  font-family: 'Cabin', sans-serif !important;
  font-weight: 600 !important;
  color: var(--hp-dark) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clx-blog-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #F0F0F0;
  display: flex;
  justify-content: flex-end;
}
.clx-blog-foot .clx-lc {
  font-size: 14px !important;
}
.clx-blogs-cta-wrap {
  text-align: right;
  margin-top: 32px;
}
@media (max-width: 1024px) {
  body.page .clx-blogs-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.page .clx-blogs-heading .elementor-heading-title {
    font-size: 30px !important;
    line-height: 38px !important;
    letter-spacing: -0.6px !important;
  }
  body.page .clx-blogs-sub {
    font-size: 16px !important;
    line-height: 26px !important;
    margin: 0 0 24px !important;
  }
  body.page .clx-blogs-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  body.page .clx-blog-body {
    padding: 18px !important;
    gap: 12px !important;
  }
  body.page .clx-blog-title {
    font-size: 18px !important;
    line-height: 26px !important;
  }
}


/* =========================================================
   13.5 AWARDS & ACCOLADES
   ========================================================= */
/* Matches Featured Blogs section exactly: 56px top/bottom padding,
   52/60 heading with -1.56 tracking, 40px heading-to-content gap. */
.clx-awards-section {
  padding: 56px 0 !important;
  background: #FFFFFF !important;
}
.clx-awards-heading .elementor-heading-title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: var(--hp-dark) !important;
  margin: 0 0 40px !important;
}
/* Awards grid — heading + 8 native Elementor image widgets in one column.
   Heading spans all 4 columns; images auto-flow as 4-per-row beneath. */
.clx-awards-grid-section .elementor-widget-wrap {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  column-gap: 24px !important;
  row-gap: 24px !important;
  align-items: center !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
}
.clx-awards-grid-section .elementor-widget-wrap > .elementor-widget-heading,
.clx-awards-grid-section .elementor-widget-wrap > .elementor-element.elementor-widget-heading {
  grid-column: 1 / -1 !important;
}
/* Each image widget = one award logo tile */
.clx-awards-section .elementor-widget-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  padding: 24px 20px;
  width: auto !important;
}
.clx-awards-section .elementor-widget-image .elementor-widget-container,
.clx-awards-section .elementor-widget-image .elementor-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.clx-awards-section .elementor-widget-image img {
  max-width: 100%;
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  mix-blend-mode: multiply;
  transition: filter .3s ease;
}
.clx-awards-section .elementor-widget-image:hover img {
  filter: none;
}
@media (max-width: 1024px) {
  body.page .clx-awards-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.page .clx-awards-heading .elementor-heading-title {
    font-size: 30px !important;
    line-height: 38px !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 32px !important;
  }
  body.page .clx-awards-grid-section .elementor-widget-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  body.page .clx-awards-section .elementor-widget-image {
    height: 90px !important;
    padding: 0 12px !important;
  }
  body.page .clx-awards-section .elementor-widget-image img {
    max-height: 56px !important;
  }
}


/* =========================================================
   14. RECOGNITIONS
   ========================================================= */
.clx-recognitions-section {
  padding: 56px 0 !important;
  border-top: 1px solid var(--hp-border);
  background: var(--hp-white) !important;
}
.clx-recognitions-heading .elementor-heading-title {
  font-size: 34px !important;
  font-weight: 500 !important;
  color: var(--hp-dark) !important;
  margin-bottom: 28px;
}
/* Recognitions row — horizontal */
.clx-recognitions-row > .elementor-container {
  display: flex !important;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}
.clx-recognitions-row .elementor-column {
  flex: 0 0 auto !important;
  width: auto !important;
}
.clx-recognitions-row .elementor-image img {
  height: 46px !important;
  width: auto !important;
  opacity: .8;
}


/* =========================================================
   15. MAP
   ========================================================= */
.clx-map-section {
  padding: 56px 0 !important;
  text-align: center;
  background: var(--hp-white) !important;
}
.clx-map-heading .elementor-heading-title {
  font-size: 34px !important;
  font-weight: 500 !important;
  color: var(--hp-dark) !important;
  margin-bottom: 20px;
}
.clx-map-image .elementor-image {
  text-align: center;
}
.clx-map-image img {
  max-width: 660px !important;
  margin: 0 auto;
  opacity: .65;
}


/* =========================================================
   16. CONTACT
   ========================================================= */
.clx-contact-section {
  padding: 80px 0 !important;
  background: #F8F8F8 !important;
}
.clx-contact-section > .elementor-container {
  display: flex !important;
  gap: 30px;
  align-items: stretch !important;
}
.clx-contact-section .elementor-column {
  display: flex !important;
  flex-direction: column !important;
}
.clx-contact-section .elementor-column:first-child { flex: 0 0 58% !important; }
.clx-contact-section .elementor-column:last-child  { flex: 0 0 38% !important; }
.clx-contact-section .elementor-column > .elementor-element-populated,
.clx-contact-section .elementor-column > .elementor-column-wrap {
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: auto !important;
}
.clx-contact-section .elementor-column .elementor-widget-wrap {
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  align-content: stretch !important;
}
.clx-contact-section .elementor-column .elementor-widget-text-editor {
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.clx-contact-section .elementor-column .elementor-widget-text-editor > .elementor-widget-container,
.clx-contact-section .elementor-column .elementor-widget-text-editor .elementor-text-editor {
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: 100%;
}

/* ----- LEFT: Form card ----- */
.clx-form-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 60px 60px 56px;
  box-shadow: 0 10px 40px -20px rgba(0,0,0,.08);
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.clx-form { flex: 1; }
.clx-form-heading {
  font-family: 'Cabin', sans-serif !important;
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 56px !important;
  letter-spacing: -1.2px !important;
  color: #2D3436 !important;
  margin: 0 0 12px !important;
}
.clx-form-sub {
  font-family: 'Cabin', sans-serif !important;
  font-size: 20px !important;
  line-height: 28px !important;
  color: #7B7B7B !important;
  margin: 0 0 36px !important;
}
.clx-form { display: flex; flex-direction: column; gap: 8px; }
.clx-field {
  position: relative;
  border-bottom: 1px solid #E5E5E5;
  transition: border-color .25s ease;
}
.clx-field:focus-within { border-color: #FA4900; }
.clx-field input,
.clx-field textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  line-height: 36px;
  color: #2D3436;
  padding: 12px 0;
}
.clx-field input::placeholder,
.clx-field textarea::placeholder { color: #B5B5B5; }
.clx-field-phone { display: flex; align-items: center; gap: 14px; }
.clx-flag {
  font-size: 18px;
  color: #2D3436;
  font-family: 'Cabin', sans-serif;
  white-space: nowrap;
  padding: 12px 0;
}
.clx-field-phone input { flex: 1; }
.clx-field-msg { padding-right: 48px; }
.clx-field-msg textarea { resize: none; min-height: 80px; line-height: 26px; }
.clx-mic {
  position: absolute;
  bottom: 12px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: #FA4900;
  border: none;
  padding: 0;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease, background .2s ease;
}
.clx-mic:hover { color: #d4550f; }
.clx-mic i { font-size: 18px; }
.clx-attach-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 22px 0 10px;
  flex-wrap: wrap;
}
.clx-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cabin', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #2D3436;
  cursor: pointer;
}
.clx-attach-icon { color: #FA4900; font-size: 18px; }
.clx-attach-note {
  font-family: 'Cabin', sans-serif;
  font-size: 13px;
  color: #FA4900;
}
.clx-submit-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.clx-submit-btn {
  background: #FA4900;
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  padding: 22px 40px;
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 280px;
  justify-content: center;
  transition: background .25s ease, transform .25s ease;
}
.clx-submit-btn:hover { background: #FA4900; }
.clx-submit-btn:active { background: #a83c08; transform: translateY(1px); }
.clx-submit-btn span {
  font-size: 22px;
  line-height: 1;
  display: inline-block;
  transition: transform .25s ease;
}
.clx-submit-btn:hover span { transform: translateX(6px); }
.clx-secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cabin', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #2EA34A;
  letter-spacing: .04em;
}
.clx-secure-lock { font-size: 16px; }
.clx-field-invalid { border-bottom-color: #D33 !important; }
.clx-field-error {
  display: block;
  font-family: 'Cabin', sans-serif;
  font-size: 13px;
  color: #D33;
  margin-top: 4px;
}
.clx-field.clx-field-recording { border-bottom-color: #FA4900 !important; }
.clx-mic.clx-mic-active {
  background: #FFFFFF;
  color: #FA4900;
  box-shadow: 0 0 0 4px rgba(250,73,0,.25);
  animation: clx-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes clx-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(250,73,0,.25); }
  50%      { box-shadow: 0 0 0 10px rgba(250,73,0,.08); }
}
/* intl-tel-input overrides to fit our underline-style field */
.clx-field-phone .iti,
.clx-field-phone .iti--allow-dropdown,
.clx-field-phone .iti--separate-dial-code { width: 100% !important; background: transparent !important; }
.clx-field-phone .iti__flag-container,
.clx-field-phone .iti__selected-flag,
.clx-field-phone .iti--separate-dial-code .iti__selected-flag { background: transparent !important; border: none !important; }
.clx-field-phone .iti__selected-flag:hover,
.clx-field-phone .iti__selected-flag:focus { background: rgba(250,73,0,.06) !important; }
.clx-field-phone .iti__selected-dial-code { color: #2D3436; font-family: 'Cabin', sans-serif; font-size: 18px; }
.clx-field-phone .iti input,
.clx-field-phone .iti input[type="tel"],
.clx-field-phone .iti input.iti__tel-input {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 18px !important;
  line-height: 36px !important;
  color: #2D3436 !important;
  padding: 12px 0 12px 96px !important;
  box-shadow: none !important;
}
.clx-field-phone .iti__country-list { background: #FFFFFF; box-shadow: 0 12px 30px -10px rgba(0,0,0,.18); }
.clx-mic svg { display: block; }

/* ----- RIGHT: Get In Touch panel ----- */
.clx-getintouch {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 32px 32px 36px;
  box-shadow: 0 10px 40px -20px rgba(0,0,0,.08);
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.clx-git-hero {
  width: 100%;
  margin-bottom: 24px;
  border-radius: 16px;
  overflow: hidden;
}
.clx-git-hero img {
  width: 100%;
  height: auto;
  display: block;
}
.clx-git-heading {
  font-family: 'Cabin', sans-serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 36px !important;
  color: #2D3436 !important;
  margin: 0 0 8px !important;
}
.clx-git-sub {
  font-family: 'Cabin', sans-serif !important;
  font-size: 20px !important;
  line-height: 28px !important;
  color: #7B7B7B !important;
  margin: 0 0 24px !important;
}
.clx-git-cards { display: flex; flex-direction: column; gap: 14px; }
.clx-git-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #FFFFFF;
  border: 1px solid #F5810D;
  border-radius: 14px;
  padding: 18px 22px;
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.clx-git-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px rgba(245,129,13,.35);
}
.clx-git-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.clx-git-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.clx-git-text { display: flex; flex-direction: column; line-height: 1.4; }
.clx-git-label {
  font-family: 'Cabin', sans-serif;
  font-size: 14px;
  color: #7B7B7B;
}
.clx-git-value {
  font-family: 'Cabin', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #2D3436;
}
.clx-git-value .clx-at {
  color: #FA4900;
  font-weight: 700;
}

@media (max-width: 1024px) {
  body.page .clx-contact-section { padding: 56px 16px !important; }
  body.page .clx-contact-section > .elementor-container {
    flex-direction: column !important;
    gap: 28px !important;
  }
  body.page .clx-contact-section .elementor-column:first-child,
  body.page .clx-contact-section .elementor-column:last-child {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  body.page .clx-form-card { padding: 32px 24px !important; border-radius: 18px !important; }
  body.page .clx-form-heading { font-size: 30px !important; line-height: 36px !important; letter-spacing: -.6px !important; }
  body.page .clx-form-sub { font-size: 16px !important; line-height: 24px !important; margin-bottom: 24px !important; }
  body.page .clx-field input, body.page .clx-field textarea { font-size: 16px !important; line-height: 28px !important; }
  body.page .clx-submit-btn { width: 100%; min-width: 0; padding: 18px 24px; font-size: 16px; }
  body.page .clx-git-heading { font-size: 24px !important; line-height: 30px !important; }
  body.page .clx-git-sub { font-size: 16px !important; line-height: 24px !important; }
  body.page .clx-git-card { padding: 14px 16px; }
  body.page .clx-git-value { font-size: 15px; }
}


/* =========================================================
   17. FAQ — PowerPack Advanced Accordion
   ========================================================= */
.clx-faq-section {
  padding: 80px 0 !important;
  background: #FFFFFF !important;
}
.clx-faq-heading .elementor-heading-title {
  font-family: 'Cabin', sans-serif !important;
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: #142533 !important;
  margin: 0 0 40px !important;
}
.clx-faq-accordion {
  max-width: 1140px;
  margin: 0 auto;
}

/* ----- Accordion items (PP + Elementor native) ----- */
.clx-faq-accordion .pp-accordion-item,
.clx-faq-accordion .elementor-accordion-item {
  background: #FFFFFF !important;
  border: 1px solid #E8EBED !important;
  border-radius: 20px !important;
  margin-bottom: 16px !important;
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.clx-faq-accordion .pp-accordion-item:hover,
.clx-faq-accordion .elementor-accordion-item:hover {
  box-shadow: 0 6px 22px -10px rgba(20,37,51,.12);
}

/* ----- Question (collapsed + expanded) ----- */
.clx-faq-accordion .pp-accordion-tab-title,
.clx-faq-accordion .elementor-tab-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-height: 84px !important;
  padding: 22px 36px !important;
  background: #FFFFFF !important;
  border: none !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  letter-spacing: -0.4px !important;
  color: #142533 !important;
  cursor: pointer;
  transition: color .3s ease;
}
.clx-faq-accordion .pp-accordion-tab-title:hover,
.clx-faq-accordion .elementor-tab-title:hover {
  color: #FA4900 !important;
}

/* ----- Content body ----- */
.clx-faq-accordion .pp-accordion-tab-content,
.clx-faq-accordion .elementor-tab-content {
  padding: 0 36px 28px !important;
  background: #FFFFFF !important;
  border: none !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 16px !important;
  line-height: 26px !important;
  letter-spacing: 0 !important;
  color: #898D90 !important;
  max-width: 1086px;
}
.clx-faq-accordion .pp-accordion-tab-content p,
.clx-faq-accordion .elementor-tab-content p {
  margin: 0 !important;
  color: #898D90 !important;
  font-size: 16px !important;
  line-height: 26px !important;
}

/* ----- Toggle icon — use CSS-rendered + / − so we don't depend on FA glyphs ----- */
.clx-faq-accordion .pp-accordion-toggle-icon,
.clx-faq-accordion .elementor-accordion-icon,
.clx-faq-accordion .elementor-tab-title .elementor-accordion-icon {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FA4900 !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: background .3s ease, transform .3s ease;
}
/* Hide whatever icon library FA/PP injected inside */
.clx-faq-accordion .pp-accordion-toggle-icon > *,
.clx-faq-accordion .elementor-accordion-icon > *,
.clx-faq-accordion .elementor-accordion-icon i,
.clx-faq-accordion .elementor-accordion-icon svg,
.clx-faq-accordion .pp-accordion-toggle-icon i,
.clx-faq-accordion .pp-accordion-toggle-icon svg {
  display: none !important;
}
/* Draw the + with two pseudo-elements (horizontal + vertical bars) */
.clx-faq-accordion .pp-accordion-toggle-icon::before,
.clx-faq-accordion .elementor-accordion-icon::before,
.clx-faq-accordion .elementor-tab-title .elementor-accordion-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 2px !important;
  background: #FFFFFF !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 1px;
}
.clx-faq-accordion .pp-accordion-toggle-icon::after,
.clx-faq-accordion .elementor-accordion-icon::after,
.clx-faq-accordion .elementor-tab-title .elementor-accordion-icon::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 2px !important;
  height: 14px !important;
  background: #FFFFFF !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 1px;
  transition: transform .3s ease, opacity .3s ease;
}
/* When expanded — collapse the vertical bar so only the horizontal "−" remains */
.clx-faq-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon::after,
.clx-faq-accordion .elementor-accordion-item.elementor-active .elementor-accordion-icon::after,
.clx-faq-accordion .elementor-active .elementor-accordion-icon::after,
.clx-faq-accordion .elementor-accordion-item[aria-expanded="true"] .elementor-accordion-icon::after,
.clx-faq-accordion .elementor-tab-title[aria-expanded="true"] .elementor-accordion-icon::after,
.clx-faq-accordion .pp-accordion-item.pp-active .pp-accordion-toggle-icon::after,
.clx-faq-accordion .pp-accordion-item.active .pp-accordion-toggle-icon::after,
.clx-faq-accordion .pp-accordion-tab-title.pp-active .pp-accordion-toggle-icon::after,
.clx-faq-accordion .pp-accordion-tab-title.active .pp-accordion-toggle-icon::after,
.clx-faq-accordion .pp-accordion-tab-title[aria-expanded="true"] .pp-accordion-toggle-icon::after,
.clx-faq-accordion .pp-accordion-active .pp-accordion-toggle-icon::after {
  transform: translate(-50%, -50%) scaleY(0) !important;
  opacity: 0 !important;
}
/* Hide PP/Elementor's open/closed icon variants since we draw our own */
.clx-faq-accordion .elementor-accordion-icon-closed,
.clx-faq-accordion .elementor-accordion-icon-opened { display: none !important; }

@media (max-width: 1024px) {
  body.page .clx-faq-section { padding: 56px 16px !important; }
  body.page .clx-faq-heading .elementor-heading-title {
    font-size: 30px !important;
    line-height: 38px !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 28px !important;
  }
  body.page .clx-faq-accordion .pp-accordion-tab-title,
  body.page .clx-faq-accordion .elementor-tab-title {
    min-height: 80px !important;
    padding: 20px 22px !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: -0.4px !important;
  }
  body.page .clx-faq-accordion .pp-accordion-tab-content,
  body.page .clx-faq-accordion .elementor-tab-content {
    padding: 0 22px 24px !important;
    font-size: 15px !important;
    line-height: 24px !important;
  }
  body.page .clx-faq-accordion .pp-accordion-toggle-icon,
  body.page .clx-faq-accordion .elementor-accordion-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
  }
}


/* Footer — pitch black background */
body footer.axil-footer,
body footer.axil-footer.footer-default,
body footer.axil-footer.footer-style-3,
body footer.axil-footer.bg-color-extra09,
body .axil-footer.axil-footer-style-3,
body .axil-call-to-action.callaction-style-2.bg-color-extra09 {
  background-color: #000000 !important;
}
body footer.axil-footer .copyright-default,
body footer.axil-footer .footer-top {
  background-color: #000000 !important;
}

/* Footer — Follow Us row: divider + single-row aligned social links */
body footer.axil-footer .footer-top.ax-section-gap {
  padding: 72px 0 36px !important;
}
body footer.axil-footer .footer-top .container > .row + .row {
  border-top: 1px solid #2A2A2A;
  margin-top: 8px;
  padding-top: 24px;
}
body footer.axil-footer .footer-top .footer-widget-item {
  margin-bottom: 0 !important;
}
body footer.axil-footer .footer-top .footer-widget-item p:last-child,
body footer.axil-footer .footer-top .footer-widget-item ul:last-child {
  margin-bottom: 0 !important;
}
body footer.axil-footer .footer-widget-item h5.title {
  color: #FFFFFF !important;
  margin-bottom: 18px !important;
}
body footer.axil-footer .ft-social-share {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
body footer.axil-footer .ft-social-share li,
body footer.axil-footer .ft-social-share li.clutch-box {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  white-space: nowrap !important;
  list-style: none !important;
  line-height: 1 !important;
}
body footer.axil-footer .ft-social-share li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  flex-shrink: 0;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: color .25s ease;
}
body footer.axil-footer .ft-social-share li > a:hover {
  color: #FA4900 !important;
  transform: none !important;
}
body footer.axil-footer .ft-social-share li > a i,
body footer.axil-footer .ft-social-share li > a .fa,
body footer.axil-footer .ft-social-share li > a .fab,
body footer.axil-footer .ft-social-share li > a .fas,
body footer.axil-footer ul.ft-social-share.d-flex.justify-content-center.liststyle.flex-wrap li i,
body footer.axil-footer ul.ft-social-share.d-flex.justify-content-center.liststyle.flex-wrap li:hover i {
  font-size: 16px !important;
  line-height: 1 !important;
  color: inherit !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: inherit !important;
}
body footer.axil-footer .ft-social-share li.clutch-box > a {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
}
body footer.axil-footer .ft-social-share li.clutch-box > a span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}
body footer.axil-footer .ft-social-share li.clutch-box img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
  display: block;
}
@media (max-width: 1024px) {
  body footer.axil-footer .ft-social-share {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px 20px !important;
  }
  body footer.axil-footer .ft-social-share li {
    justify-content: center !important;
  }
}

/* Footer copyright row — single horizontal line with dividers */
body footer.axil-footer .copyright-default {
  padding: 22px 0 24px !important;
  border-top: 1px solid #2A2A2A !important;
  border-bottom: 9px solid #FA4900 !important;
}
body footer.axil-footer .clx-copyright-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  font-family: 'Cabin', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}
body footer.axil-footer .clx-cr-item {
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
}
body footer.axil-footer .clx-cr-divider {
  width: 1px;
  height: 16px;
  background: #3A3A3A;
  display: inline-block;
}
body footer.axil-footer .clx-cr-dmca {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
}
body footer.axil-footer .clx-cr-dmca img {
  height: 22px;
  width: auto;
  display: block;
}
@media (max-width: 1024px) {
  body footer.axil-footer .clx-copyright-row {
    gap: 10px 16px;
    font-size: 12px;
  }
  body footer.axil-footer .clx-cr-divider { display: none; }
  body footer.axil-footer .clx-cr-dmca img { height: 18px; }
}

/* Footer container alignment — match body 1140px width */
body .axil-footer .container,
body .axil-footer.footer-default .container,
body .axil-footer .footer-top .container,
body .axil-footer .copyright-default .container,
body footer.axil-footer .container {
  max-width: 1140px !important;
  width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   18. GLOBAL OFFICES
   ========================================================= */
.clx-offices-section {
  background: #000000 !important;
  padding: 56px 0 !important;
  border-bottom: 1px solid #4A5560 !important;
  position: relative;
  overflow: hidden;
}
/* 3-col grid — widgets are emitted as [H1 H2 H3 T1 T2 T3] so row 1 fills with
   headings and row 2 fills with addresses via the default row-major flow. */
.clx-offices-section .elementor-widget-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px 40px !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 2;
}
/* All text inside the offices section is white on the black background */
html body.page .clx-offices-section,
html body.page .clx-offices-section h1,
html body.page .clx-offices-section h2,
html body.page .clx-offices-section h3,
html body.page .clx-offices-section h4,
html body.page .clx-offices-section h5,
html body.page .clx-offices-section h6,
html body.page .clx-offices-section p,
html body.page .clx-offices-section span,
html body.page .clx-offices-section .elementor-heading-title,
html body.page .clx-offices-section .elementor-text-editor,
html body.page .clx-offices-section .elementor-text-editor p {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* Country code — oversized 96px bold display type */
.clx-offices-section .elementor-widget-heading .elementor-heading-title {
  font-family: 'Cabin', sans-serif !important;
  font-size: 96px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 3px !important;
  margin: 0 0 18px !important;
}
/* Address */
.clx-offices-section .elementor-widget-text-editor .elementor-text-editor,
.clx-offices-section .elementor-widget-text-editor .elementor-text-editor p {
  font-family: 'Cabin', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  margin: 0 !important;
}
@media (max-width: 1024px) {
  body.page .clx-offices-section { padding: 56px 16px !important; }
  body.page .clx-offices-section .elementor-widget-wrap {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  /* On mobile: reorder so each office appears as code + address together
     instead of all-headings-first then all-addresses */
  body.page .clx-offices-section .elementor-widget-heading:nth-of-type(1) { order: 1; }
  body.page .clx-offices-section .elementor-widget-text-editor:nth-of-type(1) { order: 2; margin-bottom: 20px; }
  body.page .clx-offices-section .elementor-widget-heading:nth-of-type(2) { order: 3; }
  body.page .clx-offices-section .elementor-widget-text-editor:nth-of-type(2) { order: 4; margin-bottom: 20px; }
  body.page .clx-offices-section .elementor-widget-heading:nth-of-type(3) { order: 5; }
  body.page .clx-offices-section .elementor-widget-text-editor:nth-of-type(3) { order: 6; }
  body.page .clx-world-map { width: 160% !important; opacity: .4 !important; }
  body.page .clx-office-code { font-size: 44px !important; margin-bottom: 10px !important; }
  body.page .clx-office-addr { font-size: 16px !important; line-height: 26px !important; }
}


/* =========================================================
   RESPONSIVE — 1024px
   ========================================================= */
@media (max-width: 1024px) {
  .clx-hero-title .elementor-heading-title {
    font-size: 42px !important;
    line-height: 48px !important;
  }
  .clx-about-heading .elementor-heading-title,
  .clx-service-heading .elementor-heading-title,
  .clx-emerging-heading .elementor-heading-title {
    font-size: 36px !important;
    line-height: 42px !important;
  }
  /* Service tabs mobile — horizontal scroll dark bar, full rectangular tabs */
  .clx-service-tabs .elementor-tabs {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .clx-service-tabs .elementor-tabs-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 0;
    padding: 0 !important;
    background: #16202E !important;
    border-radius: 14px 14px 0 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
  }
  .clx-service-tabs .elementor-tabs-wrapper::-webkit-scrollbar { display: none; }
  .clx-service-tabs .elementor-tab-title {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 18px 22px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,.6) !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
    text-align: center !important;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .clx-service-tabs .elementor-tab-title:last-of-type {
    border-right: none !important;
  }
  .clx-service-tabs .elementor-tab-title:hover {
    color: #FFFFFF !important;
  }
  .clx-service-tabs .elementor-tab-title.elementor-active {
    width: auto !important;
    margin-right: 0 !important;
    padding: 18px 24px !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center !important;
    color: #FFFFFF !important;
    background: linear-gradient(86deg, #F57E07 0%, #FA4900 100%) !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    filter: none !important;
  }
  .clx-service-tabs .elementor-tabs-content-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    align-self: stretch !important;
    min-height: 0 !important;
    padding: 32px 28px !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
  }
  .clx-service-tabs .elementor-tabs-wrapper::after {
    display: none !important;
  }
  /* TP tabs stack */
  .clx-tp-tabs .elementor-tabs {
    flex-direction: column !important;
  }
  .clx-tp-tabs .elementor-tabs-wrapper {
    flex: unset !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 4px;
  }
  .clx-tp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .clx-industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Recognitions */
  .clx-recognitions-row .elementor-column {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}


/* =========================================================
   RESPONSIVE — 1024px and below (tablet + mobile)
   ========================================================= */
@media (max-width: 1024px) {
  /* HERO — readable mobile typography & tighter padding */
  .clx-hero-section {
    min-height: 0 !important;
    padding: 36px 0 32px !important;
  }
  .clx-hero-section > .elementor-container {
    padding: 0 20px !important;
  }
  body.page .clx-hero-label .elementor-heading-title {
    font-size: 16px !important;
    line-height: 28px !important;
    margin-bottom: 8px !important;
  }
  .clx-hero-title .elementor-heading-title {
    font-size: 30px !important;
    line-height: 38px !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 18px !important;
  }
  .clx-hero-title .clx-hero-break {
    display: inline;
  }
  .clx-tw-row {
    font-size: 16px;
    line-height: 22px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
  }
  .clx-tw-box {
    padding: 10px 16px;
    min-width: 160px;
  }
  .clx-tw-text { font-size: 16px !important; }
  .clx-tw-label { font-size: 11px; }
  .clx-hc4, .clx-hc5, .clx-hc1, .clx-hero-stripes-wrap, .clx-hero-stripes {
    display: none !important;
  }
  /* Logo marquee should NOT pull up over the typewriter on mobile;
     and it should run full-bleed edge-to-edge across the screen. */
  .clx-logo-slider,
  .clx-logo-slider > .elementor-container,
  .clx-logo-slider .elementor-column,
  .clx-logo-slider .elementor-widget-wrap {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .clx-logo-slider {
    padding-top: 24px !important;
    padding-bottom: 32px !important;
  }
  .clx-logo-marquee {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .clx-logo-item {
    min-width: 140px !important;
    padding: 10px 22px !important;
  }
  .clx-logo-item img {
    height: 32px !important;
  }
  /* RATINGS — horizontally scrollable cards */
  .clx-ratings-section {
    margin-top: -10px !important;
  }
  .clx-ratings-section > .elementor-container {
    flex-wrap: nowrap !important;
    gap: 14px !important;
    padding: 16px 16px !important;
    border-radius: 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    max-width: 92vw !important;
    justify-content: flex-start !important;
  }
  .clx-ratings-section > .elementor-container::-webkit-scrollbar { display: none; }
  .clx-ratings-section .elementor-column {
    flex: 0 0 auto !important;
    width: 220px !important;
    min-width: 220px !important;
    padding: 18px 18px !important;
    background: #FFFFFF;
    border-radius: 12px;
    scroll-snap-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .clx-ratings-section .elementor-column:not(:last-child)::after {
    display: none;
  }
  /* Card layout: logo row, then stars + score side-by-side */
  .clx-ratings-section .elementor-column > .elementor-widget-wrap {
    display: grid !important;
    grid-template-areas:
      "logo  logo"
      "stars score";
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px 14px;
    padding: 0 !important;
  }
  .clx-ratings-section .elementor-column .elementor-widget-image    { grid-area: logo;  margin: 0 !important; }
  .clx-ratings-section .elementor-column .clx-stars-wrap            { grid-area: stars; margin: 0 !important; align-self: center; }
  .clx-ratings-section .elementor-column .clx-rating-value          { grid-area: score; margin: 0 !important; align-self: center; }
  .clx-ratings-section .elementor-column .clx-stars-wrap .elementor-widget-container,
  .clx-ratings-section .elementor-column .clx-rating-value .elementor-widget-container {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    line-height: 1;
  }
  .clx-ratings-section .clx-stars,
  .clx-ratings-section .clx-rating-value .elementor-heading-title {
    line-height: 1 !important;
    margin: 0 !important;
  }
  .clx-ratings-section .elementor-image img,
  .clx-ratings-section .elementor-widget-image img {
    max-height: 36px !important;
    max-width: 160px !important;
    margin: 0 !important;
  }
  .clx-ratings-section .elementor-column:nth-child(1) .elementor-widget-image img { max-height: 44px !important; max-width: 180px !important; }
  .clx-ratings-section .clx-rating-value .elementor-heading-title { font-size: 14px; }
  .clx-ratings-section .clx-stars { font-size: 13px; }
  /* Stats — horizontally scrollable, full-bleed cards */
  .clx-stats-row,
  .clx-stats-row > .elementor-container,
  .clx-stats-row .elementor-widget-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  .clx-stats-row > .elementor-container {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 0 !important;
    justify-content: flex-start !important;
  }
  .clx-stats-row > .elementor-container::-webkit-scrollbar { display: none; }
  body.page .clx-stats-row .elementor-column {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 260px !important;
    padding: 0 30px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    scroll-snap-align: start;
  }
  body.page .clx-stats-row .elementor-column:first-child { padding-left: 34px !important; }
  body.page .clx-stats-row .elementor-column:last-child  { padding-right: 34px !important; }
  body.page .clx-stats-row .clx-stat-text > .elementor-widget-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }
  body.page .clx-stats-row .clx-stat-text,
  body.page .clx-stats-row .clx-stat-text .elementor-widget-container,
  body.page .clx-stats-row .clx-stat-text .elementor-text-editor,
  body.page .clx-stats-row .clx-stat-text .elementor-text-editor p,
  body.page .clx-stats-row .clx-stat-label {
    font-size: 18px !important;
    line-height: 26px !important;
  }
  /* CTA links — scale down + right-align on mobile, unified across all CTAs */
  body.page .clx-lc,
  body.page .clx-about-cta .elementor-button {
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
  }
  body.page .clx-lc::after,
  body.page .clx-about-cta .elementor-button-text::after {
    margin-left: 10px !important;
    font-size: 1.1em !important;
  }
  /* CTA alignment on mobile handled by the global .clx-tech-card / .clx-process-step
     flex-column rule at the top of the file — don't broad-target widget-containers
     here, it leaks text-align down into titles and body copy inside cards. */
  body.page .clx-about-cta .elementor-button-wrapper {
    text-align: right !important;
  }
  /* Secure The Success Of Your Project (Kaizen) — mobile */
  body.page .clx-kaizen-header > .elementor-container {
    flex-direction: column !important;
    gap: 24px;
  }
  body.page .clx-kaizen-heading .elementor-heading-title {
    font-size: 30px !important;
    line-height: 38px !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 16px !important;
  }
  body.page .clx-kaizen-text p {
    font-size: 16px !important;
    line-height: 26px !important;
    max-width: 100% !important;
  }
  body.page .clx-kaizen-image-wrap {
    justify-content: center !important;
  }
  body.page .clx-kaizen-image {
    max-width: 320px !important;
  }
  body.page .clx-process-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 14px !important;
  }
  body.page .clx-process-step {
    min-height: 200px !important;
    padding: 22px 18px 18px !important;
    border-radius: 16px !important;
  }
  body.page .clx-process-num {
    font-size: 44px !important;
    top: 14px !important;
    right: 18px !important;
  }
  body.page .clx-process-step h4 {
    font-size: 17px !important;
    margin-bottom: 10px !important;
  }
  body.page .clx-process-step p {
    font-size: 13px !important;
    line-height: 22px !important;
    margin-bottom: 14px !important;
  }
  body.page .clx-process-step .clx-lc {
    font-size: 12px !important;
  }

  /* Custom Solutions — mobile */
  body.page .clx-solutions-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.page .clx-solutions-header,
  body.page .clx-solutions-header.elementor-element {
    padding: 48px 16px 24px !important;
  }
  body.page .clx-solutions-grid-section,
  body.page .clx-solutions-grid-section.elementor-element {
    padding: 0 16px 24px !important;
  }
  body.page .clx-solutions-cta-row,
  body.page .clx-solutions-cta-row.elementor-element {
    padding: 0 16px 48px !important;
  }
  body.page .clx-solutions-header > .elementor-container {
    flex-direction: column !important;
    gap: 16px;
  }
  body.page .clx-solutions-heading .elementor-heading-title {
    font-size: 30px !important;
    line-height: 38px !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 4px !important;
  }
  body.page .clx-solutions-heading .clx-sol-break {
    display: inline;
  }
  body.page .clx-solutions-sub,
  body.page .clx-solutions-sub p {
    font-size: 16px !important;
    line-height: 26px !important;
    max-width: 100% !important;
  }
  body.page .clx-sol-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  body.page .clx-sol-card {
    min-height: 124px !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }
  body.page .clx-sol-name {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-top: 10px !important;
  }
  body.page .clx-sol-icon {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
  }
  body.page .clx-sol-arrow {
    bottom: 10px !important;
    right: 12px !important;
    font-size: 13px !important;
  }
  body.page .clx-sol-deco {
    display: none !important;
  }
  body.page .clx-solutions-cta-wrap {
    text-align: right !important;
  }
  body.page .clx-solutions-cta-row .clx-lc {
    font-size: 13px !important;
  }

  /* Our Industry Expertise — mobile */
  body.page .clx-industries-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.page .clx-industries-header,
  body.page .clx-industries-header.elementor-element {
    padding: 48px 16px 24px !important;
  }
  body.page .clx-industries-grid-section,
  body.page .clx-industries-grid-section.elementor-element {
    padding: 0 16px 24px !important;
  }
  body.page .clx-industries-cta-row,
  body.page .clx-industries-cta-row.elementor-element {
    padding: 0 16px 48px !important;
  }
  body.page .clx-industries-header > .elementor-container {
    flex-direction: column !important;
    gap: 16px;
  }
  body.page .clx-industries-heading .elementor-heading-title {
    font-size: 30px !important;
    line-height: 38px !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 4px !important;
  }
  body.page .clx-industries-sub,
  body.page .clx-industries-sub p {
    font-size: 16px !important;
    line-height: 26px !important;
    max-width: 100% !important;
  }
  body.page .clx-industries-grid-section > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget-wrap,
  body.page .clx-industries-grid-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  body.page .clx-industries-grid-section .elementor-widget-image-box {
    min-height: 124px !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }
  body.page .clx-industries-grid-section .elementor-image-box-title {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-top: 10px !important;
  }
  body.page .clx-industries-grid-section .elementor-image-box-img,
  body.page .clx-industries-grid-section .elementor-image-box-img img {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
  }
  body.page .clx-industries-grid-section .elementor-widget-image-box::after {
    bottom: 10px !important;
    right: 12px !important;
    font-size: 13px !important;
  }
  body.page .clx-industries-cta-wrap {
    text-align: right !important;
  }
  body.page .clx-industries-cta-row .clx-lc {
    font-size: 13px !important;
  }

  /* Technologies & Platforms — mobile/tablet, mirrors service-tabs pattern */
  body.page .clx-tp-image-wrap,
  body.page .clx-tp-header > .elementor-container > .elementor-column:nth-child(2) {
    display: none !important;
  }
  /* On mobile the artwork is hidden so the heading/subtitle sits flush
     against the tabs row. Add breathing room between them. */
  body.page .clx-tp-header {
    padding-bottom: 32px !important;
  }
  /* Tab area: dark bar above + white panel below, flush together (same as service tabs) */
  body.page .clx-tp-tabs {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.page .clx-tp-nav {
    position: relative;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: #16202E !important;
    border: none !important;
    border-right: none !important;
    border-radius: 14px 14px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    list-style: none;
    /* Right padding so the last few items peek and the user knows it's scrollable */
    scroll-padding-right: 60px;
  }
  body.page .clx-tp-nav::-webkit-scrollbar { display: none; }
  body.page .clx-tp-nav-item {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 18px 22px !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,.6) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
    text-align: center !important;
    white-space: nowrap;
    scroll-snap-align: start;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    box-sizing: border-box;
  }
  body.page .clx-tp-nav-item:last-of-type {
    border-right: none !important;
  }
  body.page .clx-tp-nav-item.is-active {
    background: linear-gradient(86deg, #F57E07 0%, #FA4900 100%) !important;
    background-color: #FA4900 !important;
    color: #FFFFFF !important;
    border-right-color: transparent !important;
  }
  body.page .clx-tp-nav-num { display: none !important; }
  body.page .clx-tp-nav-label {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: inherit !important;
  }
  body.page .clx-tp-nav-item.is-active .clx-tp-nav-label {
    color: #FFFFFF !important;
    font-weight: 500 !important;
  }
  /* Nested subtabs (Web Development > Backend / Frontend): on mobile
     we hide the subnav UI entirely and instead render BOTH subpanels
     stacked inside the active parent tab, so the user scrolls through
     both sections as one continuous panel. */
  body.page .clx-tp-nav .clx-tp-nav-sub-wrap {
    display: none !important;
  }
  /* When the Backend subpanel is active, also force the Frontend subpanel
     to render — so tapping Web Development on mobile shows Languages,
     Frameworks, and Libraries / APIs for BOTH Backend and Frontend. */
  body.page .clx-tp-panel.is-active[data-tp-sub-panel="0"] ~ .clx-tp-panel[data-tp-panel="3"][data-tp-sub-panel="1"] {
    display: block !important;
  }
  body.page .clx-tp-panels {
    padding: 28px 24px !important;
    margin: 0 !important;
    width: 100%;
    background: #FFFFFF;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  }
  body.page .clx-tp-panel-title {
    font-size: 22px !important;
    margin-bottom: 16px !important;
  }
  body.page .clx-tp-cards {
    gap: 10px !important;
  }
  /* Tech cards on mobile — smaller badge, less popping, vertical gap to clear neighbours */
  body.page .clx-tech-card {
    --clx-badge-size: 84px;
    --clx-badge-pop: 32px;
    --clx-badge-gap: 16px;
    --clx-card-pad-x: 22px;
    --clx-card-pad-y: 24px;
    min-height: 0 !important;
    padding: 24px 22px !important;
    margin-top: 50px !important;
  }
  body.page .clx-tech-card h3,
  body.page .clx-tech-card .clx-sc-title {
    padding-right: 100px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }
  /* Add row spacing to elementor columns inside tech grid so popped badges
     don't crash into the previous card. */
  body.page .clx-tech-card-grid > .elementor-container {
    gap: 50px !important;
  }
  body.page .clx-tech-card-grid + .clx-tech-card-grid {
    padding-top: 0 !important;
  }
  /* Section headings — mobile look (body.page prefix for specificity).
     Do NOT force a color here — each heading keeps its own theme color
     (e.g. about-heading is white on black). */
  body.page .clx-about-heading .elementor-heading-title,
  body.page .clx-service-heading .elementor-heading-title,
  body.page .clx-emerging-heading .elementor-heading-title,
  body.page .clx-tech-heading .elementor-heading-title,
  body.page .clx-process-heading .elementor-heading-title,
  body.page .clx-cs-heading .elementor-heading-title,
  body.page .clx-tes-heading .elementor-heading-title,
  body.page .clx-industry-heading .elementor-heading-title,
  body.page .clx-why-heading .elementor-heading-title,
  body.page .clx-faq-heading .elementor-heading-title,
  body.page .clx-recognitions-heading .elementor-heading-title,
  body.page [class*="clx-"][class*="-heading"] .elementor-heading-title {
    font-size: 32px !important;
    line-height: 38px !important;
    font-weight: 600 !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 20px !important;
  }
  /* Grids to single/double col */
  .clx-tes-grid { grid-template-columns: 1fr; }
  .clx-industry-grid { grid-template-columns: repeat(2, 1fr); }
  .clx-why-grid { grid-template-columns: 1fr; }
  .clx-sc-links {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 16px 0 !important;
  }
  .clx-sc-link {
    justify-self: center !important;
    padding: 6px 0;
  }
  .clx-cs-container { flex-direction: column; }
  .clx-tp-grid { grid-template-columns: 1fr; }
  /* Contact stack */
  .clx-contact-section > .elementor-container {
    flex-direction: column;
  }
  .clx-contact-section .elementor-column:last-child {
    flex: 1;
    width: 100%;
  }
  /* Consistent vertical rhythm for every major section on mobile */
  body.page .clx-stats-row,
  body.page .clx-stats-row.elementor-section {
    padding-top: 60px !important;
    padding-bottom: 30px !important;
    margin-top: 0 !important;
  }
  /* Kill the heavy rating-card shadow on mobile — it bleeds into the stats row */
  body.page .clx-ratings-bar > .elementor-container,
  body.page .clx-ratings-section > .elementor-container {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }
  body.page .clx-about-section,
  body.page .clx-about-section.elementor-element {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  body.page .clx-about-section .clx-about-heading {
    margin-bottom: 0 !important;
  }
  body.page .clx-about-section .clx-about-heading .elementor-heading-title {
    margin-bottom: 24px !important;
  }
  .clx-service-section,
  .clx-emerging-section,
  .clx-tech-section,
  .clx-process-section,
  .clx-cs-section,
  .clx-tes-section,
  .clx-industry-section,
  .clx-why-section,
  .clx-faq-section,
  .clx-contact-section {
    padding: 48px 16px !important;
  }
  .clx-service-heading .elementor-heading-title,
  .clx-about-heading .elementor-heading-title,
  .clx-emerging-heading .elementor-heading-title {
    margin-bottom: 24px !important;
  }
}

/* =========================================================
   Reviews & Testimonials page (slug: reviews-and-testimonials)
   Phase A: layout with placeholder content. Brand-aligned
   (Cabin / DM Sans / #FA4900). All rules scoped under
   `body.page-reviews-and-testimonials` so they never leak
   to other pages.
   ========================================================= */

.clx-rev {
  --rev-orange: #FA4900;
  --rev-dark: #142533;
  --rev-text: #6F7A82;
  --rev-muted: #98A0A6;
  --rev-rule: #ECECEC;
  --rev-card-radius: 20px;
  --rev-pill-radius: 26px;
  font-family: 'DM Sans', sans-serif;
  color: var(--rev-text);
}

/* Cap .clx-rev .container at the same 1140px max-width the rest of the
   site uses (Elementor sections, nav). The parent theme/Bootstrap
   defines `body .container { max-width: 1336px !important }` (loaded
   via parent style.css?ver=6.8.2), which otherwise wins the cascade
   over our 2-class selector and forces the wrapper to 1336px — pushing
   hero text + cards past the nav's logo↔Contact-Us alignment.
   !important here matches the parent rule to win. */
.clx-rev .container {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  position: relative !important;
}
@media (max-width: 1180px) {
  .clx-rev .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

.elementor-section.elementor-section-stretched.elementor-section-full_width
  > .elementor-container {
  padding: 0;
}
.elementor-widget-shortcode .elementor-widget-container {
  padding: 0;
  margin: 0;
}

/* ---------- Hero ---------- */
.clx-rev-hero {
  background: #FFEFE6;     /* matches about-us inner-page peach band */
  padding: 56px 0 50px;    /* mirrors site-wide.css inner-page hero padding (post breadcrumb-into-hero migration) */
  text-align: left;        /* matches about-us left-column hero text */
  position: relative;
  min-height: 408px;
}
.clx-rev-hero__stack {
  margin-top: 32px;
  max-width: 580px;        /* roughly the about-us left column width at 1140 container */
}
.clx-rev-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  letter-spacing: 0.4px;
}
.clx-rev-eyebrow em > strong,
.clx-rev-eyebrow em strong {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(90deg, #FF9900 0%, #F57E07 33%, #EF4E07 66%, #FA4900 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rev-orange);
}
.clx-rev-h1 {
  margin: 0 0 22px;
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -1.92px;
  color: var(--rev-dark);
}
.clx-rev-sub {
  margin: 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 30px;
  color: #4D5660;
}
.clx-rev-sub em {
  font-style: italic;
  font-weight: 600;
  color: var(--rev-orange);
}

/* ---------- Filter bar ---------- */
.clx-rev-filterbar {
  background: #FFFFFF;
  padding: 40px 0 8px;
  position: relative;
  z-index: 50;
}
.clx-rev-filterbar .container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.clx-rev-pill {
  flex: 1 1 280px;
  max-width: 320px;
  position: relative;
  z-index: 1;
}
.clx-rev-pill[open] {
  z-index: 60;
}
.clx-rev-pill > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
  border-radius: 28px 14px 28px 14px;
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--rev-dark);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.clx-rev-pill > summary::-webkit-details-marker { display: none; }
.clx-rev-pill > summary:hover {
  background: #FAFAFA;
  border-color: #D8D8D8;
}
.clx-rev-pill[open] > summary {
  border-color: var(--rev-orange);
  box-shadow: 0 6px 18px rgba(250, 73, 0, 0.10);
}
.clx-rev-caret {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 11px solid var(--rev-orange);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.clx-rev-pill[open] .clx-rev-caret {
  transform: rotate(180deg);
}

.clx-rev-pill__menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid #ECECEC;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(20, 37, 51, 0.10);
  position: absolute;
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
}
.clx-rev-pill__menu li { margin: 0; }
.clx-rev-pill__menu label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--rev-dark);
  transition: background-color 0.15s ease;
}
.clx-rev-pill__menu label:hover {
  background: #FFF4EC;
}
.clx-rev-pill__menu input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid #C8CCD0;
  border-radius: 4px;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.clx-rev-pill__menu input[type="checkbox"]:checked {
  background: var(--rev-orange);
  border-color: var(--rev-orange);
}
.clx-rev-pill__menu input[type="checkbox"]:checked::after {
  content: '';
  width: 4px; height: 8px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(0, -1px);
}
.clx-rev-pill__menu span { flex: 1; }
.clx-rev-pill__menu em {
  font-style: normal;
  font-size: 12px;
  color: var(--rev-muted);
  font-weight: 500;
}

.clx-rev-clear {
  appearance: none;
  background: none;
  border: none;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--rev-orange);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Card grid ---------- */
.clx-rev-grid {
  background: #FFFFFF;
  padding: 24px 0 80px;
  position: relative;
  z-index: 1;
}
.clx-rev-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;        /* siblings stay top-anchored when one card expands */
}

/* ---------- Single card ---------- */
.clx-rev-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #ECECEC;
  border-radius: var(--rev-card-radius);
  padding: 32px 28px 28px;
  box-shadow: 0 8px 28px rgba(20, 37, 51, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 100%;
}
.clx-rev-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(20, 37, 51, 0.14);
  border-color: rgba(250, 73, 0, 0.25);
}

.clx-rev-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
}
.clx-rev-card__brand {
  max-height: 56px;
  max-width: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.clx-rev-card__brand--text {
  display: inline-block;
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--rev-dark);
  letter-spacing: -0.3px;
  max-width: 60%;
}
.clx-rev-card__platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.clx-rev-card__platform img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: contain;
  background: transparent;
  padding: 0;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.12));
}
.clx-rev-card__platform small {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--rev-muted);
}
/* Legacy "W" badge CSS removed — replaced by website-circle.svg which
   inherits the standard .clx-rev-card__platform img styling above. */

.clx-rev-card__intro {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 24px;
  color: #2A323A;
}
.clx-rev-card__company {
  color: var(--rev-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.clx-rev-card__company:hover {
  color: var(--rev-orange);
}

.clx-rev-card__rule {
  border: 0;
  border-top: 1px solid var(--rev-rule);
  margin: 18px 0;
}
/* === Elementor context overrides ====================================
   When the card is rendered inside an Elementor widget (via the
   [clx_service_testimonials] shortcode on about-us / services / etc.),
   two Elementor frontend.min.css rules bleed in and break the design:
   1. `.elementor hr { background-color: transparent; margin: 0 }` —
      collapses the .clx-rev-card__rule divider above the reviewer.
   2. `body.elementor-page .elementor-section *` { font-family: var(--hp-font) !important }`
      — flattens the card's intended typography (brand, blockquote, name).
   These scoped overrides restore the card's design when embedded.
   ==================================================================== */
.elementor .clx-rev-card__rule,
.elementor-widget-container .clx-rev-card__rule {
  margin: 18px 0 !important;
  border-top: 1px solid var(--rev-rule);
  background-color: transparent;
  height: 0;
}
/* Specificity 0,3,2 — beats Elementor's 0,2,2 without !important. */
body.elementor-page .elementor-section .clx-rev-card,
body.elementor-page .elementor-section .clx-rev-card * {
  font-family: inherit;
}
/* Italic blockquote got flattened by the font override — restore. */
body.elementor-page .elementor-section .clx-rev-card__blockquote {
  font-style: italic !important;
}
/* Pin gap on the service-page grid so cards space identically to the
   standalone reviews page (28px). */
.clx-rev-cards.clx-rev-cards--service {
  gap: 28px;
}

.clx-rev-card__quote {
  position: relative;
  padding-top: 8px;
  /* FIXED height = padding-top (8px) + 9 lines × 26px line-height
     (234px) = 242px. Every card reserves the same vertical space for
     the quote so the reviewer block + HR + foot all sit at identical
     Y across cards in a row, regardless of quote length. Short quotes
     sit at the top of this box (natural top-aligned text flow). */
  height: 242px;
  /* Belt-and-suspenders — clip if the inner blockquote ever exceeds
     the wrapper's height (e.g., line-clamp not honoured by browser). */
  overflow: hidden;
}
.clx-rev-card.is-expanded .clx-rev-card__quote {
  height: auto;
}
.clx-rev-card__quoteglyph {
  width: 32px;
  height: 24px;
  display: block;
  margin-bottom: 10px;
}
.clx-rev-card__quote blockquote {
  margin: 0;
  font-style: italic;
  font-size: 15px;
  line-height: 26px;
  color: #3A434B;
}

.clx-rev-card__reviewer {
  display: flex;
  align-items: center;
  gap: 14px;
}
.clx-rev-card__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.clx-rev-card__stars {
  font-size: 14px;
  color: var(--rev-orange);
  letter-spacing: 1px;
  line-height: 1;
}
.clx-rev-card__name {
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--rev-dark);
  letter-spacing: -0.2px;
}
.clx-rev-card__role {
  font-size: 12px;
  line-height: 18px;
  color: var(--rev-muted);
  /* Reserve 2 lines of vertical space so single-line and wrapped roles
     produce the same .clx-rev-card__reviewer height — keeps the <hr>
     below at the same Y across every card in a row. */
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Match the about-us "Have Faith In Good Faith" testimonial @ glyph
   exactly: ember orange (#FF6A1C), Cabin, 18px, weight 400 — visually
   identical to the @ inside "CEO @ Clixlogix" on Pushker K. card.
   Bumped specificity (.clx-rev-card .clx-rev-card__role .clx-rev-at)
   to defeat the bare .clx-rev-card__role .clx-rev-at rule earlier in
   the stylesheet (specificity 0,2,0 → 0,3,0) without !important. */
.clx-rev-card .clx-rev-card__role .clx-rev-at {
  color: #FF6A1C;
  font-family: Cabin, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  margin: 0 4px;
  vertical-align: baseline;
}

.clx-rev-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
  /* Reserved-slot height: matches the height of one .clx-rev-card__cta
     line (13px font + line-height), so the <hr> separator above sits at
     the same Y-coordinate across every card whether or not the card
     has a "View Case Study" link. Without this, cards with a link push
     their <hr> ~76px higher than empty-foot cards. */
  min-height: 22px;
}
.clx-rev-card__cta {
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
  padding: 0 !important;
}

/* ---------- Load More + count ---------- */
.clx-rev-loadmore-wrap {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--rev-muted);
  position: relative;
}
.clx-rev-loadmore-wrap .clx-rev-count {
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.2px;
}
.clx-rev-loadmore-wrap .clx-rev-count strong {
  color: var(--rev-dark);
  font-weight: 700;
  font-size: 15px;
}
.clx-rev-loadmore {
  appearance: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--rev-orange);
  background: transparent;
  border: 1.5px solid var(--rev-orange);
  border-radius: 999px;
  padding: 12px 28px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.clx-rev-loadmore:hover {
  background: var(--rev-orange);
  color: #FFFFFF;
}
.clx-rev-loadmore[hidden] { display: none !important; }


/* Sentinel — invisible element near bottom of card grid for IntersectionObserver */
.clx-rev-sentinel {
  position: absolute;
  bottom: 0;
  height: 1px;
  width: 1px;
  pointer-events: none;
  opacity: 0;
}

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .clx-rev-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .clx-rev-h1 {
    font-size: 52px;
    line-height: 1.08;
    letter-spacing: -1.5px;
  }
  /* Wider 2-col cards wrap quotes to fewer lines — shrink the area */
  .clx-rev-card__quote {
    height: 200px;
  }

}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .clx-rev-hero {
    padding: 64px 0 40px;
    min-height: 0;
  }
  .clx-rev-h1 {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.9px;
  }
  .clx-rev-hero__stack { max-width: 100%; }
  .clx-rev-h1 br { display: none; }
  .clx-rev-sub { font-size: 16px; line-height: 26px; }

  .clx-rev-filterbar {
    padding: 28px 0 4px;
  }
  .clx-rev-filterbar .container {
    gap: 14px;
  }
  .clx-rev-pill {
    flex: 1 1 100%;
    max-width: 100%;
  }


  .clx-rev-grid {
    padding: 12px 0 64px;
  }
  .clx-rev-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .clx-rev-card {
    padding: 24px 22px 22px;
  }
  /* Narrower 1-col cards wrap quotes to more lines — give them more room
     and clamp at 9 so genuinely long quotes still trigger Read More */
  .clx-rev-card__quote {
    height: 320px;
  }

  .clx-rev-card__platform img {
    width: 48px;
    height: 48px;
  }
  .clx-rev-card__brand {
    max-height: 44px;
  }
}

/* "View More / View All Reviews" CTA below a [clx_service_testimonials]
   widget — link itself uses the canonical .clx-lc class (defined at
   the top of homepage.css), so we only need wrapper styles here for
   right-alignment + bottom section rhythm. Everything else (font,
   underline, arrow, hover) inherits from the site-wide CTA pattern. */
.clx-rev-svc-viewmore {
  text-align: right;
  margin: 32px 0 0;
  padding-bottom: 40px;
}

/* ---------- Defensive overrides — protect .clx-rev-card design when
     placed inside an Elementor shortcode widget OR our drag-and-drop
     CLX_Reviews_Widget on any page (about-us, services, etc.). The
     base .clx-rev-card rules above don't have !important, so an
     Elementor parent rule can occasionally win the cascade and break
     the avatar shape, grid layout, or card spacing. These rules force
     the design to render correctly regardless of wrapper context. ---------- */
.elementor-widget .clx-rev-cards,
.elementor-widget-shortcode .clx-rev-cards,
.elementor-widget-clx_reviews .clx-rev-cards {
  display: grid !important;
  gap: 28px !important;
  align-items: stretch !important;
}
@media (min-width: 1200px) {
  .elementor-widget .clx-rev-cards,
  .elementor-widget-shortcode .clx-rev-cards,
  .elementor-widget-clx_reviews .clx-rev-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .elementor-widget .clx-rev-cards,
  .elementor-widget-shortcode .clx-rev-cards,
  .elementor-widget-clx_reviews .clx-rev-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}
@media (max-width: 767px) {
  .elementor-widget .clx-rev-cards,
  .elementor-widget-shortcode .clx-rev-cards,
  .elementor-widget-clx_reviews .clx-rev-cards {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}
/* ---------- Filter chips (selected filter values) ---------- */
.clx-rev-active {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 40px !important;
  padding-bottom: 8px;
  align-items: center;
  justify-content: center;
}
.clx-rev-chips {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.clx-rev-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: #FFF4EC;
  border: 1px solid rgba(250, 73, 0, 0.25);
  color: var(--rev-dark);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.clx-rev-chip:hover {
  background: #FFE6D5;
  border-color: var(--rev-orange);
}
.clx-rev-chip__k {
  color: var(--rev-orange);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.clx-rev-chip__x {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(250, 73, 0, 0.15);
  color: var(--rev-orange);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
}

/* Pill in 'has-selection' state — orange tint to show it's active */
.clx-rev-pill.has-selection > summary {
  border-color: var(--rev-orange);
  background: #FFFAF5;
  color: var(--rev-orange);
}
.clx-rev-pill.has-selection > summary .clx-rev-pill__label {
  color: var(--rev-orange);
  font-weight: 600;
}

/* ---------- Selected row state inside the dropdown menu ---------- */
.clx-rev-pill__menu label:has(input:checked) {
  background: #FFF4EC;
  color: var(--rev-orange);
  font-weight: 600;
}
.clx-rev-pill__menu label:has(input:checked) span {
  color: var(--rev-orange);
}
.clx-rev-pill__menu label:has(input:checked) em {
  color: rgba(250, 73, 0, 0.7);
}


/* ---------- Breadcrumb (top of peach band) ----------
   Generic .clx-breadcrumb is the new site-wide class (matches the
   shortcode/widget output). The legacy .clx-rev-breadcrumb is kept
   as an alias because the [clx_reviews_grid] hero shortcode hard-coded
   that class — both render identically. Same DM Sans 13 / muted gray
   links / orange-bold leaf styling on every page that uses either.
   font-family !important is required because on inner pages the
   widget sits inside an .elementor-widget-container that applies
   Cabin via a higher-specificity rule and would otherwise win. */
.clx-breadcrumb,
nav.clx-breadcrumb,
.clx-rev-breadcrumb {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--rev-muted, #98A0A6);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: -8px;
}
.clx-breadcrumb a,
.clx-rev-breadcrumb a {
  color: var(--rev-muted, #98A0A6);
  text-decoration: none;
  transition: color 0.15s ease;
}
.clx-breadcrumb a:hover,
.clx-rev-breadcrumb a:hover {
  color: var(--rev-dark, #142533);
}
.clx-breadcrumb__sep,
.clx-rev-breadcrumb__sep {
  color: #C8CCD0;
  font-weight: 400;
}
.clx-breadcrumb__current,
.clx-rev-breadcrumb__current {
  color: var(--rev-orange, #FA4900);
  font-weight: 700;
}
/* When the breadcrumb is dropped via the Elementor widget (auto-wrapped
   in .clx-breadcrumb-section), constrain the container to the same
   1140px gutter the Reviews-page hero uses, and tighten the top
   spacing so the breadcrumb sits where the user expects it. */
.clx-breadcrumb-section .elementor-container {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.clx-breadcrumb-section .elementor-shortcode > .clx-breadcrumb,
.clx-breadcrumb-section .elementor-shortcode .clx-breadcrumb {
  padding: 24px 0 0;
  margin-top: 0;
}

/* Breadcrumb inside the blog detail hero (single.php) and the blog
   category landing (category.php). Both place the breadcrumb at the
   very top of their hero so we want margin-top:0 (not the -8px the
   global rule sets) and a generous gap below before the H1/eyebrow.
   `nav.clx-blog-detail-crumb` matches the base rule's specificity
   (0,1,1 — element+class) so the override actually wins. */
.clx-cat-hero .clx-breadcrumb,
nav.clx-blog-detail-crumb {
  margin: 0 0 28px;
}

/* Last crumb on the blog detail (the post's category) is a clickable
   link styled like the orange "current" crumb. Default
   `.clx-breadcrumb a` (0,1,1) would otherwise paint it muted grey;
   `.clx-breadcrumb a.clx-breadcrumb__current` (0,2,1) wins. */
.clx-breadcrumb a.clx-breadcrumb__current {
  color: var(--rev-orange, #FA4900);
  font-weight: 700;
}
.clx-breadcrumb a.clx-breadcrumb__current:hover {
  color: var(--rev-orange, #FA4900);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .clx-breadcrumb,
  .clx-rev-breadcrumb {
    font-size: 12px;
    gap: 6px;
  }
  .clx-rev-hero__stack {
    margin-top: 32px !important;
  }
}


/* ---------- Long-quote truncation + Read More button ---------- */
.clx-rev-card__quote {
  margin-bottom: 24px;
}
.clx-rev-card__blockquote {
  /* No line-clamp here. The single source of truth for truncation is
     .clx-rev-card__quote { height: 242px; overflow: hidden }. The JS
     measures wrapper.scrollHeight vs clientHeight to decide whether
     the text is clipped — measuring this blockquote would lie when
     line-clamp is engaged. */
  margin: 0;
}
.clx-rev-card.is-expanded .clx-rev-card__quote {
  /* When expanded, allow the WRAPPER to grow — this releases the clip
     on the inner blockquote because no inner truncation is in play. */
  height: auto;
}
.clx-rev-card__more {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 12px 0 16px;
  /* Right-align inside the .clx-rev-card flex column. */
  align-self: flex-end;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--rev-orange);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
/* When the JS overflow detector marks a card's button as not-needed,
   we override the UA-default `[hidden] { display:none }` so the button
   slot remains in the layout (visibility:hidden preserves space). This
   way cards with and without a Read More button keep their reviewer
   row at the same Y across the grid. */
.clx-rev-card__more[hidden] {
  display: none !important;
}
.clx-rev-card__more-t {
  display: inline-block;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 4px;
}
.clx-rev-card__more-a {
  display: inline-block;
  font-size: 1.1em;
  font-weight: 900;
  -webkit-text-stroke: 0.5px var(--rev-orange);
  transition: transform 0.2s ease;
  border: none;
  text-decoration: none;
}
.clx-rev-card__more:hover .clx-rev-card__more-a { transform: translateX(4px); }


/* Hide cards beyond initial page on first paint so there's no flash before JS runs.
   JS then sets style="display:flex" inline to override per-card visibility. */
.clx-rev-cards > .clx-rev-card:nth-child(n+10) { display: none; }
@media (max-width: 1199px) {
  .clx-rev-cards > .clx-rev-card:nth-child(n+7)  { display: none; }
}
@media (max-width: 767px) {
  .clx-rev-cards > .clx-rev-card:nth-child(n+4)  { display: none; }
}


/* ---------- Read More slot — always reserves vertical space ---------- */
.clx-rev-card__more-slot {
  min-height: 32px;
  margin: 12px 0 8px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;   /* right-align the Read More button */
}
.clx-rev-card__more {
  margin: 0;     /* slot owns the spacing */
}

/* ---------- Mobile platform-badge container shrink + scroll-to-top overlap fix ---------- */
@media (max-width: 767px) {
  .clx-rev-card__platform {
    gap: 2px;
  }
  .clx-rev-card__platform small {
    font-size: 9px;
    letter-spacing: 0.2px;
  }
  /* parent theme #scrollUp would otherwise sit on top of the platform badge */
  body.page-reviews-and-testimonials #scrollUp {
    bottom: 80px;
  }
}

/* =========================================================
   HERO — mobile decoratives (≤767px)
   The desktop hero has stripes + 4 floating cubes injected by
   homepage.js then hidden on tablet/mobile via display:none. On the
   smaller viewport bring back the gradient + 2 cubes so the section
   doesn't read as a plain white box, plus a CSS-only orange stripe
   motif bleeding off the left edge.
   ========================================================= */
/* The base .clx-hero-section rule sets overflow:visible + a flat white
   background with !important, so we have to win the cascade explicitly.
   isolation: isolate is safe to apply at all viewports — it just creates
   a stacking context for the mobile decoratives. overflow:hidden is
   ONLY applied at mobile, because desktop cubes (.clx-hc4 right:-97px)
   intentionally bleed past the section edge. */
body.home #hero-designed-component {
  position: relative;
  isolation: isolate;
}

@media (max-width: 767px) {
  body.home #hero-designed-component {
    overflow: hidden !important;
    background:
      radial-gradient(60% 50% at 92% 30%, rgba(255, 170, 120, 0.28), rgba(255, 255, 255, 0) 70%),
      radial-gradient(40% 35% at 6% 85%, rgba(255, 200, 150, 0.20), rgba(255, 255, 255, 0) 70%) !important;
  }
  /* Re-enable the two existing JS-injected cubes (cube-3 = .clx-hc1,
     cube-5 = .clx-hc5). Reposition for mobile and give them their own
     z-index above the stripe but below the text. */
  #hero-designed-component .clx-hc1,
  #hero-designed-component .clx-hc5 {
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none;
    height: auto !important;
  }
  #hero-designed-component .clx-hc1 {
    width: 64px !important;
    right: 8% !important;
    top: 18% !important;
    left: auto !important;
    bottom: auto !important;
    filter: drop-shadow(0 6px 14px rgba(255, 107, 26, 0.25));
  }
  #hero-designed-component .clx-hc5 {
    width: 42px !important;
    right: 14% !important;
    bottom: 24% !important;
    top: auto !important;
    left: auto !important;
    filter: drop-shadow(0 4px 10px rgba(255, 107, 26, 0.2));
  }
  /* Keep cube-2 + cube-4 hidden on mobile — too dense for the small viewport */
  #hero-designed-component .clx-hc2,
  #hero-designed-component .clx-hc4 {
    display: none !important;
  }
  /* Lift the hero text above the decoratives */
  #hero-designed-component .clx-hero-label,
  #hero-designed-component .clx-hero-title,
  #hero-designed-component .clx-tw-container {
    position: relative;
    z-index: 1;
  }
}