@use "../utilities" as *;

/**----------------------------------------
START: Theme Blog CSS
----------------------------------------*/
.sc-blog-grid-section {
	padding-top: 120px;
	position: relative;
	@media #{$md, $sm, $xs} {
		padding-top: 80px;
	}
	.tj-sec-heading {
		max-width: 780px;
	}
	.blog-page-shape {
		.shape-one {
			position: absolute;
			top: 0;
			right: 0;
			@media #{$md, $sm, $xs} {
				width: 50%;
			}
		}
		.shape-two {
			position: absolute;
			top: 10%;
			right: 50px;
			@media #{$md, $sm, $xs} {
				display: none;
			}
		}
		.shape-three {
			position: absolute;
			top: 18%;
			right: -50px;
			@media #{$md, $sm, $xs} {
				display: none;
			}
		}
		.shape-four {
			position: absolute;
			bottom: 20%;
			left: -50px;
			@media #{$md, $sm, $xs} {
				display: none;
			}
		}
	}
}
.tj-blog-page,
.tj-blog-details {
	padding-top: 120px;
	padding-bottom: 120px;
	position: relative;
	z-index: 1;
	overflow: hidden;

	@media #{$md} {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	@media #{$sm, $xs} {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.blog-section-shape {
		.shape-1 {
			position: absolute;
			top: 0;
			left: 0;
		}
		.shape-2 {
			position: absolute;
			top: 15%;
			right: 30px;
		}
		.shape-3 {
			position: absolute;
			top: 18%;
			right: -80px;
		}
		.shape-4 {
			position: absolute;
			bottom: 15%;
			left: -50px;
		}
		.shape-5 {
			position: absolute;
			bottom: 10%;
			left: 0;
		}
		@media #{$lg, $md, $sm, $xs} {
			display: none;
		}
	}
}
.tj-post-wrapper {
	position: relative;
	z-index: 1;

	.blog-thumb-image {
		margin-bottom: 20px;
		position: relative;
		z-index: 1;

		a {
			display: inline-block;
		}
		img {
			border-radius: 20px;
		}

		.post_category {
			position: absolute;
			top: 20px;
			right: 20px;
			z-index: 2;

			.category {
				display: inline-block;
				background-color: var(--tj-color-theme-primary);
				font-size: 16px;
				text-transform: capitalize;
				line-height: 1;
				color: var(--tj-color-common-white);
				padding: 15px 25px;
				border-radius: 50px;

				&:hover {
					background-color: var(--tj-color-theme-secondary);
					color: var(--tj-color-common-white);
				}
			}

			@media #{$xs, $sm} {
				top: 10px;
				right: 10px;

				.category {
					font-size: 14px;
					padding: 10px 15px;
				}
			}
		}

		.video-play {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
			a {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80px;
				height: 80px;
				font-size: 35px;
				line-height: 1;
				border-radius: 50%;
				background-image: linear-gradient(
					90deg,
					var(--tj-color-theme-secondary) 0%,
					var(--tj-color-theme-primary) 100%
				);
				background-size: 150%;
				animation: animate-pulse 3s linear infinite;

				&:hover {
					background-size: 100%;
				}

				@media #{$sm, $xs} {
					width: 50px;
					height: 50px;
					font-size: 20px;
				}

				i {
					color: var(--tj-color-common-white);
				}
			}
		}

		iframe {
			display: flex;
			width: 100%;
			border: none;
		}
		.tj-post__gallery {
			.owl-nav {
				button {
					width: 50px;
					height: 50px;
					background-color: var(--tj-color-common-white);
					border-radius: 50%;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					font-size: 18px;
					line-height: 1;
					color: var(--tj-color-common-black);
					position: absolute;
					top: 50%;
					left: 25px;
					transform: translateY(-50%);
					i {
						color: var(--tj-color-common-black);
					}

					&.owl-next {
						left: auto;
						right: 25px;
					}

					&:hover {
						background-color: var(--tj-color-theme-primary);
						color: var(--tj-color-common-white);
						i {
							color: var(--tj-color-common-white);
						}
					}
				}
			}
		}

		@media #{$xs, $sm} {
			margin-bottom: 15px;

			img {
				min-height: 250px;
				height: auto;
				object-fit: cover;
			}

			iframe {
				height: 250px;
			}

			.tj-post__gallery {
				.owl-nav {
					button {
						width: 40px;
						height: 40px;
						font-size: 16px;
						left: 10px;

						&.owl-next {
							left: auto;
							right: 10px;
						}
					}
				}
			}
		}
	}
	.details-title {
		margin-bottom: 15px;
		.title {
			font-size: 30px;
			margin-bottom: 0;
			@media #{$sm, $xs} {
				font-size: 22px;
			}
		}
	}

	.blog-video-area {
		margin-bottom: 50px;
		.video-title {
			margin-bottom: 26px;
			p {
				margin-bottom: 0;
			}
		}
		.video-box {
			margin-bottom: 15px;
		}

		p {
			margin-bottom: 0;
		}
	}
	.tj-tags-post {
		display: flex;
		flex-wrap: wrap;
		align-items: start;
		justify-content: space-between;
		gap: 20px;
		border-top: 1px solid var(--tj-color-light-7);
		padding-top: 31px;
		padding-bottom: 30px;

		.tj-tag {
			width: calc(100% - 210px);
			gap: 10px;
		}
		&.no-social-share {
			.tj-tag {
				width: 100%;
			}
		}
		.post-share {
			margin-left: auto;
			ul {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				align-items: center;

				li {
					a {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 40px;
						height: 40px;
						line-height: 1;
						border-radius: 50%;
						background: var(--tj-color-common-black);
						color: var(--tj-color-common-white);
						transition: 0.4s;

						&:hover {
							background: linear-gradient(
								90deg,
								var(--tj-color-theme-secondary) 0%,
								var(--tj-color-theme-primary) 100%
							);
						}
					}
				}
			}
		}

		@media #{$xs, $sm} {
			flex-direction: column;

			.tj-tag {
				width: 100%;
			}
			.post-share {
				margin-left: 0;
			}
		}
	}
}

.video-image {
	position: relative;
	z-index: 1;
	border-radius: 20px;
	overflow: hidden;

	&::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		z-index: -1;
	}

	img {
		width: 100%;
	}
	a {
		display: inline-block;
	}
	.popup-videos-button {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 70px;
		height: 70px;
		line-height: 1;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		background-image: linear-gradient(
			90deg,
			var(--tj-color-theme-secondary) 0%,
			var(--tj-color-theme-primary) 100%
		);
		font-size: 30px;
		color: var(--tj-color-common-white);

		@media #{$md, $sm, $xs} {
			width: 50px;
			height: 50px;
			font-size: 20px;
		}
		i {
			line-height: 1;
		}
	}
}
.check-list {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			color: var(--tj-color-light-3);
			font-weight: var(--tj-fw-sbold);
			font-family: var(--tj-ff-body);
			position: relative;
			z-index: 1;
			padding-left: 25px;

			&:not(:last-child) {
				margin-bottom: 10px;
			}

			i {
				width: 18px;
				height: 18px;
				line-height: 1;
				font-size: 12px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				font-weight: var(--tj-fw-sbold);
				color: var(--tj-color-common-white);
				background: var(--tj-color-light-3);
				position: absolute;
				left: 0;
				top: 4px;
			}
		}
	}
}
.tj-entry__content {
	.wp-block-quote,
	blockquote {
		margin-bottom: 30px;
	}
	.check-list {
		ul {
			padding-left: 0;
			li {
				padding-top: 0;
			}
		}
	}
}
.tj-blog-details {
	padding-bottom: 90px;

	@media #{$md} {
		padding-bottom: 100px;
	}
	@media #{$xs, $sm} {
		padding-bottom: 80px;
	}
}
.blog-details__pagination {
	padding-top: 31px;
	padding-bottom: 30px;
	border-top: 1px solid var(--tj-color-light-7);
	border-bottom: 1px solid var(--tj-color-light-7);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;

	.tj_pagination-post {
		max-width: 48%;
		width: 100%;
		min-height: 145px;
		overflow: hidden;

		&.next {
			margin-left: auto;
		}

		.tj_pagination_post-inner {
			padding: 35px 25px;
			background: linear-gradient(
				90deg,
				rgba(32, 217, 161, 0.08) 0%,
				rgba(95, 57, 255, 0.08) 100%
			);
			display: flex;
			width: 100%;
			height: 100%;
			gap: 20px;
			align-items: center;

			.tj-blog-img {
				max-width: 85px;
				width: 100%;
				height: 85px;

				a {
					display: inline-block;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
			.tj-content {
				.post_pagination_nav {
					text-transform: uppercase;
					display: block;
					margin-bottom: 8px;
					color: var(--tj-color-theme-primary);

					i {
						margin-right: 10px;
					}
				}
				.post_pagination_title {
					.title {
						font-weight: var(--tj-fw-medium);
						margin: 0;
						line-height: 1.4;
						word-break: break-word;

						a {
							&:hover {
								color: var(--tj-color-theme-primary);
							}
						}
					}
				}
			}

			@media #{$xs, $sm, $md, $lg} {
				padding: 30px 20px;

				.tj-content {
					.post_pagination_nav {
						margin-bottom: 0;
					}
				}
			}
			@media #{$xs, $sm} {
				.tj-content {
					.post_pagination_nav {
						font-size: 14px;
					}
				}
			}

			&.next_post {
				justify-content: end;
				background: linear-gradient(
					90deg,
					rgba(95, 57, 255, 0.08) 0%,
					rgba(32, 217, 161, 0.08) 100%
				);

				.tj-content {
					text-align: end;
				}
			}
		}
	}

	@media #{$xs, $sm} {
		.tj_pagination-post {
			max-width: 335px;

			&.next {
				margin-left: auto;
			}
		}
	}
	@media #{$xs} {
		.tj_pagination-post {
			max-width: 100%;
		}
	}
}
.tj-comments__container {
	.tj-comments__wrap {
		margin-bottom: 50px;

		.tj-comment__title {
			margin-bottom: 35px;
			h3 {
				color: inherit;
				font-size: inherit;
				line-height: inherit;
			}
		}
	}

	.tj-latest__comments {
		ul {
			list-style: none;
			padding: 0;
			margin: 0;

			.tj__comment {
				padding-top: 0;

				.tj-comment__wrap {
					display: flex;
					align-items: start;
					flex-wrap: wrap;
					gap: 20px;
					margin-bottom: 30px;
					padding-bottom: 30px;
					border-bottom: 1px solid var(--tj-color-light-7);

					.comment__avatar {
						max-width: 80px;
						width: 100%;
						height: auto;
						img {
							height: 100%;
							width: 100%;
							object-fit: cover;
							border-radius: 50%;
						}
					}
					.comment__text {
						width: calc(100% - 100px);

						.avatar__name {
							margin-bottom: 10px;
							h5 {
								margin-bottom: 5px;
								a {
									font-size: 18px;
									color: var(--tj-color-theme-primary);
									font-weight: var(--tj-fw-medium);
									text-decoration: none;
								}
							}
							> span {
								display: block;
								line-height: 1;
							}
						}
						p {
							margin-bottom: 0;
						}
						.comment__reply {
							margin-top: 20px;
							a {
								text-decoration: none;
								background: var(--tj-color-theme-primary);
								border-radius: 58px;
								box-shadow: 15px 9px 30px 0px rgba(117, 77, 233, 0.15);
								font-size: 12px;
								color: var(--tj-color-common-white);
								font-family: var(--tj-ff-body);
								padding: 7px 20px;
								transition: 0.4s;

								&:hover {
									background-color: var(--tj-color-common-black);
									color: var(--tj-color-common-white);
								}
							}
						}
					}

					@media #{$xs, $sm} {
						flex-direction: column;
						align-items: baseline;

						.comment__text {
							width: 100%;
						}
					}
				}

				.children {
					padding-left: 35px;
					margin-bottom: 0;
					padding-bottom: 0;
					border: none;
					list-style: none;
				}
			}
		}
	}
}
.comment-respond {
	background: linear-gradient(
		90deg,
		rgba(32, 217, 161, 0.08) 0%,
		rgba(95, 57, 255, 0.08) 100%
	);
	padding: 40px;
	border-radius: 10px;
	margin-bottom: 30px;

	@media #{$md} {
		padding: 30px 20px;
	}
	@media #{$sm, $xs} {
		padding: 25px 15px;
	}

	.comment-reply-title {
		color: var(--tj-color-theme-primary);
		font-size: 30px;
		line-height: 1.2;
		margin-bottom: 15px;
	}

	#cancel-comment-reply-link {
		font-size: 20px;
		line-height: 1;
		font-weight: 400;
		text-decoration: underline;
		color: var(--tj-primary-color);
		margin-left: 10px;

		&:hover {
			text-decoration-style: dotted;
		}
	}

	.form-input {
		margin-bottom: 20px;
		textarea,
		input[type="email"],
		input[type="text"],
		input[type="url"] {
			border: 1px solid var(--tj-color-border-1);
			border-radius: 10px;
			padding: 14px 20px;

			&:focus {
				border-color: var(--tj-color-theme-primary);
			}

			&::placeholder {
				color: var(--tj-color-grey-9);
			}
			&::-ms-input-placeholder {
				color: var(--tj-color-grey-9);
			}
		}
		textarea {
			min-height: 150px;
		}
	}
	.form-submit {
		margin-bottom: 0;
	}
	.comment-form-cookies-consent {
		display: flex;
		align-items: start;

		input {
			margin-top: 7px;
			margin-right: 10px;
		}
	}
	.tj-blog-details-button {
		.tj-primary-btn {
			width: 100%;
			border-radius: 10px;
			font-size: 14px;
			font-weight: var(--tj-fw-medium);
			font-family: var(--tj-ff-heading);
		}
	}
}

@keyframes animate-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7),
			0 0 0 0 rgba(255, 255, 255, 0.7);
	}
	40% {
		box-shadow: 0 0 0 50px rgba(255, 109, 74, 0),
			0 0 0 0 rgba(255, 255, 255, 0.7);
	}
	80% {
		box-shadow: 0 0 0 50px rgba(255, 109, 74, 0),
			0 0 0 30px rgba(255, 109, 74, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0);
	}
}
.tj-post-item {
	margin-bottom: 50px;
	&:last-child {
		margin-bottom: 0;
	}

	&.sticky {
		padding: 40px 50px;
		border-top: 3px solid var(--tj-color-theme-primary);
		-webkit-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
		box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);

		@media #{$md} {
			padding: 40px 30px;
		}
		@media #{$xs, $sm} {
			padding: 30px 20px;
		}
	}

	.details-title {
		.title {
			font-size: 25px;
			@media #{$sm, $xs} {
				font-size: 22px;
			}
			a {
				color: inherit;
				background-image: -webkit-gradient(
						linear,
						left top,
						left bottom,
						from(var(--tj-color-theme-primary)),
						to(var(--tj-color-theme-primary))
					),
					-webkit-gradient(linear, left top, left bottom, from(var(--tj-color-theme-primary)), to(var(--tj-color-theme-primary)));
				background-image: linear-gradient(
						var(--tj-color-theme-primary),
						var(--tj-color-theme-primary)
					),
					linear-gradient(
						var(--tj-color-theme-primary),
						var(--tj-color-theme-primary)
					);
				display: inline;
				background-size: 0% 1px, 0 1px;
				background-position: 100% 100%, 0 100%;
				background-repeat: no-repeat;
				-webkit-transition: all 0.4s ease;
				transition: all 0.4s ease;

				&:hover {
					color: var(--tj-color-theme-primary);
					background-size: 0% 1px, 100% 1px;
				}
			}
		}
	}
	.blog-button {
		margin-top: 25px;
	}

	@media #{$xs, $sm} {
		margin-bottom: 40px;

		.blog-button {
			margin-top: 15px;
		}
	}

	.blog-thumb-image {
		position: relative;

		&::after {
			background: rgba(255, 255, 255, 0.3);
			bottom: 0;
			content: "";
			left: 50%;
			position: absolute;
			right: 51%;
			top: 0;
			opacity: 1;
			pointer-events: none;
			z-index: 1;
			-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}
	}

	&:hover {
		.blog-thumb-image {
			&::after {
				left: 0;
				right: 0;
				opacity: 0;
				-webkit-transition: all 0.4s ease;
				transition: all 0.4s ease;
			}
		}
	}
}

.tj-blog-widget {
	background: linear-gradient(
		90deg,
		rgba(32, 217, 161, 0.08) 0%,
		rgba(95, 57, 255, 0.08) 100%
	);
	border-radius: 10px;
	padding: 35px 25px;
	position: relative;

	&:not(:last-child) {
		margin-bottom: 40px;
	}

	@media #{$sm, $xs} {
		padding: 35px 15px;
	}
	.side-title {
		font-size: 25px;
		line-height: 1;
		font-weight: var(--tj-fw-medium);
		color: var(--tj-color-theme-primary);
		position: relative;
		z-index: 1;
		padding-bottom: 13px;
		margin-bottom: 20px;

		&::before {
			position: absolute;
			content: "";
			bottom: 0;
			left: 0;
			width: 60px;
			height: 2px;
			background: var(--tj-color-theme-primary);
		}
	}

	.tagcloud {
		a {
			font-size: 14px !important;
		}
	}

	&.widget_block,
	&.widget_block.widget_search {
		.wp-block-heading,
		label {
			font-size: 25px;
			line-height: 1;
			font-weight: var(--tj-fw-medium);
			color: var(--tj-color-theme-primary);
			position: relative;
			z-index: 1;
			padding-bottom: 13px;
			margin-bottom: 20px;

			&::before {
				position: absolute;
				content: "";
				bottom: 0;
				left: 0;
				width: 60px;
				height: 2px;
				background: var(--tj-color-theme-primary);
			}
		}
	}
}

.sidebar-search {
	form {
		position: relative;
		z-index: 1;
		width: 100%;
		border: 1.5px solid rgba(112, 95, 255, 0.8);
		border-radius: 8px;
		overflow: hidden;

		input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
			border-radius: 8px;
			width: 100%;
			padding: 16px 60px 16px 15px;
			font-size: 16px;
			line-height: 1.4;
			&::placeholder {
				color: var(--tj-color-grey-9);
			}
			&::-ms-input-placeholder {
				color: var(--tj-color-grey-9);
			}
		}

		button {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			width: 60px;
			height: 100%;
			background-color: var(--tj-color-theme-primary);
			color: var(--tj-color-common-white);
			font-size: 18px;
			line-height: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			@include transition(all 0.4s ease-in-out 0s);
		}
	}
}
.footer-widget {
	.sidebar-search {
		form {
			border-color: var(--tj-color-theme-primary);
		}
	}
}

.widget_categories {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			font-size: 16px;
			font-weight: var(--tj-fw-medium);
			color: var(--tj-color-theme-primary);

			&:not(:last-child) {
				padding-bottom: 16px;
				margin-bottom: 15px;
				border-bottom: 1px solid var(--tj-color-border-1);
			}

			ul {
				width: 100%;
				padding-left: 20px;
				padding-top: 16px;
				margin-top: 15px;
				border-top: 1px solid var(--tj-color-border-1);
			}

			a {
				color: var(--tj-color-text-body);

				&:hover {
					color: var(--tj-color-theme-primary);
				}
			}
		}
	}
}
.tj-sidebar__widget.widget_block {
	.wp-block-categories-list {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			font-size: 16px;
			font-weight: var(--tj-fw-medium);
			color: var(--tj-color-theme-primary);

			&:not(:last-child) {
				padding-bottom: 16px;
				margin-bottom: 15px;
				border-bottom: 1px solid var(--tj-color-border-1);
			}

			ul {
				width: 100%;
				padding-left: 20px;
				padding-top: 16px;
				margin-top: 15px;
				border-top: 1px solid var(--tj-color-border-1);
			}

			a {
				color: var(--tj-color-text-body);

				&:hover {
					color: var(--tj-color-theme-primary);
				}
			}
		}
	}
}
.sidebar-recent-post {
	.single-post {
		margin-bottom: 25px;
		align-items: center;
		gap: 20px;

		&:last-child {
			margin-bottom: 0;
		}
		.post-image {
			max-width: 75px;
			width: 100%;
			overflow: hidden;
			border-radius: 50%;
			a {
				display: inline-block;
				width: 100%;
				img {
					border-radius: 50%;
					@include transition(all 0.4s ease-out 0s);
				}
			}
		}
		.post-content {
			.sub-title {
				font-size: 14px;
				line-height: 1;
				font-weight: var(--tj-fw-medium);
				display: flex;
				align-items: center;
				gap: 15px;
				margin-bottom: 10px;
				i {
					color: var(--tj-color-theme-primary);
					font-size: 18px;
					line-height: 1;
				}
			}
			.title-link {
				margin-bottom: 0;
				a {
					display: inline-block;
					transition: 0.4s;
					&:hover {
						color: var(--tj-color-theme-primary);
					}
				}
			}
		}

		&:hover {
			.post-image {
				a {
					img {
						transform: scale(1.2);
					}
				}
			}
		}
	}
}

.tagcloud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;

	.tag__title {
		font-size: 20px;
		line-height: 1;
		color: var(--tj-color-theme-primary);
		font-weight: var(--tj-fw-sbold);
		margin-right: 10px;
	}
	a {
		position: relative;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background-color: var(--tj-color-light-7);
		font-size: 14px;
		line-height: 1;
		color: var(--tj-color-common-black);
		border-radius: 5px;
		padding: 14px 20px;
		transition: 0.4s;
		z-index: 1;

		&::after {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(
				90deg,
				var(--tj-color-theme-secondary) 0%,
				var(--tj-color-theme-primary) 100%
			);
			border-radius: 5px;
			z-index: -1;
			opacity: 0;
		}

		&:hover {
			background-color: transparent;
			color: var(--tj-color-common-white);

			&::after {
				opacity: 1;
			}
		}
	}
}

.wp-block-quote,
blockquote {
	color: var(--tj-color-common-white);
	background: linear-gradient(
		90deg,
		var(--tj-color-theme-secondary) 0%,
		var(--tj-color-theme-secondary) 100%
	);
	border-radius: 10px;
	position: relative;
	padding: 30px 33px;
	margin-bottom: 60px;
	border-left: 0;
	z-index: 3;
	&::before {
		content: "\f10d";
		font-family: "Font Awesome 6 Pro";
		background-size: contain;
		display: inline-block;
		font-size: 50px;
		color: var(--tj-color-common-white);
		@media #{$sm, $xs} {
			width: 45px;
			height: 30px;
			margin-bottom: 10px;
		}
	}
	p {
		color: var(--tj-color-common-white);
		font-family: var(--tj-ff-body);
		font-weight: var(--tj-fw-sbold);
		margin-bottom: 10px;
	}
	cite {
		color: var(--tj-color-common-white);
		font-family: var(--tj-ff-body);
		font-weight: var(--tj-fw-bold);
		position: relative;
		padding-left: 50px;
		@media #{$sm, $xs} {
			padding-left: 40px;
		}
		&::before {
			position: absolute;
			content: "";
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			width: 35px;
			height: 2px;
			background: var(--tj-color-light-9);
			@media #{$sm, $xs} {
				width: 20px;
			}
		}
	}
}
.wp-block-pullquote {
	color: var(--tj-color-common-white);
	border: none;
	padding: 0;
	margin: 0;
}

.tj__pagination {
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 15px;

		li {
			background: linear-gradient(
				90deg,
				var(--tj-color-theme-secondary) 0%,
				var(--tj-color-theme-primary) 100%
			);
			border-radius: 50%;
			padding: 1px;
			overflow: hidden;

			.page-numbers {
				display: flex;
				width: 45px;
				height: 45px;
				border-radius: 50%;
				align-items: center;
				justify-content: center;
				font-size: 18px;
				background-color: var(--tj-color-common-white);
				font-weight: var(--tj-fw-medium);
				color: var(--tj-color-common-black);
				transition: all 0.3s ease-in-out 0s;

				i {
					color: var(--tj-color-common-black);
				}

				&:hover,
				&.current {
					background-color: transparent;
					color: var(--tj-color-common-white);

					i {
						color: var(--tj-color-common-white);
					}
				}
			}
		}
	}
}

/* !END: Theme Blog CSS */