:root{
      /* Brand (From logo) */
      --brand-red:#E2202D;
      --brand-red-2:#E6424D;
      --brand-red-soft:#E96A73;
      --brand-green:#8CC048;
      --brand-maroon:#732C30;
      --brand-white:#FDFCFB;
      --brand-white:#FDFCFB;
      --primary :#E2202D;
      --secondary: #000000;
      --slate-900:#1d1d1d;

      /* UI */
      --bg:#F1F5F9;
      --bg-2:#EEF2F7;
      --card:#FFFFFF;
      --stroke:#E5E7EB;
      --text:#0F172A;
      --muted:#64748B;
    }
/* 1. تعريف الخط العربي */
@font-face {
  font-family: 'alsalam'; /* اسم من اختيارك */
  src: url('https://db.onlinewebfonts.com/t/aaff40b5e8234dc862e4df217e40cf1e.woff2') format('woff2'); /* تأكد من المسار واسم الملف */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* 2. تعريف الأرقام الإنجليزية */
@font-face {
    font-family: 'NumbersOnly';
    src: local('Arial'), local('Helvetica');
    unicode-range: U+30-39;
    font-weight: normal;
    font-style: normal;
}
    body{
    font-family: 'NumbersOnly', 'alsalam', 'IBM Plex Sans Arabic', sans-serif;
      background:
        radial-gradient(circle at 20% 10%, rgba(226,32,45,.08), transparent 40%),
        radial-gradient(circle at 90% 20%, rgba(140,192,72,.10), transparent 45%),
        linear-gradient(180deg, var(--bg), var(--bg-2));
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      overflow-x:hidden;
    }

    /* Navbar */
    #navbar{ transition: all .6s cubic-bezier(.16,1,.3,1); }
    .nav-scrolled{
      background-color: rgba(255, 255, 255, 0.952)!important;
      padding-top: .75rem!important;
      padding-bottom: .75rem!important;
      box-shadow: 0 12px 45px rgba(2,6,23,.10);
      border-bottom: 1px solid rgba(226,232,240,.95)!important;
      backdrop-filter: blur(14px);
    }

    /* Mega menu */
    .mega-menu{
      opacity:0; visibility:hidden;
      transform: translateY(10px);
      transition: all .35s cubic-bezier(.23,1,.32,1);
    }
    .group:hover .mega-menu{ opacity:1; visibility:visible; transform: translateY(0); }

    /* Mobile Drawer */
    #mobile-drawer{ transform: translateX(100%); transition: transform .55s cubic-bezier(.77,0,.175,1); }
    #mobile-drawer.open{ transform: translateX(0); }

    /* Reveal */
    .reveal{ opacity:0; transform: translateY(18px); transition: all .85s ease; }
    .reveal.active{ opacity:1; transform: translateY(0); }

 

  /* تأثيرات الظهور */
  .mega-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .group:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* بطاقة القسم */
  .category-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 20px;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.3s ease;
  }

  .category-card:hover {
    background: #f8fafc;
    border-color: #f1f5f9;
    transform: translateY(-3px);
  }

  /* حاوية الأيقونة */
  .icon-box {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #f1f5f9;
    color: #475569;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }

  .category-card:hover .icon-box {
    background: var(--brand-red);
    color: white;
    box-shadow: 0 10px 20px rgba(225, 29, 72, 0.2);
  }