/* ================================
   باقي الأقسام والمكونات (مختصر ومنظم)
   ================================ */
.page-header {
  background: linear-gradient(120deg, var(--primary-mid), var(--primary-light));
  color: var(--text-light);
  padding: 80px 20px;
  text-align: center;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 6px 14px rgba(122, 136, 78, 0.35);
}

.page-header h1 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.page-header p {
  font-size: 1.3rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2.2rem;
  }
  .page-header p {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 1.8rem;
  }
  .page-header p {
    font-size: 1rem;
  }
}