.contactus-wrapper {
	width: 100%;
	height: 110vh;
	padding:0;
	margin: 0;
	font-family: "Poppins", sans-serif;
	position:relative;
}

.contactus-intro {
	width: 100%;
	height: 50vh;
	background: url('../img/contactus/contactus.jpg') center;
}

.contactus-info {
	top:80px;
	width: 40%;
	margin: 0;
	position:absolute;
	z-index: 3;
}

.contactus-overlay {
	top:0px;
	width: 50%;
	height: 50vh;
	margin: 0;
	position:absolute;
	background: linear-gradient(to right, white,transparent);
	z-index: 2;
}

.contactus-info h1{
	width:70%;
	margin: auto;
	padding-bottom: 20px;
	color: #000;
}

.contact-details {
	display: flex;
	width:70%;
	margin:auto;
	font-size: 16px;
	color: #000;
}

.address-img {
	padding-right: 15px;
}

.address-img img {
	width:30px;
	height: 30px;
	object-fit: cover;
}


.contactus-container {
	width: 100%;
	height:400px;
	display: flex;
	padding-top:20px;
	margin-top:0;
}


.privacy-info {
	width: 40%;
	padding: 0 40px;
	margin: 0;
}

.privacy-info h1{
	font-family: "Poppins", sans-serif;
	color: #c21104;
}

.privacy-details{
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	text-align: justify;
}


.contactus-msg {
	width: 60%;
	height: 100%;
}


.inputBox {
	width:100%;
	margin-top: 30px;
	position: relative;
	height: 40px;
}

.contactus-form {
	width: 90%;
	height: 350px;
	margin: 10px auto;
	/*background: #c5e8fa;*/
	padding:10px;
	box-shadow: 0px 1px 4px 0px rgba(0,0,0, .4);
}

.inputBox input
{
	width:100%;
	height: 100%;
	background: transparent;
	box-shadow: none;
	border:none;
	outline:none;
	color : #000;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
}


.inputBox .texts {
	position:absolute;
	left: 0;
	top: 0;
	line-height: 40px;
	display: block;
	transition: 0.5s;
	pointer-events: none;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
}

.inputBox .line {
	position:absolute;
	bottom: 0;
	height: 2px;
	background: rgba(247, 233, 205);
	display: block;
	width: 100%;
	transition: .5s;
	border-radius: 2px;
	pointer-events: none;
}

.inputBox input:focus + .texts,
.inputBox input:valid + .texts  
{
	top: -35px;
	left: 0px;
}

.inputBox input:focus ~ .line,
.inputBox input:valid ~ .line 
{
	background: rgba(247, 233, 205, .3);
	height: 100%;
}


.inputBox.textarea {
	position: relative;
	width:100%;
	height:100px;
}


.inputBox.textarea textarea {
	width: 100%;
	height: 100%;
	resize: none;
	outline: none;
	border:none;
	background: none;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color:#000;
}

.inputBox textarea:focus + .texts,
.inputBox textarea:valid + .texts 
{
	top: -35px;
	left: 0px;
}

.inputBox.textarea textarea:focus ~ .line,
.inputBox.textarea textarea:valid ~ .line 
{
	background: rgba(247, 233, 205, .3);
	height: 100%;
}


.submit {
	margin-top: 20px;
	display: flex;
	justify-content: center;
}

#btn {

	font-family: "Poppins", sans-serif;
	font-size: 14px;
	background-color: #c21104;
	margin: auto;
	color:#fff;
	border-radius: 2px;
	border:none;
	height: 40px;
	width:150px;
	transition: width .3s ease-in-out;
}

#btn:hover {
	width: 200px;
}

/*-----media query --------------------*/

@media only screen and (max-width:  414px) {


	.contactus-wrapper {
		height: 185vh;
		width: 414px;
		overflow: hidden;
	}

	.contactus-intro {
		width: 100%;
		height: 70vh;
	}

	.contactus-info {
		top:80px;
		width: 80%;
	}

	.contactus-overlay {
		width: 90%;
		height: 70vh;
	}

	.contactus-info h1{
		width:90%;
	}

	.contact-details {
		display: flex;
		width:85%;	
		font-size: 15px;
	}

	.address-img img {
		width:20px;
		height: 20px;
	}

	.contactus-container {
		width: 100%;
		height: 500px;
		display: block;
		padding-top:20px;
	}

	.contactus-msg {
		width: 100%;
		height: 400px;
	}

	.privacy-info {
		width: 90%;
		padding: 20px;
		margin: 0;	
	}

	.privacy-info h1{
		font-family: "Poppins", sans-serif;
		color: #c21104;
	}

	.privacy-details{
		font-size: 12px;
	}

}