/*
 * Parallax hero — port of parallax-scrolling.tsx (Osmo, via 21st.dev) for Elementor v4.
 * Values from the original Osmo stylesheet (body font-size 1vw, so 1em = 1vw here).
 * Motion: parallax-hero.js (GSAP ScrollTrigger + Lenis).
 */

/* Osmo UI tokens used by the component */
.rw-parallax{
  --px-color-light: #FFFFFF;
  --px-color-black: #000000;
  --px-color-dark-rgb: 61, 20, 44; /* #3D142C (owner) — was black, then #351126 */
  --px-gap: 2em;
  --px-section-padding: calc(3.5em + (var(--px-gap) * 2));
  --px-container-padding: 2em;
}

/* .parallax — width 100%, relative, overflow hidden (body: black bg, light text, 1vw) */
.rw-parallax.parallax{
  display: block !important;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  font-size: 1vw;
  background-color: var(--px-color-black);
  color: var(--px-color-light);
}

/* .parallax__header */
.rw-parallax .parallax__header{
  z-index: 2;
  padding: var(--px-section-padding) var(--px-container-padding) !important;
  justify-content: center;
  align-items: center;
  min-height: 100svh !important;
  display: flex !important;
  position: relative;
  margin: 0 !important;
  gap: 0 !important;
}

/* .parallax__visuals */
.rw-parallax .parallax__visuals{
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 120%;
  position: absolute !important;
  top: 0;
  left: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* .parallax__black-line-overflow */
.rw-parallax .parallax__black-line-overflow{
  z-index: 20;
  background-color: rgb(var(--px-color-dark-rgb));
  width: 100%;
  height: 2px !important;
  min-height: 0 !important;
  position: absolute !important;
  bottom: -1px;
  left: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* .parallax__layers */
.rw-parallax .parallax__layers{
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 0;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

/* .parallax__layer-img */
.rw-parallax .parallax__layer-img{
  pointer-events: none;
  object-fit: cover;
  width: 100% !important;
  max-width: none !important;
  height: 117.5% !important;
  position: absolute !important;
  top: 0; /* was -17.5% (Osmo): keep the top of the owner's images visible */
  object-position: 50% 0% !important;
  left: 0;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block;
}

/* .parallax__layer-title */
.rw-parallax .parallax__layer-title{
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh !important;
  display: flex !important;
  position: absolute !important;
  top: 0;
  left: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* .parallax__title — Osmo: PP Neue Corp Wide 800 / 11vw; here Arabic in Cairo Black */
.rw-parallax .parallax__title{
  pointer-events: auto;
  text-align: center;
  text-transform: none;
  margin: 0 0 .1em 0 !important;
  margin-right: .075em !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 5vw !important; /* was 11vw, 9vw, 7vw (owner) */
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: var(--px-color-light) !important;
  position: relative;
}

/* .parallax__fade */
.rw-parallax .parallax__fade{
  z-index: 30;
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 30% !important; /* was 20%: gradient starts higher (owner) */
  min-height: 0 !important;
  position: absolute !important;
  bottom: 0;
  left: 0;
  padding: 0 !important;
  margin: 0 !important;
  background: linear-gradient(to top, rgba(var(--px-color-dark-rgb), 1) 0%, rgba(var(--px-color-dark-rgb), 0.738) 19%, rgba(var(--px-color-dark-rgb), 0.541) 34%, rgba(var(--px-color-dark-rgb), 0.382) 47%, rgba(var(--px-color-dark-rgb), 0.278) 56.5%, rgba(var(--px-color-dark-rgb), 0.194) 65%, rgba(var(--px-color-dark-rgb), 0.126) 73%, rgba(var(--px-color-dark-rgb), 0.075) 80.2%, rgba(var(--px-color-dark-rgb), 0.042) 86.1%, rgba(var(--px-color-dark-rgb), 0.021) 91%, rgba(var(--px-color-dark-rgb), 0.008) 95.2%, rgba(var(--px-color-dark-rgb), 0.002) 98.2%, transparent 100%) !important;
}

/* .parallax__content */
.rw-parallax .parallax__content{
  padding: var(--px-section-padding) var(--px-container-padding) !important;
  justify-content: center;
  align-items: center;
  min-height: 100svh !important;
  display: flex !important;
  position: relative;
  margin: 0 !important;
  gap: 0 !important;
}

/* .osmo-icon-svg — brand icon instead of the Osmo mark */
.rw-parallax .rw-px-icon{
  width: 8em !important;
  height: auto !important;
  max-width: none !important;
  position: relative;
  display: block;
  margin: 0 !important;
}

/* Lenis (recommended base styles) */
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }
.lenis.lenis-scrolling iframe{ pointer-events: none; }

/* Mobile: 8vw is ~31px on phones — keep the brand icon readable */
@media (max-width: 767px){
  .rw-parallax .rw-px-icon{ width: 96px !important; }
}

/* Mountain-like jagged bottom edge — valley sits behind the middle of the first trust-strip card on each breakpoint */
.rw-parallax.parallax{
  --px-wave-h: 130px;
  --px-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M-14.4 0L-14.4 62L50.4 42L86.4 60L158.4 12L216.0 46L252.0 34L309.6 84L367.2 56L417.6 28L453.6 42L496.8 8L547.2 58L583.2 86L633.6 50L676.8 64L727.2 20L763.2 38L799.2 26L864.0 78L921.6 40L972.0 14L1015.2 44L1044.0 70L1094.4 82L1137.6 90L1180.8 84L1226.9 72L1267.2 12L1310.4 36L1346.4 24L1396.8 62L1454.4 38L1454.4 0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(#000, #000), var(--px-wave);
  -webkit-mask-size: 100% calc(100% - var(--px-wave-h) + 1px), 100% var(--px-wave-h);
  -webkit-mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-image: linear-gradient(#000, #000), var(--px-wave);
  mask-size: 100% calc(100% - var(--px-wave-h) + 1px), 100% var(--px-wave-h);
  mask-position: top, bottom;
  mask-repeat: no-repeat, no-repeat;
}
@media (max-width: 1024px){
  .rw-parallax.parallax{
    --px-wave-h: 100px;
    --px-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M-14.4 0L-14.4 58L72.0 20L129.6 48L187.2 30L288.0 82L374.4 44L432.0 10L489.6 40L532.8 28L619.2 80L705.6 36L741.6 50L777.6 72L864.0 84L950.4 90L1036.8 84L1123.2 72L1180.8 14L1238.4 40L1296.0 26L1382.4 64L1454.4 30L1454.4 0Z' fill='%23000'/%3E%3C/svg%3E");
  }
}
@media (max-width: 767px){
  .rw-parallax.parallax{
    --px-wave-h: 70px;
    --px-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M-14.4 0L-14.4 50L86.4 16L187.2 52L273.6 34L417.6 80L518.4 44L604.8 14L691.2 46L777.6 72L892.8 84L1025.3 90L1152.0 84L1274.4 72L1353.6 18L1454.4 46L1454.4 0Z' fill='%23000'/%3E%3C/svg%3E");
  }
}

/* Hero subtitle under the title */
.rw-parallax .parallax__layer-title{ flex-direction: column; }
.rw-parallax [data-id="px-subtitle"]{
  margin: .35em 0 0 !important;
  padding: 0 !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: clamp(16px, 1.6vw, 32px) !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: #EC7676 !important;
  text-align: center;
  pointer-events: auto;
}

/* Mobile: title above the foreground image */
@media (max-width: 767px){
  .rw-parallax .parallax__layer-title{ justify-content: flex-start !important; align-items: center !important; padding-top: 34svh !important; }
}

/* Mobile: shorter logo-icon area */
@media (max-width: 767px){
  .rw-parallax .parallax__content{ min-height: 40svh !important; }
}

/* Logo-icon area background */
.rw-parallax .parallax__content{ background-color: #3D142C !important; }

/* Logo icon floats over the bottom of the hero images */
.rw-parallax .parallax__content{ align-items: flex-start !important; }
.rw-parallax .rw-px-icon{
  z-index: 5;
  margin-top: calc(-1 * var(--px-section-padding) + 10em) !important; /* desktop: icon top 10em below the images' bottom edge (icon = 8em) */
}
@media (max-width: 767px){
  .rw-parallax .rw-px-icon{ margin-top: calc(-1 * var(--px-section-padding) - 72px) !important; } /* mobile: icon centre 24px above the edge (icon = 96px) */
}

/* Desktop: shorter logo-icon area */
@media (min-width: 768px){
  .rw-parallax .parallax__content{ min-height: 70svh !important; }
}

/* Desktop: title / subtitle sizes */
@media (min-width: 768px){
  .rw-parallax .parallax__title{ font-size: 4.5vw !important; }
  .rw-parallax [data-id="px-subtitle"]{ font-size: clamp(18px, 2vw, 40px) !important; }
}