:root {
	--background-color: #F3F3F1;
	--background-color-dark: #2B2C2E;
	--background-color-dark-hover: #222323;
	--background-color-dark-active: #1B1D1F;
	--disabled-color: #E5E3DF;
	
	--background-color-social: #E5E3DF;
	--background-color-white: #FFFFFF82;
	--primary-color: #BADDF1;
	--primary-color-hover: #9AD0EF;
	--primary-color-active: #58B2E6;
	--primary-color-disabled: #ACB1B3;
	
	--white: #fff;
	--black: #000000;
	--text-color: #1B1D1F;
	--text-color-button: #111111;
	--text-color-hover: #355792;
	--text-color-light-grey: #5B5B5B;
	
	--menu-color-hover: #7691C0;
	
	--title-color: #202123;
	--header-color: #FED5E5;
	
	--border-color: #C2C2C1;
	--border-search-color: #FFFFFF33;
	
	--focus-color: #5774A8;
	--error-color: #E94235;
	--grey-color: #878787;
	--blue-color: #878787;
	--title-color-new: #1E293B;
	
	
	
	--text_color: #111;
	--title_color: #111;
	--second_title_color: #1E293B;
	
	--section_space: 116px;
}

.container {
	margin: 0 auto;
	max-width: 1344px;
	padding: 0 32px;
}

.container-fluid {
	margin: 0 auto;
	max-width: 1440px;
}

.section_space {
	margin-bottom: var(--section_space);
}

body {
	font: 400 16px "Montserrat", sans-serif;
	color: var(--text_color);
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	/*color: var(--title_color);*/
	line-height: 1.3;
}

@media (max-width: 1199px) {
	:root {
		--section_space: 64px;
	}
	
	body {
		font-size: 14px;
	}
}

@media(max-width: 767px) {
	.container {
		padding: 0 20px;
	}
}

.page__breadcrumbs_wrapper {
	width: 100%;
	padding-inline: 80px;
	max-width: 1440px;
	margin: 24px auto;
	
	@media (max-width: 1024px) {
		padding-inline: 32px;
	}
	
	@media (max-width: 767px) {
		padding-inline: 20px;
		margin: 16px 0;
	}
	
	.page__breadcrumbs {
		justify-content: flex-start;
	}
}

.hab-read-more {
	display: inline-block;
	border: none;
	background-color: transparent;
	color: #7691C0;
	cursor: pointer;
	text-decoration: underline;
	transition: opacity 0.2s ease;
	padding: 0;
	align-self: flex-start;
	font-size: clamp(14px, 1.1112vw, 16px);

	&:hover {
		color: #5774A8;
	}
}

.hab-post-title {
	margin-bottom: clamp(24px, 2.223vw, 32px);
	font-size: clamp(24px, 2.223vw, 32px);
	letter-spacing: 4%;
	line-height: 1.25;

	@media (max-width: 767px) {
		font-size: 22px;
	}
}

/*===== LLM =====*/
.llm-buttons{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	margin: 25px 0;
	justify-content: flex-start;

	.llm-btn {
		flex: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		border-radius: 40px;
		padding: 10px 22px;
		color: #fff;
		text-decoration: none;
		transition: all 0.3s ease;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
		border: none;

		@media (min-width: 767px) and (max-width: 1024px) {
			flex: 0 0 calc(50% - 6px);
		}

		@media (max-width: 551px) {
			width: 100%;
			justify-content: center;
		}

		.llm-icon {
			display: flex;
			align-items: center;
			justify-content: center;

			svg {
				width: 24px;
				height: 24px;
				fill: #fff;
				vertical-align: middle;
			}
		}

		&.chatgpt {
			background: linear-gradient(135deg, #0D9E79, #14B093, #0b8264, #0e9d84);
		}

		&.perplexity {
			background: linear-gradient(135deg, #1b2e55, #3455a5, #162544, #1d3268);
		}

		&.grok {
			background: linear-gradient(135deg, #000000, #676767, #1a1a1a, #444);
		}

		&.googleai {
			background: linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #EA4335);

		}
		&.chatgpt,
		&.perplexity,
		&.grok,
		&.googleai {
			background-size: 300% 100%;
			animation: gradientShift 6s ease infinite;

			&:hover {
				opacity: 0.7;
			}
		}
	}
}

@keyframes gradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
/*===== End LLM =====*/