:root{
  --theme:#9E2654;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Segoe UI", sans-serif;
}

body{
  background:#f4f5f7;
  color:#222;
}

/* HERO */
.courses-hero{
  background:linear-gradient(135deg, #9E2654, #c13b73);
  color:#fff;
  text-align:center;
  padding:80px 20px;
}

/* BOLD WHITE HEADING */
.hero-title{
  font-size:42px;
  font-weight:800;
  color:#ffffff;
  margin-bottom:10px;
}

.courses-hero p{
  font-size:18px;
  opacity:0.95;
}

/* COURSES GRID */
.courses-wrapper{
  max-width:1200px;
  margin:60px auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:30px;
}

/* CARD */
.course-card{
  background:#fff;
  padding:30px 25px;
  border-radius:18px;
  box-shadow:0 15px 30px rgba(0,0,0,0.08);
  text-align:center;
  transition:all 0.4s ease;
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(40px);
}

.course-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:var(--theme);
}

/* ICON */
.icon-box{
  width:70px;
  height:70px;
  background:var(--theme);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  margin:0 auto 20px;
  font-size:28px;
  transition:0.4s;
}

/* TEXT */
.course-card h2{
  font-size:22px;
  margin-bottom:12px;
  color:#9E2654;
}

.course-card p{
  font-size:15.5px;
  line-height:1.7;
  color:#555;
}

/* HOVER EFFECTS */
.course-card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 25px 45px rgba(158,38,84,0.25);
}

.course-card:hover .icon-box{
  background:#fff;
  color:var(--theme);
  transform:rotate(360deg);
}

/* SCROLL ANIMATION */
.course-card.show{
  opacity:1;
  transform:translateY(0);
}