/* #region HEADER */
.header__top {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-color: var(--black);
	padding-block: 20px;
}

.header__logo {
	margin-inline: auto;
}

.header__actions {
	display: flex;
	align-items: center;
	gap: 16px;

	a {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.header__search {
	padding: 5px;
	border-radius: 5px;
	transition: background-color 0.3s, color 0.3s;

	&:hover {
		background-color: #001a0e;
		color: var(--lime);
	}
}

.header__signin {
	gap: 10px;
	padding: 10px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: var(--fw-600);
	line-height: normal;
	text-transform: uppercase;
	color: var(--black);
	background-color: var(--lime);
	border: 1px solid var(--lime);
	transition: background-color 0.3s, color 0.3s;

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

.header__bottom {
	border-top: 2px solid var(--primary);
	background: #0e3428;
}

.header__nav {
	width: 100%;
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

.header__nav-list {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: var(--fw-700);
	white-space: nowrap;

	li {
		flex-shrink: 0;
	}

	a {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6px;
		padding: 14px 6px;
		transition: background-color 0.3s, color 0.3s;

		span {
			display: flex;
			align-items: center;
			transition: rotate 0.3s, color 0.3s;
			color: var(--primary);
		}

		&:hover {
			background-color: #0c5135;
			color: var(--lime);

			span {
				color: inherit;
				rotate: 180deg;
			}
		}
	}
}

@media (max-width: 768px) {
	.header__top {
		padding-block: 10px;
		justify-content: space-between;
	}
	.header__logo {
		max-width: 170px;
		margin-inline: 0;
	}
	.header__actions {
		gap: 10px;
		flex-shrink: 0;
	}
	.header__signin {
		font-size: 14px;
		padding-block: 8px;

		svg {
			width: 16px;
			height: 16px;
		}
	}
}

/* #endregion HEADER */

/* #region BREADCRUMBS SECTION */
.breadcrumbs {
	.container {
		background-color: #111;
	}
}

.breadcrumbs__wrapper {
	display: flex;
	align-items: center;
	padding-block: 10px;
}

.breadcrumbs__list {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--black);
	font-size: 12px;
	font-weight: var(--fw-700);
	line-height: normal;
	white-space: nowrap;
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;

	&::-webkit-scrollbar {
		display: none;
	}

	li {
		flex-shrink: 0;
	}
}

.breadcrumbs__link {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2px 10px;
	border-radius: 100px;
	background: var(--primary);
}

.breadcrumbs__text {
	display: -webkit-box;
	max-width: 177px;
	width: 100%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* #endregion BREADCRUMBS SECTION */

/* #region NEWS SECTION  */
.news {
	.container {
		background-color: #111;
	}
}
.news__wrapper {
	display: flex;
	gap: 10px;
}

.news__main {
	padding-top: 26px;
}

.news__header {
	margin-bottom: 20px;
	color: #b8b8b8;
}

.news__title {
	color: #e6e6e6;
	margin-bottom: 10px;
}
.news__author {
	display: flex;
	gap: 6px;
	color: #b8b8b8;
	font-size: 14px;
	margin-bottom: 20px;
}

.news__author-img {
	display: flex;
	align-items: center;
	gap: 6px;

	img {
		width: 32px;
		height: 32px;
		border-radius: 40px;
	}
}

.news__author-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-transform: capitalize;
}

.news__author-name {
	font-size: 16px;
	font-weight: var(--fw-700);
	color: var(--primary);
}
.news__date {
	font-size: 12px;
	font-weight: var(--fw-800);
	color: #b8b8b8;
	text-transform: uppercase;
	margin-bottom: 8px;
	padding-inline: 10px;
}

.news__img {
	border-radius: 16px;
	margin-bottom: 20px;
	overflow: clip;
}
.news__actions {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	padding: 15px;
	border-radius: 16px;
	border: 1px solid #484848;
	background: #202020;
	transition: background-color 0.3s;

	&:hover {
		background-color: #262626;
	}

	a {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6px;
		border-radius: 6px;
		padding: 10px 12px;
		font-size: 16px;
		font-weight: 600;
		line-height: normal;
		text-transform: uppercase;
		transition: background-color 0.3s;

		img {
			transition: scale 0.3s;
		}

		span {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30px;
			background: #565656;
			padding: 4px 20px;
		}

		&:hover {
			background-color: #202020;

			img {
				scale: 1.05;
			}
		}
	}
}

.news__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 10px;
	margin-bottom: 20px;
	border-radius: 16px;
	border: 1px solid rgba(11, 230, 175, 0.4);
	background: #202020;
	color: var(--primary);
	transition: background-color 0.3s, box-shadow 0.3s;

	span {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 22px;
		font-weight: 700;
		line-height: normal;
		text-transform: uppercase;
	}

	svg {
		rotate: 270deg;
	}

	&:hover {
		background-color: #262626;
		box-shadow: -4px -4px 8px 0 rgba(255, 255, 255, 0.15) inset,
			4px 4px 8px 0 rgba(255, 255, 255, 0.15) inset;
	}
}
.news__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px 32px;
	color: #c7c7c7;
}
.news__highlight {
	color: var(--primary);
	font-weight: 600;
	line-height: 1.4;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-color: #fff;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}
.news__img-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	color: var(--white);
	font-size: 12px;

	img {
		border-radius: 16px;
	}
}

.news__quote {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 44px;
	border-radius: 16px;
	padding: 16px;
	border: 1px solid rgba(11, 230, 175, 0.6);
	border-left: 3px solid var(--primary);
	background: #1d1d1d;

	p {
		color: #dadada;
		max-width: 514px;
		align-self: center;
		font-weight: 600;
	}
}

.news__quote-img {
	&:last-of-type {
		align-self: end;
		rotate: 180deg;
	}
}
.news__btn-start {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 32px;
	padding: 10px;
	border-radius: 16px;
	border: 1px solid #262626;
	background-color: var(--primary);
	color: #131313;
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s,
		box-shadow 0.3s;

	&:hover {
		color: var(--primary);
		border-color: rgba(11, 230, 175, 0.4);
		background-color: #262626;
		box-shadow: -4px -4px 8px 0 rgba(255, 255, 255, 0.15) inset,
			4px 4px 8px 0 rgba(255, 255, 255, 0.15) inset;
	}
}

@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.news__google {
	position: relative;
	z-index: 0;
	overflow: hidden;
	display: flex;
	padding: 32px 16px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 16px;
	color: #fff;
	border: 1px solid #343434;

	&::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		border-radius: inherit;
		background: conic-gradient(
			from var(--angle),
			rgba(237, 27, 36, 0),
			#ed1b24 5%,
			#ff8027 10%,
			#fef102 15%,
			#24b04d 20%,
			#1617ff 25%,
			rgba(22, 23, 255, 0) 40%
		);
		animation: rotate 6s linear infinite;
	}

	&::after {
		content: "";
		position: absolute;
		z-index: -1;
		left: 2px;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		background: #030303;
		border-radius: 16px;
	}

	h4 {
		font-weight: var(--fw-800);
	}
}

@keyframes rotate {
	from {
		--angle: 0deg;
	}
	to {
		--angle: 360deg;
	}
}

.news__google-link {
	border-radius: 8px;
	background: #fff;
	display: flex;
	padding: 10px 16px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	color: #000;
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	transition: background-color 0.3s;

	img {
		transition: scale 0.3s;
	}

	&:hover {
		background-color: #dfdfdf;

		img {
			scale: 1.2;
		}
	}
}
.news__tabs-list {
	display: flex;
	gap: 10px;
	padding: 8px 20px;
	border-radius: 16px 16px 0 0;
	background: linear-gradient(180deg, #1d1d1d 0%, #0d0d0d 100%);

	a {
		padding: 8px 16px;
		color: #9e9e9e;
		font-size: 18px;
		font-weight: 600;
		border-radius: 8px;

		&.active {
			color: #000;
			background-color: var(--primary);
		}

		&:not(.active):hover {
			color: var(--white);
		}
	}
}
.news__tabs-wrapper {
	border-radius: 0 0 16px 16px;
	border: 1px solid #2f2f2f;
	padding: 32px 20px;
}

.news__tabs-content {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 20px;
	border-radius: 16px;
	background: #1c1c1c;
	padding: 16px;
	backdrop-filter: saturate(180%) blur(100px);
	background-image: linear-gradient(rgb(29 29 29), rgb(11 11 11 / 87%)),
		url("/img/bg-logo-author.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	&::before {
		content: "";
		position: absolute;
		top: -50px;
		right: -50px;
		background: radial-gradient(
			circle at center,
			var(--primary) 0,
			transparent 60%
		);
		width: 150px;
		height: 150px;
		filter: blur(40px);
		z-index: -1;
	}
}

.news__author-profile {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.news__author-name {
		margin-bottom: 4px;
	}
}

.news__author-info {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 400;
	text-transform: capitalize;

	img {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		border: 2px solid var(--primary);
	}
}

.news__author-date {
	padding: 8px 16px;
	border-radius: 8px;
	background: #0be6af;
	color: #000;
	font-size: 14px;
	font-weight: 400;
}

.news__author-bio {
	color: #dadada;
	font-size: 18px;
}
.news__author-steps {
	display: flex;
	flex-direction: column;
	gap: 8px;

	li {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		font-size: 18px;
		font-weight: 400;
		color: var(--white);

		span {
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 700;
			font-size: 14px;
			width: 35px;
			height: 35px;
			padding: 7px 14px;
			border-radius: 50%;
			color: var(--primary);
			border: 1px solid var(--primary);
		}
	}
}

.news__registration {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: normal;
	text-transform: capitalize;

	span {
		color: var(--primary);
	}
}

@media (max-width: 1200px) {
	.news__content {
		padding-inline: 0;
	}
	.news__main {
		flex: 1 1 50%;
	}
	.news__btn-start {
		gap: 16px;
	}
}

@media (max-width: 768px) {
	.news__wrapper {
		flex-direction: column;
	}

	.news__header {
		font-size: 14px;
	}

	.news__btn-start {
		font-size: 16px;
		padding: 15px;

		svg {
			width: 20px;
			height: 20px;
		}
	}

	.news__actions {
		padding: 10px;
		flex-direction: column;
	}

	.news__summary {
		span {
			font-size: 16px;
			img {
				width: 18px;
				height: 18px;
			}
		}
	}
	.news__content {
		font-size: 14px;
	}
	.news__quote {
		gap: 36px;
	}

	.news__google {
		text-align: center;

		h4 {
			font-size: 16px;
		}
	}

	.news__google-link {
		font-size: 14px;
	}

	.news__tabs-list {
		a {
			font-size: 16px;
			padding: 6px 16px;
		}
	}
	.news__tabs-wrapper {
		padding: 16px 10px;
	}
	.news__tabs-content {
		padding: 8px;

		&::before {
			display: none;
		}
	}
	.news__author-profile {
		flex-direction: column;
		gap: 16px;
	}
	.news__author-date {
		width: 100%;
		text-align: center;
	}
	.news__author-bio {
		font-size: 14px;
		margin-bottom: 16px;
	}

	.news__author-steps {
		li {
			font-size: 14px;
		}
	}
	.news__registration {
		font-size: 14px;
		gap: 8px;
		text-wrap: balance;
	}
}
/* #endregion NEWS SECTION */

/* #region SIDEBAR */
.news__sidebar {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 32px 16px 32px 32px;
	max-width: 390px;
	flex-shrink: 0;
}

.news__top {
	display: flex;
	flex-direction: column;
	gap: 10px;

	&.news__top--mobile {
		display: none;
	}
}

.news__top-title {
	display: flex;
	padding: 10px;
	align-items: center;
	background: #0be6af;
	gap: 10px;
	color: #111;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	line-height: normal;
	text-transform: capitalize;
}

.news__top-list {
	display: grid;
	grid-template-columns: 2fr 2fr;
	gap: 10px;

	a {
		position: relative;
		overflow: hidden;
		display: block;
		border: 1px solid #0be6af;
		color: #0be6af;
		border-radius: 10px;
		text-align: center;
		transition: scale 0.2s;

		&:before {
			position: absolute;
			content: "";
			background: linear-gradient(0deg, black, transparent);
			z-index: 0;
			width: 100%;
			height: 100%;
			border-radius: 10px;
			left: 0;
		}

		span {
			position: absolute;
			bottom: -15%;
			left: 50%;
			font-weight: 700;
			text-align: center;
			transform: translate(-50%, -100%);
			color: #0be6af;
			width: 60px;
			border-radius: 8px;
		}

		&:hover {
			scale: 1.05;
		}
	}
}

.news__latest {
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-radius: 16px;
	background: #171a17;
	padding: 16px;
	position: sticky;
	top: 32px;

	&.news__latest--mobile {
		display: none;
	}
}

.news__latest-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding-block: 4px;
	color: var(--primary);
	text-align: center;
	font-size: 12px;
	line-height: normal;
	text-transform: capitalize;
	border-bottom: 2px solid var(--primary);
}

.news__latest-title {
	font-size: 21px;
	font-weight: 700;
}

.news__latest-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 10px;
	border-radius: 6px;
	transition: background-color 0.3s, color 0.3s;

	&:hover {
		background-color: #0be6af;
		color: #111;
	}
}

.news__latest-list {
	display: flex;
	flex-direction: column;
	gap: 16px;

	.news__latest-item {
		display: flex;
		align-items: center;
		gap: 10px;
		transition: color 0.3s;
		color: var(--white);

		img {
			width: 80px;
			height: 50px;
			border: 1px solid #0be6af;
			border-radius: 6px;
			flex-shrink: 0;
			transition: scale 0.3s;
		}

		.news__latest-text {
			display: flex;
			flex-direction: column;
			gap: 2px;
			font-size: 12px;
			line-height: normal;
			font-weight: 400;

			p:first-of-type {
				font-size: 14px;
				font-weight: 700;
				text-transform: capitalize;
			}
		}

		&:hover {
			color: #0be6af;

			img {
				scale: 1.05;
			}
		}
	}
}

.news__latest-btn {
	border-radius: 8px;
	border: 1px solid #262626;
	background-color: #0be6af;
	box-shadow: 0 4px 10px 0 rgba(11, 230, 175, 0.1);
	padding: 10px;
	color: #000;
	font-size: 18px;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	text-align: center;
	transition: border-radius 0.3s, border-color 0.3s, background-color 0.3s,
		color 0.3s, box-shadow 0.3s;

	&:hover {
		color: var(--primary);
		border-radius: 16px;
		border-color: rgba(11, 230, 175, 0.4);
		background-color: #262626;
		box-shadow: -4px -4px 8px 0 rgba(255, 255, 255, 0.15) inset,
			4px 4px 8px 0 rgba(255, 255, 255, 0.15) inset;
	}
}

@media (max-width: 1200px) {
	.news__sidebar {
		flex: 1 1 50%;
	}
}

@media (max-width: 768px) {
	.news__sidebar {
		display: none;
	}

	.news__top {
		&.news__top--mobile {
			display: flex;
		}

		&.news__top--desktop {
			display: none;
		}
	}

	.news__latest {
		position: static;

		&.news__latest--mobile {
			display: flex;
		}

		&.news__latest--desktop {
			display: none;
		}
	}
}

/* #endregion SIDEBAR */

/* #region SOCIAL SECTION */
.social {
	.container {
		background-color: #111;
	}
}

.social__list {
	gap: 16px;
	padding-block: 20px;

	a {
		flex-shrink: 0;

		img {
			transition: opacity 0.3s;
		}

		&:hover {
			img {
				opacity: 0.6;
			}
		}
	}
}

/* #endregion SOCIAL SECTION */

/* #region FOOTER */
.footer {
	background-color: var(--black);
	padding-block: 32px;
	font-size: 16px;
	line-height: normal;
	font-weight: var(--fw-400);
}

.footer__wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px;
}

.footer__text {
	max-width: 474px;
}

.footer__links {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.footer__link {
	transition: color 0.3s;

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

@media (max-width: 768px) {
	.footer {
		.container {
			padding-inline: 12px;
		}
	}
}

/* #endregion FOOTER */