[UPDT] Index Updated

pos_controlled_interface/static/description/index.html

@@ -1,501 +1,567 @@
-<div style="padding: 3.5rem 1.5rem !important; background-color: #ffffff !important;">
+<div class="container" style="padding: 1rem !important; margin-bottom: 1rem !important;">
-    <div class="container">
+    <div class="row">
-        <!-- HERO -->
+        <div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between"
-        <div class="row">
+            style="border-bottom: 1px solid #d5d5d5;">
-            <div class="col-lg-12 d-flex flex-column justify-content-center"
+            <div class="my-3">
-                style="text-align: center; padding: 1rem !important;">
+                <img src="./assets/icons/logo.png" style="width: auto !important; height: 40px !important;">
-                <h1 class="text-center" style="color: #212121 !important; font-size: 3rem !important;"><span
-                        style="font-weight: 700 !important;">Controlled Point Of Sale </span></h1>
-                <p class="text-center"
-                    style="color: #212529 !important; font-size: 1.5rem !important; letter-spacing: 1px !important;">
-                    Manager Can Control the POS </p>
-                <img src="./images/hero.gif" class="img-responsive">
             </div>
-        </div>
+            <div class="my-3 d-flex align-items-center">
-        <!-- END OF HERO -->
+                <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>
 
-        <!-- 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;">
-                    The module allows the POS managers to control the 'Discount’ and ‘Product Price’ in each ‘POS’. The manager can disable the 'Discount' and 'Price' option in any POS such that the POS users won’t be able to allow discretionary prices and discounts.
-                </p>
             </div>
         </div>
-        <!-- END OF OVERVIEW -->
+    </div>
-
+</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-6">
-
-                        <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;">
-                                Control Discount in POS.
-                            </p>
-                        </div>
 
-                        <div class="d-flex deep-2"
+<div class="container" style="padding: 0rem 1.5rem 4rem !important">
-                            style="height: 90px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+    <div class="row" style="height: 900px !important;">
-                            <img src="./images/checked.png"
+        <div class="col-sm-12 col-md-12 col-lg-12"
-                                style="height: 24px !important; width: 24px !important;" class="mt-1 mr-2"
+            style="padding: 4rem 1rem !important; background-color: #714B67 !important; height: 600px !important; border-radius: 20px !important;">
-                                height="24px" width="24px">
+            <h1
-                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #FFFFFF !important;  font-size: 3.5rem !important; text-align: center !important;">
-                                
+                Controlled Point Of Sale</h1>
-				Control Price in POS. 
+            <p
-                            </p>
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 300 !important; color: #FFFFFF !important;  font-size: 1.4rem !important; text-align: center !important;">
-                        </div>
+                Allows the POS managers to control the &apos;Discount&apos; and &apos;Product Price&apos;in each
+                &apos;POS&apos;.
+            </p>
+            <img src="./assets/screenshots/hero.png" class="img-responsive" width="100%" height="auto" />
+        </div>
+    </div>
 
+    <div class="row">
+        <div class="col-md-12" style="border-bottom: 1px solid #d5d5d5 !important; margin-bottom: 2rem !important">
+            <h2
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
+                <i class="fa fa-compass mr-2"></i>Explore this module
+            </h2>
+        </div>
+        <div class="col-md-6">
+            <a href="#overview" style="text-decoration: none !important;">
+                <div class="row"
+                    style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
+                    <div class="col-8">
+                        <h3
+                            style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
+                            Overview</h3>
+                        <p
+                            style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
+                            Learn more about this module</p>
+                    </div>
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
+                        <i class="fa fa-chevron-right" style="color: #714B67 !important;"></i>
                     </div>
-                    
                 </div>
-            </div>
+            </a>
         </div>
 
-        <!-- END OF KEY FEATURES -->
+        <div class="col-md-6">
-
+            <a href="#features" style="text-decoration: none !important;">
-        <!-- SCREENSHOTS -->
+                <div class="row"
-        <div class="row">
+                    style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
-            <div class="col-lg-12 d-flex flex-column justify-content-center" style="padding: 2.5rem 1rem !important;">
+                    <div class="col-8">
-                <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;">
+                            style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
-                            01</h3>
+                            Features</h3>
-                    </div>
-                    <div>
-                        
                         <p
-                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
-                            Enable editing mode. Here we can view Control Pos Interface 
+                            View features of this module</p>
-                        </p>
+                    </div>
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
+                        <i class="fa fa-chevron-right" style="color: #714B67 !important;"></i>
                     </div>
                 </div>
-                <img src="./images/screenshot-1.png" class="img-responsive border"
+            </a>
-                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+        </div>
-                <!-- endo of img -->
+        <div class="col-md-6">
-
+            <a href="#screenshots" style="text-decoration: none !important;">
-                <!-- img -->
+                <div class="row"
-                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
-                    <div class="mr-3">
+                    <div class="col-8">
                         <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;">
+                            style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
-                            02</h3>
+                            Screenshots</h3>
-                    </div>
-                    <div>
-                        
                         <p
-                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
-                             Controlled Mode.
+                            See key screenshots of this module</p>
-                        </p>
+                    </div>
-
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
+                        <i class="fa fa-chevron-right" style="color: #714B67 !important;"></i>
                     </div>
                 </div>
-                <img src="./images/screenshot-2.png" class="img-responsive border"
+            </a>
-                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+        </div>
-                <!-- endo of img -->
+
+    </div>
+    <div class="row" id="overview">
+        <div class="col-md-12" style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important">
+            <h2
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
+                <i class="fa fa-pie-chart mr-2"></i>Overview
+            </h2>
+        </div>
+
+        <div class="col-mg-12 pl-3">
+            <p
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important; line-height: 30px !important;">
+                The module allows the POS managers to control the &apos;Discount&apos; and &apos;Product
+                Price&apos;in each &apos;POS&apos;. The manager can disable the 'Discount' and 'Price' option in any
+                POS such that the
+                POS users won&apos;t be able to allow discretionary prices and discounts.
+            </p>
+
+        </div>
+    </div>
+
+    <div class="row" id="features">
+        <div class="col-md-12" style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important">
+            <h2
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
+                <i class="fa fa-star mr-2"></i>Features
+            </h2>
+        </div>
+
+        <div class="col-md-6 pl-3 pt-3 d-flex">
+            <div>
+                <img src="assets/icons/check.png">
+            </div>
+            <div>
+                <h4
+                    style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+
+                    Control Discount in POS.</h4>
+
             </div>
         </div>
-        <!-- END OF SCREENSHOTS -->
 
+        <div class="col-md-6 pl-3 pt-3 d-flex">
+            <div>
+                <img src="assets/icons/check.png">
+            </div>
+            <div>
+                <h4
+                    style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
 
-        <!-- SUGGESTED PRODUCTS -->
+                    Control Price in POS.</h4>
-        <div class="row">
+
-            <div class="col-lg-12 d-flex flex-column justify-content-center"
+            </div>
-                style="text-align: center; padding: 2.5rem 1rem !important;">
+        </div>
-                <h2 style="color: #212529 !important;">Suggested Products</h2>
+    </div>
-                <hr
+
-                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+    <div class="row" id="screenshots">
-
+        <div class="col-md-12" style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important">
-                <div id="demo1" class="row carousel slide" data-ride="carousel">
+            <h2
-                    <!-- The slideshow -->
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
-                    <div class="carousel-inner">
+                <i class="fa fa-image mr-2"></i>Screenshots
-                        <div class="carousel-item active" style="min-height:0px">
+            </h2>
-                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+        </div>
-                                <a href="https://apps.odoo.com/apps/modules/14.0/dynamic_accounts_report/"
+
-                                    target="_blank">
+        <div class="col-lg-12 my-2">
-                                    <div style="border-radius:10px">
+            <h4 class="my-2"
-                                        <img class="img img-responsive center-block"
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
-                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                Enable editing mode</h4>
-                                            src="./images/modules/dynamic_image.png">
+            <p
-                                    </div>
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
-                                </a>
+                Here we can view Control Pos Interface
-                            </div>
+            </p>
-                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+            <img src="assets/screenshots/screenshot-1.png" class="img-responsive img-thumbnail border" width="100%"
-                                <a href="https://apps.odoo.com/apps/modules/14.0/dashboard_pos/" target="_blank">
+                height="auto" />
-                                    <div style="border-radius:10px">
+        </div>
-                                        <img class="img img-responsive center-block"
+
-                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+        <div class="col-lg-12 my-2">
-                                            src="./images/modules/pos_image.png">
+            <h4 class="my-2"
-                                    </div>
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
-                                </a>
+                Controlled Mode</h4>
-                            </div>
+            <p
-                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
-                                <a href="https://apps.odoo.com/apps/modules/14.0/product_approval_management/"
+                Controlled Mode in POS
-                                    target="_blank">
+            </p>
-                                    <div style="border-radius:10px">
+            <img src="assets/screenshots/screenshot-2.gif" class="img-responsive img-thumbnail border" width="100%"
-                                        <img class="img img-responsive center-block"
+                height="auto" />
-                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+        </div>
-                                            src="./images/modules/approval_image.png">
+
-                                    </div>
+    </div>
-                                </a>
+
-                            </div>
+
+    <!-- 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 #714B67 !important; background-color: #714B67 !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/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="./assets/modules/1.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_product_addons/" 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="./assets/modules/2.png">
+                                </div>
+                            </a>
                         </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">
-                            <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">
-                                <a href="https://apps.odoo.com/apps/modules/14.0/multiple_reference_per_product/"
+                                <div style="border-radius:10px">
-                                    target="_blank">
+                                    <img class="img img-responsive center-block"
-                                    <div style="border-radius:10px">
+                                        style="border-top-left-radius:10px; border-top-right-radius:10px"
-                                        <img class="img img-responsive center-block"
+                                        src="./assets/modules/3.png">
-                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                </div>
-                                            src="./images/modules/mulitple-ref_image.png">
+                            </a>
-                                    </div>
+                        </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">
+                        <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/"
+                            <a href="https://apps.odoo.com/apps/modules/14.0/product_return_pos/" target="_blank">
-                                    target="_blank">
+                                <div style="border-radius:10px">
-                                    <div style="border-radius:10px">
+                                    <img class="img img-responsive center-block"
-                                        <img class="img img-responsive center-block"
+                                        style="border-top-left-radius:10px; border-top-right-radius:10px"
-                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                        src="./assets/modules/4.png">
-                                            src="./images/modules/shopify_image.png">
+                                </div>
-                                    </div>
+                            </a>
-                                </a>
+                        </div>
-                            </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/point_of_sale_logo" 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="./assets/modules/5.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/invoice_format_editor/" 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="./assets/modules/6.png">
+                                </div>
+                            </a>
                         </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>
+                <!-- 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>
-        <!-- END OF SUGGESTED PRODUCTS -->
+    </div>
-
+    <!-- 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">
+    <!-- OUR SERVICES -->
-                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+    <section class="container" style="margin-top: 6rem !important;">
-                        style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <div class="row">
-                        <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
-                    </div>
+                <h2 style="color: #212529 !important;">Our Services</h2>
-                    <h6 class="text-center"
+                <hr
-                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                    style="border: 3px solid #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;" />
-                        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: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
                 </div>
+                <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="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"
+                <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;">
+                    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">
+                    <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>
+                <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="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"
+                <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;">
+                    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">
+                    <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
-                    </div>
-                    <h6 class="text-center"
-                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
-                        Support</h6>
                 </div>
+                <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="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"
+                <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;">
+                    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">
+                    <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
-                    </div>
-                    <h6 class="text-center"
-                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Hire
-                        Odoo
-                        Developer</h6>
                 </div>
+                <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="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"
+                <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;">
+                    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">
+                    <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>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Integration</h6>
+            </div>
 
-                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <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"
+                <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;">
+                    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">
+                    <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
-                    </div>
-                    <h6 class="text-center"
-                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
-                        Migration</h6>
                 </div>
+                <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="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"
+                <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;">
+                    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">
+                    <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
-                    </div>
-                    <h6 class="text-center"
-                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
-                        Consultancy</h6>
                 </div>
+                <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="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"
+                <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;">
+                    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">
+                    <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>
+                <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="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"
+                <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;">
+                    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">
+                    <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>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Licensing Consultancy</h6>
             </div>
-        </section>
+        </div>
-        <!-- END OF END OF OUR SERVICES -->
+    </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">
+    <!-- OUR INDUSTRIES -->
-                    <div class="my-4 d-flex flex-column justify-content-center"
+    <section class="container" style="margin-top: 6rem !important;">
-                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <div class="row">
-                        <img src="./assets/icons/trading-black.png" class="img-responsive mb-3" height="48px"
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
-                            width="48px">
+                <h2 style="color: #212529 !important;">Our Industries</h2>
-                        <h5
+                <hr
-                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    style="border: 3px solid #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;" />
-                            Trading
+            </div>
-                        </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="col-lg-3">
-                    <div class="my-4 d-flex flex-column justify-content-center"
+                <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;">
+                    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">
+                    <img src="./assets/icons/trading-black.png" class="img-responsive mb-3" height="48px" width="48px">
-                        <h5
+                    <h5
-                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
-                            POS
+                        Trading
-                        </h5>
+                    </h5>
-                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
-                            Easy
+                        Easily procure
-                            configuration
+                        and
-                            and convivial experience</p>
+                        sell your products</p>
-                    </div>
                 </div>
+            </div>
 
-                <div class="col-lg-3">
+            <div class="col-lg-3">
-                    <div class="my-4 d-flex flex-column justify-content-center"
+                <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;">
+                    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"
+                    <img src="./assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
-                            width="48px">
+                    <h5
-                        <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
-                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        POS
-                            Education
+                    </h5>
-                        </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
-                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                        Easy
-                            A platform for
+                        configuration
-                            educational management</p>
+                        and convivial experience</p>
-                    </div>
                 </div>
+            </div>
 
-                <div class="col-lg-3">
+            <div class="col-lg-3">
-                    <div class="my-4 d-flex flex-column justify-content-center"
+                <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;">
+                    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"
+                    <img src="./assets/icons/education-black.png" class="img-responsive mb-3" height="48px"
-                            width="48px">
+                        width="48px">
-                        <h5
+                    <h5
-                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
-                            Manufacturing
+                        Education
-                        </h5>
+                    </h5>
-                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
-                            Plan, track and
+                        A platform for
-                            schedule your operations</p>
+                        educational management</p>
-                    </div>
                 </div>
+            </div>
 
-                <div class="col-lg-3">
+            <div class="col-lg-3">
-                    <div class="my-4 d-flex flex-column justify-content-center"
+                <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;">
+                    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">
+                    <img src="./assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px"
-                        <h5
+                        width="48px">
-                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    <h5
-                            E-commerce &amp; Website
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
-                        </h5>
+                        Manufacturing
-                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    </h5>
-                            Mobile
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
-                            friendly,
+                        Plan, track and
-                            awe-inspiring product pages</p>
+                        schedule your operations</p>
-                    </div>
                 </div>
+            </div>
 
-                <div class="col-lg-3">
+            <div class="col-lg-3">
-                    <div class="my-4 d-flex flex-column justify-content-center"
+                <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;">
+                    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"
+                    <img src="./assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
-                            width="48px">
+                    <h5
-                        <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
-                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        E-commerce &amp; Website
-                            Service Management
+                    </h5>
-                        </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
-                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                        Mobile
-                            Keep track of
+                        friendly,
-                            services and invoice</p>
+                        awe-inspiring product pages</p>
-                    </div>
                 </div>
+            </div>
 
-                <div class="col-lg-3">
+            <div class="col-lg-3">
-                    <div class="my-4 d-flex flex-column justify-content-center"
+                <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;">
+                    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"
+                    <img src="./assets/icons/service-black.png" class="img-responsive mb-3" height="48px" width="48px">
-                            width="48px">
+                    <h5
-                        <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
-                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Service Management
-                            Restaurant
+                    </h5>
-                        </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
-                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                        Keep track of
-                            Run your bar or
+                        services and invoice</p>
-                            restaurant methodically</p>
-                    </div>
                 </div>
+            </div>
 
-                <div class="col-lg-3">
+            <div class="col-lg-3">
-                    <div class="my-4 d-flex flex-column justify-content-center"
+                <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;">
+                    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"
+                    <img src="./assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px"
-                            width="48px">
+                        width="48px">
-                        <h5
+                    <h5
-                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
-                            Hotel Management
+                        Restaurant
-                        </h5>
+                    </h5>
-                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
-                            An
+                        Run your bar or
-                            all-inclusive
+                        restaurant methodically</p>
-                            hotel management application</p>
-                    </div>
                 </div>
-
             </div>
-        </section>
+
-
+            <div class="col-lg-3">
-        <!-- END OF END OF OUR INDUSTRIES -->
+                <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;">
-        <!-- FOOTER -->
+                    <img src="./assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px" width="48px">
-        <!-- Footer Section -->
+                    <h5
-        <section class="container" style="margin: 5rem auto 2rem;">
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
-            <div class="row" style="max-width:1540px;">
+                        Hotel Management
-                <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                    </h5>
-                    <h2 style="color: #212529 !important;">Need Help?</h2>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
-                    <hr
+                        An
-                        style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                        all-inclusive
+                        hotel management application</p>
                 </div>
             </div>
 
-            <!-- Contact Cards -->
+        </div>
-            <div class="row d-flex justify-content-center align-items-center"
+    </section>
-                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; ">
+    <!-- END OF END OF OUR INDUSTRIES -->
 
-                    <div class="row mt-4">
+    <!-- FOOTER -->
-                        <div class="col-lg-4">
+    <!-- Footer Section -->
-                            <a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
+    <section class="container" style="margin: 5rem auto 2rem;">
-                                style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+        <div class="row" style="max-width:1540px;">
-                                    class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
-                        </div>
+                <h2 style="color: #212529 !important;">Need Help?</h2>
-                        <div class="col-lg-4">
+                <hr
-                            <a href="https://api.WhatsApp.com/send?phone=918606827707" target="_blank"
+                    style="border: 3px solid #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;" />
-                                class="btn btn-block mb-2 deep_hover"
+            </div>
-                                style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;"><i
+        </div>
-                                    class="fa fa-WhatsApp mr-2"></i>WhatsApp</a>
+
-                        </div>
+        <!-- Contact Cards -->
-                        <div class="col-lg-4">
+        <div class="row d-flex justify-content-center align-items-center"
-                            <a href="mailto:info@cybrosys.com" target="_blank" class="btn btn-block deep_hover"
+            style="max-width:1540px; margin: 0 auto 2rem auto;">
-                                style="text-decoration: none; background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+
-                                    class="fa fa-envelope mr-2"></i>info@cybrosys.com</a>
+            <div class="col-lg-12" style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
-                        </div>
+
+                <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 Contact Cards -->
+            <!-- End of Logo -->
-        </section>
+            <div class="col-lg-12">
-        <!-- Footer -->
+                <hr
-        <section class="oe_container" style="padding: 2rem 3rem 1rem;">
+                    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;">
-            <div class="row" style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+                <!-- End of Footer Section -->
-                <!-- 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>
+        </div>
-        <!-- END OF FOOTER -->
+    </section>
-
+    <!-- END OF FOOTER -->
 
-    </div>
+</div>
-</div>

product_deletion/static/description/index.html

@@ -1,302 +1,585 @@
-<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="container" style="padding: 1rem !important; margin-bottom: 1rem !important;">
-<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="row">
-   <div class="col-md-7 col-sm-12 col-xs-12" style="padding: 0px">
+        <div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between"
-      <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;">
+            style="border-bottom: 1px solid #d5d5d5;">
-         <h1 style="font-size: 39px;font-weight: 600;margin: 0px !important;"> Product Removal Authorisation</h1>
+            <div class="my-3">
-         <h3 style="font-size: 21px;margin-top: 8px;position: relative;">Users having the permission can only delete the products </h3>
+                <img src="./assets/icons/logo.png" style="width: auto !important; height: 40px !important;">
-      </div>
+            </div>
-      <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
+            <div class="my-3 d-flex align-items-center">
-      <ul style=" padding: 0 1px; list-style: none; ">
+                <div
-         <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>  Only users in the group Product Deletion can delete the product. </li>
+                    style="background-color: #7C7BAD !important; color: #fff !important; font-weight: 600 !important; padding: 5px 15px 8px !important; margin: 0 5px !important;">
-         <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> If user is not in the group Odoo will raise a warning message.  </li>
+                    <i class="fa fa-check mr-1"></i>Community
-      </ul>
+                </div>
-   </div>
+                <div
-   <div class="col-md-5 col-sm-12 col-xs-12"> <img src="images/product removal1.png" class="img-responsive" alt=""> </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>
+
-   <section class="oe_container" style="padding: 1rem 0rem 1rem; background-color: #ffffff !important;">
+<div class="container" style="padding: 0rem 1.5rem 4rem !important">
-      <div class="row py-4 px-3">
+    <div class="row" style="height: 900px !important;">
-         <div class="w-100" style="padding-top:30px;padding-bottom:45px;border-radius: 10px;">
+        <div class="col-sm-12 col-md-12 col-lg-12"
-            <ul role="tablist" class="nav nav-pills justify-content-center" data-tabs="tabs" id="pills-tab" style="border: none;background: unset;">
+            style="padding: 4rem 1rem !important; background-color: #714B67 !important; height: 600px !important; border-radius: 20px !important;">
-               <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;
+            <h1
-                  color: #fff;">Overview </a> </li>
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #FFFFFF !important;  font-size: 3.5rem !important; text-align: center !important;">
-				 <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-video" 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;
+                Product Removal Authorisation</h1>
-                  color: #fff;">Configuration </a> </li>
+            <p
-               <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;
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 300 !important; color: #FFFFFF !important;  font-size: 1.4rem !important; text-align: center !important;">
-                  color: #fff;" >Features </a> </li>
+                Users having the permission can only delete the products
-               <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;
+            </p>
-                  color: #fff;">Screenshots </a> </li>
+            <img src="./assets/screenshots/hero.png" class="img-responsive" width="100%" height="auto" />
-              
+        </div>
-            </ul>
+    </div>
-            <div class="tab-content" id="pills-tabContent"
+
-               style="padding-top: 30px; padding-bottom: 30px; padding: 30px;">
+    <div class="row">
-               <div class="px-3 pt-1 tab-pane fade active show" id="pills-home" role="tabpanel" aria-labelledby="
+        <div class="col-md-12" style="border-bottom: 1px solid #d5d5d5 !important; margin-bottom: 2rem !important">
-                  pills-home-tab">
+            <h2
-                  <!-- Overview-->
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
-                  <h2 style="font-weight: 600;text-align: center;width: 100%;">Overview</h2>
+                <i class="fa fa-compass mr-2"></i>Explore this module
-                  <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
+            </h2>
-                  <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;">
+        </div>
-                     This module provides the functionality in which only users with permissions can delete products. 
+        <div class="col-md-6">
-                  </h3>
+            <a href="#overview" style="text-decoration: none !important;">
-               </div>
+                <div class="row"
-				
+                    style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
-				
+                    <div class="col-8">
-				
+                        <h3
-				
+                            style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
-				
+                            Overview</h3>
-				<div class="px-3 pt-1 tab-pane fade" id="pills-video" role="tabpanel" aria-labelledby="
+                        <p
-                  pills-home-tab">
+                            style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
-                 
+                            Learn more about this module</p>
-                  
+                    </div>
-                  <h2 style="font-weight: 600;text-align: center;width: 100%;">Configuration</h2>
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
-                  <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
+                        <i class="fa fa-chevron-right" style="color: #714B67 !important;"></i>
-                  <ul>
+                    </div>
-                     <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;">
+                </div>
-                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>No additional configuration required
+            </a>
-                     </p>
+        </div>
-                     <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;">
+        <div class="col-md-6">
-                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Use barcode to add product.
+            <a href="#configuration" style="text-decoration: none !important;">
-                     </p>
+                <div class="row"
-                  </ul>
+                    style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
-               </div>
+                    <div class="col-8">
-               <div class="px-3 pt-1 tab-pane fade " id="pills-home1" role="tabpanel" aria-labelledby="
+                        <h3
-                  pills-home-tab">
+                            style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
-                  <!-- feature tab-->
+                            Configuration</h3>
-                  <h2 style="font-weight: 600;text-align: center;width: 100%;">Product Removal Authorisation </h2>
+                        <p
-                  <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
+                            style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
-                  <ul>
+                            View configurations for this module</p>
-                     <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;">
+                    </div>
-                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Only users in the group Product Deletion can delete the product.
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
-                     </p>
+                        <i class="fa fa-chevron-right" style="color: #714B67 !important;"></i>
-
+                    </div>
-                     <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;">
+                </div>
-                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> If user is not in the group Odoo will raise a warning message.
+            </a>
-                     </p>
+        </div>
-                  </ul>
+        <div class="col-md-6">
-               </div>
+            <a href="#features" style="text-decoration: none !important;">
-               <!-- Screenshot tab-->
+                <div class="row"
-               <div class="px-3 tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" >
+                    style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
-                  <div class="tab-pane">
+                    <div class="col-8">
-                     <h2 style="font-weight: 600;text-align: center;width: 100%;">Screenshots</h2>
+                        <h3
-                     <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
+                            style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
-                     <div>
+                            Features</h3>
-                        <section class="oe_container">
+                        <p
-                           <div id="demo" class="row carousel slide  mb32" data-ride="carousel">
+                            style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
-                              <div class="carousel-inner">
+                            View features of this module</p>
-                                 <div class="carousel-item active" style="min-height: 0px;">
+                    </div>
-                                    <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
-                                       <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> Product Form </h3>
+                        <i class="fa fa-chevron-right" style="color: #714B67 !important;"></i>
-                                       <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/product removal.png"> </div>
+                    </div>
-                                    </div>
+                </div>
-                                 </div>
+            </a>
-                                 
+        </div>
-                              </div>
+        <div class="col-md-6">
-                              <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> 
+            <a href="#screenshots" style="text-decoration: none !important;">
-                           </div>
+                <div class="row"
-                        </section>
+                    style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
-                     </div>
+                    <div class="col-8">
-                  </div>
+                        <h3
-               </div>
+                            style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
-               
+                            Screenshots</h3>
-               <!-- faq tab-->
+                        <p
-               <div class="px-2 px-lg-4 pt-3 tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
+                            style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
-                  <ul class="list-unstyled">
+                            See key screenshots of this module</p>
-                  </ul>
+                    </div>
-               </div>
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
+                        <i class="fa fa-chevron-right" style="color: #714B67 !important;"></i>
+                    </div>
+                </div>
+            </a>
+        </div>
+
+    </div>
+    <div class="row" id="overview">
+        <div class="col-md-12" style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important">
+            <h2
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
+                <i class="fa fa-pie-chart mr-2"></i>Overview
+            </h2>
+        </div>
+
+        <div class="col-mg-12 pl-3">
+            <p
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important; line-height: 30px !important;">
+                This module provides the functionality in which only users with permissions can delete products.
+            </p>
+
+        </div>
+    </div>
+
+    <div class="row" id="configuration">
+        <div class="col-md-12" style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important">
+            <h2
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
+                <i class="fa fa-cogs mr-2"></i>Configuration
+            </h2>
+        </div>
+
+        <div class="col-mg-12 pl-3">
+            <p
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important; line-height: 30px !important;">
+                Use barcode to add product.
+            </p>
+
+        </div>
+    </div>
+
+    <div class="row" id="features">
+        <div class="col-md-12" style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important">
+            <h2
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
+                <i class="fa fa-star mr-2"></i>Features
+            </h2>
+        </div>
+
+        <div class="col-md-6 pl-3 py-3 d-flex">
+            <div>
+                <img src="assets/icons/check.png">
             </div>
-         </div>
+            <div>
-      </div>
+                <h4
-   </section>
+                    style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
-   <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>
+                    Only users in the group Product Deletion can delete the product.</h4>
-      <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
+
-      <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/13.0/product_barcode/" 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/product_barcode.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/13.0/barcode_scanning_sale_purchase/" 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/barcode_scanning.jpeg"> </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/13.0/stock_move_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/advanced_stock.png"> </div>
-                  </a>
-               </div>
             </div>
-            <div class="carousel-item" style="min-height: 0px;">
+        </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/product_ageing_report/" target="_blank">
+        <div class="col-md-6 pl-3 py-3 d-flex">
-                     <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/stock_ageing.jpeg"> </div>
+            <div>
-                  </a>
+                <img src="assets/icons/check.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/13.0/stock_valuation_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/inventory_valuation.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/13.0/export_stockinfo_xls/" 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/export.jpeg"> </div>
-                  </a>
-               </div>
             </div>
-         </div>
+            <div>
-         <!-- Left and right controls --> 
+                <h4
-         <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> 
+                    style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
-      </div>
+
-   </section>
+                    If user is not in the group Odoo will raise a warning message.</h4>
-   <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> 
-         </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>
-               </div>
             </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
+        </div>
-               <div  >
+    </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>
+
-               </div>
+    <div class="row" id="screenshots">
-               <div style="width:70%;float:left;" style=" margin-bottom: 10px; ">
+        <div class="col-md-12" style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important">
-                  <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>
+            <h2
-                  <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>
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
-               </div>
+                <i class="fa fa-image mr-2"></i>Screenshots
+            </h2>
+        </div>
+
+        <div class="col-lg-12 my-2">
+            <h4 class="my-2"
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                Product Form</h4>
+            <p
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                Users having the permission can only delete the products, otherwise a warning dialog is shown as below.
+            </p>
+            <img src="assets/screenshots/screenshot-1.png" class="img-responsive img-thumbnail border" width="100%"
+                height="auto" />
+        </div>
+    </div>
+
+    <!-- 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 #714B67 !important; background-color: #714B67 !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/product_import/" 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="./assets/modules/1.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/product_brand_inventory/" 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="./assets/modules/2.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/product_catalogue/" 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="./assets/modules/3.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/14.0/website_return_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="./assets/modules/4.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/website_product_publish/" 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="./assets/modules/5.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/dynamic_sale_order_fields/"
+                                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="./assets/modules/6.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 class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
+        </div>
-               <div  >
+    </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>
+    <!-- END OF SUGGESTED PRODUCTS -->
-               </div>
+
-               <div style="width:70%;float:left;">
+    <!-- OUR SERVICES -->
-                  <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>
+    <section class="container" style="margin-top: 6rem !important;">
-                  <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>
+        <div class="row">
-               </div>
+            <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 #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;" />
             </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
+
-               <div  >
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
-                  <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>
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
-               </div>
+                    style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
-               <div style="width:70%;float:left;">
+                    <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
-                  <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>
+                </div>
-                  <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>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
-               </div>
+                    Odoo
+                    Customization</h6>
             </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
+
-               <div  >
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
-                  <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="d-flex justify-content-center align-items-center mx-3 my-3"
-               </div>
+                    style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
-               <div style="width:70%;float:left;">
+                    <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
-                  <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>
+                </div>
-                  <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;">
-               </div>
+                    Odoo
+                    Implementation</h6>
             </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
+
-               <div  >
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
-                  <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>
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
-               </div>
+                    style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
-               <div style="width:70%;float:left;">
+                    <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
-                  <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>
+                </div>
-                  <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>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
-               </div>
+                    Odoo
+                    Support</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>
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
-               <div style="width:70%;float:left;">
+                    style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
-                  <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>
+                    <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
-                  <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>
+                </div>
-               </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Hire
+                    Odoo
+                    Developer</h6>
             </div>
-            <div class="col-md-4 col-sm-6 col-xs-12" style=" margin-bottom: 10px; ">
+
-               <div  >
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
-                  <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>
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
-               </div>
+                    style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
-               <div style="width:70%;float:left;">
+                    <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
-                  <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>
+                </div>
-                  <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>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
-               </div>
+                    Odoo
+                    Integration</h6>
             </div>
-         </div>
+
-      </div>
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
-</div>
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
-</section>
+                    style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
-<section class="oe_container" style="padding: 0% 0% 6% 0%;">
+                    <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
-   <center>
+                </div>
-      <div class="col-md-12" style="margin: auto !important;
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
-         width: 70%;
+                    Odoo
-         padding: 30px;">
+                    Migration</h6>
-         <h2 style="font-weight: 600;text-align: center;width: 100%;">Need Any Help?</h2>
+            </div>
-         <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;">
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
-            <h4><i class="fa fa-envelope"></i>Email us </h4>
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
-            <p>odoo@cybrosys.com</p>
+                    style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
-         </div>
+                    <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
-         <div class="col-md-6" style="float:left; padding:20px;">
+                </div>
-            <h4><i class="fa fa-phone"></i> Contact Us </h4>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
-            <a href="https://www.cybrosys.com/contact/" target="_blank"> www.cybrosys.com</a>
+                    Odoo
-         </div>
+                    Consultancy</h6>
-      </div>
+            </div>
-   </center>
+
-</section>
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
-<section class="oe_container" style="padding: 0% 0% 6% 0%;">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
-   <div class="oe_slogan" style="margin-bottom: 0px;">
+                    style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
-      <div style=" display: flex; justify-content: center; flex-wrap: wrap; ">
+                    <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
-      </div>
+                </div>
-      <br>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
-      <img src="https://www.cybrosys.com/images/logo.png" style="width: 190px; margin-bottom: 25px;margin-top: 30px;" class="center-block">
+                    Odoo
-      <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>
+                    Implementation</h6>
-         </td>
+            </div>
-         <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>
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
-         <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>
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
-         </td>
+                    style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
-         <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>
+                    <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
-         </td>
+                </div>
-      </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
-   </div>
+                    Odoo
-</section>
+                    Licensing Consultancy</h6>
+            </div>
+        </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 #714B67 !important; background-color: #714B67 !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>
+
+            <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>
+
+    <!-- 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 #714B67 !important; background-color: #714B67 !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>