/* Contact Styles */

.header4{
	padding: 5px;
	font-size: 50px;
	font-weight: 700;
	background: linear-gradient(180deg, #FFF 16.67%, #8F8F8F 77.60%);
	background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact{
	display: flex;
    justify-content: center;
    align-items: center; 
    min-height: 540px;
}

.contact-wrapper{
	border-radius: 5px;
	height: 340px;
	width: 80%;
	/* border: solid 1px white; */
	display: flex;
	padding: 15px;
	justify-content: space-evenly;
	align-items: center;
	background: rgba(217, 217, 217, 0.16);
	border-radius: 5px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10.6px);
	-webkit-backdrop-filter: blur(10.6px);
}

.info-wrapper{
	padding: 5px 15px 15px;
}

.info-wrapper h1{
	font-size: 30px;
	margin: 5px 0 35px 0;
}


.info-wrapper h3{
	font-weight: 300;
}


.info-div{
	margin: 20px 0;
}

.info-div h2{
	font-size: 22px;
	margin-bottom: 10px;
}

#contact-form {
	padding: 15px;
}

.input-wrapper input{
	margin: 10px 0;
	background: none;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid white;
	color: #FFF;
	padding: 5px 0;
	width: 206px;
}

input:focus {
    outline: none;
}

.btn-container{
	display: flex;
	justify-content: center;
	padding: 10px 0;
}
.btn-container button{
	padding: 6px 85px;
	border-radius: 50px;
	background: none;
	border: white solid 1px;
	color: white;
	transition: ease 0.3s;
}

.btn-container button:hover{
	padding: 6px 85px;
	border-radius: 50px;
	background: white;
	border: white solid 1px;
	color: black;
}

.links{
	display: flex;
	justify-content: start;
}

.links div{
	margin-right: 15px;
}

.links a{
	display: inline-block;
	width: 22px;

}

.fa{
	font-size: 22px !important; 
	color: white;
	transition: ease 0.3s;
}

.fa:hover{
	color: #465459 !important;
}

.icon-x {
	width: 100% !important;
    transition: filter 0.3s;
}

.icon-x:hover {
	filter: invert(43%) sepia(14%) saturate(456%) hue-rotate(159deg) brightness(90%) contrast(88%);
	
}

.input-wrapper div{
	display: flex;
}

#req{
	color: rgb(215, 85, 85);
	margin-left: 5px;
	display: none;
}

#req2{
	color: rgb(215, 85, 85);
	margin-left: 5px;
	display: none;
}

#req3{
	color: rgb(215, 85, 85);
	margin-left: 5px;
	display: none;
}