/* Base */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0d0d0d;color:#f5f5f5;font-family:'Oswald',sans-serif;line-height:1.6}
a{color:#00ff88;text-decoration:none}
a:hover{color:#00cc66}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:24px}
.section{padding:32px 0}
h1,h2{color:#00ff88;letter-spacing:.5px}
h1{font-size:2.2rem}
h2{font-size:1.6rem;margin-bottom:12px}
p{color:#e9e9e9}

/* Header / Nav */
.site-header{background:#111;border-bottom:1px solid #222}
.nav{display:flex;gap:24px;justify-content:center;padding:12px 0}
.nav a{color:#fff;font-weight:600}
.nav a:hover{color:#00ff88}

/* Buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:10px;background:#00ff88;color:#0d0d0d;font-weight:700;transition:.25s}
.btn:hover{background:#00cc66}

/* Cards */
.card{background:#1a1a1a;border:1px solid #222;border-radius:12px;padding:18px;box-shadow:0 0 15px rgba(0,0,0,.35)}

/* Gallery grid (if you use on any page) */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;justify-items:center}
.gallery img{width:100%;height:200px;object-fit:cover;border-radius:10px;box-shadow:0 0 12px rgba(0,0,0,.5);transition:transform .25s}
.gallery img:hover{transform:scale(1.04)}

/* Page title banner (optional) */
.page-hero {
  background: #111;
  border-bottom: 1px solid #222;
  padding: 25px 0;   /* reduced height */
  text-align: center;
  color: #fff;
}

.page-hero h1 {
  margin: 0;
  font-size: 2rem;   /* adjust size if needed */
  color: #00ff88;    /* keep theme neon green */
}
/* Blog Grid Layout */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.blog-grid .card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
}
/* --- Blog Grid Styles --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.blog-card {
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  padding: 16px;
  text-align: center;
}

.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

.blog-card h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #fff;
}

.blog-card p {
  font-size: 0.95rem;
  color: #bbb;
  margin-bottom: 16px;
}

.blog-card a.btn {
  background: #e63946;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.blog-card a.btn:hover {
  background: #ff4757;
}
/* Blog Section */
.blog {
  padding: 60px 20px;
  text-align: center;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 40px;
  color: #00ff99; /* neon green from theme */
}

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

.blog-card {
  background: #111;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
  transition: transform 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.blog-card h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #fff;
}

.blog-card p {
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 15px;
}

.blog-card .btn {
  display: inline-block;
  padding: 8px 16px;
  background: #00ff99;
  color: #000;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.blog-card .btn:hover {
  background: #00cc77;
}
/* --- Clean Blog Grid Fix --- */
.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #00ff99;
}

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

.blog-card {
  background: #111;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
  transition: transform 0.3s ease;
  text-align: center;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.blog-card h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #fff;
}

.blog-card p {
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 15px;
}