@import './mixins.scss';

.contact {
	&_bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('../res/contact_bg.png') center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	&_content {
		position: relative;
		margin-top: 60px;
		padding-top: 100px;
		padding-left: 60px;
		padding-right: 60px;
		margin: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;

		@include tabletMobile {
			padding-right: 20px;
			padding-left: 20px;
			flex-wrap: wrap;
		}
	}

	&_form {
		background: #ffffffd0;
		padding: 20px;
		border-radius: 16px;
		width: 450px;

		@include tabletMobile {
			width: 100%;
			margin-bottom: 40px;
		}

		&_title {
			font-size: 24px;
			line-height: 36px;
			text-align: center;
			margin-bottom: 40px;
			color: #0072bc;
		}

		&_field {
			width: 100%;
			border-radius: 8px;
			border: 1px solid #707070;
			padding: 10px 15px;
			font-size: 24px;
			line-height: 32px;
			color: #707070;
			margin-bottom: 20px;
		}
	}

	&_info {
		background: #ffffffd0;
		padding: 20px;
		border-radius: 16px;
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 40px;

		@include tabletMobile {
			width: 100%;
			margin-left: 0;
			margin-bottom: 40px;
		}

		@include mobile {
			flex-wrap: wrap;
		}

		&_box {
			@include mobile {
				width: 100%;
				margin-bottom: 20px;
			}
		}

		&_map {
			width: 50%;

			@include mobile {
				width: 100%;
			}
		}

		&_name {
			font-size: 18px;
			line-height: 24px;
			font-weight: bold;
			margin-bottom: 40px;
		}

		&_details {
			font-size: 18px;
			line-height: 24px;
		}
	}
}
