:root {
		--color-main-bg: #FFF;
		--color-main-text: #000;
		--color-primary: #2A64D8;
		--color-secondary: #E2007A;
		--color-tertiary: #AA036C;
		--color-link-contrast: rgb(219, 219, 54);
}

html {
		overflow-x: hidden;
}

* {
		box-sizing: border-box;
}


html {
		font-size: 10px;
		font-family: 'Titillium Web', Arial, sans-serif;
		line-height: 1.4;
		-webkit-text-size-adjust: 100%;

}

body {
		margin: 0;
}
* {
		box-sizing: border-box;
		font-family: 'Titillium Web', Arial, sans-serif;
		outline: none;
		-webkit-tap-highlight-color: transparent;
}


#main-content a:not([class]), #main-content a[class=''], #main-content .maptab__showonmap, #main-content a:link:not([class]), #main-content a:link[class=''], #main-content .maptab__showonmap:link {
		color: var(--color-secondary);
		text-decoration: none;
		transition: .3s ease-in;

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

.menu.container {
		max-width: unset;
}

.container {
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 15px;
}

.section-container {
		padding: 40px 15px;

		@media (width > 960px) {
				padding: 80px 15px;
		}

		&.remove-top-space {
				padding-top: 0;
		}

		&.bg-gray {
				overflow-x: hidden;
				background-color: #EEF0F0;

				.section-headline-box {
						margin-bottom: 50px;

						@media (width > 960px) {
								margin-bottom: 60px;
						}
				}
		}

		&.bg-light-blue {
				background-color: rgb(42 100 216 / 10%);
		}
}

.button-primary {
		padding: 16px 50px;
		background-color: var(--color-secondary);
		color: var(--color-main-bg);
		font-size: 2rem;
		font-weight: 600;
		text-decoration: none;
		border-radius: 4px;
		transition: .3s ease-in;

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

		@media (width > 960px) {
				padding: 16px 90px;
				font-size: 2.4rem;
		}
}

.section-headline-box {
		margin-bottom: 30px;
		text-align: center;

		@media (width > 960px) {
				margin-bottom: 40px;
		}

		p {
				margin: 10px 0 0;
				font-size: 1.8rem;

				@media (width > 960px) {
						font-size: 2rem;
				}

				@media (width > 1200px) {
						font-size: 2.4rem;
				}
		}
}

.section-headline {
		margin: 0;
		font-size: 2rem;
		font-weight: 600;

		@media (width > 960px) {
				font-size: 2.4rem;
		}

		@media (width > 1200px) {
				font-size: 3.6rem;
		}
}

.page-banner {
		overflow: hidden;
		position: relative;
		width: 100dvw;
		height: 400px;

		img {
				position: absolute;
				object-fit: contain;
				object-position: 50%;
		}
}

.page-banner-img-box {
		display: none;
		height: 100%;
		background-position: 80%;
		background-size: cover;

		@media (width > 960px) {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				display: block;
				height: 400px;
				background-position: 70% top;
		}
}

.page-banner-img-box--mobile {
		display: block;
		height: 100%;
		background-size: cover;

		@media (width > 960px) {
				display: none;
		}
}

.page-banner-content {
		position: absolute;
		bottom: 30px;
		padding-top: 20px;
		padding-bottom: 30px;
		color: #FFF;
		text-align: center;

		@media (width > 960px) {
				position: absolute;
				top: 50%;
				bottom: unset;
				left: 50%;
				translate: -50% -50%;
				background-color: transparent;
				color: var(--color-main-bg);
				text-align: left;
		}

		h1 {
				margin: 0 0 20px;
				font-size: 2.4rem;
				font-weight: 600;
				line-height: 1;

				@media (width > 960px) {
						font-size: 3.6rem;
				}

				@media (width > 1200px) {
						font-size: 4.8rem;
				}
		}

		h2 {
				max-width: 270px;
				margin: 0 auto;
				font-size: 2rem;
				font-weight: 400;
				line-height: 1.1;
				@media (width > 960px) {
						max-width: 30vw;
						margin: 0;
						font-size: 2.8rem;
				}

				@media (width > 1200px) {
						max-width: 35vw;
						font-size: 3.2rem;
				}
		}
}

.blue-card {
		overflow: hidden;
		position: relative;
		padding: 20px;
		border: 1px solid var(--color-primary);
		border-radius: 20px;

		&.with-shadow {
				box-shadow: 0 10px 24px 0 rgba(33, 33, 33, 0.129);
		}

		&.add-pb {
				padding-bottom: 60px;
		}

		&.desktop-row {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				gap: 30px;
				padding: 40px;

				@media (width < 375px) {
						flex-direction: column;
						align-items: flex-start;
				}

				@media (width > 1200px) {
						padding: 60px;
				}

				h3 {
						margin-bottom: 10px;
				}

				a {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						gap: 10px;
						font-size: 1.8rem;
						font-weight: 600;

						@media (width > 960px) {
								font-size: 2rem;
						}

						path {
								transition: .3s ease-in;
						}

						&:hover path {
								stroke: var(--color-tertiary);
						}
				}
		}

		@media (width > 1200px) {
				padding: 30px 40px;
		}

		.card-img {
				display: block;
				height: 196px;
				margin: 0 auto 20px;
				object-fit: contain;
		}

		.icon-box {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80px;
				height: 80px;
				background: linear-gradient(#2A64D8, #163572);
				box-shadow: 0 16px 16px 0 rgb(42 100 216 / 20%);
				border: 3px solid var(--color-main-bg);
				border-radius: 50%;

				@media (width > 1200px) {
						width: 100px;
						height: 100px;
				}
		}

		.card-bg {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
		}

		h3 {
				margin: 0 0 14px;
				font-size: 1.8rem;
				font-weight: 600;

				@media (width > 960px) {
						font-size: 2rem;
				}
		}

		p {
				margin: 0;
				font-size: 1.6rem;

				@media (width > 960px) {
						font-size: 1.8rem;
				}
		}
}

.cards-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 30px;

		@media (width > 768px) {
				grid-template-columns: repeat(3, 1fr);
		}

		&:has(.desktop-row) {
				@media (width > 768px) {
						grid-template-columns: 1fr;
				}

				@media (width > 960px) {
						grid-template-columns: repeat(3, 1fr);
				}
		}
}

.grid-on-gray {
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		gap: 40px;
		@media (width > 768px) {
				grid-template-columns: repeat(2, 1fr);
		}

		@media (width > 1024px) {
				grid-template-columns: repeat(4, 1fr);
		}

}

.center-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 70px;
}

.gradient-card {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 70px 0;
		background: linear-gradient(#2A64D8, #163572);
		border-radius: 60px;

		.leaves {
				position: absolute;
				top: -30%;
				translate: 10px 0;
				rotate: 35deg;
				width: 100%;
		}

		.tauron-new-energy {
				display: block;
				height: 150px;

				@media (width > 768px) {
						height: 192px;
				}
		}
}

.gray-card {
		display: flex;
		flex-direction: column;
		height: max-content;
		padding: 40px 18px 60px;
		text-align: center;
		border: 3px solid var(--color-main-bg);
		border-radius: 60px;

		@media (width > 1200px) {
				min-height: 296px;
				padding-bottom: 40px;
		}

		h3 {
				margin: 0 0 14px;
				font-size: 1.8rem;
				font-weight: 600;
				line-height: 1.2;

				@media (width > 960px) {
						font-size: 2rem;
				}

				@media (width > 1200px) {
						font-size: 2.8rem;
				}
		}

		p {
				margin: 0;
				font-size: 1.6rem;

				@media (width > 960px) {
						font-size: 1.8rem;
				}

				@media (width > 1200px) {
						font-size: 2rem;
				}

				strong {
						font-weight: 700;
				}
		}
}

.bulb-card {
		background: var(--color-main-bg);
		box-shadow: 0 0 16px 0 #FFF;
		border-radius: 60px;

		img {
				translate: -10% 25%;
				max-width: 215px;
				object-fit: cover;
		}
}

.how-to-back {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;

		@media (width > 1200px) {
				flex-direction: row;
		}
}

.how-to-back-img {
		max-width: 550px;
		max-height: 550px;

		img {
				width: 100%;
		}
}

.step-card {
		display: flex;
		align-items: center;
		padding: 20px 30px;
		background-color: var(--color-main-bg);
		box-shadow: 0 10px 24px 0 rgb(33 33 33 / 10%);
		border-radius: 20px;

		@media (width > 960px) {
				height: 135px;
				padding: 24px 58px;
		}

		.step-card-inner {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 12px;
				width: 100%;

				@media (width > 468px) {
						flex-direction: row;
						gap: 24px;
				}
		}

		.step-icon {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 65px;
				height: 65px;
		}

		.step-number {
				position: absolute;
				translate: -20px -20px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 32px;
				height: 32px;
				background-color: var(--color-primary);
				color: var(--color-main-bg);
				font-size: 2rem;
				font-weight: 700;
				border-radius: 50%;
		}

		p {
				margin: 0;
				font-size: 1.6rem;

				@media (width > 960px) {
						font-size: 1.8rem;
				}

				@media (width > 1200px) {
						font-size: 2rem;
				}
		}

		.step-card-link {
				color: var(--color-main-text);
				text-decoration: underline;
				transition: .3s ease;

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

		.step-card-link,
		strong {
				font-weight: 700;
		}
}

.zoom2 .step-card,
.zoom4 .step-card {
		@media (width > 960px) {
				height: auto;
		}

}

.steps-box {
		display: flex;
		flex-direction: column;
		gap: 24px;
		width: 100%;

		@media (width > 768px) {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
		}

		@media (width > 1200px) {
				min-height: 294px;
		}

		&.steps-1-2 {
				.step-card:first-child {
						img {
								width: 42px;
						}
				}
		}

		@media (width > 1200px) {
				position: absolute;
				display: flex;
				flex-direction: column;
				max-width: 490px;

				&.steps-1-2 {
						top: 50%;
						left: 0;
						translate: 0 -50%;
				}

				&.steps-3-4 {
						top: 50%;
						right: 0;
						translate: 0 -50%;
				}
		}
}

.card-image-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 30px;

		@media (width > 960px) {
				grid-template-columns: repeat(2, 1fr);
		}
}

.card-with-filled-img {
		overflow: hidden;
		box-shadow: 0 10px 24px 0 rgba(33 33 33 / 10%);
		border-radius: 20px;

		@media (width > 768px) {
				display: flex;
				flex-wrap: nowrap;
		}

		@media (width > 960px) {
				flex-direction: column;
		}

		@media (width > 1200px) {
				flex-direction: row;
		}

		.img-box {
				@media (width > 768px) {
						min-width: 300px;
						max-width: 300px;
				}

				@media (width > 960px) {
						min-width: unset;
						max-width: unset;
				}

				@media (width > 1200px) {
						min-width: 300px;
						max-width: 300px;
				}

				img {
						width: 100%;
						height: 100%;
						object-fit: cover;
				}
		}

		.card-with-filled-img-content {
				padding: 40px 36px;

				@media (width > 1200px) {
						padding: 70px 36px;
				}

				h3 {
						margin: 0 0 14px;
						font-size: 1.8rem;
						font-weight: 600;

						@media (width > 960px) {
								font-size: 2rem;
						}

						@media (width > 1200px) {
								font-size: 2.3rem;
						}
				}

				p {
						margin: 0;
						font-size: 1.6rem;

						@media (width > 960px) {
								font-size: 1.8rem;
						}
				}

				.card-img-link-wrapper {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						margin-top: 30px;
				}

				a {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						gap: 10px;
						font-size: 1.8rem;
						font-weight: 600;

						@media (width > 960px) {
								font-size: 2rem;
						}

						path {
								transition: .3s ease-in;
						}

						&:hover path {
								stroke: var(--color-tertiary);
						}
				}
		}
}

.blue-card-as-grid {
		display: flex;
		flex-direction: column;
		gap: 50px;
		margin-top: 50px;
		padding: 60px 30px;
		border: 1px solid var(--color-primary);
		border-radius: 20px;

		@media (width > 768px) {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
		}

		@media (width > 960px) {
				grid-template-columns: repeat(3, 1fr);
		}

		@media (width > 1200px) {
				gap: 140px;
				padding: 60px 55px;
		}

		.blue-card-col {
				&.with-icon {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						gap: 28px;
				}
		}

		h3 {
				margin: 0 0 14px;
				font-size: 1.8rem;
				font-weight: 600;

				@media (width > 960px) {
						font-size: 2rem;

						&.smaller {
								font-size: 1.8rem;
						}
				}

				@media (width > 1200px) {
						font-size: 2.3rem;

						&.smaller {
								font-size: 1.8rem;
						}
				}
		}

		a {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				gap: 10px;
				font-size: 1.8rem;
				font-weight: 600;

				@media (width > 960px) {
						font-size: 2rem;
				}

				path {
						transition: .3s ease-in;
				}

				&:hover path {
						stroke: var(--color-tertiary);
				}
		}

		p {
				margin: 0;
				font-size: 1.6rem;

				@media (width > 960px) {
						font-size: 1.8rem;
				}
		}
}

.contrast {
		#main-content a {
				color: var(--color-link-contrast) !important;

				path {
						stroke: var(--color-link-contrast) !important;
				}
		}

		.step-number {
				background-color: var(--color-link-contrast) !important;
				color: var(--color-main-text) !important;
		}

		.step-card,
		.card-with-filled-img {
				border: 2px solid var(--color-link-contrast);
		}

		.blue-card,
		.gray-card,
		.blue-card-as-grid {
				border-color: var(--color-link-contrast);
		}

		.leaves,
		.bulb-card img {
				background-color: transparent !important;
		}

		#main-content .button-primary {
				background-color: var(--color-link-contrast) !important;
				color: var(--color-main-text) !important;
		}
}

.z_popup_bg {position: fixed; top: 0; left: 0; z-index: 1000; display: block; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .8);}
.hidden {display: none !important;}
#expansion-box .section-regio-box .regionalization {padding: 0 20px; background: #FFF !important;}
#expansion-box .section-regio-box .regionalization__desktop {position: static !important; display: inline-block !important;}

#expansion-box .f-12 {font-size: 1.2rem;}
#expansion-box .f-14 {font-size: 1.4rem;}
#expansion-box .f-16 {font-size: 1.6rem;}
#expansion-box .f-18 {font-size: 1.8rem;}
#expansion-box .f-20 {font-size: 2.0rem;}
#expansion-box .f-22 {font-size: 2.2rem;}
#expansion-box .f-24 {font-size: 2.4rem;}
#expansion-box .f-26 {font-size: 2.6rem;}
#expansion-box .f-28 {font-size: 2.8rem;}
#expansion-box .f-30 {font-size: 3.0rem;}
#expansion-box .f-32 {font-size: 3.2rem;}
#expansion-box .f-34 {font-size: 3.4rem;}
#expansion-box .f-36 {font-size: 3.6rem;}
#expansion-box .f-38 {font-size: 3.8rem;}
#expansion-box .f-40 {font-size: 4.0rem;}
#expansion-box .f-42 {font-size: 4.2rem;}
#expansion-box .f-48 {font-size: 4.8rem;}
#expansion-box .f-56 {font-size: 5.6rem;}
#expansion-box .f-60 {font-size: 6.0rem;}
#expansion-box .f-68 {font-size: 6.8rem;}
#expansion-box .f-70 {font-size: 7.0rem;}

#expansion-box .semibold {font-weight: 600;}
#expansion-box .center {text-align: center;}
#expansion-box .uppercase {text-transform: uppercase;}

#expansion-box .section-regio-box .z_autocomplete {display: flex; justify-content: flex-end; padding-top: 24px;}
#expansion-box .section-regio-box .banner-expansion-info {display: none; grid-template-columns: max-content 1fr; align-items: center; gap: 48px; width: 100%; margin-top: 24px; padding: 32px; background-color: #FFF; box-shadow: 0 0 12px rgba(17, 17, 17, 0.24); border: 1px solid #306EE8; border-radius: 20px;}
#expansion-box .section-regio-box .banner-expansion-info.show {display: grid;}
#expansion-box .section-regio-box .banner-expansion-info .icon-info {display: block; min-width: 100px; max-width: 100px; height: auto;}
#expansion-box .section-regio-box .banner-expansion-info .content-box {display: flex; flex-direction: column;}
#expansion-box .section-regio-box .banner-expansion-info .content-box .content-heading {margin: 12px 0; line-height: 1.2;}
#expansion-box .section-regio-box .banner-expansion-info .content-box .content-label {margin: 0; line-height: 1.2;}
#expansion-box .section-regio-box .banner-expansion-info .content-box .content-desc {margin: 12px 0 0 0; line-height: 1.2;}
#expansion-box .section-regio-box .banner-expansion-info .content-box .btn-go-back {display: flex; align-items: center; gap: 8px; max-width: max-content; margin-top: 12px; color: #E2007A; text-decoration: none; transition: color .3s;}
#expansion-box .section-regio-box .banner-expansion-info .content-box .btn-go-back:hover {text-decoration: underline;}
#expansion-box .section-regio-box .banner-expansion-info .content-box .btn-go-back .btn-icon {display: block; max-width: 20px; height: auto; transition: transform .3s;}
#expansion-box .section-regio-box .banner-expansion-info .content-box .btn-go-back:hover .btn-icon {transform: translateX(2px);}
#expansion-box .banner-expansion-info .content-box .btns-wrapper {display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 8px; margin-top: 16px;}
#expansion-box .banner-expansion-info .content-box .btns-wrapper .btn-offer-link {display: flex; align-items: center; gap: 8px; max-width: max-content; padding: 8px 16px; background-color: #F6F6F6; color: #000; text-decoration: none; border-radius: 8px; transition: background-color .3s, color .3s;}
#expansion-box .banner-expansion-info .content-box .btns-wrapper .btn-offer-link:hover {background-color: #E2007A; color: #FFF;}
#expansion-box .banner-expansion-info .content-box .btns-wrapper .btn-offer-link .btn-icon {display: block; max-width: 20px; height: auto;}
#expansion-box .banner-expansion-info .content-box .btns-wrapper .btn-offer-link .btn-icon path {transition: fill .3s;}
#expansion-box .banner-expansion-info .content-box .btns-wrapper .btn-offer-link:hover .btn-icon path {fill: #FFF;}
#expansion-box .banner-expansion-info .content-box .btns-wrapper .btn-offer-link .btn-text {line-height: 1.2;}

@media all and (max-width: 1600px) {
		#expansion-box .f-18 {font-size: 1.6rem;}
		#expansion-box .f-20 {font-size: 1.6rem;}
		#expansion-box .f-22 {font-size: 1.8rem;}
		#expansion-box .f-24 {font-size: 1.8rem;}
		#expansion-box .f-26 {font-size: 2.2rem;}
		#expansion-box .f-28 {font-size: 2.2rem;}
		#expansion-box .f-30 {font-size: 2.4rem;}
		#expansion-box .f-32 {font-size: 2.4rem;}
		#expansion-box .f-34 {font-size: 2.6rem;}
		#expansion-box .f-36 {font-size: 2.6rem;}
		#expansion-box .f-38 {font-size: 3.0rem;}
		#expansion-box .f-40 {font-size: 3.0rem;}
		#expansion-box .f-42 {font-size: 3.2rem;}
		#expansion-box .f-48 {font-size: 4.0rem;}
		#expansion-box .f-56 {font-size: 4.4rem;}
		#expansion-box .f-60 {font-size: 4.8rem;}
		#expansion-box .f-70 {font-size: 5.2rem;}

		#expansion-box .section-regio-box .banner-expansion-info {gap: 32px; padding: 24px;}
		#expansion-box .section-regio-box .banner-expansion-info .icon-info {min-width: 64px; max-width: 64px;}
		#expansion-box .section-regio-box .banner-expansion-info .content-box .btn-go-back .btn-icon {max-width: 19px;}
}

@media all and (max-width: 1400px) {
		#expansion-box .f-22 {font-size: 1.6rem;}
		#expansion-box .f-24 {font-size: 1.6rem;}
		#expansion-box .f-26 {font-size: 2.0rem;}
		#expansion-box .f-28 {font-size: 2.0rem;}
		#expansion-box .f-30 {font-size: 2.2rem;}
		#expansion-box .f-32 {font-size: 2.2rem;}
		#expansion-box .f-34 {font-size: 2.4rem;}
		#expansion-box .f-36 {font-size: 2.4rem;}
		#expansion-box .f-38 {font-size: 2.8rem;}
		#expansion-box .f-40 {font-size: 2.8rem;}
		#expansion-box .f-42 {font-size: 3.0rem;}
		#expansion-box .f-48 {font-size: 3.4rem;}
		#expansion-box .f-56 {font-size: 3.8rem;}
		#expansion-box .f-60 {font-size: 4.0rem;}
		#expansion-box .f-70 {font-size: 4.6rem;}
}

@media all and (max-width: 768px) {
		#expansion-box .f-26 {font-size: 1.8rem;}
		#expansion-box .f-28 {font-size: 1.8rem;}
		#expansion-box .f-30 {font-size: 2.0rem;}
		#expansion-box .f-32 {font-size: 2.0rem;}
		#expansion-box .f-34 {font-size: 2.2rem;}
		#expansion-box .f-36 {font-size: 2.2rem;}
		#expansion-box .f-38 {font-size: 2.4rem;}
		#expansion-box .f-40 {font-size: 2.4rem;}
		#expansion-box .f-42 {font-size: 2.8rem;}
		#expansion-box .f-48 {font-size: 2.8rem;}
		#expansion-box .f-56 {font-size: 3.0rem;}
		#expansion-box .f-60 {font-size: 3.4rem;}
		#expansion-box .f-70 {font-size: 3.8rem;}

		#expansion-box .section-regio-box .banner-expansion-info {grid-template-columns: 1fr; gap: 16px;}
}

@media all and (max-width: 576px) {
		#expansion-box .section-regio-box .banner-expansion-info .icon-info {display: none;}
		#expansion-box .section-regio-box .banner-expansion-info .content-box .content-label {margin-bottom: 8px;}
		#expansion-box .section-regio-box .banner-expansion-info .content-box .content-desc {margin-bottom: 12px;}
		#expansion-box .section-regio-box .banner-expansion-info .content-box .btn-go-back {margin-top: 0;}
		#expansion-box .banner-expansion-info .content-box .btns-wrapper .btn-offer-link {padding: 8px;}
		#expansion-box .banner-expansion-info .content-box .btns-wrapper .btn-offer-link .btn-text {font-size: 1.4rem;}
}