/*
 * ARABIDS v1.2.121
 * Fix the desktop phone missing from the app showcase: the prior grid
 * mistakenly placed the slider-pagination element into the PHONE's column.
 * Restore two-item flex (caption + phone), no empty grid row.
 * Center brand-gold one-line chapter headings, remove every step icon.
 */

:root {
  --arabids-title-gold: #A4865D;
  --arabids-text-sand: #E4D5BF;
  --arabids-text-ivory: #EFE6D8;
  --arabids-wine: #420B07;
  --arabids-forest: #143328;
}

/* A real heading row across the complete photograph, not a side-floating
   caption. On computers headings remain one line and centered in both
   reading directions. No underline or artificial white backdrop. */
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) .arabids-editorial-intro {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 auto clamp(28px,3.5vw,52px) !important;
  padding: clamp(12px,2vw,25px) 0 !important;
  direction: inherit !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) .arabids-editorial-heading {
  display: flex !important;
  flex-flow: column nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  text-align: center !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) .arabids-editorial-heading > h2.title {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--arabids-title-gold) !important;
  -webkit-text-fill-color: var(--arabids-title-gold) !important;
  font-size: clamp(22px,2.65vw,41px) !important;
  font-weight: 850 !important;
  line-height: 1.46 !important;
  text-align: center !important;
  direction: inherit !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow: visible !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.47) !important;
  transform: none !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-heading::before,
html body:is(.home,[data-page="home"]) .arabids-editorial-heading::after {
  content: none !important;
  display: none !important;
}
/* All three-step illustrations and injected number badges are removed,
   including when Elementor serves HTML from an older saved version. */
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item .image,
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item .title > span {
  display: none !important;
}
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item .title::before,
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item .title::after {
  content: none !important;
  display: none !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) :is(.flex,.flex-wrap) > .item {
  padding: clamp(8px,1.5vw,19px) clamp(8px,2vw,25px) !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item .title,
html body:is(.home,[data-page="home"]) :is(
  .what_is_section,.who_its_for_section,.faq_section
) .flex-wrap > .item .title {
  color: var(--arabids-title-gold) !important;
  -webkit-text-fill-color: var(--arabids-title-gold) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  margin: 0 0 9px !important;
}
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item .subtitle,
html body:is(.home,[data-page="home"]) :is(
  .what_is_section,.who_its_for_section,.faq_section
) .flex-wrap > .item .subtitle {
  color: var(--arabids-text-sand) !important;
  -webkit-text-fill-color: var(--arabids-text-sand) !important;
  font-size: clamp(14px,1.25vw,17px) !important;
  line-height: 1.85 !important;
  font-weight: 550 !important;
  margin: 0 !important;
}

/* Inside the app: remove the displaced title, tiny line, and any halo. The
   phone and descriptive swiper are ordinary siblings in a TWO-ITEM flex row.
   Slider transforms, original images and four-step scrolling are preserved. */
html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex {
  width: min(1140px,calc(100% - 48px)) !important;
  max-width: 1140px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}
html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex > h2.title {
  position: relative !important;
  display: block !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto clamp(10px,1.5vw,18px) !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  color: var(--arabids-wine) !important;
  -webkit-text-fill-color: var(--arabids-wine) !important;
  font-size: clamp(28px,2.8vw,40px) !important;
  line-height: 1.4 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow: visible !important;
}
html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex > h2.title::before,
html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex > h2.title::after {
  content: none !important;
  display: none !important;
}
html body:is(.home,[data-page="home"]) .how_it_works_section .swiper-pagination-2 {
  display: none !important;
}
@media (min-width:992px) {
  html body:is(.home,[data-page="home"]) .how_it_works_section .flex.desktop {
    position: relative !important;
    display: flex !important;
    direction: rtl !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(25px,5vw,75px) !important;
    width: min(1020px,100%) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--arabids-app-stage-h) !important;
    max-height: var(--arabids-app-stage-h) !important;
    margin: 0 auto !important;
  }
  html:is([dir="ltr"],[data-language="en"]) body:is(.home,[data-page="home"]) .how_it_works_section .flex.desktop {
    direction: ltr !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .flex.desktop > .how-it-works-swiper {
    position: relative !important;
    display: block !important;
    order: 1 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 600px !important;
    min-width: 0 !important;
    height: var(--arabids-app-stage-h) !important;
    max-height: var(--arabids-app-stage-h) !important;
    margin: 0 !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .flex.desktop > .how-it-works-swiper-2 {
    position: relative !important;
    display: block !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    width: min(262px,max(117px,calc((100dvh - var(--arabids-preview-header,82px) - 152px) * .48841))) !important;
    min-width: 0 !important;
    max-width: 262px !important;
    height: var(--arabids-app-stage-h) !important;
    max-height: var(--arabids-app-stage-h) !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    align-self: center !important;
    z-index: 2 !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .flex.desktop > .how-it-works-swiper .swiper-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .flex.desktop .how-it-works-slide-content {
    width: min(100%,580px) !important;
    margin: 0 !important;
    text-align: start !important;
    gap: 12px !important;
  }
}

/* The phone stage keeps its native sticky scroll behavior. On mobile, titles
   can remain one line using a smaller but legible type size; photo + caption
   fill their own allocated area without vertical overlap. */
@media (max-width:991px) {
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) .arabids-editorial-intro {
    min-height: 0 !important;
    padding: 12px 0 !important;
    margin-bottom: 16px !important;
  }
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) .arabids-editorial-heading > h2.title {
    font-size: clamp(15px,3.8vw,26px) !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    letter-spacing: -.015em !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex {
    width: min(calc(100% - 26px),600px) !important;
    margin: 0 auto !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex > h2.title {
    font-size: clamp(23px,5.6vw,32px) !important;
    text-align: center !important;
    margin: 0 auto 10px !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .how-it-works-swiper-mobile .how-it-works-slide-content {
    margin: 0 auto !important;
    text-align: center !important;
    padding: 8px 12px !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .how-it-works-swiper-mobile :is(.how-it-works-title,.how-it-works-subtitle) {
    text-align: center !important;
  }
}
@media (max-width:380px) {
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) .arabids-editorial-heading > h2.title {
    font-size: 13px !important;
    letter-spacing: -.035em !important;
  }
}