styled message box

src/App.css

@@ -229,3 +229,131 @@ h2.MuiTypography-root {
     color: #3598db;
     display: flex;
 }
+
+
+/* mail box styles -----------------------------------------------*/
+/* light theme */
+
+
+#light .contactContainer {
+    display: flex;
+    justify-content: center;
+    padding: 10px 50px 50px 50px;
+    margin: 50px auto 0 auto;
+    max-width: 600px;
+    border-radius: 50px;
+    background: #FFF9F9;
+    box-shadow: 0 4px 10px 0 rgba(139, 192, 255, 0.25);
+
+}
+
+#light .form-group h4 {
+    justify-content: center;
+}
+
+/* subject */
+#light h4.mail {
+    color: #102b5a;
+    text-align: center;
+}
+
+/* message box */
+#light .form-group textarea {
+    width: 299px;
+    height: 153px;
+    flex-shrink: 0;
+    max-width: 450px;
+    border-radius: 30px;
+    border-width: 0;
+    border-color: #102b5a;
+    background: linear-gradient(153deg, rgba(254, 231, 211, 0.30) 0%, rgba(254, 211, 211, 0.10) 100%);
+    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25) inset;
+}
+
+
+/* button  */
+#light .col-md-12 {
+    display: flex;
+    margin-top: 20px;
+    justify-content: center;
+}
+
+#light .btn {
+    width: 140px;
+    height: 40px;
+    flex-shrink: 0;
+    border-radius: 30px;
+    background: linear-gradient(153deg, rgba(139, 192, 255, 0.25) 0%, rgba(254, 211, 211, 0.10) 100%);
+    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
+    border: none;
+    color: #102b5a;
+}
+
+#light .btn:hover {
+    border-radius: 30px;
+    background: linear-gradient(153deg, rgba(255, 181, 139, 0.25) 0%, rgba(254, 211, 211, 0.10) 100%);
+    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+}
+
+/* dark theme */
+.contactContainer {
+    display: flex;
+    justify-content: center;
+    padding: 10px 50px 50px 50px;
+    margin: 50px auto 0 auto;
+    max-width: 600px;
+    border-radius: 50px;
+    background: #2B3E52;
+    box-shadow: 0 4px 10px 0 rgba(139, 192, 255, 0.25);
+
+}
+
+.form-group h4 {
+    justify-content: center;
+}
+
+/* subject */
+h4.mail {
+    color: aliceblue;
+    text-align: center;
+}
+
+/* message box */
+.form-group textarea {
+    width: 299px;
+    height: 153px;
+    flex-shrink: 0;
+    max-width: 450px;
+    border-radius: 30px;
+    border-width: 0;
+    border-color: #102b5a;
+    background: linear-gradient(153deg, rgba(255, 255, 255, 0.30) 0%, rgba(237, 244, 255, 0.46) 100%);
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
+}
+
+
+/* button  */
+.col-md-12 {
+    display: flex;
+    margin-top: 20px;
+    justify-content: center;
+}
+
+.btn {
+    width: 140px;
+    height: 40px;
+    flex-shrink: 0;
+    border-radius: 30px;
+    background: linear-gradient(159deg, rgba(186, 218, 255, 0.59) 0%, #D3E7FE 100%);
+    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
+    border: none;
+    color: #102b5a;
+}
+
+.btn:hover {
+    border-radius: 30px;
+    background: linear-gradient(159deg, rgba(145, 183, 227, 0.59) 0%, #D3F6FE 100%);
+    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+}

src/App.jsx

@@ -206,8 +206,8 @@ export default function App() {
                                 ))}
 
                             </Grid>
+                            <Contact />
                         </Container>
-                        <Contact />
                     </main>
                     {/* Footer */}
                     <Box sx={{p: 6}} component="footer">

src/Contact.jsx

@@ -22,7 +22,7 @@ function Contact(){
     }
 
     return <section id="contact">
-        <h2 className="contact">Contact</h2>
+        {/*<h2 className="contact">Contact</h2>*/}
         <div className="contactContainer">
             <div className="col-lg-6">
                 <div className="contact-wrap">
@@ -33,7 +33,7 @@ function Contact(){
                                 <div className="form-group">
                                     <h4 className="mail">Send PP any message</h4>
                                     <textarea name="message" className="form-control" id="message" cols="30" rows="8"
-                                              placeholder="Message"></textarea>
+                                              placeholder=""></textarea>
                                 </div>
                             </div>
                             <div className="col-md-12">