/* 1. Main Grid Setup */
.miles-container {
    gap: 30px !important;
    padding: 0px;
}

/* 2. Premium SaaS Glassmorphism Card (Targeting the inner containers) */
.miles-container > .e-child {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    z-index: 1;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* 3. The Brand Accent - Glowing Top Line */
.miles-container > .e-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #004b9e;
    box-shadow: 0 0 15px #004b9e;
    transition: all 0.4s ease;
    z-index: -1;
}

/* 4. 3D Hover Effects & Brand Glow */
.miles-container > .e-child:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 75, 158, 0.4);
    box-shadow: 
        0 20px 40px -10px rgba(0, 0, 0, 0.3),
        0 0 30px -5px rgba(0, 75, 158, 0.15); /* Subtle brand glow behind */
}

/* Pull the brand color down into the background on hover */
.miles-container > .e-child:hover::before {
    height: 100%;
    opacity: 0.04;
}

/* 5. Force the date text to use the primary #004b9e color */
.miles-container .text-blue-400 {
    color: #00A859 !important;
    text-shadow: 0 0 10px rgba(0, 75, 158, 0.2);
}

/* 6. Clean up the inline Tailwind so it doesn't double-box the layout */
.miles-container .bg-white\/5 {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* 7. Typography tweaks for the Heading */
.miles-container h2 {
    margin-top: 12px;
    margin-bottom: 16px;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
}





























/* ====================================================
   1. CARD CONTAINER - PREMIUM ELEVATED DESIGN
   ==================================================== */
/* -------------------------------------- */
/* Modern Card Design for .student-loop   */
/* -------------------------------------- */

/* ==========================================================================
   Proud Moments — Yearly Archive style (MODERN, HARD OVERRIDE)
   Every radius is 10px. Tabs scroll horizontally. Cards rebuilt to target
   the actual element IDs from your loop template so nothing looks off.
   Brand colors: --sl-blue #004b9e / --sl-green #00A859
   Paste into child theme style.css or Elementor > Custom CSS.
   ========================================================================== */

.student-loops-container {
  position: relative !important;
}

/* ---------- Search bar ---------- */
.sl-search-wrap {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 14px !important;
}

.sl-search {
  position: relative !important;
  width: 100% !important;
  max-width: 320px !important;
}

.sl-search input[type="text"] {
  width: 100% !important;
  padding: 11px 16px 11px 42px !important;
  border: 1.5px solid #e5e9f0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: #16233b !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sl-search input[type="text"]:focus {
  border-color: #004b9e !important;
  box-shadow: 0 0 0 4px rgba(0, 75, 158, 0.12) !important;
}

.sl-search svg {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  stroke: #5c6b82 !important;
  pointer-events: none !important;
}

.sl-search-clear {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: none !important;
  background: none !important;
  color: #5c6b82 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: none !important;
  padding: 4px !important;
}

.sl-search.has-value .sl-search-clear {
  display: block !important;
}

/* ==========================================================================
   Sticky, horizontally-scrolling tab bar
   Primary: #004b9e   Secondary (active): #00A859
   ========================================================================== */
.student-loops-container .elementor-widget-n-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background: #fff !important;
}

.student-loops-container .e-n-tabs {
  background: #f5f7fb !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s ease !important;
}

.student-loops-container .elementor-widget-n-tabs.is-stuck .e-n-tabs {
  box-shadow: 0 8px 20px -10px rgba(0, 42, 92, 0.28) !important;
}

.student-loops-container .e-n-tabs-heading {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  gap: 6px !important;
  padding: 0 !important;
  border: none !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.student-loops-container .e-n-tabs-heading::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* tab buttons */
.student-loops-container .e-n-tab-title,
.student-loops-container button.e-n-tab-title {
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
  border: none !important;
  background: transparent !important;
  color: #5c6b82 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

.student-loops-container .e-n-tab-title .e-n-tab-title-text,
.student-loops-container .e-n-tab-title span {
  color: inherit !important;
  font-weight: inherit !important;
}

.student-loops-container .e-n-tab-title:hover {
  background: #fff !important;
  color: #004b9e !important;
  box-shadow: 0 2px 8px -2px rgba(0, 42, 92, 0.15) !important;
}

.student-loops-container .e-n-tab-title[aria-selected="true"],
.student-loops-container .e-n-tab-title.e-active,
.student-loops-container button.e-n-tab-title[aria-selected="true"] {
  background: #00A859 !important;
  color: #fff !important;
  box-shadow: 0 8px 16px -6px rgba(0, 168, 89, 0.55) !important;
  transform: translateY(-1px) !important;
}

.student-loops-container .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
.student-loops-container .e-n-tab-title[aria-selected="true"] span {
  color: #fff !important;
}

.student-loops-container .e-n-tab-title[aria-selected="true"]:hover {
  background: #018f4b !important;
}

.student-loops-container .e-n-tab-title:after,
.student-loops-container .e-n-tab-title:before {
  display: none !important;
  content: none !important;
}

/* ---------- Category filter chips (optional secondary row) ---------- */
.sl-category-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 14px 0 22px !important;
}

.sl-chip {
  border: 1.5px solid #e5e9f0 !important;
  background: #fff !important;
  color: #5c6b82 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.sl-chip:hover {
  border-color: #004b9e !important;
  color: #004b9e !important;
}

.sl-chip.is-active {
  background: #004b9e !important;
  border-color: #004b9e !important;
  color: #fff !important;
}

/* ==========================================================================
   Card grid
   ========================================================================== */
.student-loops-container .elementor-loop-container.elementor-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  padding-top: 20px !important;
}

/* Card shell — position:relative added so the "type" badge can absolutely
   position itself against the whole card / image */
.student-loops-container .student-loop {
  position: relative !important;
  background: #fff !important;
  border: 1px solid #e5e9f0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  height: 100% !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

.student-loops-container .student-loop:hover {
  box-shadow: 0 16px 32px -12px rgba(0, 42, 92, 0.25) !important;
  border-color: rgba(0, 168, 89, 0.35) !important;
  transform: translateY(-4px) !important;
}

.student-loops-container .student-loop .e-con-inner {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* image — target the actual widget id so nothing else on the page is affected */
.student-loops-container .student-loop .elementor-element-203cfc2 {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.student-loops-container .student-loop .elementor-element-203cfc2::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 42, 92, 0) 60%, rgba(0, 42, 92, 0.14) 100%) !important;
  pointer-events: none !important;
}

.student-loops-container .student-loop .elementor-element-203cfc2 img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform 0.4s ease !important;
}

.student-loops-container .student-loop:hover .elementor-element-203cfc2 img {
  transform: scale(1.04) !important;
}

/* ---------- NEW: "Type" badge (ACF field, e.g. "Certificate Of Eligibility") ----------
   Floating pill, top-left corner of the image. Kept visually distinct from the
   date badge (which is solid navy, corner-flush, bottom-right) so the two
   pieces of metadata never get confused at a glance. */
.student-loops-container .student-loop .elementor-element-edfb6ef {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 6 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(0, 168, 89, 0.3) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  color: #00A859 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 6px 14px -6px rgba(0, 42, 92, 0.35) !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.student-loops-container .student-loop .elementor-element-edfb6ef::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #00A859 !important;
  flex: 0 0 auto !important;
}

.student-loops-container .student-loop:hover .elementor-element-edfb6ef {
  background: #00A859 !important;
  color: #fff !important;
  border-color: #00A859 !important;
}

.student-loops-container .student-loop:hover .elementor-element-edfb6ef::before {
  background: #fff !important;
}

/* name (fb032d8) */
.student-loops-container .student-loop .elementor-element-fb032d8 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #16233b !important;
  padding: 18px 18px 0 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* date badge (d61a998) — pulled out of flow, flush against the bottom-right corner of the image */
.student-loops-container .student-loop .elementor-element-d61a998 {
  position: absolute !important;
  top: 200px !important; /* = image height; badge is pulled up from this line by its own height below */
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-100%) !important; /* pins the badge's bottom edge exactly to the image's bottom edge */
  z-index: 5 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

.student-loops-container .student-loop .elementor-element-d61a998 ul,
.student-loops-container .student-loop .elementor-element-d61a998 li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.student-loops-container .student-loop .elementor-post-info__item--type-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: #004b9e !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  border-radius: 6px 0 0 0 !important;
  box-shadow: 0 4px 10px -3px rgba(0, 42, 92, 0.5) !important;
}

.student-loops-container .student-loop .elementor-post-info__item--type-date::before {
  content: "" !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #fff !important;
  flex: 0 0 auto !important;
}

/* feedback (a48ea04) */
.student-loops-container .student-loop .elementor-element-a48ea04 {
  position: relative !important;
  margin: 16px 0 0 !important;
  padding: 16px 18px 20px !important;
  border-top: 1px solid #eef1f6 !important;
  color: #5c6b82 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  font-style: italic !important;
}

/* Load more button */
.student-loops-container .elementor-loop-more {
  margin-top: 30px !important;
  text-align: center !important;
}

.student-loops-container .elementor-loop-more button,
.student-loops-container .elementor-loop-more .elementor-button {
  background: #004b9e !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 30px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px -8px rgba(0, 75, 158, 0.5) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.student-loops-container .elementor-loop-more button:hover,
.student-loops-container .elementor-loop-more .elementor-button:hover {
  background: #00A859 !important;
  box-shadow: 0 10px 22px -8px rgba(0, 168, 89, 0.55) !important;
}

/* Elementor's own "load more" spinner + anchor (loop-grid widget) */
.student-loops-container .e-load-more-spinner svg {
  fill: #00A859 !important;
}

/* Empty-state (JS-controlled) */
.sl-empty-state {
  display: none !important;
  text-align: center !important;
  padding: 60px 20px !important;
  color: #5c6b82 !important;
  font-size: 15px !important;
  grid-column: 1 / -1 !important;
}

.sl-empty-state.is-visible {
  display: block !important;
}

/* Cards hidden by search/filter */
.student-loops-container [data-elementor-type="loop-item"].sl-hidden {
  display: none !important;
}

/* ==========================================================================
   Pagination — numbered pages + prev/next
   Primary: #004b9e (current page)   Secondary: #00A859 (hover accent)
   ========================================================================== */
.student-loops-container .elementor-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 40px !important;
  flex-wrap: wrap !important;
}

.student-loops-container .elementor-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 2px solid #e5e9f0 !important;
  background: #fff !important;
  color: #16233b !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
}

/* clickable numbers — same hover recipe as the prev/next arrow buttons:
   border flips to secondary green + light tint fill + small lift, no solid color swap */
.student-loops-container .elementor-pagination a.page-numbers:hover {
  border-color: #00A859 !important;
  color: #00A859 !important;
  background: rgba(0, 168, 89, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* current page */
.student-loops-container .elementor-pagination .page-numbers.current {
  background: #004b9e !important;
  border-color: #004b9e !important;
  color: #fff !important;
  box-shadow: 0 8px 16px -6px rgba(0, 75, 158, 0.5) !important;
}

/* prev / next — circular icon buttons, border-only design so the hover border reads clearly */
.student-loops-container .elementor-pagination .page-numbers.prev,
.student-loops-container .elementor-pagination .page-numbers.next {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  font-size: 0 !important;
  border-radius: 50% !important;
  border-width: 2px !important;
  border-color: #e5e9f0 !important;
  background: #fff !important;
}

.student-loops-container .elementor-pagination .page-numbers.prev::before,
.student-loops-container .elementor-pagination .page-numbers.next::before {
  font-size: 16px !important;
  font-weight: 900 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  color: #004b9e !important;
  transition: color 0.2s ease !important;
}

.student-loops-container .elementor-pagination .page-numbers.prev::before {
  content: "\2190" !important;
}

.student-loops-container .elementor-pagination .page-numbers.next::before {
  content: "\2192" !important;
}

/* active (clickable, rendered as <a>) prev/next — border color change is the primary hover cue,
   background stays light so the 2px border is always visible against the page */
.student-loops-container .elementor-pagination a.page-numbers.prev,
.student-loops-container .elementor-pagination a.page-numbers.next {
  border-color: #e5e9f0 !important;
}

.student-loops-container .elementor-pagination a.page-numbers.prev:hover,
.student-loops-container .elementor-pagination a.page-numbers.next:hover {
  border-color: #00A859 !important;
  background: rgba(0, 168, 89, 0.1) !important;
  transform: translateY(-2px) !important;
}

.student-loops-container .elementor-pagination a.page-numbers.prev:hover::before,
.student-loops-container .elementor-pagination a.page-numbers.next:hover::before {
  color: #00A859 !important;
}

/* disabled state (rendered as <span>, no href — first/last page) */
.student-loops-container .elementor-pagination span.page-numbers.prev,
.student-loops-container .elementor-pagination span.page-numbers.next {
  border-color: #eef1f6 !important;
  background: #f8fafc !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.student-loops-container .elementor-pagination span.page-numbers.prev::before,
.student-loops-container .elementor-pagination span.page-numbers.next::before {
  color: #c3cad6 !important;
}

.student-loops-container .elementor-pagination .elementor-screen-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .student-loops-container .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  .sl-search-wrap {
    justify-content: stretch !important;
  }

  .sl-search {
    max-width: none !important;
  }
}

@media (max-width: 767px) {
  .student-loops-container .elementor-loop-container.elementor-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .student-loops-container .e-n-tab-title {
    font-size: 13px !important;
    padding: 9px 15px !important;
  }

  .student-loops-container .student-loop .elementor-element-203cfc2 img {
    height: 180px !important;
  }

  .student-loops-container .student-loop .elementor-element-edfb6ef {
    top: 10px !important;
    left: 10px !important;
    padding: 5px 10px !important;
    font-size: 9px !important;
    max-width: calc(100% - 20px) !important;
  }

  .student-loops-container .student-loop .elementor-element-d61a998 {
    top: 180px !important; /* = mobile image height, same translateY(-100%) trick */
    right: 0 !important;
  }

  .student-loops-container .elementor-widget-n-tabs {
    top: 0 !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 0 16px !important;
    width: calc(100% + 32px) !important;
  }

  .student-loops-container .elementor-pagination {
    gap: 6px !important;
    margin-top: 30px !important;
  }

  .student-loops-container .elementor-pagination .page-numbers {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  .student-loops-container .elementor-pagination .page-numbers.prev,
  .student-loops-container .elementor-pagination .page-numbers.next {
    width: 36px !important;
    min-width: 36px !important;
  }
}
/* ====================================================
   PAGE HEADER (Demo only - not part of card)
   ==================================================== */
.page-header {
    text-align: center;
    margin-bottom: 48px;
    grid-column: 1 / -1;
}

.page-header h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

.page-header p {
    font-size: 16px;
    color: #64748b;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}



/* ==========================================================
   Elementor Layout Alignment Fixes
   ========================================================== */
.success-container {

        padding-top: 30px;
}

.success-container .e-child,
.success-container .e-con-full,
.success-container .e-con-inner {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    
}

/* ==========================================================
   Modern Blue Cards (Grid managed entirely by Elementor)
   ========================================================== */
.success-container > .e-child {
    background: linear-gradient(145deg, #004b9e, #003a7a) !important;
    border-radius: 20px !important;
    padding: 40px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    /* Forces inner child containers to stretch full width so alignment works */
    width: 100% !important;
    box-sizing: border-box !important;

    /* Subtle border for high-end SaaS feel */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 75, 158, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 3D Hover Lift Animation */
.success-container > .e-child:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 75, 158, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================
   Counter Typography & Layout Alignment
   ========================================================== */
.success-container .elementor-widget-counter {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 12px !important;

}

.success-container .elementor-counter,
.success-container .elementor-counter-number-wrapper {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    width: 100% !important;
}

.success-container .elementor-counter-number {
    font-size: 3.25rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Counter Suffix (+ and %) */
.success-container .elementor-counter-number-suffix {
    font-size: 1.75rem !important; 
    margin-left: 4px;
    color: #a5f3fc !important;
}

/* ==========================================================
   Card Text (Titles & Descriptions) Alignment Fixes
   ========================================================== */
.success-container .elementor-widget-heading {
    width: 100% !important;
    text-align: center !important;
}

.success-container .elementor-widget-heading .elementor-heading-title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: 0.02em;
    text-align: center !important;
    width: 100% !important;
}

.success-container .elementor-widget-text-editor {
    width: 100% !important;
    text-align: center !important;
}

.success-container .elementor-widget-text-editor p,
.success-container .elementor-widget-text-editor div {
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 auto !important;
    line-height: 1.5;
    text-align: center !important;
    max-width: 260px;
}

/* ==========================================================
   Mobile Responsiveness
   ========================================================== */
@media (max-width: 767px) {
    .success-container > .e-child {
        padding: 32px 16px !important;
        border-radius: 16px !important;
    }

    .success-container .elementor-counter-number {
        font-size: 2.75rem !important;
    }
}