/* ARABIDS 1.2.112 — bilingual homepage rhythm.
 * Keep the original layout, restore a comfortable title-to-copy gap, and
 * reserve clearance around the sticky four-screen app presentation. */

@media (min-width: 992px) {
  html[data-language="ar"] body.home .hero .arabids-hero-copy h1.title,
  html[data-language="ar"] body[data-page="home"] .hero .arabids-hero-copy h1.title,
  html[lang="ar"] body.home .hero .arabids-hero-copy h1.title,
  html[data-language="en"] body.home .hero .arabids-hero-copy h1.title,
  html[data-language="en"] body[data-page="home"] .hero .arabids-hero-copy h1.title,
  html[lang="en"] body.home .hero .arabids-hero-copy h1.title {
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    transform: translateY(-8px) !important;
    font-size: clamp(40px, calc(32.6267px + 1.84332vw), 68px) !important;
    line-height: 1.32 !important;
    letter-spacing: normal !important;
    color: #420B07 !important;
    -webkit-text-fill-color: #420B07 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 3 !important;
  }

  /* English needs more copy width than Arabic to keep all four words on one
     line, without sending any part over the device illustration. */
  html[data-language="en"] body.home .hero .left,
  html[data-language="en"] body[data-page="home"] .hero .left,
  html[lang="en"] body.home .hero .left {
    display: block !important;
    width: 57% !important;
    max-width: 57% !important;
    flex: 0 0 57% !important;
    padding-left: 0 !important;
    padding-right: 34px !important;
  }
  html[data-language="en"] body.home .hero .right,
  html[data-language="en"] body[data-page="home"] .hero .right,
  html[lang="en"] body.home .hero .right {
    width: 43% !important;
    max-width: 43% !important;
    flex: 0 0 43% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html[data-language="en"] body.home .hero .right img,
  html[data-language="en"] body[data-page="home"] .hero .right img,
  html[lang="en"] body.home .hero .right img {
    display: block !important;
    width: 100% !important;
    max-width: 481px !important;
    height: auto !important;
  }

  /* Extra breathing room between naturally-flowing homepage sections. */
  html body.home .core_benefits_section,
  html body[data-page="home"] .core_benefits_section,
  html body.home .what_is_section,
  html body[data-page="home"] .what_is_section,
  html body.home .who_its_for_section,
  html body[data-page="home"] .who_its_for_section,
  html body.home .faq_section,
  html body[data-page="home"] .faq_section {
    padding-top: clamp(86px, 7.5vw, 116px) !important;
    padding-bottom: clamp(86px, 7.5vw, 116px) !important;
  }
  html body.home .hero,
  html body[data-page="home"] .hero {padding-bottom: 68px !important;}

  /* The scroll-driven stage is sticky. Its fixed viewport height previously
     let the phone and pale decorations paint past the section's lower edge.
     Extend the genuine section runway instead of hiding or cropping images. */
  html body.home .how_it_works_section,
  html body[data-page="home"] .how_it_works_section {
    height: calc(370svh + 190px) !important;
    min-height: calc(370vh + 190px) !important;
    padding: 0 0 190px !important;
    box-sizing: border-box !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
  }
  html body.home .how_it_works_section .container-flex,
  html body[data-page="home"] .how_it_works_section .container-flex {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  html body.home .how_it_works_section .flex.desktop,
  html body[data-page="home"] .how_it_works_section .flex.desktop {
    min-height: 0 !important;
    width: 100% !important;
    max-height: calc(100% - 76px) !important;
    align-items: center !important;
  }
  html body.home .how_it_works_section .flex.desktop .how-it-works-swiper-2,
  html body[data-page="home"] .how_it_works_section .flex.desktop .how-it-works-swiper-2 {
    width: min(295px, max(160px, calc((100dvh - var(--arabids-preview-header, 82px) - 164px) * .48841))) !important;
    min-width: 0 !important;
    max-width: 295px !important;
    height: auto !important;
    aspect-ratio: 295 / 604 !important;
    margin-inline: auto !important;
  }
  html body.home .how_it_works_section .flex.desktop > .how-it-works-swiper,
  html body[data-page="home"] .how_it_works_section .flex.desktop > .how-it-works-swiper {
    height: min(600px, max(160px, calc(100dvh - var(--arabids-preview-header, 82px) - 164px))) !important;
    max-height: calc(100dvh - var(--arabids-preview-header, 82px) - 164px) !important;
    min-height: 0 !important;
  }
}

/* One gentle halo remains within the app preview. The old free-floating
   background circle was the element crossing into the next section. */
html body.home .how_it_works_section .container-circle-wrap,
html body[data-page="home"] .how_it_works_section .container-circle-wrap {
  display: none !important;
}

@media (max-width: 991px) {
  html body.home .how_it_works_section,
  html body[data-page="home"] .how_it_works_section {
    height: calc(360svh + 130px) !important;
    min-height: 0 !important;
    padding-bottom: 130px !important;
    box-sizing: border-box !important;
  }
  html body.home .core_benefits_section,
  html body[data-page="home"] .core_benefits_section,
  html body.home .what_is_section,
  html body[data-page="home"] .what_is_section,
  html body.home .who_its_for_section,
  html body[data-page="home"] .who_its_for_section,
  html body.home .faq_section,
  html body[data-page="home"] .faq_section {
    padding-top: clamp(56px, 8vw, 80px) !important;
    padding-bottom: clamp(56px, 8vw, 80px) !important;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  html body.home .how_it_works_section,
  html body[data-page="home"] .how_it_works_section {
    height: calc(390svh + 130px) !important;
  }
}