:root{
--bg:#f4f6f8;
--text:#222;
--card:#ffffff;
--accent:#2563eb;
}

body.dark{
--bg:#0f172a;
--text:#e5e7eb;
--card:#1e293b;
}

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:var(--bg);
color:var(--text);
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:#111827;
color:white;
}

nav a{
color:white;
margin-right:20px;
text-decoration:none;
font-weight:bold;
}

.hero{
text-align:center;
padding:80px 20px;
background:linear-gradient(120deg,#2563eb,#3b82f6);
color:white;
}

.container{
max-width:1100px;
margin:auto;
padding:40px 20px;
}

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

.card{
background:var(--card);
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
overflow:hidden;
}

.card img{
width:100%;
height:180px;
object-fit:cover;
}

.card h3{
padding:15px;
margin:0;
}

.card p{
padding:0 15px 20px;
}

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

.gallery img{
width:100%;
border-radius:6px;
}

footer{
text-align:center;
padding:25px;
background:#111827;
color:white;
margin-top:40px;
}