@font-face {
	font-family: 'Oswald';
	src: url('../uploads/oswald/Oswald-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Oswald';
	src: url('../uploads/oswald/Oswald-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Oswald';
	src: url('../uploads/oswald/Oswald-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('../uploads/roboto/Roboto-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('../uploads/roboto/Roboto-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('../uploads/roboto/Roboto-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.sb-tech {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.First-Post-Title,
	.Post-Title,
	.Title-Post-Index,
	.Title-Post-Index-2,
	.Title-Large-Post-Index,
	.Title-Post-Index,
	.Author-Page,
	.Author-Page .heading,
	.heading span,
	.Oswald-Font {
		font-family: 'Oswald', sans-serif !important;
		font-weight: 700;
		letter-spacing: initial;
	}

	p, span, a {
		font-family: 'Roboto', sans-serif !important;
		font-weight: 400;
	}

	.content {
		background-color: var(--black-color);
	}

	.ask-expert-container {
		&.white {
			border-top-left-radius: var(--px-2);
		}
	}

	/*CATEGORIES STYLES*/

	&.Future {
		.Hero-Section {
			.First-Post-Image-Container {
				@media (min-width: 1024px) {
					.First-Post-Image-Effects {
						background: var(--sky-color);
					}

					.First-Post-Image-Wrapper {
						&::before, &::after {
							background: var(--lemon-color);
						}
					}
				}
			}
		}

		.Article-Hero-Section {
			.Article-Hero-Section-Image {
				@media (min-width: 1024px) {
					.Article-First-Post-Image-Effects {
						.Article-First-Post-Image-1 {
							svg {
								path {
									fill: var(--lemon-color);
								}
							}
						}

						.Article-First-Post-Image-2 {
							svg {
								path {
									fill: var(--sky-color);
								}
							}
						}
					}
				}
			}

			.Article-Hero-Section-Content {
				&:after {
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50.13%, #000 88.25%, #00A7D9 112.08%);
				}

				.Title-Post {
					border-color: var(--lemon-color);
				}
			}
		}

		.SbTech-Article-List-Page-Hero-Section {
			.heading {
				&::before {
					background: var(--lemon-color);
				}
			}
		}

		.Tag-Value-Index {
			background-color: var(--sky-color);
			color: var(--black-color);

			img {
				filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
			}
		}
	}

	&.Gadgets {
		.Hero-Section {
			.First-Post-Image-Container {
				@media (min-width: 1024px) {
					.First-Post-Image-Effects {
						background: var(--sparkling-green-color);
					}

					.First-Post-Image-Wrapper {
						&::before, &::after {
							background: var(--pink-color);
						}
					}
				}
			}
		}

		.Article-Hero-Section {
			.Article-Hero-Section-Image {
				@media (min-width: 1024px) {
					.Article-First-Post-Image-Effects {
						.Article-First-Post-Image-1 {
							svg {
								path {
									fill: var(--sparkling-green-color);
								}
							}
						}

						.Article-First-Post-Image-2 {
							svg {
								path {
									fill: var(--pink-color);
								}
							}
						}
					}
				}
			}

			.Article-Hero-Section-Content {
				&:after {
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50.13%, #000 88.25%, #C80053 112.08%);
				}

				.Title-Post {
					border-color: var(--sparkling-green-color);
				}
			}
		}

		.SbTech-Article-List-Page-Hero-Section {
			.heading {
				&::before {
					background: var(--sparkling-green-color);
				}
			}
		}

		.Tag-Value-Index {
			background-color: var(--pink-color);
			color: var(--black-color);

			img {
				filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
			}
		}
	}

	&.Gaming {
		.Hero-Section {
			.First-Post-Image-Container {
				@media (min-width: 1024px) {
					.First-Post-Image-Effects {
						background: var(--purple-color);
					}

					.First-Post-Image-Wrapper {
						&::before, &::after {
							background: var(--pink-color);
						}
					}
				}
			}
		}

		.Article-Hero-Section {
			.Article-Hero-Section-Image {
				@media (min-width: 1024px) {
					.Article-First-Post-Image-Effects {
						.Article-First-Post-Image-1 {
							svg {
								path {
									fill: var(--pink-color);
								}
							}
						}

						.Article-First-Post-Image-2 {
							svg {
								path {
									fill: var(--purple-color);
								}
							}
						}
					}
				}
			}

			.Article-Hero-Section-Content {
				&:after {
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50.13%, #000 88.25%, #7300FF 112.08%);
				}

				.Title-Post {
					border-color: var(--pink-color);
				}
			}
		}

		.SbTech-Article-List-Page-Hero-Section {
			.heading {
				&::before {
					background: var(--pink-color);
				}
			}
		}

		.Tag-Value-Index {
			background-color: var(--purple-color);
			color: var(--white-color);

			img {
				filter: brightness(0) saturate(100%) invert(92%) sepia(93%) saturate(0%) hue-rotate(202deg) brightness(106%) contrast(106%);
			}
		}
	}

	&.Space {
		.Hero-Section {
			.First-Post-Image-Container {
				@media (min-width: 1024px) {
					.First-Post-Image-Effects {
						background: var(--space-orange-color);
					}

					.First-Post-Image-Wrapper {
						&::before, &::after {
							background: var(--blue-color);
						}
					}
				}
			}
		}

		.Article-Hero-Section {
			.Article-Hero-Section-Image {
				@media (min-width: 1024px) {
					.Article-First-Post-Image-Effects {
						.Article-First-Post-Image-1 {
							svg {
								path {
									fill: var(--space-orange-color);
								}
							}
						}

						.Article-First-Post-Image-2 {
							svg {
								path {
									fill: var(--blue-color);
								}
							}
						}
					}
				}
			}

			.Article-Hero-Section-Content {
				&:after {
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50.13%, #000 88.25%, #CB9C00 112.08%);
				}

				.Title-Post {
					border-color: var(--blue-color);
				}
			}
		}

		.SbTech-Article-List-Page-Hero-Section {
			.heading {
				&::before {
					background: var(--blue-color);
				}
			}
		}

		.Tag-Value-Index {
			background-color: var(--yellow-color);
			color: var(--black-color);

			img {
				filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
			}
		}
	}

	.heading {
		position: relative;
		color: var(--white-color);
		font-style: normal;
		z-index: 1;
		font-size: var(--px-64);
		line-height: var(--px-64);
	}

	.rounded-lg {
		border-radius: var(--px-2) !important;
	}

	.content > div {
		background-color: var(--black-color);
		color: var(--white-color);
	}

	.black-color-300 {
		color: var(--black-color-300);
	}

	.border-t-1 {
		border-top: 1px solid var(--border-color);
	}

	.wp-block-image {
		img {
			border-radius: var(--px-2) !important;
		}
	}

	.wp-element-caption {
		border-bottom-left-radius: var(--px-2) !important;
		border-bottom-right-radius: var(--px-2) !important;
	}

	.Text-Page-Hero {
		h2,
		h2 span {
			font-size: var(--px-64);
			font-family: 'Oswald', sans-serif !important;
			font-weight: 700;
		}

		button {
			background-color: var(--blue-color);
		}

		input {
			color: var(--black-color);
		}

		background-color: var(--black-color);
		border-bottom: 1px solid var(--gray-color);
	}

	.Text-Page {
		color: var(--white-color);
	}

	.Author-Page {
		color: var(--white-color);

		.Author-Name-Post {
			color: var(--white-color);
		}
		.Post-Container .author_post_list_title {
			font-family: 'Oswald', sans-serif !important;
			font-weight: 700;
			letter-spacing: initial;
			color: var(--white-color);

			&:hover {
				color: var(--blue-color);
			}
		}
	}

	.Hero-Section {
		position: relative;
		height: 100%;
		min-height: 615px;
		background-image: url('../images/banners/sb-tech-home-hero-bg.png');
		background-repeat: no-repeat;
		background-position: bottom center;
		background-size: cover;

		&:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: var(--px-56);
			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
		}

		.ask-expert-container {
			&.white {
				border-top-left-radius: var(--px-2);
				left: 0;
				bottom: 0;

				&:after {
					background-image: url("/images/ask-expert-shadow-2.png");
				}

				@media (min-width: 1024px) {
					left: 95px;
					bottom: initial;

					&:after {
						background-image: url("/images/ask-expert-shadow.png");
					}
				}
			}
		}

		.First-Post-Title {
			font-size: var(--px-36);

			@media (min-width: 1024px) {
				font-size: var(--px-48);
			}
		}

		.First-Post-Image-Container {
			position: relative;

			.First-Post-Image-Wrapper {
				position: relative;
				display: flex;
				width: 100%;
				aspect-ratio: 394 / 320;
				z-index: 3;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					top: -1px;
					background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
					width: 100%;
					height: var(--px-56);
					z-index: 2;
				}

				&::before {
					content: "";
					position: absolute;
					left: 0;
					bottom: -1px;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
					width: 100%;
					height: var(--px-40);
					z-index: 2;
				}

				.First-Post-Image {
					position: relative;
					z-index: 1;
					width: 100%;
					height: 100%;
					background-color: var(--black-color);
				}

				@media (min-width: 1024px) {
					max-height: 577px;
					aspect-ratio: 944 / 577;
					padding-left: 46px;
					left: 49px;
					width: calc(100% - 49px);

					&::after {
						content: "";
						position: absolute;
						top: auto;
						right: 0;
						bottom: 0;
						background: var(--pink-color);
						width: 46px;
						height: 95%;
						z-index: 0;
					}

					&::before {
						content: "";
						position: absolute;
						top: 50%;
						left: 100%;
						transform: translateY(-50%);
						background: var(--pink-color);
						width: 12px;
						height: 70%;
						z-index: 0;
					}
				}
			}

			@media (min-width: 1024px) {
				padding-top: 38px;
				aspect-ratio: 1040/615;
			}

			.First-Post-Image-Effects {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: calc(100% - 80px);
				height: 85%;
				background: var(--purple-color);

				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 180px;
					background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
				}
			}
		}

		.First-Post-Content {
			background-color: transparent;
			z-index: 12;

			h1, .First-Post-SubTitle {
				padding-right: var(--px-18);
				border-right: 6px solid var(--pink-color);

				@media (min-width: 1024px) {
					padding-right: 0;
					border-right: none;
				}
			}

			h1 {
				padding-left: var(--px-16);
				text-align: end;
				font-weight: 700;
				font-style: var(--px-64);
			}

			.First-Post-SubTitle {
				padding-left: var(--px-56);
				font-size: var(--px-18);
				line-height: var(--px-20);
				font-weight: 300;
				text-align: end;
				color: var(--white-color);
				max-width: 555px;
			}

			.Post-Date {
				font-size: var(--px-18);
				line-height: var(--px-20);
				font-weight: 400;
				justify-content: end;
				color: var(--white-color);
			}

			.tags-container {
				position: absolute;
				top: 0;
				left: 20px;
			}

			@media (min-width: 1024px) {
				background-color: var(--black-color);

				.tags-container {
					position: relative;
					top: 0;
					left: initial;
					margin-bottom: var(--px-16);
					justify-content: flex-end;

				}

				.First-Post-Content {
					border-left: var(--px-20) solid var(--pink-color);
				}

				.swiper-pagination {
					display: none;
				}
			}

			@media (min-width: 1536px) {
				padding: var(--px-56) 0 var(--px-16) 0;
			}
		}
	}

	.Detail-Post {
		color: var(--black-color);
	}

	@media screen and (max-width: 1280px) {
		.heading {
			font-size: var(--px-56);
			line-height: var(--px-56);
		}
	}

	@media screen and (max-width: 780px) {
		.heading {
			font-size: var(--px-48);
			line-height: var(--px-48);
		}
	}

	.Article-List-Page {
		.Tag-Value-Index {
			img {
				display: none;
			}
		}
	}

	.swiper-button-next,
	.swiper-button-prev {
		border-radius: var(--px-64) !important;
		cursor: pointer;
		overflow: hidden;
		background-color: transparent !important;
		transition: all 0.3s ease;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 100%;
			width: 100%;
			border-radius: var(--px-64);
			pointer-events: none;
			transform: rotate(145deg);
			box-shadow: inset 0 -2px 6px 1px rgba(0, 0, 0, 0.15);
			background-image: url("/images/arrow-effect.png");
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		&::after {
			z-index: 1;
		}
	}

	.swiper-button-next::after, .swiper-button-prev::after {
		font-size: var(--px-16) !important;
	}

	.swiper-button-next {
		top: calc(100% + 24px);
		left: inherit !important;
		right: 5% !important;

		@media (min-width: 576px) {
			right: 30% !important;
		}

		@media (min-width: 768px) {
			right: 40% !important;
		}
	}

	.swiper-button-prev {
		top: calc(100% + 24px);
		left: 5% !important;
		right: inherit !important;

		@media (min-width: 576px) {
			left: 30% !important;
		}

		@media (min-width: 768px) {
			left: 40% !important;
		}
	}

	.swiper-pagination-bullet {
		border-radius: 0;
		width: var(--px-20);
		height: var(--px-2);
		background-color: var(--white-color);
		opacity: 80%;
		margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);

		&.swiper-pagination-bullet-active {
			background-color: var(--pink-color);
		}
	}

	.swiper-slide-active {
		.Number-Box {
			top: 20px;
			text-shadow: -2px -2px 0 var(--pink-color),
			2px -2px 0 var(--pink-color),
			-2px 2px 0 var(--pink-color),
			2px 2px 0 var(--pink-color);
			font-size: 200px;

			@media (min-width: 576px) {
				font-size: 250px !important;
			}
		}
	}

	.sb-tech-related {
		padding-left: var(--px-16);
		border-left: var(--px-4) solid var(--pink-color);

		h5 {
			font-size: var(--px-32);
			line-height: var(--px-32);
		}

		li {
			a {
				font-style: italic;
				text-decoration: underline;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.sb-tech-discover {
		padding: var(--px-16);
		background-color: #F9F1E7;
		border-radius: var(--px-8);
		color: #847548;

		a {
			color: var(--black-color) !important;
		}
	}

	.SbTech-Section {
		position: relative;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 10px;
			height: 312px;
		}

		@media screen and (max-width: 780px) {
			&:before {
				width: 6px;
				height: 146px;
			}
		}

		&.Future {
			&:before {
				background-color: var(--lemon-color);
			}

			.Tag-Value-Index {
				background-color: var(--sky-color);
				color: var(--black-color);

				img {
					filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
				}
			}
		}

		&.Gadgets {
			&:before {
				background-color: var(--sparkling-green-color);
			}

			.Tag-Value-Index {
				background-color: var(--pink-color);
				color: var(--black-color);

				img {
					filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
				}
			}
		}

		&.Gaming {
			&:before {
				background-color: var(--pink-color);
			}

			.Tag-Value-Index {
				background-color: var(--purple-color);
				color: var(--white-color);

				img {
					filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7123%) hue-rotate(44deg) brightness(109%) contrast(96%);
				}
			}
		}

		&.Space {
			&:before {
				background-color: var(--blue-color);
			}

			.Tag-Value-Index {
				background-color: var(--yellow-color);
				color: var(--black-color);

				img {
					filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
				}
			}
		}

		&.Crypto {
			&:before {
				background-color: var(--purple-color);
			}

			.Tag-Value-Index {
				background-color: var(--yellow-color);
				color: var(--black-color);

				img {
					filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
				}
			}
		}
	}

	.Future {
		.Tag-Value-Index {
			background-color: var(--sky-color);
			color: var(--black-color);

			img {
				filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
			}
		}
	}

	.Gadgets {
		.Tag-Value-Index {
			background-color: var(--pink-color);
			color: var(--black-color);

			img {
				filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
			}
		}
	}

	.Gaming {
		.Tag-Value-Index {
			background-color: var(--purple-color);
			color: var(--white-color);

			img {
				filter: brightness(0) saturate(100%) invert(92%) sepia(93%) saturate(0%) hue-rotate(202deg) brightness(106%) contrast(106%);
			}
		}
	}

	.Space {
		.Tag-Value-Index {
			background-color: var(--yellow-color);
			color: var(--black-color);

			img {
				filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
			}
		}
	}

	.Tag-Value-Index {
		&.Future {
			background-color: var(--sky-color);
			color: var(--black-color);

			img {
				filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
			}
		}

		&.Gadgets {
			background-color: var(--pink-color);
			color: var(--black-color);

			img {
				filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
			}
		}

		&.Gaming {
			background-color: var(--purple-color);
			color: var(--white-color);

			img {
				filter: brightness(0) saturate(100%) invert(92%) sepia(93%) saturate(0%) hue-rotate(202deg) brightness(106%) contrast(106%);
			}
		}

		&.Space {
			background-color: var(--yellow-color);
			color: var(--black-color);

			img {
				filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(323deg) brightness(101%) contrast(104%);
			}
		}
	}

	.Number-Box {
		padding: 0;
		position: relative;
		top: 36px;
		left: 30px;
		height: 100%;
		max-width: 75px;
		background-color: transparent;
		color: var(--black-color);
		font-family: 'Oswald', sans-serif;
		text-shadow: -2px -2px 0 var(--white-color),
		2px -2px 0 var(--white-color),
		-2px 2px 0 var(--white-color),
		2px 2px 0 var(--white-color);
		font-size: 200px;
		line-height: 1;
		z-index: -1;

		@media (min-width: 768px) {
			left: 10px;
		}
	}

	.Hero-Swiper {
		overflow: hidden;
		padding: 0 var(--px-20);

		.swiper {
			padding-bottom: var(--px-48);
		}

		.swiper-button-next {
			top: 50%;
			left: calc(100% + 24px) !important;
			right: initial !important;
		}

		.swiper-button-prev {
			top: 50%;
			left: initial !important;
			right: calc(100% + 24px) !important;
		}

		.swiper-wrapper {
			width: calc(100dvw - 16px);
			left: 8px;
		}

		.swiper-slide {
			max-width: 318px;

			&.swiper-slide-active {
				.Post-Image {
					box-shadow: 0 0 54px -16px rgba(115, 0, 255, 0.57);
				}
			}

			.Post-Image {
				aspect-ratio: 318/200;
			}
		}

		@media (min-width: 576px) {
			.swiper-slide {
				margin-left: 0 !important;
				max-width: inherit !important;
			}
		}
	}

	.swiper {
		&.SbTech-Trending-Swiper {
			padding-bottom: var(--px-46);
			width: 100dvw;

			.swiper-slide {
				@media (min-width: 480px) {
					width: auto;
				}
			}

			.SbTech-Trending-Slide {
				position: relative;
				left: -16px;
			}

			.Title-Large-Post-Index {
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.Post-Container {
				max-width: 437px !important;
				aspect-ratio: 437/416 !important;
				max-height: initial !important;
				min-height: auto !important;
			}

			@media (min-width: 768px) {
				width: 100%;

				.SbTech-Trending-Slide {
					position: relative;
					left: 0;
				}

				.Title-Large-Post-Index {
					display: inline-block;
				}

				.Post-Container {
					position: relative;
					background-color: var(--black-color);
					max-height: 600px;
					min-height: 320px;
					max-width: initial;
					aspect-ratio: initial;
				}
			}
		}
	}

	.Tag-Value-Index {
		padding: var(--px-4) var(--px-8);
		align-items: center;
		font-size: var(--px-10);
		font-weight: 600 !important;
		line-height: var(--px-10);
		background-color: var(--purple-color);
		min-height: var(--px-24);

		img {
			display: none !important;
			position: relative;
			left: -4px;
		}

		@media (max-width: 575.98px) {
			img {
				display: none;
			}
		}
	}

	.Post-Image {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: var(--px-48);
			background: linear-gradient(0, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
		}
	}

	.Post-Items {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;

		.tags-container {
			position: relative;
			top: -24px;
			left: -8px;
			margin: 0;
			gap: var(--px-6);
			align-items: flex-start;
			justify-content: flex-start;
		}

		.Post-Date {
			margin-top: 0;
			font-weight: 400;
			flex: 0 0 auto;
			text-transform: uppercase;
		}

		.Title-Post-Index {
			font-size: var(--px-22) !important;
			line-height: var(--px-24);
		}
	}

	.Title-Large-Post-Index {
		color: var(--white-color);
		font-size: var(--px-32);
		line-height: var(--px-32);

		&.small {
			font-size: var(--px-22);
			line-height: var(--px-24);
		}

		@media screen and (max-width: 780px) {
			font-size: var(--px-24);
			line-height: var(--px-24);
		}
	}

	.Title-Post-Index-2 {
		color: var(--white-color);
		font-size: var(--px-22);
		line-height: var(--px-24);
	}

	.Footer-Hover {
		font-size: var(--px-16);
		line-height: var(--px-24);
		color: var(--black-color-300);
		text-transform: none;

		&:hover {
			color: var(--blue-color);
		}
	}

	.Nav-Menu-ListButton {
		a {
			font-family: 'Oswald', sans-serif !important;
			font-weight: 700;
		}

		button {
			font-family: 'Roboto', sans-serif;
			font-weight: 400;
			font-style: normal;
		}

		.modal-btn {
			display: flex;
			align-items: center;
			gap: var(--px-4);
		}

		&:hover {
			img {
				filter: brightness(0) saturate(100%) invert(29%) sepia(81%) saturate(1903%) hue-rotate(200deg) brightness(102%) contrast(117%);
			}
		}
	}

	.footer-copyright {
		padding: var(--px-30) var(--px-16) var(--px-32) var(--px-16);
		flex-direction: column-reverse;

		.footer-logo {
			flex-direction: column;
		}
	}

	.network-btn-wrapper {
		display: flex;
		flex-direction: row;
		gap: var(--px-16);

		.network-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid var(--border-color);
			padding: var(--px-22) var(--px-16);
			border-radius: var(--px-12);
			width: 100%;
		}
	}

	.subscribe-btn {
		padding: var(--px-8) var(--px-8);
		display: flex;
		align-items: center;
		font-family: 'Inter', sans-serif;
		font-weight: 600;
		color: var(--white-color);
		font-size: var(--px-10);
		line-height: var(--px-24);
		border-radius: var(--px-24);
		background: #58A4FF;
		background: linear-gradient(90deg, rgba(88, 164, 255, 1) 100%, rgba(0, 116, 255, 0) 100%);
		box-shadow: 0 0 18px 0 rgba(88, 164, 255, 1);
		text-transform: uppercase;
		max-height: var(--px-24);
	}

	.new-mobile-menu {
		display: none;
		padding: var(--px-24);
		position: fixed;
		top: 0;
		right: 0;
		transition: right 0.3s ease;
		width: 100%;
		height: 100dvh;
		background-color: var(--black-color);
		background-image: url('../images/banners/sb-tech-nav-menu-bg.png');
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		z-index: 99;
		box-shadow: 0 0 30px 30px rgba(0, 0, 0, 0.75);

		&.active {
			display: block;
		}

		.modal-btn {
			min-height: auto;
		}

		@keyframes showMenu {
			0% {
				right: -353px;
			}
			100% {
				right: 0;
			}
		}
	}


	.new-mobile-menu-head {
		margin-bottom: var(--px-24);
		display: flex;
		justify-content: space-between;
		gap: var(--px-16);
		color: var(--white-color);
	}

	.new-mobile-search {
		padding: var(--px-16);
		border: 1px solid var(--border-color);
		border-radius: var(--px-4);
		background-color: #212121;
		cursor: pointer;
		color: var(--white-color);

		&:hover {
			border: 1px solid var(--white-color);
		}
	}

	.new-mobile-menu-ul {
		li {
			padding: var(--px-16);
			position: relative;
			border-bottom: 1px solid var(--border-color);
			font-size: var(--px-24);
			line-height: var(--px-32);

			a {
				border-bottom: none !important;
			}

			&:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				height: 33px;
				width: 3px;
			}
		}

		.Future {
			&:before {
				background-color: var(--sky-color);
			}
		}

		.Gaming {
			&:before {
				background-color: var(--pink-color);
			}
		}

		.Gadgets {
			&:before {
				background-color: var(--sparkling-green-color);
			}
		}

		.Crypto {
			&:before {
				background-color: var(--purple-color);
			}
		}

		.Space {
			&:before {
				background-color: var(--space-orange-color);
			}
		}
	}

	.new-mobile-menu-network {
		margin-top: var(--px-16);
		padding-bottom: var(--px-32);
		color: var(--white-color);
		border-bottom: 1px solid var(--white-color);

		span {
			margin-top: var(--px-16);
			margin-bottom: var(--px-8);
			display: inline-block;
			font-family: 'Inter', sans-serif;
			font-weight: 600;
			font-size: var(--px-16);
			line-height: var(--px-32);
		}
	}

	.new-mobile-menu-social {
		margin-top: var(--px-16);
		justify-content: flex-start !important;
	}

	@media (min-width: 640px) {
		.sb-tech {
			.network-btn {
				flex-direction: column !important;
			}
		}

		.new-mobile-menu {
			max-width: 353px;
		}

		.network-btn-wrapper {
			flex-direction: column !important;

			.network-btn {
				max-width: 155px;
			}

			&.mobile {
				flex-direction: row !important;


			}
		}

		.footer-copyright {
			flex-direction: row !important;
		}
	}

	@media (min-width: 768px) {
		.footer-copyright {
			.footer-logo {
				flex-direction: row !important;
			}
		}
	}

	.Article-Hero-Section {
		background-color: var(--black-color);
		background-image: url("../images/article-section-bg.jpg");
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: cover;

		* {
			color: var(--white-color);
		}

		.Article-Hero-Section-Image {
			.Article-First-Post-Image {
				position: relative;
				width: 100%;
				aspect-ratio: 394/320;
				background-color: var(--black-color);
				z-index: 3;

				.First-Post-Image-Wrapper {
					position: relative;
				}

				img {
					position: relative;
					width: 100%;
					height: 100%;
					object-fit: cover;
					z-index: 1;
				}


				&:before, &:after {
					content: '';
					position: absolute;
					left: 0;
					width: 100%;
					height: 55px;
				}

				&:before {
					top: 0;
					background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
					z-index: 2;
				}

				&:after {
					bottom: 0;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
					z-index: 1;
				}
			}

			.Article-First-Post-Image-Effects {
				display: none;
			}

			@media (min-width: 576px) {
				.Article-First-Post-Image {
					aspect-ratio: 16/9;
				}
			}

			@media (min-width: 1024px) {
				height: 100%;
				aspect-ratio: 740/580;

				.Article-First-Post-Image {
					position: absolute;
					right: var(--px-70);
					bottom: 0;
					width: calc(100% - 70px);
					aspect-ratio: 675/514;

					&:before, &:after {
						content: none;
					}
				}

				.Article-First-Post-Image-Effects {
					display: block;
					position: absolute;
					right: 0;
					bottom: 0;
					width: 100%;
					height: 100%;

					.Article-First-Post-Image-1 {
						position: absolute;
						right: 32px;
						bottom: -32px;;
						width: calc(100% - 70px);
						aspect-ratio: 676 / 578;
						z-index: 2;

						svg {
							margin-left: 1px;
							width: 100%;
							height: 100%;
						}
					}

					.Article-First-Post-Image-2 {
						position: absolute;
						right: 0;
						bottom: 0;
						width: calc(100% - 100px);
						aspect-ratio: 658 / 580;
						z-index: 1;

						svg {
							margin-left: 1px;
							width: 100%;
							height: 100%;
						}

						&:after {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 66px;
							background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
						}
					}
				}
			}
		}

		.Article-Hero-Section-Tags {
			position: absolute;
			top: 0;
			left: var(--px-16);
			z-index: 4;

			@media (min-width: 1024px) {
				position: relative;
				left: 0;
			}
		}

		.Article-Hero-Section-Content {
			position: relative;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 414px;
			}

			.Title-Post {
				border-left: 6px solid var(--pink-color);
				font-size: var(--px-36);

				@media (min-width: 1280px) {
					border-left: 10px solid var(--pink-color);
					font-size: var(--px-64);
				}
			}

			@media (min-width: 1024px) {
				&:after {
					content: none;
				}
			}
		}
	}

	.SbTech-Article-List-Page-Hero-Section {
		background-color: var(--black-color);
		color: var(--white-color) !important;

		.heading {
			position: relative;

			span {
				display: block;
			}

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: -20px;
				width: var(--px-10);
				height: 100%;
				background: var(--lemon-color);
			}

			@media (min-width: 768px) {
				&::before {
					left: -40px;
				}
			}

			@media (min-width: 1024px) {
				&::before {
					left: -20px;
					width: var(--px-12);
				}
			}
		}

		.SbTech-Article-List-Page-Hero-Title {
			.heading {
				@media (min-width: 1024px) {
					font-size: var(--px-64);
				}
			}

			p {
				font-size: var(--px-18);
			}

			.Tag-Value-Index {
				padding: var(--px-12) var(--px-18);
				height: var(--px-40);
				border-radius: var(--px-40);
				font-size: var(--px-16);

				img {
					display: block;
				}
			}
		}
	}

	.Button-Post {
		background-color: var(--blue-color);

		&:hover {
			background-color: var(--pink-color);
		}
	}

	.SbTech-Article-Horizontal {
		h1, h5 {
			color: var(--white-color);
			font-size: var(--px-32);
			line-height: var(--px-32);

			&:hover {
				color: var(--blue-color);
			}
		}

		.text-white {
			color: var(--white-color) !important;
		}
	}

	.profile-wrapper {
		color: var(--black-color);
	}
}

:root {
	/* === colors === */

	--black-color: #000;
	--black-color-600: #83868C;
	--black-color-300: #ADADAD;
	--white-color: #FFF;

	--border-color: #414141;

	--pink-color: #FF006A;
	--sky-color: #00C3FF;
	--purple-color: #7300FF;
	--blue-color: #0074FF;
	--space-orange-color: #FFC300;
	--lemon-color: #D9FF00;
	--sparkling-green-color: #00FF79;


	/* === px === */
	--px-2: 0.125rem;
	--px-4: 0.25rem;
	--px-6: 0.375rem;
	--px-7: 0.438rem;
	--px-8: 0.5rem;
	--px-10: 0.625rem;
	--px-11: 0.688rem;
	--px-12: 0.75rem;
	--px-13: 0.813rem;
	--px-14: 0.875rem;
	--px-15: 0.938rem;
	--px-16: 1rem;
	--px-18: 1.125rem;
	--px-20: 1.25rem;
	--px-22: 1.375rem;
	--px-24: 1.5rem;
	--px-26: 1.625rem;
	--px-28: 1.75rem;
	--px-30: 1.875rem;
	--px-32: 2rem;
	--px-34: 2.125rem;
	--px-36: 2.25rem;
	--px-38: 2.375rem;
	--px-40: 2.5rem;
	--px-42: 2.625rem;
	--px-44: 2.75rem;
	--px-46: 2.875rem;
	--px-48: 3rem;
	--px-50: 3.125rem;
	--px-52: 3.25rem;
	--px-54: 3.375rem;
	--px-56: 3.5rem;
	--px-64: 4rem;
	--px-70: 4.375rem;
	--px-72: 4.5rem;
	--px-76: 4.75rem;
	--px-80: 5rem;
	--px-84: 5.25rem;
}