/* =========================
	Search Bar
========================== */

.custom-blog-search {
	margin-bottom: 60px;
	text-align: center;
}

.custom-blog-search form {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
}

.custom-blog-search input[type="text"] {
	width: 450px;
	max-width: 100%;
	padding: 16px 22px;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	outline: none;
	font-size: 15px;
	background: #fff;
	transition: 0.3s ease;
	box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.custom-blog-search input[type="text"]:focus {
	border-color: #fade1c;
	box-shadow: 0 0 0 3px rgba(250, 222, 28, 0.2);
}

/* =========================
	Search Buttons Group
========================== */

.search-btn-group {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* =========================
	Search Button
========================== */

.find-now {
	padding: 16px 30px!important;
	background: #fade1c !important;
	color: #000!important;
	border: none!important;
	border-radius: 12px!important;
	cursor: pointer;
	transition: all 0.3s ease;
}

.find-now:hover {
	background: #000;
	color: #fff;
	transform: translateY(-2px);
}

/* =========================
	Clear Button
========================== */

.clear-btn {
	display: inline-block;
	padding: 16px 28px;
	background: #f5f5f5;
	color: #000;
	border: 1px solid #ddd;
	border-radius: 12px;
	text-decoration: none;
	font-size: 15px;
	transition: all 0.3s ease;
}

.clear-btn:hover {
	background: #000;
	color: #fff;
	border-color: #000;
	transform: translateY(-2px);
}

/* =========================
	Blog Grid
========================== */

.custom-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 35px;
	margin-top: 30px;
}

/* =========================
	Blog Card
========================== */
.no-post{
	text-align: center;
	margin-top: 80px;
	margin-bottom: 80px;
}
.blog-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 5px 25px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
	position: relative;
}

.blog-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

/* =========================
	Blog Image
========================== */

.blog-image {
	overflow: hidden;
}

body .blog-image img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

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

/* =========================
	Blog Content
========================== */

.blog-content {
	padding: 25px;
}

.blog-meta {
	font-size: 13px;
	color: #777;
	margin-bottom: 12px;
	letter-spacing: 0.3px;
}

.blog-title {
	font-size: 24px;
	line-height: 1.4;
	margin-bottom: 15px;
	font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-title a {
	text-decoration: none;
	color: #111;
	transition: 0.3s ease;
}

.blog-title a:hover {
	color: #d1b700;
}

.blog-excerpt {
	font-size: 15px;
	line-height: 1.8;
	color: #555;
	margin-bottom: 25px;
}

/* =========================
	Read More Button
========================== */

.read-more-btn {
	display: inline-block;
	padding: 12px 24px;
	background: #fade1c;
	color: #000;
	border-radius: 10px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.read-more-btn:hover {
	background: #000;
	color: #fff;
	transform: translateY(-2px);
}

/* =========================
	Pagination
========================== */

.custom-pagination {
	margin-top: 60px;
	text-align: center;
}

.custom-pagination .page-numbers {
	display: inline-block;
	margin: 0 6px;
	padding: 12px 18px;
	background: #f5f5f5;
	border-radius: 10px;
	text-decoration: none;
	color: #000;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.custom-pagination .page-numbers:hover {
	background: #fade1c;
	color: #000;
}

.custom-pagination .current {
	background: #000;
	color: #fff;
}

/* =========================
	Responsive
========================== */

@media (max-width: 1024px) {

	.custom-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {

	.custom-blog-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.custom-blog-search form {
		flex-direction: column;
	}

	.custom-blog-search input[type="text"] {
		width: 100%;
	}

	.search-btn-group {
		width: 100%;
		flex-direction: column;
	}

	.find-now,
	.clear-btn {
		width: 100%;
		text-align: center;
	}

	.blog-title {
		font-size: 20px;
	}
}



.custom-breadcrumb-wrapper {
	padding: 18px 20px;
}

.custom-breadcrumb {
	max-width: 1140px;
	margin: auto;
	font-size: 14px;
	color: #777;
}

.custom-breadcrumb a {
	color: #000;
	text-decoration: none;
	transition: 0.3s ease;
}

.custom-breadcrumb a:hover {
	color: #fade1c;
}

.custom-breadcrumb span {
	margin: 0 6px;
}

.custom-breadcrumb .current {
	color: #777;
}




/* =========================
	Single blog banner
========================== */

.dynamic-blog-cta-wrapper{
	background:#f4f1eb;
	padding:60px 20px;
}

.dynamic-blog-cta{
	max-width:1200px;
	margin:auto;
	display:flex;
	/* align-items:center; */
	gap:50px;
	flex-wrap:wrap;
}

.dynamic-blog-left,
.dynamic-blog-right{
	flex:1;
	min-width:300px;
}

.dynamic-blog-title{
	font-size:2em;
	line-height:1.1;
	margin-bottom:20px;
	font-weight:700;
}

.dynamic-blog-author{
	font-size:20px;
	margin-bottom:10px;
}

.dynamic-blog-author strong{
	text-decoration:underline;
}


.dynamic-blog-box{
	background:#fff;
	padding:30px;
	display:flex;
	align-items:center;
	gap:25px;
}

.dynamic-blog-box img.book-img{
	width:7em;
	height:7em;
}

.dynamic-blog-box-content h4{
	margin:0 0 15px;
	font-size:16px;
	text-transform:uppercase;
	font-weight: 700;
}

.dynamic-blog-box-content p{
	margin-bottom:20px;
	font-size:15px;
	line-height:1.5;
}

.dynamic-blog-btn{
	display:inline-block;
	background:#fade1c;
	color:#000 !important;
	padding:14px 28px;
	border-radius:6px;
	text-decoration:none !important;
	font-weight:600;
}

.dynamic-blog-right img{
	    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.dynamic-blog-updated{
	font-size:16px;
	color:#666;
	margin-top:15px;
	text-align:right;
}

@media(max-width:767px){

	.dynamic-blog-title{
		font-size:34px;
	}

	.dynamic-blog-box{
		flex-direction:column;
		text-align:center;
	}

}