/*
-----------------------------------------------------------------------
	Contact CSS
-----------------------------------------------------------------------
*/
.contact-area {
	background-color: #e9edee;
	padding: 0 0 181px;
	position: relative;
	@media #{$lg-device} {
		padding: 0 0 100px;
	}
	@media #{$md-device} {
		padding: 100px 0;
	}
	@media #{$sm-device} {
		padding: 80px 0;
	}
	.container {
		@media #{$sm-device} {
			max-width: none;
			padding-left: 30px;
			padding-right: 30px;
		}
		@media #{$xxs-device} {
			padding-left: 15px;
			padding-right: 15px;
		}
	}
}

.contact-info-content {
	background-color: $theme-color;
	display: flex;
	justify-content: space-between;
	margin-bottom: 111px;
	margin-top: -87px;
	padding: 77px 47px 92px 71px;
	@media #{$lg-device} {
		margin-bottom: 98px;
	}
	@media #{$md-device} {
		margin-top: 0;
	}
	@media #{$sm-device} {
		display: block;
		margin-bottom: 80px;
		padding: 57px 27px 72px 31px;
	}
	@media #{$xxs-device} {
		display: block;
		margin-bottom: 70px;
		padding: 57px 17px 62px 21px;
	}

	.info-address {
		max-width: 375px;
		position: relative;
		@media #{$sm-device} {
			margin-bottom: 50px;
			max-width: none;
			padding-bottom: 40px;
		}
		&:after {
			background-color: $white;
			bottom: 8px;
			content: "";
			height: 3px;
			left: 0;
			position: absolute;
			width: 70px;
		}
		.title {
			color: $white;
	    display: inline-block;
			font-size: 36px;
	    font-weight: 700;
	    letter-spacing: -.44px;
	    line-height: 1.1;
	    margin-bottom: 19px;
	    @media #{$lg-device} {
	    	font-size: 30px;
	    }
	    span {
	    	color: #c8eaea;
	    	font-weight: $font-weight-light;
	    }
		}
		p {
			color: $white;
	    font-size: 16px;
	    letter-spacing: -.15px;
	    line-height: 24px;
	    margin-bottom: 36px;
	    @media #{$lg-device} {
	    	font-size: 15px;
	    }
		}
		a {
			color: $white;
			font-size: 16px;
			letter-spacing: 0;
			span {
				color: #99cccc;
			}
		}
	}
	.brand-office {
		margin-top: 19px;
		max-width: 430px;
		@media #{$sm-device} {
			max-width: none;
		}
		.info-tem {
			letter-spacing: -.15px;
			margin-bottom: 42px;
			h6 {
				color: #99cccc;
				font-size: 16px;
				font-weight: $font-weight-normal;
				margin-bottom: 9px;
			}
			p {
				color: $white;
				font-size: 16px;
				line-height: 24px;
				margin-bottom: 0;
			}
			&.style-two {
				margin-bottom: 50px;
				h6 {
					color: $white;
					font-size: 14px;
					font-weight: $font-weight-bold;
					letter-spacing: 0;
					margin-bottom: 15px;
					text-transform: uppercase;
				}
				p {
					font-size: 48px;
					line-height: 1;
					@media #{$lg-device} {
						font-size: 36px;
					}
					@media #{$xxs-device} {
						font-size: 30px;
					}
				}
			}
			&:last-child {
				h6 {
					margin-bottom: 10px;
				}
			}
		}
	}
}

.contact-form {
	.section-title {
		margin-bottom: 70px;
		@media #{$lg-device} {
			margin-bottom: 60px;
		}
	}
	.contact-form-wrapper {
		background-color: $white;
		padding: 45px 50px 61px;
		@media #{$xxs-device} {
			padding: 35px 25px 45px;
		}
	}
}

.contact-map-area {
	background-color: $gray-light;
	height: 636px;
	@media #{$xxl-device} {
		height: 420px;
	}
	@media #{$lg-device} {
		height: 380px;
	}
	@media #{$md-device} {
		height: 320px;
	}
	@media #{$sm-device} {
		height: 300px;
	}
	iframe {
	  height: 100%;
	  width: 100%;
	}
}