@import 'variables';
@import '_mixins';

html {
	scroll-behavior: smooth;
	scroll-padding-top: 105px;
}

strong {
	font-weight: 700;
}

.main-page {
	padding-top: 0px;
}

.breadcrumbs {
	margin: 24px 0;
}

.box-0 {
	._columns {
		width: 100%;
		max-width: 1270px;
		margin: auto;
		display: flex;

		@include respond-below(md) {
			flex-direction: column;
		}

		._left {
			width: 40%;
			min-width: 600px;
			background: url('/upload/filemanager/images/kontakt/contact-left-bg-2.jpg')
				no-repeat;
			background-position: bottom right;
			background-size: cover;
			text-align: right;
			color: #fff;
			display: flex;
			flex-direction: column;

			@include respond-below(lg) {
				// padding: 60px 30px;
				min-width: 410px;
			}

			@include respond-below(md) {
				width: 100%;
				min-width: unset;
				text-align: center;
				// background: transparent;
				color: #1d1d1e;
			}

			._left-wrapper {
				padding: 60px 35px;
				width: 100%;
				background: rgba(#000, 0.9);
				height: 100%;
				align-content: center;

				@include respond-above(md) {
					max-width: 490px;
				}
			}

			._socials {
				margin-top: auto;
				margin-bottom: 0;
				display: flex;
				gap: 10px;
				justify-content: flex-end;

				img {
					height: 30px;
					width: 30px;
				}

				@include respond-below(md) {
					justify-content: center;

					img {
						filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
							saturate(15%) hue-rotate(337deg) brightness(100%) contrast(107%);
					}
				}
			}

			h1,
			._h1 {
				color: $cWhite;
				margin-bottom: 50px;
				font-size: 25px;
				font-weight: 400;
				text-transform: uppercase;
			}
			h2 {
				font-size: 20px;
				font-weight: 600;
				color: $cWhite;
				margin-bottom: 0;
			}
			p {
				color: $cWhite;
				font-size: 16px;
				margin-bottom: 0;

				strong {
					font-weight: 600;
				}
				a {
					color: $cWhite;
					font-size: 16px;
					font-family: $font3;
				}
			}

			._text {
				margin-bottom: 20px;

				&._text-2 {
					margin-bottom: 50px;
				}
			}

			._accounts {
				// margin-top: 280px;
				display: grid;
				grid-template-columns: 1fr auto;
				grid-template-areas: 'icon text' 'numbers numbers';
				align-items: center;
				gap: 20px 20px;
				margin-bottom: 75px;

				@include respond-below(md) {
					margin-top: 50px;
					margin-bottom: 50px;
					grid-template-columns: 1fr;
					grid-template-areas: 'icon' 'text' 'numbers';
				}

				._icon {
					grid-area: icon;
					// margin-bottom: 20px;
					width: 100%;
					max-width: 44px;
					margin-left: auto;

					@include respond-below(md) {
						margin-right: auto;
						// filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
						// 	saturate(15%) hue-rotate(337deg) brightness(100%) contrast(107%);
					}
				}

				._text {
					color: $cWhite;
					grid-area: text;
					font-size: 16px;
					font-weight: 600;
					margin: 0;

					@include respond-below(md) {
						text-align: center;
					}
				}

				._accounts_numbers {
					color: $cWhite;
					grid-area: numbers;
					font-size: 16px;
					font-weight: 300;

					// @include respond-below(lg) {
					// 	font-size: 17px;
					// }
				}
			}

			.direct-contact {
				> a {
					width: fit-content;
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 15px;
					margin-left: auto;

					@include respond-below(md) {
						margin-right: auto;
					}
				}

				.direct-contact__text {
					p {
						color: $cWhite;
						font-size: 16px;
						text-transform: uppercase;

						strong {
							font-weight: 700;
						}
					}
				}
			}
		}

		._right {
			// width: 60%;

			// @include respond-below(md) {
			// 	width: 100%;
			// }

			._h1 {
				color: #181c1d;
				font-size: 32px;
				font-family: $font3;
				font-weight: 300;
				padding: 40px 60px 0px 60px;
			}

			._map {
				padding: 30px 60px 0 60px;

				@include respond-below(md) {
					padding: 60px 0;
				}
			}

			.contact-form-box {
				padding: 60px 30px 30px 30px;
				background: #f5f5f5;

				@include respond-below(md) {
					padding: 30px;
				}
			}

			// ._accounts_numbers {
			// 	padding: 120px 60px 60px 60px;

			// 	@include respond-below(md) {
			// 		display: none;
			// 	}
			// }

			.c-row {
				&-1 {
					margin-bottom: 40px;

					p {
						color: #1d1d1e;
						font-size: 16px;
						font-weight: 300;
						font-family: $font3;
						text-align: center;
						margin-bottom: 0;
					}
				}

				&-2 {
					width: 100%;
					max-width: 900px;
					margin-left: auto;
					margin-right: auto;

					input {
						&[type='text'],
						&[type='email'] {
							padding: 13px 14px 11px 14px;
							border-radius: 20px;
							width: 100%;
							border: none;
							background: #fff;

							color: #3f3f3f;
							font-size: 14px;
							font-family: $font3;
							line-height: 1;
							font-weight: 300;

							outline: none;
						}

						&[type='radio'],
						&[type='checkbox'] {
							position: relative;
							appearance: none;
							width: 11px;
							min-width: 11px;
							height: 11px;
							border-radius: 100%;
							border: 1px solid #dfdfdf;
							transition: all 250ms ease-in-out;
							outline: none;

							&::before {
								content: '';
								position: absolute;
								top: 50%;
								left: 50%;
								width: 0;
								height: 0;
								border-radius: 100%;
								background: #1d1d1e;
								transform: translate(-50%, -50%);
								visibility: hidden;
								transition: all 250ms ease-in-out;
							}

							&:checked {
								border-color: #1d1d1e;

								&::before {
									width: 6px;
									height: 6px;
									visibility: visible;
								}
							}
						}
					}

					textarea {
						padding: 13px 14px 11px 14px;
						border-radius: 20px;
						width: 100%;
						border: none;
						background: #fff;
						min-height: 100px;

						color: #3f3f3f;
						font-size: 14px;
						font-family: $font3;
						line-height: 1;
						font-weight: 300;

						outline: none;
						resize: none;
					}

					select {
						position: relative;
						appearance: none;
						padding: 13px 14px 11px 14px;
						border-radius: 20px;
						width: 100%;
						border: none;
						background: #fff;

						color: #3f3f3f;
						font-size: 14px;
						font-family: $font3;
						line-height: 1;
						font-weight: 300;

						outline: none;
					}

					.voivodeship__wrapper {
						position: relative;

						&::before {
							content: '\f107';
							font: normal normal normal 14px / 1 FontAwesome;
							font-size: 14px;
							text-rendering: auto;
							position: absolute;
							top: 50%;
							right: 20px;
							transform: translateY(-50%);
							z-index: 1;
						}
					}

					._radios {
						display: flex;
						flex-direction: row;
						column-gap: 35px;
						justify-content: center;
					}

					._radio,
					._checkbox {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 8px;

						label {
							color: #1d1d1e;
							font-size: 12px;
							font-family: $font3;
							font-weight: 300;
							line-height: 1;
							padding-top: 2px;
							margin-bottom: 0;
							cursor: pointer;
						}
					}

					._1_column {
						display: flex;
						flex-direction: row;
						margin-bottom: 14px;

						> * {
							width: 100%;
						}
					}

					._2_columns {
						display: flex;
						flex-direction: row;
						column-gap: 26px;
						margin-bottom: 14px;

						@include respond-below(sm) {
							flex-wrap: wrap;
							row-gap: 14px;
						}

						> * {
							width: 50%;

							@include respond-below(sm) {
								width: 100%;
							}
						}
					}

					._text {
						color: #1d1d1e;
						font-size: 16px;
						font-weight: 300;
						font-family: $font3;
						margin-bottom: 14px;
					}

					._file {
						padding: 29px;
						margin: 0 0 14px 0;
						border-radius: 20px;
						width: 100%;
						border: none;
						background: #fff;

						color: #3f3f3f;
						font-size: 14px;
						font-family: $font3;
						line-height: 1;
						font-weight: 300;
						border: none;

						.fileuploader-input {
							width: fit-content;
							margin: 0 auto;

							.fileuploader-input-caption {
								span {
									padding-top: 3px;
									display: inline-block;

									color: #1d1d1e;
									font-size: 16px;
									font-family: $font3;
									font-weight: 300;
								}
							}

							button.fileuploader-input-button {
								background: #1d1d1e;
								border-radius: 25px;
								padding: 10px 36px;

								display: flex;
								flex-direction: row;
								align-items: center;
								gap: 10px;

								color: #fff;
								font-family: $font3;
								font-size: 14px;
								font-weight: 700;
								letter-spacing: 2px;
								text-transform: uppercase;
							}

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

						@media (max-width: 576px) {
						}
					}

					.form_actions {
						align-items: center;

						@include respond-below(xs) {
							flex-direction: column;
							row-gap: 20px;
						}
					}

					.g-recaptcha {
						@include respond-above(xs) {
							max-width: fit-content;
							margin-left: auto;
						}
						@include respond-below(xs) {
							display: flex;
							justify-content: center;
						}
					}

					button[type='submit'] {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 10px;
						padding: 17px 20px 13px 38px;
						margin-bottom: 5px;
						background: #fff246;
						border-radius: 6px;
						color: #1d1d1e;
						font-size: 13px;
						font-family: 'URW Form', sans-serif;
						font-weight: 700;
						letter-spacing: 1px;
						text-transform: uppercase;
						line-height: 1;
						box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
						width: fit-content;
						border: none;
						outline: none;
						cursor: pointer;

						// &:active {
						// 	background: #f0e875;
						// }

						img {
							width: 18px;
							padding-bottom: 3px;
						}

						@include respond-above(xs) {
							margin-left: 20px;
						}
					}
				}
			}
		}
	}
}

.box-1 {
	padding-top: 95px;
	padding-bottom: 125px;
	background: #2e2d2c;

	box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.25);

	.contact-form {
		display: flex;
		flex-direction: row;
		column-gap: 60px;

		._left {
			width: 100%;
			max-width: 350px;

			h1 {
				color: #fff;
				font-size: 50px;
				font-family: $font3;
				letter-spacing: 2px;
				text-transform: uppercase;

				margin-bottom: 64px;
				padding-bottom: 31px;
				border-bottom: 1px solid #fff;
			}

			.contact-form-tiles {
				.tile {
					&:not(:last-child) {
						margin-bottom: 60px;
					}

					h2.tile-title {
						color: #fff;
						font-size: 24px;
						font-weight: 700;
						font-family: $font3;
						letter-spacing: 2px;
						text-transform: uppercase;
						margin-bottom: 50px;

						&._title_border {
							padding-bottom: 25px;
							margin-bottom: 30px;
							margin-left: 45px;
							border-bottom: 1px solid #fff;
						}
					}

					.tile-data {
						.c-row {
							display: flex;
							flex-direction: row;
							column-gap: 20px;

							&:not(:last-child) {
								margin-bottom: 20px;
							}

							._icon {
								img {
									filter: brightness(0) saturate(100%) invert(79%) sepia(84%)
										saturate(367%) hue-rotate(356deg) brightness(104%)
										contrast(104%);
								}
							}

							._text {
								color: #fff;
								font-size: 16px;
								font-weight: 300;
								font-family: $font3;
								margin-bottom: 0;

								a {
									color: #fff;
									font-size: 16px;
									font-weight: 300;
									font-family: $font3;
									line-height: 1;
									text-decoration: underline;
								}

								&._mails {
								}

								&._phones {
								}
							}
						}
					}
				}
			}
		}

		._right {
			width: 100%;

			#map {
				outline: none;
			}
		}
	}
}

.box-2 {
	padding-top: 50px;
	padding-bottom: 100px;

	.tabs-box#tabs-box {
		.tabs-box--head {
			ul#tabs-box-nav {
				list-style: none;
				padding: 0;
				margin: 0;

				display: flex;
				flex-direction: row;
				gap: 20px;
				flex-wrap: wrap;

				li {
					width: calc((100% / 4) - (20px - (20px / 4)));

					@include respond-below(md) {
						width: calc((100% / 2) - (20px - (20px / 2)));
					}

					@include respond-below(xs) {
						width: 100%;
					}

					&.active {
						a {
							color: $cWhite;
							background: #2e2d2c;
						}
					}

					a {
						display: block;
						color: #1d1d1e;
						font-family: $font3;
						font-size: 16px;
						letter-spacing: 2px;
						line-height: 1;
						text-transform: uppercase;
						text-align: center;
						padding: 13px 24px;
						border: 1px solid #181c1d;
						border-radius: 3px;
						box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
						height: 100%;
						align-content: center;

						strong {
							font-weight: 800;
						}
					}
				}
			}
		}

		.tabs-box--body {
			section {
				display: none;
				margin-top: 50px;

				.s-content {
					&.s-style-1 {
						display: grid;
						grid-template-columns: 315px 1fr;
						column-gap: 20px;

						@include respond-below(sm) {
							grid-template-columns: 1fr;
							row-gap: 20px;
						}

						.s-left-col {
							padding: 30px;
							background: #f5f5f5;
							border-radius: 5px;

							.map-point-info {
								p {
									color: #181c1d;
									font-size: 16px;
									font-family: $font3;
									line-height: 1.5;
								}

								.contact-btn {
									color: #000;
									font-size: 12px;
									font-family: $font3;
									font-weight: 500;
									line-height: 1;
									padding: 13px 30px;
									border: 1px solid #bbbbbb;
									border-radius: 5px;
									text-align: center;
									text-transform: uppercase;

									display: block;
									margin-top: 15px;
									max-width: fit-content;
								}
							}

							@include respond-below(sm) {
								order: 2;
							}
						}
						.s-right-col {
							> div {
								border-radius: 5px;

								@include respond-below(sm) {
									height: 350px !important;
								}
							}

							@include respond-below(sm) {
								order: 1;
							}
						}
					}

					&.s-style-2 {
						.tad-cards {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							column-gap: 100px;
							justify-content: center;
							row-gap: 50px;

							@include respond-below(md) {
								column-gap: 50px;
							}

							.tab-card {
								width: 100%;
								max-width: 450px;
								text-align: center;

								@include respond-below(lg) {
									max-width: 400px;
								}
								@include respond-below(md) {
									max-width: 320px;
								}

								.tab-card--head {
									margin-bottom: 30px;

									p {
										color: #1d1d1e;
										font-size: 20px;
										font-family: $font3;
										font-weight: 500;
										margin-bottom: 0;

										strong {
											font-weight: 700;
										}

										@include respond-below(md) {
											font-size: 16px;
										}
									}
								}

								.tab-card--text {
									margin-bottom: 30px;

									p {
										color: #1d1d1e;
										font-size: 16px;
										font-family: $font3;
										font-weight: 600;
										margin-bottom: 0;

										@include respond-below(md) {
											font-size: 14px;
										}
									}
								}

								.tab-card-info {
									border-radius: 15px;
									border: 1px solid #181c1d;
									padding: 27px 20px;
									box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);
									text-align: center;

									a {
										display: block;
										color: #1d1d1e;
										font-size: 16px;
										font-family: $font3;
										font-weight: 600;

										@include respond-below(md) {
											font-size: 14px;
										}
									}
								}
							}
						}
					}

					&.s-style-3 {
						.tad-cards {
							display: flex;
							flex-direction: row;
							column-gap: 38px;
							row-gap: 70px;
							flex-wrap: wrap;

							.tab-card {
								text-align: center;
								width: calc((100% / 3) - (38px - (38px / 3)));
								display: flex;
								flex-direction: column;

								@include respond-below(md) {
									width: calc((100% / 2) - (38px - (38px / 2)));
								}
								@include respond-below(xs) {
									width: 100%;
								}

								.tab-card--head {
									text-align: center;
									flex-grow: 1;
									align-content: flex-end;

									p {
										color: #1d1d1e;
										font-size: 20px;
										font-family: $font3;
										font-weight: 700;

										@include respond-below(md) {
											font-size: 16px;
										}
									}

									span {
										color: #fff246;
									}
								}
								.tab-card-info {
									border-radius: 15px;
									border: 1px solid #181c1d;
									padding: 27px 20px;
									box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);
									text-align: center;

									a {
										display: block;
										color: #1d1d1e;
										font-size: 16px;
										font-family: $font3;
										font-weight: 600;

										@include respond-below(md) {
											font-size: 14px;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-3 {
	background: #f5f5f5;
	padding-top: 40px;
	padding-bottom: 40px;

	.tiles {
		display: flex;
		flex-direction: row;
		gap: 38px;
		flex-wrap: wrap;

		.tile {
			text-align: center;
			width: calc((100% / 4) - (38px - (38px / 4)));

			@include respond-below(md) {
				width: calc((100% / 2) - (38px - (38px / 2)));
			}
			@include respond-below(xs) {
				width: 100%;
			}

			h3 {
				color: #1d1d1e;
				font-size: 20px;
				font-weight: 700;
				margin-bottom: 22px;

				@include respond-below(md) {
					font-size: 18px;
				}
			}

			.tile-text {
				border-radius: 15px;
				border: 1px solid #181c1d;
				padding: 27px 20px;
				box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);

				a {
					color: #1d1d1e;
					font-size: 16px;
					font-family: $font3;
					font-weight: 600;

					@include respond-below(md) {
						font-size: 14px;
					}
				}
			}
		}
	}
}