.contact-form {
	padding: 30px;
	border-radius: 24px;
}

.contact-box {
	display: flex;
	flex-direction: column;
	margin: 40px 0;
}

.contact-form label {
	margin-bottom: 10px;
	font-size: 22px;
}

.contact-form input,
.contact-form textarea,
.contact-form button {
	padding: 10px;
	font-size: 16px;
	font-family: inherit;
	border: 2px solid hsl(0, 0%, 67%);
	border-radius: 12px;
}

.contact-form textarea {
	resize: vertical;
	min-height: 150px;
}

.contact-form button {
	padding: 12px;
	width: 100%;
	cursor: pointer;
}



.msg-status {
	display: none;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	padding: 30px;
	width: 350px;
	border-radius: 12px;
	font-size: 24px;
}

.success {
	display: flex;
	background-color: hsl(143, 83%, 55%);
}

.error {
	display: flex;
	background-color: hsl(9, 100%, 64%);
}

.activeBTN {
	background-color: #fcb653
 /* active:bg-[#FF8811] focus:bg-[#FF8811] hover:text-white */

}

.activeBTN:hover{
	background-color: #FF8811;
	font-weight: bolder;
	
}
.activeBTN:focus{
	background-color: #FF8811;
}
.activeBTN:active{
	background-color: #FF8811;
}


.inactiveBTN {
	background-color: rgb(231, 231, 231) ;
		/* @apply bg-gray-400 hover:bg-gray-600 active:bg-gray-600 focus:bg-gray-600 */
	}
	.inactiveBTN:hover{
		background-color: grey;
		color:white;
		font-weight: bolder;
		
	}
	.inactiveBTN:active{
		background-color: grey;
		
	}
	.inactiveBTN:focus{
		background-color: grey;
		
	}