*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #f7f6f3; --surface: #ffffff; --surface2: #f1f0ec;
    --border: rgba(0,0,0,0.1); --border2: rgba(0,0,0,0.18);
    --text: #1a1a18; --text2: #6b6b68; --text3: #9a9a96;
    --primary: #0f6e56; --primary-light: #e1f5ee;
    --gov: #185fa5; --gov-light: #e6f1fb;
    --priv: #854f0b; --priv-light: #faeeda;
    --active: #3b6d11; --active-light: #eaf3de;
    --expired: #a32d2d; --expired-light: #fcebeb;
    --new-c: #534ab7; --new-light: #eeedfe;
    --radius: 10px; --radius-sm: 6px;
  }
  body { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; direction: rtl; }
  .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
  .kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin-bottom: 1.2rem; }
  .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; position: relative; overflow: hidden; }
  .kpi-card::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--accent, var(--primary)); border-radius: 0 var(--radius) var(--radius) 0; }
  .kpi-label { font-size: 11px; color: var(--text2); margin-bottom: 4px; }
  .kpi-value { font-size: 24px; font-weight: 700; color: var(--accent, var(--primary)); }
  .toolbar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
  .toolbar input, .toolbar select { font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border2); background: var(--bg); color: var(--text); direction: rtl; outline: none; }
  .toolbar input { flex: 1; min-width: 160px; }
  .toolbar input:focus, .toolbar select:focus { border-color: var(--primary); }
  .toolbar label { font-size: 12px; color: var(--text2); white-space: nowrap; }
  .charts-row { display: grid; grid-template-columns: 300px 1fr; gap: 10px; margin-bottom: 1.2rem; }
  .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
  .chart-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
  .chart-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text2); }
  .legend-item { display: flex; align-items: center; gap: 4px; }
  .legend-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
  .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.2rem; }
  .table-header { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
  .table-header h3 { font-size: 13px; font-weight: 600; }
  .table-header .count { font-size: 12px; color: var(--text2); }
  table { width: 100%; border-collapse: collapse; font-size: 12px; }
  thead th { padding: 9px 12px; text-align: right; font-weight: 600; font-size: 11px; color: var(--text2); background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap; }
  tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: var(--surface2); }
  tbody tr.selected { background: #e8f4f1; }
  td { padding: 10px 12px; vertical-align: middle; }
  .td-name { font-weight: 500; }
  .td-num { text-align: center; font-weight: 600; }
  .badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
  .detail-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 1.2rem; display: none; }
  .detail-panel.show { display: block; }
  .detail-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
  .detail-meta { font-size: 12px; color: var(--text2); margin-bottom: 12px; }
  .detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
  .detail-stat { background: var(--surface2); border-radius: var(--radius-sm); padding: 10px 12px; }
  .detail-stat-label { font-size: 11px; color: var(--text2); margin-bottom: 3px; }
  .detail-stat-val { font-size: 16px; font-weight: 700; color: var(--text); }
  .detail-section { margin-bottom: 10px; }
  .detail-section-title { font-size: 11px; font-weight: 700; color: var(--text2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
  .detail-section-body { font-size: 13px; line-height: 1.6; color: var(--text); background: var(--surface2); border-radius: var(--radius-sm); padding: 10px 12px; }
  .close-detail-btn { background: none; border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--text2); }
  .close-detail-btn:hover { background: var(--surface2); }
  @media(max-width:700px){.kpi-grid{grid-template-columns:repeat(2,1fr);}.charts-row{grid-template-columns:1fr;}.detail-stats{grid-template-columns:repeat(2,1fr);}}
/* <\/style>
<\/head>
<body>
<div class="container">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
    <div>
      <h1 style="font-size:18px;font-weight:800;color:var(--primary);">🔗 قاعدة بيانات شراكات الكلية التطبيقية</h1>
      <p style="font-size:12px;color:var(--text2);margin-top:3px;">الكلية التطبيقية — جامعة المجمعة · المحور الخامس / المجال الأول</p>
    </div>
  </div>

  <div class="kpi-grid" id="kpiGrid"></div>

  <div class="toolbar">
    <input type="search" id="search" placeholder="🔍  ابحث عن شريك..." oninput="applyFilters()">
    <label>الحالة</label>
    <select id="statusFilter" onchange="applyFilters()">
      <option value="">الكل</option>
      <option>سارية</option><option>منتهية</option><option>جديدة</option>
    </select>
    <label>القطاع</label>
    <select id="sectorFilter" onchange="applyFilters()">
      <option value="">الكل</option>
      <option>حكومي</option><option>غير حكومي</option>
    </select>
  </div>

  <div class="charts-row">
    <div class="chart-card">
      <h3>توزيع حالات الاتفاقيات</h3>
      <div style="height:160px;"><canvas id="statusChart"></canvas></div>
      <div class="chart-legend" id="statusLegend"></div>
    </div>
    <div class="chart-card">
      <h3>أعلى الشركاء تأثيراً (تدريب + توظيف)</h3>
      <div style="height:180px;"><canvas id="topChart"></canvas></div>
    </div>
  </div>

  <div id="detailPanel" class="detail-panel">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;">
      <div>
        <p class="detail-name" id="dName"></p>
        <p class="detail-meta" id="dMeta"></p>
      </div>
      <button class="close-detail-btn" onclick="closeDetail()">✕ إغلاق</button>
    </div>
    <div class="detail-stats" id="dStats"></div>
    <div class="detail-section" id="dBenWrap"><p class="detail-section-title">المنافع والإنجازات</p><p class="detail-section-body" id="dBen"></p></div>
    <div class="detail-section" id="dEvWrap"><p class="detail-section-title">الفعاليات المشتركة</p><p class="detail-section-body" id="dEv"></p></div>
  </div>

  <div class="table-card">
    <div class="table-header">
      <h3>قائمة الاتفاقيات</h3>
      <span class="count" id="countLabel"></span>
    </div>
    <div style="overflow-x:auto;">
      <table><thead><tr>
        <th>#</th><th>اسم الجهة</th><th>القطاع</th><th>تاريخ التوقيع</th><th>تاريخ الانتهاء</th><th>الحالة</th><th>مستفيدو التدريب</th><th>مستفيدو التوظيف</th>
      </tr></thead>
      <tbody id="tableBody"></tbody></table>
    </div>
  </div>
</div>
<script>
const DB=[
  {id:1,name:'الغرفة التجارية بالمجمعة',sector:'حكومي',signed:'2019-12-09',end:'2022-12-08',status:'منتهية',training:325,employment:10,benefits:'تدريب عدد 325 طالب وطالبة من الكلية، وتوظيف 10 خريجين.',events:''},
  {id:2,name:'مستشفى الملك سعود بالمجمعة',sector:'حكومي',signed:'2021-05-10',end:'2024-05-09',status:'منتهية',training:0,employment:0,benefits:'',events:''},
  {id:3,name:'مستشفى قوى الأمن بالمجمعة',sector:'حكومي',signed:'2021-06-01',end:'2024-05-31',status:'منتهية',training:0,employment:0,benefits:'',events:''},
  {id:4,name:'شركة التنمية المعلوماتية',sector:'غير حكومي',signed:'2023-05-16',end:'2026-05-15',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:5,name:'الغرفة التجارية بالمجمعة (تجديد)',sector:'حكومي',signed:'2023-05-30',end:'2026-05-29',status:'سارية',training:275,employment:0,benefits:'تدريب ميداني لعدد 275 طالباً وطالبة.',events:''},
  {id:6,name:'مستشفى الأمل للصحة النفسية بالرياض',sector:'حكومي',signed:'2023-06-21',end:'2026-06-20',status:'سارية',training:15,employment:0,benefits:'تدريب 15 طالبة في مجال الخدمة النفسية والاجتماعية.',events:''},
  {id:7,name:'الجمعية السعودية لطب الأسرة والمجتمع',sector:'غير حكومي',signed:'2023-08-14',end:'2026-08-13',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:8,name:'إمارة منطقة الرياض — محافظة المجمعة',sector:'حكومي',signed:'2023-09-20',end:'2026-09-19',status:'سارية',training:0,employment:0,benefits:'',events:'إقامة ورشة عمل استراتيجية مشتركة.'},
  {id:9,name:'مدارس الرواد الأهلية',sector:'غير حكومي',signed:'2024-01-14',end:'2027-01-13',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:10,name:'الكلية التطبيقية بجامعة جدة',sector:'حكومي',signed:'2024-02-19',end:'2025-02-18',status:'منتهية',training:0,employment:0,benefits:'',events:''},
  {id:11,name:'شركة أسواق عبدالله العثيم',sector:'غير حكومي',signed:'2024-06-03',end:'2026-07-03',status:'منتهية',training:70,employment:7,benefits:'',events:''},
  {id:12,name:'شركة الاختيار الآمن للخدمات اللوجستية',sector:'غير حكومي',signed:'2024-04-17',end:'2027-06-16',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:13,name:'الاتحاد السعودي للثقافة الرياضية',sector:'حكومي',signed:'2024-05-13',end:'2027-12-05',status:'سارية',training:22,employment:0,benefits:'تنفيذ برنامج دبلوم الثقافة الرياضية ودبلوم الإدارة الرياضية والترويحية لعدد 37 مستفيداً.',events:''},
  {id:14,name:'شركة نمو العالي للتدريب والتعليم',sector:'غير حكومي',signed:'2024-06-03',end:'2026-02-06',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:15,name:'المركز الوطني لتنمية القطاع غير الربحي',sector:'غير حكومي',signed:'2024-09-04',end:'2027-09-03',status:'سارية',training:0,employment:0,benefits:'جاري العمل على تنفيذ برنامج دبلوم إدارة المنظمات غير الربحية لعدد 40 مستفيداً.',events:''},
  {id:16,name:'شركة صفا للاستثمار',sector:'غير حكومي',signed:'2024-11-11',end:'2027-10-11',status:'سارية',training:8,employment:0,benefits:'تدريب وتوظيف عدد من طلاب الكلية لعدد 8 مستفيدين.',events:''},
  {id:17,name:'المركز الوطني لتنمية الغطاء النباتي ومكافحة التصحر',sector:'حكومي',signed:'2024-12-05',end:'2027-12-04',status:'سارية',training:0,employment:0,benefits:'المشاركة في الفعاليات لعدد 470 مستفيداً.',events:''},
  {id:18,name:'مؤسسة سعي الوقفية لتأهيل وتوظيف الأشخاص ذوي الإعاقة',sector:'غير حكومي',signed:'2025-02-05',end:'2027-04-12',status:'سارية',training:0,employment:0,benefits:'الموافقة على تدريب طلاب دبلوم الإدارة لذوي الإعاقة لعدد 25 مستفيداً. جاري تنفيذ دبلوم الإدارة لذوي الإعاقة.',events:'المشاركة في ملتقى شركاء النجاح.'},
  {id:19,name:'مركز عبدالرحمن السديري الثقافي',sector:'غير حكومي',signed:'2025-04-23',end:'2028-04-22',status:'سارية',training:70,employment:0,benefits:'تنفيذ دورة اللغة الإنجليزية بالصيف للذكور والإناث بعدد 30 ساعة تدريبية لعدد 70 مستفيداً.',events:''},
  {id:20,name:'المعهد الوطني للتدريب الصناعي',sector:'حكومي',signed:'2025-06-24',end:'2028-06-23',status:'سارية',training:0,employment:0,benefits:'المشاركة في تنفيذ برنامج دبلوم تقنية الهندسة الصناعية.',events:''},
  {id:21,name:'الأكاديمية الوطنية للطاقة',sector:'حكومي',signed:'2025-06-24',end:'2028-06-23',status:'سارية',training:0,employment:0,benefits:'المشاركة في تنفيذ برنامج دبلوم تقنية الهندسة الصناعية.',events:''},
  {id:22,name:'شركة الدواء للخدمات الطبية',sector:'غير حكومي',signed:'2025-10-13',end:'2028-12-10',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:23,name:'نادي الفيحاء الرياضي',sector:'غير حكومي',signed:'2025-10-20',end:'2028-10-09',status:'سارية',training:33,employment:0,benefits:'تنفيذ ورشة الحوكمة في القطاع الرياضي لعدد 15 مستفيداً. ورشة تحسين كفاءة الأداء الوظيفي لعدد 18 مستفيداً.',events:''},
  {id:24,name:'جمعية سواعد بالمجمعة',sector:'غير حكومي',signed:'2025-10-20',end:'2028-10-09',status:'سارية',training:40,employment:0,benefits:'جاري العمل على تنفيذ برنامج دبلوم تنمية الموارد المالية للمنظمات غير الربحية لعدد 40 مستفيداً.',events:''},
  {id:25,name:'شركة تنمية الإنسان',sector:'غير حكومي',signed:'2025-11-02',end:'2028-11-01',status:'سارية',training:100,employment:0,benefits:'جاري العمل على تنفيذ برنامج دبلوم الإدارة لذوي الإعاقة لعدد 100 مستفيداً.',events:''},
  {id:26,name:'الغرفة التجارية بالزلفي',sector:'حكومي',signed:'2025-11-05',end:'2028-11-04',status:'سارية',training:0,employment:0,benefits:'تدريب طلبة الكلية 75 حالياً و250 سابقاً. ورشة بوابتك نحو العمل التجاري. ورشة الاستعداد للمقابلة الشخصية. ورشة الإتيكيت والبروتوكول السعودي.',events:''},
  {id:27,name:'شركة نشرة محاسبون ومراجعون قانونيون',sector:'غير حكومي',signed:'2025-12-11',end:'2028-11-11',status:'جديدة',training:0,employment:0,benefits:'',events:''},
  {id:28,name:'شركة المتكاملة لصناعة الكابل والألياف البصرية',sector:'غير حكومي',signed:'2025-12-08',end:'2028-12-07',status:'جديدة',training:0,employment:0,benefits:'',events:''},
  {id:29,name:'شركة كومل',sector:'غير حكومي',signed:'2025-12-08',end:'2028-12-07',status:'جديدة',training:0,employment:0,benefits:'توقيع اتفاقية تدريب وفرص توظيف مشروطة لطلبة الكلية بعد التخرج لعدد 26 مستفيداً.',events:''},
];
let filtered=[...DB],selectedId=null,statusChart=null,topChart=null;
function fmtDate(s){if(!s)return'—';const d=new Date(s);if(isNaN(d))return s;return d.toLocaleDateString('ar-SA-u-nu-latn',{year:'numeric',month:'2-digit',day:'2-digit'});}
function statusBadge(s){const m={سارية:{bg:'#eaf3de',c:'#3b6d11'},منتهية:{bg:'#fcebeb',c:'#a32d2d'},جديدة:{bg:'#eeedfe',c:'#534ab7'}};const{bg,c}=m[s]||{bg:'#eee',c:'#888'};return\`<span class="badge" style="background:\${bg};color:\${c};">\${s}<\/span>\`;}
function sectorBadge(s){const g=s==='حكومي';return\`<span class="badge" style="background:\${g?'#e6f1fb':'#faeeda'};color:\${g?'#185fa5':'#854f0b'};">\${s}<\/span>\`;}
function renderKPIs(){const t=filtered.length,a=filtered.filter(d=>d.status==='سارية').length,e=filtered.filter(d=>d.status==='منتهية').length,tr=filtered.reduce((a,d)=>a+d.training,0),em=filtered.reduce((a,d)=>a+d.employment,0);document.getElementById('kpiGrid').innerHTML=[{label:'إجمالي الاتفاقيات',val:t,color:'#0f6e56'},{label:'اتفاقيات سارية',val:a,color:'#3b6d11'},{label:'اتفاقيات منتهية',val:e,color:'#a32d2d'},{label:'مستفيدو التدريب',val:tr,color:'#185fa5'},{label:'مستفيدو التوظيف',val:em,color:'#854f0b'}].map(k=>\`<div class="kpi-card" style="--accent:\${k.color}"><p class="kpi-label">\${k.label}<\/p><p class="kpi-value">\${k.val}<\/p><\/div>\`).join('');}
function renderTable(){document.getElementById('countLabel').textContent=\`\${filtered.length} اتفاقية\`;document.getElementById('tableBody').innerHTML=filtered.map(d=>\`<tr onclick="showDetail(\${d.id})" class="\${selectedId===d.id?'selected':''}"><td style="color:#9a9a96;font-size:11px;">\${d.id}<\/td><td class="td-name">\${d.name}<\/td><td>\${sectorBadge(d.sector)}<\/td><td style="color:#6b6b68;font-size:11px;">\${fmtDate(d.signed)}<\/td><td style="color:#6b6b68;font-size:11px;">\${fmtDate(d.end)}<\/td><td>\${statusBadge(d.status)}<\/td><td class="td-num" style="color:#185fa5;">\${d.training||'—'}<\/td><td class="td-num" style="color:#3b6d11;">\${d.employment||'—'}<\/td><\/tr>\`).join('');}
function renderCharts(){const sc={سارية:0,منتهية:0,جديدة:0};filtered.forEach(d=>sc[d.status]++);if(statusChart)statusChart.destroy();statusChart=new Chart(document.getElementById('statusChart'),{type:'doughnut',data:{labels:['سارية','منتهية','جديدة'],datasets:[{data:[sc.سارية,sc.منتهية,sc.جديدة],backgroundColor:['#3b6d11','#a32d2d','#534ab7'],borderWidth:2,borderColor:'#fff'}]},options:{responsive:true,maintainAspectRatio:false,cutout:'65%',plugins:{legend:{display:false}}}});document.getElementById('statusLegend').innerHTML=[{l:\`سارية: \${sc.سارية}\`,c:'#3b6d11'},{l:\`منتهية: \${sc.منتهية}\`,c:'#a32d2d'},{l:\`جديدة: \${sc.جديدة}\`,c:'#534ab7'}].map(x=>\`<div class="legend-item"><div class="legend-dot" style="background:\${x.c};"><\/div>\${x.l}<\/div>\`).join('');const top5=[...filtered].sort((a,b)=>(b.training+b.employment)-(a.training+a.employment)).slice(0,5);if(topChart)topChart.destroy();topChart=new Chart(document.getElementById('topChart'),{type:'bar',data:{labels:top5.map(d=>d.name.length>12?d.name.slice(0,12)+'…':d.name),datasets:[{label:'تدريب',data:top5.map(d=>d.training),backgroundColor:'#185fa5',borderRadius:4},{label:'توظيف',data:top5.map(d=>d.employment),backgroundColor:'#3b6d11',borderRadius:4}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{x:{ticks:{font:{size:10},color:'#6b6b68'},grid:{display:false}},y:{ticks:{font:{size:10},color:'#6b6b68'},grid:{color:'rgba(0,0,0,0.06)'}}}}});}
function applyFilters(){const s=document.getElementById('search').value.toLowerCase(),st=document.getElementById('statusFilter').value,se=document.getElementById('sectorFilter').value;filtered=DB.filter(d=>(!s||d.name.toLowerCase().includes(s))&&(!st||d.status===st)&&(!se||d.sector===se));selectedId=null;closeDetail();renderKPIs();renderTable();renderCharts();}
function showDetail(id){const d=DB.find(x=>x.id===id);if(!d)return;selectedId=id;document.getElementById('dName').textContent=d.name;document.getElementById('dMeta').textContent=\`\${d.sector} · اتفاقية رقم \${d.id} · \${statusLabels(d.status)}\`;document.getElementById('dStats').innerHTML=[{label:'تاريخ التوقيع',val:fmtDate(d.signed)},{label:'تاريخ الانتهاء',val:fmtDate(d.end)},{label:'مستفيدو التدريب',val:d.training},{label:'مستفيدو التوظيف',val:d.employment}].map(s=>\`<div class="detail-stat"><p class="detail-stat-label">\${s.label}<\/p><p class="detail-stat-val">\${s.val}<\/p><\/div>\`).join('');const bw=document.getElementById('dBenWrap');if(d.benefits){bw.style.display='block';document.getElementById('dBen').textContent=d.benefits;}else bw.style.display='none';const ew=document.getElementById('dEvWrap');if(d.events){ew.style.display='block';document.getElementById('dEv').textContent=d.events;}else ew.style.display='none';const p=document.getElementById('detailPanel');p.classList.add('show');p.scrollIntoView({behavior:'smooth',block:'nearest'});renderTable();}
function statusLabels(s){return{سارية:'الاتفاقية سارية',منتهية:'الاتفاقية منتهية',جديدة:'اتفاقية جديدة'}[s]||s;}
function closeDetail(){document.getElementById('detailPanel').classList.remove('show');selectedId=null;renderTable();}
renderKPIs();renderTable();renderCharts();
<\/script>
<\/body>
<\/html>`;
</script>

<!-- ===== NATGEO PUBLISHER MODAL ===== -->
<style> */
#natGeoModal {
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:20px;
}
#natGeoModal.open { display:flex; }
.natgeo-shell {
  background:#f5f9fc;border-radius:16px;max-width:700px;width:100%;
  box-shadow:0 20px 80px rgba(0,0,0,.6);
  overflow:hidden;
  animation:pdbSlideIn .28s cubic-bezier(.22,.68,0,1.2);
}
.natgeo-topbar {
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#006B99,#0089C3);padding:14px 20px;
}
.natgeo-topbar-title {
  font-family:'Tajawal',Tahoma,sans-serif;font-size:15px;font-weight:800;color:#fff;
  display:flex;align-items:center;gap:8px;
}
.natgeo-close-btn {
  background:rgba(255,255,255,.18);border:none;color:#fff;font-size:20px;
  width:34px;height:34px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.natgeo-close-btn:hover{background:rgba(255,255,255,.30);}
.natgeo-body {
  padding:24px;text-align:center;
}
.natgeo-img-wrap {
  background:#ffffff;border-radius:12px;padding:32px 48px;margin-bottom:16px;
  display:flex;justify-content:center;align-items:center;box-shadow:0 2px 16px rgba(0,107,153,.10);
}
.natgeo-img {
  max-width:100%;width:auto;height:auto;display:block;object-fit:contain;mix-blend-mode:multiply;
}
.natgeo-desc {
  font-family:'Tajawal',Tahoma,sans-serif;color:#3a5566;font-size:14px;line-height:1.7;margin-bottom:6px;
}