
:root{
  --primary-color:#ac7f08;
  --primary-2:#101010;
}
body{
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Arabic', 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  background-color:#f8f9fa;
  color:#212529;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: var(--primary-color);
}
.nav-pills .nav-link {
  color: var(--primary-2);
}

a{ text-decoration:none; }
.navbar{ background-color: var(--primary-2); }
.navbar .nav-link, .navbar .navbar-brand{ color:#fff !important; }
.navbar .nav-link.active{ color: var(--primary-color) !important; }
.btn-primary{
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-bg:#906b0a;
  --bs-btn-hover-border-color:#906b0a;
}
.badge-primary{
  background-color: var(--primary-color);
}
.hero{
  background: linear-gradient(180deg, rgba(16,16,16,.7), rgba(16,16,16,.7)), url('../img/hero.png');
  background-size: cover;
  background-position: top;
  color:#fff;
  padding: 120px 0;
}
.section-title{
  border-right: 6px solid var(--primary-color);
  padding-right: 12px;
  margin-bottom: 1rem;
  color: var(--primary-2);
}
.card-hover:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: all .2s ease-in-out;
}
.footer{
  background: var(--primary-2);
  color:#cfcfcf;
  padding: 40px 0;
}
.stat{
  background:#fff;border:1px solid #eee;border-radius:12px;padding:20px;text-align:center
}
.news-ticker{
  background: var(--primary-color);
  color:#fff;
  padding: .5rem 0;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}
.news-ticker .track{
  display:inline-block;
  padding-inline-start:100%;
  animation: marquee 20s linear infinite;
}
.news-ticker:hover .track{ animation-play-state: paused; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.gallery img{
  object-fit: cover;
  height: 220px;
  width: 100%;
  border-radius: 12px;
}
.tree-container{
  background:#fff;border:1px solid #eee;border-radius:12px;padding:20px;min-height:60vh
}
.tree ul { padding-top: 20px; position: relative; }
.tree li { display:inline-block; text-align:center; list-style-type:none; position:relative; padding:20px 10px 0 10px; }
.tree li::before, .tree li::after{
  content:''; position:absolute; top:0; right:50%;
  border-top:1px solid #ccc; width:50%; height:20px;
}
.tree li::after{
  right:auto; left:50%;
  border-right:none; border-left:1px solid #ccc;
}
.tree li:only-child::after, .tree li:only-child::before{ display:none; }
.tree li:only-child{ padding-top:0; }
.tree li:first-child::before, .tree li:last-child::after{ border:0 none; }
.tree li:last-child::before{ border-top:1px solid #ccc; border-right:1px solid #ccc; border-radius:0 5px 0 0; right:50%; }
.tree li:first-child::after{ border-top:1px solid #ccc; border-left:1px solid #ccc; border-radius:5px 0 0 0; left:50%; }
.tree ul ul::before{
  content:''; position:absolute; top:0; right:50%; border-right:1px solid #ccc; width:0; height:20px;
}
.tree li .node{
  border:1px solid #ddd; padding:10px 14px; display:inline-block; border-radius:10px; background:#fff;
}
.tree li .node .name{ font-weight:700; color: var(--primary-2); }
.tree li .node .meta{ font-size:.85rem; color:#6c757d }
.modal-avatar{
  width: 120px; height:120px; object-fit:cover; border-radius:50%; border:4px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.15);
}
