._urw_text {
	font-weight: 300;
	font-size: 16px;

	@media (max-width: 768px) {
		font-size: 15px;
	}
}

.contact-form {
	display: grid;
	grid-template-columns: 580px 1fr;
	column-gap: 70px;

	@media (max-width: 1024px) {
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
	}

	@media (max-width: 768px) {
		grid-template-columns: 1fr;
		row-gap: 50px;
	}

	h1 {
		font-size: 50px;
		font-weight: 200;
		text-transform: uppercase;

		@media (max-width: 768px) {
			font-size: 30px;
		}
	}

	h2 {
		text-transform: uppercase;
		font-size: 34px;
		font-weight: 300;

		@media (max-width: 768px) {
			font-size: 24px;
		}
	}

	._right {
		h2 {
			margin-bottom: 30px;
		}

		._text {
			@extend ._urw_text;
		}

		form {
			margin-top: 48px;
			display: grid;
			grid-template-columns: 1fr;
			gap: 10px;

			input[type='submit'],
			button[type='submit'] {
				background: rgba(251, 242, 122, 1);
				height: 60px;
				padding: 21px 36px;
				color: #000;
				gap: 7px;
				font-weight: 700;
				text-transform: uppercase;
				border: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			._file {
				background: #fff;
				min-height: 95px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid rgba(223, 223, 223, 1);
				font-weight: 300;
				font-size: 16px;
				gap: 20px;
				flex-wrap: wrap;

				@media (max-width: 768px) {
					gap: 10px;
					font-size: 14px;
				}

				.fileuploader-input {
					display: flex;
					flex-direction: row;
					align-items: center;

					.fileuploader-input-caption {
						align-self: auto;

						font-weight: 300;
						font-size: 16px;
						font-family: 'URW Form', sans-serif;
					}
				}

				.fileuploader-input {
					button {
						display: flex;
						height: 60px;
						padding: 20px 36px;
						font-weight: 700;
						color: #fff;
						background-color: rgba(29, 29, 30, 1);
						border: 0;
						text-transform: uppercase;
						gap: 10px;

						span {
							display: flex;
							gap: 10px;
						}

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

			._2_columns {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 10px;
			}

			._1_column {
				display: flex;

				&._right {
					justify-content: flex-end;
				}
			}

			._1_column,
			._2_columns {
				._checkbox {
					font-size: 12px;
					display: flex;
					gap: 10px;
					align-items: flex-start;
				}

				._radio {
					display: flex;
					gap: 5px;
					font-size: 14px;

					input[type='radio'] {
						border: 1px solid rgba(223, 223, 223, 1);
					}
					label {
						margin: 0;
					}
				}

				input[type='text'],
				input[type='email'],
				textarea,
				select {
					display: flex;
					height: 38px;
					width: 100%;
					padding: 0 15px;
					justify-content: center;
					align-items: center;
					border: 1px solid rgba(223, 223, 223, 1);
					font-size: 14px;
					font-weight: 300;
					color: rgba(0, 0, 0, 1);

					&::placeholder {
						font-size: 14px;
						font-weight: 300;
						color: rgba(0, 0, 0, 0.5);
					}
				}

				textarea {
					height: 177px;
					padding: 15px;
				}
			}
		}
	}

	._left {
		padding: 48px;

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

		h1 {
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			padding-bottom: 48px;
			max-width: 350px;

			@media (max-width: 768px) {
				padding-bottom: 20px;
			}
		}

		._contact_data {
			padding-top: 48px;
			display: flex;
			row-gap: 48px;
			flex-direction: column;

			@media (max-width: 768px) {
				padding-top: 24px;
				padding-bottom: 24px;
			}

			._title {
				font-size: 24px;
				font-weight: 500;
				text-transform: uppercase;

				&._bordered {
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);
					max-width: 350px;
					padding-bottom: 30px;
				}
			}

			._icon_data {
				display: flex;
				gap: 21px;

				._text {
					font-size: 16px;
					font-weight: 300;

					a {
						text-transform: uppercase;
						text-decoration: underline;
						font-weight: 700;
					}

					&._phones,
					&._mails {
						display: flex;
						flex-direction: column;
						gap: 24px;

						a {
							font-weight: 300;
							text-transform: none;
						}
					}
				}
			}
		}
	}
}

.contact-form-bottom {
	padding-top: 50px;
	padding-bottom: 50px;

	._text {
		@extend ._urw_text;
	}
}

.contact_accordion {
	display: flex;
	gap: 10px;
	flex-direction: column;

	._left {
		border-right: 1px solid rgba(0, 0, 0, 0.1);

		a {
			display: flex;
			gap: 10px;
			text-transform: uppercase;
			padding: 5px;

			&:hover {
				img {
					display: block;
				}
			}

			img {
				width: 10px;
				transform: rotate(-90deg);
				display: none;
			}
		}
	}

	._title {
		padding: 20px 25px;
		font-weight: 500;
		font-size: 24px;
		text-transform: uppercase;
		background: rgba(223, 223, 223, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;

		@media (max-width: 768px) {
			font-size: 18px;
		}

		&._active {
			background: rgba(251, 242, 122, 1);
		}
	}

	._content {
		padding-top: 40px;
		padding-bottom: 40px;

		&._2_columns {
			display: grid;
			grid-template-columns: 300px 1fr;
			gap: 50px;

			._city_content {
				display: grid;
				grid-template-columns: 1fr;
				display: none;
			}
		}

		._city {
			text-transform: uppercase;
			font-weight: 500;
			font-size: 24px;
			padding-bottom: 25px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			max-width: 350px;
			margin-bottom: 5px;
		}

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

			&_2 {
				grid-template-columns: 1fr;
				row-gap: 70px;
				column-gap: 80px;
				width: calc(100% - 300px);
				margin-left: auto;
				margin-right: auto;

				._persons {
					._person {
						text-align: center;
					}
				}
			}
			._city_content_nav {
				margin-bottom: 30px;

				ul {
					padding: 0;
					margin: 0;
					list-style: none;
					display: flex;
					flex-direction: row;
					column-gap: 70px;

					li {
						a {
							display: block;
							padding: 18px 36px;
							border-radius: 5px;
							border: 1px solid #000000;

							color: #000000;
							font-size: 14px;
							font-weight: 700;
							font-family: 'URW Form', sans-serif;
							text-transform: uppercase;

							&.active {
								color: #fff;
								background: #1d1d1e;
							}
						}
					}
				}
			}

			._cities {
				display: none;

				&.active {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
					gap: 20px;
				}

				._city {
					._name {
						font-size: 14px;
						font-weight: 400;
						font-family: 'Open Sans', sans-serif;
						color: #232323;
						text-align: center;
						font-weight: 700;
						margin-bottom: 10px;
					}
					._description {
						display: flex;
						flex-direction: column;
						height: 100%;

						hr {
							width: 80%;
						}

						p {
							text-align: center;
							margin: 0;
							text-transform: initial;
							flex: 1;
						}
					}
				}
			}

			._persons {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				gap: 32px;

				._person__wrapp {
					._person_title {
						color: #1d1d1e;
						font-family: 'URW Form', sans-serif;
						font-size: 20px;
						font-weight: 700;
						text-align: center;
						margin-bottom: 20px;
					}
				}
				._person {
					padding: 28px 20px;
					border: 0.5px solid #d7d7d7;
					box-shadow: 2px -2px 10px 0.5px rgba(0, 0, 0, 0.1);
					border-radius: 15px;

					p {
						margin-bottom: 0;

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

					._name {
						font-weight: 600;
						font-size: 16px;
						margin-bottom: 30px;
					}

					._phone,
					._mail {
						display: flex;
						gap: 20px;
						margin-bottom: 20px;
						align-items: flex-start;

						a {
							text-decoration: underline;
							font-size: 16px;
							font-weight: 300;
						}
					}
				}
			}

			._button {
				a {
					background: rgba(29, 29, 30, 1);
					color: #fff;
					font-weight: 700;
					text-transform: uppercase;
					padding: 21px 36px;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 7px;
					width: fit-content;
				}
			}
		}
	}
}

.contact-btn {
	padding: 16px 30px 14px;
	border-radius: 5px;
	border: 2px solid #000;
	margin: 25px auto 0;

	color: #000;
	font-family: 'URW Form', sans-serif;
	font-weight: 500;
	font-size: 12px;

	transition: all 250ms ease-in-out;

	&:hover {
		background: #000;
		color: #fff;
	}
}