#contact-us {
   display: flex;
   align-items: center;
   flex-direction: column;
   padding: 10px 0px;
   height: 100vh;
   background-color: rgb(68, 38, 197);
}
#contact-us h1{
   margin-top:10px;
   font-size: 40px;
   font-weight: bold;
   padding:10px;
   letter-spacing: 3px;
   color: white;
}

textarea {
   resize: none;
}

.form-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   color: white;
   margin: auto;
}

.form-message-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   border-top-left-radius: 12px;
   border-bottom-left-radius: 12px;
   background: rgb(27, 16, 235);
   background: linear-gradient(90deg, rgba(27, 16, 235, 1) 0%, #6161ec 35%, rgba(30, 148, 172, 1) 100%);
   box-shadow: 2px 2px 5px black;
}

.form-message-container>* {
   margin: 4px auto;
   width: 80%;

}

.form-message-container h1 {
   letter-spacing: 2px;
   font-size: 25px;
   font-weight: normal;
}

.form-content {
   padding: 15px 12px;
   height: 380px;
}

form {
   display: flex;
   flex-direction: column;
   color: black;
   width: 350px;
   background-color: white;
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
   height: 450px;
   box-shadow: 2px 2px 5px black;
}

form>* {
   padding: 2px 2px;
   margin: 5px 10px;
}

form input,
textarea {
   outline: none;
   border: 1px solid #6161ec;
   padding: 10px;
   border-radius: 5px;
   color: black;
   font-size: 12px;
   font-weight: 600;
}

.form-content input[type=submit] {
   background: linear-gradient(90deg, rgba(27, 16, 235, 1) 0%, #6161ec 35%, rgba(30, 148, 172, 1) 100%);
   color: white;
   font-weight: bold;
   width: 30%;
   transition: all 0.3s ease-in-out;
}

.form-content input[type=submit]:hover {
   background: linear-gradient(-90deg, rgba(27, 16, 235, 1) 0%, #6161ec 35%, rgba(30, 148, 172, 1) 100%);
   transform: scale(1.05);

}