body {
  margin: 0;
  font-family: "Geist", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #F5F5F5;
  color: #2d2d2d;
}

/* HERO */
.projects-hero {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.projects-hero-bg {
  position: absolute;
  inset: 0;
  background: url("../images/projects.png") center/cover no-repeat;
  opacity: 0.7;
}

.projects-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,114,63,0.85);
}

.projects-hero-fade {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(to top, white, transparent);
}

.projects-hero-content {
  position: relative;
  z-index: 2;
  color: white;
}

.projects-hero-content h1 {
  font-size: 48px;
  font-weight: 700;
}

/* ====== STATS (FIXED GRID) ====== */
.projects-stats {
  background: #F5F5F5;
  padding: 80px 0;
}

.stats-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0 20px;
}

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

.stat-card {
  background: white;
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  text-align: center;
}

.stat-card i {
  font-size: 30px;
  color: #00723F;
  margin-bottom: 10px;
}

.stat-card h3 {
  font-size: 36px;
  font-weight: 700;
  color: #00723F;
}

/* FILTERS */
.project-filters {
  background: #F5F5F5;
  padding: 18px 0 14px;
  text-align: center;
}

#category-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

#category-buttons button {
  padding: 7px 18px;
  border-radius: 999px;
  border: 1.4px solid #00723F;
  background: white;
  color: #00723F;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}

#category-buttons button.active {
  background: #00723F;
  color: white;
}

/* LEGEND */
.project-legend {
  background: #F5F5F5;
  padding: 10px 0 18px;
  text-align: center;
}

.legend-row {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: #444;
}

.legend {
  display: inline-block;
  width: 20px;
  height: 8px;
  border-radius: 6px;
  margin-right: 6px;
}

.completed { background:#00723F; }
.ongoing {
  background: linear-gradient(90deg,#00723F,#00c28a,#00723F);
  background-size:200% 100%;
  animation: move 2.5s infinite;
}
.recurring { background:#FFB703; }
.pending { background:#999; }

@keyframes move {
  0%{background-position:0%}
  50%{background-position:100%}
  100%{background-position:0%}
}

/* TABLE */
.projects-table-section {
  padding: 10px 0 70px;
}

.table-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table thead {
  background: #00723F;
  color: white;
  font-size: 0.95rem;
}

table thead th {
  padding: 14px 16px;
  font-weight: 600;
}

table tbody td {
  padding: 14px 16px;
  font-size: 0.93rem;
  color: #333;
  border-bottom: 1px solid #eee;
}

/* Progress */
.progress-bg {
  width: 100%;
  height: 10px;
  background: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.progress-bar {
  height: 10px;
  border-radius: 6px;
}

/* PAGINATION */
/* ===== PAGINATION – EXACT ALIGNMENT FIX ===== */

.pagination-bar {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* container that holds Prev – numbers – Next */
.pager {
  display: flex;
  align-items: center;
  gap: 10px;          /* consistent spacing between elements */
}

/* individual page numbers container */
#pageNumbers {
  display: flex;
  align-items: center;
  gap: 6px;           /* tighter, cleaner spacing like your image */
}

/* ALL buttons share the same height + padding */
/* ========== CLEAN, WELL-SPACED PAGINATION (MATCHES YOUR DESIGN) ========== */

.pagination-bar {
  margin-top: 24px;
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;            /* 👈 gives breathing room like your design */
}

/* Right side wrapper: Prev | numbers | Next */
.pager {
  display: flex;
  align-items: center;
  gap: 14px;                  /* 👈 more air between Prev / numbers / Next */
}

/* Page numbers container */
#pageNumbers {
  display: flex;
  align-items: center;
  gap: 8px;                   /* 👈 nicer, even spacing between 1 and 2 */
}

/* Make ALL buttons same size and aligned */
.pagination-bar button {
  height: 38px;               /* 👈 consistent button height */
  min-width: 44px;            /* 👈 keeps numbers nicely shaped */
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #00723F;
  background: white;
  color: #00723F;
  border-radius: 8px;         /* 👈 softer corners like your screenshot */
  font-weight: 600;
  font-size: 0.9rem;
}

/* Active page */
#pageNumbers button.active {
  background:#00723F;
  color:white;
}

/* Disabled buttons */
.pagination-bar button:disabled {
  color: #aaa;
  border-color: #ddd;
  cursor: not-allowed;
}



/* MODAL */
.project-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.hidden { display:none; }

.modal-content {
  background:white;
  border-radius:16px;
  padding:30px;
  max-width:500px;
  width:90%;
  position:relative;
}

.close-btn {
  position:absolute;
  top:10px;
  right:10px;
  background:none;
  border:none;
  font-size:20px;
  color:#D62828;
  cursor:pointer;
}

.modal-close-btn {
  margin-top:15px;
  background:#00723F;
  color:white;
  border:none;
  padding:8px 14px;
  border-radius:6px;
  cursor:pointer;
}