/*===========================
    22.CONTACT css 
===========================*/




.contact-info-area{
	& .contact-info-border{
		border: 10px solid #f1f1f1;
		margin-bottom: 50px;
		& .contact-info-item{
			padding: 59px 0px 55px;
			& i{
				font-size: 40px;
				color: $theme-color-2;
				padding-bottom: 6px;
			}
			& ul{
				& li{
					font-size: 18px;
					font-weight: 500;
					line-height: 28px;
					& a{
						color: $body-text;
					}
					@media #{$md} {
						font-size: 14px;
					}
				}
			}
			&.active{
				position: relative;
				& i{
					color: $theme-color;
				}
				& .item-1{
					position: absolute;
					right: -5px;
					top: 50%;
					transform: translateY(-50%);
				}
				& .item-2{
					position: absolute;
					left: -5px;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}
	& .contact-thumb{
		margin-right: -30px;
		position: relative;
		@media #{$md} {
			margin-right: 0;
		}
		@media #{$xs} {
			margin-right: 0;
		}
		&::before{
			position: absolute;
			content: '';
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			background-color: rgba(1, 84, 247,.7);

		}
		& img{
			width: 100%;
		}
		& .contact-text{
			position: absolute;
			left: 40px;
			bottom: 50px;
			& .title{
				color: $white;
				font-size: 40px;
				font-weight: 600;
				line-height: 40px;
				border-left: 5px solid $white;
				padding-left: 25px;
				@media #{$md} {
					font-size: 30px;
					line-height: 30px;
				}
				@media #{$xs} {
					font-size: 40px;
					line-height: 40px;
				}
			}
		}
	}
	& .contact-massage-area{
		@media #{$md} {
			padding-left: 0;
		}
		@media #{$xs} {
			padding-left: 0;
		}
		& .contact-massage-content{
			& .title{
				font-size: 30px;
				color: $black;
				font-weight: 600;
				position: relative;
				&::before{
					position: absolute;
					content: '';
					left: 0;
					bottom: -19px;
					width: 10px;
					height: 2px;
					background: $theme-color;
				}
				&::after{
					position: absolute;
					content: '';
					left: 18px;
					bottom: -19px;
					width: 25px;
					height: 2px;
					background: $theme-color;
				}
			}
			& p{
				font-size: 18px;
				font-weight: 500;
				line-height: 28px;
				padding-top: 42px;
				padding-bottom: 11px;
			}
		}
		& form{
			& .input-box{
				position: relative;
				& input{
					width: 100%;
					line-height: 70px;
					padding-left: 20px;
					border: 2px solid #e9ebef;
					font-size: 14px;
					color: $body-text;
					&::placeholder{
						opacity: 1;
					}
				}
				& textarea{
					width: 100%;
					height: 140px;
					border: 2px solid #e9ebef;
					padding-left: 20px;
					padding-top: 20px;
					font-size: 14px;
					color: $body-text;
					margin-bottom: 20px;
					&::placeholder{
						opacity: 1;
					}
				}
				& i{
					position: absolute;
					right: 20px;
					top: 30px;
					color: $theme-color;
					font-size: 14px;
				}
			}
		}

	}

}



.contact-map-area{
	& .contact-map{
		position: relative;
		height: 650px;
		@media #{$md} {
			height: 500px;
		}
		@media #{$xs} {
			height: 400px;
		}
		& iframe{
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
		}
		& i{
			position: absolute;
			left: 50%;
			top: 45%;
			transform: translate(-50%);
			color: $theme-color-3;
			font-size: 100px;
		}
	}
}