/* =========================================================
   BLOG ARCHIVE
========================================================= */

.blog-archive {
	width: 100%;
	background: #ffffff;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.blog-archive-container {
	width: 100%;
	max-width: 1200px;

	margin: 0 auto;

	padding: 40px 0 60px;
}


/* =========================================================
   BLOG GRID
========================================================= */

.blog-post-grid {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	column-gap: 14px;
	row-gap: 20px;

	align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.blog-post-card {
	display: flex;
	flex-direction: column;

	width: 100%;
	min-width: 0;

	/* IMPORTANT - all cards same height */
	height: 385px;

	margin: 0;
	padding: 0;

	background: #f5f5f5;

	border: 0;
	border-radius: 0;

	overflow: hidden;

	box-sizing: border-box;
}


/* =========================================================
   IMAGE
========================================================= */

.blog-post-image {
	display: block;

	width: 100%;
	height: 170px;

	margin: 0;
	padding: 0;

	overflow: hidden;

	background: #eeeeee;

	flex-shrink: 0;
}


.blog-post-thumbnail {
	display: block !important;

	width: 100% !important;
	height: 170px !important;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: cover;

	border: 0 !important;

	transition: transform 0.3s ease;
}


.blog-post-card:hover .blog-post-thumbnail {
	transform: scale(1.03);
}

/* =========================================================
   CARD CONTENT
========================================================= */

.blog-post-content {
	display: flex;
	flex-direction: column;

	flex: 1;

	padding: 14px 14px 18px;

	box-sizing: border-box;
}


/* =========================================================
   TITLE
========================================================= */

.blog-post-title {
	display: -webkit-box;

	height: 58px;
	min-height: 58px;

	margin: 0 0 7px !important;
	padding: 0 !important;

	overflow: hidden;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 20px !important;
	line-height: 1.35 !important;

	font-weight: 700 !important;

	letter-spacing: 0 !important;

	color: #003f7d !important;

	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}


.blog-post-title a {
	display: block;

	margin: 0 !important;
	padding: 0 !important;

	font-family: inherit !important;

	font-size: inherit !important;
	line-height: inherit !important;

	font-weight: inherit !important;

	color: #003f7d !important;

	text-decoration: none !important;
}


.blog-post-title a:hover {
	color: #005ca8 !important;
}


/* =========================================================
   META
========================================================= */

.blog-post-meta {
	height: 17px;
	min-height: 17px;

	margin: 0 0 10px !important;
	padding: 0 !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 10px !important;
	line-height: 1.5 !important;

	font-weight: 400 !important;

	color: #666666 !important;

	white-space: nowrap;
}


.blog-post-meta .meta-separator {
	padding: 0 3px;

	color: #999999;
}


/* =========================================================
   EXCERPT
========================================================= */

/*
   IMPORTANT:
   Don't use a fixed height + overflow on the paragraph
   itself. The PHP should provide a short excerpt.
*/

.blog-post-excerpt {
	margin: 0 0 10px !important;
	padding: 0 !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 14px !important;

	line-height: 1.55 !important;

	color: #666666 !important;

	/* Prevent content from pushing Read More down */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;

	overflow: hidden;
}


.blog-post-excerpt p {
	margin: 0 !important;
	padding: 0 !important;

	font-family: inherit !important;

	font-size: inherit !important;

	line-height: inherit !important;

	color: inherit !important;
}


/* =========================================================
   READ MORE AREA
========================================================= */

.blog-post-button-wrap {
	margin-top: auto;

	padding-top: 10px;
}


/* =========================================================
   READ MORE
========================================================= */

.blog-read-more {
	display: inline-flex !important;

	align-items: center;

	gap: 5px;

	margin: 0 !important;
	padding: 0 !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 12px !important;

	line-height: 1.4 !important;

	font-weight: 700 !important;

	color: #003f7d !important;

	text-decoration: none !important;
}


.blog-read-more span {
	font-size: 15px;

	line-height: 1;

	transition: transform 0.2s ease;
}


.blog-read-more:hover {
	color: #005ca8 !important;
}


.blog-read-more:hover span {
	transform: translateX(3px);
}


/* =========================================================
   PAGINATION
========================================================= */

.blog-pagination {
	display: flex;

	align-items: center;
	justify-content: space-between;

	width: 100%;

	margin-top: 35px;

	padding-top: 20px;

	border-top: 1px solid #e5e5e5;
}


.blog-pagination-prev,
.blog-pagination-next {
	margin: 0;
	padding: 0;
}


.blog-pagination a {
	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 13px !important;

	line-height: 1.4 !important;

	font-weight: 600 !important;

	color: #003f7d !important;

	text-decoration: none !important;
}


.blog-pagination a:hover {
	color: #005ca8 !important;
}


/* =========================================================
   NO POSTS
========================================================= */

.blog-no-posts {
	padding: 60px 20px;

	text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

	.blog-archive-container {
		width: 90%;
		max-width: none;
	}

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.blog-archive-container {
		width: calc(100% - 30px);

		max-width: none;

		padding: 30px 0 50px;
	}

	.blog-post-grid {
		grid-template-columns: 1fr;

		row-gap: 20px;
	}

	.blog-post-card {
		height: auto;
		min-height: 385px;
	}

	.blog-post-image {
		height: auto;

		aspect-ratio: 16 / 9;
	}

	.blog-post-thumbnail {
		height: 100% !important;
	}

	.blog-post-content {
		padding: 16px;
	}

	.blog-post-title {
		font-size: 17px !important;

		height: 58px;
		min-height: 58px;
	}

	.blog-post-meta {
		font-size: 10px !important;
	}

	.blog-post-excerpt {
		display: -webkit-box;

		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;

		overflow: hidden;
	}

	.blog-pagination {
		margin-top: 30px;
	}

}


/*  sr single*/

/* =========================================================
   SINGLE BLOG PAGE
========================================================= */

.blog-single {
	width: 100%;
	background: #ffffff;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.blog-single-container {
	width: calc(100% - 40px);
	max-width: 1200px;

	margin: 0 auto;

	padding: 45px 0 70px;

	box-sizing: border-box;
}


/* =========================================================
   ARTICLE + SIDEBAR
========================================================= */

.blog-single-layout {
	display: grid;

	grid-template-columns: minmax(0, 1fr) 300px;

	gap: 45px;

	align-items: start;
}


/* =========================================================
   ARTICLE
========================================================= */

.blog-single-article {
	width: 100%;

	min-width: 0;

	margin: 0;

	padding: 0;
}


/* =========================================================
   BLOG TITLE
========================================================= */

.blog-single-title {
	width: 100% !important;

	max-width: 850px !important;

	margin: 0 0 15px !important;

	padding: 0 !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 42px !important;

	line-height: 1.18 !important;

	font-weight: 700 !important;

	letter-spacing: -0.5px !important;

	color: #333333 !important;
}


/* =========================================================
   META
========================================================= */

.blog-single-meta {
	display: flex;

	align-items: center;

	gap: 7px;

	margin: 0 0 28px !important;

	padding: 0 !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 13px !important;

	line-height: 1.5 !important;

	font-weight: 400 !important;

	color: #777777 !important;
}


.blog-single-meta .meta-separator {
	color: #aaaaaa;
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.blog-single-featured-image {
	width: 100%;

	max-width: 850px;

	height: 430px;

	margin: 0 0 35px;

	padding: 0;

	overflow: hidden;

	background: #eeeeee;
}


.blog-single-thumbnail {
	display: block !important;

	width: 100% !important;

	height: 100% !important;

	margin: 0 !important;

	padding: 0 !important;

	border: 0 !important;

	object-fit: cover;
}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.blog-single-content {
	width: 100%;

	max-width: 850px;

	margin: 0;

	padding: 0;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	line-height: 1.8;

	font-weight: 400;

	color: #555555;
}


/* Paragraph */

.blog-single-content p {
	margin: 0 0 22px !important;

	padding: 0 !important;
}


/* Headings */

.blog-single-content h2 {
	margin: 40px 0 17px !important;

	padding: 0 !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 28px !important;

	line-height: 1.3 !important;

	font-weight: 700 !important;

	color: #333333 !important;
}


.blog-single-content h3 {
	margin: 32px 0 15px !important;

	padding: 0 !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 22px !important;

	line-height: 1.35 !important;

	font-weight: 700 !important;

	color: #333333 !important;
}


/* Lists */

.blog-single-content ul,
.blog-single-content ol {
	margin: 0 0 25px 25px !important;

	padding: 0 !important;
}


.blog-single-content li {
	margin-bottom: 8px;
}


/* Links */

.blog-single-content a {
	color: #003f7d;

	text-decoration: underline;
}


.blog-single-content a:hover {
	color: #005ca8;
}


/* =========================================================
   TAGS
========================================================= */

.blog-single-tags {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 8px;

	margin-top: 35px;

	padding-top: 20px;

	border-top: 1px solid #eeeeee;
}


.tags-label {
	font-size: 13px;

	font-weight: 700;

	color: #333333;
}


.blog-single-tags a {
	display: inline-block;

	padding: 6px 10px;

	background: #f3f3f3;

	color: #003f7d;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	text-decoration: none;

	border: 1px solid #e2e2e2;
}


.blog-single-tags a:hover {
	background: #003f7d;

	color: #ffffff;
}


/* =========================================================
   SIDEBAR
========================================================= */

.blog-sidebar {
	width: 300px;

	min-width: 0;

	position: sticky;

	top: 30px;
}


/* =========================================================
   SIDEBAR WIDGET
========================================================= */

.blog-sidebar-widget {
	width: 100%;

	margin: 0 0 30px;

	padding: 22px;

	box-sizing: border-box;

	background: #f5f5f5;

	border: 1px solid #e5e5e5;
}


/* =========================================================
   SIDEBAR TITLE
========================================================= */

.blog-sidebar-title {
	position: relative;

	margin: 0 0 18px !important;

	padding: 0 0 12px !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 18px !important;

	line-height: 1.3 !important;

	font-weight: 700 !important;

	color: #003f7d !important;

	border-bottom: 1px solid #dddddd;
}


.blog-sidebar-title::after {
	content: "";

	position: absolute;

	left: 0;

	bottom: -1px;

	width: 45px;

	height: 2px;

	background: #003f7d;
}


/* =========================================================
   SEARCH
========================================================= */

.blog-sidebar-search {
	display: flex;

	width: 100%;

	margin: 0;

	padding: 0;
}


.blog-sidebar-search input {
	flex: 1;

	width: 100%;

	height: 42px;

	min-width: 0;

	margin: 0;

	padding: 0 11px;

	box-sizing: border-box;

	background: #ffffff;

	border: 1px solid #dddddd;

	border-right: 0;

	border-radius: 0;

	outline: none;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	color: #555555;
}


.blog-sidebar-search input:focus {
	border-color: #003f7d;
}


.blog-sidebar-search button {
	flex: 0 0 auto;

	height: 42px;

	margin: 0;

	padding: 0 14px;

	background: #003f7d;

	border: 0;

	border-radius: 0;

	color: #ffffff;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-weight: 700;

	cursor: pointer;
}


.blog-sidebar-search button:hover {
	background: #005ca8;
}


/* =========================================================
   CATEGORIES
========================================================= */

.blog-sidebar-categories {
	margin: 0 !important;

	padding: 0 !important;

	list-style: none !important;
}


.blog-sidebar-categories li {
	margin: 0 !important;

	padding: 9px 0 !important;

	border-bottom: 1px solid #e1e1e1;
}


.blog-sidebar-categories li:last-child {
	border-bottom: 0;
}


.blog-sidebar-categories a {
	display: block;

	margin: 0;

	padding: 0;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 13px;

	line-height: 1.5;

	color: #555555;

	text-decoration: none;
}


.blog-sidebar-categories a:hover {
	color: #003f7d;
}


/* =========================================================
   RECENT POSTS
========================================================= */

.blog-sidebar-recent {
	display: flex;

	flex-direction: column;

	gap: 16px;
}


.blog-sidebar-recent-item {
	display: flex;

	align-items: flex-start;

	gap: 12px;

	width: 100%;

	text-decoration: none;
}


.recent-post-image {
	width: 70px;

	height: 58px;

	flex: 0 0 70px;

	overflow: hidden;

	background: #eeeeee;
}


.recent-post-thumbnail {
	display: block !important;

	width: 100% !important;

	height: 100% !important;

	margin: 0 !important;

	padding: 0 !important;

	object-fit: cover;
}


.recent-post-info {
	flex: 1;

	min-width: 0;
}


.recent-post-info h4 {
	display: -webkit-box;

	margin: 0 0 5px !important;

	padding: 0 !important;

	overflow: hidden;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 12px !important;

	line-height: 1.4 !important;

	font-weight: 700 !important;

	color: #003f7d !important;

	-webkit-line-clamp: 3;

	-webkit-box-orient: vertical;
}


.recent-post-info span {
	display: block;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 10px;

	line-height: 1.4;

	color: #888888;
}


.blog-sidebar-recent-item:hover .recent-post-info h4 {
	color: #005ca8 !important;
}


/* =========================================================
   SIDEBAR CTA
========================================================= */

.blog-sidebar-cta {
	width: 100%;

	padding: 25px;

	box-sizing: border-box;

	background: #003f7d;

	color: #ffffff;
}


.blog-sidebar-cta h3 {
	margin: 0 0 10px !important;

	padding: 0 !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 19px !important;

	line-height: 1.35 !important;

	font-weight: 700 !important;

	color: #ffffff !important;
}


.blog-sidebar-cta p {
	margin: 0 0 18px !important;

	padding: 0 !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 13px !important;

	line-height: 1.6 !important;

	color: #ffffff !important;
}


.blog-sidebar-cta a {
	display: inline-block;

	margin: 0;

	padding: 10px 16px;

	background: #ffffff;

	color: #003f7d;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	line-height: 1.3;

	font-weight: 700;

	text-decoration: none;
}


.blog-sidebar-cta a:hover {
	background: #f2f2f2;

	color: #005ca8;
}


/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.blog-single-navigation {
	display: flex;

	justify-content: space-between;

	gap: 30px;

	width: calc(100% - 345px);

	max-width: 850px;

	margin-top: 45px;

	padding-top: 25px;

	border-top: 1px solid #e5e5e5;
}


.blog-single-prev,
.blog-single-next {
	width: 48%;
}


.blog-single-next {
	text-align: right;
}


.blog-single-navigation .nav-label {
	display: block;

	margin-bottom: 7px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	line-height: 1.3;

	font-weight: 700;

	text-transform: uppercase;

	color: #888888;
}


.blog-single-navigation a {
	font-family: Arial, Helvetica, sans-serif;

	font-size: 13px;

	line-height: 1.5;

	font-weight: 700;

	color: #003f7d;

	text-decoration: none;
}


.blog-single-navigation a:hover {
	color: #005ca8;
}


/* =========================================================
   RELATED ARTICLES
========================================================= */

.blog-related {
	margin-top: 60px;

	padding-top: 35px;

	border-top: 1px solid #eeeeee;
}


.blog-related-title {
	margin: 0 0 25px !important;

	padding: 0 !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 30px !important;

	line-height: 1.3 !important;

	font-weight: 700 !important;

	color: #333333 !important;
}


.blog-related-grid {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 15px;
}


.blog-related-card {
	display: flex;

	flex-direction: column;

	min-width: 0;

	margin: 0;

	padding: 0;

	background: #f5f5f5;

	overflow: hidden;
}


.blog-related-image {
	display: block;

	width: 100%;

	height: 170px;

	overflow: hidden;
}


.blog-related-thumbnail {
	display: block !important;

	width: 100% !important;

	height: 100% !important;

	margin: 0 !important;

	object-fit: cover;

	transition: transform 0.3s ease;
}


.blog-related-card:hover .blog-related-thumbnail {
	transform: scale(1.03);
}


.blog-related-content {
	display: flex;

	flex-direction: column;

	flex: 1;

	padding: 18px;
}


.blog-related-date {
	margin-bottom: 7px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 10px;

	color: #888888;
}


.blog-related-card-title {
	margin: 0 0 15px !important;

	padding: 0 !important;

	font-family: Arial, Helvetica, sans-serif !important;

	font-size: 16px !important;

	line-height: 1.4 !important;

	font-weight: 700 !important;

	color: #003f7d !important;
}


.blog-related-card-title a {
	color: #003f7d !important;

	text-decoration: none !important;
}


.blog-related-card-title a:hover {
	color: #005ca8 !important;
}


.blog-related-read-more {
	margin-top: auto;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-weight: 700;

	color: #003f7d;

	text-decoration: none;
}


.blog-related-read-more:hover {
	color: #005ca8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

	.blog-single-container {
		width: calc(100% - 30px);
	}


	.blog-single-layout {
		grid-template-columns: minmax(0, 1fr) 270px;

		gap: 30px;
	}


	.blog-sidebar {
		width: 270px;
	}


	.blog-single-title {
		font-size: 36px !important;
	}


	.blog-single-featured-image {
		height: 350px;
	}


	.blog-single-navigation {
		width: calc(100% - 300px);
	}


	.blog-related-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
	
	/* Hide breadcrumb only on single blog posts */
body.single-post .breadcrumb-area,
body.single-post .breadcrumbs,
body.single-post .breadcrumb,
body.single-post .elementor-widget-theme-post-content ~ *,
body.single-post nav[aria-label="breadcrumb"],
body.single-post [class*="breadcrumb"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

	.blog-single-container {
		width: calc(100% - 30px);

		padding: 30px 0 50px;
	}


	/* Article + sidebar become one column */

	.blog-single-layout {
		display: block;
	}


	/* Article */

	.blog-single-article {
		width: 100%;
	}


	/* Title */

	.blog-single-title {
		font-size: 30px !important;

		line-height: 1.2 !important;

		letter-spacing: 0 !important;
	}


	/* Meta */

	.blog-single-meta {
		font-size: 11px !important;

		margin-bottom: 22px !important;
	}


	/* Image */

	.blog-single-featured-image {
		width: 100%;

		height: auto;

		aspect-ratio: 16 / 9;

		margin-bottom: 28px;
	}


	/* Content */

	.blog-single-content {
		font-size: 15px;

		line-height: 1.75;
	}


	.blog-single-content h2 {
		font-size: 24px !important;

		margin-top: 32px !important;
	}


	.blog-single-content h3 {
		font-size: 20px !important;
	}


	/* Sidebar */

	.blog-sidebar {
		width: 100%;

		position: static;

		margin-top: 45px;
	}


	.blog-sidebar-widget {
		padding: 18px;

		margin-bottom: 20px;
	}


	/* Previous / next */

	.blog-single-navigation {
		display: block;

		width: 100%;

		margin-top: 35px;
	}


	.blog-single-prev,
	.blog-single-next {
		width: 100%;

		text-align: left;
	}


	.blog-single-next {
		margin-top: 25px;

		text-align: left;
	}


	/* Related */

	.blog-related {
		margin-top: 45px;
	}


	.blog-related-title {
		font-size: 26px !important;
	}


	.blog-related-grid {
		grid-template-columns: 1fr;

		gap: 20px;
	}


	.blog-related-image {
		height: 200px;
	}

}