/* #region HEADER */
.header {
	font-family: var(--font-Inter);
	font-weight: var(--fw-700);
	font-size: var(--text-12);
	line-height: normal;
	padding-bottom: 61px;
}

.header__top {
	background: var(--dark);
	padding-block: 17px;
	color: var(--white);
	text-transform: uppercase;
}

.header__nav-top {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	.header__nav-list {
		display: flex;
		align-items: center;
		gap: 10px;

		.header__nav-item a {
			display: flex;
			align-items: center;
			transition: color var(--transition);

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

			&.linkedin:hover {
				color: #0077b5;
			}

			&.youtube:hover {
				color: var(--red);
			}

			&.facebook:hover {
				color: #1877f2;
			}
		}
	}
}

.header__bottom {
	background-color: var(--white);
	box-shadow: var(--shadow-header);
}

.header__main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;

	.header__nav-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header__nav-item {
		a {
			position: relative;
			display: flex;
			padding: 21px 10px;
			font-size: var(--text-20);
			line-height: var(--lh-1);

			&.header__nav-item-news {
				position: relative;
				padding-right: 30px;

				&::before {
					content: "";
					position: absolute;
					top: 28px;
					right: 0;
					transform: translateX(-50%);
					border-left: 8px solid transparent;
					border-right: 8px solid transparent;
					border-top: 8px solid var(--dark);
					border-radius: var(--radius-2);
				}

				&:hover::before {
					border-top-color: #00ac4d;
				}
			}
		}

		&:hover a::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 0 20px 20px;
			border-color: transparent transparent transparent transparent;
		}

		&:nth-child(1):hover a::after {
			border-left-color: #00ac4d;
		}
		&:nth-child(2):hover a::after {
			border-left-color: #e74c3c;
		}
		&:nth-child(3):hover a::after {
			border-left-color: #f1c40f;
		}
		&:nth-child(4):hover a::after {
			border-left-color: #3498db;
		}
		&:nth-child(5):hover a::after {
			border-left-color: #9b59b6;
		}
	}
}

.header__logo {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1;

	.header__logo-text {
		font-size: var(--text-12);
		font-weight: var(--fw-700);
		max-width: 100px;
	}
}

.header__controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 12px 8px;

	&:hover .header__burger-line {
		background-color: var(--hover);
	}
}

.header__burger-line {
	width: 24px;
	height: 3px;
	background-color: var(--white);
	border-radius: var(--radius-4);

	transition: background-color var(--transition);
}

.header__search {
	display: flex;
	transition: color var(--transition);
	padding: 8px;

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

.header__logo-icon-mobile {
	display: none;
}

@media (max-width: 991px) {
	.header__top,
	.header__nav-bottom,
	.header__logo-icon-desktop {
		display: none;
	}
	.header__main {
		padding-block: 16px;
	}
	.header__bottom {
		background-color: var(--dark);
		color: var(--white);
	}
	.header__logo-icon-mobile {
		display: block;
	}
	.header__burger {
		display: flex;
	}
	.header__search {
		padding: 10px;
	}
}

@media (max-width: 767px) {
	.header {
		padding-bottom: 42px;
	}
}

@media (max-width: 576px) {
	.header__logo {
		gap: 12px;
	}
	.header__controls {
		gap: 0;
	}
}

/* #endregion Header */

/* #region ARTICLE SECTION */
.article {
	padding-bottom: 40px;
}

.article__header {
	margin-bottom: 40px;
}

.article__headline {
	margin-bottom: 30px;
}

.article__byline {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.article__byline-text {
	display: flex;
	align-items: center;
	font-size: var(--text-18);
	line-height: var(--lh-15);
	color: var(--gray);
}

.article__social {
	display: flex;
	gap: 5px;
}

.article__link {
	display: flex;
	align-items: center;
	padding: 13px;
	border: var(--border-btn);
	transition: border-color var(--transition), background-color var(--transition);

	&:hover {
		border-color: var(--gray-50);
		background-color: var(--white-50);
	}
}
.article__body {
	max-width: 770px;
}

.article__title {
	padding-block: 40px 20px;
	border-bottom: var(--border-btn);
	margin-bottom: 40px;
}

.article__text {
	margin-bottom: 30px;

	&:last-of-type {
		margin-bottom: 0;
	}
}

.article__meta {
	display: flex;
	gap: 40px;
	margin-bottom: 30px;
}

.article__quote {
	background: var(--white-50);
	border-left: 4px solid #ccc;
	padding: 16px 24px;
	font-size: var(--text-22);
	font-weight: var(--fw-700);
	line-height: var(--lh-16);
	min-width: 320px;
}

.article__quote-text {
	margin-bottom: 10px;
}

.article__quote-author {
	font-size: var(--text-18);
	color: var(--gray-150);
}

.article__btn {
	margin-block: 30px;

	&:last-of-type {
		margin-bottom: 0;
	}
}

@media (max-width: 768px) {
	.article__byline-text {
		font-size: var(--text-16);
	}
	.article__title {
		font-size: var(--text-24);
		margin-bottom: 30px;
	}
	.article__text {
		font-size: var(--text-18);
		margin-bottom: 20px;
	}
	.article__meta {
		gap: 16px;
		margin-bottom: 20px;
		flex-direction: column;
	}
	.article__quote-text {
		font-size: var(--text-18);
		margin-bottom: 6px;
	}
	.article__quote {
		min-width: 270px;
	}
}

/* #endregion NEWS SECTION */

/* #region MORE CONTENT SECTION */
.more-content {
	padding-bottom: 60px;
	font-family: var(--font-Inter);
	font-size: var(--text-16);
	font-weight: var(--fw-700);
	line-height: var(--lh-175);
}

.more-content__tabs {
	margin-bottom: 30px;
}

.more-content__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.more-content__item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-inline: 8px;
}

@media (max-width: 576px) {
	.more-content {
		padding-bottom: 48px;
	}
}

/* #endregion MORE CONTENT SECTION */

/* #region FOOTER */
.footer {
	background: var(--bg-footer);
	color: var(--white);
	padding-top: 60px;
}

.footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding-bottom: 32px;
}

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

.footer__branding,
.footer__link-group {
	font-family: var(--font-Arial);
	font-size: var(--text-16);
}

.footer__branding {
	line-height: var(--lh-175);
}

.footer__logo {
	display: inline-block;
	margin-bottom: 30px;
}

.footer__description {
	margin-bottom: 10px;
}

.footer__learn-more {
	font-weight: var(--fw-700);
	transition: color var(--transition);

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

.footer__links {
	display: flex;
	justify-content: space-between;
	gap: 60px;
}

.footer__link-group {
	line-height: var(--lh-15);
	font-weight: var(--fw-700);

	a {
		display: inline-block;
		padding-block: 12px;
		padding-inline: 8px;
		transition: color var(--transition);

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

.footer__nav-list {
	display: flex;
	gap: 12px;

	.footer__nav-link-social {
		padding: 12px;
		transition: color var(--transition);

		&.linkedin:hover {
			color: #0077b5;
		}

		&.youtube:hover {
			color: var(--red);
		}
		&.facebook:hover {
			color: #1877f2;
		}
		&.wifi:hover {
			color: var(--hover);
		}
	}
}

.footer__bottom {
	background-color: var(--dark);
	padding-block: 30px;
	border-top: var(--border-footer);
}

.footer__bottom-container,
.footer__back-top {
	font-family: var(--font-Inter);
	font-size: var(--text-12);
	font-weight: var(--fw-700);
	line-height: var(--lh-2);
	letter-spacing: 2.4px;
}

.footer__bottom-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer__back-top {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--white);
	text-transform: uppercase;
	cursor: pointer;

	&:hover {
		text-decoration: underline;
	}
}

@media (max-width: 767px) {
	.footer__bottom-container {
		flex-direction: column;
		gap: 12px;
	}
}

@media (max-width: 576px) {
	.footer__top {
		gap: 30px;
	}
	.footer__links {
		flex-direction: column;
		gap: 0;
	}
	.footer__bottom-container,
	.footer__back-top {
		letter-spacing: 1px;
	}
}
/* #endregion FOOTER */

/* #region MODAL FORM */
.modal {
	display: none;
	position: fixed;
	inset: 0;
	padding: 10px;
	background-color: #0000005b;
	align-items: center;
	justify-content: center;
	z-index: 999;
}
.modal-inner {
	max-width: 450px;
	width: 100%;
	border-radius: 16px;
	padding: 20px;
	background-color: var(--white);
	position: relative;
	box-shadow: var(--shadow-header);
}
#close {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
}
.no-scroll {
	overflow: hidden;
}
/* #endregion MODAL FORM  */