From 7b54670c3a15bc032bf7c5fee4a56e1236fe5f9d Mon Sep 17 00:00:00 2001
From: saikiranbolli <saikiran.b@bizgaze.in>
Date: Tue, 18 Apr 2023 20:37:05 +0530
Subject: [PATCH] form styles are changeds

---
 contact.html       | 108 +++++++++++++++-------------
 dist/Js/footer.js  |   2 +
 dist/css/main.css  |   5 +-
 dist/css/style.css |   4 +-
 partners.html      | 174 +++++++++++++++++++++++++++++----------------
 press.html         |  18 ++++-
 support.html       |  14 ++--
 7 files changed, 204 insertions(+), 121 deletions(-)

diff --git a/contact.html b/contact.html
index 605f880..7997572 100644
--- a/contact.html
+++ b/contact.html
@@ -36,6 +36,15 @@
       .error{
         color: red;
       }
+      #anwi_contact-form button{
+        border: none;
+        background-color: #0A1039;
+        text-transform: uppercase;
+        font-weight: 600;
+        padding: 9px 25px;
+        color: #fff;
+        font-size: 13px;
+      }
     </style>
 </head>
 
@@ -56,7 +65,7 @@
             </div>
         </div>
     </section>
-        <section class="contact-section py-md-5 py-3">
+        <section class="contact-section py-md-5 py-3 bg-gradient-violet">
             <div class="container pt-md-5 pt-3">
               <div class="row bg-white rounded-3 shadow mx-0">
                 <div class="col-lg-6 col-12 mb-30 bg-gradient-anwi text-white p-md-5 p-4">
@@ -87,22 +96,23 @@
                     <!-- <h3 class="contact-page-title border-0">Please fill the details so that our experts will get back to you.</h3> -->
                     <h2 class="fw-500 text-center">Tell Us your Message</h3>
                     <div class="contact-form  account-details-form">
-                      <form id="anwi_contact-form" class="single-input-item" autocomplete="off" method="POST">
-                        <div class="form-group pb-2">
-                          <label>Your Name <span class="required text-danger">*</span></label>
-                          <input type="text" name="contactname" id="user_name" class="w-100 form-control shadow-none rounded-0" required>
+                    
+                      <form id="anwi_contact-form" class="form-floating" autocomplete="off" method="POST">
+                        <div class="form-floating mb-3">
+                          <input type="text" class="form-control shadow-none"  name="contactname" id="user_name" placeholder="jhon" required>
+                          <label for="user_name">Your Name </label>
                         </div>
-                        <div class="form-group  pb-3">
-                          <label>Number <span class="required text-danger">*</span></label>
-                          <input type="number" id="user_number" class="w-100 form-control shadow-none rounded-0"  required pattern="/^-?\d+\.?\d*$/" autocomplete="off" onkeypress="if(this.value.length==10) return false;" name="contactnumber" maxlength="10">
+                        <div class="form-floating mb-3">
+                          <input type="text" class="form-control shadow-none"  name="contactnumber" id="user_number" placeholder="9887767644" required pattern="/^-?\d+\.?\d*$/" autocomplete="off" onkeypress="if(this.value.length==10) return false;" name="contactnumber" maxlength="10">
+                          <label for="user_number">Number</label>
                         </div>
-                        <div class="form-group  pb-3">
-                          <label>Your Email <span class="required text-danger">*</span></label>
-                          <input type="email" name="contactemail" id="user_email" class="w-100 form-control shadow-none rounded-0"  required>
+                        <div class="form-floating mb-3">
+                          <input type="email" class="form-control shadow-none"  name="contactname" id="user_email" placeholder="exp12@gmail.com" required>
+                          <label for="user_email">Email</label>
                         </div>
-                        <div class="form-group  pb-md-5 pb-2">
-                          <label>Your Message</label>
-                          <textarea name="contactmessage" class="pb-10 w-100 form-control shadow-none rounded-0" id="user_message" rows="4" id="contactMessage"></textarea>
+                        <div class="form-floating mb-3">
+                          <textarea name="contactmessage" style="height: 100px" class="pb-10 w-100 form-control shadow-none rounded-0" id="user_message" rows="4" cols="5" id="contactMessage"></textarea>
+                          <label for="user_message">Message</label>
                         </div>
                         <div class="form-group mb-0 text-end">
                           <button class="btn btn-lg single-btn w-lg-25" id="contact_form_submit">Submit</button>
@@ -196,41 +206,41 @@
       //    }
       // })
    
-      $("#anwi_contact-form").validate({
-                rules: {
-                    phone: {
-                        minlength: 10,
-                        maxlength: 10,
-                        number: true
-                    },
-                },
-                submitHandler: function(form ,e) {
-                    e.preventDefault();
-                    // $("#pageloader").css({"display":"block"});
-                    $.ajax({
-                        type: "POST",
-                        url: "contact.php",
-                        data: $(form).serialize(),
-                        success: function(res) {
-                          debugger;
-                            if (res == 1) {
-                                $(".pageloader").removeClass("is_open");
-                                $(".overlay_effect").removeClass("is_open");
-                                toastr.success('Success, Our Experts will get back to you!');
-                                $(form).trigger("reset");
-                                $(form).find('.form-control-placeholder').removeClass('floating-label');
-                                $(this).addClass("d-none");
-                            }else {
-                                $(".pageloader").removeClass("is_open");
-                                $(".overlay_effect").removeClass("is_open");
-                                toastr.error('Something Went Wrong,Try Again!');
-                                $("#biz-contact-form").removeClass("d-none");
-                            } 
-                        }
-                    });
-                    return false;
-                }
-            });
+      // $("#anwi_contact-form").validate({
+      //           rules: {
+      //               phone: {
+      //                   minlength: 10,
+      //                   maxlength: 10,
+      //                   number: true
+      //               },
+      //           },
+      //           submitHandler: function(form ,e) {
+      //               e.preventDefault();
+      //               // $("#pageloader").css({"display":"block"});
+      //               $.ajax({
+      //                   type: "POST",
+      //                   url: "contact.php",
+      //                   data: $(form).serialize(),
+      //                   success: function(res) {
+      //                     debugger;
+      //                       if (res == 1) {
+      //                           $(".pageloader").removeClass("is_open");
+      //                           $(".overlay_effect").removeClass("is_open");
+      //                           toastr.success('Success, Our Experts will get back to you!');
+      //                           $(form).trigger("reset");
+      //                           $(form).find('.form-control-placeholder').removeClass('floating-label');
+      //                           $(this).addClass("d-none");
+      //                       }else {
+      //                           $(".pageloader").removeClass("is_open");
+      //                           $(".overlay_effect").removeClass("is_open");
+      //                           toastr.error('Something Went Wrong,Try Again!');
+      //                           $("#biz-contact-form").removeClass("d-none");
+      //                       } 
+      //                   }
+      //               });
+      //               return false;
+      //           }
+      //       });
    </script>
 
 </body>
diff --git a/dist/Js/footer.js b/dist/Js/footer.js
index 05bddc3..e766313 100644
--- a/dist/Js/footer.js
+++ b/dist/Js/footer.js
@@ -57,6 +57,7 @@ $(document).ready(function () {
         <ul class="list-inline">
             <li><a href="./about.html" class="text-white text-decoration-none satoshi_font">About Us</a></li>
             <li><a href="./press.html" class="text-white text-decoration-none satoshi_font">Press</a></li>
+            <li><a href="./partners.html" class="text-white text-decoration-none satoshi_font">Partner</a></li>
             <li><a href="#" class="text-white text-decoration-none satoshi_font">Quality Certification</a></li>
             <li><a href="#" class="text-white text-decoration-none satoshi_font">Case Study</a></li>
             <li><a href="#" class="text-white text-decoration-none satoshi_font">Terms</a></li>
@@ -243,6 +244,7 @@ $(document).ready(function () {
                             <ul class="list-inline">
                                 <li class="fs-6"><a href="./about.html" class="text-white text-decoration-none satoshi_font">About Us</a></li>
                                 <li class="fs-6"><a href="./press.html" class="text-white text-decoration-none satoshi_font">Press</a></li>
+                                <li><a href="./partners.html" class="text-white text-decoration-none satoshi_font">Partner</a></li>
                                 <li class="fs-6"><a href="#" class="text-white text-decoration-none satoshi_font">Quality Certification</a></li>
                                 <li class="fs-6"><a href="#" class="text-white text-decoration-none satoshi_font">Case Study</a></li>
                                 <li class="fs-6"><a href="#" class="text-white text-decoration-none satoshi_font">Terms</a></li>
diff --git a/dist/css/main.css b/dist/css/main.css
index f6fba16..1d44660 100644
--- a/dist/css/main.css
+++ b/dist/css/main.css
@@ -1345,7 +1345,7 @@ html,body{
         width: 100%;
         padding: 80px 0;
         box-sizing: border-box;
-        background: #f9f9f9;
+        /* background: #f9f9f9; */
     }
 }
 @media only screen and (min-width: 1440px){
@@ -1509,6 +1509,9 @@ display: none;
     /* background: linear-gradient(112.1deg, rgb(32, 38, 57) 11.4%, rgb(63, 76, 119) 70.2%); */
     background: linear-gradient(112.1deg, rgb(63, 76, 119) -14.8% , rgb(32, 38, 57) 100.4%);
   }
+  .bg-gradient-violet{
+    background: linear-gradient(90deg, rgba(230,242,244,1) 6%, rgba(236,228,220,1) 100%);
+  }
   @media only screen and (min-width: 769px) and (max-width: 1199px) {
   span.transform_text2 {
     position: absolute;
diff --git a/dist/css/style.css b/dist/css/style.css
index d076a0f..120ccb4 100644
--- a/dist/css/style.css
+++ b/dist/css/style.css
@@ -2280,9 +2280,9 @@ textarea:focus {
 .bg-white {
   background-color: #fff;
 }
-.bg-gradient-violet{
+/* .bg-gradient-violet{
   background-image: linear-gradient( 45deg, hsl(220deg 52% 91%) 0%, hsl(229deg 48% 90%) 8%, hsl(243deg 42% 90%) 17%, hsl(260deg 39% 88%) 25%, hsl(272deg 43% 86%) 33%, hsl(285deg 44% 84%) 42%, hsl(300deg 43% 82%) 50%, hsl(300deg 43% 82%) 58%, hsl(300deg 43% 82%) 67%, hsl(300deg 43% 82%) 75%, hsl(293deg 40% 83%) 83%, hsl(286deg 36% 84%) 92%, hsl(280deg 31% 85%) 100% );
-}
+} */
 
 .bg-gray {
   background-color: #FAFAFA;
diff --git a/partners.html b/partners.html
index df78da0..e0f9513 100644
--- a/partners.html
+++ b/partners.html
@@ -31,14 +31,30 @@
     <link rel="stylesheet" href="./dist/css/fontawesome.min.css">
     <link rel="stylesheet" href="./dist/toaster/toastr.css">
 
-    <title>Contact | Anwi</title>
+    <title>Partners | Anwi</title>
     <style>
       .error{
         color: red;
       }
       .myaccount-content .account-details-form .single-input-item.partner_form label {
-        font-size: 14px;
+        font-size: 16px;
       }
+      .partner-details-form button{
+        border: none;
+        background-color: #0A1039;
+        text-transform: uppercase;
+        font-weight: 600;
+        padding: 9px 25px;
+        color: #fff;
+        font-size: 13px;
+      }
+      .form-control{
+        line-height: 2;
+      }
+      button:hover {
+        background-color: #1f2226 !important;
+        color: #fff !important;
+    }
     </style>
 </head>
 
@@ -59,8 +75,8 @@
             </div>
         </div>
     </section>
-        <section class="contact-section py-md-5 py-3">
-            <div class="container pt-md-5 pt-3">
+        <section class="contact-section py-md-5 py-3 bg-gradient-violet">
+            <div class="container py-md-5 pt-3">
               <div class="row bg-white rounded-3 shadow mx-0">
                 <div class="col-lg-5 col-12 mb-30 bg-gradient-anwi text-white p-md-5 p-4">
                   <!--  contact page side content  -->
@@ -89,81 +105,66 @@
                   <div class="contact-form-content myaccount-content p-0 border-0">
                     <!-- <h3 class="contact-page-title border-0">Please fill the details so that our experts will get back to you.</h3> -->
                     <!-- <h2 class="fw-500 text-center">Tell Us your Message</h3> -->
-                    <div class="contact-form  account-details-form">
-                      <form id="anwi_contact-form" class="single-input-item d-none" autocomplete="off" method="POST">
-                        <div class="form-group pb-2">
-                          <label>Your Name <span class="required text-danger">*</span></label>
-                          <input type="text" name="contactname" id="user_name" class="w-100 form-control shadow-none rounded-0" required>
-                        </div>
-                        <div class="form-group  pb-3">
-                          <label>Number <span class="required text-danger">*</span></label>
-                          <input type="number" id="user_number" class="w-100 form-control shadow-none rounded-0"  required pattern="/^-?\d+\.?\d*$/" autocomplete="off" onkeypress="if(this.value.length==10) return false;" name="contactnumber" maxlength="10">
-                        </div>
-                        <div class="form-group  pb-3">
-                          <label>Your Email <span class="required text-danger">*</span></label>
-                          <input type="email" name="contactemail" id="user_email" class="w-100 form-control shadow-none rounded-0"  required>
-                        </div>
-                        <div class="form-group  pb-md-5 pb-2">
-                          <label>Your Message</label>
-                          <textarea name="contactmessage" class="pb-10 w-100 form-control shadow-none rounded-0" id="user_message" rows="4" id="contactMessage"></textarea>
-                        </div>
-                        <div class="form-group mb-0 text-end">
-                          <button class="btn btn-lg single-btn w-lg-25" id="contact_form_submit">Submit</button>
-                        </div>
-                      </form>
-
-                      <form id="anwi_contact-form" class="single-input-item partner_form" autocomplete="off" method="POST">
+                    <div class="contact-form m-2 mt-md-5 partner-details-form">
+                      <form id="anwi_contact-form" class="form-floating partner_form" autocomplete="off" action="" method="post">
                         <div class="row align-items-center">
                             <div class="col-md-6 pb-md-2">
-                                <div class="form-group pb-2">
-                                    <label>Company Name <span class="required text-danger">*</span></label>
-                                    <input type="text" name="partnercompany" id="partner_company" class="w-100 form-control shadow-none rounded-0" required>
+                                <div class="form-floating form-group pb-md-3">
+                                    <input type="text" name="partnercompany" id="partner_company" Placeholder="Company Name" class="w-100 form-control shadow-none rounded-3" required>
+                                    <label for="partner_company">Compnay Name</label>
                                 </div>
                             </div>
-                            <div class="col-md-6 pb-md-2">
-                                <div class="form-group pb-2">
-                                    <label>Contact Name <span class="required text-danger">*</span></label>
-                                    <input type="text" name="partnername" id="partner_name" class="w-100 form-control shadow-none rounded-0" required>
+                            <div class="col-md-6 pb-md-3">
+                                <div class="form-floating form-group pb-2">
+                                    <input type="text" name="partnername" id="partner_name" Placeholder="Contact Name" class="w-100 form-control shadow-none rounded-3" required>
+                                    <label for="partner_name">Contact Name</label>
                                 </div>
                             </div>
-                            <div class="col-md-6 pb-md-2">
-                                <div class="form-group  pb-3">
-                                    <label>Number <span class="required text-danger">*</span></label>
-                                    <input type="number" id="partner_number" class="w-100 form-control shadow-none rounded-0"  required pattern="/^-?\d+\.?\d*$/" autocomplete="off" onkeypress="if(this.value.length==10) return false;" name="partnernumber" maxlength="10">
+                            <div class="col-md-6 pb-md-3">
+                                <div class="form-floating form-group  pb-3">
+                                    <!-- <label>Number <span class="required text-danger">*</span></label> -->
+                                    <input type="number" name="partnernumber" id="partner_number" Placeholder="Contact Number" class="w-100 form-control shadow-none rounded-3" required pattern="/^-?\d+\.?\d*$/" autocomplete="off" onkeypress="if(this.value.length==10) return false;" maxlength="10">
+                                    <label for="partner_number">Number</label>
                                 </div>
                             </div>
-                            <div class="col-md-6 pb-md-2">
-                                <div class="form-group  pb-3">
-                                    <label>Your Email <span class="required text-danger">*</span></label>
-                                    <input type="email" name="partneremail" id="partner_email" class="w-100 form-control shadow-none rounded-0"  required>
+                            <div class="col-md-6 pb-md-3">
+                                <div class="form-floating form-group  pb-3">
+                                    <!-- <label>Your Email <span class="required text-danger">*</span></label> -->
+                                    <input type="email" name="partneremail" id="partner_email" Placeholder="Email" class="w-100 form-control shadow-none rounded-3"  required>
+                                    <label for="partner_email">Email</label>
                                 </div>
                             </div>
-                            <div class="col-md-6 pb-md-2">
-                                <div class="form-group pb-2">
-                                    <label>City<span class="required text-danger">*</span></label>
-                                    <input type="text" name="partnercity" id="partner_city" class="w-100 form-control shadow-none rounded-0" required>
+                            <div class="col-md-6 pb-md-3">
+                                <div class="form-floating form-group pb-2">
+                                    <!-- <label>City<span class="required text-danger">*</span></label> -->
+                                    <input type="text" name="partnercity" id="partner_city" Placeholder="City" class="w-100 form-control shadow-none rounded-3" required>
+                                    <label for="partner_city">City</label>
                                 </div>
                             </div>
-                            <div class="col-md-6 pb-md-2">
-                                <div class="form-group pb-2">
-                                    <label>State</label>
-                                    <input type="text" name="partnerstate" id="partner_state" class="w-100 form-control shadow-none rounded-0">
+                            <div class="col-md-6 pb-md-3">
+                                <div class="form-floating form-group pb-2">
+                                    <!-- <label>State</label> -->
+                                    <input type="text" name="partnerstate" id="partner_state" Placeholder="State" class="w-100 form-control shadow-none rounded-3">
+                                    <label for="partner_state">State</label>
                                 </div>
                             </div>
-                            <div class="col-md-6 pb-md-2">
-                                <div class="form-group pb-2">
-                                    <label>GST No:</label>
-                                    <input type="text" name="partner_gstno" id="partner_gstno" class="w-100 form-control shadow-none rounded-0">
+                            <div class="col-md-6 pb-md-4">
+                                <div class="form-floating form-group pb-2">
+                                    <!-- <label>GST No:</label> -->
+                                    <input type="text" name="partner_gstno" id="partner_gstno" Placeholder="GST No" class="w-100 form-control shadow-none rounded-3">
+                                    <label for="partner_gstno">GST No</label>
                                 </div>
                             </div>
-                            <div class="col-12">
-                                <div class="form-group pb-2">
-                                    <label>Your Message</label>
-                                    <textarea name="partnermessage" class="pb-10 w-100 form-control shadow-none rounded-0" id="partner_message" rows="4" id="contactMessage"></textarea>
+                            <div class="col-12 pb-md-4">
+                                <div class="form-floating form-group pb-2">
+                                    <!-- <label>Your Message</label> -->
+                                    <textarea name="partnermessage" style="height: 100px" class="pb-10 w-100 form-control shadow-none rounded-3" Placeholder="Description" id="partner_message" rows="4" id="contactMessage"></textarea>
+                                    <label for="partner_message">Description</label>
                                   </div>
                             </div>
                             <div class="form-group mb-0 mt-3 text-end">
-                                <button class="btn btn-lg single-btn w-lg-25" id="contact_form_submit">Submit</button>
+                                <button class="btn btn-lg single-btn w-lg-25" >Submit</button>
+                                <!-- <p class="mb-0 btn btn-lg single-btn w-lg-25" id="partner_form_submit">Submit</p> -->
                               </div>
                         </div>
                       </form>
@@ -207,6 +208,59 @@
     <script src="./dist/js/main.js"></script>
 
     <script>
+
+// let contactname, contactemail,contactnumber;
+  
+//     $("#partner_form_submit").click(function(){
+//         contactname = $("#partner_name").val();
+//         contactemail = $("#partner_email").val();
+//         contactnumber = $("#partner_number").val();
+//     if(contactname == "" || contactemail == "" || contactnumber == ""){
+//         alert("required feilds are empty!");
+//     }else{
+//       let url=`https://beta.bizgaze.app/apis/v4/bizgaze/integrations/leads/create`;
+//       let stat = `a88a8849004f425ab928e79bd9d7aa66`;
+//         getDataStatAxios(url,stat);
+//     } 
+// });
+
+// async function getDataStatAxios(url,stat) {
+//     const config = {
+//         url,
+//         method: 'post',
+//         headers: {
+//             'Authorization': `stat ${stat}`,
+//         },
+//         dataraw :{
+//             CompanyName: "",
+//             ContactName: abc,
+//             email: ab22c@gmail.com,
+//             Phone: 1232256788
+// }
+//     };
+
+//     let response = await axios(config);
+//     let item_array = JSON.parse(response.data.result);
+// }
+// async function CheckDetails() {
+//     //   $('.mobile-number').html(contactnumber.substr(0, 4))
+//       // lead genarating
+//       const CREATE_LEAD_API =
+//         "https://beta.bizgaze.app/apis/v4/bizgaze/integrations/leads/create";
+//       const AUTH_SESSION = "stat a88a8849004f425ab928e79bd9d7aa66";
+//       const { data } = await postMethod(
+//         CREATE_LEAD_API,
+//         AUTH_SESSION,
+//         JSON.stringify({
+//           CompanyName: "",
+//           ContactName: contactname,
+//           email: contactemail,
+//           Phone: contactnumber,
+//         })
+//       );
+//       console.log(data.errors);
+//     };
+
       // $("#contact_form_submit").click(function(){
       //   debugger
       //    let User_name = $("#user_name").val();
diff --git a/press.html b/press.html
index 3cae8b0..8555932 100644
--- a/press.html
+++ b/press.html
@@ -262,7 +262,7 @@
         </div>
       </div>
     </section>
-    <section id="ora_products" class="py-md-5">
+    <section id="ora_products1" class="py-md-5 bg-gradient-violet">
       <h2 class="text-center py-3 py-md-4">Our Releases Notes</h2>
       <div class="container image-wrapper py-md-4 border-0 rounded-4">
         <div class="lightbox">
@@ -286,6 +286,22 @@
         <!--END: Modal -->
       </div>
     </section>
+    <section>
+      <div class="container py-md-5 p-5">
+        <h2 class="fw-600 mb-md-4 text-center">For media related queries contact</h2>
+        <div class="row">
+          <div class="py-md-1 py-3 col-6 col-md-6 text-center">
+            <i class="fa-solid fa-user"></i>
+            <span class="fs-9 ps-2">Mr. S. Sameer</span>
+          </div>
+          <div  class="py-md-1 py-3 col-6 col-md-6 text-center">
+            <i class="fa-solid fa-phone"></i>
+            <span class="fs-9 ps-2"><a href="tel:9885583057" class="">+91 9885583057</a></span> 
+          </div>
+        </div>
+       
+      </div>
+    </section>
   </main>
   <!-- footer -->
   <div id="footer-head" class=""></div>
diff --git a/support.html b/support.html
index fc42363..ed1cfce 100644
--- a/support.html
+++ b/support.html
@@ -43,7 +43,7 @@
             <div id="home-banner" class="pt-md-5">
                 <div class="banner-home--wrapper pt-md-5">
                     <div class="banner-home--banner">
-                        <img src="" alt="homepage-kv-pc" class="img d-none">
+                        <img src="https://oasis.opstatics.com/content/dam/support/homepage/kv-pc.png" alt="homepage-kv-pc" class="img d-none">
                         <img src="./dist/assets/imgs/allin_imgs/support_bg.png" alt="homepage-kv-pc" class="img d-none">
                     </div>
                     <div class="banner-home--wrapper_upper py-md-5 py-5 text-white">
@@ -74,7 +74,7 @@
                 </div>
             </div>
         </section>
-        <section>
+        <section class="bg-gradient-violet">
             <div id="home-help">
                 <div class="home-help--wrapper">
                     <div class="home-help--wrapper_content">
@@ -84,7 +84,7 @@
                         <div class="home-help--wrapper_content-items">
                             <a href="https://anwisystems.com/w" alt="" class="grow-1 text-dark">
                                 <div class="grow-width">
-                                    <img src="./dist/assets/imgs/support/warranty-icon.png" alt="" class="icon">
+                                  <svg class="svg-inline--fa fa-shield-halved fs-60" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shield-halved" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z"></path></svg>
                                     <div class="content">
                                         <p class="item_title">Warranty</p>
                                         <p class="item_dec">Enable Warranty / Check Warranty.</p>
@@ -92,9 +92,7 @@
                                 </div>
                             </a>
                             <a href="#" alt="" class="grow-1 text-dark">
-                                <div class="grow-width"><img
-                                        src="./dist/assets/imgs/support/laptop-service.jpg"
-                                        alt="" class="icon">
+                                <div class="grow-width fs-60"><svg class="svg-inline--fa fa-laptop" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="laptop" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M128 32C92.7 32 64 60.7 64 96V352h64V96H512V352h64V96c0-35.3-28.7-64-64-64H128zM19.2 384C8.6 384 0 392.6 0 403.2C0 445.6 34.4 480 76.8 480H563.2c42.4 0 76.8-34.4 76.8-76.8c0-10.6-8.6-19.2-19.2-19.2H19.2z"></path></svg>
                                     <div class="content">
                                         <p class="item_title">Laptop Service</p>
                                         <p class="item_dec">Get your Installation and Repair started from here.</p>
@@ -103,7 +101,7 @@
                             </a>
                             <a href="#" alt="" class="grow-1 text-dark">
                                 <div class="grow-width">
-                                    <img src="./dist/assets/imgs/support/winfo-icon-system-management.png" alt="" class="icon">
+                                  <svg class="svg-inline--fa fa-desktop fs-60" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="desktop" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V288H64V64H512z"></path></svg>
                                     <div class="content">
                                         <p class="item_title">All in One Service</p>
                                         <p class="item_dec">Get your repair started here.</p>
@@ -112,7 +110,7 @@
                             </a>
                             <a href="#" alt=""class="grow-1 text-dark">
                                 <div class="grow-width">
-                                    <img src="./dist/assets/imgs/support/accessories.png" alt="" class="icon">
+                                  <svg class="svg-inline--fa fa-screwdriver-wrench fs-60" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="screwdriver-wrench" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4h54.1l109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109V104c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7H352c-8.8 0-16-7.2-16-16V102.6c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"></path></svg>
                                     <div class="content">
                                         <p class="item_title">Accessories</p>
                                         <p class="item_dec">Get repair service in Anwi Service Center.</p>