/* ضبط عامddd */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Cairo', sans-serif;
  background: #fff;
  color: #003366;
  direction: rtl;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* إضافة هامش أعلى وأسفل للـ main في كل الصفحات */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  background: #eef6fc;
  width: 100%;
}

/* شريط علوي */
.navbar {
  height: 65px;
  background: #0060c2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  z-index: 1000;
  position: relative;
}

.navbar ul {
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  margin: 0 10px;
}

/* الشعار والخط قبل "الرئيسية" */
#main-nav .logo-item {
  display: flex;
  align-items: center;
}

#main-nav .logo-item .logo {
  height: 35px;
  margin-left: 10px;
}

#main-nav .logo-item .divider {
  width: 1px;
  height: 25px;
  background-color: white;
  margin-left: 10px;
}

.navbar a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.1rem;
}

.navbar a:hover {
  text-decoration: underline;
}

/* زر الهامبرغر */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background: white;
  border-radius: 2px;
}

/* الفوتر */
footer {
  background: #0060c2;
  text-align: center;
  color: white;
  padding: 20px 10px;
  width: 100%;
  box-sizing: border-box;
  z-index: 500;
}
.footer-social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}
.footer-social-icons a {
  color: #fff;
  font-size: 1.8rem;
  transition: transform 0.2s;
}
.footer-social-icons a:hover {
  transform: scale(1.2);
}

/* تصميم القائمة على الموبايل */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
    margin-right: auto;
  }

  #main-nav {
    position: absolute;
    top: 65px;
    right: 0;
    background: #0060c2;
    flex-direction: column;
    width: 100%;
    display: none;
  }

  #main-nav li {
    margin: 15px 0;
    text-align: center;
  }

  #main-nav.show {
    display: flex;
  }
}

/* تصميم صندوق القسم الداخلي */
.section-bg {
  background: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  margin: 24px 0;
  min-height: 70vh;
}

.section-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px #0052a320;
  max-width: 1000px;
  width: 100%;
  padding: 32px 24px;
  text-align: center;
  margin: 0 auto 30px auto;
}

.section-box h2 {
  color: #0070e0;
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: -1px;
}

/* نصوص الأقسام */
.section-box p,
.section-box label {
  color: #003366;
  font-size: 1.15rem;
  font-weight: 500;
}

/* نموذج التحقق من الشهادة */
.section-box input[type="text"] {
  font-size: 1.18rem;
  border-radius: 10px;
  border: 2px solid #0070e0;
  padding: 12px 20px;
  margin: 18px 0 8px 0;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.section-box input[type="text"]:focus {
  outline: none;
  border-color: #0052a3;
  background: #eef6fc;
}

/* زر التحقق */
.section-box .cta-btn {
  background: #0070e0;
  color: #fff;
  font-weight: bold;
  font-size: 1.25rem;
  border-radius: 32px;
  border: none;
  padding: 12px 38px;
  margin: 18px 0 0 0;
  cursor: pointer;
  box-shadow: 0 4px 20px #0052a330;
  transition: background 0.2s, box-shadow 0.2s;
}
.section-box .cta-btn:hover {
  background: #0052a3;
  box-shadow: 0 2px 16px #0052a350;
}

/* نتيجة التحقق */
.verify-result {
  font-size: 1.1rem;
  color: #0052a3;
  margin-top: 20px;
  font-weight: 600;
}

/* روابط التواصل */
.section-box a {
  color: #0070e0;
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: underline;
  word-break: break-all;
  display: inline-block;
  margin-top: 10px;
}
.section-box a:hover {
  color: #0052a3;
}

/* Responsive - استجابة للجوال */
@media (max-width: 600px) {
  .section-box {
    padding: 16px 4px;
    font-size: 1rem;
    max-width: 98%;
  }
  .section-box h2 { font-size: 1.3rem; }
  .section-box input[type="text"] {
    font-size: 1rem;
    padding: 10px;
  }
  .section-box .cta-btn {
    font-size: 1rem;
    padding: 10px 24px;
  }
}

/* نموذج انتساب ملهم - تنسيق */
.join-form-container {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px #0052a320;
  overflow: hidden;
  padding: 0;
}

.join-form-header {
  padding: 24px 32px;
  border-bottom: 1px solid #eef4fb;
  background: linear-gradient(90deg,#f8fbff 0%, #f8fbff 100%);
}
.join-form-header h1 {
  margin: 0;
  font-size: 2rem;
  color: #0070e0;
  font-weight: 900;
}
.join-form-header p {
  margin: 10px 0 0 0;
  color: #395b7a;
  font-size: 1.15rem;
  font-weight: 500;
}

.join-form {
  padding: 24px 32px;
  display: grid;
  gap: 18px;
}
.join-form .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.join-form label {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #003366;
  font-weight: 500;
}
.join-form input[type="text"],
.join-form input[type="number"],
.join-form input[type="tel"],
.join-form select,
.join-form textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #d7e7f6;
  border-radius: 10px;
  font-size: 1.05rem;
  background: #f7fbff;
  transition: border-color 0.2s;
  font-family: 'Cairo', sans-serif;
}
.join-form input:focus,
.join-form select:focus,
.join-form textarea:focus {
  outline: none;
  border-color: #0070e0;
  background: #eef6fc;
}

.join-form textarea {
  min-height: 90px;
  resize: vertical;
}

.join-form .full {
  grid-column: 1 / -1;
}

.join-form .options {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
.join-form .options label {
  font-size: 1rem;
  font-weight: 400;
  background: #eef6fc;
  border-radius: 7px;
  padding: 5px 13px;
  cursor: pointer;
  border: 1px solid #d7e7f6;
  transition: background 0.2s, border-color 0.2s;
}
.join-form .options input[type="checkbox"] {
  margin-left: 5px;
}

.join-form .actions {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}
.join-form button[type="submit"] {
  background: #0070e0;
  color: white;
  padding: 11px 20px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 1.13rem;
  font-weight: bold;
  box-shadow: 0 4px 20px #0052a330;
  transition: background 0.2s, box-shadow 0.2s;
}
.join-form button[type="submit"]:hover {
  background: #0052a3;
  box-shadow: 0 2px 16px #0052a350;
}
.join-form .note {
  font-size: 1rem;
  color: #6b879d;
  margin-right: 10px;
}

/* Responsive */
@media (max-width: 700px) {
  .join-form-container {
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 2px 16px #0052a320;
    max-width: 99vw;
  }
  .join-form-header, .join-form {
    padding: 14px 6px;
  }
  .join-form .row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .join-form .options {
    gap: 8px;
  }
  .join-form button[type="submit"] {
    font-size: 1rem;
    padding: 9px 16px;
  }
  .join-form label, .join-form-header h1, .join-form-header p {
    font-size: 1rem !important;
  }
}

/* صفحة الهيرو الرئيسية */
.hero {
  background: url('background.png') no-repeat center center;
  background-size: cover;
  min-height: 82vh;
  margin: -50px 0;
  width: 100%;
  position: relative;
}

.hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: inherit;
  z-index: 2;
  position: relative;
}

.hero-content .logo {
  width: 200px;
  margin-bottom: 10px;
}
.subtitle {
  color: #0a59a4;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 10px;
}
.main-title {
  font-size: 5rem;
  font-weight: 900;
  color: #0052a3;
  margin-bottom: 10px;
}
.hero p {
  color: #00418b;
  font-size: 1.2rem;
}

/* قسم أعضاء الفريق */
.team-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}
.team-row {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}
.team-member {
  background: #f8fbff;
  border-radius: 16px;
  box-shadow: 0 2px 16px #0052a320;
  padding: 18px 13px 10px 13px;
  min-width: 140px;
  max-width: 180px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team-photo {
  width: 70px;
  height: 70px;
  background: #e7eaf3;
  border-radius: 50%;
  margin-bottom: 10px;
  background-size: cover;
  background-position: center;
  border: 2px solid #0070e0;
}

/* صور أعضاء الفريق */
.photo-hanadi-altelawi   { background-image: url('images/team/hanadi-altelawi.jpg'); }
.photo-ali-odeh      { background-image: url('images/team/ali-odeh.jpg'); }
.photo-raneem-badandi { background-image: url('images/team/raneem-badandi.jpg'); }
.photo-olfat-sawan   { background-image: url('images/team/olfat-sawan.jpg'); }
.photo-mohammad-attili { background-image: url('images/team/mohammad-attili.jpg'); }
.photo-wafa-hamayer  { background-image: url('images/team/wafa-hamayer.jpg'); }
.photo-saja-shaheen { background-image: url('images/team/saja-shaheen.jpg'); }
.photo-mohammad-odeh { background-image: url('images/team/mohammad-odeh.jpg'); }
.photo-batla-raie  { background-image: url('images/team/batla-raie.jpg'); }
.photo-mohamed-atta { background-image: url('images/team/mohamed-atta.jpg'); }
.photo-mohammad-kouz { background-image: url('images/team/mohammad-kouz.jpg'); }

.team-name {
  font-weight: 800;
  color: #0052a3;
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.team-role {
  color: #395b7a;
  font-size: 0.98rem;
  font-weight: 500;
}

/* ==== تفاعل بطاقات الفريق ==== */
.team-member {
  position: relative;
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
  overflow: hidden;
}

/* الحالة النشطة عند اللمس/النقر */
.team-member.active {
  background: #0070e0;
  color: #fff;
  transform: scale(1.03);
}

/* اخفاء النبذة افتراضياً */
.team-member .team-info {
  display: none;
  text-align: center;
  margin-top: 10px;
  color: #fff;
}

/* اظهار النبذة والروابط عند التفعيل */
.team-member.active .team-info {
  display: block;
  animation: fadeIn 0.28s ease;
}

/* اخفاء الاسم والوظيفة عند التفعيل + تحسين إطار الصورة */
.team-member.active .team-name,
.team-member.active .team-role { display: none; }
.team-member.active .team-photo { border-color: #fff; }

/* روابط التواصل */
.social-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.social-links a {
  color: #fff;
  font-size: 1.2rem;
  transition: transform 0.18s ease;
}
.social-links a:hover { transform: scale(1.15); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* Responsive */
@media (max-width: 900px) {
  .team-row {
    gap: 16px;
  }
  .team-member {
    min-width: 120px;
    max-width: 145px;
    padding: 13px 6px 8px 6px;
  }
  .team-name {
    font-size: 0.96rem;
  }
  .team-role {
    font-size: 0.88rem;
  }
}
@media (max-width: 600px) {
  .team-row {
    gap: 12px;
  }
  .team-member {
    max-width: 90vw;
    padding: 9px 2px 5px 2px;
  }
}



/* ===== Mulhem Chat Widget — Chatbase-like ===== */
:root{
  --mulhem-blue:#1e73be;      /* أزرق الهيدر */
  --mulhem-blue-2:#0ea5e9;    /* أزرق الفقاعة/الأزرار */
  --mulhem-user:#1e73be;      /* لون فقاعة المستخدم */
  --mulhem-user-text:#fff;
  --mulhem-assist-bg:#ffffff; /* فقاعة المساعد */
  --mulhem-bg:#f2f6ff;        /* خلفية نافذة المحادثة */
  --mulhem-shadow:0 18px 48px rgba(0,0,0,.18);
  --mulhem-font:"Cairo", system-ui, -apple-system, Segoe UI, Tahoma, Arial, sans-serif;
}

/* زر الفقاعة */
.bot-fab{
  position:fixed; right:20px; bottom:20px; z-index:2147483647;
  width:58px; height:58px; border-radius:50%;
  background:var(--mulhem-blue-2); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(14,165,233,.35); cursor:pointer; user-select:none; font-family:var(--mulhem-font);
}

/* نافذة المحادثة */
.bot-panel{
  position:fixed; right:20px; bottom:90px; z-index:2147483647;
  width:min(380px, calc(100vw - 40px));
  background:#fff; border:0; border-radius:18px; overflow:hidden;
  box-shadow:var(--mulhem-shadow); display:none; flex-direction:column; font-family:var(--mulhem-font);
}

/* الهيدر */
.bot-header{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; color:#fff; font-weight:800; font-size:15px;
  background:linear-gradient(180deg, var(--mulhem-blue) 0%, #1669b4 100%);
  border-bottom:0;
}
.bot-header .logo{
  width:28px; height:28px; border-radius:50%; overflow:hidden; flex:0 0 28px;
  background:#fff; display:flex; align-items:center; justify-content:center;
}
.bot-header .title{ margin-inline-start:2px; letter-spacing:.3px; }

/* منطقة الرسائل */
.bot-messages{
  padding:14px 14px 8px; height:420px; overflow:auto; background:var(--mulhem-bg);
}

/* الفقاعات */
.bot-msg{
  margin:8px 0; max-width:82%; padding:11px 13px; border-radius:14px;
  line-height:1.6; white-space:pre-wrap; word-break:break-word; font-size:14.5px;
}

/* المستخدم: يمين/أزرق */
.bot-msg.user{
  margin-left:auto; direction:rtl; color:var(--mulhem-user-text);
  background:var(--mulhem-user);
  box-shadow:0 8px 18px rgba(30,115,190,.25);
}

/* المساعد: يسار/أبيض مع ظل خفيف */
.bot-msg.assistant{
  margin-right:auto; direction:rtl; color:#0f172a;
  background:var(--mulhem-assist-bg); border:1px solid #eef1f6;
  box-shadow:0 8px 18px rgba(2,6,23,.06);
}

/* شريط الإدخال */
.bot-input{
  display:flex; align-items:center; gap:8px; padding:12px; background:#fff; border-top:1px solid #eef1f6;
}
.bot-input input{
  flex:1; background:#f1f5f9; border:1px solid #e5e7eb; border-radius:999px; padding:12px 14px; outline:none;
  font-size:14.5px;
}
.bot-input input:focus{ border-color:#c7d2fe; background:#f8fbff; }
.bot-input button{
  border:0; border-radius:999px; padding:12px 18px; font-weight:700; font-size:14px; cursor:pointer;
  background:#22c55e; color:#fff; box-shadow:0 8px 18px rgba(34,197,94,.35);
}
.bot-input button:hover{ filter:brightness(.95); }

/* سكرول أنيق */
.bot-messages::-webkit-scrollbar{ width:10px; }
.bot-messages::-webkit-scrollbar-thumb{ background:#d9e2f4; border-radius:8px; }

/* RTL أساسًا */
.bot-panel, .bot-messages, .bot-input, .bot-msg{ direction:rtl; }

/* الفرص */

.section-box .note{
  background:#f4f6f8;border:1px solid #e6ebf0;border-radius:10px;
  padding:10px 14px;margin:10px 0 16px;font-size:.95rem;color:#333333
}

.filters{display:flex;align-items:center;gap:10px;margin:10px 0 14px}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px;
}
.cards-grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: (50%);
}
.activity-card{
  background:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;display:flex;flex-direction:column
}
.activity-card.is-expired{opacity:.70}

.activity-card .thumb img{width:100%;height:190px;object-fit:cover;display:block}
.activity-card .body{padding:16px}
.activity-card .title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.activity-card h3{margin:0 0 8px;font-size:1.08rem}
.activity-card .desc{margin:0 0 10px;color:#333;line-height:1.6;max-height:4.6em;overflow:hidden}
.activity-card .meta{
  list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:10px;color:#555;font-size:.93rem
}
.activity-card .meta i{margin-left:6px}

.pill{
  font-size:.75rem;font-weight:700;line-height:1; padding:6px 8px;border-radius:999px;
  background:#eef2ff;border:1px solid #dfe6ff;white-space:nowrap
}
.pill-closed{background:#fdecec;border-color:#ffd8d8;color:#9c2b2b}

.activity-card .btn{
  display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;
  font-weight:700;border:1px solid #d9dde3;background:#fff;transition:.15s
}
.activity-card .btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.08)}

@media (max-width: 600px) {
  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .activity-card {
    margin: 0 4px;
  }
}