#contact
{
	padding: 8vw;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}


#contact .getin
{
	width: 350px;
}

#contact .getin h2
{
	color: #2c234d;
	font-size: 30px;
	font-weight: 800;
	line-height: .8;
	margin-bottom: 16px;
}

#contact .getin p
{
	color: #686875;
	line-height: 24px;
	margin-bottom: 33px;
	padding-bottom: 25px;
	border-bottom: 1px solid #e5e4ed;
}

#contact .getin h3
{
	color: #2c234d;
	font-size: 16px;
	font-weight: 600;
	line-height: 26px;
	margin-bottom: 15px;
}

#contact .getin .getin-details div
{
	display: flex;
}

#contact .getin .getin-details div .get
{
	font-size: 16px;
	line-height: 22px;
	color: #5838fc;
	margin-right: 20px;
}

#contact .getin .getin-details div p
{
	font-size: 14px;
	border-bottom: none;
	line-height: 22px;
	margin-bottom: 15px;
}

#contact .getin .getin-details .pro-links i
{
	margin-right: 8px;
}

#contact .form
{
	width: 60%;
	background: #f7f6fa;
	padding: 40px;
	border-radius: 10px;
}

#contact .form h4
{
	font-size: 24px;
	color: #2c234d;
	line-height: 30px;
	margin-bottom: 8px;
}

#contact .form p
{
	color: #686875;
	line-height: 24px;
	padding-bottom: 25px;
}

#contact .form .form-row
{
	display: flex;
	justify-content: space-between;
	width: 100%;
}

#contact .form .form-row input
{
	width: 48%;
	font-size: 14px;
	font-weight: 400;
	border-radius: 3px;
	border: none;
	background: #fff;
	color: #7e7c87;
	outline: none;
	padding: 20px 30px;
	margin-bottom: 20px;
}

#contact .form .form-col input,
#contact .form .form-col textarea
{
	width: 100%;
	font-size: 14px;
	font-weight: 400;
	border-radius: 3px;
	border: none;
	background: #fff;
	color: #7e7c87;
	outline: none;
	padding: 20px 30px;
	margin-bottom: 20px;
}


#contact .form button
{
	font-size: .9rem;
	padding: 13px 25px;
	background: rgb(21, 21, 100);
	border-radius: 5px;
	outline: none;
	border: none;
	font-weight: 600;
	cursor: pointer;
	color: #fff;
}

#map
{
	width: 100%;
	height: 70vh;
}

#map iframe
{
	width: 100%;
	height: 100%;
}


/*-------------------------------------------------------*/
/*------------- Tablet screen styling -------------------*/
/*-------------------------------------------------------*/
@media screen and (max-width: 769px)
{
	#contact
	{
		padding: 8vw 4vw;
	}

	#contact .getin
	{
		width: 250px;
	}
}


/*---------------------------------------------------------*/
/*-------------- Mobile screen styling -------------------*/
/*---------------------------------------------------------*/
@media screen and (max-width: 475px)
{
	#contact
	{
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	#contact .getin
	{
		width: 100%;
		margin-bottom: 30px;
	}

	#contact .form
	{
		width: 100%;
		padding: 40px 30px;
	}

	#contact .form .form-row
	{
		flex-direction: column;
	}

	#contact .form .form-row input
	{
		width: 100%;
	}
}