[UPDT] Index Update

fleet_rental/static/description/index.html

@@ -1,229 +1,765 @@
-<section class="oe_container">
-    <div class="oe_row oe_spaced">
-        <h2 class="oe_slogan">Fleet/Vehicle Rental Management</h2>
-        <h3 class="oe_slogan">This module helps with an opportunity to give the vehicles like car,van,bike,jeep etc.. for Rent.</h3>
-        <h4 class="oe_slogan"><a href="https://www.cybrosys.com">Cybrosys Technologies</a> </h4>
-    </div>
-    <div class="oe_row oe_spaced" style="padding-left:65px;">
-        <h4>Features:</h4>
+<div class="container" style="padding: 1rem !important; margin-bottom: 1.5rem !important;">
+    <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between"
+            style="border-bottom: 1px solid #d5d5d5;">
+            <div class="my-3">
+                <img src="./images/logo.png" style="width: auto !important; height: 40px !important;">
+            </div>
+            <div class="my-3 d-flex align-items-center">
+                <div
+                    style="background-color: #7C7BAD !important; color: #fff !important; font-weight: 600 !important; padding: 5px 15px 8px !important; margin: 0 5px !important;">
+                    <i class="fa fa-check mr-1"></i>Community
+                </div>
+                <div
+                    style="background-color: #875A7B !important; color: #fff !important; font-weight: 600 !important; padding: 5px 15px 8px !important; margin: 0 5px !important;">
+                    <i class="fa fa-check mr-1"></i>Enterprise
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>
+
+<div style="padding: 3.5rem 1.5rem !important; background-color: #ffffff !important;">
+    <div class="container">
+        <!-- HERO -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center"
+                style="text-align: center; padding: 1rem !important;">
+                <h1 class="text-center" style="color: #212121 !important; font-size: 3.5rem !important;"><span
+                        style="font-weight: 700 !important;">Fleet Rental Management</span></h1>
+                <p class="text-center"
+                    style="color: #212529 !important; font-size: 1.5rem !important; letter-spacing: 1px !important;">
+                    With this module you can give vehicles like car, van, bike, jeep etc. for rent.
+                </p>
+                <img src="./images/hero.png" class="img-responsive">
+            </div>
+        </div>
+        <!-- END OF HERO -->
+
+        <!-- OVERVIEW -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center"
+                style="text-align: center; padding: 2.5rem 1rem !important;">
+                <h2 style="color: #212529 !important;">Overview</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                <p class="text-center" style="color: #212529 !important; font-size: 1.5rem !important;">
+                    This module is an application for Vehicle Rental System which helps in managing the rental of
+                    vehicles like car,van,bike, jeep etc. It manages fleet/vehicle property by extending the basic
+                    fleet module of Odoo. Currently fleet module does not have any connection with accounting
+                    module. But in this module, we integrate the module with accounting also.
+            </div>
+        </div>
+        <!-- END OF OVERVIEW -->
+
+
+        <!-- KEY FEATURES -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center" style="padding: 2.5rem 1rem !important;">
+                <h2 class="text-center" style="color: #212529 !important;">Key Features</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                <div class="row">
+
+
+                    <div class="col-lg-12">
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Multiple Plans for Rental Contract(Days/Weeks/Months/Years).
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Integrated with Accounting Module.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Automatically Create Recurring Invoices.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Sending email for confirmation, first payment and recurrent invoices.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Check List Facility.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Separate Tree view for Checklist.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Damage Checking Facility.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Billing Facility for Damages/Check Lists.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Contract Payment Validations.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Detailed Fleet Rental Analysis Report.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Access Rights From Multiple Level.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Flexible for further customization.
+                            </p>
+                        </div>
+
+
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- END OF KEY FEATURES -->
+
+        <!-- SCREENSHOTS -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center" style="padding: 2.5rem 1rem !important;">
+                <h2 style="text-align: center;  color: #212529 !important;">Screenshots</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+
+                <!-- img -->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            01</h3>
+                    </div>
                     <div>
-            <span style="color:green;"> &#9745; </span> Multiple Plans for Rental Contract(Days/Weeks/Months/Years).<br/>
-            <span style="color:green;"> &#9745; </span> Integrated with Accounting Module.<br/>
-            <span style="color:green;"> &#9745; </span> Automatically Create Recurring Invoices.<br/>
-            <span style="color:green;"> &#9745; </span> Sending email for confirmation, first payment and recurrent invoices.<br/>
-            <span style="color:green;"> &#9745; </span> Check List Facility.<br/>
-            <span style="color:green;"> &#9745; </span> Separate Tree view for Checklist.<br/>
-            <span style="color:green;"> &#9745; </span> Damage Checking Facility.<br/>
-            <span style="color:green;"> &#9745; </span> Billing Facility for Damages/Check Lists.<br/>
-            <span style="color:green;"> &#9745; </span> Contract Payment Validations.<br/>
-            <span style="color:green;"> &#9745; </span> Detailed Fleet Rental Analysis Report.<br/>
-            <span style="color:green;"> &#9745; </span> Access Rights From Multiple Level.<br/>
-            <span style="color:green;"> &#9745; </span> Flexible for further customization.<br/>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Fleet Rental -> Rental Management
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            When you install the module, an extra menu named Rental Management is created under the
+                            Fleet Menu. Also "Fleet" menu is replaced as "Fleet Rental". Here you can see different
+                            color codes according to each state. This helps you in finding out contracts easily.
+                        </p>
+
                     </div>
                 </div>
-</section>
+                <img src="./images/screenshot-1.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <!-- endo of img -->
 
-<section class="oe_container oe_dark">
-    <div class="oe_row oe_spaced">
-        <div class="oe_picture">
-            <h3 class="oe_slogan">Overview</h3>
-            <p class="oe_mt32" style="text-align: center;">
-               This module is an application for Vehicle Rental System which helps in managing the rental of vehicles like car,van,bike, jeep etc...
-                It manages fleet/vehicle property by extending the basic fleet module of Odoo.
-                Currently fleet module does not have any connection with accounting module. But in this module,
-                we integrate the module with accounting also.
+                <!-- img -->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            02</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Fleet Rental -> Rental Management -> Rental Contract
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            This is the Rental Contract form. You can see the Recurring lines created according to
+                            the
+                            Recurring cost.<br />And also you can see all the invoices related to this contract from
+                            the smart
+                            button "Invoices".
                         </p>
                     </div>
                 </div>
-</section>
+                <img src="./images/screenshot-2.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <!-- endo of img -->
+
 
-<section class="oe_container">
-    <div class="oe_row oe_spaced">
-        <h3 class="oe_slogan">Fleet Rental Management</h3>
-        <div style="text-align: center">
-            <p>
-                <h4>Fleet Rental -> Rental Management</h4>
-            <p>
+                <!-- img -->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            03</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Checklist Tab in Rental Contract Form
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            Here you can add the list of tools given with the vehicle. When the vehicle is returned
+                            back, the checklist can be validated and helps you to identify the tools that are not
+                            returned. The price of unreturned tools will be added to the missing tool cost. The
+                            renter have to pay that amount and you can also add damage cost if any. Check the
+                            damages by using the images of vehicle uploaded before the contract.
+                        </p>
+                    </div>
                 </div>
-        <div style="text-align: center">
-            <a href="https://www.cybrosys.com">
-                <div class="oe_demo oe_picture oe_screenshot">
-                    <img style="border:10px solid white;height: 400px;" src="fleet_rental.png">
+                <img src="./images/screenshot-3.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <!-- endo of img -->
+
+                <!-- img -->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            04</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Checklist Easy Access
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+
+                            You can also create invoice against the checklist from here. The checklists are those
+                            which are in the checking state, that means the ones ready for checking the operation.
+                            If there is any damage or any missing tool, then you can charge all that from customer.
+                        </p>
+                    </div>
+                </div>
+                <img src="./images/screenshot-4.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <img src="./images/screenshot-5.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <!-- endo of img -->
+
+                <!-- img -->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            05</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Email Notifications
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            The system will send email notification to notify the confirmation of contract.
+                            <br />
+                            <strong>Note: </strong>You should configure outgoing and incoming e-mail settings from
+                            your odoo for email service.
+                        </p>
+                    </div>
+                </div>
+                <img src="./images/screenshot-6.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <p style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                    The system will notify the first payment through email.</p>
+
+                <img src="./images/screenshot-7.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+
+                <p style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                    The system will remind all recurrent invoices through email.</p>
+
+                <img src="./images/screenshot-8.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <!-- endo of img -->
+
+
+                <!-- img -->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            06</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Contract Payment Validations
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            Here you can see you have 1 invoice and this contract is in 'Invoice' state. So you can
+                            set this contract to done only if all the invoices are in 'paid' state. Otherwise it
+                            will raise a warning as follow.
+
+                        </p>
+                    </div>
+                </div>
+                <img src="./images/screenshot-9.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <img src="./images/screenshot-10.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <!-- endo of img -->
+
+                <!-- img -->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            07</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Fleet Rental Analysis Report
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            You can also analyse all your fleet rentals from Fleet Rental -> Reports -> Fleet Rental
+                            Analysis.
+
+                        </p>
+                    </div>
+                </div>
+                <img src="./images/screenshot-11.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <!-- endo of img -->
+
+            </div>
+        </div>
+        <!-- END OF SCREENSHOTS -->
+
+
+        <!-- SUGGESTED PRODUCTS -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center"
+                style="text-align: center; padding: 2.5rem 1rem !important;">
+                <h2 style="color: #212529 !important;">Suggested Products</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+
+                <div id="demo1" class="row carousel slide" data-ride="carousel">
+                    <!-- The slideshow -->
+                    <div class="carousel-inner">
+                        <div class="carousel-item active" style="min-height:0px">
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/customer_followup_community/"
+                                    target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/follow_image.png">
                                     </div>
                                 </a>
-            <span style="text-align: center;padding-left:65px;">&#9755; When you install the module, an extra menu named Rental Management is created
-                under the Fleet Menu. Also "Fleet" menu is replaced as "Fleet Rental". Here you can see different color
-                codes according to each state. This helps you in finding out contracts easily.</span>
                             </div>
-        <br>
-         <div class="" style="text-align: center">
-             <div class="" style="text-align: center">
-                <p>
-                    <h4>Fleet Rental -> Rental Management -> Rental Contract</h4>
-                <p>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/dashboard_pos/" target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/pos_image.png">
                                     </div>
-            <div class="oe_demo oe_picture oe_screenshot">
-                <img style="border:10px solid white;" src="rental_contract.png">
+                                </a>
                             </div>
-             <div style="padding-left:65px;">
-                 <span>&#9755; This is the Rental Contract form. You can see the Recurring lines created according to
-                     the Recurring cost. And also you can see all the invoices related to this contract from the smart
-                     button "Invoices".</span>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/product_approval_management/"
+                                    target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/approval_image.png">
                                     </div>
+                                </a>
                             </div>
                         </div>
-</section>
+                        <div class="carousel-item" style="min-height:0px">
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/multiple_reference_per_product/"
+                                    target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/mulitple-ref_image.png">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/shopify_odoo_connector/"
+                                    target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/shopify_image.png">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/pos_order_types/" target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/pos_order_image.png">
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Left and right controls -->
+                    <a class="carousel-control-prev" href="#demo1" data-slide="prev"
+                        style="left:-25px;width: 35px;color: #000;"> <span class="carousel-control-prev-icon"><i
+                                class="fa fa-chevron-left" style="font-size:24px"></i></span> </a> <a
+                        class="carousel-control-next" href="#demo1" data-slide="next"
+                        style="right:-25px;width: 35px;color: #000;">
+                        <span class="carousel-control-next-icon"><i class="fa fa-chevron-right"
+                                style="font-size:24px"></i></span>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <!-- END OF SUGGESTED PRODUCTS -->
 
-<section class="oe_container oe_dark">
-    <div class="oe_row oe_spaced">
-        <h3 class="oe_slogan">Checklist</h3>
-        <div class="" style="text-align: center">
-            <div class="oe_demo oe_picture oe_screenshot">
-                <img style="border:10px solid white;height: 400px;" src="rental_contract_checklist.png">
+        <!-- OUR SERVICES -->
+        <section class="container" style="margin-top: 6rem !important;">
+            <div class="row">
+                <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                    <h2 style="color: #212529 !important;">Our Services</h2>
+                    <hr
+                        style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
                 </div>
-            <span>&#9755; Checklist Tab in Rental Contract Form.</span>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
                     </div>
-        <br>
-         <div class="" style="text-align: center">
-             <div class="" style="text-align: center;padding-left:65px;">
-                <p>
-                   Here you can add the list of tools given with the vehicle.
-                    When the vehicle is returned back, the checklist can be validated and helps you to identify the
-                    tools that are not returned. The price of unreturned tools will be added to the missing tool cost.
-                    The renter have to pay that amount and you can also add damage cost if any. Check the damages by
-                    using the images of vehicle uploaded before the contract.
-                <p>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Customization</h6>
                 </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
                     </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Implementation</h6>
                 </div>
-</section>
 
-<section class="oe_container">
-    <div class="oe_row oe_spaced">
-       <h3 class="oe_slogan">Checklist Easy Access</h3>
-        <div style="text-align: center">
-            <div class="oe_demo oe_picture oe_screenshot">
-                <img style="border:10px solid white;" src="checklist_tree.png">
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
                     </div>
-            <span style="text-align: center">&#9755; No need to open all rental contract to see the checklist.</span>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Support</h6>
                 </div>
-         <div class="" style="text-align: center">
-            <div class="oe_demo oe_picture oe_screenshot">
-                <img style="border:10px solid white;" src="checklist.png">
+
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
                     </div>
-             <div style="padding-left:65px;">
-                 <span>
-                 You can also create invoice against the checklist from here.
-                 The checklists are those which are in the checking state,
-                 that means the ones ready for checking the operation.
-                 If there is any damage or any missing tool, then you can charge all that from customer.</span>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Hire
+                        Odoo
+                        Developer</h6>
                 </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
                     </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Integration</h6>
                 </div>
-</section>
 
-<section class="oe_container oe_dark">
-    <div class="oe_row oe_spaced">
-       <h3 class="oe_slogan">Email Notifications</h3>
-        <div class="">
-            <div style="padding-left:65px;">
-                <span>
-                     &#9755;The system will send email notification to notify the confirmation of contract.<br/>
-                     &#9755;The system will notify the first payment through email.<br/>
-                     &#9755;The system will remind all recurrent invoices through email.<br/>
-                    <I>Note:- You should configure outgoing and incoming e-mail settings from your odoo for email service.</I>
-                </span>
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
                     </div>
-            <div class="oe_span12">
-                 <div class="oe_demo oe_picture oe_screenshot">
-                    <img style="border:10px solid white;height:400px;" src="email3.png">
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Migration</h6>
                 </div>
+
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
                     </div>
-            <div class="oe_span12">
-                 <div class="oe_demo oe_picture oe_screenshot">
-                    <img style="border:10px solid white;height:400px;" src="email2.png">
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Consultancy</h6>
                 </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
                     </div>
-            <div class="oe_span12">
-                 <div class="oe_demo oe_picture oe_screenshot">
-                    <img style="border:10px solid white;height:400px;" src="email1.png">
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Implementation</h6>
                 </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
                     </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Licensing Consultancy</h6>
                 </div>
             </div>
         </section>
+        <!-- END OF END OF OUR SERVICES -->
 
-<section class="oe_container">
-    <div class="oe_row oe_spaced">
-       <h3 class="oe_slogan">Contract Payment Validations</h3>
-        <div class="" style="text-align: center">
-            <div class="oe_demo oe_picture oe_screenshot">
-                <img style="border:10px solid white;height:400px;" src="rental_invoice.png">
+        <!-- OUR INDUSTRIES -->
+        <section class="container" style="margin-top: 6rem !important;">
+            <div class="row">
+                <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                    <h2 style="color: #212529 !important;">Our Industries</h2>
+                    <hr
+                        style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
                 </div>
-            <div style="padding-left:65px;">
-                <span>&#9755;
-                 Here you can see you have 1 invoice and this contract is in 'Invoice' state.
-                 So you can set this contract to done only if all the invoices are in 'paid' state.
-                 Otherwise it will raise a warning as follow.
-            </span>
 
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/trading-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Trading
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Easily procure
+                            and
+                            sell your products</p>
                     </div>
-            <div class="oe_demo oe_picture oe_screenshot">
-                <img style="border:10px solid white;height:400px;" src="rental_warning.png">
                 </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            POS
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Easy
+                            configuration
+                            and convivial experience</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/education-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Education
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            A platform for
+                            educational management</p>
                     </div>
                 </div>
-</section>
 
-<section class="oe_container oe_dark">
-    <div class="oe_row oe_spaced">
-       <h3 class="oe_slogan">Fleet Rental Analysis Report</h3>
-        <div class="" style="text-align: center">
-            <div class="oe_demo oe_picture oe_screenshot">
-                <img style="border:10px solid white;height:400px;" src="rental_report.png">
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Manufacturing
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Plan, track and
+                            schedule your operations</p>
+                    </div>
                 </div>
-             <span>&#9755;
-                 You can also analyse all your fleet rentals from Fleet Rental -> Reports -> Fleet Rental Analysis.
-            </span>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            E-commerce &amp; Website
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Mobile
+                            friendly,
+                            awe-inspiring product pages</p>
                     </div>
                 </div>
-</section>
 
-<section class="oe_container">
-    <div class="oe_row oe_spaced">
-       <h3 class="oe_slogan">Access Rights</h3>
-        <div class="" style="padding-left:65px;">
-            <span>&#9755;Fleet Manager :- Fleet manager has the complete access across the fleet rental management <br/></span>
-            <span>&#9755;Fleet Rental User :- Fleet rental user can read, write and create the records.</span>
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/service-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Service Management
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Keep track of
+                            services and invoice</p>
                     </div>
                 </div>
-</section>
 
-<section class="oe_container oe_dark">
-    <h2 class="oe_slogan" style="margin-top:20px;" >Need Any Help?</h2>
-    <div class="oe_slogan" style="margin-top:10px !important;">
-        <div>
-            <a  class="btn btn-primary btn-lg mt8"
-            style="color: #FFFFFF !important;border-radius: 0;" href="https://www.cybrosys.com"><i
-            class="fa fa-envelope"></i> Email </a> <a
-            class="btn btn-primary btn-lg mt8" style="color: #FFFFFF !important;border-radius: 0;"
-            href="https://www.cybrosys.com/contact/"><i
-            class="fa fa-phone"></i> Contact Us </a> <a
-            class="btn btn-primary btn-lg mt8" style="color: #FFFFFF !important;border-radius: 0;"
-            href="https://www.cybrosys.com/odoo-customization-and-installation/"><i
-            class="fa fa-check-square"></i> Request Customization </a>
-        </div>
-        <br>
-        <img src="cybro_logo.png" style="width: 190px; margin-bottom: 20px;" class="center-block">
-        <div>
-          <a href="https://twitter.com/cybrosys" target="_blank"><i class="fa fa-2x fa-twitter" style="color:white;background: #00a0d1;width:35px;"></i></a></td>
-          <a href="https://www.linkedin.com/company/cybrosys-technologies-pvt-ltd" target="_blank"><i class="fa fa-2x fa-linkedin" style="color:white;background: #31a3d6;width:35px;padding-left: 3px;"></i></a></td>
-          <a href="https://www.facebook.com/cybrosystechnologies" target="_blank"><i class="fa fa-2x fa-facebook" style="color:white;background: #3b5998;width:35px;padding-left: 8px;"></i></a></td>
-          <a href="https://plus.google.com/106641282743045431892/about" target="_blank"><i class="fa fa-2x fa-google-plus" style="color:white;background: #c53c2c;width:35px;padding-left: 3px;"></i></a></td>
-          <a href="https://in.pinterest.com/cybrosys" target="_blank"><i class="fa fa-2x fa-pinterest" style="color:white;background: #ac0f18;width:35px;padding-left: 3px;"></i></a></td>
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Restaurant
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Run your bar or
+                            restaurant methodically</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Hotel Management
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            An
+                            all-inclusive
+                            hotel management application</p>
                     </div>
                 </div>
+
+            </div>
         </section>
 
+        <!-- END OF END OF OUR INDUSTRIES -->
+
+        <!-- FOOTER -->
+        <!-- Footer Section -->
+        <section class="container" style="margin: 5rem auto 2rem;">
+            <div class="row" style="max-width:1540px;">
+                <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                    <h2 style="color: #212529 !important;">Need Help?</h2>
+                    <hr
+                        style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                </div>
+            </div>
+
+            <!-- Contact Cards -->
+            <div class="row d-flex justify-content-center align-items-center"
+                style="max-width:1540px; margin: 0 auto 2rem auto;">
 
+                <div class="col-lg-12" style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
+
+                    <div class="row mt-4">
+                        <div class="col-lg-6">
+                            <a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
+                                style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+                                    class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
+                        </div>
+                        <div class="col-lg-6">
+                            <a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
+                                class="btn btn-block mb-2 deep_hover"
+                                style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;"><i
+                                    class="fa fa-whatsapp mr-2"></i>WhatsApp</a>
+                        </div>
+                    </div>
+                </div>
 
+            </div>
+            <!-- End of Contact Cards -->
+        </section>
+        <!-- Footer -->
+        <section class="oe_container" style="padding: 2rem 3rem 1rem;">
+            <div class="row" style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+                <!-- Logo -->
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin-top: 3rem;">
+                    <img src="https://www.cybrosys.com/images/logo.png" width="200px" height="auto" />
+                </div>
+                <!-- End of Logo -->
+                <div class="col-lg-12">
+                    <hr
+                        style="margin-top: 3rem;background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
+                    <!-- End of Footer Section -->
+                </div>
+            </div>
+        </section>
+        <!-- END OF FOOTER -->
+
+
+    </div>
+</div>

mrp_work_order_print/static/description/index.html

@@ -1,291 +1,528 @@
-<div class="row" style="margin: 0;position: relative;color: #000;background-position: center;background: #ffffff;border-bottom: 1px solid #e4e4e4;text-align: center; margin: auto; display: flex;justify-content: center;">  <a  href="https://www.cybrosys.com/" target="_blank"><img src="images/cybrosys.png" style=" width: 293px; padding: 1rem 0rem; margin: auto" alt="cybrosys-logo"></a> </div>
-<div class="row" style="margin:75px 0;position: relative;color: #000;background-position: center;background: #ffffff;border-bottom: 1px solid #e4e4e4; padding-bottom: 30px;">
-   <div class="col-md-7 col-sm-12 col-xs-12" style="padding: 0px">
-      <div style=" margin: 0 0 0px;padding: 20px 0 10;font-size: 23px;line-height: 35px;font-weight: 400;color: #000;border-top: 1px solid rgba(255,255,255,0.1);border-bottom: 1px solid rgba(255,255,255,0.11);text-align: left;">
-         <h1 style="font-size: 39px;font-weight: 600;margin: 0px !important;"> Print Work Order Details </h1>
-         <h3 style="font-size: 21px;margin-top: 8px;position: relative;">Generate PDF Report of Work Order </h3>
+<div class="container" style="padding: 1rem !important; margin-bottom: 1.5rem !important;">
+    <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between"
+            style="border-bottom: 1px solid #d5d5d5;">
+            <div class="my-3">
+                <img src="./images/logo.png" style="width: auto !important; height: 40px !important;">
+            </div>
+            <div class="my-3 d-flex align-items-center">
+                <div
+                    style="background-color: #7C7BAD !important; color: #fff !important; font-weight: 600 !important; padding: 5px 15px 8px !important; margin: 0 5px !important;">
+                    <i class="fa fa-check mr-1"></i>Community
+                </div>
+                <div
+                    style="background-color: #875A7B !important; color: #fff !important; font-weight: 600 !important; padding: 5px 15px 8px !important; margin: 0 5px !important;">
+                    <i class="fa fa-check mr-1"></i>Enterprise
+                </div>
+
+            </div>
         </div>
-      <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
-      <ul style=" padding: 0 1px; list-style: none; ">
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Generate PDF Report of Work Order  </li>
-      </ul>
     </div>
-	<div class="col-md-5 col-sm-12 col-xs-12"><img src="images/MO.png" class="img-responsive" alt=""></div>
 </div>
 
-<div>
-   <section class="oe_container" style="padding: 1rem 0rem 1rem; background-color: #ffffff !important;">
-      <div class="row py-4 px-3">
-         <div class="w-100" style="padding-top:30px;padding-bottom:45px;border-radius: 10px;">
-            <ul role="tablist" class="nav nav-pills justify-content-center" data-tabs="tabs" id="pills-tab" style="border: none;background: unset;">
-               <li class="nav-item mr-1 mb-3" style="font-size: 1.05rem;font-weight: 400;transition: all .15s ease;color: #d31c22;background-color: #d31c22;box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);border: 0;font-family: 'Open Sans',sans-serif;width: 140px;border-radius: 0.30rem;"> <a id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true" class="nav-link active show" style="color: #000000;line-height: 33px;border: 0;border-radius: .25rem;font-weight: 400;text-align: center;
-                  color: #fff;">Overview </a> </li>
-               <li class="nav-item mr-1 mb-3" style="font-size: 1.05rem;font-weight: 400;transition: all .15s ease;color: #d31c22;background-color: #d31c22;box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);border: 0;font-family: 'Open Sans',sans-serif;width: 140px;border-radius: 0.30rem;"> <a id="pills-home-tab" data-toggle="pill" href="#pills-home1" role="tab" aria-controls="pills-home" aria-selected="true" class="nav-link " style="color: #000000;line-height: 33px;border: 0;border-radius: .25rem;font-weight: 400; text-align: center;
-                  color: #fff;" >Features </a> </li>
-               <li class="nav-item mr-1 mb-3" style="font-size: 1.05rem;font-weight: 400;transition: all .15s ease;color: #ffffff;background-color: #d31c22;box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);border: 0;font-family: 'Open Sans',sans-serif;width: 140px;border-radius: 0.30rem;"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false" style="color: #000000;line-height: 33px;border: 0;border-radius: .25rem;font-weight: 400; text-align: center;
-                  color: #fff;">Screenshots </a> </li>
-              
-            </ul>
-            <div class="tab-content" id="pills-tabContent"
-               style="padding-top: 30px; padding-bottom: 30px; padding: 30px;">
-               <div class="px-3 pt-1 tab-pane fade active show" id="pills-home" role="tabpanel" aria-labelledby="
-                  pills-home-tab">
-                  <!-- Overview-->
-                  <h2 style="font-weight: 600;text-align: center;width: 100%;">Overview</h2>
-                  <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
-                  <h3 class="oe_slogan" style="text-align: center;font-size: 19px;width: 100%;margin: 0;margin-top: 14px;color: #000 !important;opacity: 1 !important;line-height: 31px;font-weight: 400;letter-spacing: .5px;margin-bottom: 21px;">
-                   Generate a PDF report with all necessary details of a Work Order. It can be used for the internal purposes of the plant/work center  </h3>  
-               </div>
-               <div class="px-3 pt-1 tab-pane fade " id="pills-home1" role="tabpanel" aria-labelledby="
-                  pills-home-tab">
-                  <!-- feature tab-->
-                  <h2 style="font-weight: 600;text-align: center;width: 100%;">Print Work Order Details</h2>
-                  <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
-                  <ul>
-                     <p class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Generate PDF Report of Work Order
+<div style="padding: 3.5rem 1.5rem !important; background-color: #ffffff !important;">
+    <div class="container">
+        <!-- HERO -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center"
+                style="text-align: center; padding: 1rem !important;">
+                <h1 class="text-center" style="color: #212121 !important; font-size: 3.5rem !important;"><span
+                        style="font-weight: 700 !important;">Print Work Order Details</span></h1>
+                <p class="text-center"
+                    style="color: #212529 !important; font-size: 1.5rem !important; letter-spacing: 1px !important;">
+                    Generate PDF Report of Work Order
                 </p>
-                  </ul>
-               </div>
-               <!-- Screenshot tab-->
-               <div class="px-3 tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" >
-                  <div class="tab-pane">
-                     <h2 style="font-weight: 600;text-align: center;width: 100%;">Screenshots</h2>
-                     <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
-                     <div>
-                        <section class="oe_container">
-                           <div id="demo" class="row carousel slide  mb32" data-ride="carousel">
-                              <div class="carousel-inner">
-                                 <div class="carousel-item active" style="min-height: 0px;">
-                                    <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Manufacturing Order with Bill Of Materials</h3>
-                                       <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/1MO.png"> </div>
+                <img src="./images/hero.png" class="img-responsive">
             </div>
         </div>
+        <!-- END OF HERO -->
 
-                                  <div class="carousel-item " style="min-height: 0px;">
-                                    <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Work Order </h3>
-                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/2MO.png"> </div>   
+        <!-- OVERVIEW -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center"
+                style="text-align: center; padding: 2.5rem 1rem !important;">
+                <h2 style="color: #212529 !important;">Overview</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                <p class="text-center" style="color: #212529 !important; font-size: 1.5rem !important;">
+                    Generate a PDF report with all necessary details of a Work Order. It can be used for the
+                    internal purposes of the plant/work center.
+                </p>
             </div>
         </div>
+        <!-- END OF OVERVIEW -->
+
 
-                                  <div class="carousel-item " style="min-height: 0px;">
-                                    <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Print Work Order Details </h3>
-                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/3MO.png"> </div>
-                                        <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Work Order PDF Report </h3>
-                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/4MO.png"> </div>   
+        <!-- KEY FEATURES -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center" style="padding: 2.5rem 1rem !important;">
+                <h2 class="text-center" style="color: #212529 !important;">Key Features</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                <div class="row">
+                    <div class="col-lg-12">
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Generate PDF Report of Work Order
+                            </p>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
 
+        <!-- END OF KEY FEATURES -->
+
+        <!-- SCREENSHOTS -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center" style="padding: 2.5rem 1rem !important;">
+                <h2 style="text-align: center;  color: #212529 !important;">Screenshots</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+
+                <!-- img -->
+                <div class="d-flex align-items-center m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            01</h3>
                     </div>
-                              <a class="carousel-control-prev" href="#demo" data-slide="prev" style="left:-25px;width: 35px;color: #000;"> <span class="carousel-control-prev-icon"><i class="fa fa-chevron-left" style="font-size:24px"></i></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next" style="right:-25px;width: 35px;color: #000;"> <span class="carousel-control-next-icon"><i class="fa fa-chevron-right" style="font-size:24px"></i></span> </a> 
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Manufacturing Order with Bill Of Materials
+                        </h3>
+
                     </div>
-                        </section>
                 </div>
+                <img src="./images/1MO.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <!-- endo of img -->
+
+                <!-- img -->
+                <div class="d-flex align-items-center m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            02</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Work Order
+                        </h3>
+
                     </div>
                 </div>
+                <img src="./images/2MO.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <!-- endo of img -->
 
-               <!-- faq tab-->
-               <div class="px-2 px-lg-4 pt-3 tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
-                  <ul class="list-unstyled">
-                  </ul>
+                <!-- img -->
+                <div class="d-flex align-items-center m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            03</h3>
                     </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Print Work Order Details
+                        </h3>
+
                     </div>
                 </div>
+                <img src="./images/3MO.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <!-- endo of img -->
+
+
             </div>
-   </section>
-   <section class="oe_container" style="padding: 2rem 3rem 1rem;">
-      <h2 style="font-weight: 600;text-align: center;margin-bottom: 25px;width: 100%;"> Suggested Products </h2>
-      <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
+        </div>
+        <!-- END OF SCREENSHOTS -->
+
+        <!-- SUGGESTED PRODUCTS -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center"
+                style="text-align: center; padding: 2.5rem 1rem !important;">
+                <h2 style="color: #212529 !important;">Suggested Products</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+
                 <div id="demo1" class="row carousel slide" data-ride="carousel">
                     <!-- The slideshow -->
                     <div class="carousel-inner">
-            <div class="carousel-item active" style="min-height: 0px;">
-               <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left;">
-                  <a href="https://apps.odoo.com/apps/modules/12.0/project_report_pdf/" target="_blank">
-                     <div style="box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);border-radius: 10px;"> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/banner_project_report_xls_pdf.png"> </div>
+                        <div class="carousel-item active" style="min-height:0px">
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/website_sale_extend/" target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/adv_ecom_image.png">
+                                    </div>
                                 </a>
                             </div>
-               <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left;">
-                  <a href="https://apps.odoo.com/apps/modules/10.0/project_status_level_report/" target="_blank">
-                     <div style="box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);border-radius: 10px;"> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/banner_project_status_report.png"> </div>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/shopify_odoo_connector/"
+                                    target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/shopify_image.png">
+                                    </div>
                                 </a>
                             </div>
-               <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left;">
-                  <a href="https://apps.odoo.com/apps/modules/10.0/project_lifeline/" target="_blank">
-                     <div style="box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);border-radius: 10px;"> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/banner_lifeline_for_task.jpeg"> </div>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/mrp_work_order_print/" target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/print_image.png">
+                                    </div>
                                 </a>
                             </div>
                         </div>
-            <div class="carousel-item" style="min-height: 0px;">
-               <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left;">
-                  <a href="https://apps.odoo.com/apps/modules/10.0/project_subtask/" target="_blank">
-                     <div style="box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);border-radius: 10px;"> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/banner_subtask.jpeg"> </div>
+                        <div class="carousel-item" style="min-height:0px">
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/access_restriction_by_ip/"
+                                    target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/ip_image.png">
+                                    </div>
                                 </a>
                             </div>
-               <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left;">
-                  <a href="https://apps.odoo.com/apps/modules/12.0/task_deadline_reminder/" target="_blank">
-                     <div style="box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);border-radius: 10px;"> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/banner_task_deadline_reminder.jpeg"> </div>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/account_payment_approval/"
+                                    target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/payment_image.png">
+                                    </div>
                                 </a>
                             </div>
-               <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left;">
-                  <a href="https://apps.odoo.com/apps/modules/10.0/project_time_spend/" target="_blank">
-                     <div style="box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);border-radius: 10px;"> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/banner_task_statusbar.jpeg"> </div>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/14.0/product_approval_management/"
+                                    target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/approve_image.png">
+                                    </div>
                                 </a>
                             </div>
                         </div>
                     </div>
                     <!-- Left and right controls -->
-         <a class="carousel-control-prev" href="#demo1" data-slide="prev" style="left:-25px;width: 35px;color: #000;"> <span class="carousel-control-prev-icon"><i class="fa fa-chevron-left" style="font-size:24px"></i></span> </a> <a class="carousel-control-next" href="#demo1" data-slide="next" style="right:-25px;width: 35px;color: #000;"> <span class="carousel-control-next-icon"><i class="fa fa-chevron-right" style="font-size:24px"></i></span> </a> 
-      </div>
-   </section>
-   <section class="row" style="padding: 2rem 3rem 1rem;margin:0px">
-      <h2 style="font-weight: 600;margin-bottom: 20px;text-align: center;width: 100%;"> Our Service </h2>
-      <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
-      <div class="row" style=" display: flex; justify-content: center; flex-wrap: wrap;width: 100%; ">
-         <!-- <div style="display:flex;padding-top: 20px;justify-content: space-between;"> -->
-         <div class="col-md-2 col-sm-6 col-xs-12">
-            <div style="width:75px;height:75px;background:#fff; border-radius:100%;margin: auto;"> <a href="https://www.cybrosys.com/odoo-customization-and-installation/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-customization.png" style="width: 100%;border-radius: 100%;"/> </a> </div>
-            <h3 class="oe_slogan" style="font-weight: 800;text-align: center;font-size: 14px;width: 100%;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;"> <a href="https://www.cybrosys.com/odoo-customization-and-installation/" target="_blank" style="list-style: none; color:#000; text-decoration: none; font-family: 'Montserrat',sans-serif;"> Odoo Customization </a> </h3>
-         </div>
-         <div class="col-md-2 col-sm-6 col-xs-12">
-            <div style="width:75px;height:75px;background:#fff; border-radius:100%;margin: auto;"> <a href="https://www.cybrosys.com/odoo-erp-implementation/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-erp-implementation.png" style="width: 100%;border-radius: 100%;"/> </a> </div>
-            <h3 class="oe_slogan" style="font-weight: 800;text-align: center;font-size: 14px;width: 100%;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;"> <a href="https://www.cybrosys.com/odoo-erp-implementation/" target="_blank" style="list-style: none; color:#000; text-decoration: none; font-family: 'Montserrat',sans-serif;"> Odoo Implementation </a> </h3>
-         </div>
-         <div class="col-md-2 col-sm-6 col-xs-12">
-            <div style="width:75px;height:75px;background:#fff; border-radius:100%;margin: auto;"> <a href="https://www.cybrosys.com/odoo-erp-integration/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-erp-integration.png" style="width: 100%;border-radius: 100%;"/> </a> </div>
-            <h3 class="oe_slogan" style="font-weight: 800;text-align: center;font-size: 14px;width: 100%;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;"> <a href="https://www.cybrosys.com/odoo-erp-integration/" target="_blank" style="list-style: none; color:#000; text-decoration: none; font-family: 'Montserrat',sans-serif;"> Odoo Integration </a> </h3>
-         </div>
-         <div class="col-md-2 col-sm-6 col-xs-12">
-            <div style="width:75px;height:75px;background:#fff; border-radius:100%;margin: auto;"> <a href="https://www.cybrosys.com/odoo-erp-support/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-erp-support.png" style="width: 100%;border-radius: 100%;"/> </a> </div>
-            <h3 class="oe_slogan" style="font-weight: 800;text-align: center;font-size: 14px;width: 100%;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;"> <a href="https://www.cybrosys.com/odoo-erp-support/" target="_blank" style="list-style: none; color:#000; text-decoration: none; font-family: 'Montserrat',sans-serif;"> Odoo Support</a> </h3>
-         </div>
-         <div class="col-md-2 col-sm-6 col-xs-12">
-            <div style="width:75px;height:75px;background:#fff; border-radius:100%;margin: auto;"> <a href="https://www.cybrosys.com/hire-odoo-developer/" target="_blank"> <img src="https://www.cybrosys.com/images/hire-odoo-developer.png" style="width: 100%;border-radius: 100%;"/> </a> </div>
-            <h3 class="oe_slogan" style="font-weight: 800;text-align: center;font-size: 14px;width: 100%;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;"> <a href="https://www.cybrosys.com/hire-odoo-developer/" target="_blank" style="list-style: none; color:#000; text-decoration: none; font-family: 'Montserrat',sans-serif;"> Hire Odoo Developers</a> </h3>
+                    <a class="carousel-control-prev" href="#demo1" data-slide="prev"
+                        style="left:-25px;width: 35px;color: #000;"> <span class="carousel-control-prev-icon"><i
+                                class="fa fa-chevron-left" style="font-size:24px"></i></span> </a> <a
+                        class="carousel-control-next" href="#demo1" data-slide="next"
+                        style="right:-25px;width: 35px;color: #000;">
+                        <span class="carousel-control-next-icon"><i class="fa fa-chevron-right"
+                                style="font-size:24px"></i></span>
                     </a>
                 </div>
-         <!-- </div> --> 
             </div>
-   </section>
-   <section class="row"  style="padding: 2rem 3rem 1rem;margin:0px">
-      <div class="row" style="margin: 0">
-         <h2 style="font-weight: 600;margin-bottom: 20px;text-align: center;width: 100%;"> Our Industries</h2>
-         <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
-         <!-- <div style="display:flex;justify-content: space-between;flex-wrap:wrap;"> -->
-         <div class="row" style="width: 100%">
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
-               <div  >
-                  <div style="width:75px;height:75px;background:#CE2D48; border-radius:100%;float: left;text-align: left;"> <a href="https://www.cybrosys.com/odoo/industries/best-trading-erp/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-index-industry-1.png" alt="Odoo Industry" style="    border-radius: 100%;width:100%;"/> </a> </div>
         </div>
-               <div style="width:70%;float:left;">
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 14px;font-weight:800;width: auto;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 4px;margin-left: 16px;"> <a href="https://www.cybrosys.com/odoo/industries/best-trading-erp/" target="_blank" style="list-style: none; color:#000; text-decoration: none;font-family: 'Montserrat',sans-serif;"> Trading </a> </h3>
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 12px;width: auto;margin: 0;margin-top:5px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 5px;margin-left: 16px; font-family: 'Montserrat',sans-serif;"> Easily procure and sell your products. </h3>
+        <!-- END OF SUGGESTED PRODUCTS -->
+
+        <!-- OUR SERVICES -->
+        <section class="container" style="margin-top: 6rem !important;">
+            <div class="row">
+                <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                    <h2 style="color: #212529 !important;">Our Services</h2>
+                    <hr
+                        style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
                 </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
                     </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
-               <div  >
-                  <div style="width:75px;height:75px;background:#CE2D48; border-radius:100%;float: left;text-align: left;"> <a href="https://www.cybrosys.com/odoo/industries/manufacturing-erp-software/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-index-industry-2.png" alt="Odoo Industry" style="    border-radius: 100%;width:100%;"/> </a> </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Customization</h6>
                 </div>
-               <div style="width:70%;float:left;" style=" margin-bottom: 10px; ">
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 14px;font-weight:800;width: auto;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 4px;margin-left: 16px;"> <a href="https://www.cybrosys.com/odoo/industries/manufacturing-erp-software/" target="_blank" style="list-style: none; color:#000; text-decoration: none;font-family: 'Montserrat',sans-serif;"> Manufacturing</a> </h3>
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 12px;width: auto;margin: 0;margin-top:5px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 5px;margin-left: 16px;font-family: 'Montserrat',sans-serif;"> Plan, track and schedule your operations. </h3>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
                     </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Implementation</h6>
                 </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
-               <div  >
-                  <div style="width:75px;height:75px;background:#CE2D48; border-radius:100%;float: left;text-align: left;"> <a href="https://www.cybrosys.com/odoo/industries/restaurant-management/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-index-industry-3.png" alt="Odoo Industry" style="    border-radius: 100%;width:100%;"/> </a> </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
                     </div>
-               <div style="width:70%;float:left;">
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 14px;font-weight:800;width: auto;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 4px;margin-left: 16px;"> <a href="https://www.cybrosys.com/odoo/industries/restaurant-management/" target="_blank" style="list-style: none; color:#000; text-decoration: none;font-family: 'Montserrat',sans-serif;"> Restaurant</a> </h3>
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 12px;width: auto;margin: 0;margin-top:5px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 5px;margin-left: 16px;font-family: 'Montserrat',sans-serif;"> Run your bar or restaurant methodical. </h3>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Support</h6>
                 </div>
+
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
                     </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
-               <div  >
-                  <div style="width:75px;height:75px;background:#CE2D48; border-radius:100%;float: left;text-align: left;"> <a href="https://www.cybrosys.com/odoo/industries/pos/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-index-industry-4.png" alt="Odoo Industry" style="    border-radius: 100%;width:100%;"/> </a> </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Hire
+                        Odoo
+                        Developer</h6>
                 </div>
-               <div style="width:70%;float:left;">
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 14px;font-weight:800;width: auto;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 4px;margin-left: 16px;"> <a href="https://www.cybrosys.com/odoo/industries/pos/" target="_blank" style="list-style: none; color:#000; text-decoration: none;font-family: 'Montserrat',sans-serif;"> POS</a> </h3>
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 12px;width: auto;margin: 0;margin-top:5px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 5px;margin-left: 16px;font-family: 'Montserrat',sans-serif;"> Easy configuring and convivial selling. </h3>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
                     </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Integration</h6>
                 </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
-               <div  >
-                  <div style="width:75px;height:75px;background:#CE2D48; border-radius:100%;float: left;text-align: left;"> <a href="https://www.cybrosys.com/odoo/industries/ecommerce-website/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-index-industry-5.png" alt="Odoo Industry" style="    border-radius: 100%;width:100%;"/> </a> </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
                     </div>
-               <div style="width:70%;float:left;">
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 14px;font-weight:800;width: auto;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 0px;margin-left: 16px;"> <a href="https://www.cybrosys.com/odoo/industries/ecommerce-website/" target="_blank" style="list-style: none; color:#000; text-decoration: none; font-family: 'Montserrat',sans-serif;"> E-commerce & Website</a> </h3>
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 12px;width: auto;margin: 0;margin-top:5px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 5px;margin-left: 16px; font-family: 'Montserrat',sans-serif;"> Mobile friendly, awe-inspiring product pages. </h3>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Migration</h6>
                 </div>
+
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
                     </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
-               <div  >
-                  <div style="width:75px;height:75px;background:#CE2D48; border-radius:100%;float: left;text-align: left;"> <a href="https://www.cybrosys.com/odoo/industries/hotel-management-erp/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-index-industry-6.png" alt="Odoo Industry" style="    border-radius: 100%;width:100%;"/> </a> </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Consultancy</h6>
                 </div>
-               <div style="width:70%;float:left;">
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 14px;font-weight:800;width: auto;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 4px;margin-left: 16px;"> <a href="https://www.cybrosys.com/odoo/industries/hotel-management-erp/" target="_blank" style="list-style: none; color:#000; text-decoration: none; font-family: 'Montserrat',sans-serif;"> Hotel Management</a> </h3>
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 12px;width: auto;margin: 0;margin-top:5px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 5px;margin-left: 16px; font-family: 'Montserrat',sans-serif;"> An all-inclusive hotel management application. </h3>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
                     </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Implementation</h6>
                 </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
-               <div  >
-                  <div style="width:75px;height:75px;background:#CE2D48; border-radius:100%;float: left;text-align: left;"> <a href="https://www.cybrosys.com/odoo/industries/education-erp-software/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-index-industry-7.png" alt="Odoo Industry" style="    border-radius: 100%;width:100%;"/> </a> </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
                     </div>
-               <div style="width:70%;float:left;">
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 14px;font-weight:800;width: auto;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 4px;margin-left: 16px;"> <a href="https://www.cybrosys.com/odoo/industries/education-erp-software/" target="_blank" style="list-style: none; color:#000; text-decoration: none; font-family: 'Montserrat',sans-serif;"> Education</a> </h3>
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 12px;width: auto;margin: 0;margin-top:5px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 5px;margin-left: 16px; font-family: 'Montserrat',sans-serif;"> A Collaborative platform for educational management. </h3>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Licensing Consultancy</h6>
                 </div>
             </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
-               <div  >
-                  <div style="width:75px;height:75px;background:#CE2D48; border-radius:100%;float: left;text-align: left;"> <a href="https://www.cybrosys.com/odoo/industries/service-management/" target="_blank"> <img src="https://www.cybrosys.com/images/odoo-index-industry-8.png" alt="Odoo Industry" style="    border-radius: 100%;width:100%;"/> </a> </div>
+        </section>
+        <!-- END OF END OF OUR SERVICES -->
+
+        <!-- OUR INDUSTRIES -->
+        <section class="container" style="margin-top: 6rem !important;">
+            <div class="row">
+                <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                    <h2 style="color: #212529 !important;">Our Industries</h2>
+                    <hr
+                        style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/trading-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Trading
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Easily procure
+                            and
+                            sell your products</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            POS
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Easy
+                            configuration
+                            and convivial experience</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/education-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Education
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            A platform for
+                            educational management</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Manufacturing
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Plan, track and
+                            schedule your operations</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            E-commerce &amp; Website
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Mobile
+                            friendly,
+                            awe-inspiring product pages</p>
                     </div>
-               <div style="width:70%;float:left;">
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 14px;font-weight:800;width: auto;margin: 0;margin-top: 14px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 4px;margin-left: 16px;"> <a href="https://www.cybrosys.com/odoo/industries/service-management/" target="_blank" style="list-style: none; color:#000; text-decoration: none; font-family: 'Montserrat',sans-serif;"> Service Management</a> </h3>
-                  <h3 class="oe_slogan" style=" text-align: left;font-size: 12px;width: auto;margin: 0;margin-top:5px;color: #000 !important;margin-top: 5px;opacity: 1 !important;line-height: 17px;float: left;margin-top: 5px;margin-left: 16px; font-family: 'Montserrat',sans-serif;"> Keep track of services and invoice accordingly. </h3>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/service-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Service Management
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Keep track of
+                            services and invoice</p>
                     </div>
                 </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Restaurant
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Run your bar or
+                            restaurant methodically</p>
                     </div>
                 </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Hotel Management
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            An
+                            all-inclusive
+                            hotel management application</p>
+                    </div>
+                </div>
+
             </div>
         </section>
-<section class="oe_container" style="padding: 0% 0% 6% 0%;">
-   <center>
-      <div class="col-md-12" style="margin: auto !important;
-         width: 70%;
-         padding: 30px;">
-         <h2 style="font-weight: 600;text-align: center;width: 100%;"> Need Any Help? </h2>
-         <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
-         <h4 style="font-size:16px;"> If you have anything to share with us based on your use of this module, please let us know. We are ready to offer our support. </h4>
-         <div class="col-md-6" style="float:left; padding:20px;">
-            <h4><i class="fa fa-envelope"></i> Email us </h4>
-            <p>odoo@cybrosys.com</p>
-         </div>
-         <div class="col-md-6" style="float:left; padding:20px;">
-            <h4><i class="fa fa-phone"></i> Contact Us </h4>
-            <a href="https://www.cybrosys.com/contact/" target="_blank"> www.cybrosys.com </a>
-         </div>
-      </div>
-   </center>
+
+        <!-- END OF END OF OUR INDUSTRIES -->
+
+        <!-- FOOTER -->
+        <!-- Footer Section -->
+        <section class="container" style="margin: 5rem auto 2rem;">
+            <div class="row" style="max-width:1540px;">
+                <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                    <h2 style="color: #212529 !important;">Need Help?</h2>
+                    <hr
+                        style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                </div>
+            </div>
+
+            <!-- Contact Cards -->
+            <div class="row d-flex justify-content-center align-items-center"
+                style="max-width:1540px; margin: 0 auto 2rem auto;">
+
+                <div class="col-lg-12" style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
+
+                    <div class="row mt-4">
+                        <div class="col-lg-6">
+                            <a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
+                                style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+                                    class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
+                        </div>
+                        <div class="col-lg-6">
+                            <a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
+                                class="btn btn-block mb-2 deep_hover"
+                                style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;"><i
+                                    class="fa fa-whatsapp mr-2"></i>WhatsApp</a>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+            <!-- End of Contact Cards -->
         </section>
-<section class="oe_container" style="padding: 0% 0% 6% 0%;">
-   <div class="oe_slogan" style="margin-bottom: 0px;">
-      <div style=" display: flex; justify-content: center; flex-wrap: wrap; ">
-      </div>
-      <br>
-      <img src="https://www.cybrosys.com/images/logo.png" style="width: 190px; margin-bottom: 25px;margin-top: 30px;" class="center-block">
-      <div style=" display: flex; justify-content: center; flex-wrap: wrap; "> <a href="https://twitter.com/cybrosys" target="_blank"><i class="fa fa-2x fa-twitter" style="color:white;background: #00a0d1;width:35px;height: 35px;padding-top: 7px;font-size: 21px;margin-right: 6px;border-radius: 100%;"></i></a>
-         </td>
-         <a href="https://www.linkedin.com/company/cybrosys-technologies-pvt-ltd" target="_blank"><i class="fa fa-2x fa-linkedin" style="color:white;background: #31a3d6;width:35px;height: 35px;padding-top: 7px;font-size: 21px;margin-right: 6px;border-radius: 100%;"></i></a>
-         </td>
-         <a href="https://www.facebook.com/cybrosystechnologies" target="_blank"><i class="fa fa-2x fa-facebook" style="color:white;background: #3b5998;width:35px;  height: 35px;padding-top: 7px;font-size: 21px;margin-right: 6px;border-radius: 100%;"></i></a>
-         </td>
-         <a href="https://in.pinterest.com/cybrosys" target="_blank"><i class="fa fa-2x fa-pinterest" style="color:white;background: #ac0f18;width:35px;height: 35px;padding-top: 7px;font-size: 21px;margin-right: 6px;border-radius: 100%;"></i></a>
-         </td>
+        <!-- Footer -->
+        <section class="oe_container" style="padding: 2rem 3rem 1rem;">
+            <div class="row" style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+                <!-- Logo -->
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin-top: 3rem;">
+                    <img src="https://www.cybrosys.com/images/logo.png" width="200px" height="auto" />
+                </div>
+                <!-- End of Logo -->
+                <div class="col-lg-12">
+                    <hr
+                        style="margin-top: 3rem;background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
+                    <!-- End of Footer Section -->
                 </div>
             </div>
         </section>
+        <!-- END OF FOOTER -->
+
+
+    </div>
 </div>