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

.blog-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.blog-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom; /* 👇 30% bottom crop effect */
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-image img {
  transform: scale(1.05);
}

.blog-content {
  padding: 18px;
}

.blog-content h3 {
  font-size: 1.2rem;
  color: #000B;
  margin-bottom: 10px;
}

.blog-content p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: 15px;
}

.button {
  display: inline-block;
  background: #0078ff;
  color: #fff;
  padding: 8px 18px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 0.9rem;
  transition: background 0.3s;
}

.button:hover {
  background: #005ad4;
}
/*comments style */
form {margin-bottom: 20px;}
input, textarea {
  width: 100%; margin-bottom: 5px; padding: 10px;
  border: 1px solid #ccc; border-radius: 5px; font-size: 14px;
}
textarea {height:100px;}
button {
  padding: 8px 16px; background: #007bff; color: #fff;
  border: none; border-radius: 5px; cursor: pointer;
}
button:hover {background: #0056b3;}
.comments-wrapper {width: 100%; margin: 0 auto;}
.comment {
  background: #fff; border: 1px solid #ddd; border-radius: 10px;
  padding: 0; margin-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}
.comment:hover {box-shadow: 0 3px 8px rgba(0,0,0,0.1);}
.flex-box {display:flex; justify-content: space-between; align-items:center; }
.comment-header {margin-bottom: 6px; background:#696FC7; border-radius: 10px 10px 10px 0; padding:0px 10px; min-width:120px;}
.comment-name {font-weight:600; color:#fff; font-size:12px; text-align: center;}
.comment-email {color: #fff; font-size:13px; font-style: italic; display:none;}
.comment-body {color: #444; font-size:15px; line-height:1.5; margin-bottom: 0px; min-height:60px; padding:10px; border-bottom: 1px solid #ccc;}
.comment-footer {background:#F3F3F3; padding:5px;}
.comment-footer a {color:#fff; text-decoration:none; font-size:12px; background:#696FC7;  padding:4px 30px; border-radius:8px; text-align:center; margin-left:10px; line-height: 18px;}
.comment-footer a:hover {text-decoration: underline;}
.replies {margin-left:3px; border-left:2px solid #eee; padding-left:15px; margin-top:10px;}
.reply {background:#fafafa;}
#replyInfo {font-size:14px; color:#007bff; margin-bottom:5px;}
#cancelReply {margin-left:10px; background:#dc3545;}
#cancelReply:hover {background:#a71d2a;}
.loader {display:none; width:140px; background: #FF9013; height:8px;} 
.loader marquee {display:flex; gap: 5px;}
.bar {background: green; width:20px; height:4px;}
  @media (max-width:720px){ .row{ flex-direction:column; } table{ min-width:100%; } }