body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #0A0F1C;
color: white;
}

header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: #111827;
position: sticky;
top: 0;
}

nav a {
color: #00F5FF;
margin-left: 20px;
text-decoration: none;
font-weight: bold;
}

.hero {
text-align: center;
padding: 120px 20px;
background: linear-gradient(120deg,#0A0F1C,#121f3d);
}

.hero h2 {
font-size: 40px;
}

button {
background: #00F5FF;
border: none;
padding: 12px 24px;
cursor: pointer;
font-size: 16px;
border-radius: 6px;
}

section {
padding: 70px 20px;
max-width: 1100px;
margin: auto;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
gap: 20px;
}

.card {
background: #111827;
padding: 20px;
border-radius: 10px;
transition: 0.3s;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

footer {
text-align: center;
padding: 30px;
background: #111827;
}
/* Remove ALL link styling inside Learning cards */
#learning a,
#learning a:link,
#learning a:visited,
#learning a:hover,
#learning a:active {
  color: inherit !important;
  text-decoration: none !important;
}

/* Make entire card clickable */
a.card-link {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
}

a.card-link * {
  color: inherit !important;
  text-decoration: none !important;
}
/* Force card text color (consistent white) */
#learning .card,
#learning .card h3,
#learning .card p {
  color: #fff !important;
}

/* Better UX: show it's clickable */
a.card-link .card {
  cursor: pointer;
}

a.card-link .card:hover {
  transform: translateY(-6px);
}