:root {
  --bg:#f1f5f9;
  --card:#fff;
  --text:#111827;
  --primary:#2563eb;
}

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

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


header {
    background: #56668b;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    height: 40px;
}

.container {
  max-width:1100px;
  margin:30px auto;
  padding:25px;
  background:var(--card);
  border-radius:12px;
}
nav a {
    color: #e5e7eb;
    margin-left: 10px;
    text-decoration: none;
    font-weight: bold;
}

.upload {
  border:2px dashed var(--primary);
  padding:20px;
  margin:10px 0;
  text-align:center;
  border-radius:10px;
}

button {
  background:var(--primary);
  color:white;
  padding:10px 20px;
  border:none;
  border-radius:8px;
}

textarea {
  width:100%;
  height:160px;
}

.progress {
  height:6px;
  background:#ddd;
  margin-top:10px;
  display:none;
}

.bar {
  height:6px;
  width:0%;
  background:var(--primary);
}

footer {
    background: #0f172a;
    color: #e5e7eb;
    padding: 40px 20px;
    margin-top: 50px;
    text-align: center;
}

.footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    margin: 0 12px;
    font-size: 15px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #60a5fa;
}

.social-icons {
    margin: 15px 0;
}

.social-icons a {
    color: #cbd5e1;
    margin: 0 10px;
    font-size: 22px;
    transition: 0.3s;
    text-decoration: none;
}

.social-icons a:hover {
    color: #60a5fa;
}

.footer-credit {
    margin-top: 15px;
    font-size: 14px;
    color: #94a3b8;
}
.blog-card {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

.blog-card img {
    width: 200px;
    border-radius: 8px;
}

.blog-card h3 {
    margin: 0;
}

.read-more {
    color: #2563eb;
    text-decoration: none;
}