body {
margin: 0;
font-family: Arial, sans-serif;
background: #ffffff;
color: #111;
}

.container {
width: 90%;
max-width: 1100px;
margin: auto;
}

.header {
display: flex;
justify-content: space-between;
padding: 20px 0;
border-bottom: 1px solid #eee;
}

.logo {
color: #0b1f3a;
font-size: 20px;
}

nav a {
margin-left: 15px;
text-decoration: none;
color: #333;
}

.hero {
padding: 80px 0;
background: #0b1f3a;
color: white;
}

.hero h2 {
font-size: 28px;
max-width: 800px;
}

.hero p {
max-width: 700px;
opacity: 0.9;
}

.btn {
display: inline-block;
margin-top: 20px;
padding: 12px 20px;
background: #ffffff;
color: #0b1f3a;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
}

.section {
padding: 60px 0;
}

.section h3 {
color: #0b1f3a;
margin-bottom: 20px;
}

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}

.card {
padding: 20px;
border: 1px solid #eee;
border-radius: 6px;
text-align: center;
}

.dark {
background: #f5f7fa;
}

.footer {
background: #0b1f3a;
color: white;
padding: 40px 0;
text-align: center;
}