body[data-theme="light"] .student-card,
body[data-theme="light"] .fancy-box{
  background:
  radial-gradient(circle at 20% 20%, rgba(21, 240, 236, 0.25), transparent 40%),
  radial-gradient(circle at 80% 80%, rgba(247, 250, 251, 0.25), transparent 40%),
  linear-gradient(180deg, #eaf5f6, #eaebee);
  color: #000;}

  /* Light Theme: Footer text black */
body[data-theme="light"] main h2,
body[data-theme="light"] .fancy-box p,
body[data-theme="light"] .student-name,
body[data-theme="light"] .fancy-box h1,
body[data-theme="light"] .value,
body[data-theme="light"] .label{
    color:var(--muted);
}

body[data-theme="light"] .student-card{
border: 1px solid rgb(179, 233, 244);
}


/* ====== SECTION TITLE ====== */
main h2{
  text-align:center;
  margin:40px 0 20px;
  font-size:32px;
  letter-spacing:1px;
  color:#00eaff;
  text-shadow:0 0 10px rgba(0,234,255,.7);
}

/* ====== GRID ====== */
.experts-container{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  padding:20px;
}

/* ====== CARD ====== */
.student-card{
  background:
    radial-gradient(circle at 15% 20%, rgba(255,43,43,.08), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(0,234,255,.08), transparent 40%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, #080000, #02040a);
  backdrop-filter: blur(10px);
  border:1px solid rgba(82, 16, 16, 0.423);
  border-radius:14px;
  padding:16px;
  text-align:center;
  position:relative;
  overflow:hidden;
  transition:.35s ease;
  box-shadow: 0 0 12px rgb(162, 183, 185);
}

.student-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255, 0, 0, 0.15), transparent 70%);
  opacity:0;
  transition:.4s;
}

.student-card: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 */
}

.student-card:hover::before{
  opacity:1;
}

/* ====== IMAGE ====== */
.student-card img{
  width:150px;
  height:150px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid #3702028b;
  box-shadow:0 0 15px rgba(245, 245, 52, 0.6);
  margin-bottom:10px;
}

/* ====== NAME ====== */
.student-name{
  font-size:18px;
  font-weight:700;
  color:#00eaff;
  margin-bottom:8px;
  letter-spacing:.5px;
  text-shadow:0 0 8px rgba(0,234,255,.6);
}

/* ====== LABEL + VALUE ====== */
.label{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:15px;
  text-transform:uppercase;
  color:#9fb7c3;
  margin-top:6px;
  letter-spacing:1px;
}

.value{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:14px;
  color:#fff;
  margin-bottom:6px;
}

/* ====== FANCY BOX ====== */
.fancy-box{
  margin:50px 20px;
  padding:30px;
  border-radius:16px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,43,43,.08), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(0,234,255,.08), transparent 40%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, #080000, #02040a);
  box-shadow:0 14px 20px rgb(108, 2, 2);
  text-align:center;
}

.fancy-box h1{
  color:#00eaff;
  margin-bottom:6px;
  text-shadow:0 0 12px rgba(0,234,255,.7);
}

.fancy-box h3{
  color:#9fb7c3;
  margin-bottom:10px;
}

.fancy-box p{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#d9f6ff;
  max-width:700px;
  margin:auto;
  line-height:1.6;
}

/* ====== MOBILE FIX ====== */
@media(max-width:600px){
  main h2{font-size:24px;}
  .student-card img{width:120px;height:120px;}
  .student-name{font-size:18px;}
  .label{font-size: 16px;}
  .value{font-size: 16px;}
  
.experts-container{
  display:grid;
  grid-template-columns:repeat(1, 1fr);
  gap:20px;
  padding:20px;
}
    
}