/* ===============================
   PARTNERS PAGE (UPDATED COLORS)
================================ */

:root{
  /* Brand palette (Charcoal + Gold) */
  --p-charcoal:#0f1115;
  --p-charcoal2:#171b22;
  --p-gold:#D0A030;
  --p-gold2:#C09020;
  --p-gold-soft: rgba(208,160,48,.14);

  /* Text */
  --p-text:#0f172a;
  --p-muted:#475569;

  /* Surfaces */
  --p-bg:#f5f1e8;
  --p-surface:#ffffff;
  --p-surface2:#f5f7fa;
}

/* ===================== Motion System ===================== */
.js-reveal,
.js-card{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.js-card{
  transition-delay: var(--d, 0ms);
}

.js-reveal.is-in,
.js-card.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* ===================== HERO (Image Background - Text Aligned to Edge) ===================== */
.p-hero-image{
  position: relative;
  width: 100%;

  /* ⬇️ ارتفاع أقل + بدون فراغ */
  height: 68vh;
  min-height: 420px;
  max-height: 520px;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;

  margin: 0 !important;
  padding: 0 !important;

  border-bottom: 1px solid rgba(15,23,42,.08);
  overflow: hidden;
}

/* المحتوى: افتراضيًا للإنجليزية (يسار) */
.p-hero-content{
  position: relative;
  padding: clamp(22px, 3.5vw, 70px);
  max-width: 760px;
  color: #fff;
  text-align: left;
  left: 0;
  right: auto;
  top: 20px;
}

/* العربية: ننقل المحتوى إلى اليمين */
html[dir="rtl"] .p-hero-content{
  text-align: right;
  right: 0;
  left: auto;
}

/* العنوان */
.p-hero-title{
  font-size: clamp(34px, 4.2vw, 72px);
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* النص */
.p-hero-text{
  margin: 0;
  max-width: 560px;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.85;
  opacity: .95;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* الزر */
.p-hero-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  background: linear-gradient(180deg, var(--p-gold), var(--p-gold2));
  color: #0b1220;
  box-shadow: 0 14px 34px rgba(2,8,23,.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.p-hero-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 18px 45px rgba(2,8,23,.24);
}

/* Mobile: نركز المحتوى */
@media (max-width: 900px){
  .p-hero-image{
    height: auto;
    min-height: 420px;
    max-height: none;
  }
  .p-hero-content{
    margin: 0 auto !important;
    text-align: center !important;
    left: auto !important;
    right: auto !important;
  }
}
/* ===================== HERO IMAGE ZOOM ANIMATION ===================== */
.p-hero-image{
  animation: heroZoom 18s ease-in-out infinite;
  will-change: background-size, transform;
}
@keyframes heroZoom{
  0%{
    background-size: 112%;
  }
  50%{
    background-size: 100%;
  }
  100%{
    background-size: 112%;
  }
}



/* ===================== VISION (Slider Like Reference) ===================== */
.p-vision{
  padding: 90px 0;
  background: var(--p-surface);
}

.p-vision-grid{
  display: grid;
  grid-template-columns: 1.05fr 1.25fr; /* الصورة أعرض */
  gap: 40px;
  align-items: center;
}

/* Text alignment by dir */
html[dir="rtl"] .p-vision-content{
  text-align: right;
  direction: rtl;
}
html[dir="ltr"] .p-vision-content{
  text-align: left;
  direction: ltr;
}

.p-vision-title{
  font-size: 36px;
  font-weight: 900;
  margin: 0 0 16px;
  color: var(--p-text);
}

.p-vision-text{
  margin: 0;
  font-size: 18px;
  line-height: 1.9;
  color: var(--p-muted);
  max-width: 560px;
}

/* Slider box: big, sharp corners, clean like screenshot */
.p-vision-media{
  position: relative;
  height: 520px;            /* صورة كبيرة */
  border-radius: 0;         /* ✅ زوايا حادة */
  overflow: hidden;
  background: #e9eef6;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 50px rgba(15,23,42,.12);
}

/* Slide layers */
.p-vision-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* نفس المرجع */
  opacity: 0;
  transition: opacity 900ms ease;
  transform: scale(1.01);
}

.p-vision-slide.is-active{
  opacity: 1;
}

/* Responsive */
@media(max-width: 980px){
  .p-vision-grid{
    grid-template-columns: 1fr;
  }
  .p-vision-media{
    height: 420px;
  }
  .p-vision-text{
    max-width: 100%;
  }
}

/* ===================== COMPANIES ===================== */
.p-companies{
  padding: 90px 0;
  background: var(--p-surface2);
}

.p-section-title{
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 10px;
  text-align: right;
  color: var(--p-text);
}
html[dir="ltr"] .p-section-title{ text-align:left; }

.p-companies-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

/* ===== PARTNER CARD (WITH BIG LOGO) ===== */
.p-company{
  background: var(--p-surface);
  border-radius: 18px;
  padding: 26px 22px;
  text-align: center;
  font-weight: 800;
  color: var(--p-text);
  box-shadow: 0 14px 35px rgba(15,23,42,.08);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.p-company.p-company--link{
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.p-company:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(15,23,42,.14);
  border-color: var(--p-gold-soft);
}

/* BIG LOGO */
.p-company-logo{
  width: 96px;
  height: 96px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  flex: 0 0 96px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15,23,42,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}

.p-company-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 12px;
}

.p-company:hover .p-company-logo{
  transform: scale(1.05);
  box-shadow: 0 18px 45px rgba(15,23,42,.18);
}

/* NAME */
.p-company-name{
  font-weight: 900;
  color: var(--p-text);
  font-size: 18px;
  line-height: 1.35;
  text-align: right;
}
html[dir="ltr"] .p-company-name{ text-align:left; }

.p-company-ext{
  opacity: .7;
  font-weight: 900;
  font-size: 18px;
}

/* CTA */
.p-cta{
  padding: 80px 0;
  background: linear-gradient(180deg, var(--p-charcoal2), var(--p-charcoal));
  color: #fff;
  text-align: center;
}

.p-cta-title{
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 14px;
}

.p-cta-text{
  font-size: 18px;
  line-height: 1.9;
  max-width: 800px;
  margin: 0 auto 26px;
  opacity: .95;
}

.p-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--p-gold), var(--p-gold2));
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 14px 35px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, filter .15s ease;
}
.p-cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  opacity: .99;
  filter: brightness(1.03);
}

/* Responsive */
@media(max-width:900px){
  .p-company.p-company--link{
    flex-direction: column;
    gap: 12px;
    justify-content: center;
  }
  .p-company-name{
    text-align: center;
  }
  .p-company-logo{
    width: 88px;
    height: 88px;
  }
}