/*
 * ARABIDS v1.2.118 — image-led, full-width stories.
 * Every section uses a text-free brand photograph at its real colour.
 * Opaque, comfortable content panels protect contrast without bleaching the
 * entire image or allowing the background to bleed into adjacent chapters.
 */
:root {
  --arabids-photo-burgundy: #420b07;
  --arabids-photo-forest: #143328;
  --arabids-photo-gold: #a4865d;
  --arabids-photo-cream: #efe6d8;
}

/* The previous editorial photo tiles have become full-width chapter photos.
   Their old geometry must never create a box or gutter above the cards. */
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) {
  position: relative !important;
  isolation: isolate !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border-block: 0 !important;
}
html body:is(.home,[data-page="home"]) .core_benefits_section {
  background-color: #b59b77 !important;
  background-image: url('../images/brand-atmospheres/support-camera.jpg') !important;
  background-position: 67% center !important;
}
html body:is(.home,[data-page="home"]) .what_is_section {
  background-color: var(--arabids-photo-burgundy) !important;
  background-image: url('../images/brand-atmospheres/heritage-frame.jpg') !important;
  background-position: 69% center !important;
}
html body:is(.home,[data-page="home"]) .who_its_for_section {
  background-color: var(--arabids-photo-forest) !important;
  background-image: url('../images/brand-atmospheres/app-gallery.jpg') !important;
  background-position: 64% center !important;
}
html body:is(.home,[data-page="home"]) .faq_section {
  background-color: var(--arabids-photo-burgundy) !important;
  background-image: url('../images/brand-atmospheres/account-coins.jpg') !important;
  background-position: 70% center !important;
}

html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) > .container {
  position: relative !important;
  z-index: 2 !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-intro {
  display: flex !important;
  flex-flow: row nowrap !important;
  direction: ltr !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  min-height: clamp(260px,24vw,365px) !important;
  gap: 0 !important;
  margin: 0 0 clamp(24px,3vw,44px) !important;
  padding: 0 !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-scene {
  display: none !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-heading {
  display: flex !important;
  flex-flow: column nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex: 0 1 570px !important;
  width: min(570px,52%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  direction: rtl !important;
  text-align: right !important;
  padding: clamp(24px,3.5vw,45px) !important;
  margin: 0 !important;
  background: rgba(255,252,246,.95) !important;
  border: 1px solid rgba(164,134,93,.38) !important;
  border-radius: 23px 6px 23px 23px !important;
  box-shadow: 0 18px 45px rgba(3,18,13,.14) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-heading::before {
  display: block !important;
  align-self: flex-start !important;
  width: 58px !important;
  height: 3px !important;
  flex: 0 0 3px !important;
  margin: 0 0 17px !important;
  background: var(--arabids-photo-gold) !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-heading > h2.title {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: start !important;
  font-size: clamp(27px,3vw,44px) !important;
  line-height: 1.5 !important;
  color: var(--arabids-photo-burgundy) !important;
  -webkit-text-fill-color: var(--arabids-photo-burgundy) !important;
  text-shadow: none !important;
  white-space: normal !important;
  transform: none !important;
}
html:is([dir="ltr"],[data-language="en"]) body:is(.home,[data-page="home"]) .arabids-editorial-heading {
  direction: ltr !important;
  text-align: left !important;
}

/* Card surfaces stay clearly legible. A continuous, colourful photo remains
   visible in the open half of the chapter and in the generous card gutters. */
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item,
html body:is(.home,[data-page="home"]) :is(.what_is_section,.who_its_for_section,.faq_section) .flex-wrap > .item {
  background: rgba(255,252,247,.97) !important;
  border: 1px solid rgba(164,134,93,.42) !important;
  box-shadow: 0 12px 34px rgba(3,18,13,.14) !important;
  color: var(--arabids-photo-forest) !important;
}

/* Widescreen photographic hero with a restrained automatic cross-fade.
   The removed phone illustration cannot obscure the full-bleed artwork. */
html body:is(.home,[data-page="home"]) .hero {
  position: relative !important;
  isolation: isolate !important;
  background: var(--arabids-photo-forest) !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  padding-block: clamp(60px,8vw,120px) !important;
}
html body:is(.home,[data-page="home"]) .hero > .arabids-hero-photo-scene {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: url('../images/brand-atmospheres/auctions-antiques.jpg') 62% center / cover no-repeat !important;
  opacity: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
html body:is(.home,[data-page="home"]) .hero .arabids-hero-photo-scene::before,
html body:is(.home,[data-page="home"]) .hero .arabids-hero-photo-scene::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-position: 65% center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  will-change: opacity !important;
}
html body:is(.home,[data-page="home"]) .hero .arabids-hero-photo-scene::before {
  background-image: url('../images/brand-atmospheres/hero-collectibles.jpg') !important;
  animation: arabids-banner-fade-a 21s ease-in-out infinite !important;
}
html body:is(.home,[data-page="home"]) .hero .arabids-hero-photo-scene::after {
  background-image: url('../images/brand-atmospheres/heritage-frame.jpg') !important;
  animation: arabids-banner-fade-b 21s ease-in-out infinite !important;
}
@keyframes arabids-banner-fade-a {
  0%,28%,64%,100% {opacity:0;}
  34%,58% {opacity:1;}
}
@keyframes arabids-banner-fade-b {
  0%,59%,100% {opacity:0;}
  66%,92% {opacity:1;}
}
html body:is(.home,[data-page="home"]) .hero > .container {
  position: relative !important;
  z-index: 2 !important;
}
html body:is(.home,[data-page="home"]) .hero .container > .flex {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  direction: inherit !important;
  min-height: clamp(400px,39vw,575px) !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body:is(.home,[data-page="home"]) .hero .container > .flex > .right {
  display: none !important;
  width: 0 !important;
  flex: 0 0 0 !important;
}
html body:is(.home,[data-page="home"]) .hero .container > .flex > .left {
  display: flex !important;
  flex-flow: column nowrap !important;
  align-items: flex-start !important;
  flex: 0 1 740px !important;
  width: min(740px,70%) !important;
  max-width: min(740px,70%) !important;
  margin: 0 !important;
  padding: clamp(28px,4.2vw,60px) !important;
  background: rgba(255,252,247,.95) !important;
  border: 1px solid rgba(164,134,93,.42) !important;
  border-radius: 25px 6px 25px 25px !important;
  box-shadow: 0 24px 55px rgba(3,18,13,.21) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
html body:is(.home,[data-page="home"]) .hero .arabids-hero-copy {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:is(.home,[data-page="home"]) .hero h1.title {
  font-size: clamp(40px,4.05vw,66px) !important;
  line-height: 1.32 !important;
  color: var(--arabids-photo-burgundy) !important;
  -webkit-text-fill-color: var(--arabids-photo-burgundy) !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 21px !important;
  transform: none !important;
  text-shadow: none !important;
}
/* Match and outrank the earlier language-specific nowrap rules so the
   headline stays completely inside the enlarged photographic-banner panel. */
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 {
  width: auto !important;
  max-width: 100% !important;
  font-size: clamp(39px,4.05vw,66px) !important;
  margin-top: 0 !important;
  margin-bottom: 21px !important;
  transform: none !important;
  overflow: visible !important;
}
html body:is(.home,[data-page="home"]) .hero .subtitle {
  color: #143328 !important;
  max-width: 100% !important;
  text-shadow: none !important;
}
html body:is(.home,[data-page="home"]) .hero .download_app {
  margin-top: 24px !important;
  margin-inline: 0 !important;
}

/* Override the earlier English 57% text-column rule. The banner has no
   phone column, so the English one-line headline can use the wider panel. */
html:is([dir="ltr"],[data-language="en"]) body:is(.home,[data-page="home"]) .hero .container > .flex > .left,
html[data-language="en"] body.home .hero .left,
html[lang="en"] body.home .hero .left {
  width: min(780px,76%) !important;
  max-width: min(780px,76%) !important;
  flex: 0 1 780px !important;
  padding: clamp(28px,4.2vw,60px) !important;
}
@media (min-width: 992px) {
  html body:is(.home,[data-page="home"]) .hero h1.title {
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    overflow: visible !important;
  }
}

/* On phones the photograph stays genuinely full-width and undistorted. Its
   upper frame is unobstructed; below it, the cards flow on a calm brand tone. */
@media (max-width: 991px) {
  html body:is(.home,[data-page="home"]) .hero {
    padding: clamp(220px,58vw,330px) 0 70px !important;
    overflow: hidden !important;
  }
  html body:is(.home,[data-page="home"]) .hero > .arabids-hero-photo-scene {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: 72% 25% !important;
  }
  html body:is(.home,[data-page="home"]) .hero .container > .flex {
    min-height: auto !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  html body:is(.home,[data-page="home"]) .hero .container > .flex > .left,
  html:is([dir="ltr"],[data-language="en"]) body:is(.home,[data-page="home"]) .hero .container > .flex > .left,
  html[data-language="en"] body.home .hero .left {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(20px,5vw,36px) !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }
  html body:is(.home,[data-page="home"]) .hero h1.title {
    font-size: clamp(30px,6vw,44px) !important;
    white-space: normal !important;
    text-wrap: wrap !important;
    width: auto !important;
  }
  html[data-language="ar"] body.home .hero .arabids-hero-copy h1.title,
  html[data-language="en"] body.home .hero .arabids-hero-copy h1.title,
  html[lang="ar"] body.home .hero .arabids-hero-copy h1.title,
  html[lang="en"] body.home .hero .arabids-hero-copy h1.title {
    font-size: clamp(30px,6vw,44px) !important;
    white-space: normal !important;
    text-wrap: wrap !important;
  }
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) {
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    padding-top: clamp(32px,7vw,68px) !important;
    padding-bottom: clamp(60px,9vw,100px) !important;
  }
  html body:is(.home,[data-page="home"]) .core_benefits_section {background-color:#f2e8d8 !important;}
  html body:is(.home,[data-page="home"]) .what_is_section {background-color:#f6efe6 !important;}
  html body:is(.home,[data-page="home"]) .who_its_for_section {background-color:#edf1e9 !important;}
  html body:is(.home,[data-page="home"]) .faq_section {background-color:#f8eee5 !important;}
  html body:is(.home,[data-page="home"]) .arabids-editorial-intro {
    display: flex !important;
    flex-flow: column nowrap !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    padding-top: clamp(180px,55vw,440px) !important;
    margin-bottom: 28px !important;
  }
  html body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-heading,
  html:is([dir="ltr"],[data-language="en"]) body:is(.home,[data-page="home"]) .arabids-editorial-heading {
    flex: 0 0 auto !important;
    width: min(620px,100%) !important;
    max-width: 100% !important;
    padding: clamp(19px,4vw,30px) !important;
    border-radius: 17px !important;
    margin: 0 !important;
  }
  html body:is(.home,[data-page="home"]) .arabids-editorial-heading > h2.title {
    font-size: clamp(25px,5.8vw,37px) !important;
  }
}
@media (max-width: 540px) {
  html body:is(.home,[data-page="home"]) .hero {
    padding-top: clamp(205px,61vw,270px) !important;
    padding-bottom: 54px !important;
  }
  html body:is(.home,[data-page="home"]) .hero > .container {
    padding-inline: 16px !important;
  }
  html body:is(.home,[data-page="home"]) .hero h1.title {
    font-size: clamp(27px,7.3vw,38px) !important;
  }
  html[data-language="ar"] body.home .hero .arabids-hero-copy h1.title,
  html[data-language="en"] body.home .hero .arabids-hero-copy h1.title,
  html[lang="ar"] body.home .hero .arabids-hero-copy h1.title,
  html[lang="en"] body.home .hero .arabids-hero-copy h1.title {
    font-size: clamp(27px,7.3vw,38px) !important;
  }
  html body:is(.home,[data-page="home"]) .arabids-editorial-intro {
    min-height: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body:is(.home,[data-page="home"]) .hero .arabids-hero-photo-scene::before,
  html body:is(.home,[data-page="home"]) .hero .arabids-hero-photo-scene::after {
    animation: none !important;
    opacity: 0 !important;
    will-change: auto !important;
  }
}