/* ====== Base Styles ====== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Manrope:wght@400;500;600&display=swap');

* {
   
  font-family: "Manrope", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", serif;
}/* ====== PROGRAMS SECTION ====== */
.programs-section {
  padding: 80px 60px;
  background-color: #fff;
   
  overflow: hidden;
}

.section-title {
  font-size: 2.5rem;
  color: #003366;
  text-align: center;
  position: relative;
  margin-bottom: 30px;
  opacity: 0;
  transform: translateX(-50px);
}

.section-title .underline {
  display: block;
  width: 60px;
  height: 4px;
  background-color: #003366;
  margin: 10px auto 0;
  opacity: 0;
  transform: translateX(50px);
}

.programs-intro {
  font-size: 1.1rem;
  color: #003366;
  margin-bottom: 40px;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(50px);
  text-align: justify;
}

/* ====== GRID STYLE ====== */
.programs-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 30px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: program-counter; /* Initialize counter */
}

.programs-list li {
  position: relative;
  padding-left: 30px;
  font-size: 1rem;
  color: #003366;
  opacity: 0;
  transform: translateY(30px);
  line-height: 1.6;
  counter-increment: program-counter; /* Increment counter */
}

/* NUMBER STYLE (REPLACE CHECK ICON) */
.programs-list li::before {
  content: counter(program-counter) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: #003366;
  font-weight: bold;
  font-size: 1.1rem;
}


/* ====== ANIMATION CLASSES ====== */
.animate-slide-left { animation: slideLeft 1s forwards ease-out; }
.animate-slide-right { animation: slideRight 1s forwards ease-out; }
.animate-slide-bottom { animation: slideBottom 1s forwards ease-out; }
.animate-fade { animation: fadeIn 1s forwards ease-out; }

@keyframes slideLeft { to { opacity:1; transform:translateX(0); } }
@keyframes slideRight { to { opacity:1; transform:translateX(0); } }
@keyframes slideBottom { to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { to { opacity:1; } }

/* ====== RESPONSIVE ====== */
@media (max-width: 1200px) {
  .programs-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .programs-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .programs-list { grid-template-columns: 1fr; }
}