/* Styling section blog */

.box-blog {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fafafa;
}

.box-blog .wrap-blog {
	align-items: center;
	justify-content: center;
	display: grid;
	grid-template-columns: 70% 30%;
	padding: 30px 0px;
}

.box-blog .wrap-blog .content-blog {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

.box-blog .wrap-blog .content-blog .card-blog {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px;
	gap: 20px;
	background-color: #fff;
}

.box-blog .wrap-blog .content-blog .card-blog .img-card-blog {
	width: 40%;
	height: 230px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.box-blog .wrap-blog .content-blog .card-blog .img-card-blog img {
	border-radius: 5px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.box-blog .wrap-blog .content-blog .card-blog .slide-img-blog .img-blog {
	width: 100%;
	background-size: cover;
	height: 230px;
}

.box-blog .wrap-blog .content-blog .card-blog .slide-img-blog .img-blog > img {
	border-radius: 5px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slick-arrow {
	z-index: 1;
	position: absolute;
	top: 50%;
	border: none;
	background-color: transparent;
	color: rgb(255, 255, 255);
	cursor: pointer;
	font-size: 20px;
}

.slick-prev {
	left: 3%;
	padding: 5px;
}

.slick-next {
	right: 3%;
	padding: 5px;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog {
	width: 60%;
	display: flex;
	flex-direction: column;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-title {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0px 0px 20px 0px;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-title h3 {
	color: var(--primary-color);
	font-size: 24px;
	font-weight: 600;
	line-height: 27px;
}

.box-blog .wrap-blog .content-blog .card-blog:hover .info-card-blog .info-title h3 {
	color: var(--primary-color);
	font-size: 24px;
	font-weight: 600;
	line-height: 27px;
	text-decoration: none;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-title span {
	color: var(--normal-color);
	font-size: 18px;
	line-height: 24px;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-title span::before {
	content: '|';
	font-size: 20px;
	font-weight: 100;
	color: #dedede;
	margin: 0px 10px;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog p {
	color: var(--normal-color);
	font-size: 14px;
	line-height: 24px;
	margin: 0px 0px 20px 0px;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view {
	width: 100%;
	display: flex;
	align-items: center;
	margin: 0px 0px 20px 0px;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view > span {
	font-size: 14px;
	color: var(--normal-color);
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view span:not(:last-child):after {
	content: '|';
	color: #dedede;
	font-size: 16px;
	font-weight: 100;
	margin: 0px 10px;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view span a {
	font-size: 14px;
	color: #989898;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view span a:hover {
	font-size: 14px;
	color: var(--normal-color);
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view .btn-share i {
	color: #9d9d9d;
	font-size: 20px;
	margin: 0px 10px;
	position: relative;
	transition: all 0.3s linear;
	cursor: pointer;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view .btn-share i > ul {
	position: absolute;
	bottom: -90px;
	right: -100px;
	width: 130px;
	visibility: hidden;
	opacity: 0;
	backface-visibility: hidden;
	transform: rotateX(-100deg);
	transform-style: preserve-3d;
	transform-origin: top;
	transition: transform 0.5s cubic-bezier(0.2, 0.37, 0.6, 1.2);
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view .btn-share i:hover > ul {
	opacity: 1;
	overflow: hidden;
	visibility: visible;
	transform: rotateX(0deg);
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view .btn-share i > ul::after {
	content: '';
	z-index: -1;
	position: absolute;
	top: -5px;
	left: 10px;
	transform: rotate(45deg);
	background-color: var(--primary-color);
	height: 10px;
	width: 10px;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view .btn-share i > ul > li {
	display: flex;
	align-items: center;
	background-color: var(--primary-color);
	transition: all 0.3s linear;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view .btn-share i > ul > li:hover {
	background-color: #6a6a6a;
	transition: all 0.3s linear;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view .btn-share i > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #dedede;
	font-size: 16px;
	position: relative;
	font-weight: 300;
	padding: 10px 10px;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view .btn-share .share > ul > li > a > i {
	color: #dedede;
	font-size: 16px;
	margin: 0 10px 0px 0px;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .author-view .btn-share .share > ul > li > span {
	color: #dedede;
	font-size: 16px;
	font-weight: 300;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .btn-view {
	display: flex;
	align-items: center;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .btn-view button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: none;
	background-color: transparent;
	outline: none;
	font-size: 14px;
	color: #989898;
	text-transform: uppercase;
	cursor: pointer;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .btn-view button span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: none;
	background-color: transparent;
	outline: none;
	font-size: 14px;
	color: #989898;
	text-transform: uppercase;
	cursor: pointer;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .btn-view button i {
	font-size: 12px;
}

.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-view .btn-view button:hover :is(span, i) {
	color: var(--normal-color);
}

/* Styling slect-blog */

.box-blog .wrap-blog .select-blog {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	padding: 20px;
}

.box-blog .wrap-blog .select-blog .search-blog {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.box-blog .wrap-blog .select-blog .search-blog input {
	width: 100%;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #dedede;
	color: var(--primary-color);
	outline: none;
	font-size: 14px;
}

.box-blog .wrap-blog .select-blog .search-blog input::placeholder {
	text-transform: uppercase;
}

.box-blog .wrap-blog .select-blog .search-blog button {
	position: absolute;
	top: 12px;
	right: 10px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.box-blog .wrap-blog .select-blog .search-blog button i {
	color: var(--primary-color);
	padding: 5px;
}

.box-blog .wrap-blog .select-blog .nav-select-blog {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog {
	width: 100%;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li {
	position: relative;
	display: flex;
	flex-direction: column;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li > span {
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 600;
	padding: 20px;
	letter-spacing: 0.5px;
	width: 100%;
	border-bottom: 1px solid #dedede;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li > .show-select > i {
	transition: all 0.2s linear;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .drop-nav-blog {
	width: 100%;
	background-color: #fff;
	display: none;
	height: 0;
	transition: all 0.5s ease-in-out;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li > .show-select.open > i {
	transform: rotate(90deg);
	transition: all 0.2s linear;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li > .show-select.open ~ .drop-nav-blog {
	transition: all 0.5s ease-in-out;
	height: 100%;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li > .show-select.open ~ .nav-tour-blog {
	display: block;
	transition: all 0.5s ease-in-out;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .drop-nav-blog > li {
	display: flex;
	padding: 10px 0px;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .drop-nav-blog > li > a {
	font-size: 14px;
	padding: 15px 20px;
	color: var(--primary-color);
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .drop-nav-blog > li > a:hover {
	color: #ADA075;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li > .show-select.open ~ .nav-icon-blog {
	display: grid;
	width: 100%;
	grid-template-columns: auto auto auto auto;
	align-items: center;
	justify-content: center;
	padding: 10px 0px;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li > .show-select.open ~ .nav-img-blog {
	display: grid;
	width: 100%;
	grid-template-columns: auto auto auto;
	align-items: center;
	justify-content: center;
	padding: 10px 30px;
	gap: 10px;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .nav-icon-blog > li {
	padding: 0;
	margin: 10px;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .nav-icon-blog > li > a {
	padding: 5px;
	color: var(--primary-color);
	transition: all 0.25s linear;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .nav-icon-blog > li > a:hover {
	color: #ADA075;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .nav-icon-blog > li > a i {
	font-size: 24px;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .nav-img-blog > li {
	padding: 0;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .nav-img-blog > li > a {
	padding: 0;
	height: 70px;
}

.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .nav-img-blog > li > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Reponsive */

@media (max-width: 1000px) {
	.box-blog .wrap-blog {
		align-items: center;
		justify-content: center;
		display: grid;
		grid-template-columns: auto;
		width: 100%;
		padding: 30px 0px;
	}

	.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li > .show-select.open ~ .nav-icon-blog {
		display: grid;
		width: 100%;
		grid-template-columns: auto auto auto auto auto;
		align-items: center;
		justify-content: space-around;
		padding: 10px 0px;
	}

	.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .nav-img-blog > li > a {
		padding: 0;
		height: 150px;
	}
}

@media (max-width: 768px) {

	.box-blog .wrap-blog .content-blog .card-blog {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		padding: 10px;
		gap: 20px;
		background-color: #fff;
	}

	.box-blog .wrap-blog .content-blog .card-blog .img-card-blog {
		width: 100%;
		height: 300px;
	}

	.box-blog .wrap-blog .content-blog .card-blog .slide-img-blog .img-blog {
		width: 100%;
		background-size: cover;
		height: 300px;
	}

	.box-blog .wrap-blog .content-blog .card-blog .info-card-blog {
		width: 100%;
	}

	.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-title h3 {
		font-size: 20px;
		line-height: 20px;
	}

	.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-title span {
		font-size: 16px;
	}
}

@media (max-width: 550px) {
	.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-title h3 {
		font-size: 18px;
		line-height: 20px;
	}

	.box-blog .wrap-blog .content-blog .card-blog .info-card-blog .info-title span {
		font-size: 14px;
	}

	.box-blog .wrap-blog .select-blog .nav-select-blog .nav-blog > li .nav-img-blog > li > a {
		padding: 0;
		height: 100px;
	}
}