/* CSS Document */
@import url("fonts.css"); /* Page layout styles */
@import url("login.css"); /* Login styles */
@import url("alert-box.css"); /* Alert box styles */
@import url("custom.css"); /* Custom styles */
@import url("header.css"); /* Header styles */
@import url("msg-box.css"); /* Footer styles */
@import url("footer.css"); /* Footer styles */
@import url("color-codes.css"); /* Standard Color styles */
@import url("tabs.css"); /* Standard Color styles */
@import url("containers.css"); /* Standard Color styles */
.blog-list{
	width: 100%;
	max-width: 1366px;
	margin: auto;
	display: grid;
	grid-template-columns: 100%;
	gap:20px;
	padding:20px;
}
.blog-list-item{
	width: 100%;
	display: block;
}
.bli-image-cont{
	width:100%;
	aspect-ratio: 16/9;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.bli-image, .bli-image img{
	width: 100%;
	position: absolute;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.bli-title{
	width: 100%;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.5;
	padding:10px 0px;
}
.bli-excerpt{
	width: 100%;
	font-weight: 400;
	font-size: 1.0rem;
	line-height: 1.5;
	color:#655;
}
.bli-meta{
	width: 100%;
	display:flex;
	flex-direction: row;
	padding:10px 0px;
}
.bli-meta-item{
	width: auto;
	display: flex;
	flex-direction: row;
	gap:10px;
}
.bli-meta-item:hover{
	background-color: azure;
}
.bli-date-icon{
	width: 20px;
	height: 20px;
	fill:#aaa;
}
.bli-date-text{
	font-size: 0.875rem;
	line-height: 20px;
	display: inline-block;
	padding-right: 10px;
}
.blogs-breaker{
	background-color: #FDFBEE;
}
.blogs-breaker .breaker-banner{
	background-color: #fff;
	aspect-ratio: 1;
}
.bbb-text-cont{
	width: 100%;
	position: absolute;
	top:50%;
	left: 20%;
	transform: translateY(-50%);
}
.bbb-text-cont h2{
	width: 100%;
	font-size: 1.5rem;
	color:#FDFBEE;
	line-height: 1;
}
.bbb-text-cont span{
	font-size: 1.5rem;
	font-weight: 600;
	color:#C64F27;
	line-height: 1;
}
.blogs-pagination{
	width: 100%;
	max-width: 1000px;
	margin:auto;
	padding:20px 0px;
}
.pagination{
	width: 100%;
	display: flex;
	gap:10px;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.pagination li {
	box-sizing: border-box;
	padding-right: 10px;
}
.pagination li a {
	box-sizing: border-box;
	background-color: #e2e6e6;
	padding: 8px;
	text-decoration: none;
	font-size: 1.0rem;
	font-weight: bold;
	color: #616872;
	border-radius: 4px;
	width: 35px;
	height: 35px;
	display: block;
	text-align: center;
	border-radius: 50%;
}
.pagination li a:hover {
	background-color: #d4dada;
}
.pagination .next a, .pagination .prev a {
	text-transform: uppercase;
	font-size: 12px;
}
.pagination .currentpage a {
	background-color: #C64F27;
	color: #fff;
}
.pagination .currentpage a:hover {
	background-color: #933319;
}
@media screen and (min-width:500px){
	.blog-list{
		width: 100%;
		max-width: 1366px;
		margin: auto;
		display: grid;
		grid-template-columns: calc(50% - 10px) calc(50% - 10px);
		gap:20px;
	}
}
@media screen and (min-width:767px) {
	.blog-list{
		width: 100%;
		max-width: 1366px;
		margin: auto;
		display: grid;
		grid-template-columns: calc(33.333% - 10px) calc(33.333% - 10px) calc(33.333% - 10px);
		gap:20px;
	}
	.blogs-breaker{
		background-color: #FDFBEE;
	}
	.blogs-breaker .breaker-banner{
        background-color: #fff;
        aspect-ratio: 200/75;
    }
	.bbb-text-cont{
		width: 40%;
		position: absolute;
		top:50%;
		left: 20%;
		transform: translateY(-50%);
	}
	.bbb-text-cont h2{
		width: 100%;
		font-size: 5.5rem;
		color:#FDFBEE;
		line-height: 1;
	}
	.bbb-text-cont span{
		font-size: 5.5rem;
		font-weight: 600;
		color:#C64F27;
		line-height: 1;
	}
}