@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hOA-a1biLD-H.woff2') format('woff2'),
  url('../webfonts/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hOA-a1biLD-H.woff2') format('woff'); /* نسخة احتياطية */
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

*{  font-family: 420;}
@media screen and (min-width: 601px) {
    .span_font1 {
    font-size: 0.85em;
    height:40px;
    width:25%;
    font-family: 'Almarai', 'Noto Kufi Arabic', 'Cairo', sans-serif;
  }
  .showUser_projet{
    width:100.8%;
  }
}
@media screen and (max-width: 600px) {
  .span_font1{
    font-size: 0.60em;
    height:35px;
    width:25%;
    font-family: 'Almarai', 'Noto Kufi Arabic', 'Cairo', sans-serif;

  }
  .showUser_projet{
    width:102%;
  }
}

:root {
  --main-color:rgb(255, 255, 255); /* اللون الأساسي */
  --dark-bg: #2c3e50;
  --text-color: #ffffff;
  --light-bg: rgba(255, 255, 255, 0.05);
  --light-hover: rgba(255, 255, 255, 0.15);
  --shadow-light: 0 4px 10px rgba(34, 190, 146, 0.2);
  --shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.3);
}
body {
  font-family: 'Almarai', 'Noto Kufi Arabic', 'Cairo', sans-serif !important;
  
}
.dropdown {
  position: relative;
  user-select: none;
}
.dropdown a {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 18px;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
  background: var(--light-bg);
  color: var(--text-color);
  cursor: pointer;
}
.dropdown a:hover {
  background: var(--light-hover);
  color: var(--main-color) !important;
  box-shadow: var(--shadow-light);
  transform: scale(1.05);
}
.dropdown-toggle {
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}
.dropdown-toggle:hover {
  color: var(--main-color) !important;
}
.menu {
  border-radius: 10px;
  padding: 8px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
.nav-link {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  color: var(--text-color);
  font-size: 15px;
}
.nav-link:hover {
  border-radius: 8px;
  transform: translateX(5px);
}
.user-imgBxrebot {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 12px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.user-imgBxrebot:hover {
  transform: scale(1.15);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
}
.fade-in {
  animation: fadeInUp 0.5s ease-in-out;
}
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}
a{text-decoration:none}

    .search-wrapper { width:100%; max-width:100%; }
    .search-input {
      width:100%; padding:12px 16px; border:none; border-radius:20px;
      background:#f1f1f1; font-size:15px; color:#333; border:1px solid #ccc;
      transition:background-color .2s, box-shadow .2s;
    }