body { margin:0; font-family: 'Segoe UI'; background:#f5f5f5; color:#222; }
a { text-decoration:none; }

.navbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 40px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.logo { font-size:24px; font-weight:700; }
.navbar nav a { margin-left:20px; font-size:16px; color:#333; }

.btn {
  background:#000; color:#fff; padding:10px 18px; border-radius:5px;
}

.hero {
  padding:100px 20px; text-align:center;
  background:#111; color:#fff;
}
.hero h1 { font-size:42px; margin-bottom:10px; }

.container { width:90%; max-width:1200px; margin:40px auto; }
.section-title { font-size:26px; margin-bottom:20px; }

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

.card {
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  transition:0.3s; cursor:pointer;
}
.card:hover { transform:translateY(-5px); }
.card img { width:100%; height:180px; object-fit:cover; }
.card-body { padding:15px; }
.card-title { font-size:20px; font-weight:bold; }

.blog-detail img { width:100%; max-height:400px; object-fit:cover; border-radius:10px; }
.blog-detail h1 { margin-top:20px; }
.blog-detail p { line-height:1.7; }

.form { background:#fff; padding:25px; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.1); }
.input, .textarea {
  width:100%; margin-bottom:15px; padding:10px; border:1px solid #ccc; border-radius:5px;
}
.textarea { height:150px; }

.btn.full { width:100%; margin-top:10px; }