.elementor-38624 .elementor-element.elementor-element-9c08ed0{--display:flex;--z-index:10;}.elementor-38624 .elementor-element.elementor-element-a9f8ae4 .elementor-heading-title{font-family:"Red Hat Display", Sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.22px;}.elementor-38624 .elementor-element.elementor-element-c08029d .elementor-heading-title{font-family:"Red Hat Display", Sans-serif;font-weight:400;line-height:52px;letter-spacing:-0.028em;color:var( --e-global-color-astglobalcolor2 );}.elementor-38624 .elementor-element.elementor-element-8536788 .elementor-button{background-color:var( --e-global-color-primary );border-radius:10px 10px 10px 10px;}.elementor-38624 .elementor-element.elementor-element-8536788 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-38624 .elementor-element.elementor-element-8536788.elementor-element{--align-self:flex-start;}.elementor-38624 .elementor-element.elementor-element-4c800c7{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-38624 .elementor-element.elementor-element-bbf27f6 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-38624 .elementor-element.elementor-element-41caf9c .elementor-heading-title{font-family:"Red Hat Display", Sans-serif;color:var( --e-global-color-secondary );}.elementor-38624 .elementor-element.elementor-element-d3c2795 .elementor-heading-title{font-family:"Red Hat Display", Sans-serif;color:var( --e-global-color-secondary );}.elementor-38624 .elementor-element.elementor-element-4027f9c .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:42px;font-weight:600;}.elementor-38624 .elementor-element.elementor-element-141f459 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:42px;font-weight:600;}.elementor-38624 .elementor-element.elementor-element-7675416 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:42px;font-weight:600;}.elementor-38624 .elementor-element.elementor-element-6fdef32 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:42px;font-weight:600;}.elementor-38624 .elementor-element.elementor-element-907a238{text-align:center;}.elementor-38624 .elementor-element.elementor-element-907a238 .elementor-heading-title{color:var( --e-global-color-astglobalcolor4 );}.elementor-38624 .elementor-element.elementor-element-5d2a1d4 > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-38624 .elementor-element.elementor-element-5d2a1d4{text-align:center;}.elementor-38624 .elementor-element.elementor-element-5d2a1d4 .elementor-heading-title{font-size:14px;color:#6FD0FF;}/* Start custom CSS *//* ============================================================
   Crelate — Customer Stories
   Paste into Elementor → Site Settings → Custom CSS
   (or the page's Advanced → Custom CSS).
   Also add this font import in the same panel or via a <link>:
   @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
   All body.elementor-page-38624s are cr- namespaced so they won't collide with your theme.
   ============================================================ */

/* ============================================================
   Crelate — Customer Stories (redesign)
   All styles namespaced with cr-
   ============================================================ */
:root {
  --cr-blue: #008EEC;
  --cr-blue-hover: #006FB7;
  --cr-royal: #5B37A9;
  --cr-black: #1E1E29;
  --cr-ink-70: #3a3a48;
  --cr-ink-50: #76818E;
  --cr-ink-30: #b6bcc4;
  --cr-ink-15: #dde0e4;
  --cr-ink-08: #eef0f2;
  --cr-ink-04: #f6f7f8;
  --cr-white: #fff;
  --cr-paper-cool: #F4F8FE;
  --cr-amber: #FFB732;
  --cr-font-display: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cr-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cr-r-md: 12px;
  --cr-r-lg: 20px;
  --cr-r-xl: 32px;
  --cr-r-pill: 999px;
  --cr-shadow-1: 0 1px 2px rgba(30,30,41,.06), 0 1px 1px rgba(30,30,41,.04);
  --cr-shadow-2: 0 4px 14px rgba(30,30,41,.08), 0 2px 4px rgba(30,30,41,.04);
  --cr-shadow-3: 0 18px 48px -12px rgba(30,30,41,.18), 0 8px 16px -8px rgba(30,30,41,.08);
  --cr-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
.cr-root {
  box-sizing: border-box;
  font-family: var(--cr-font-body);
  color: var(--cr-ink-70);
  background: var(--cr-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cr-root *, .cr-root *::before, .cr-root *::after { box-sizing: border-box; }
.cr-root h1, .cr-root h2, .cr-root h3, .cr-root h4 {
  font-family: var(--cr-font-display);
  color: var(--cr-black);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cr-root p { margin: 0; text-wrap: pretty; }
.cr-root a { color: var(--cr-blue); text-decoration: none; }
.cr-root a:hover { color: var(--cr-blue-hover); }

.cr-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

.cr-eyebrow {
  font-family: var(--cr-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cr-blue);
  margin: 0;
}

/* ---------- HERO ---------- */
.cr-hero {
  position: relative;
  overflow: hidden;
  background: var(--cr-paper-cool);
  border-bottom: 1px solid var(--cr-ink-08);
  padding: 104px 0 88px;
}
.cr-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(680px 420px at 88% -8%, rgba(0,142,236,.16), transparent 60%),
    radial-gradient(560px 420px at 6% 116%, rgba(91,55,169,.12), transparent 62%);
  pointer-events: none;
}
.cr-hero .cr-wrap { position: relative; }
.cr-hero-eyebrow { margin-bottom: 20px; }
.cr-hero h1 {
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.cr-hero-sub {
  margin-top: 24px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: var(--cr-ink-50);
  max-width: 46ch;
}

/* ---------- VIDEO FEATURE ---------- */
.cr-feature-video {
  padding: 80px 0;
}
.cr-vf-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
.cr-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--cr-r-lg);
  overflow: hidden;
  box-shadow: var(--cr-shadow-3);
  background: var(--cr-black);
  border: 1px solid var(--cr-ink-08);
}
.cr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cr-quote-mark {
  font-family: var(--cr-font-display);
  font-size: 88px;
  line-height: 0.7;
  color: var(--cr-blue);
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
  opacity: .9;
}
.cr-vf-quote {
  font-family: var(--cr-font-display);
  font-weight: 400;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.4;
  font-size: 24px;
  color: var(--cr-black);
  letter-spacing: -0.01em;
}
.cr-vf-quote p {
    margin-bottom: 0px;
}
.cr-attrib { margin-top: 28px; }
.cr-attrib-name {
  font-family: var(--cr-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--cr-black);
}
.cr-attrib-role { font-size: 15px; color: var(--cr-ink-50); margin-top: 2px; }

/* ---------- FEATURED CARD (with photo) ---------- */
.cr-featured {
  padding: 28px 0;
}
.cr-fcard {
  background: var(--cr-white);
  border: 1px solid var(--cr-ink-08);
  border-radius: var(--cr-r-xl);
  overflow: hidden;
  box-shadow: var(--cr-shadow-2);
}
.cr-fcard-body {
  padding: 52px 56px;
  display: flex;
  flex-direction: column;
}
.cr-fportrait {
  width: 64px;
  height: 64px; !important;
  border-radius: var(--cr-r-pill) !important;
  object-fit: cover;
  object-position: center top;
  flex: 0 0 auto;
  border: 2px solid var(--cr-white) !important;
  box-shadow: var(--cr-shadow-1) !important;
}
.cr-fcard .cr-attrib {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cr-fcard-body h3 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
  max-width: 20ch;
}
.cr-fcard-text {
  font-size: 17px;
  line-height: 1.62;
  color: var(--cr-ink-70);
}

/* ---------- QUOTE GRID ---------- */
.cr-grid-section { padding: 48px 0 24px; }
.cr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cr-card {
  background: var(--cr-white);
  border: 1px solid var(--cr-ink-08);
  border-radius: var(--cr-r-lg);
  padding: 36px 36px 32px;
  box-shadow: var(--cr-shadow-1);
  transition: transform var(--cr-dur, .2s) var(--cr-ease-out),
              box-shadow .2s var(--cr-ease-out),
              border-color .2s var(--cr-ease-out);
  display: flex;
  flex-direction: column;
}
.cr-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cr-shadow-2);
  border-color: var(--cr-ink-15);
}
.cr-card-mark {
  font-family: var(--cr-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 0.6;
  color: var(--cr-blue);
  margin-bottom: 18px;
}
.cr-card-text {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--cr-ink-70);
  flex: 1;
}
.cr-card-attrib {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--cr-ink-08);
  display: flex;
  align-items: center;
  gap: 14px;
}
.cr-avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--cr-r-pill);
  background: linear-gradient(135deg, var(--cr-blue), var(--cr-royal));
  color: #fff;
  font-family: var(--cr-font-display);
  font-weight: 700;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0;
}

/* ---------- SECTION HEADING ---------- */
.cr-shead { text-align: center; margin: 24px auto 8px; max-width: 640px; }
.cr-shead h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.cr-shead .cr-eyebrow { color: var(--cr-ink-50); margin-bottom: 14px; }

/* ---------- INDUSTRY CHIPS ---------- */
.cr-industries {
  margin: 88px 0 96px;
  background: var(--cr-black);
  border-radius: var(--cr-r-xl);
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
}
.cr-industries::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 380px at 92% 120%, rgba(0,142,236,.28), transparent 60%),
    radial-gradient(520px 360px at 4% -20%, rgba(91,55,169,.30), transparent 62%);
  pointer-events: none;
}
.cr-industries-inner { position: relative; text-align: center; }
.cr-industries .cr-eyebrow { color: #6fd0ff; }
.cr-industries h2 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; margin-top: 14px; }
.cr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}
.cr-chip {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: var(--cr-r-pill);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: ##6fd0ff !important;
  font-family: var(--cr-font-display);
  font-weight: 600;
  font-size: 15px;
  transition: background .2s var(--cr-ease-out), border-color .2s var(--cr-ease-out), transform .12s var(--cr-ease-out), color .2s var(--cr-ease-out);
}
.cr-chip:hover {
  background: var(--cr-blue);
  border-color: var(--cr-blue);
  color: #fff !important;
  transform: translateY(-1px);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .cr-wrap { padding: 0 20px; }
  .cr-hero { padding: 72px 0 60px; }
  .cr-vf-grid { grid-template-columns: 1fr; gap: 36px; }
  .cr-fcard-body { padding: 40px 32px; }
  .cr-grid { grid-template-columns: 1fr; }
  .cr-industries { padding: 48px 28px; margin: 64px 0 72px; }
}/* End custom CSS */