.filters { text-align: center; margin-bottom: 20px; }
.filters button { margin: 5px; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; background: #8aaa0d; color: white; transition: 0.3s; }
.filters button:hover { background: #aac651; }
#projects-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.project-card { background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); cursor: pointer; transition: 0.3s; }
.project-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(99, 161, 125, 0.2); }
.project-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
.project-card h3 { margin: 10px 0 5px; font-size: 18px; color: #111; }
.project-card p { font-size: 14px; color: #555; margin: 2px 0; }
.badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 12px; color: white; }
.badge.done { background: green; }
.badge.progress { background: orange; }

/* Lightbox */
/* Lightbox */
#lightbox {
  display: none;
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.7);
  justify-content:center;
  align-items:center;
  z-index:1000;
}#lightbox .content {
  background:white;
  padding:20px;
  border-radius:10px;
  width: 80vw;      /* 80% من عرض الشاشة */
  height: 80vh;     /* 80% من ارتفاع الشاشة */
  overflow-y:auto;
  position: relative;
  display: flex;
  flex-direction: column;
}#lightbox .close { position:absolute; top:10px; right:15px; font-size:20px; cursor:pointer; font-weight:bold; }
#lightbox-slider {
  flex: 1;                     /* ياخد كل المساحة المتاحة */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#lightbox-slider img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;  /* يحافظ على نسبة الصورة */
}
#lightbox .details { font-size:14px; color:#333; }
#load-more { display:block; margin: 20px auto; padding: 10px 20px; cursor:pointer; border:none; background:#8aaa0d; color:white; border-radius:5px; }
#load-more:hover { background:#aac651; }