Updates on contact page

src/assets/css/style.css

@@ -3525,6 +3525,24 @@ header.fix_style.white_header {
   resize: none;
 }
 
+/* Textarea scrollbar */
+.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar {
+  width: 12px;
+  cursor: pointer;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+  border-radius: 10px;
+  background-color: var(--light-bg);
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+  background-color: var(--body-text-purple);
+}
+
 .contact_page_section .contact_inner .contact_form form .form-group .contact_btn{
   display: flex !important;
   align-items: center;

src/component/Contact/Main.js

@@ -6,7 +6,7 @@ import Bredcrumb from "../Bredcrumb/Main";
 import BGImg from "../../assets/images/bread_crumb_bg.png";
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
 import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
-import axios from "axios";
+import SuccessImg from "../../assets/images/experts_01.png"
 
 import SiteService from "../../vendors/service/siteService";
 
@@ -100,7 +100,7 @@ const Main = ({ brdcum }) => {
           response.innerHTML = `<p> SEND MESSAGE </p>`;
 
           contact_body.innerHTML = `<div class='contact_body animate pop'>
-      <div><img /></div>
+      <div><img src=${SuccessImg} /></div>
       <p>We have received your message and will follow up promptly.</p>
       </div>`;
           setTimeout(() => {
@@ -240,12 +240,13 @@ const Main = ({ brdcum }) => {
 
                 <FormInput
                   name="phone"
-                  type="text"
+                  type="number"
                   placeholder="Phone"
                   errorMessage="It should be a valid phone number!"
                   maxLenght={15}
                   value={values.phone}
                   onChange={onChange}
+                  pattern="^[0-9]{15}$"
                 />
 
                 <div className="form-group">
@@ -254,8 +255,10 @@ const Main = ({ brdcum }) => {
                     className="form-control"
                     placeholder="Your message"
                     value={values.msg}
+                    errorMessage='words have exceeded 350 characters!'
                     onChange={onChange}
-                    maxLength={350}
+                    maxLength={300}
+                    pattern="^[A-Za-z0-9]{5, 300}$"
                   />
                 </div>
                 <div className="form-group term_check">