@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
	font-family: 'gothic';
	src: local('gothic'), url('../fonts/gothic.woff') format('woff');
}

/* === RESET CSS (обнуление) === */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	font-family: sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	line-height: 1.5;
	background-color: #fff;
	color: #111;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

/* === UTILITY CLASSES (по желанию) === */
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

.hidden {
	display: none !important;
}

.text-center {
	text-align: center;
}

/* === ТЕМАТИЧЕСКИЕ ПЕРЕМЕННЫЕ === */
:root {
	--primary: #FF9600;
	--secondary: #6c757d;
	--background: #fbc461;
	--color-text: #111111;
	--dot: #FFC87B;
	--green: #11472E;
	--orange: #FF9600;
	--white: #FFFFFF;
	--grey: #525252;
	--violet: #B3A0CD;
	--green-light: #82AFB0;
	--blue: #7E8DB4;
}


html,
body {
	font-family: 'gothic';
	background: var(--background);
	scroll-padding-top: 20px;
	scroll-behavior: smooth;
}

.wrapper {

	.container {
		max-width: 1440px;
		width: 100%;
		margin: 0 auto;
		padding: 0 100px;

		@media(max-width: 1440px) {
			padding: 0 20px;
		}
	}

	h1 {
		font-size: 80px;
		font-style: normal;
		font-weight: 700;
		line-height: 110%;

		@media(max-width: 992px) {
			font-size: 50px;
		}
	}

	.h2,
	h2 {
		font-size: 42px;
		font-style: normal;
		font-weight: 400;
		line-height: 110%;
		text-transform: inherit;

		@media(max-width: 992px) {
			font-size: 32px;
		}
	}

	.h3,
	.h3>*,
	h3 {
		font-size: 32px;
		font-style: normal;
		font-weight: 400;
		line-height: 110%;

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

	.h4,
	h4 {
		font-size: 24px;
		font-style: normal;
		font-weight: 400;
		line-height: 130%;

		@media(max-width: 992px) {
			font-size: 20px;
		}
	}

	.h5,
	h5 {
		font-size: 20px;
		font-style: normal;
		font-weight: 400;
		line-height: 130%;

		@media(max-width: 992px) {
			font-size: 16px;
		}
	}

	.text *,
	.text {
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 160%;
	}

	.text b,
	.text * b {
		font-weight: 500 !important;
	}

	.text * strong,
	.text strong {
		font-weight: 400;
	}

	.text.medium *,
	.text.medium {
		font-size: 15px;
		font-style: normal;
		font-weight: 300;
		line-height: 160%;
		/* 36px */
	}

	.text.small *,
	.text.small {
		font-size: 12px;
		font-style: normal;
		font-weight: 300;
		line-height: 140%;
	}

	.button {
		height: 90px;
		padding: 0 45px;
		border-radius: 18px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 27px;
		font-weight: bold;
		cursor: pointer;
		font-family: 'Montserrat', serif;
		font-weight: 700;
		letter-spacing: 1px;
		cursor: pointer;

		@media(max-width: 992px) {
			height: 70px;
			font-size: 22px;
			border-radius: 12px;
		}

		@media(max-width: 767px) {
			height: 50px;
			font-size: 18px;
			border-radius: 8px;
		}

		&.primary {
			color: #fff;
			position: relative;
			overflow: hidden;
			isolation: isolate;
			background: rgba(255, 150, 0, 1);
			filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(-4px -4px 4px #FFCA77);

			&:before {
				content: '';
				position: absolute;
				inset: 0;
				z-index: -1;
				background: linear-gradient(125deg, rgba(255, 150, 0, .76) 0%, rgba(255, 236, 141, 1) 100%);
				transition: transform .3s;
			}

			&:hover:before {
				transform: translate(100%);
			}
		}
	}

	section[class] {
		padding: 115px 0;

		.section-title {
			font-size: 63px;
			font-weight: 700;
			line-height: 1;
			color: #fff;
			margin: 0 auto;
			text-align: center;
			margin-bottom: 70px;

			@media(max-width: 1440px) {
				margin-bottom: 50px;
			}

			@media(max-width: 992px) {
				font-size: 40px;
				margin-bottom: 30px;
			}
		}

		@media(max-width: 1440px) {
			padding: 80px 0;
		}

		@media(max-width: 992px) {
			padding: 50px 0;
		}
	}

	.header {
		padding: 80px 0 50px 0;

		.header__body {
			display: flex;
			grid-gap: 2rem;
			align-items: center;

			@media(max-width: 767px) {
				flex-direction: column;
			}
		}

		.header__desc {
			font-weight: 500;
		}
	}

	.main-banner {
		padding-top: 0 !important;

		.main-banner__body {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			place-items: center;

			.main-banner__right{
				img{
					width: 70%;
					margin: auto;
				}
			}

			@media(max-width: 992px) {
				grid-template-columns: repeat(1, 1fr);

				.main-banner__right {
					display: none;
				}
			}
		}

		h1 {
			color: #fff;
		}

		.main-banner__left {
			.h2 {
				margin: 42px 0 73px 0;

				span {
					color: #fff;
				}

				@media(max-width: 767px) {
					margin: 20px 0;
				}
			}
		}

		.main-banner__text {
			color: #fff;
			margin-top: 35px;

			@media(max-width: 767px) {
				margin-top: 20px;
			}
		}
	}

	.audience {
		.audience__list {
			display: flex;
			flex-direction: column;
			grid-gap: 30px;

			.audience__subtitle {
				font-weight: 700 !important;
				color: #fff;
				text-align: center;
			}
		}

		.audience__item {
			padding: 45px 2rem;
			border-radius: 45px;
			background: linear-gradient(115deg, rgba(255, 255, 255, 1) 0%, rgba(219, 219, 219, 1) 33%, rgba(231, 231, 231, 1) 74%, rgba(255, 255, 255, 1) 100%);
			display: flex;
			align-items: center;
			grid-gap: 3rem;
			box-shadow: 0 6px 0 #FF9600E5;

			&:before {
				content: '';
				width: 60px;
				height: 60px;
				flex: 0 0 60px;
				background: var(--dot);
				border-radius: 50%;
			}

			&.audience__item--big {
				.audience__desc {
					display: flex;
					flex-direction: column;
					grid-gap: 45px;

					ul{
						display: flex;
						flex-direction: column;
						grid-gap: 45px;
						padding-left: 80px;
						max-width: 900px;
					}

					li{
						display: flex;
						grid-gap: .8rem;
						font-size: 24px;
						font-style: normal;
						font-weight: 400;
						line-height: 130%;

						&:before {
							content: '';
							width: 46px;
							height: 46px;
							flex: 0 0 46px;
							background: url(../img/arrow.png) no-repeat;
						}
					}
				}

				.audience__title {
					display: flex;
					align-items: center;
					grid-gap: 3rem;
					color: var(--primary);

					&:before {
						content: '';
						width: 60px;
						height: 60px;
						flex: 0 0 60px;
						background: var(--dot);
						border-radius: 50%;
					}
				}

				&:before {
					display: none;
				}
			}

			@media(max-width: 992px) {
				grid-gap: 1.5rem;
				padding: 2rem;

				&:before {
					content: '';
					width: 40px;
					height: 40px;
					flex: 0 0 40px;
				}

				&.audience__item--big {
					.audience__title {
						grid-gap: 1.5rem;

						&:before {
							content: '';
							width: 40px;
							height: 40px;
							flex: 0 0 40px;
						}
					}

					.audience__desc {
						grid-gap: 1.5rem;

						ul {
							padding-left: 0;
							grid-gap: 20px;
						}

						li {
							grid-gap: .5rem;
							font-size: 22px;

							&:before {
								content: '';
								width: 25px;
								height: 25px;
								flex: 0 0 25px;
								background-size: contain;
							}
						}
					}

				}

			}

			@media(max-width: 767px) {
				grid-gap: 1rem;
				padding: 1.5rem;

				&:before {
					content: '';
					width: 20px;
					height: 20px;
					flex: 0 0 20px;
				}

				&.audience__item--big {
					.audience__title {
						grid-gap: 1rem;

						&:before {
							content: '';
							width: 20px;
							height: 20px;
							flex: 0 0 20px;
						}
					}

					.audience__desc {
						grid-gap: 1rem;

						.audience__desc-list {
							padding-left: 0;
							grid-gap: 1rem;
						}
					}
				}
			}
		}
	}

	.services {
		.services__list {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 40px;

			@media(max-width: 1440px) {
				grid-gap: 20px;
			}

			@media(max-width: 992px) {
				grid-template-columns: repeat(3, 1fr);

				.services__item {
					&.span3 {
						grid-column: span 2;
					}

					&:nth-last-of-type(1),
					&:nth-last-of-type(2),
					&:nth-last-of-type(3) {
						grid-column: span 3;
					}
				}
			}

			@media(max-width: 767px) {
				display: flex;
				flex-direction: column;
			}
		}

		.services__item {
			border-radius: 45px;
			padding: 25px;
			display: flex;
			flex-direction: column;
			background: #fff;
			position: relative;

			.services__icon {
				width: 72px;
				height: 72px;
				margin-bottom: 40px;

				@media(max-width: 992px) {
					width: 50px;
					height: 50px;
				}
			}

			.services__title {
				line-height: 1;
				margin-bottom: 1rem;
			}

			.services__link {
				margin-top: auto;
				display: flex;
				align-items: center;
				grid-gap: 1rem;
				font-size: 20px;

				&:before {
					content: '';
					width: 49px;
					height: 49px;
					flex: 0 0 49px;
					background-image: url(../img/arrow-black.svg);
					background-repeat: no-repeat;
					background-position: 50% 50%;
					transition: all .3s;

					@media(max-width: 992px) {
						width: 30px;
						height: 30px;
						background-size: contain;
					}
				}

				.services__item:hover &:before {
					transform: scale(1.2);
				}
			}

			a {
				position: absolute;
				inset: 0;
			}

			&.span2 {
				grid-column: span 2;
			}

			&.span3 {
				grid-column: span 3;
			}

			&.style1 {
				box-shadow: inset 0 2px 5px rgba(0, 4, 4, 0.25);
			}

			&.style2 {
				box-shadow: inset 0 0 0 7px var(--primary);
			}

			&.style3 {
				background: linear-gradient(125deg, rgba(255, 150, 0, .76) 0%, #fff 140%);
				box-shadow: inset 0 2px 5px rgba(0, 4, 4, 0.25);

				.services__link {
					&:before {
						background-image: url(../img/arrow-white.svg);
					}
				}
			}

			&.style4 {
				background: #ffd40061;
				box-shadow: inset 0 2px 5px rgba(0, 4, 4, 0.25);
			}
		}

	}

	.info {
		.info__list {
			display: flex;
			flex-direction: column;
			grid-gap: 30px;
		}

		.info__item {
			padding: 20px;
			background: linear-gradient(115deg, rgba(243, 243, 243, 1) -50%, rgba(255, 150, 0, 1) 100%);
			border-radius: 45px;
			box-shadow: inset 0 -8px 6px #EA8A00E5;

			&:nth-of-type(2n) {
				background: linear-gradient(115deg, rgba(255, 255, 255, 1) -50%, rgba(224, 223, 223, 1) 100%);

				.info__icon {
					box-shadow: inset 40px 45px 45px -45px #D4D4D4, inset -36px -36px 45px -9px #FAF9F9;
				}

				.info__text {

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

		.info__title {
			display: flex;
			grid-gap: 1rem;
			align-items: center;
			margin-bottom: 1rem;
		}

		.info__icon {
			width: 69px;
			height: 69px;
			border-radius: 50%;
			box-shadow: inset 40px 45px 45px -45px #E0AC62, inset -36px -36px 45px -9px #FFE2B8;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 45px;
			}
		}

		.info__text {
			padding: 20px;

			p:not(:last-child) {
				margin-bottom: 1rem;
			}

			strong {
				color: #fff;
			}

			ul {
				margin: 1rem 0;

				li {
					&:before {
						content: "•";
						margin-right: .8rem;
						color: var(--primary);
					}

					&:not(:last-child) {
						margin-bottom: .5rem;
					}
				}
			}

			@media (max-width: 992px) {
				padding: 1rem;
			}

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

		.info-list {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 2rem;
			grid-row-gap: 1rem;
			margin-top: 2rem;

			li:before {
				color: #000 !important;
			}

			@media(max-width: 767px) {
				display: flex;
				flex-direction: column;
			}

		}

		.info-list__left,
		.info-list__right {
			display: contents;
		}

		.info-list__left .info-list__item:nth-child(1) {
			grid-column: 1;
			grid-row: 1;
		}

		.info-list__left .info-list__item:nth-child(2) {
			grid-column: 1;
			grid-row: 2;
		}

		.info-list__left .info-list__item:nth-child(3) {
			grid-column: 1;
			grid-row: 3;
		}

		.info-list__right .info-list__item:nth-child(1) {
			grid-column: 2;
			grid-row: 1;
		}

		.info-list__right .info-list__item:nth-child(2) {
			grid-column: 2;
			grid-row: 2;
		}

		.info-list__right .info-list__item:nth-child(3) {
			grid-column: 2;
			grid-row: 3;
		}
	}
}


.contact-form-dialog {
	max-width: 1220px;
	width: 80%;
	border: none;
	border-radius: 16px;

	margin: auto;

	.contact-form-wrapper {
		position: relative;

		display: flex;
		flex-direction: row;

		overflow: hidden;

		border-radius: 16px;

		.form-image {
			height: 100%;
			object-fit: cover;
			position: absolute;
			z-index: -1;
		}

		.form-section-wrapper {
			background-color: var(--white);

			z-index: 1;

			margin-left: auto;

			width: 53%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.675rem;
			min-height: 500px;

			padding: 1.75rem 1.25rem 1.25rem;

			border-radius: 16px;

			box-shadow: 0 4px 10px var(--grey);

			.form-top-wrapper {
				width: 100%;

				display: flex;
				flex-direction: row;
				align-items: center;
				/*justify-content: end;*/

				.form-title {
					color: var(--grey);

					font-size: var(--text-lg);
					font-weight: 900;
					line-height: 1.2;

					margin: 0 auto;
				}

				.close-form-button {
					width: 1.5rem;
					height: 1.5rem;
					border: none !important;
					background: transparent;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
				}
			}

			.form-slogan {
				color: var(--grey);

				font-size: var(--text-base);
				font-weight: 500;
				line-height: 1.2;
			}

			.form-wrapper {
				display: flex;
				flex-direction: column;
				gap: 1.25rem;

				border-radius: 16px;

				.form-input-wrapper {
					display: flex;
					flex-direction: column;
					align-items: start;
					gap: 0.375rem;

					.form-label-wrapper {
						color: var(--grey);

						font-size: var(--text-base);
						font-weight: 500;
						line-height: 1.2;
					}

					.form-input {
						width: 100%;
						height: 2.5rem;

						padding: 0.675rem 1rem;

						border-radius: 16px;

						border: 1px solid var(--grey);

						&:hover {
							border-color: var(--green-light);
						}

						&:active {
							border-color: var(--green-light);
						}

						&:focus {
							border-color: var(--green-light);
						}
					}

					.form-message-input {
						width: 100%;
						height: 5rem;

						padding: 0.675rem 1rem;

						border-radius: 16px;

						border: 1px solid var(--grey);

						resize: none;

						&:hover {
							border-color: var(--green-light);
						}

						&:active {
							border-color: var(--green-light);
						}

						&:focus {
							border-color: var(--green-light);
						}

						&:focus-visible {
							outline-width: 1px;
							outline-color: var(--green-light);
							border-color: var(--green-light);
						}
					}
				}

				.form-agreement-wrapper {
					display: flex;
					flex-direction: row;
					align-items: start;
					gap: 1rem;

					.form-agreement-checkbox {
						min-height: 24px;
						min-width: 24px;

						cursor: pointer;
					}

					.form-agreement-wrapper {
						color: var(--grey);

						font-size: var(--text-base);
						font-weight: 500;
						line-height: 1.2;
					}
				}

				.submit-form-button {
					cursor: pointer;
					color: var(--white);
					background-color: var(--orange);

					border: 1px solid var(--orange);
					border-radius: 16px;
					padding: 1rem 0;

					transition: background-color 0.5s cubic-bezier(.25, .8, .25, 1);

					&:disabled {
						background-color: var(--grey);
						border-color: var(--grey);
					}

					&:not(:disabled):hover {
						background-color: var(--white);
						color: var(--orange);
					}
				}
			}
		}
	}


	&::backdrop {
		width: 100vw;
		height: 100vh;

		background-color: rgba(82, 82, 82, 0.7);

		overflow: hidden;
	}


}

.modal-open {
	height: 100vh;
	overflow: hidden;
}