body { margin:0; font-family:'Cairo',sans-serif; background:#0f172a; color: #000000; }
a{ text-decoration:none; color:inherit; }

/* ===== Hero Section ===== */
.hero { position:relative; height:60vh; background:url('https://via.placeholder.com/1600x800/1e40af/ffffff?text=مشروع+جبااار') center/cover no-repeat; display:flex; justify-content:center; align-items:center; }
.hero::after { content:''; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(15,23,42,0.7), rgba(15,23,42,0.9)); }
.hero h1 { position:relative; font-size:3rem; text-align:center; z-index:1; animation: fadeInDown 1.2s ease forwards; }

/* ===== قسم المشروع ===== */
.project-section { max-width:1200px; margin:auto; padding:40px 20px; display:grid; grid-template-columns:2fr 1fr; gap:30px; }
.project-description { background: rgba(255,255,255,0.05); padding:25px; border-radius:12px; animation: fadeInLeft 1s ease; }
.project-description h2 { color:#5bc6e0; margin-top:0; }
.project-description p { line-height:1.6; color: black }

.project-meta { background: rgba(255,255,255,0.05); padding:25px; border-radius:12px; display:flex; flex-direction:column; gap:15px; animation: fadeInRight 1s ease; }
.project-meta div { display:flex; align-items:center; gap:10px; font-size:16px; }
.project-meta i { color:#5bc6e0; }

/* ===== معرض الصور ===== */
.gallery { max-width:1200px; margin:40px auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:15px; }
.gallery img { width:100%; border-radius:12px; cursor:pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.gallery img:hover { transform:scale(1.05); box-shadow:0 10px 25px rgba(0,0,0,0.5); }

/* ===== Lightbox ===== */
.lightbox { display:none; position:fixed; z-index:9999; inset:0; background: rgba(0,0,0,0.85); justify-content:center; align-items:center; }
.lightbox img { max-width:90%; max-height:90%; border-radius:12px; animation: zoomIn 0.5s ease; }
.lightbox.active { display:flex; }

/* ===== الخريطة ===== */
.map-container { max-width:1200px; margin:50px auto; border-radius:12px; overflow:hidden; animation: fadeIn 1.5s ease; }
iframe { width:100%; height:400px; border:none; }

/* ===== مشاريع مشابهة ===== */
.related-projects { max-width:1200px; margin:50px auto; padding:0 20px; }
.related-projects h3 { color:#facc15; margin-bottom:20px; }
.related-projects .cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.related-projects .card { background: rgba(255,255,255,0.05); border-radius:12px; overflow:hidden; cursor:pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.related-projects .card img { width:100%; }
.related-projects .card:hover { transform:scale(1.05); box-shadow:0 10px 25px rgba(0,0,0,0.5); }
.related-projects .card div { padding:15px; }

/* ===== أنيميشن ===== */
@keyframes fadeInDown { from {opacity:0; transform: translateY(-30px);} to {opacity:1; transform: translateY(0);} }
@keyframes fadeInLeft { from {opacity:0; transform: translateX(-30px);} to {opacity:1; transform: translateX(0);} }
@keyframes fadeInRight { from {opacity:0; transform: translateX(30px);} to {opacity:1; transform: translateX(0);} }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes zoomIn { from {opacity:0; transform: scale(0.8);} to {opacity:1; transform: scale(1);} }

@media(max-width:900px){ .project-section { grid-template-columns:1fr; } }