/*=========== TABLE OF CONTENTS ===========
1. Common CSS
2. Page CSS
==========================================*/

/*-------------------------------------
1. Common CSS
--------------------------------------*/
.blog-section__filter-divider {
	color: var(--gray_200) !important;
	margin: 0 10px;
	@media only screen and (max-width: 550px) {
		margin-left: 0px;
	}
}


.company3 {
	transition: opacity 1.2s, transform 1.2s;
	opacity: 0;
	transform: translateY(0px);
}

/*-------------------------------------
2. Page CSS
--------------------------------------*/
.top {	
	background-image: url(../public/images/img_top.png);
	background-size: cover;
	background-repeat: no-repeat;
	@media only screen and (max-width: 1560px) {		
	}

	@media only screen and (max-width: 1050px) {
		
	}
}

.rowlogo_one {
	margin-top: 14px;
}

.blog-column {
	margin-bottom: 4px;
	gap: var(--space-5xl);
	display: flex;
	flex-direction: column;
}

.stackvector_one {
	height: auto;
	position: relative;
}

.columnvector {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	top: 0px;
	right: 0px;
	left: 0px;
	margin-left: auto;
	margin-right: auto;
	/* padding: 0 8rem; */
	background: #000;
}

.blog__image-1 {
	height: 746px;
	margin-top: 460px;
	z-index: 1;
	width: 12%;
	position: relative;
	object-fit: contain;
	position: absolute;
	display: none;


	@media only screen and (max-width: 1050px) {
		width: 50%;
	}
}

.blog-section {
	margin-left: 0;
	align-self: center;
	position: relative;
	flex: 1;
	display: flex;
	align-items: flex-start;	
	








	@media only screen and (max-width: 1050px) {
		align-self: stretch;
		flex-direction: column;
		padding-left: 20px;
		padding-right: 20px;
		margin-left: 0px;
	}
}

.blog-section__content {
	gap: 40px;
	align-self: center;
	display: flex;
	flex-direction: column;	
	width: 100%;
	text-align: left;
	position: relative;
}

.blog-section__header {
	gap: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 50%;
}

.blog-section__header h2 {
	width: 100%;
	text-align: left;
}
.blog-section__content .top-wrapper {
    display: flex;
    align-items: flex-end;
}

.blog-section__description {
	color: #fff;
	font-size: 22px;
	line-height: 1.27;
	max-width: 95%;
	text-align: left;
	@media only screen and (max-width: 1560px) {
		width: 100%;
	}

	@media only screen and (max-width: 1050px) {
		width: 100%;
	}
}

.blog-section__filters {
	gap: var(--space-14xl);
	display: flex;
	flex-direction: column;
	width: 50%;
}

.blog-section__filters-container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 32px;
	@media only screen and (max-width: 550px) {
		flex-direction: row;gap: 20px;display: flex;justify-content: flex-start;
	}
}

.blog-section__filter {
	gap: var(--space-xs);
	align-self: center;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-end;
	@media only screen and (max-width: 550px) {
		align-self: stretch;width: fit-content;flex: 0;
	}
}
.blog-section__filters-container a.blog-section__filter-item.category-filter { font-size: 22px; font-weight: 500; }
.blog-section__filters-container a.blog-section__filter-item.category-filter:hover, .blog-section__filters-container a.blog-section__filter-item.category-filter:focus { color: #9ad63c; }
.blog-section__filters-container a.blog-section__filter-item.category-filter.active { background: linear-gradient(78.3deg, #08bbbf, #9ad63c); color: #fff !important; border-radius: 14px; padding: 12px 24px; } 
.blog-section__filters-container .fitler-wrap {  display: flex; flex-wrap: wrap; align-items: center; gap: 32px; border: 1px solid #434343; padding: 8px; border-radius: 14px; min-width: 68px; }
.blog-section__content .blog-section__posts .blog-blogpost { width: calc(50% - 15px); flex-direction: row; border: 1px solid #434343; border-radius: 20px; padding: 8px; overflow: hidden; gap: 20px; transition: all 0.3s ease-in-out !important; }
.blog-section__content .blog-section__posts .blog-blogpost:hover, .blog-section__content .blog-section__posts .blog-blogpost:focus { border-color: #fff; }
.blog-section__content .blog-section__posts .blog-blogpost > a { width: 65%; }
.blog-section__content .blog-section__posts .blog-blogpost > a .img { border-radius: 20px; overflow: hidden; width: 100%; height: 334px; }
.blog-section__content .blog-section__posts .blog-blogpost > a .img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.blog-section__content .blog-section__posts .blog-blogpost .post-content { width: 39.75%; padding: 22px 22px 22px 0; display: flex;	flex-wrap: wrap; }
.blog-section__content .blog-section__posts .blog-blogpost .post-content .more-article_category { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.6); margin-top: auto; }
.blog-section__content .blog-section__posts .blog-blogpost .post-content .more-article_category .dash-line { width: 20px; display: inline-block; height: 1px; background-color: rgba(2585, 255, 255, 0.6); vertical-align: middle; margin-right: 8px; }
.blog-section__content .blog-section__posts .blog-blogpost .post-content .blog-date { border-radius: 10px; border: 1px solid #434343; background: rgba(255, 255, 255, 0.10); padding: 10px; font-size: 16px; display: flex; align-items: center; gap: 6px; margin-bottom: 15px; }
.blog-section__content .blog-section__posts .blog-blogpost .post-content .blog-date .icon { width: 14px; height: 14px; overflow: hidden; opacity: 1 !important; }
.blog-section__content .blog-section__posts .blog-blogpost .post-content .blog-date .icon img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.blog-section__content .blog-section__posts .blog-blogpost .post-content h4 .blog-title  { font-size: 26px; display: flex; }
.blog-section__content .blog-section__posts .blog-blogpost .post-content .post-details { height: calc(100% - 52px); width: 100%; }
.blog-section__filter-icon { height: 2px; background: linear-gradient(34deg, #08bbbf, #9ad63c); width: 30px; }

.blog-section__filter-item--dentistry {
	color: var(--gray_200) !important;
	margin-left: 22px;
	@media only screen and (max-width: 550px) {
		margin-left: 0px;
	}
}

.blog-section__filter-group {
	gap: var(--space-2xl);
	align-self: center;
	display: flex;
	flex-wrap: wrap;
}

.blog-section__posts {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	position: relative;
	@media only screen and (max-width: 1560px) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	@media only screen and (max-width: 1050px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	@media only screen and (max-width: 550px) {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

.blog-section__image {
	height: 746px;
	margin-top: 110px;
	width: 14%;
	object-fit: contain;
	position: absolute;
	right: 0px;






	@media only screen and (max-width: 1050px) {
		width: 100%;
	}
}

.blog__image {
	height: 666px;
	margin-top: -296px;
	position: relative;
	width: 10%;
	object-fit: contain;
}

/* .footer {
	height: 704px;
	flex: 1;
	position: relative;
	bottom: 1px;
	right: 0px;
	left: 0px;
	margin-left: auto;
	margin-right: auto;
} */

.footer-1 {
	margin-left: 38px;
	margin-right: 38px;
	flex: 1;
	flex-direction: column;
	display: flex;
	align-items: center;
	position: absolute;
	bottom: -1px;
	right: 0px;
	left: 0px;
	@media only screen and (max-width: 1560px) {
		margin-left: 0px;
		margin-right: 0px;
	}

	@media only screen and (max-width: 1050px) {
		margin-left: 0px;
		margin-right: 0px;
	}
}


#loading-animation {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #000;
	display: none;
}

#loading-animation::after {
	content: '';
/* 	width: 60px;
	height: 60px;
	border: 6px solid transparent;
	border-top: 6px solid #08bbbf;
	border-right: 6px solid #9ad63c;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	background: linear-gradient(78.3deg, #08bbbf, #9ad63c);
	background-clip: padding-box;
	animation: spin 2s linear infinite; */
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@media (max-width: 1560px) {
	.blog-section__description { font-size: 16px !important; }
	.blog-section__filter-label, .blog-section__filter-item.category-filter, .blog-section__filter-divider { font-size: 18px !important; }
	.post-details .ui.heading { font-size: 24px; }
	.blog-section { padding-bottom: 100px; }
	.blog__image-1 { margin-top: 375px; }
	.blog-section__content .blog-section__posts .blog-blogpost .post-content h4 .blog-title { font-size: 22px; }
	.blog-section__content .blog-section__posts { gap: 20px; }
	.blog-section__content .blog-section__posts .blog-blogpost > a .img { height: 278px; }
} 
@media (max-width: 1199px) {
	.blog-section { padding-bottom: 50px; padding-top: 50px; }
	.blog-section__header { gap: 10px; }
	.blog-section__description { font-size: 14px !important; }
	.blog-section__filters-container { margin-left: auto; }
	.blog-section__content, .blog-section__filters  { gap: 20px; }	
	.blog__image-1 { width: 10% !important; height: 435px; }	
	.blog-section__filters-container a.blog-section__filter-item.category-filter.active { padding: 10px 20px; }
	.blog-section__filter-label, .blog-section__filter-item.category-filter, .blog-section__filter-divider { font-size: 16px !important; }  
	.blog-section__content .blog-section__posts .blog-blogpost .post-content { padding: 15px 15px 15px 0; width: 45%; }  
	.blog-section__content .blog-section__posts .blog-blogpost > a { width: 55%; }
	.blog-section__content .blog-section__posts .blog-blogpost > a .img { height: 230px; }
	.blog-section__content .blog-section__posts .blog-blogpost { gap: 15px; }
	.blog-section__content .blog-section__posts .blog-blogpost .post-content h4 .blog-title { font-size: 20px; }	
	.blog-section__content .blog-section__posts .blog-blogpost { width: calc(50% - 10px); }
	.blog-section__content .blog-section__posts .blog-blogpost .post-content .more-article_category { font-size: 16px; }
	.blog-section__content .blog-section__posts .blog-blogpost .post-content .blog-date { margin-bottom: 10px; }
}
@media (max-width: 991px) {
	.blog-section__filter-label, .blog-section__filter-item.category-filter, .blog-section__filter-divider { font-size: 16px !important; }
	.blog-section__filter-divider { margin: 0 6px; }
	.blog-section__content, .blog-section__filters  { gap: 10px; }	
	.blog-section__content .top-wrapper { flex-wrap: wrap; }
	.blog-section__header, .blog-section__filters { width: 100%; }
	.blog-section__header h2 { margin-bottom: 15px; }
	.blog-section__filters-container .fitler-wrap { gap: 20px; }
	.blog-section__header { gap: 0; }
	.blog-section__filters-container { margin-left: 0; margin-right: auto; margin-top: 15px;  }	
	.blog-section__content .blog-section__posts .blog-blogpost { flex-direction: column; }
	.blog-section__content .blog-section__posts .blog-blogpost > a { width: 100%; }
	.blog-section__content .blog-section__posts .blog-blogpost > a .img { height: 220px; }	
	.blog-section__content .blog-section__posts .blog-blogpost .post-content { padding: 0 15px 10px; width: 100%; height: 100%; }
	.blog-section__content .blog-section__posts .blog-blogpost .post-content .blog-date { font-size: 14px; }	
	.blog-section__content .blog-section__posts .blog-blogpost .post-content .more-article_category .dash-line { width: 10px; margin-right: 5px; }
}
@media (max-width: 767px) {
	.blog-section { padding-bottom: 0; padding-top: 30px; }	    
	.blog-section__filters-container { gap: 0 !important; }
	.blog-section__posts { gap: 30px; }
	.blog-section__content .blog-section__posts .blog-blogpost { width: 100%; }
	.blog-section__content .blog-section__posts .blog-blogpost .post-content { padding: 0 10px 10px; }
	.blog-section__filters-container { margin-bottom: 10px; }
	.blog-section__filters-container { width: 100%; }
	.blog-section__filters-container .fitler-wrap { flex-direction: column; width: 100%; }
	.blog-section__filter-label, .blog-section__filter-item.category-filter, .blog-section__filter-divider { width: 100%; text-align: center; }

}