/* ===== Estrha Team (RTL) ===== */
.estrha-team-wrap{
  --blue:#1269FF;
  --text:#1f2640;
  --muted:#6b7394;
  --card-shadow:0 18px 60px rgba(13,25,55,.10);
  --ring:#e9eefc;
  --logo: var(--tm-logo, none);
  font-family:"MadaniArabic","Cairo","Tajawal","Noto Kufi Arabic",system-ui,-apple-system,"Segoe UI","Roboto",sans-serif;
  padding: clamp(36px,6vw,72px) 0;
  direction: rtl;
}
.estrha-team-wrap *{ box-sizing:border-box }
.tm-container{ width:min(1200px, 100% - 48px); margin-inline:auto; }

/* heading */
.tm-head{ text-align:center; margin-bottom: clamp(24px,4vw,40px); }
.tm-title{
  margin:0 0 10px; color:var(--blue); font-weight:800; letter-spacing:.2px;
  font-size: clamp(22px, 3.2vw, 34px);
}
.tm-sub{ margin:0 auto; color:#4f5a82; line-height:1.9; max-width:70ch }

/* grid/slider */
.tm-list{ position:relative; }
.tm-list ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px,3vw,32px);
}
@media (max-width: 860px){
  .tm-list ul{ grid-template-columns: repeat(2, 1fr); }
}
/* موبايل صغير جداً: عنصر واحد */
@media (max-width: 420px){
  .tm-list ul{ grid-template-columns: 1fr; }
}

/* card */
.tm-card{
  background:#fff; border-radius:26px;
  box-shadow: var(--card-shadow);
  padding: clamp(16px,2.2vw,20px) clamp(16px,2.2vw,20px) clamp(18px,2.4vw,22px);
  text-align:center;
}
.tm-portrait{
  position:relative; width:min(260px, 72%); aspect-ratio:1/1; margin: 6px auto 14px;
  border-radius:999px; display:grid; place-items:center;
  background:
    radial-gradient(64% 64% at 50% 50%, #f7f9ff 0%, #eef2ff 100%);
  box-shadow: inset 0 0 0 1.2px #e8ecff;
  overflow:visible;
}
.tm-portrait::after{
  content:""; position:absolute; inset:-12px; border-radius:999px;
  border:1px dashed #e4ebff; pointer-events:none;
}
.tm-portrait img{
  width:78%; height:78%; object-fit:cover; border-radius:999px;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}
.tm-logo{
  position:absolute; inset:auto; width:140%; aspect-ratio:1/1;
  background-image: var(--logo);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:.18; z-index:-1; pointer-events:none;
}

/* name/role */
.tm-name{ margin:0 0 6px; color:#0e1a44; font-weight:800; font-size: clamp(16px,1.8vw,20px) }
.tm-role{ margin:0; color:#556089; font-size:14px }

/* reveal */
.reveal{ opacity:0; transform: translateY(14px) scale(.985); }
.reveal.in{ opacity:1; transform:none; transition: opacity 1100ms ease, transform 1100ms cubic-bezier(.19,.9,.22,1); }

/* ===== Desktop slider (نافذة 3) ===== */
@media (min-width: 861px){
  .tm-list[data-window="3"] ul{
    display:flex; flex-direction:column; gap:16px;   /* سنستخدم نافذة 3 عبر إخفاء/إظهار العناصر */
  }
  .tm-item{ list-style:none; }
  /* نفس شكل الكارد، لكن سنجعل قائمة عمودية ونظهر 3 فقط فوق بعض؟ (نحتاج أفقياً مثل التصميم) */
}
/* نهج أبسط: نخلي الشبكة ثابتة، ونخفي/نظهر العناصر بنافذة 3 */
.tm-item.is-hidden{ display:none !important; }

/* أسهم السلايدر (تظهر فقط عند الحاجة على الديسكتوب) */
.tm-arrows{
  position:absolute; inset:auto 0 50% 0; transform: translateY(50%);
  display:flex; justify-content:space-between; align-items:center; pointer-events:none;
  padding-inline: 4px;
}
.tm-arrow{
  appearance:none; border:0; width:42px; height:42px; border-radius:12px;
  background:linear-gradient(180deg,#fff,#f3f6ff); color:#4c5a88; font-size:22px;
  box-shadow:0 10px 24px rgba(0,0,0,.12); cursor:pointer; pointer-events:auto;
  display:grid; place-items:center; transition: transform .25s ease;
}
.tm-arrow:active{ transform: translateY(1px); }
.tm-arrows.hidden{ display:none; }

/* انيميشن تبديل العناصر */
.tm-item.anim-in{
  animation: tmFadeUp .65s cubic-bezier(.19,.9,.22,1) both;
}
@keyframes tmFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform:none; }
}

/* === Team: remove all white backgrounds & keep only the logo behind the photo === */
.estrha-team-wrap{
  background: transparent !important;
}

/* الكارد نفسه بدون خلفية أو ظل وبهوامش أنظف */
.tm-card{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* البورتريت: بدون تدرج/حواف/دوائر، حجم مريح وتوسيط */
.tm-portrait{
  background: transparent !important;
  box-shadow: none !important;
  width: min(320px, 72%) !important;   /* عدّلها لو عايز الصورة تكبر/تصغر */
  aspect-ratio: 1/1;
  margin: 6px auto 18px !important;
  overflow: visible !important;
  border-radius: 999px;
}
/* كان عامل حلقة منقطة حول الصورة—نلغيها */
.tm-portrait::after{ content: none !important; }

/* الصورة نفسها كما هي */
.tm-portrait img{
  width: 78% !important;
  height: 78% !important;
  object-fit: cover;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

/* اللوجو فقط خلف الصورة */
.tm-logo{
  position: absolute;
  inset: auto;             /* خليها في الوسط */
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 140% !important;  /* حجم اللوجو خلف الصورة */
  aspect-ratio: 1/1;
  background-image: var(--tm-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .18;            /* خفيف وناعم */
  z-index: -1;
  pointer-events: none;
}

/* تباعد النصوص تحت الصورة */
.tm-name{ margin: 0 0 8px !important; }
.tm-role{ margin: 0 0 4px !important; }

/* لا تغييرات على الشبكة/الأسهم—تبقى كما هي */

/* إزالة أي خلفية/دوائر خلف الصورة */
.tm-portrait{
  background: transparent !important;   /* يلغي أي لون/تدرّج */
  box-shadow: none !important;
  position: relative;
}

/* بعض الإضافات كانت بتضيف طبقات شكل دوائر عبر before/after — نقفلها */
.tm-portrait::before,
.tm-portrait::after{
  content: none !important;
}

/* الصورة نفسها تظل دائرية فقط */
.tm-portrait img{
  background: transparent !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);   /* لو عايز تلغي الظل: احذف السطر */
  border-radius: 999px;
}

/* اللوجو خلف الصورة — أصغر بكثير */
.tm-logo{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 90% !important;       /* ↓↓↓ صغّرنا اللوجو بشكل واضح */
  max-width: 480px;            /* سقف اختياري */
  aspect-ratio: 1/1;
  background-image: var(--tm-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .14;                 /* خفيف وناعم */
  z-index: -1;
  pointer-events: none;
}

/* على الشاشات الصغيرة ممكن نكبّره سنة بسيطة */
@media (max-width: 768px){
  .tm-logo{ width: 100% !important; opacity: .16; }
}

/* نزع أي خلفيات/دوائر/حدود تمامًا من خلف الصورة */
.tm-portrait{
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  position: relative;
}

/* أقفل أي before/after أو حلقات */
.tm-portrait::before,
.tm-portrait::after{
  content: none !important;
  display: none !important;
}

/* لو فيه أي طبقات داخلية غير الصورة واللوجو (دوائر/خلفيات)… اخفيها */
.tm-portrait > :not(img):not(.tm-logo){
  display: none !important;
}

/* الصورة نفسها شفافة تمامًا (من غير أي خلفية أو ظل أبيض) */
.tm-portrait img{
  background: transparent !important;
  box-shadow: none !important;     /* لو عايز ترجع الظل، احذف السطر */
  border-radius: 999px !important;
}

/* اللوجو الخلفي (حجمه مضبوط عندك، بخليه كما هو) */
.tm-logo{
  position: absolute !important;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 90% !important;           /* الحجم اللي ظبطته */
  max-width: 480px;
  aspect-ratio: 1/1;
  background-image: var(--tm-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .14;                    /* خفيف وناعم */
  z-index: -1;
  pointer-events: none;
}
/* TEAM — خلفية لون واحد */
.estrha-team-wrap{
  background: #f7fbff !important;
  background-image: none !important; /* يلغي أي تدرجات قديمة */
}

/* TEAM — تثبيت اللوجو خلف الصورة بدون اختفاء عند السكrol */
.tm-portrait{
  position: relative;                 /* يضمن سياق تراكب ثابت */
  overflow: visible !important;
}

.tm-portrait img{
  position: relative;
  z-index: 2;                         /* الصورة فوق اللوجو */
}

.tm-logo{
  z-index: 1 !important;              /* كان -1: سبب الاختفاء */
  /* باقي إعداداتك كما هي (position/size/opacity/...) */
}

/* (اختياري) لو أي عنصر أبوي عنده مؤثرات بتعمل stacking context */
.tm-card{ isolation: isolate; }       /* يمنع تداخل الطبقات مع ما حولها */
/* ===== Desktop: 3 كروت في الصف الواحد ===== */
@media (min-width: 861px){
  .estrha-team-wrap .tm-list[data-window="3"] ul{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(18px, 3vw, 32px) !important;
  }
}

/* ===== Desktop: تصغير الصورة شوية ===== */
@media (min-width: 861px){
  .estrha-team-wrap .tm-portrait{
    width: min(220px, 65%) !important;   /* أصغر من 260px */
    margin: 4px auto 14px !important;
  }
  .estrha-team-wrap .tm-portrait img{
    width: 74% !important;
    height: 74% !important;
  }
}

/* ===== Estrha Team – Layout override ===== */

/* 1) الغي أي flex/slider وخليها دايمًا grid */
.estrha-team-wrap .tm-list ul{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;  /* ديسكتوب: 3 في الصف */
  gap: clamp(18px, 3vw, 32px) !important;
}

/* 2) موبايل / تابلت: خليها 2 في الصف (حتى الشاشات الصغيرة) */
@media (max-width: 860px){
  .estrha-team-wrap .tm-list ul{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 3) لو الجافاسكربت بيضيف is-hidden للكروت – نخليها تظهر برضه */
.estrha-team-wrap .tm-item.is-hidden{
  display: block !important;
}

/* 4) إخفاء الأسهم نهائيًا */
.estrha-team-wrap .tm-arrows{
  display: none !important;
}

/* 5) تصغير الصورة شوية في الموبايل عشان الكروت اللي جنب بعض تبقى متناسقة */
@media (max-width: 860px){
  .estrha-team-wrap .tm-portrait{
    width: min(150px, 70%) !important;
    margin: 4px auto 10px !important;
  }
  .estrha-team-wrap .tm-portrait img{
    width: 80% !important;
    height: 80% !important;
  }
}