* {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dashboard-page .content-page {
  padding: 100px 0 30px;
}

body {}

.login {
  background: #3F94E7;
  cursor: pointer;
}

.login:hover {
  background: #3B5998;
}

#signupModal,
#signupModal .signup-content {
  overflow: scroll;
}

.middle_heads {
  background-color: rgba(17, 24, 39, 0.5);
}

.intro_page .shape-1 {
  animation: animationFramesOne 10s linear infinite;
}

.intro_page .shape-2 {
  transform: translateY(-20%) translateX(-50%);
  z-index: 1;
  animation: moveleftbounce 2s linear infinite
}

.intro_page .shape-3 {
  z-index: 1;
  transform: translateY(-10%) translateX(-20%);
  animation: moveleftbounce 1s linear infinite
}

.intro_page .shape-4 {
  transform: translateY(-10%) translateX(-32%);
  z-index: 1
}

.intro_page .shape-4 img {
  animation-name: rotateme;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear
}

.intro_page .shape-5 {
  transform: translateY(-5%) translateX(-10%);
  z-index: 1;
  animation: animationFramesOne 10s linear infinite
}

@keyframes rotateme {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

@keyframes animationFramesOne {
  0% {
    transform: translate(0) rotate(0deg)
  }

  20% {
    transform: translate(73px, -1px) rotate(36deg)
  }

  40% {
    transform: translate(141px, 72px) rotate(72deg)
  }

  60% {
    transform: translate(83px, 122px) rotate(108deg)
  }

  80% {
    transform: translate(-40px, 72px) rotate(144deg)
  }

  to {
    transform: translate(0) rotate(0deg)
  }
}

@keyframes moveleftbounce {
  0% {
    transform: translateX(0)
  }

  50% {
    transform: translateX(20px)
  }

  to {
    transform: translateX(0)
  }
}

.stats-section .bg-card p {
  color: #5fadf9;
  font-weight: bold;
  font-size: 22px;
}

.stats-section .bg-card h3 {
  font-weight: normal;
  font-size: 25px;
}

#click-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* لا تعيق التفاعلات */
  contain: layout style paint;
  /* تحسين العزل والأداء */
}

.click-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  will-change: transform, opacity;
  /* نُلمِّح للمحرّك بما سيتغير */
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
}

/* لو المستخدم فعّل تقليل الحركة، لا نُظهر شيء */
@media (prefers-reduced-motion: reduce) {
  #click-layer {
    display: none;
  }
}

/* [ toggle mode ] */
html.light body {
  background-color: #f3f3f3 !important;
  color: #191f25 !important;
}

html.dark body {
  background-color: #191f25 !important;
  color: #fff !important;
}

html.light .bg-white {
  background: #fff !important;
  border: none;
}

html.light .text-\[\#2d3748\] {
  color: #2d3748 !important;
}

html.light .text-\[\#3b5998\] {
  color: #3b5998 !important;
}

html.light .bg-\[\#3b5998\] {
  background: #3b5998 !important;
}

html.light header.main_headers {
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  background: #fff;
}

html.light header.main_headers nav>a {
  color: #191f25 !important;
}

html.light header.main_headers .topbar,
html.light header .middle_heads {
  background: #fff;
}

html.light .intro_page {
  background: #fff;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.balance_card {
  max-height: 95vh;
  overflow-y: scroll;
}

@media screen and (max-width:468px) {
  header.middle_heads nav {
    padding-bottom: 18%;
  }
}