.hero{
background:#0b3d91;
padding:40px 0;
text-align:center;
}

.hero h1{
margin:0;
font-size:34px;
color:white;
}


.hero p{
max-width:700px;
margin:auto;
margin-top:10px;
color:white;
}


h2 {
  font-size: 26px;
  font-weight: 700;
  color: #0d1b2a;
  margin: 30px 0 20px;
  padding: 12px 15px 12px 18px;

  background: linear-gradient(to right, #e3f2fd, #ffffff);
  border-left: 6px solid #007bff;
  border-radius: 6px;

  position: relative;
}
h2:hover {
  background: linear-gradient(to right, #d0e7ff, #ffffff);
  transition: 0.3s ease;
}
@media (max-width: 768px) {
  h2 {
    font-size: 22px;
    padding: 10px 12px 10px 15px;
  }
}





.section{
padding:40px 0;
}

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

.card{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

.card h3{
color:#0b3d91;
}

.card a{
text-decoration:none;
color:#0b3d91;
font-weight:bold;
}

.table-section table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}

.table-section th{
background:#0b3d91;
color:white;
padding:10px;
}

.table-section td{
border:1px solid #ddd;
padding:10px;
}