// contact_area 1
.contact_area{
	@extend .section_padding;
	.left_side{
		.title{
			font-size: 36px;
			line-height: 1;
			@include firasans(700);
			color: $brand_2;
		}
		.sub_title{
			font-size: 20px;
			margin-top: 15px;
			@include firasans(300);
			color: #fff;
			margin-bottom: 40px;
		}
		p{ 
			color: #fff;
			margin-right: 30px;
			font-size: 18px; 
			line-height: 1.5;
			@include firasans(300);  
			span{ margin-right: 10px; }
		}
		.heading{
			font-size: 24px;
			@include firasans(500);
			margin-top: 45px;
			margin-bottom:5px;
			color: $brand_2;
		}
	}
	.contact_form{
		color: $text;
		.form-group{ margin-bottom: 30px; }
		label{ display: none; }
		input[type="text"], input[type="email"], input[type="tel"], textarea, .form-control{
			background: #ffffff1a;
			padding: 15px;
			@include firasans(300);
			height: 52px;
			font-size: 16px;
			border-radius: 0;
			border: 1px solid $brand_2;
			color: $text; 
		}
		select.form-control{ padding: 0 !important; }

		/** Custom Select **/
		.custom_select_wrapper {
			position: relative;
			select {
				display: none;
				position: relative;
			}
			.custom_select{
				&.form-control{
					padding: 0 !important;
					text-transform: capitalize;
					
				}
				.custom_select_trigger {
					position: relative;
					display: block;
					width: 100%;
					height: 100%;
					padding: 15px;
					font-size: 16px;
					font-weight: 300;
					color: $text;
					background: #ffffff1a;
					cursor: pointer;
					@include transition(all, .5s, ease-in-out);
					&:after {
						position: absolute;
						display: block;
						content: '';
						width: 10px; 
						height: 10px;
						top: 50%; 
						right: 25px;
						margin-top: -3px;
						border-bottom: 1px solid $brand_2;
						border-right: 1px solid $brand_2;
						transform: rotate(45deg) translateY(-50%);
						@include transition(all, .5s, ease-in-out);
						transform-origin: 50% 0;
					}
				}
				&.opened{  @include boxshadow( 0px, 0px, 38px, 2px, rgba(0, 0, 0, 0.10), false); }
				&.opened .custom_select_trigger:after {
					margin-top: 3px;
					transform: rotate(-135deg) translateY(-50%);
				}
				.custom_options {
					position: absolute;
					z-index: 99;
					display: block;
					top: 100%; left: 0; right: 0;
					min-width: 100%;
					border: 1px solid #ededed;
					box-sizing: border-box;
					@include boxshadow( 0, 2px, 1px, 0px, rgba(0,0,0,.07), false);
					background: #fff;
					@include transition(all, .5s, ease-in-out);
					opacity: 0;
					visibility: hidden;
					pointer-events: none;
					transform: translateY(-15px);
					.custom_option {
						font-size: 16px;
						padding: 5px 15px;
						cursor: pointer;
						margin: 0;
						text-align: left;
						line-height: 30px;
						display: block;
						color: $brand_2;
						transition: all .4s ease-in-out;
						&:last-of-type { border-bottom: 0; }
						&:hover {
							background: $brand_2;
							color: #fff;
						}
					}
				}
				&.opened .custom_options {
					opacity: 1;
					visibility: visible;
					pointer-events: all;
					transform: translateY(0px);
				}
			}
		}
		textarea{ height: auto !important;  }
		.boxed_btn{ 
		    border-radius: 0px;
		    padding: 10px 20px;
		    background: #007bff;
		    display: block;
		    margin-top: 0px;
		    color: #fff;
		    font-size: 13px;
		    width: 100%;
		    line-height: 2;
		    text-transform: uppercase;
		    outline: none;
		    border: none;
		    cursor: pointer;
		    @include transition(all, .3s, ease-in-out);
		    &:hover{ background: $green; }
		}
	}
}
	// style 2
.contact_area_2{
	@extend .section_padding;
	background-image: url("../img/contact_bg.png");
	background-repeat: no-repeat;
	background-position: right center;
}
.contact_form_2{
	color: #fff;
	h3{
		font-size: 24px;
		color: $brand_2;
		margin-bottom: 20px;
		@include firasans(300);
		margin-bottom: 50px;
		span{
			color: #fff;
			font-weight: 700;
			font-size: 40px;
			display: block; 
			line-height: 1.5;
		}
	}
	.form-group{ margin-bottom: 30px; }
	.required:after {
	    position: absolute;
	    z-index: -1;
	    left: auto;
	    right: -25px;
	    height: 20px;
	    width: 20px;
	    content: '*';
	    font-size: 20px;
	    top: -3px;
	    color: red;
	}
	label{ 
		font-size: 14px; 
		margin-bottom: 15px;
		position: relative; 
		z-index: 1;
		display: none;
	}
	i{
	    font-size: 16px;
	    left: 40px;
	    position: absolute;
	    z-index: 2;
	    text-align: center;
	    top: 20px;
	    width: 16px;
	    color: #fff;
	}
	input[type="text"], input[type="email"], input[type="tel"], textarea{
		background: #ffffff1a;
		padding: 10px;
		padding-left: 55px;
		height: 60px;
		font-size: 12px;
		border-radius: 0;
		border: 1px solid #ededed; 
		color: $text;
		&::placeholder{ text-transform: uppercase; } 
	}
	label.custom-control-label{
		display: block !important;
		&:before, &:after { top: 0; }
	}

	/** Custom Select **/
	.custom_select_wrapper {
		position: relative;
		select {
			display: none;
			padding: 0 !important;
			position: relative;
		}
		.custom_select{
			&.form-control{
				background: #ffffff1a;
				padding: 10px;
				padding-left: 55px;
				height: 60px;
				border-radius: 0;
				border: 1px solid #ededed; 
				text-transform: uppercase;
			}
			.custom_select_trigger {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				padding: 10px;
				padding-left: 0;
				font-size: 12px;
				color: $text;
				background: transparent;
				cursor: pointer;
				@include transition(all, .5s, ease-in-out);
				&:after {
					position: absolute;
					display: block;
					content: '';
					width: 10px; 
					height: 10px;
					top: 50%; 
					right: 25px;
					margin-top: -3px;
					border-bottom: 1px solid $brand_2;
					border-right: 1px solid $brand_2;
					transform: rotate(45deg) translateY(-50%);
					@include transition(all, .5s, ease-in-out);
					transform-origin: 50% 0;
				}
			}
			&.opened{ @include boxshadow( 0px, 0px, 38px, 2px, rgba(0, 0, 0, 0.0), false); }
			&.opened .custom_select_trigger:after {
				margin-top: 3px;
				transform: rotate(-135deg) translateY(-50%);
			}
			.custom_options {
				position: absolute;
				z-index: 99;
				display: block;
				top: 100%; left: 0; right: 0;
				min-width: 100%;
				border: 1px solid #ededed;
				box-sizing: border-box;
				@include boxshadow( 0, 2px, 1px, 0px, rgba(0,0,0,.07), false);
				background: #fff;
				@include transition(all, .5s, ease-in-out);
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				transform: translateY(-15px);
				.custom_option {
					font-size: 12px;
					padding: 5px 15px 5px 22px;
					cursor: pointer;
					margin: 0;
					text-align: left;
					line-height: 30px;
					display: block;
					color: $brand_2;
					transition: all .4s ease-in-out;
					&:last-of-type { border-bottom: 0; }
					&:hover {
						background: $brand_2;
						color: #fff;
					}
				}
			}
			&.opened .custom_options {
				opacity: 1;
				visibility: visible;
				pointer-events: all;
				transform: translateY(0px);
			}
		}
	}
	textarea{ 
		padding: 20px !important;
		padding-left: 55px !important;
		height: auto !important; 
		&:focus{ border: 1px solid #ededed; background: #ffffff1a; }
	}
	.boxed_btn{ 
	    border-radius: 10px;
	    padding: 20px 44px;
	    background: $brand_2;
	    display: block;
	    margin-top: 40px;
	    color: #fff;
	    font-size: 18px;
	    text-transform: uppercase;
	    outline: none;
	    border: none;
	    cursor: pointer;
	    @include transition(all, .3s, ease-in-out);
	    &:hover{ background: $green; }
	}
}


	// Responsive
@media #{$medium_device}{


}
@media #{$tab_device}{
	.contact_area{
		.left_side{
			.title{
				font-size: 30px;
			}
			.sub_title{
				font-size: 18px;
				margin-top: 5px;
				margin-bottom: 25px;
			}
			p{ 
				color: $text;
				margin-right: 0px;
				font-size: 16px; ;  
			}
			.heading{
				font-size: 22px;
				margin-top: 30px;
				margin-bottom: 0px;
			}
		}
		.contact_form{
			color: $text;
			.form-group{ margin-bottom: 27px; }
			input[type="text"], input[type="email"], input[type="tel"], textarea, .form-control{
				padding: 10px;
				height: 40px;
				font-size: 16px;
			}
			.custom_select_wrapper {
				position: relative;
				select {
					display: none;
					position: relative;
				}
				.custom_select{
					&.form-control{
						padding: 0 !important;
						text-transform: capitalize;
					}
					.custom_select_trigger {
						position: relative;
						display: block;
						width: 100%;
						height: 100%;
						padding: 15px;
						font-size: 16px;
						font-weight: 300;
						color: $text;
						background: #fff;
						cursor: pointer;
						@include transition(all, .5s, ease-in-out);
						&:after {
							position: absolute;
							display: block;
							content: '';
							width: 10px; 
							height: 10px;
							top: 50%; 
							right: 25px;
							margin-top: -3px;
							border-bottom: 1px solid $brand_2;
							border-right: 1px solid $brand_2;
							transform: rotate(45deg) translateY(-50%);
							@include transition(all, .5s, ease-in-out);
							transform-origin: 50% 0;
						}
					}
					&.opened{ 
						@include boxshadow( 0px, 0px, 38px, 2px, rgba(0, 0, 0, 0.10), false);
					}
					&.opened .custom_select_trigger:after {
						margin-top: 3px;
						transform: rotate(-135deg) translateY(-50%);
					}
					.custom_options {
						position: absolute;
						z-index: 99;
						display: block;
						top: 100%; left: 0; right: 0;
						min-width: 100%;
						border: 1px solid #ededed;
						box-sizing: border-box;
						@include boxshadow( 0, 2px, 1px, 0px, rgba(0,0,0,.07), false);
						background: #fff;
						@include transition(all, .5s, ease-in-out);
						opacity: 0;
						visibility: hidden;
						pointer-events: none;
						transform: translateY(-15px);
						.custom_option {
							font-size: 16px;
							padding: 5px 15px;
							cursor: pointer;
							margin: 0;
							text-align: left;
							line-height: 30px;
							display: block;
							color: $brand_2;
							transition: all .4s ease-in-out;
							&:last-of-type { border-bottom: 0; }
							&:hover {
								background: $brand_2;
								color: #fff;
							}
						}
					}
					&.opened .custom_options {
						opacity: 1;
						visibility: visible;
						pointer-events: all;
						transform: translateY(0px);
					}
				}
			}
			textarea{ height: auto !important;  }
			.boxed_btn{ 
			    border-radius: 0px;
			    padding: 10px 20px;
			    background: #007bff;
			    display: block;
			    margin-top: 0px;
			    color: #fff;
			    font-size: 13px;
			    width: 100%;
			    line-height: 2;
			    text-transform: uppercase;
			    outline: none;
			    border: none;
			    cursor: pointer;
			    @include transition(all, .3s, ease-in-out);
			    &:hover{
			    	background: $green;
			    }
			}
		}
	}
	
}
@media #{$small_mobile}{
	.contact_area{
		.left_side{
			margin-bottom: 30px
		}
	}
	.contact_area_2{ background: none; }

}
@media #{$large_mobile}{
	
}