.blog-hero {
	text-align: center;
	padding: 60px 20px 30px;
}

.blog-hero h1 {
	font-size: 48px;
	font-weight: 700;
	background: linear-gradient(90deg, #4f46e5 0%, #db2777 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.blog-hero p {
	color: #666;
}

.blog-container {
	max-width: 1280px;
	margin: auto;
	padding: 40px 0px;
}

.blog-tabs {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.blog-tabs .tab {
    padding: 10px 18px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: #4b5562;
    font-size: 14px;
}

.blog-tabs .tab.active {
	background: linear-gradient(135deg,#6a5af9,#8f3df4);
	color: #fff;
	border: none;
}

#blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
	gap: 30px;
}

.blog-card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
	overflow: hidden;
}

.card-thumb {
	height: 180px;
	background: linear-gradient(135deg,#6a5af9,#8f3df4);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-thumb .icon {
	font-size: 48px;
	color: #fff;
}

.badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: #fff;
	color: #6a5af9;
	padding: 4px 10px;
	font-size: 12px;
	border-radius: 12px;
}

.card-body {
	padding: 20px;
}

.meta {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #777;
	margin-bottom: 10px;
}

.card-body h3 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #222;
    line-height: 20px;
}

.card-body p {
	font-size: 14px;
	color: #666;
}

.footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
	font-size: 13px;
}

.read-more {
	border: 1px solid #ddd;
	padding: 6px 12px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	color: #000;
}

#blog-pagination {
	text-align: center;
	margin-top: 40px;
}

.pg {
	margin: 4px;
	padding: 8px 14px;
	border: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
	color: #4b5562;
}
.pg:hover,
.pg.active {
	background: #6a5af9;
	color: #fff;
	border-color: #6a5af9;
	font-weight:600;
}
.blog-card .card-thumb span.badge {
	font-weight: 600;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	color: #ffffff;
}

.blog-card.cat-ssc .card-thumb span.badge {
	background-color: #1d4ed8;
}

.blog-card.cat-railway .card-thumb span.badge {
	background-color: #15803d;
}

.blog-card.cat-upsc .card-thumb span.badge {
	background-color: #7e22ce;
}

.blog-card.cat-state-pcs .card-thumb span.badge {
	background-color: #c2410c;
}

.blog-card.cat-dsssb .card-thumb span.badge {
	background-color: #0f766e;
}

.blog-card.cat-all-state-exams .card-thumb span.badge {
	background-color: #4338ca;
}

.blog-card .meta span.cat {
	font-weight:bold;
}
.blog-card.cat-ssc .meta span.cat {
	color: #1d4ed8;
}
.blog-card.cat-railway .meta span.cat {
	color: #15803d;
}
.blog-card.cat-upsc .meta span.cat {
	color: #7e22ce;
}
.blog-card.cat-state-pcs .meta span.cat {
	color: #c2410c;
}
.blog-card.cat-dsssb .meta span.cat {
	color: #0f766e;
}
.blog-card.cat-all-state-exams .meta span.cat {
	color: #4338ca;
}