/*
 * «شركاء النجاح» — port of logo-cloud-3.tsx + demo.tsx + infinite-slider (21st.dev) for Elementor v4.
 * Tailwind classes are noted next to each rule (sizes in px: Astra scales the root font-size on small screens). Motion: logo-cloud.js.
 * Compact section (rw-section padding) instead of the demo's min-h-screen wrapper — owner's choice.
 */

/* Section — relative container for the glow */
.rw-lc-section{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Glow — -z-10 -top-1/2 -translate-x-1/2 pointer-events-none absolute left-1/2 h-[120vmin] w-[120vmin]
   rounded-b-full bg-[radial-gradient(ellipse_at_center,foreground/.1,transparent_50%)] blur-[30px] */
.rw-lc-section::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: -50%;
  left: 50%;
  width: 120vmin;
  height: 120vmin;
  transform: translateX(-50%);
  border-radius: 0 0 9999px 9999px;
  background: radial-gradient(ellipse at center, rgba(85, 28, 61, .1), transparent 50%);
  filter: blur(30px);
  pointer-events: none;
}

/* <section class="relative mx-auto max-w-3xl"> */
.rw-lc-section .rw-lc-inner{
  position: relative;
  display: block !important;
  width: 100%;
  max-width: 768px;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* h2 — mb-5 text-center font-medium text-foreground text-xl tracking-tight md:text-3xl */
.rw-lc-section .rw-lc-title{
  display: block;
  margin: 0 0 20px !important;
  padding: 0 !important;
  text-align: center !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important; /* tracking-tight is for Latin; keeps Arabic letter joins intact */
  color: #551C3D !important;
}
/* <span class="text-muted-foreground"> */
.rw-lc-section .rw-lc-title > span:first-of-type{ color: rgba(85, 28, 61, .7); }
/* <span class="font-semibold"> */
.rw-lc-section .rw-lc-title > span:last-of-type{ font-weight: 600; }
@media (min-width: 768px){
  .rw-lc-section .rw-lc-title{ font-size: 30px !important; line-height: 36px !important; }
}

/* Dividers — h-px bg-border [mask-image:linear-gradient(to_right,transparent,black,transparent)] */
.rw-lc-section .rw-lc-line{
  display: block !important;
  width: auto;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: #B1A4AB;
  -webkit-mask-image: linear-gradient(to right, transparent, black, transparent);
  mask-image: linear-gradient(to right, transparent, black, transparent);
}
/* mx-auto my-5 max-w-sm */
.rw-lc-section .rw-lc-line-top{ max-width: 384px; margin: 20px auto !important; }
/* mt-5 */
.rw-lc-section .rw-lc-line-bottom{ margin: 20px 0 0 !important; }

/* LogoCloud — overflow-hidden py-4 [mask-image:...] (+ InfiniteSlider wrapper: overflow-hidden) */
.rw-lc-section .rw-lc-cloud{
  display: block !important;
  overflow: hidden;
  padding: 16px 0 !important;
  margin: 0 !important;
  direction: ltr; /* the slider moves on the x axis like the component, independent of the RTL page */
  -webkit-mask-image: linear-gradient(to right, transparent, black, transparent);
  mask-image: linear-gradient(to right, transparent, black, transparent);
}

/* InfiniteSlider motion.div — flex w-max, gap 42px */
.rw-lc-section .rw-lc-track{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  width: max-content !important;
  max-width: none !important;
  gap: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: none !important; /* e-con base transitions transform (.4s) — would smear every frame and the loop reset */
  will-change: transform;
}

/* <img class="pointer-events-none h-4 select-none md:h-5" width="auto"> */
.rw-lc-section .rw-lc-logo{
  display: block;
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  height: 28px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (min-width: 768px){
  .rw-lc-section .rw-lc-logo{ height: 36px !important; }
}

/* Elementor editor: show all logos (wrapped) so each one can be selected and replaced */
.elementor-editor-active .rw-lc-section .rw-lc-cloud{
  direction: rtl;
  -webkit-mask-image: none;
  mask-image: none;
}
.elementor-editor-active .rw-lc-section .rw-lc-track{
  width: auto !important;
  flex-wrap: wrap !important;
  justify-content: center;
  row-gap: 16px !important;
  transform: none !important;
}
.elementor-editor-active .rw-lc-section .rw-lc-logo{ pointer-events: auto; }

/* Desktop: wider logo strip */
@media (min-width: 1025px){
  .rw-lc-section .rw-lc-inner{ max-width: 1240px; }
}