@import url('https://fonts.google.com/share?selection.family=Inter:wght@100..900&display=swap');

 * {
 	margin: 0;
 	padding: 0;
 }

 body {
 	font-family: Inter;
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
 	background-attachment: fixed;
 	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/contact.jpg");
 }

 .container {
 	color: white;
 	line-height: 1.5;
 }

 .text-center {
 	text-align: center;
 	margin: 90px 0;
 	z-index: 2;
 }

 .content {
 	display: flex;
 	margin-top: 40px;
 }

 .icon {
 	background-color: white;
 	border-radius: 30px;
 	padding: 15px;
 	vertical-align: top;
 	width: 20px;
 	height: 20px;
 	z-index: 3;
 }

 .contact-info {
 	display: inline-block;
 	padding: 4px 0px 0px 20px;
 	font-size: 15px;
 }

 @media all and (max-width: 500px) {
 	.contact-info {
 		padding: 4px 0px 0px 15px;
 	}
 }

 .address-line {
 	margin-top: 40px;
 }

 .col-1 {
 	width: 530px;
 	margin-left: 130px;
 	padding-top: 15px;
 	align-items: center;
 }

 .col-2 {
 	background-color: white;
 }

 .form-container {
 	color: #000;
 	padding: 30px;
 	width: 500px;
 }

 .form-container h2 {
 	margin-bottom: 25px;
 }

 .contact-info-title {
 	color: #ffff;
 	font-size: 20px;
 }

 .form-row {
 	padding-top: 10px;
 	padding-bottom: 30px;
 }

 .form-field {
 	width: 100%;
 	border: none;
 	border-bottom: 1px solid #000;
 }

 #textinput {
 	width: 100%;
 }

 .my-3 {
 	width: 100%;
 }

 .form-field:focus {
 	outline: none;
 	border-bottom: 1px solid #000;
 }

 #textinput {
 	border: none;
 	border-bottom: 1px solid #000;
 }

 #textinput:focus {
 	outline: none;
 	border-bottom: 1px solid #000;
 }

 .send-btn {
 	border: 0px;
 	border-radius: 20px;
 	padding: 12px 26px;
 	background-color: #01bdd4;
 	color: white;
 }

 @media all and (max-width: 1024px) {
 	.container {
 		width: auto;
 		padding: 30px;
 	}

 	.col-1 {
 		width: 360px;
 	}

 	.form-field {
 		width: 80%;
 	}

 	#textinput {
 		width: 80%;
 	}

 	.my-3 {
 		width: 80%;
 	}
 }

 @media all and (max-width: 700px) {
 	.content {
 		display: block;
 	}

 	.col-2 {
 		margin-top: 50px;
 	}

 	.col-1 {
 		width: 85%;
 		margin-left: 15%;
 	}

 	.form-field {
 		width: 100%;
 	}

 	#textinput {
 		width: 100%;
 	}

 	.my-3 {
 		width: 80%;
 	}

 	.form-container {
 		width: 85%;
 	}
 }

 @media all and (max-width: 500px) {
 	.container {
 		padding: 10px;
 	}
 }

 .contact-info a {
 	text-decoration: none;
 	color: #ffff;
 }

 .contact-info a:hover {
 	opacity: 0.7;
 }

 @media (min-width: 1400px) {
 	.container {
 		width: 1140px;
 		margin: 80px auto;
 		font-size: large;
 	}

 	.content {
 		display: flex;
 		margin-top: 60px;
 	}

 	.col-1 {
 		width: 600px;
 		margin-left: 150px;
 		padding-top: 15px;
 		align-items: center;
 	}

 	.col-2 {
 		background-color: white;
 		width: 550px;
 	}

 	.form-container {
 		color: #000;
 		padding: 40px;
 		width: 550px;
 	}

 	.form-field {
 		width: 85%;
 	}

 	#textinput {
 		width: 85%;
 	}

 	.my-3 {
 		width: 85%;
 	}
 }

 .php-email-form {
 	box-shadow: 0 0 30px rgba(214, 215, 216, 0.4);
 }

 .php-email-form .error-message {
 	display: none;
 	color: #fff;
 	background: #ed3c0d;
 	text-align: left;
 	padding: 15px;
 }

 .php-email-form .error-message br+br {
 	margin-top: 25px;
 }

 .php-email-form .sent-message {
 	display: none;
 	color: #fff;
 	background: #18d26e;
 	text-align: center;
 	padding: 15px;
 }

 .php-email-form .loading {
 	display: none;
 	background: #fff;
 	text-align: center;
 	padding: 15px;
 }

 .php-email-form .loading:before {
 	content: "";
 	display: inline-block;
 	border-radius: 50%;
 	width: 24px;
 	height: 24px;
 	margin: 0 10px -6px 0;
 	border: 3px solid #18d26e;
 	border-top-color: #eee;
 	-webkit-animation: animate-loading 1s linear infinite;
 	animation: animate-loading 1s linear infinite;
 }

 .d-block {
 	display: block !important;
 	margin-bottom: 20px;
 }