/* RESET */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif;}
body { background:#f4f7fb; color:#222; }

/* HEADER */
.header {
  width: 100%;
  padding: 15px 30px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* LOGO */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #333;
}

.logo img {
  width: 120px;
  height: 40px;
  object-fit: contain;
}

/* NAVIGATION */
.nav {
  display: flex;
  gap: 25px;
}

.nav-link {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  transition: 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #4a6cf7;
}

/* MOBILE MENU ICON */
.menu-icon {
  font-size: 28px;
  cursor: pointer;
  display: none;
}

/* RESPONSIVE NAV MENU */
@media (max-width: 768px) {
  .nav {
    position: absolute;
    top: 70px;
    right: 0;
    background: #fff;
    flex-direction: column;
    width: 200px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: none;
  }

  .nav.show {
    display: flex;
  }

  .menu-icon {
    display: block;
  }
}

/* HERO */
.hero-section { position:relative; display:flex; align-items:center; justify-content:center; text-align:center; height:500px; background:url('https://images.unsplash.com/photo-1554224154-22dec7ec8818') no-repeat center/cover; border-radius:20px; margin:30px 7%; overflow:hidden; }
.hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(46,46,136,0.5);}
.hero-content { position:relative; color:#fff; z-index:2; }
.hero-title { font-size:48px; font-weight:700; margin-bottom:20px; animation: fadeIn 2s ease-in; }
.hero-subtitle { font-size:20px; margin-bottom:30px; animation: fadeIn 3s ease-in; }
.hero-btn { padding:14px 40px; background:rgba(255,255,255,0.8); color:#2e2e88; border-radius:50px; text-decoration:none; font-weight:600; transition:0.3s; }
.hero-btn:hover { background:rgba(255,255,255,1); }

/* STEPS / TIMELINE */
.steps-section { padding:80px 7%; text-align:center; }
.section-title { font-size:36px; margin-bottom:50px; color:#2e2e88; }
.timeline { display:flex; flex-direction:column; gap:40px; align-items:center; position:relative; }
.timeline::before { content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:4px; height:100%; background:#2e2e88; border-radius:2px; }
.timeline-item { display:flex; flex-direction:row; align-items:center; position:relative; width:60%; }
.timeline-item:nth-child(even) { flex-direction:row-reverse; }
.timeline-icon { width:60px; height:60px; background:#2e2e88; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; z-index:2; }
.timeline-content { background:#fff; padding:25px; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,0.08); width:60%; margin-left:-30px; margin-right:-30px; }
.timeline-item:nth-child(even) .timeline-content { margin-left:0; margin-right:-30px; }

/* CATEGORIES */
.categories-section { padding:80px 7%; }
.categories-grid { display:flex; flex-wrap:wrap; gap:30px; justify-content:center; }
.category-card { position:relative; width:250px; height:250px; border-radius:20px; overflow:hidden; cursor:pointer; transition:0.5s; box-shadow:0 10px 25px rgba(0,0,0,0.08);}
.category-card img { width:100%; height:100%; object-fit:cover; transition:0.5s; }
.category-card:hover img { transform:scale(1.1); }
.category-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(46,46,136,0.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:0.5s; }
.category-card:hover .category-overlay { opacity:1; }
.category-overlay h3 { color:#fff; font-size:24px; font-weight:700; }

/* PROGRAMS SECTION */
.programs-section { padding:80px 7%; background:#f0f6ff; border-radius:20px; text-align:center; }
.programs-grid { display:flex; flex-wrap:wrap; gap:30px; justify-content:center; }
.program-card { background:#fff; border-radius:20px; padding:30px; width:280px; box-shadow:0 10px 25px rgba(0,0,0,0.08); transition:0.3s; cursor:pointer; }
.program-card:hover { transform:translateY(-10px); }
.program-icon { font-size:40px; margin-bottom:15px; }

/* TESTIMONIALS */
.testimonials-section { padding:80px 7%; background: #e0f0ff; border-radius:20px; }
.testimonials-grid { display:flex; flex-wrap:wrap; gap:30px; justify-content:center; }
.testimonial-card { width:300px; background:rgba(255,255,255,0.3); backdrop-filter:blur(10px); padding:25px; border-radius:20px; box-shadow:0 8px 25px rgba(0,0,0,0.05); transition:0.3s; }
.testimonial-card:hover { transform:translateY(-8px); }
.testimonial-card h4 { margin-top:15px; color:#2e2e88; }

/* CTA */
.cta-section {
  padding: 80px 7%;
  background: linear-gradient(135deg, #2e2e88, #6a6aff);
  text-align: center;
  border-radius: 20px;
  color: #fff;
  margin: 50px 7%;
  position: relative;
  overflow: hidden;
}

.cta-decor {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  top: -50px;
  left: -50px;
}

.cta-btn {
  padding: 16px 50px;
  background: #fff;
  color: #2e2e88;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
  font-size: 18px;
  display: inline-block;
  margin-top: 30px;  /* <-- Added gap between text and button */
}

.cta-btn:hover {
  background: rgba(255, 255, 255, 0.9);
}


/* FOOTER */
.footer { padding:30px; text-align:center; background:#fff; font-size:15px; border-top:1px solid #eee; }

/* ANIMATIONS */
@keyframes fadeIn { 0%{opacity:0; transform:translateY(20px);} 100%{opacity:1; transform:translateY(0);} }

/* RESPONSIVE */
@media(max-width:900px){
.hero-section { height:400px; }
.timeline-item { width:90%; flex-direction:column; }
.timeline-item:nth-child(even) { flex-direction:column; }
.timeline-content { width:100%; margin:20px 0 0 0; }
.categories-grid, .programs-grid, .testimonials-grid { flex-direction:column; align-items:center; }
.nav { position:fixed; top:70px; right:-100%; background:#fff; width:60%; height:calc(100% - 70px); flex-direction:column; padding:40px 20px; gap:20px; transition:0.3s; }
.nav.active { right:0; }
.menu-icon { display:block; }
}