/* الأساسيات المعدلة */
:root {
  --main-color: #4B0000;
  --accent-color: #FF4D4D;
  --text-color: #FFFFFF;
  --gold-color: #FFD700;
}
    
    body {
      margin: 0;
      background: linear-gradient(135deg, #1a0000, #4b0000);
      min-height: 100vh;
      font-family: 'Tajawal', sans-serif;
      color: var(--text-color);
      direction: rtl;
      overflow-x: hidden;
    }

    /* تأثير المطر الدموي الكامل */
    .blood-rain {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }
    
    .drop {
      position: absolute;
      top: -20px;
      width: 3px;
      height: 20px;
      background: radial-gradient(circle, #ff4d4d, #990000);
      border-radius: 50% 50% 20% 20%;
      opacity: 0.7;
      animation: fall linear infinite;
      filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
    }

    @keyframes fall {
      to {
        transform: translateY(120vh);
        opacity: 0;
      }
    }

    /* توليد عشوائي للقطرات */
    .drop:nth-child(1)  { left: 5%;  animation-duration: 2s;  animation-delay: 0s;   }
    .drop:nth-child(2)  { left: 15%; animation-duration: 3s;  animation-delay: 0.5s; }
    .drop:nth-child(3)  { left: 25%; animation-duration: 2.2s;animation-delay: 1s;   }
    .drop:nth-child(4)  { left: 35%; animation-duration: 2.7s;animation-delay: 0.2s; }
    .drop:nth-child(5)  { left: 45%; animation-duration: 3.2s;animation-delay: 1.5s; }
    .drop:nth-child(6)  { left: 55%; animation-duration: 1.8s;animation-delay: 0.7s; }
    .drop:nth-child(7)  { left: 65%; animation-duration: 2.5s;animation-delay: 0.9s; }
    .drop:nth-child(8)  { left: 75%; animation-duration: 2.1s;animation-delay: 1.1s; }
    .drop:nth-child(9)  { left: 85%; animation-duration: 3.1s;animation-delay: 0.4s; }
    .drop:nth-child(10) { left: 95%; animation-duration: 1.9s;animation-delay: 1.6s; }
    .drop:nth-child(11) { left: 10%; animation-duration: 2.3s;animation-delay: 0.3s; }
    .drop:nth-child(12) { left: 20%; animation-duration: 2.8s;animation-delay: 1.4s; }
    .drop:nth-child(13) { left: 30%; animation-duration: 1.7s;animation-delay: 0.6s; }
    .drop:nth-child(14) { left: 40%; animation-duration: 3.4s;animation-delay: 1.7s; }
    .drop:nth-child(15) { left: 50%; animation-duration: 2s;  animation-delay: 0.8s; }
    .drop:nth-child(16) { left: 60%; animation-duration: 2.6s;animation-delay: 1.3s; }
    .drop:nth-child(17) { left: 70%; animation-duration: 1.6s;animation-delay: 0.9s; }
    .drop:nth-child(18) { left: 80%; animation-duration: 3s;  animation-delay: 1.2s; }
    .drop:nth-child(19) { left: 90%; animation-duration: 2.4s;animation-delay: 0.1s; }
    .drop:nth-child(20) { left: 98%; animation-duration: 2.9s;animation-delay: 0.5s; }

    /* تحسينات القائمة العلوية */
    .head {
      position: relative;
      z-index: 10;
    }

    nav {
      padding: 30px 40px;
    }

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content: center;
      gap: 40px;
    }

    nav ul li button {
      all: unset;
      color: var(--text-color);
      font-family: 'Lateef', cursive;
      font-size: 22px;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
    }

    nav ul li:hover button {
      color: var(--gold-color);
      text-shadow: 0 0 10px var(--accent-color);
    }

    .active .sais {
      font-size: 28px;
      color: var(--gold-color);
    }

    .active-line {
      position: absolute;
      bottom: 25px;
      left: 0;
      width: 100px;
      height: 4px;
      background: linear-gradient(90deg, var(--accent-color), var(--gold-color));
      border-radius: 10px;
      box-shadow: 0 0 15px var(--accent-color);
    }

    hr {
      border: none;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
      box-shadow: 0 0 10px var(--accent-color);
      margin: 0 40px;
    }

    /* تحسينات بطاقات الأئمة */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 25px;
      padding: 30px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .glow-card {
      background: linear-gradient(145deg, rgba(75, 0, 0, 0.8), rgba(40, 0, 0, 0.9));
      color: var(--text-color);
      padding: 25px;
      border-radius: 20px;
      border: 1px solid rgba(255, 77, 77, 0.5);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 180px;
      backdrop-filter: blur(5px);
      position: relative;
      overflow: hidden;
    }

    .glow-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 77, 77, 0.1), transparent 70%);
      transition: all 0.5s ease;
      opacity: 0;
    }

    .glow-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(255, 77, 77, 0.4);
    }

    .glow-card:hover::before {
      opacity: 1;
    }

    .glow-card h3 {
      font-family: 'Lateef', cursive;
      font-size: 24px;
      margin: 0;
      color: var(--gold-color);
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .glow-card p {
      font-size: 18px;
      margin: 10px 0 0 0;
      opacity: 0.9;
    }

    /* تحسينات الآية القرآنية */
    .quran-verse {
      text-align: center;
      padding: 30px 20px;
      margin: 40px auto;
      max-width: 800px;
      position: relative;
    }

    .quran-verse::before,
    .quran-verse::after {
      content: "﴿";
      font-family: 'Lateef', cursive;
      font-size: 40px;
      color: var(--gold-color);
      position: absolute;
      opacity: 0.7;
    }

    .quran-verse::before {
      top: 0;
      right: 20px;
    }

    .quran-verse::after {
      bottom: 0;
      left: 20px;
      transform: rotate(180deg);
    }

    .verse-text {
      font-family: 'Lateef', cursive;
      font-size: 28px;
      color: var(--gold-color);
      line-height: 1.6;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* تأثيرات الحركة للآية */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* تحسينات للجوال */
    @media (max-width: 768px) {
      nav {
        padding: 20px;
      }
      
      nav ul {
        gap: 20px;
      }
      
      nav ul li button {
        font-size: 18px;
      }
      
      .active .sais {
        font-size: 22px;
      }
      
      .active-line {
        bottom: 15px;
        width: 80px;
      }
      
      .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        padding: 20px;
      }
      
      .glow-card {
        padding: 20px;
        min-height: 150px;
      }
      
      .glow-card h3 {
        font-size: 20px;
      }
      
      .glow-card p {
        font-size: 16px;
      }
      
      .verse-text {
        font-size: 22px;
      }
    }

    @media (max-width: 480px) {
      nav ul {
        flex-wrap: wrap;
        gap: 15px;
      }
      
      .card-grid {
        grid-template-columns: 1fr 1fr;
      }
      
      .glow-card {
        min-height: 120px;
      }
      
      .glow-card h3 {
        font-size: 18px;
      }
      
      .glow-card p {
        font-size: 14px;
      }
      
      .verse-text {
        font-size: 20px;
      }
      
      /* تقليل عدد قطرات الدم على الجوال */
      .drop:nth-child(n+11) {
        display: none;
      }
    }

    /* الأساسيات المعدلة */
:root {
  --main-color: #4B0000;
  --accent-color: #FF4D4D;
  --text-color: #FFFFFF;
  --gold-color: #FFD700;
}

body {
  margin: 0;
  background: linear-gradient(135deg, #1a0000, #4b0000);
  min-height: 100vh;
  font-family: 'Tajawal', sans-serif;
  color: var(--text-color);
  direction: rtl;
  overflow-x: hidden;
}

/* تأثير المطر الدموي - مخفف للجوال */
.blood-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.drop {
  position: absolute;
  top: -20px;
  width: 2px;
  height: 15px;
  background: radial-gradient(circle, #ff4d4d, #990000);
  border-radius: 50% 50% 20% 20%;
  opacity: 0.5;
  animation: fall linear infinite;
  filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.5));
}

@keyframes fall {
  to {
    transform: translateY(120vh);
    opacity: 0;
  }
}

/* تقليل عدد القطرات على الجوال */
.drop:nth-child(n+6) {
  display: none;
}

/* تحسينات القائمة العلوية للجوال */
nav {
  padding: 15px 20px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

nav ul li button {
  all: unset;
  color: var(--text-color);
  font-family: 'Lateef', cursive;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.active .sais {
  font-size: 20px;
  color: var(--gold-color);
}

.active-line {
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), var(--gold-color));
  border-radius: 10px;
  box-shadow: 0 0 10px var(--accent-color);
}

hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
  box-shadow: 0 0 5px var(--accent-color);
  margin: 0 20px;
}

/* تحسينات بطاقات الأئمة للجوال */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
}

.glow-card {
  background: linear-gradient(145deg, rgba(75, 0, 0, 0.8), rgba(40, 0, 0, 0.9));
  color: var(--text-color);
  padding: 15px;
  border-radius: 15px;
  border: 1px solid rgba(255, 77, 77, 0.5);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100px;
  backdrop-filter: blur(3px);
  position: relative;
  overflow: hidden;
}

.glow-card h3 {
  font-family: 'Lateef', cursive;
  font-size: 18px;
  margin: 0;
  color: var(--gold-color);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.glow-card p {
  font-size: 14px;
  margin: 8px 0 0 0;
  opacity: 0.9;
}

/* تحسينات الآية القرآنية للجوال */
.quran-verse {
  text-align: center;
  padding: 20px 15px;
  margin: 30px auto;
  max-width: 90%;
  position: relative;
}

.quran-verse::before,
.quran-verse::after {
  content: "﴿";
  font-family: 'Lateef', cursive;
  font-size: 30px;
  color: var(--gold-color);
  position: absolute;
  opacity: 0.7;
}

.quran-verse::before {
  top: 0;
  right: 10px;
}

.quran-verse::after {
  bottom: 0;
  left: 10px;
  transform: rotate(180deg);
}

.verse-text {
  font-family: 'Lateef', cursive;
  font-size: 20px;
  color: var(--gold-color);
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* تأثيرات الحركة للآية */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* تعديلات إضافية للشاشات الصغيرة جدًا */
@media (max-width: 360px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  
  nav ul li button {
    font-size: 16px;
  }
  
  .verse-text {
    font-size: 18px;
  }
}

/* إضافة هذا في النهاية بعد كل الكود الحالي */

/* تعديلات الجوال الأساسية */
@media (max-width: 768px) {
  

  /* تعديل المطر الدموي */
  .blood-rain {
    opacity: 0.7; /* تخفيف التأثير */
  }
  
  .drop {
    width: 2px;
    height: 15px;
  }

  .drop:nth-child(n+6) {
    display: none;
  }

  /* تعديلات القائمة */
  nav {
    padding: 15px 20px;
  }

  nav ul {
    gap: 12px;
    flex-wrap: wrap;
  }

  nav ul li button {
    font-size: 18px;
  }

  .active .sais {
    font-size: 20px;
  }

  .active-line {
    width: 70px;
    bottom: 12px;
  }

  /* تعديلات البطاقات */
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    padding: 15px;
  }

  .glow-card {
    padding: 15px;
    min-height: 100px;
  }

  .glow-card h3 {
    font-size: 18px;
  }

  .glow-card p {
    font-size: 14px;
  }

  /* تعديلات الآية */
  .quran-verse {
    padding: 20px 15px;
  }

  .verse-text {
    font-size: 20px;
  }
}

/* تعديلات إضافية للشاشات الصغيرة جداً */
@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .verse-text {
    font-size: 18px;
  }
}

@media (max-width: 360px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* تحسينات متناسقة للشاشات الكبيرة */
@media (min-width: 1200px) {
  :root {
    /* زيادة حجم الخطوط الأساسية */
    --font-size-large: 1.4rem;
    --font-size-xlarge: 1.8rem;
  }

  /* القائمة العلوية */
  nav ul li button {
    font-size: calc(22px * 1.5);
  }
  
  .active .sais {
    font-size: calc(28px * 1.5);
  }
  
  .active-line {
    width: 120px;
    height: 5px;
    bottom: 30px;
  }

  /* البطاقات */
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 35px;
    padding: 40px;
    max-width: 1400px;
  }

  .glow-card {
    padding: 35px;
    min-height: 240px;
    border-radius: 30px;
  }

  .glow-card h3 {
    font-size: calc(24px * 1.5);
    margin-bottom: 15px;
  }

  .glow-card p {
    font-size: calc(18px * 1.3);
  }

  /* الآية القرآنية */
  .quran-verse {
    padding: 40px 60px;
    margin: 60px auto;
    max-width: 1000px;
  }

  .verse-text {
    font-size: calc(28px * 1.5);
    line-height: 1.8;
  }

  .quran-verse::before,
  .quran-verse::after {
    font-size: 60px;
  }
}

/* تحسينات للشاشات الكبيرة جداً */
@media (min-width: 1600px) {
  .card-grid {
    max-width: 1600px;
    gap: 45px;
  }

  .glow-card {
    padding: 45px;
    min-height: 280px;
  }

  .glow-card h3 {
    font-size: calc(24px * 1.8);
  }

  .glow-card p {
    font-size: calc(18px * 1.5);
  }

  .verse-text {
    font-size: calc(28px * 1.8);
  }
}

a{
    text-decoration: none;
}