/* HERO SECTION */
.course-hero {
  height:40vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(#0a1c48, #0a1c48), #0a1c48;
  color:#fff;
  text-align:center;
  padding:0 20px;
}
.hero-content h1 {font-size:48px; margin-bottom:20px;}
.hero-content p {font-size:20px; max-width:800px; margin:auto; line-height:1.6;}

/* COURSE DETAILS */
.course-details {margin:60px 0;}
.course-details h2 {font-size:36px; color:#0a1c48; margin-bottom:20px;}
.course-details p {font-size:16px; line-height:1.7; max-width:800px; margin:20px auto 40px auto;}

/* INFO CARDS */
.course-info {display:flex; justify-content:center; flex-wrap:wrap; gap:20px;}
.info-card {background:#fff; padding:25px 20px; border-radius:15px; width:250px; box-shadow:0 8px 20px rgba(0,0,0,0.08); transition:.3s; text-align:center;}
.info-card:hover {transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.12);}
.info-card h3 {color:#0a1c48; margin-bottom:10px;}
.info-card p {font-size:15px; color:#555;}

/* SUBJECTS GRID */
.course-subjects {margin:60px 0;}
.course-subjects h2 {font-size:36px; color:#0a1c48; margin-bottom:25px;}
.subjects-grid {display:flex; justify-content:center; flex-wrap:wrap; gap:15px;}
.subject-card {background:#0a1c48; color:#fff; padding:15px 20px; border-radius:12px; width:180px; font-size:15px; transition:.3s;}
.subject-card:hover {transform:scale(1.05); box-shadow:0 6px 18px rgba(0,0,0,0.15);}

/* CAREER GRID */
.career-opportunities {margin:60px 0;}
.career-opportunities h2 {font-size:36px; color:#0a1c48; margin-bottom:25px;}
.career-grid {display:flex; justify-content:center; flex-wrap:wrap; gap:15px;}
.career-card {background:#fff; padding:20px 15px; border-radius:15px; width:220px; box-shadow:0 6px 15px rgba(0,0,0,0.08); font-size:14px; transition:.3s;}
.career-card:hover {transform:translateY(-5px); box-shadow:0 8px 18px rgba(0,0,0,0.12);}

/* RESPONSIVE */
@media(max-width:950px){ .course-info, .subjects-grid, .career-grid {flex-direction:column; align-items:center;} }
@media(max-width:600px){ .hero-content h1 {font-size:32px;} .hero-content p {font-size:16px;} .info-card, .subject-card, .career-card {width:90%;} }