/* page_contact-us.less */

@import "main.less";

.page_contact-us {
	.header_hero_banner {
		background-image: none;
		background-color: #445B6D;

		.header_hero_subtitle {

			p,
			a {
				color          : #fff;
				text-decoration: none;

				svg {
					margin-right: 10px;
				}
			}

			.header_hero_cta {
				text-transform: uppercase;
			}
		}
	}

	.contacts_section {
		padding-top: 100px;

		@media @small_medium {
			padding: 20px 0;
		}

		.top_footer_wrap {
			margin-bottom: 0;
		}

		.top_footer_title {
			text-transform: uppercase;
			margin-bottom : 0;
		}

		.top_footer_subtitle {
			font-family  : 'Barlow Semi Condensed';
			font-style   : normal;
			font-weight  : 400;
			font-size    : 31px;
			line-height  : 50px;
			margin-bottom: 50px;
			color        : #262E37;

			@media @small {
				font-size  : 17px;
				line-height: 23px;
				margin-top : 20px;
			}
		}

		.address {
			@media @small {
				margin-bottom: 40px;
			}
		}

		.top_footer_header {
			margin: 0;
		}

		.address_title {
			font-family   : 'Barlow Condensed';
			font-style    : normal;
			font-weight   : 400;
			font-size     : 32px;
			line-height   : 100%;
			text-transform: uppercase;
			color         : #445B6D;
		}

		.address_desc {
			font-family: 'Roboto';
			font-style : normal;
			font-weight: 400;
			font-size  : 16px;
			line-height: 125%;
			color      : #000000;

			.email_address {
				margin : 40px 0;
				display: block;
			}
		}
	}

	.contact_altex_badge {
		position    : -webkit-sticky;
		position    : sticky;
		bottom      : 10px;
		text-align  : right;
		z-index     : 2;
		margin-right: 10px;

		@media @small {
			margin-right: 0;
		}

		img {
			width: 110px;

			@media @xlarge {
				width: 160px;
			}
		}

		.white_icon {
			filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(121deg) brightness(107%) contrast(101%);
		}
	}

	.contact_container {
		margin: 0;

		.contact_us_title {
			color         : #445B6D;
			font-family   : "Barlow Semi Condensed";
			font-size     : 42px;
			font-weight   : bold;
			letter-spacing: 0;
			text-transform: uppercase;
			line-height   : 50px;

			@media @small {
				font-size     : 24px;
				letter-spacing: 0;
				line-height   : 31px;
			}
		}

		.contact_us_subtitle {
			color         : #000000;
			font-family   : 'Roboto';
			font-size     : 20px;
			letter-spacing: 0;
			line-height   : 26px;
			margin        : 40px 0;

			@media @small {
				font-size     : 17px;
				letter-spacing: 0;
				line-height   : 24px;
				margin        : 20px 0;
			}
		}

		.address_section {
			margin: 80px 0;

			@media @small {
				margin: 40px 0;
			}

			.address_container {
				.address {
					margin: 30px 0;

					@media @small {
						margin: 20px 0;
					}

					.contact_info_subtitle {
						font-weight: bold;
					}

					a {
						text-decoration: none;
					}

					.city_name {
						color         : #445B6D;
						font-family   : "Barlow Condensed";
						font-size     : 32px;
						letter-spacing: 0;
						line-height   : 32px;
						text-transform: uppercase;
					}

					.address {
						color         : #000000;
						font-family   : Roboto;
						font-size     : 16px;
						letter-spacing: 0;
						line-height   : 20px;
					}

				}
			}
		}

		.contact_form_section {
			background-color: #EAF0F4;
			padding         : 0;

			.contact_form_container {
				margin: 80px 0;

				@media @small {
					margin: 40px 0;
				}

				.contact_form_title {
					color         : #445B6D;
					font-family   : 'Barlow';
					font-size     : 42px;
					font-weight   : bold;
					letter-spacing: 0;
					line-height   : 50px;
					margin-bottom : 10px;

					@media @small {
						font-size     : 24px;
						letter-spacing: 0;
						line-height   : 29px;
					}
				}

				.contact_us_subtitle {
					margin: 20px 0;
				}

				label {
					color         : #23272A;
					font-family   : 'Barlow';
					font-size     : 19px;
					font-weight   : 500;
					letter-spacing: 0;
					line-height   : 23px;
					margin        : 15px 0;
				}

				input[type=text],
				textarea,
				select {
					width           : 100%;
					border-color    : #EAF0F4 !important;
					height          : 70px;
					background-color: #fff;
					border-radius   : 8px;
					padding         : 10px;

					&:focus-visible,
					&:focus {
						outline: none;
						border : 2px solid #23272A !important;
					}

					@media @small {
						height: 50px;
					}
				}

				textarea {
					height: 280px;

					@media @small {
						height: 150px;
					}
				}

				.submit_btn {
					margin          : 40px auto;
					background-color: #445B6D;
					display         : block;
				}
			}
		}
	}
}