:root{ --jdpc-green:#198754; --jdpc-gold:#f6c343; }
.hero-angled{ position:relative; isolation:isolate; }
.hero-angled::after{ content:""; position:absolute; inset:auto 0 0 0; height:40px; background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent); }
.section-title{ font-weight:800; letter-spacing: .2px; }
.card-lift:hover{ transform: translateY(-4px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.rounded-2xl{ border-radius:1.25rem; }


.impact-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .impact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }

  .timeline {
  position: relative;
  padding: 2rem 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 4px;
  height: 100%;
  background-color: #e0e0e0;
  transform: translateX(-50%);
}
.timeline-item {
  position: relative;
  width: 50%;
  padding: 1rem 2rem;
}
.timeline-item.left {
  left: 0;
  text-align: right;
}
.timeline-item.right {
  left: 50%;
}
.timeline-item h5 {
  font-size: 1.25rem;
  color: #198754;
  margin-bottom: 0.5rem;
}
.timeline-item p {
  margin: 0;
}

.impact-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .impact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }

  .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }

  /* Hover Effect */
  .card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
  }

  .project-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}