:root {
  --brand-green: #17513f;
  --brand-gold: #cbb08d;
  --bg-dark: #020308;
  --text-main: #f9fafb;
  --text-muted: #a0a6b3;
  --shadow: 0 20px 60px rgba(0,0,0,0.85);
}

body {
  margin:0; padding:0;
  font-family:"Tajawal", sans-serif;
  background: var(--bg-dark);
  color: var(--text-main);
  scroll-behavior: smooth;
}

a {color: var(--brand-gold); text-decoration:none;}

.site-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 5%;
  background: rgba(0,0,0,0.8);
  border-bottom:1px solid rgba(203,176,141,0.3);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}

.brand-logo-wrap {display:flex; align-items:center; gap:12px;}
.brand-logo{width:50px;height:50px;}
.brand-meta{display:flex; flex-direction:column; line-height:1.2;}
.brand-name{font-weight:700; font-size:0.95rem;}
.brand-desc{font-size:0.8rem; color:var(--text-muted);}

/* زر اللغة */
.lang-switch {display:inline-flex; gap:6px;}
.lang-btn{background:transparent;border:1px solid var(--brand-gold);border-radius:999px;padding:6px 12px;color:var(--brand-gold);cursor:pointer;font-weight:500;transition: all 0.2s ease;}
.lang-btn.active{background:var(--brand-gold); color:#111827; box-shadow:0 6px 18px rgba(0,0,0,0.6);}

/* الأقسام */
main{padding:50px 5%;}
section{max-width:900px; margin:0 auto 50px;}
h2{font-family:"Poppins", sans-serif; color: var(--brand-gold); font-weight:600; font-size:1.5rem; margin-bottom:12px;}
p, li{font-size:0.95rem; line-height:1.7;}
ul{padding-left:20px;}

/* About Images */
.about-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  width: 100%;
}

.about-img {
  flex: 0 1 280px; /* كل صورة 220px */
  max-width: 300px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: transform 0.4s ease, opacity 0.6s ease;
}

/* Services Grid */
.services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px;}
.service-card{background: rgba(15,15,15,0.85); padding:20px; border-radius:12px; text-align:center; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.service-card:hover{transform:translateY(-6px); box-shadow:0 10px 28px rgba(0,0,0,0.75);}
.service-img{width:100%; height:220px; object-fit:cover; border-radius:8px; margin-bottom:12px;}

/* Contact Section */
.contact-section p{margin:6px 0;}

/* Footer */
.site-footer{text-align:center; padding:30px 5%; border-top:1px solid rgba(203,176,141,0.3); color:var(--text-muted); font-size:0.85rem;}

/* Animations */
.animate-on-scroll{opacity:0; transform:translateY(30px); transition: all 0.8s ease-out;}
.animate-on-scroll.visible{opacity:1; transform:translateY(0);}

/* Responsive */
@media(max-width:768px){
  .site-header{flex-direction:column; gap:12px;}
  .about-images{flex-direction:row; justify-content:center;}
  .about-img{flex:1 1 100%; max-width:100%;}
  .services-grid{grid-template-columns:1fr;}
}