/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: Tahoma, Arial, sans-serif; color: #1d1d1d; }

/* ---------- Navbar ---------- */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

:root{
  --nav-bg:#ffffff;
  --nav-border:#e8eef7;
  --text:#0f172a;
  --muted:#667085;
  --brand:#0a4aad;
  --pill:#f4f7ff;
  --shadow:0 10px 28px rgba(16,24,40,.08);
}

.site-nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);border-bottom:1px solid var(--nav-border)}
.site-nav .nav-inner{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}

.nav-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-right{display:flex;align-items:center;gap:12px}
.brand{font-weight:900;color:var(--brand)}
.theme-btn,.menu-icon{border:1px solid var(--nav-border);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}
.theme-btn:hover,.menu-icon:hover{background:#f9fbff}

.nav-link{appearance:none;border:1px solid var(--nav-border);background:#fff;border-radius:12px;padding:10px 14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.nav-link.is-active{background:var(--pill);border-color:#dfe7fb}
.nav-link:hover{background:#f9fbff}
.nav-item{position:relative}

.chevron{font-size:12px;transition:transform .2s ease}

/* Panel */
.dropdown-panel{
  position:absolute;inset-inline-start:0;top:calc(100% + 10px);
  min-width:720px;max-width:min(880px,90vw);
  background:#fff;border:1px solid var(--nav-border);border-radius:16px;
  box-shadow:var(--shadow);padding:14px;display:none
}
.dropdown[data-open] .dropdown-panel{display:block;animation:fadeIn .15s ease-out}
.dropdown[data-open] .chevron{transform:rotate(180deg)}

@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.dropdown-header{font-weight:900;color:#0f1b3b;margin:6px 4px 10px}
.dropdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dropdown-grid.grid-2{grid-template-columns:1fr 1fr}

.drop-card{
  display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--nav-border);
  border-radius:14px;background:#fff;box-shadow:0 0 0 rgba(0,0,0,0);text-decoration:none;color:var(--text)
}
.drop-card:hover{box-shadow:var(--shadow);background:#fcfdff}

.drop-icon{
  width:44px;height:44px;border-radius:12px;background:#f1f5ff;display:flex;align-items:center;justify-content:center;
  color:#2a55e5;font-size:18px;flex:0 0 44px
}
.drop-icon.-crown{background:#fff7e0;color:#e9b200}
.drop-icon.-deal{background:#fff0f0;color:#ef4444}

.drop-body{flex:1 1 auto}
.drop-title{font-weight:900}
.drop-sub{color:var(--muted);font-size:13px;margin-top:2px}

.drop-price{text-align:end;min-width:72px}
.drop-price .old{text-decoration:line-through;color:#94a3b8;display:block}
.drop-price .new{font-weight:900;color:#0a4aad}

.badge{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800;margin-top:6px
}
.badge-gold{background:#fff7d6;color:#c99700;border:1px solid #fde68a}
.badge-blue{background:#eef2ff;color:#334155;border:1px solid #e5e7eb}

/* Mobile */
#menuToggle{display:none}
@media (max-width:900px){
  #menuToggle{display:inline-flex}
  .nav-left{position:fixed;inset-inline:0;top:60px;background:#fff;border-top:1px solid var(--nav-border);
    padding:10px 12px;display:none;flex-direction:column;align-items:stretch;gap:8px}
  .site-nav[data-open] .nav-left{display:flex}
  .dropdown-panel{position:static;min-width:unset;max-width:unset;margin-top:6px}
  .dropdown-grid{
    grid-template-columns: 1fr;   /* عمود واحد */
    gap: 8px;
  }
  .drop-card{
    width: 100%;
  }

  /* تحسين العرض داخل الصف الكامل */
  .drop-body{ min-width: 0; }     /* يمنع التمدد الزائد */
  .drop-title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .drop-price{
    margin-inline-start: auto;    /* يبقى السعر بمحاذاة الطرف الآخر */
    text-align: end;
  }
}

/* Utility */
.is-hidden{display:none}


/* ---------- Offer Banner ---------- */
.offer-banner {
  background:#caa32c; color:#fff; text-align:center; font-weight:700; padding:10px 12px;
}
.offer-banner span { color:#000; }
.offer-btn {
  margin-right:8px; background:#f6e08f; border:none;
  padding:6px 12px; border-radius:6px; font-weight:700; cursor:pointer; text-decoration:none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(rgba(15,52,96,.85), rgba(15,52,96,.85)),
    url('hero-bg.jpg') center/cover no-repeat;
  color:#fff; text-align:center;
  padding: 80px 20px 140px;  /* already there */
  margin-bottom: 120px;      /* NEW: reserve space below for features */
  min-height:500px;
}

/* Extend hero background under features (desktop) */
.hero::after {
  content:""; position:absolute; left:0; right:0;
  bottom:-120px; height:120px;
  background: linear-gradient(rgba(15,52,96,.85), rgba(15,52,96,.85));
  z-index:0;
}

.hero-content { max-width:900px; margin:0 auto; }
.hero h1 { font-size:36px; line-height:1.25; margin-bottom:18px; }
.hero p { font-size:18px; line-height:1.85; margin-bottom:14px; }
.hero .highlight { color:#ffdd59; font-weight:700; margin-bottom: 50px;}

/* ---------- Features (inside hero) ---------- */
.features {
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-70px; width:90%; max-width:1100px;
  display:flex; gap:20px; justify-content:center; flex-wrap:wrap;
  z-index:1;
}
/* 3 cols desktop, fluid cards */
.feature-box {
  flex: 1 1 calc(33.333% - 14px);
  min-width: 260px;  /* prevents squish on large screens */
  text-align:center; padding:28px 20px; border-radius:12px;
  background:rgba(255,255,255,.40);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:transform .2s ease;
}
.feature-box:hover { transform:translateY(-5px); }
.feature-icon { font-size:36px; margin-bottom:10px; color:#ffbf00; }
.feature-box h3 { font-size:18px; color:#ffffff; margin-bottom:8px; }
.feature-box p { font-size:15px; color:#ffffff; line-height:1.7; }

/* ---------- Services Section ---------- */
:root {
  --svc-bg:#f3f5fb; --svc-blue:#1d3557; --svc-blue-acc:#2f5ea7;
  --svc-gold:#e7b73a; --svc-text:#0f172a; --svc-muted:#475569;
  --svc-cta:#0b1324; --svc-radius-xl:22px; --svc-radius-lg:16px;
  --svc-shadow:0 12px 28px rgba(0,0,0,.10);
}
.svc-wrap { background:var(--svc-bg); padding:56px 16px 72px; }
.svc-container { max-width:1400px; margin:0 auto; }
.svc-head { text-align:center; margin-bottom:28px; }
.svc-head h2 { color:var(--svc-blue); font-size:clamp(24px,3.3vw,40px); font-weight:800; }
.svc-underline {
  display:inline-block; width:64px; height:4px; background:var(--svc-blue-acc);
  border-radius:999px; margin:10px auto 14px;
}
.svc-sub { color:var(--svc-muted); font-size:clamp(15px,2.1vw,20px); line-height:1.9; }
.svc-gold {
  background:var(--svc-gold); border-radius:var(--svc-radius-xl);
  padding:clamp(18px,3vw,34px); box-shadow:var(--svc-shadow); margin-top:28px;
}
.svc-gold-title {
  text-align:center; color:#0b0b0b;
  font-size:clamp(20px,2.6vw,32px); font-weight:800; margin-bottom:18px;
}
.svc-gold-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch;
}
.svc-card {
  background:rgba(255,255,255,.45); border-radius:var(--svc-radius-lg);
  padding:clamp(14px,2.5vw,22px); backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.svc-card-title { color:#111827; font-size:clamp(17px,2.2vw,22px); font-weight:800; margin-bottom:8px; }
.svc-card-text { color:#1f2937; line-height:1.9; font-size:clamp(14px,1.9vw,18px); }
.svc-cta {
  display:block; width:fit-content; margin:18px auto 4px; padding:14px 28px;
  background:var(--svc-cta); color:#fff; text-decoration:none; font-weight:800;
  border-radius:999px; box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.svc-cta:hover { transform:translateY(-2px); box-shadow:0 12px 22px rgba(0,0,0,.22); }

.hero + section,
.hero + .svc-wrap {
  margin-top: 0 !important;  /* no forced overlap spacing */
}

/* ---------- Responsive ---------- */
/* Tablets and down: put features IN-FLOW + 2 columns */
@media (max-width:992px) {
  .features {
    position:static; transform:none;
    width:100%; max-width:1100px; margin-top:22px; margin-bottom:36px;
  }
  .hero { padding:72px 18px 48px; margin-bottom: 0; /* features are in-flow, no extra gap needed */}
  .hero::after { height:0; bottom:0; }     /* no bleed needed when in-flow */
  .feature-box { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .svc-gold-cards { grid-template-columns:repeat(2,1fr); }
}

/* Phones: 1 column features + tighter services */
@media (max-width:640px) {
  .feature-box { flex:1 1 100%; }
  .svc-wrap { padding:40px 12px 56px; }
  .svc-gold { padding:18px 14px; border-radius:18px; }
  .svc-gold-cards { grid-template-columns:1fr; gap:12px; }
  .svc-cta { width:100%; text-align:center; }
}

/* Small phones */
@media (max-width:576px) {
  .navbar { padding:8px 12px; }
  .navbar-left { gap:8px; }
  .menu-icon { font-size:16px; }
  .hero { padding:48px 14px 40px; }
  .hero h1 { font-size:26px; }
  .hero p { font-size:15px; }
  .feature-box { padding:22px 16px; border-radius:10px; }
  .feature-icon { font-size:30px; }
}
@media (max-width:380px) {
  .hero h1 { font-size:23px; }
  .hero p { font-size:14px; }
  .nav-link { padding:4px 8px; }
}

/* ---------- Mobile Menu ---------- */
@media (max-width:768px) {
  .navbar-left {
    display:none; flex-direction:column;
    background:#fff; position:absolute; top:60px; right:0;
    width:100%; padding:12px;
    border-top:1px solid #e5e7eb; box-shadow:0 4px 10px rgba(0,0,0,.1);
    z-index:1000;
  }
  .navbar-left.show { display:flex; }
  .nav-link { padding:10px 0; border-bottom:1px solid #eee; }
}






/* ====== AI Warning Section (RTL friendly) ====== */
:root{
  --ai-bg: #f5f7fb;           /* خلفية الصفحة الفاتحة */
  --ai-text: #0f172a;         /* نص أساسي */
  --ai-muted:#475569;         /* نص ثانوي */
  --ai-red:#ef4444;           /* أحمر أساسي */
  --ai-red-soft:#fee2e2;      /* وردي خفيف للكروت */
  --ai-red-border:#fca5a5;    /* حدود وردية */
  --ai-gold:#f5d36c;          /* ذهبي ناعم للشارات */
  --ai-yellow:#fff6ce;        /* أصفر باهت للملاحظة */
  --ai-yellow-border:#fde68a; /* حد أصفر */
  --ai-card-bg:#fff;          /* خلفية كارت أبيض */
  --ai-radius-xl: 18px;
  --ai-radius-lg: 14px;
  --ai-shadow-soft: 0 10px 22px rgba(15, 23, 42, .06);
}

.aiwarn-wrap{
  background: var(--ai-bg);
  padding: 40px 16px 64px;
}
.aiwarn-container{
  max-width: 1400px;
  margin: 0 auto;
}

/* Head */
.aiwarn-head{
  text-align:center;
  margin-bottom: 18px;
}
.aiwarn-head h2{
  font-weight: 800;
  color: var(--ai-text);
  font-size: clamp(22px, 3.2vw, 36px);
  letter-spacing: .2px;
}
.aiwarn-ico{ margin: 0 .25em; }

.aiwarn-badge-row{
  display:flex; justify-content:center; gap:10px;
  margin-top: 10px;
}
.aiwarn-badge{
  display:inline-flex; align-items:center; gap:.5em;
  background: var(--ai-red-soft);
  color: var(--ai-red);
  border: 1px solid var(--ai-red-border);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--ai-shadow-soft);
}
.aiwarn-badge-ico{ font-size: 14px; }

/* Cases */
.aiwarn-cases{
  background: var(--ai-card-bg);
  border-radius: var(--ai-radius-xl);
  box-shadow: var(--ai-shadow-soft);
  padding: 16px 16px 22px;
  margin-top: 16px;
}
.aiwarn-cases-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 8px 10px;
}
.aiwarn-cases-head h3{
  font-size: clamp(16px, 2.3vw, 20px);
  font-weight: 800;
  color: var(--ai-text);
}
.aiwarn-close{ color:#ef5350; cursor: default; }

.aiwarn-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.aiwarn-card{
  background: #fff7f7;
  border-radius: var(--ai-radius-lg);
  border: 1px solid var(--ai-red-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.aiwarn-card--left-danger{ border-right: 3px solid var(--ai-red); }
.aiwarn-card--right{ }
.aiwarn-card--mid{ }

.aiwarn-card-body{ padding: 16px 16px 14px; }
.aiwarn-card p{ color:#1f2937; line-height:1.9; font-size: clamp(14px, 1.9vw, 16.5px); }
.aiwarn-quote{
  margin-top: 8px; font-style: italic; color:#dc2626;
}
.aiwarn-meta{
  margin-top: 8px; color:#9a1e1e; font-size: 13px; font-weight:700;
}

/* Tools */
.aiwarn-tools{
  background:#fffef7;
  border-radius: var(--ai-radius-xl);
  box-shadow: var(--ai-shadow-soft);
  padding: 22px 18px;
  margin-top: 24px;
}
.aiwarn-tools-head{
  text-align:center; margin-bottom: 10px;
}
.aiwarn-eye{ font-size: 20px; margin-bottom: 4px; }
.aiwarn-tools-head h3{
  font-weight: 800; color: var(--ai-text);
  font-size: clamp(18px, 2.6vw, 24px);
}
.aiwarn-tools-sub{
  color: var(--ai-muted);
  margin-top: 6px; line-height:1.9; font-size: clamp(14px, 1.9vw, 16.5px);
}

.aiwarn-tools-grid{
  display:grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(3, 1fr);
}
.aiwarn-tool{
  background:#fffdf3;
  border:1px solid #fde3a0;
  border-radius: 14px;
  padding: 14px 12px;
}
.aiwarn-tool-title{
  font-weight: 800; color:#111827; margin-bottom: 6px;
  font-size: clamp(15px, 2.1vw, 18px);
}
.aiwarn-tool-text{
  color:#1f2937; line-height:1.8; font-size: 14.5px;
}

/* Note */
.aiwarn-note{
  background: var(--ai-yellow);
  border:1px solid var(--ai-yellow-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 16px;
}
.aiwarn-note-title{
  display:inline-block; font-weight:800; color:#b45309; margin-bottom: 4px;
  background:#fff1b8; border:1px solid #f6d66a; padding: 4px 10px; border-radius:999px;
}
.aiwarn-note-text{ color:#6b4f0b; line-height:1.9; }

/* ===== Responsive ===== */
@media (max-width: 992px){
  .aiwarn-cards{ grid-template-columns: repeat(2, 1fr); }
  .aiwarn-tools-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .aiwarn-wrap{ padding: 32px 12px 48px; }
  .aiwarn-cards{ grid-template-columns: 1fr; }
  .aiwarn-tools-grid{ grid-template-columns: 1fr; }
  .aiwarn-badge-row{ flex-wrap:wrap; }
}

/* ===== Packages Section ===== */
.packages-wrap {
  background:#f9fafc;
  padding:60px 16px;
}
.packages-container { max-width:1400px; margin:0 auto; }

.packages-head { text-align:right; margin-bottom:18px; }
.packages-head h2 {
  font-size:clamp(22px,3vw,28px);
  font-weight:800;
  color:#1d3557;
}
.packages-head span { font-size:20px; margin-right:6px; }
.packages-sub { color:#475569; margin-top:4px; }

/* Grid */
.packages-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  margin-bottom:40px;
}

/* Card */
.package-card {
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  padding:18px;
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  text-align:right;
}
.package-card.highlight { grid-column:span 2; }
.package-img { width:100%; border-radius:12px; margin-bottom:10px; }

/* Ribbon */
.package-ribbon {
  position:absolute; top:12px; left:12px;
  background:#facc15; color:#111;
  padding:3px 10px; border-radius:999px;
  font-size:13px; font-weight:700;
}

/* Title + text */
.package-title {
  font-size:17px; font-weight:700; color:#1d3557;
  display:flex; align-items:center; gap:6px;
}
.package-title.crown::before { content:"👑"; }
.package-title.ribbon::before { content:"📎"; }
.package-title.green::before { content:"📄"; color:#22c55e; }
.package-title.purple::before { content:"📄"; color:#6366f1; }
.package-text { font-size:14px; color:#334155; line-height:1.6; }

/* Price */
.package-price { margin-top:auto; font-weight:700; }
.old-price { text-decoration:line-through; color:#9ca3af; margin-left:6px; }
.new-price { color:#e11d48; font-size:18px; margin:0 4px; }
.currency { color:#475569; font-size:14px; }

/* Buttons */
.btn-primary, .btn-secondary {
  margin-top:8px;
  padding:10px 14px;
  border:none; border-radius:8px;
  font-weight:700; cursor:pointer;
}
.btn-primary {
  background:#1d4ed8; color:#fff;
}
.btn-primary:hover { background:#1e40af; }
.btn-secondary {
  background:#f3f4f6; color:#111;
}
.btn-secondary:hover { background:#e5e7eb; }

/* ===== Responsive ===== */
@media (max-width:992px){
  .packages-grid { grid-template-columns:repeat(2,1fr); }
  .package-card.highlight { grid-column:span 2; }
}
@media (max-width:640px){
  .packages-grid { grid-template-columns:1fr; }
  .package-card.highlight { grid-column:span 1; }
}

/* ================= Golden Deal Section ================= */
:root{
  --deal-gold:#e7b73a;
  --deal-gold-grad:linear-gradient(180deg,#e7b73a 0%, #e1b035 60%, #d7a42b 100%);
  --deal-dark:#0b1324;
  --deal-muted:#475569;
  --deal-text:#0f172a;
}

.deal-wrap{
  background:#f7f8fb;
  padding:30px 16px 30px;
}
.deal-container{
  max-width:1400px;
  margin:0 auto;
}
.deal-card{
  position:relative;
  border-radius:26px;
  background:var(--deal-gold-grad);
  padding:34px 22px 36px;
  overflow:hidden;
  box-shadow:0 14px 28px rgba(0,0,0,.08);
}
.deal-card::before{
  /* خلفية رمزية باهتة */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 20% 10%, rgba(255,255,255,.25), transparent 70%),
    radial-gradient(60% 80% at 90% 90%, rgba(255,255,255,.18), transparent 70%);
  pointer-events:none;
}

/* Head */
.deal-head{ text-align:center; color:#1b2433; }
.deal-crown{ font-size:42px; line-height:1; }
.deal-head h2{
  margin-top:6px;
  font-weight:800;
  font-size:clamp(22px,3.2vw,34px);
}
.deal-trophy{ margin-inline-start:6px; }

/* Expire / Timer */
.deal-expire{
  text-align:center; margin:16px auto 18px;
}
.deal-expire-text{
  display:inline-block; background:rgba(255,255,255,.35);
  color:#462a00; font-weight:700; border-radius:999px;
  padding:6px 12px; margin-bottom:10px;
}
.deal-timer{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.deal-box{
  background:#fff; color:#1f2937;
  border-radius:12px; padding:10px 18px; min-width:78px;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  text-align:center;
}
.deal-box strong{ display:block; font-size:20px; font-weight:800; }
.deal-box span{ font-size:12px; color:#6b7280; }

/* Lead sentence */
.deal-lead{
  text-align:center; color:var(--deal-dark);
  font-weight:800; line-height:1.8;
  font-size:clamp(16px,2.4vw,22px);
  max-width:900px; margin:10px auto 16px;
}

/* Prices */
.deal-prices{
  display:flex; gap:30px; align-items:flex-end; justify-content:center;
  margin:6px auto 10px;
}
.deal-price-col{ text-align:center; }
.deal-price-old{
  font-size:clamp(26px,4vw,42px); font-weight:800; color:#4a3a18;
  opacity:.55; text-decoration:line-through;
}
.deal-price-new{
  font-size:clamp(28px,4.4vw,44px); font-weight:900; color:#1e1b12;
}
.deal-label{ color:#3b2d11; margin-top:4px; font-weight:700; }

/* Includes list */
.deal-includes{
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
  margin:12px auto 14px; padding:0; list-style:none;
}
.deal-includes li{
  position:relative; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.35); color:#191919; font-weight:700;
}
.deal-includes li::before{
  content:"✓"; margin-inline-start:6px; margin-inline-end:6px;
  color:#0b1324;
}

/* CTA */
.deal-cta{
  display:block; width:fit-content; margin:10px auto 0;
  background:var(--deal-dark); color:#fff; text-decoration:none;
  font-weight:800; border-radius:10px; padding:12px 24px;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.deal-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.22); }

/* ================== Responsive ================== */
@media (max-width:992px){
  .deal-card{ padding:28px 18px 30px; }
  .deal-prices{ gap:22px; }
}
@media (max-width:640px){
  .deal-wrap{ padding:28px 12px 48px; }
  .deal-includes{ gap:10px; }
  .deal-box{ min-width:72px; padding:8px 14px; }
  .deal-cta{ width:100%; text-align:center; }
}


/* =================== Stats Section =================== */
:root{
  --stats-bg:#f3f5fb;
  --stats-blue:#1d3557;
  --stats-muted:#64748b;
  --stats-white:#ffffff;
  --stats-shadow:0 12px 28px rgba(0,0,0,.06);

  --stats-grad-hero:linear-gradient(135deg,#0e3a84 0%, #3d566e 45%, #e2b23a 100%);
  --stats-grad-live:linear-gradient(135deg,#22c55e 0%, #2dd4bf 40%, #3b82f6 100%);
  --stats-grad-orange:linear-gradient(135deg,#f59e0b 0%, #fb923c 45%, #f97316 100%);
}

.stats-wrap{ background:var(--stats-bg); padding:56px 16px 72px; }
.stats-container{ max-width:1400px; margin:0 auto; }

.stats-head{ text-align:center; margin-bottom:28px; }
.stats-head h2{
  color:var(--stats-blue); font-weight:800;
  font-size:clamp(22px,3.2vw,32px);
}
.stats-sub{ color:var(--stats-muted); margin-top:6px; }

/* Top numbers */
.stats-top{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  margin-bottom:22px;
}
.stats-top-item{
  background:var(--stats-white); border-radius:18px; padding:22px;
  box-shadow:var(--stats-shadow); text-align:center;
}
.stats-top-icon{
  width:56px;height:56px;line-height:56px;border-radius:50%;
  background:#eef2ff; display:inline-flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:10px;
}
.stats-top-num{
  font-weight:900; color:#18314a; font-size:clamp(20px,3vw,28px);
}
.stats-top-label{ color:var(--stats-muted); margin-top:6px; }

/* Big gradient banner */
.stats-hero{
  background:var(--stats-grad-hero); border-radius:18px;
  min-height:180px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--stats-shadow); margin:10px 0 24px;
  overflow:hidden; position:relative;
}
.stats-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 15% 20%, rgba(255,255,255,.18), transparent 60%),
             radial-gradient(80% 60% at 90% 80%, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}
.stats-hero-inner{ text-align:center; color:#fff; padding:28px 12px; }
.stats-hero-ico{ font-size:24px; opacity:.95; margin-bottom:8px; }
.stats-hero-num{
  font-weight:900; letter-spacing:1px;
  font-size:clamp(28px,6.2vw,56px);
}
.stats-hero-caption{ font-weight:800; margin-top:2px; }
.stats-hero-sub{ opacity:.95; margin-top:6px; }

/* Bottom cards */
.stats-bottom{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
.stats-card{
  border-radius:18px; padding:20px; color:#fff;
  box-shadow:var(--stats-shadow); position:relative; overflow:hidden;
}
.stats-card--live{ background:var(--stats-grad-live); }
.stats-card--orange{ background:var(--stats-grad-orange); }

.stats-card-head{ display:flex; align-items:center; gap:8px; font-size:clamp(16px,2.1vw,20px); font-weight:800; }
.stats-card-text{ opacity:.95; margin-top:6px; }

.stats-dot{
  width:10px;height:10px;border-radius:50%;background:#ef4444; display:inline-block;
  box-shadow:0 0 0 0 rgba(239,68,68,.7); animation:stats-ping 1.4s infinite;
}
@keyframes stats-ping{
  0%{ box-shadow:0 0 0 0 rgba(239,68,68,.7); }
  70%{ box-shadow:0 0 0 10px rgba(239,68,68,0); }
  100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); }
}

.stats-live-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.2); padding:6px 12px; border-radius:999px;
  margin-top:10px; font-weight:700;
}
.stats-live-dot{
  width:8px;height:8px;border-radius:50%;background:#22c55e; display:inline-block;
  box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:stats-ping 1.6s infinite;
}

.stats-btn{
  display:inline-block; margin-top:10px;
  background:rgba(255,255,255,.2); color:#fff; text-decoration:none;
  padding:8px 14px; border-radius:10px; font-weight:800;
  transition:transform .12s ease, background .12s ease;
}
.stats-btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.28); }

/* ============== Responsive ============== */
@media (max-width:992px){
  .stats-top{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .stats-bottom{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .stats-wrap{ padding:40px 12px 56px; }
  .stats-top{ grid-template-columns:1fr; }
  .stats-hero{ min-height:160px; }
}


/* =================== Testimonials Section =================== */
:root{
  --t-bg:#f7f8fb;
  --t-text:#1e293b;
  --t-muted:#64748b;
  --t-gold:#fbbf24;
  --t-white:#ffffff;
  --t-shadow:0 10px 24px rgba(0,0,0,.06);
}

.testimonials-wrap{ background:var(--t-bg); padding:64px 16px; }
.testimonials-container{ max-width:1400px; margin:0 auto; }

.testimonials-head{ text-align:center; margin-bottom:36px; }
.testimonials-head h2{
  color:var(--t-text);
  font-size:clamp(22px,3vw,32px);
  font-weight:800;
}
.testimonials-sub{ color:var(--t-muted); margin-top:6px; }

/* Grid */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.testimonial-card{
  background:var(--t-white);
  border-radius:18px;
  padding:28px 22px;
  box-shadow:var(--t-shadow);
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.testimonial-quote{
  font-size:40px;
  color:var(--t-gold);
  margin-bottom:10px;
}
.testimonial-text{
  color:var(--t-text);
  font-weight:500;
  line-height:1.8;
  font-size:clamp(15px,2.2vw,18px);
  margin-bottom:12px;
}
.testimonial-stars{
  color:var(--t-gold);
  font-size:20px;
  margin-bottom:12px;
}
.testimonial-meta{
  font-size:14px;
  margin-bottom:14px;
}
.testimonial-student{
  display:block; font-weight:600; margin-bottom:4px;
}
.testimonial-uni{
  color:#e67e22; font-weight:600;
}
.testimonial-flag img{
  width:48px; height:auto; margin:0 auto;
}

/* Responsive */
@media (max-width:992px){
  .testimonials-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .testimonials-grid{ grid-template-columns:1fr; }
  .testimonial-card{ padding:22px 18px; }
}

/* ================= Steps Section (RTL) ================= */
:root{
  --steps-bg:#f5f7fb;
  --steps-card:#ffffff;
  --steps-text:#0f172a;
  --steps-muted:#64748b;
  --steps-shadow:0 10px 24px rgba(0,0,0,.06);

  --c-blue:#3b82f6;
  --c-purple:#8b5cf6;
  --c-green:#10b981;
  --c-gold:#f59e0b;
  --c-mint:#34d399;
}

.steps-wrap{ background:var(--steps-bg); padding:56px 16px 72px; }
.steps-container{ max-width:1400px; margin:0 auto; }

.steps-head{ text-align:center; margin-bottom:28px; }
.steps-head h2{
  font-size:clamp(24px,3.4vw,42px);
  font-weight:800; color:#1e293b;
}
.steps-sub{ color:var(--steps-muted); margin-top:8px; }

/* خط واصل بين البطاقات (يظهر على >= 992px) */
.steps-line{
  height:2px; width:100%; background:#e5e7eb;
  margin:18px 0 0; position:relative; z-index:0; display:none;
}

/* Grid */
.steps-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:22px; margin-top:-12px; position:relative; z-index:1;
}
.step-card{
  background:var(--steps-card); border-radius:18px; padding:22px 18px;
  box-shadow:var(--steps-shadow); text-align:center; position:relative;
}

/* رقم الخطوة */
.step-badge{
  position:absolute; top:-12px; left:14px;
  width:32px; height:32px; border-radius:999px;
  background:#0b4a8d; color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800;
}

/* الأيقونات */
.step-ico{
  width:64px; height:64px; line-height:64px; border-radius:16px;
  margin:6px auto 12px; font-size:28px;
  display:flex; align-items:center; justify-content:center;
}
.step-ico--blue   { background:rgba(59,130,246,.12);  color:var(--c-blue); }
.step-ico--purple { background:rgba(139,92,246,.12); color:var(--c-purple); }
.step-ico--green  { background:rgba(16,185,129,.12); color:var(--c-green); }
.step-ico--gold   { background:rgba(245,158,11,.12); color:var(--c-gold); }
.step-ico--mint   { background:rgba(52,211,153,.12); color:var(--c-mint); }

.step-title{
  font-weight:800; color:#0f2a3d; font-size:clamp(16px,2.2vw,20px);
  margin-bottom:6px;
}
.step-text{ color:var(--steps-muted); line-height:1.9; }

/* =============== Responsive =============== */
@media (min-width:992px){
  .steps-line{ display:block; }
}
@media (max-width:1200px){
  .steps-grid{ gap:18px; }
}
@media (max-width:992px){
  .steps-grid{ grid-template-columns:repeat(3,1fr); margin-top:12px; }
  .step-badge{ left:12px; }
}
@media (max-width:640px){
  .steps-wrap{ padding:40px 12px 56px; }
  .steps-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .step-card{ padding:18px 14px; }
  .step-ico{ width:56px; height:56px; border-radius:14px; font-size:24px; }
}
@media (max-width:420px){
  .steps-grid{ grid-template-columns:1fr; }
  .step-badge{ top:-10px; left:10px; width:28px; height:28px; font-size:13px; }
}

/* =================== Safety Section =================== */
:root{
  --safe-bg:#0a4aad;
  --safe-bg-grad:linear-gradient(180deg,#0a4aad 0%, #0c3c88 100%);
  --safe-white:#ffffff;
  --safe-muted:#e2e8f0;
  --safe-card-bg:rgba(255,255,255,.08);
  --safe-guarantee-bg:rgba(255,255,255,.15);
  --safe-shadow:0 12px 28px rgba(0,0,0,.18);
}

.safe-wrap{
  background:var(--safe-bg-grad);
  padding:64px 16px;
  border-radius:20px;
  margin:64px auto;
  max-width:1400px;
  color:var(--safe-white);
}
.safe-container{ max-width:1400px; margin:0 auto; }

.safe-head{ text-align:center; margin-bottom:40px; }
.safe-head h2{
  font-size:clamp(22px,3.4vw,32px);
  font-weight:800;
}
.safe-sub{ margin-top:8px; font-weight:500; color:#fcd34d; }

/* Grid */
.safe-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:32px;
}
.safe-card{
  background:var(--safe-card-bg);
  border-radius:16px;
  padding:28px 20px;
  text-align:center;
  backdrop-filter:blur(4px);
}
.safe-ico{
  font-size:28px; margin-bottom:10px;
}
.safe-title{
  font-weight:700; font-size:clamp(16px,2.2vw,20px);
  margin-bottom:6px;
}
.safe-text{ color:var(--safe-muted); line-height:1.7; font-size:15px; }

/* Guarantee Box */
.safe-guarantee{
  background:var(--safe-guarantee-bg);
  border-radius:14px;
  padding:24px 18px;
  text-align:center;
}
.safe-guarantee-title{
  font-weight:800; font-size:clamp(16px,2.2vw,20px); margin-bottom:10px;
}
.safe-guarantee-text{ color:var(--safe-white); font-weight:500; line-height:1.8; }

/* Responsive */
@media (max-width:992px){
  .safe-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .safe-wrap{ padding:44px 14px; border-radius:14px; }
  .safe-card{ padding:22px 16px; }
}


/* ======================= Contact Section ======================= */
:root{
  --contact-blue-1:#0e3a84;
  --contact-blue-2:#0b5ec9;
  --contact-blue-3:#0a4aad;
  --contact-white:#fff;
  --contact-muted:#cfe0ff;
  --contact-shadow:0 12px 28px rgba(0,0,0,.12);

  --contact-green:#22c55e;
  --contact-blue:#3b82f6;
  --contact-red:#ef4444;
}

.contact-wrap{
  background: radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,.10), transparent 60%),
              radial-gradient(900px 500px at 85% 85%, rgba(255,255,255,.08), transparent 60%),
              linear-gradient(135deg, var(--contact-blue-1), var(--contact-blue-2) 60%, var(--contact-blue-3));
  padding: 56px 16px 72px;
  color: var(--contact-white);
}
.contact-container{ max-width: 1400px; margin: 0 auto; }

.contact-head{ text-align:center; margin-bottom: 22px; }
.contact-head h2{
  font-weight: 800;
  font-size: clamp(24px, 3.6vw, 40px);
}
.contact-sub{
  color: var(--contact-muted);
  margin-top: 6px;
}

/* Cards row */
.contact-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.contact-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--contact-shadow);
  text-align: center;
  backdrop-filter: blur(3px);
}
.contact-card-ico{
  width: 56px; height: 56px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  margin: 4px auto 10px; font-size: 26px; color:#fff;
}
.contact-card--red   .contact-card-ico{ background: rgba(239,68,68,.18); }
.contact-card--blue  .contact-card-ico{ background: rgba(59,130,246,.18); }
.contact-card--green .contact-card-ico{ background: rgba(34,197,94,.18); }

.contact-card-title{
  font-weight: 800; margin-bottom: 6px; font-size: 18px;
}
.contact-card-text{
  color: #e8f0ff; line-height: 1.8; min-height: 48px;
}

/* Buttons */
.contact-btn{
  display:inline-block; text-decoration:none; font-weight:800;
  padding:10px 14px; border-radius: 8px; margin-top: 10px;
  background: rgba(255,255,255,.18); color:#fff;
  transition: transform .12s ease, background .12s ease;
}
.contact-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.24); }

.contact-btn--green{ background: #25D366; }
.contact-btn--green:hover{ background: rgba(34,197,94,.36); }

.contact-btn--blue{ background: #3b82f6; }
.contact-btn--blue:hover{ background: rgba(59,130,246,.36); }

.contact-btn--red{ background: #ef4444; }
.contact-btn--red:hover{ background: rgba(239,68,68,.36); }

/* Profile card */
.contact-profile{
  display:flex; justify-content:center;
}
.contact-profile-inner{
  width: 100%;
  max-width: 920px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 25px 20px;
  box-shadow: var(--contact-shadow);
  text-align:center;
}
.contact-avatar{
  width: 250px; height: 250px; border-radius: 999px;
  margin: 6px auto 14px; overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  border: 2px solid rgba(255,255,255,.25);
}
.contact-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.contact-name{
  font-weight: 900; font-size: clamp(18px, 2.4vw, 24px);
  margin-bottom: 8px;
}
.contact-pin{ margin-inline-start:6px; }
.contact-bio{
  color: #eaf2ff; line-height: 1.95; margin: 6px 0;
  text-align: justify;
}


/* قاعدة عامة لتكبير حجم وتنعيم الأيقونات */
.icon-colored {
  font-size: 28px;   /* حجم الأيقونة */
  margin: 0 auto;    /* للسنتر داخل البلوك */
  display: inline-block;
}

/* ألوان أيقونات محددة */
.icon-whatsapp   { color: #25D366; }   /* أخضر واتساب */
.icon-credit     { color: #3b82f6; }   /* أزرق البطاقة */
.icon-youtube    { color: #FF0000; }   /* أحمر يوتيوب */
.icon-certificate{ color: #fbbf24; }   /* أصفر/ذهبي */
.icon-graduation { color: #fbbf24; }   /* بنفسجي غامق */


/* ================= Responsive ================= */
@media (max-width: 992px){
  .contact-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .contact-wrap{ padding: 44px 12px 56px; }
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-card{ padding: 16px; }
  .contact-avatar{ width: 180px; height: 180px; }
}
