html,
body {
  background-color: #f1f4fb;
  overflow-x: hidden; /* منع التمرير الأفقي */
  overflow-y: scroll; /* تمكين التمرير العمودي */
  scrollbar-width: none; /* إخفاء الشريط في فايرفوكس */
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
}

body::-webkit-scrollbar {
  display: none; /* إخفاء الشريط في كروم وسفاري */
}

a {
  text-decoration: none;
}

/* Section Defaults */
/* .section {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  place-content: center;
  padding: 2rem 0;
} */

/* ---------------sidebar---------------------- */

/* تأثير shimmer */
@keyframes shimmerLine {
  0% {
    background-position: -100% 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* تأثير تحت الرابط */
#sidebar a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 100px; /* طول ثابت للشريط تحت الرابط */
  height: 3px;
  background-color: rgba(150, 150, 150, 0.1);
  transform-origin: right;
  transform: scaleX(1);
  transition: background 0.4s ease, transform 0.4s ease;
}

/* التأثير عند hover أو when active */
#sidebar a:hover::after,
#sidebar a.active::after {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmerLine 1.2s ease-in-out infinite;
}

/* ----------------------------------- */

.hover-slide {
  transition: transform 1.8s ease;
  will-change: transform;
}

/* عند مرور الماوس تتحرك لليمين */
.hover-slide:hover {
  transform: translateX(15px); /* مقدار الانزياح */
}

/* -------------------------- */

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/roboto-v49-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../webfonts/roboto-v49-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 800;
  src: url("../webfonts/roboto-v49-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/roboto-v49-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}