body[data-theme="light"] .course-card{
  background:linear-gradient(180deg, rgba(204, 245, 241, 0.95), rgba(239, 242, 239, 0.95));
  border:1px solid rgba(0,119,255,.4);
  color:#0a1220;
}

body[data-theme="light"] .course-card ul li,
body[data-theme="light"] .course-header p{
  color: #000;
}

body[data-theme="light"] .course-card{
  border: 1px solid rgb(123, 183, 190);
}
body[data-theme="light"] .course-card .desc{
  color: black;
}
body[data-theme="light"] .course-card.red ul li i{
  color: red;
}

/* ===== Course Card Base ===== */
.course-header{
  padding-top: 20px;
  text-align: center;
}

.course-header p{
  color: rgb(247, 218, 26);
  font-size: 1.3rem;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.course-header h2{
  color: red;
}

.course-details{
  padding: 20px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
}

/* 🔥 CARD WIDTH FIX */
.course-card{
  width:100%;
  min-height:100%;
  background:linear-gradient(180deg, rgba(34, 1, 1, 0.95), rgba(0, 3, 14, 0.95));
  border-radius:14px;
  padding:20px 20px;
  border:1px solid rgba(0,234,255,.25);
  box-shadow: 0 0 12px rgb(162, 183, 185);
  position:relative;
  overflow:hidden;
  transition:.3s ease;
}

/* Hover */
.course-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 42px rgba(0,234,255,.25);
}

/* Scanline Effect */
.course-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(0,234,255,.08), transparent 70%);
  opacity:.5;
  pointer-events:none;
}

/* ===== Variants ===== */
.course-card.red{
  border-color:rgba(56, 2, 2, 0.574);
  max-width: 100%;
}
.course-card.red:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(255, 230, 0, .9),     /* crisp edge */
    0 0 12px rgba(255, 230, 0, .7),     /* outer glow */
    0 0 28px rgba(255, 230, 0, .45);    /* soft spread */
}


/* ===== Title ===== */
.course-card h2{
  font-size:1.4rem;
  margin-bottom:6px;
  letter-spacing:.5px;
  color:var(--cyan);
}

.course-card.red h2{
  color:var(--cyan);
}

/* ===== Description ===== */
.course-card .desc{
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:12px;
}

/* ===== List ===== */
.course-card ul{
  list-style:none;
  padding:0;
  margin:0 0 14px;
}

.course-card ul li{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:.9rem;
  padding:6px 0;
  display:flex;
  align-items:flex-start;
  gap:8px;
  line-height:1.4;
  color:#e6f8ff;
}

.course-card ul li i{
  margin-top:2px;
  color:var(--cyan);
}

.course-card.red ul li i{
  color:yellow;
}

/* ===== Enroll Button ===== */
.enroll-btn{
  display:inline-block;
  margin-top:8px;
  padding:10px 18px;
  border-radius:8px;
  border:1px solid var(--cyan);
  color:var(--cyan);
  text-decoration:none;
  font-size:.9rem;
  letter-spacing:.5px;
  transition:.25s ease;
}

.enroll-btn:hover{
  background:var(--cyan);
  color:#000;
  box-shadow:0 0 14px rgba(234, 230, 16, 0.6);
}

/* ===== Mobile Responsive ===== */
@media(max-width:768px){
  .course-details{
    grid-template-columns: repeat(2, 1fr);
    padding: 10px 12px;   /* 🔥 left-right padding badha di */
    width:100%;
  }
  .course-card{
    width:100%;
  }
}

@media(max-width:480px){
  .course-details{
    grid-template-columns: repeat(1, 1fr);
    padding: 12px 14px;   /* 🔥 mobile me aur thoda gap */
    width:100%;
  }
  .course-card{
    width:100%;
  }
}