:root {
        --petrol-red: #D31E28; /* من الشعار */
        --petrol-blue: #2E3192; /* الكحلي من الشعار */
        --soft-bg: #F8FAFC;
        --border-gray: #E2E8F0;
   
     
      /* UI */
      --bg:#F1F5F9;
      --bg-2:#EEF2F7;
      --card:#FFFFFF;
      --stroke:#E5E7EB;

      --text:#0F172A;
      --muted:#64748B;
    }
@font-face {
    font-family: 'GE SS Two';
    src: url("https://db.onlinewebfonts.com/t/aaff40b5e8234dc862e4df217e40cf1e.eot");
    src: url("https://db.onlinewebfonts.com/t/aaff40b5e8234dc862e4df217e40cf1e.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/aaff40b5e8234dc862e4df217e40cf1e.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/aaff40b5e8234dc862e4df217e40cf1e.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/aaff40b5e8234dc862e4df217e40cf1e.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/aaff40b5e8234dc862e4df217e40cf1e.svg#GE SS Two Bold")format("svg");
    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:'GE SS Two','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,.90)!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-main);
    color: white;
    box-shadow: 0 10px 20px rgba(225, 29, 72, 0.2);
  }