/* start blog */

.blog .blog-box{
	min-height: 45rem;
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
	margin-bottom: 3rem;
}
.blog .blog-box img{
	width: 100%;
	object-fit: cover;
}
.blog .blog-box .img{
	position: relative;
}
.blog .blog-box .video-btn{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: transparent;
}
.blog .blog-box .video-btn span{
	width: 8rem;
	height: 8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--heading-color);
	background-color: var(--white-color);
	border-radius: 50%;
	font-size: 1.8rem;
	transition: var(--transition-3);
}
.blog .blog-box .video-btn span:hover{
	background-color: var(--heading-color);
	color: var(--white-color);
}
.blog .blog-box .date{
	position: absolute;
	left: 2rem;
	bottom: 2rem;
	background-color: var(--white-color);
	min-width: 15rem;
	color: var(--headig-color);
	padding: .5rem 1rem;
	border: .1rem solid var(--heading-color);
	font-size: 1.2rem;
	text-align: center;
}
.blog .blog-box .blog-box-body{
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.blog .blog-box .title{
	font-size: 2rem;
	color: var(--heading-color);
	transition: var(--transition-3);
}
.blog .blog-box .read-more{
	color: var(--font-color);
	font-size: 1.4rem;
	transition: var(--transition-3);
}
.blog .blog-box a:hover{
	color: var(--primary-color);
}
.blog .pagination a{
	color: var(--heading-color);
	border: .1rem solid var(--heading-color);
	background-color: transparent;
	width: 4rem;
	height: 5rem;
	display: flex;
	justify-content: center;
	align-items: center;	
	font-size: 1.6rem;
}
.blog .pagination a:hover,
.blog .pagination a.active{
	background-color: var(--heading-color);
	color: var(--white-color);
	text-decoration: none !important;
}

/* end blog */