/* Reset & base styles */

* {margin:0; padding:0; box-sizing:border-box;}
  body {font-family: 'Roboto', sans-serif; background:#f4f4f9; color:#333;}

/* Header */
header {
background-color: #0a3d62;
color: #fff;
padding: 20px 0;
text-align: center;
border-bottom: 4px solid #ffcb05;
}
header h1 {font-family: 'Merriweather', serif; font-size: 2.5rem; margin-bottom: 5px;}
header p {font-size: 1.2rem; color:#ffd700;}

/* Navigation */
nav {
display: flex;
justify-content: center;
background: #1e3799;
}
nav a {
color: #fff;
text-decoration: none;
padding: 15px 25px;
font-weight: bold;
transition: background 0.3s;
}
nav a:hover {background: #0a3d62;}

/* Hero Section */
.hero {
text-align: center;
padding: 60px 20px;
background: url('[https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1400&q=80](https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1400&q=80)') no-repeat center center/cover;
color: #fff;
position: relative;
}
.hero::after {
content:'';
position: absolute;
top:0; left:0;
width:100%; height:100%;
background-color: rgba(0,0,0,0.5);
}
.hero-content {
position: relative;
z-index: 1;
}
.hero h2 {font-size: 2.2rem; margin-bottom: 20px;}
.hero p {font-size: 1.2rem; max-width: 700px; margin: auto;}

/* Blog Posts */
.posts {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
gap: 20px;
padding: 40px 20px;
max-width: 1200px;
margin: auto;
}
.post {
background: #fff;
border-left: 6px solid #0a3d62;
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.post:hover {transform: translateY(-5px);}
.post h3 {margin-bottom: 10px; color:#0a3d62;}
.post p {line-height: 1.6;}

/* Footer */
footer {
background: #1e3799;
color: #fff;
text-align: center;
padding: 20px 0;
margin-top: 40px;
}
footer a {color:#ffd700; text-decoration: none;}