.elementor-6836 .elementor-element.elementor-element-540df93e:not(.elementor-motion-effects-element-type-background), .elementor-6836 .elementor-element.elementor-element-540df93e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6836 .elementor-element.elementor-element-540df93e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:-45px;padding:0px 0px 49px 0px;}.elementor-6836 .elementor-element.elementor-element-540df93e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-6836 .elementor-element.elementor-element-51b02e68{text-align:center;}.elementor-6836 .elementor-element.elementor-element-6c315e84{text-align:center;}.elementor-6836 .elementor-element.elementor-element-23c8ad9d > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:flex-start;align-items:flex-start;}.elementor-6836 .elementor-element.elementor-element-23c8ad9d > .elementor-container{max-width:1300px;}.elementor-6836 .elementor-element.elementor-element-23c8ad9d{padding:20px 0px 0px 0px;}.elementor-6836 .elementor-element.elementor-element-41982873 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-6836 .elementor-element.elementor-element-229beb6c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6836 .elementor-element.elementor-element-41b2ea3b > .elementor-element-populated{padding:0px 0px 0px 80px;}.elementor-6836 .elementor-element.elementor-element-97f6d8e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:25px;}.elementor-6836 .elementor-element.elementor-element-1b3f8848{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6836 .elementor-element.elementor-element-301628f5.elementor-element{--align-self:stretch;}.elementor-6836 .elementor-element.elementor-element-301628f5{text-align:center;}.elementor-6836 .elementor-element.elementor-element-301628f5 .elementor-heading-title{font-size:1px;-webkit-text-stroke-color:#000;stroke:#000;}.elementor-6836 .elementor-element.elementor-element-3c118b86.elementor-element{--align-self:stretch;}.elementor-6836 .elementor-element.elementor-element-3c118b86{text-align:center;}.elementor-6836 .elementor-element.elementor-element-3c118b86 .elementor-heading-title{font-size:1px;-webkit-text-stroke-color:#000;stroke:#000;}.elementor-6836 .elementor-element.elementor-element-7af0e710.elementor-element{--align-self:stretch;}.elementor-6836 .elementor-element.elementor-element-7af0e710{text-align:center;}.elementor-6836 .elementor-element.elementor-element-7af0e710 .elementor-heading-title{font-size:1px;-webkit-text-stroke-color:#000;stroke:#000;}@media(min-width:768px){.elementor-6836 .elementor-element.elementor-element-41982873{width:45%;}.elementor-6836 .elementor-element.elementor-element-41b2ea3b{width:55%;}}/* Start custom CSS for section, class: .elementor-element-540df93e *//* ================================================
   SUCCESS STORY HERO — FINAL PREMIUM VERSION
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ── SECTION — fades from white (header) to light blue, back to white (next section) ── */
.ss-hero-section {
  background: linear-gradient(
    180deg,
  #ffffff 0%,
#f7f9ff 25%,
#f2f7ff 60%,
#fafcff 85%,
#ffffff 100%
  ) !important;
  position: relative;
  overflow: hidden;
  padding-top: 30px !important;
  padding-bottom: 50px !important;
}

/* ── BLOBS — repositioned to sit naturally beside/below the title ── */
/* Right blob — large, soft, sits right of title */
.ss-hero-section::before {
  content: '';
  position: absolute;
  top: 60px;
  right: -80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(54,100,227,0.13) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: ss-float 8s ease-in-out infinite;
}

/* Bottom-left blob — anchors transition into white section below */
.ss-hero-section::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 8%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(54,100,227,0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: ss-float 10s ease-in-out infinite reverse;
}

@keyframes ss-float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-20px) scale(1.08); }
}

/* Small decorative dot grid top-left */
.ss-hero-section .elementor-container::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 40px;
  width: 160px;
  height: 160px;
  background-image: radial-gradient(circle, rgba(54,100,227,0.18) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.ss-hero-section .elementor-column,
.ss-hero-section .elementor-widget {
  position: relative;
  z-index: 1;
}

/* ── BADGE ── */
.ss-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #ffffff !important;
  color: #3664e3 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 8px 20px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(54,100,227,0.2) !important;
  box-shadow: 0 4px 16px rgba(54,100,227,0.1) !important;
  margin-bottom: 2px !important;
  animation: ss-fadein 0.5s ease both !important;
}

.ss-badge::before {
  content: '●';
  font-size: 7px;
  color: #3664e3;
  animation: ss-blink 2s ease infinite;
}

@keyframes ss-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── MAIN TITLE ── */
.ss-title .elementor-heading-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(28px, 3.6vw, 46px) !important;
  font-weight: 550 !important;
  color: #0a1628 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  max-width: 1360px;
  margin: 0 auto 30px;
  animation: ss-fadein 0.6s ease 0.1s both;
}

.ss-highlight {
  background: linear-gradient(135deg, #3664e3 0%, #6491f5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── IMAGE ── */
.ss-image {
  position: relative;
  animation: ss-fadein 0.7s ease 0.15s both;
}

/* Glowing animated border ring */
.ss-image::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 26px;
  background: linear-gradient(135deg, #3664e3, #a8c4ff, #3664e3);
  background-size: 200% 200%;
  z-index: 0;
  animation: ss-ring 4s linear infinite;
  opacity: 0.55;
}

@keyframes ss-ring {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ss-image img {
  border-radius: 22px !important;
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  box-shadow: 0 20px 60px rgba(54,100,227,0.15), 0 4px 16px rgba(10,22,40,0.08) !important;
}

/* Verified badge floating over image */
.ss-image::after {
  content: '✦  Verified Case Study';
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  color: #3664e3;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 9px 22px;
  border-radius: 50px;
  white-space: nowrap;
  z-index: 2;
  border: 1px solid rgba(54,100,227,0.18);
  box-shadow: 0 6px 24px rgba(54,100,227,0.14);
}

/* ── ABOUT TITLE ── */
.ss-about-title .elementor-heading-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #0a1628 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: px !important;
}

/* ── ABOUT TEXT ── */
.ss-about-text p {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  color: #4a5568 !important;
  line-height: 1.85 !important;
  margin: 0 !important;
}

/* ── DIVIDER ── */
.ss-hero-section .elementor-widget-divider .elementor-divider-separator {
  border-color: #e2eaf6 !important;
}

/* ── META GRID ── */
.ss-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin: px  px;
}

.ss-meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.7);
  border-radius: 10px;
  border: 1px solid rgba(54,100,227,0.08);
  transition: all 0.2s ease;
}

.ss-meta-item:hover {
  background: #ffffff;
  border-color: rgba(54,100,227,0.18);
  box-shadow: 0 4px 16px rgba(54,100,227,0.08);
  transform: translateY(-1px);
}

.ss-meta-label {
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.ss-meta-value {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0a1628;
}

.ss-meta-link {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #3664e3;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s ease, color 0.2s ease;
}

.ss-meta-link::after {
  content: '↗';
  font-size: 12px;
}

.ss-meta-link:hover {
  color: #1a44c2;
  gap: 8px;
}

/* ── RESULTS BAR ── */
.ss-results-bar {
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #dce8ff;
  margin-top: 10px;
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(54,100,227,0.08);
}

.ss-result-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  gap: 6px;
  border-right: 1px solid #dce8ff;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.ss-result-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3664e3, #6491f5);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.ss-result-item:hover::before {
  transform: scaleX(1);
}

.ss-result-item:last-child {
  border-right: none;
}

.ss-result-item:hover {
  background: #f6f9ff;
}

.ss-result-number {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #3664e3;
  line-height: 1;
  letter-spacing: -0.02em;
}

.ss-result-label {
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

/* ── ANIMATIONS ── */
@keyframes ss-fadein {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  .ss-hero-section::before,
  .ss-hero-section::after,
  .ss-hero-section .elementor-container::before {
    display: none;
  }

  .ss-hero-section {
    padding-top: 40px !important;
    padding-bottom: 50px !important;
  }

  .ss-title .elementor-heading-title {
    font-size: 24px !important;
    margin-bottom: 28px !important;
    letter-spacing: -0.01em !important;
  }

  .ss-image img {
    height: 260px !important;
    margin-bottom: 24px !important;
  }

  .ss-image::after {
    font-size: 10px;
    padding: 7px 16px;
    bottom: 14px;
  }

  .ss-meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ss-meta-item {
    padding: 10px 12px;
  }

  .ss-result-number { font-size: 20px; }
  .ss-result-item { padding: 14px 8px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1b3f8848 *//* ================================================
   CASE STUDY CONTENT BODY — PREMIUM CSS
   Apply to the content Container → Advanced → Custom CSS
   ================================================ */

/* ── CONTAINER WRAPPER ── */
.ss-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 40px 80px;
}

/* ── ALL HEADINGS ── */
.ss-content h1,
.ss-content h2,
.ss-content h3,
.ss-content h4,
.ss-content .elementor-heading-title {
  font-family: 'Poppins', sans-serif !important;
  color: #0a1628 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin-top: 56px !important;
  margin-bottom: 18px !important;
}

/* H2 — section titles */
.ss-content h2,
.ss-content .elementor-heading-title[class*="h2"],
.ss-content .elementor-widget-heading h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  padding-left: 18px !important;
  border-left: 4px solid #3664e3 !important;
  margin-top: 60px !important;
}

/* H3 — sub sections */
.ss-content h3,
.ss-content .elementor-widget-heading h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0a1628 !important;
}

/* H4 — small labels */
.ss-content h4,
.ss-content .elementor-widget-heading h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #3664e3 !important;
  margin-bottom: 10px !important;
  margin-top: 40px !important;
}

/* First heading — no top margin */
.ss-content .elementor-widget:first-child .elementor-heading-title {
  margin-top: 0 !important;
}

/* ── PARAGRAPHS ── */
.ss-content p,
.ss-content .elementor-widget-text-editor p {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  color: #4a5568 !important;
  line-height: 1.9 !important;
  margin-bottom: 10px !important;
  margin-top: 0 !important;
}

/* ── BULLET LISTS ── */
.ss-content ul,
.ss-content .elementor-widget-text-editor ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.ss-content ul li,
.ss-content .elementor-widget-text-editor ul li {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  color: #4a5568 !important;
  line-height: 1.7 !important;
  padding: 14px 18px 14px 50px !important;
  background: #f8faff !important;
  border-radius: 10px !important;
  border: 1px solid #e8f0fe !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.ss-content ul li:hover {
  background: #eef4ff !important;
  border-color: rgba(54,100,227,0.2) !important;
  transform: translateX(4px) !important;
}

.ss-content ul li::before {
  content: '→' !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #3664e3 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Bold text inside list items */
.ss-content ul li strong,
.ss-content ul li b {
  color: #0a1628 !important;
  font-weight: 700 !important;
}

/* ── BOLD TEXT ── */
.ss-content strong,
.ss-content b {
  color: #0a1628 !important;
  font-weight: 700 !important;
}

/* ── WIDGET SPACING — gap between each Elementor widget ── */
.ss-content .elementor-widget {
  margin-bottom: 0 !important;
}

.ss-content .elementor-widget + .elementor-widget {
  margin-top: 8px !important;
}

/* ── HIGHLIGHT CALLOUT BOX ── 
   Add class "ss-callout" to any Text Editor widget for a standout quote/highlight box ── */
.ss-callout .elementor-widget-container,
.ss-callout p {
  background: linear-gradient(135deg, #eef4ff, #e8f0fe) !important;
  border-left: 4px solid #3664e3 !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 20px 24px !important;
  font-size: 15px !important;
  font-style: italic !important;
  color: #2d3f6b !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
  margin: 8px 0 !important;
}

/* ── RESULT STAT BOXES ──
   Add class "ss-stat-row" to any HTML widget for inline stats ── */
.ss-stat-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0;
}

.ss-stat-box {
  flex: 1;
  min-width: 140px;
  background: #ffffff;
  border: 1px solid #dce8ff;
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(54,100,227,0.07);
  transition: all 0.25s ease;
}

.ss-stat-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(54,100,227,0.12);
  border-color: rgba(54,100,227,0.25);
}

.ss-stat-box .ss-stat-num {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #3664e3;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}

.ss-stat-box .ss-stat-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── SECTION DIVIDER ──
   Add class "ss-section-break" to a Divider widget ── */
.ss-section-break .elementor-divider-separator {
  border-color: #e2eaf6 !important;
  margin: 40px 0 !important;
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  .ss-content {
    padding: 40px 20px 60px !important;
  }

  .ss-content h2,
  .ss-content .elementor-widget-heading h2 {
    font-size: 22px !important;
    padding-left: 14px !important;
    border-left-width: 3px !important;
  }

  .ss-content h3,
  .ss-content .elementor-widget-heading h3 {
    font-size: 18px !important;
  }

  .ss-content p,
  .ss-content ul li {
    font-size: 14px !important;
  }

  .ss-stat-row {
    flex-direction: column;
  }

  .ss-stat-box {
    min-width: unset;
  }
}


/* ── REDUCE HEADING GAPS ── */
.ss-content .elementor-widget-heading {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ss-content .elementor-heading-title {
  margin-top: 28px !important;
  margin-bottom: 10px !important;
}

.ss-content .elementor-widget:first-child .elementor-heading-title {
  margin-top: 0 !important;
}

/* ── REDUCE WIDGET GAPS OVERALL ── */
.ss-content .elementor-widget {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.ss-content .elementor-widget-text-editor {
  margin-top: 0 !important;
}

/* ── H2 specific tighter spacing ── */
.ss-content .elementor-widget-heading h2 {
  margin-top: 3px !important;
  margin-bottom: 12px !important;
}

/* ── H3 tighter ── */
.ss-content .elementor-widget-heading h3 {
  margin-top: 2px !important;
  margin-bottom: 8px !important;
}/* End custom CSS */