diff --git a/support_package/static/description/assets/arrow-circle-black.png b/support_package/static/description/assets/arrow-circle-black.png
new file mode 100644
index 000000000..e8948eb73
Binary files /dev/null and b/support_package/static/description/assets/arrow-circle-black.png differ
diff --git a/support_package/static/description/assets/arrow-circle-magenta.png b/support_package/static/description/assets/arrow-circle-magenta.png
new file mode 100644
index 000000000..91c3c11b8
Binary files /dev/null and b/support_package/static/description/assets/arrow-circle-magenta.png differ
diff --git a/support_package/static/description/assets/arrows-transparent.png b/support_package/static/description/assets/arrows-transparent.png
deleted file mode 100644
index f2973bb02..000000000
Binary files a/support_package/static/description/assets/arrows-transparent.png and /dev/null differ
diff --git a/support_package/static/description/assets/hero.png b/support_package/static/description/assets/hero.png
new file mode 100644
index 000000000..a15b83efc
Binary files /dev/null and b/support_package/static/description/assets/hero.png differ
diff --git a/support_package/static/description/assets/respnsive-img.png b/support_package/static/description/assets/respnsive-img.png
new file mode 100644
index 000000000..f6481f210
Binary files /dev/null and b/support_package/static/description/assets/respnsive-img.png differ
diff --git a/support_package/static/description/images/support_1.png b/support_package/static/description/assets/screenshots/support_1.png
similarity index 100%
rename from support_package/static/description/images/support_1.png
rename to support_package/static/description/assets/screenshots/support_1.png
diff --git a/support_package/static/description/images/support_2.png b/support_package/static/description/assets/screenshots/support_2.png
similarity index 100%
rename from support_package/static/description/images/support_2.png
rename to support_package/static/description/assets/screenshots/support_2.png
diff --git a/support_package/static/description/images/support_3.png b/support_package/static/description/assets/screenshots/support_3.png
similarity index 100%
rename from support_package/static/description/images/support_3.png
rename to support_package/static/description/assets/screenshots/support_3.png
diff --git a/support_package/static/description/images/support_4.png b/support_package/static/description/assets/screenshots/support_4.png
similarity index 100%
rename from support_package/static/description/images/support_4.png
rename to support_package/static/description/assets/screenshots/support_4.png
diff --git a/support_package/static/description/images/support_5.png b/support_package/static/description/assets/screenshots/support_5.png
similarity index 100%
rename from support_package/static/description/images/support_5.png
rename to support_package/static/description/assets/screenshots/support_5.png
diff --git a/support_package/static/description/images/support_6.png b/support_package/static/description/assets/screenshots/support_6.png
similarity index 100%
rename from support_package/static/description/images/support_6.png
rename to support_package/static/description/assets/screenshots/support_6.png
diff --git a/support_package/static/description/assets/trophy.png b/support_package/static/description/assets/trophy.png
deleted file mode 100644
index a5496a866..000000000
Binary files a/support_package/static/description/assets/trophy.png and /dev/null differ
diff --git a/support_package/static/description/images/hero.gif b/support_package/static/description/images/hero.gif
deleted file mode 100644
index 170854542..000000000
Binary files a/support_package/static/description/images/hero.gif and /dev/null differ
diff --git a/support_package/static/description/index.html b/support_package/static/description/index.html
index 97ff79536..43ab4eb4b 100644
--- a/support_package/static/description/index.html
+++ b/support_package/static/description/index.html
@@ -1,597 +1,690 @@
-<div class="oe_styling_v8">
-    <section class="oe_container" style="font-family: Roboto, 'sans-serif'; padding:2rem 3rem 1rem">
-        <div class="row" style="max-width:1540px; margin:0 auto;">
-            <!-- LEFT HERO -->
-            <div class="col-lg-7" style="margin-top: 0rem; padding: 3rem 2.5rem; ">
-                <div style="width: 200px;">
-                    <img src="https://www.cybrosys.com/images/logo.png" width="150px" height="auto" />
-                </div>
-                <h1 class="mt-4" style="font-family: Montserrat, 'sans-serif' ; font-weight: bold;">
-                    Support Package Management</h1>
-                <p class="lead" style="font-weight: 500; line-height: 1.5; color: #757575">
-                    Support Service and Package Management Module.
-                </p>
-                <span class="badge px-3 py-2 depth-1"
-                    style="background-color: #FFECEF; color: #F66170; font-weight: bold; border-radius: 1rem;"><i
-                        class="fa fa-star mr-2"></i>Key Highlights</span>
-                <!-- FEATURES -->
-                <hr class="mt-4"
-                    style="background: linear-gradient(to right, #e5e5e5, transparent); height: 2px; border-style: none;">
-                <div class="row" style="padding-left: 1rem;">
-                    <!-- FEATURE COLUMN LEFT -->
-                    <p style="font-weight: 500;"><i class="fa fa-check-circle mr-2" style="color: #1abc9c;"></i>Easy
-                        to create, monitor and manage support service.
-                    </p>
-                    <p style="font-weight: 500;"><i class="fa fa-check-circle mr-2"
-                            style="color: #1abc9c;"></i>Management of customers are similar to project management.
-                    </p>
-                    <p style="font-weight: 500;"><i class="fa fa-check-circle mr-2" style="color: #1abc9c;"></i>Can
-                        reuse packages with the help of templates.
-                    </p>
-                    <p style="font-weight: 500;"><i class="fa fa-check-circle mr-2" style="color: #1abc9c;"></i>Renewal
-                        badge appears ones end date is closer or number of
-                        tickets remaining is very less.
-                    </p>
-                </div>
-                <hr class="mt-4"
-                    style="background: linear-gradient(to right, #e5e5e5, transparent); height: 2px; border-style: none;">
-                <!-- END OF FEATURES -->
-            </div>
-            <!-- END OF LEFT HERO -->
-            <!-- RIGHT HERO -->
-            <div class="col-lg-5  d-flex align-items-center">
-                <img src="./images/hero.gif">
-            </div>
-            <!-- END OF RIGHT HERO -->
-        </div>
-
-        <section class="oe_container" style="margin-top: 4rem;">
-            <div class="row" style="max-width:1540px; margin:0 auto; padding-bottom:64px;">
-                <div class="col-lg-12">
-                    <!-- TAB LIST -->
-                    <ul class="nav nav-tabs d-flex justify-content-center" role="tablist"
-                        style="background-color:unset; margin:0 auto;">
-                        <li class="nav-item">
-                            <a class="nav-link active" style="color: #F66170;" data-toggle="tab" href="#tabs-1"
-                                role="tab"><i class="fa fa-pie-chart mr-2"></i>Overview</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" style="color: #F66170;" data-toggle="tab" href="#tabs-3" role="tab"><i
-                                    class="fa fa-star mr-2"></i>Features</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" style="color: #F66170;" data-toggle="tab" href="#tabs-4" role="tab"><i
-                                    class="fa fa-picture-o mr-2"></i>Screenshots</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="col-lg-12">
-                    <!-- Tab panes -->
-                    <div class="tab-content" style="padding: 2rem;">
-                        <div class="tab-pane active" id="tabs-1" role="tabpanel">
-                            <h3 class="text-center rounded px-3 py-2 mb-4"
-                                style="background-color:#edf2f7; color: #162635; font-family: Roboto, 'sans-serif'; font-weight: bold;">
-                                Overview</h3>
-
-                            <p class="text-justify">Support package module is a
-                                support management app. It enables users to
-                                create, manage, optimize, and monitor the
-                                entire service request from a centralized
-                                application.</p>
-                        </div>
-                        <div class="tab-pane" id="tabs-3" role="tabpanel">
-                            <h3 class="text-center rounded px-3 py-2 mb-4"
-                                style="background-color:#edf2f7; color: #162635; font-family: Roboto, 'sans-serif'; font-weight: bold;">
-                                Features</h3>
-                            <p style="font-weight: 500;"><i class="fa fa-check-circle mr-2"
-                                    style="color: #1abc9c;"></i>Easy to create, monitor and manage support service.
-                            </p>
-                            <p style="font-weight: 500;"><i class="fa fa-check-circle mr-2" style="color: #1abc9c;"></i>
-                                Can reuse packages with the help of templates.
-                            </p>
-                            <p style="font-weight: 500;"><i class="fa fa-check-circle mr-2" style="color: #1abc9c;"></i>
-                                Renewal badge appears ones end date is closer or
-                                number of tickets remaining is
-                                very less.
-                            </p>
-                            <p style="font-weight: 500;"><i class="fa fa-check-circle mr-2" style="color: #1abc9c;"></i>
-                                Shows all the necessary information about a
-                                customer in kanban view inside
-                                each support package which makes it easy to monitor bulk amount of customers.
-                            </p>
-                        </div>
-                        <div class="tab-pane" id="tabs-4" role="tabpanel">
-                            <h3 class="text-center rounded px-3 py-2 mb-4"
-                                style="background-color:#edf2f7; color: #162635; font-family: Roboto, 'sans-serif'; font-weight: bold;">
-                                Screenshots</h3>
-
-
-                            <section class="oe_container">
-                                <div id="demo" class="row carousel slide  mb32" data-ride="carousel">
-                                    <div class="carousel-inner">
-                                        <div class="carousel-item active" style="min-height: 687.219px;">
-                                            <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float:left">
-                                                <h3 class="alert"
-                                                    style="font-weight:400; color:#091E42; text-align:left; border-radius:0; font-size:18px">
-                                                    <i class="fa fa-check-circle-o"
-                                                        style="width:40px; color:#07B700"></i>Creating support
-                                                    packages with information like maximum number of tickets,
-                                                    maximum duration of each ticket, validity of package, this will
-                                                    automatically create this package as a product
-                                                </h3>
-                                                <div style=""> <img class="img img-responsive center-block"
-                                                        style="border-top-left-radius:10px; border-top-right-radius:10px"
-                                                        src="./images/support_1.png">
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="carousel-item" style="min-height: 687.219px;">
-                                            <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float:left">
-                                                <h3 class="alert"
-                                                    style="font-weight:400; color:#091E42; text-align:left; border-radius:0; font-size:18px">
-                                                    <i class="fa fa-check-circle-o"
-                                                        style="width:40px; color:#07B700"></i>Create sale order to
-                                                    customer with required package as product, then the customer
-                                                    will be created in support packages
-                                                </h3>
-                                                <div style=""> <img class="img img-responsive center-block"
-                                                        style="border-top-left-radius:10px; border-top-right-radius:10px"
-                                                        src="./images/support_2.png">
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="carousel-item" style="min-height: 687.219px;">
-                                            <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float:left">
-
-                                                <div style=""> <img class="img img-responsive center-block"
-                                                        style="border-top-left-radius:10px; border-top-right-radius:10px"
-                                                        src="./images/support_3.png">
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="carousel-item" style="min-height: 687.219px;">
-                                            <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float:left">
-                                                <h3 class="alert"
-                                                    style="font-weight:400; color:#091E42; text-align:left; border-radius:0; font-size:18px">
-                                                    <i class="fa fa-check-circle-o"
-                                                        style="width:40px; color:#07B700"></i>Information shown
-                                                    customer Kanban view
-                                                </h3>
-                                                <div style=""> <img class="img img-responsive center-block"
-                                                        style="border-top-left-radius:10px; border-top-right-radius:10px"
-                                                        src="./images/support_4.png">
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="carousel-item" style="min-height: 687.219px;">
-                                            <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float:left">
-                                                <h3 class="alert"
-                                                    style="font-weight:400; color:#091E42; text-align:left; border-radius:0; font-size:18px">
-                                                    <i class="fa fa-check-circle-o"
-                                                        style="width:40px; color:#07B700"></i>Report.
-                                                </h3>
-                                                <div style=""> <img class="img img-responsive center-block"
-                                                        style="border-top-left-radius:10px; border-top-right-radius:10px"
-                                                        src="./images/support_5.png">
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="carousel-item" style="min-height: 687.219px;">
-                                            <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float:left">
-                                                <h3 class="alert"
-                                                    style="font-weight:400; color:#091E42; text-align:left; border-radius:0; font-size:18px">
-                                                    <i class="fa fa-check-circle-o"
-                                                        style="width:40px; color:#07B700"></i>Can create templates
-                                                    so that it helps in creating similar support packages.
-                                                </h3>
-                                                <div style=""> <img class="img img-responsive center-block"
-                                                        style="border-top-left-radius:10px; border-top-right-radius:10px"
-                                                        src="./images/support_6.png">
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <a class="carousel-control-prev" href="#demo" data-slide="prev"
-                                        style="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="width:35px; color:#000"> <span class="carousel-control-next-icon"><i
-                                                class="fa fa-chevron-right" style="font-size:24px"></i></span> </a>
-                                </div>
-                            </section>
-                        </div>
-                    </div>
-                    <!-- END OF TAB LIST -->
-                </div>
-            </div>
-        </section>
-        <!-- Suggested Products -->
-        <section class="oe_container" style="padding:2rem 3rem 1rem; max-width:1540px; margin: 0 auto; ">
-            <h2 style="font-weight:600; text-align:center; margin-bottom:1rem; width:100%">
-                Suggested Products</h2>
-            <hr
-                style="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 id="suggestedSlider" class="row carousel slide mt-4" data-ride="carousel">
-                <!-- The slideshow -->
-                <div class="carousel-inner">
-                    <div class="carousel-item" style="min-height: 191px;">
-                        <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/project_task_timer/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_task_timer.png?ae168aa">
-                                </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/project_report_pdf/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_repo.png?ae168aa">
-                                </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/project_custom_gantt/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_gantt.png?ae168aa">
-                                </div>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="carousel-item active" style="min-height: 191px;">
-                        <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
-                            <a href="https://apps.odoo.com/apps/modules/12.0/project_task_timer/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/task_image.png?ae168aa">
-                                </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/task_deadline_reminder/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/reminder.png?ae168aa">
-                                </div>
-                            </a>
-                        </div>
-                        <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
-                            <a href="https://apps.odoo.com/apps/modules/12.0/project_report_pdf/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_report.png?ae168aa">
-                                </div>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <!-- Left and right controls -->
-                <a class="carousel-control-prev" href="#suggestedSlider" data-slide="prev"
-                    style="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="#suggestedSlider" data-slide="next" style="width:35px; color:#000">
-                    <span class="carousel-control-next-icon"><i class="fa fa-chevron-right"
-                            style="font-size:24px"></i></span>
-                </a>
-            </div>
-        </section>
-        <!-- End of Suggested Products -->
-        <!-- Our Services -->
-        <section class="oe_container" style="padding:2rem 3rem 1rem">
-            <!-- <h2 style="font-weight:600; text-align:center; margin-bottom:1rem; width:100%">Our Services</h2>
-        <hr
-        style="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 mt-4 position-relative" style="max-width:1540px; margin: 0 auto;">
-                <div class="col-lg-12 jumbotron text-white position-relative"
-                    style="background: #9ACD32; border-radius: 10px;">
-                    <span class="badge badge-pill px-3 py-2 text-white shadow-sm  font-weight-bold"
-                        style="background-color: #377DFF;"><i class="fa fa-trophy mr-2"></i>Odoo Gold Partner</span>
-                    <div class="row">
-                        <div class="col-lg-12 mt-4">
-                            <h1 class="text-dark">Our Services</h1>
-                            <p class="lead text-dark">We provide following services</p>
-                            <div class="row d-flex flex-row justify-content-start flex-wrap mt-4 pl-4">
-                                <a class="text-dark"
-                                    href="https://www.cybrosys.com/odoo-customization-and-installation/"
-                                    style="color: white; text-decoration: none;" target="_blank">
-                                    <div class="bg-white deep-2 d-flex flex-column justify-content-center align-items-center rounded"
-                                        style="padding: 2rem; margin-right: 1rem; height: 150px; width: 150px;">
-                                        <i class="fa fa-cogs mr-2 mt-2" style="color: #377DFF; font-size: 3rem"></i>
-                                        <h6 class="text-center mt-3" style="color: #000;">Odoo Customization</h6>
-                                    </div>
-                                </a>
-                                <a class="text-dark" href="https://www.cybrosys.com/odoo-erp-implementation/"
-                                    style="color: white; text-decoration: none;" target="_blank">
-                                    <div class="bg-white deep-2 d-flex flex-column justify-content-center align-items-center rounded"
-                                        style="padding: 2rem;  margin-right: 1rem; height: 150px; width: 150px;">
-                                        <i class="fa fa-wrench mr-2 mt-2" style="color: #377DFF; font-size: 3rem"></i>
-                                        <h6 class="text-center mt-3" style="color: #000;">Odoo Implementation</h6>
-                                    </div>
-                                </a>
-                                <a class="text-dark" href="https://www.cybrosys.com/odoo-erp-support/"
-                                    style="color: white; text-decoration: none;" target="_blank">
-                                    <div class="bg-white deep-2 d-flex flex-column justify-content-center align-items-center rounded"
-                                        style="padding: 2rem;  margin-right: 1rem; height: 150px; width: 150px;">
-                                        <i class="fa fa-life-ring mr-2 mt-2"
-                                            style="color: #377DFF; font-size: 3rem"></i>
-                                        <h6 class="text-center mt-3" style="color: #000;">Odoo Support</h6>
-                                    </div>
-                                </a>
-                                <a class="text-dark" href="https://www.cybrosys.com/hire-odoo-developer/"
-                                    style="text-decoration: none;" target="_blank">
-                                    <div class="bg-white deep-2 d-flex flex-column justify-content-center align-items-center rounded"
-                                        style="padding: 2rem;  margin-right: 1rem; height: 150px; width: 150px;">
-                                        <i class="fa fa-user mr-2 mt-2" style="color: #377DFF; font-size: 3rem"></i>
-                                        <h6 class="text-center mt-3" style="color: #000;">Hire Odoo Developers</h6>
-                                    </div>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <!-- End of Our Services -->
-        <!-- Our Industries -->
-        <section class="oe_container" style="padding:2rem 3rem 1rem">
-            <div class="row" style="max-width:1540px; margin: 0 auto; ">
-                <div class="col-lg-12">
-                    <h2 style="font-weight:600; text-align:center; margin-bottom:1rem; width:100%">
-                        Our
-                        Industries</h2>
-                    <hr
-                        style="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>
-                <div class="row mt-4 position-relative" style="max-width:1540px; margin: 0 auto;">
-                    <!-- Left Column -->
-                    <div class="col-lg-6">
-
-                        <div class="bg-white shadow px-4 py-3 mb-3" style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/best-trading-erp/" target="_blank"
-                                class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/trading.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Trading</h4>
-                                        <p style="font-weight: 300;">Easily
-                                            procure and sell your products</p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-                        <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/education-erp-software/" target="_blank"
-                                class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/education.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Education</h4>
-                                        <p style="font-weight: 300;">A
-                                            Collaborative platform for
-                                            educational
-                                            management</p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-                        <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/manufacturing-erp-software/"
-                                target="_blank" class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/manufacturing.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Manufacturing</h4>
-                                        <p style="font-weight: 300;">Plan, track
-                                            and schedule your operations</p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-                        <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/ecommerce-website/" target="_blank"
-                                class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/ecom.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            E-commerce & Website</h4>
-                                        <p style="font-weight: 300;">Mobile
-                                            friendly, awe-inspiring product
-                                            pages
-                                        </p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- End of Left Column -->
-                    <!-- Right Column -->
-                    <div class="col-lg-6">
-
-                        <div class="bg-white shadow px-4 py-3 mb-3" style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/pos/" target="_blank" class="text-dark"
-                                style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/pos.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            POS</h4>
-                                        <p style="font-weight: 300;">Easy
-                                            configuring and convivial
-                                            selling</p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-
-                        <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/service-management/" target="_blank"
-                                class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/service.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Service Management</h4>
-                                        <p style="font-weight: 300;">Keep track
-                                            of services and invoice accordingly
-                                        </p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-                        <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/restaurant-management/" target="_blank"
-                                class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/restaurant.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Restaurant</h4>
-                                        <p style="font-weight: 300;">Run your
-                                            bar or restaurant methodica</p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-                        <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/hotel-management-erp/" target="_blank"
-                                class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/hotel.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Hotel Management</h4>
-                                        <p style="font-weight: 300;">An
-                                            all-inclusive hotel management
-                                            application
-                                        </p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- End of Right Column -->
-                </div>
-            </div>
-        </section>
-        <!-- End of Our Industries-->
-        <!-- Footer Section -->
-        <section class="oe_container" style="padding:2rem 3rem 1rem">
-            <div class="row" style="max-width:1540px; margin: 0 auto; ">
-                <div class="col-lg-12 mb-4">
-                    <h2 style="font-weight:600; text-align:center; margin-bottom:1rem; width:100%">
-                        Need Help?</h2>
-                    <hr
-                        style="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>
-            </div>
-
-            <!-- Contact Cards -->
-            <div class="row d-flex justify-content-center align-items-center" style="max-width:1540px; margin: 0 auto;">
-                <div class="col-lg-3  shadow mt-2"
-                    style="padding: 5rem 2rem 2rem; border-radius: 10px; margin-right: 3rem;  border-top: 7px solid #546E7A; height: 300px;">
-                    <h5 class="font-weight-bold" style="font-family: Roboto, 'sans-serif';">Visit us</h5>
-                    <p class="mb-4" style="color: #808e9b; font-size: 0.9rem;">
-                        Visit our website for more
-                        information.</p>
-                    <a href="https://cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
-                        style="text-decoration: none; background-color: #546E7A; color: #FFF;  border-radius: 4px;">www.cybrosys.com</a>
-                </div>
-
-                <div class="col-lg-3  shadow mt-2"
-                    style="padding: 5rem 2rem 2rem; border-radius: 10px; margin-right: 3rem;  border-top: 7px solid #b22126; height: 330px;">
-                    <h5 class="font-weight-bold" style="font-family: Roboto, 'sans-serif';">Write to
-                        us</h5>
-                    <p class="mb-4" style="color: #808e9b; font-size: 0.9rem;">
-                        Do you have any queries regarding our
-                        products &amp; services? Let us know.</p>
-                    <a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
-                        style="text-decoration: none;  background-color: #b22126; color: #FFF;  border-radius: 4px;">odoo@cybrosys.com</a>
-                    <a href="mailto:info@cybrosys.com" target="_blank" class="btn btn-block deep_hover"
-                        style="text-decoration: none; background-color: #b22126; color: #FFF;  border-radius: 4px;">info@cybrosys.com</a>
-                </div>
-                <div class="col-lg-3  shadow mt-2"
-                    style="padding: 5rem 2rem 2rem; border-radius: 10px; margin-right: 3rem;  border-top: 7px solid #546E7A; height: 300px;">
-                    <h5 class="font-weight-bold" style="font-family: Roboto, 'sans-serif';">Follow
-                        Us</h5>
-                    <p class="mb-4" style="color: #808e9b; font-size: 0.9rem;">
-                        Follow us on social media for latest
-                        updates.</p>
-                    <div class="d-flex justify-content-begin align-items-center">
-                        <a href="https://www.facebook.com/cybrosystechnologies" target="_blank"
-                            class="btn mb-2 mr-2 deep_hover d-flex justify-content-center align-items-center"
-                            style="text-decoration: none; background-color:#3b5998; color: #fff; height: 35px; width: 35px;  border-radius: 4px;"><i
-                                class="fa fa-facebook"></i></a>
-
-                        <a href="https://twitter.com/cybrosys" target="_blank"
-                            class="btn mb-2 mr-2 deep_hover d-flex justify-content-center align-items-center"
-                            style="text-decoration: none; background-color:#00acee ; color: #fff ; height: 35px; width: 35px;  border-radius: 4px;"><i
-                                class="fa fa-twitter"></i></a>
-
-                        <a href="https://www.youtube.com/channel/UCKjWLm7iCyOYINVspCSanjg" target="_blank"
-                            class="btn mb-2 mr-2 deep_hover d-flex justify-content-center align-items-center"
-                            style="text-decoration: none; background-color:#FF0000 ; color: #fff ; height: 35px; width: 35px;  border-radius: 4px;"><i
-                                class="fa fa-play"></i></a>
-                        <a href="https://medium.com/cybrosys" target="_blank"
-                            class="btn mb-2 deep_hover d-flex justify-content-center align-items-center"
-                            style="text-decoration: none; background-color:#000  ; color: #fff  ; height: 35px; width: 35px;  border-radius: 4px;"><i
-                                class="fa fa-medium"></i></a>
-                    </div>
-
-                </div>
-                <!-- End of Contact Cards -->
-            </div>
-        </section>
-    </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: 4rem;">
-                <img src="https://www.cybrosys.com/images/logo.png" width="200px" height="auto" />
-            </div>
-            <!-- End of Logo -->
-            <div class="col-lg-12" style="margin-top: 2rem;">
-                <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>
\ No newline at end of file
+<!-- HERO SECTION -->
+<section class="container">
+    <div class="row">
+        <div class="col-lg-6" style="background-color:#CB114A !important; padding: 4rem 2.5rem 6rem;">
+            <hr style="border: 2px solid #fff; width: 150px; margin-left: 0;">
+            <p
+                style="font-family: Tahoma, 'sans-serif'; font-size: 18px; font-weight: 400; color: #FFF; margin-top: 1.6rem;">
+                Odoo Apps
+            </p>
+            <h1 style="font-family: Montserrat, 'sans-serif'; font-weight: 700; color: #FFF; margin-top: -1rem;">
+                Support<br>Package Management
+            </h1>
+            <p style="font-family: Tahoma, 'sans-serif'; font-size: 18px; font-weight: 500; color: #FFF;">
+                Support service and package management module.
+            </p>
+            <h2 style="font-size: 26px; color: #fff; text-transform: uppercase; margin-top: 3rem;">Key Highlights
+            </h2>
+            <!-- KEY HIGHLIGHTS -->
+            <div class="d-flex mt-2">
+                <div class="d-flex justify-content-center align-items-center mr-1"
+                    style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                    <img src="./assets/arrow-circle-black.png" height="26px" width="26px">
+                </div>
+                <div class="d-flex justify-content-start align-items-center"
+                    style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                    <p
+                        style="font-family: Tahoma, 'sans-serif'; font-size: 13px; font-weight: 600; color: #000; margin-top: 1rem;">
+                        Easy to create, monitor and manage support service</p>
+                </div>
+            </div>
+            <div class="d-flex mt-2">
+                <div class="d-flex justify-content-center align-items-center mr-1"
+                    style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                    <img src="./assets/arrow-circle-black.png" height="26px" width="26px">
+                </div>
+                <div class="d-flex justify-content-start align-items-center"
+                    style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                    <p
+                        style="font-family: Tahoma, 'sans-serif'; font-size: 13px; font-weight: 600; color: #000; margin-top: 1rem;">
+                        Can reuse packages with the help of templates.</p>
+                </div>
+            </div>
+
+            <div class="d-flex mt-2">
+                <div class="d-flex justify-content-center align-items-center mr-1"
+                    style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                    <img src="./assets/arrow-circle-black.png" height="26px" width="26px">
+                </div>
+                <div class="d-flex justify-content-start align-items-center"
+                    style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                    <p
+                        style="font-family: Tahoma, 'sans-serif'; font-size: 13px; font-weight: 600; color: #000; margin-top: 1rem;">
+                        Management of customers are similar to project management.</p>
+                </div>
+            </div>
+            <!-- END OF KEY HIGHLIGHTS -->
+        </div>
+        <div class="col-lg-6">
+            <!-- HERO IMAGE -->
+            <img src="./assets/hero.png" width="100%" height="auto" class="img img-responsive">
+            <!-- END OF HERO IMAGE-->
+        </div>
+    </div>
+</section>
+<!-- END OF HERO SECTION -->
+
+<!-- OVERVIEW SECTION -->
+<section class="container">
+    <div class="row">
+        <div class="col-lg-12" style="background-color:#ffffff !important; padding: 4rem 2.5rem;">
+            <hr style="border: 2px solid #000; width: 150px; margin-left: 0;">
+            <p
+                style="font-family: Tahoma, 'sans-serif'; font-size: 18px; font-weight: 400; color: #000; margin-top: 1.6rem;">
+                Odoo Apps
+            </p>
+            <h1
+                style="font-family: Montserrat, 'sans-serif'; font-weight: 700; color: #000; margin-top: -1rem; text-transform: uppercase;">
+                Overview
+            </h1>
+            <p style="font-family: Tahoma, 'sans-serif'; font-size: 18px; font-weight: 500; color: #000; width: 90%;">
+                Support package module is a support management app. It enables users to create, manage, optimize,
+                and monitor the entire service request from a centralized application.
+            </p>
+        </div>
+    </div>
+</section>
+<!-- END OF OVERVIEW SECTION -->
+
+<!-- FEATURES SECTION -->
+<section class="container">
+    <div class="row">
+        <div class="col-lg-6" style="background-color:#D4D4D4 !important; padding: 4rem 2.5rem;">
+            <img src="./assets/respnsive-img.png" width="100%" height="auto" class="img img-responsive">
+        </div>
+        <div class="col-lg-6" style="background-color:#D4D4D4 !important; padding: 4rem 2.5rem;">
+            <hr style="border: 2px solid #000; width: 150px; margin-left: 0;">
+            <p
+                style="font-family: Tahoma, 'sans-serif'; font-size: 18px; font-weight: 400; color: #000; margin-top: 1.6rem;">
+                Odoo Apps
+            </p>
+            <h1
+                style="font-family: Montserrat, 'sans-serif'; font-weight: 700; color: #000; margin-top: -1rem; text-transform: uppercase;">
+                Features
+            </h1>
+            <div class="d-flex mt-2">
+                <div class="d-flex justify-content-center align-items-center mr-1  deep-2"
+                    style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                    <img src="./assets/arrow-circle-magenta.png" height="26px" width="26px">
+                </div>
+                <div class="d-flex justify-content-start align-items-center  deep-2"
+                    style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                    <p
+                        style="font-family: Tahoma, 'sans-serif'; font-size: 12px; font-weight: 600; color: #000; margin-top: 1rem;">
+                        Easy to create, monitor and manage support service.</p>
+                </div>
+            </div>
+            <div class="d-flex mt-2">
+                <div class="d-flex justify-content-center align-items-center mr-1  deep-2"
+                    style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                    <img src="./assets/arrow-circle-magenta.png" height="26px" width="26px">
+                </div>
+                <div class="d-flex justify-content-start align-items-center  deep-2"
+                    style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                    <p
+                        style="font-family: Tahoma, 'sans-serif'; font-size: 13px; font-weight: 600; color: #000; margin-top: 1rem;">
+                        Management of customers are similar to project management.</p>
+                </div>
+            </div>
+            <div class="d-flex mt-2">
+                <div class="d-flex justify-content-center align-items-center mr-1  deep-2"
+                    style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                    <img src="./assets/arrow-circle-magenta.png" height="26px" width="26px">
+                </div>
+                <div class="d-flex justify-content-start align-items-center  deep-2"
+                    style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                    <p
+                        style="font-family: Tahoma, 'sans-serif'; font-size: 13px; font-weight: 600; color: #000; margin-top: 1rem;">
+                        Can reuse packages with the help of templates.</p>
+                </div>
+            </div>
+            <div class="d-flex mt-2">
+                <div class="d-flex justify-content-center align-items-center mr-1  deep-2"
+                    style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                    <img src="./assets/arrow-circle-magenta.png" height="26px" width="26px">
+                </div>
+                <div class="d-flex justify-content-start align-items-center  deep-2"
+                    style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                    <p
+                        style="font-family: Tahoma, 'sans-serif'; font-size: 13px; font-weight: 600; color: #000; margin-top: 1rem;">
+                        Renewal badge appears ones end date is closer or number of tickets remaining is very less.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- END OF FEATURES SECTION -->
+
+<!-- SCREENSHOTS SECTION -->
+<section class="container">
+    <div class="row">
+        <div class="col-lg-12" style="background-color:#ffffff !important; padding: 4rem 2.5rem;">
+            <hr style="border: 2px solid #CB114A; width: 150px; margin-left: 0;">
+            <p
+                style="font-family: Tahoma, 'sans-serif'; font-size: 18px; font-weight: 400; color: #000; margin-top: 1.6rem;">
+                Odoo Apps
+            </p>
+            <h1
+                style="font-family: Montserrat, 'sans-serif'; font-weight: 700; color: #000; margin-top: -1rem; margin-bottom: 1rem; text-transform: uppercase;">
+                SCREENSHOTS
+            </h1>
+        </div>
+        <div class="col-lg-12" style="background-color:#CB114A !important; padding: 2.5rem; border-radius: 8px;">
+            <div id="odooAppsIndicators" class="carousel slide" data-ride="carousel">
+                <ol class="carousel-indicators"
+                    style="position: absolute !important; bottom: -90px !important; left: -65.5rem !important">
+                    <li data-target="#odooAppsIndicators" data-slide-to="0" class="active"
+                        style="height: 15px !important; width: 15px !important; background-color: #000 !important;">
+                    </li>
+                    <li data-target="#odooAppsIndicators" data-slide-to="1"
+                        style="height: 15px !important; width: 15px !important; background-color: #000 !important;">
+                    </li>
+                    <li data-target="#odooAppsIndicators" data-slide-to="2"
+                        style="height: 15px !important; width: 15px !important; background-color: #000 !important;">
+                    </li>
+                    <li data-target="#odooAppsIndicators" data-slide-to="3"
+                        style="height: 15px !important; width: 15px !important; background-color: #000 !important;">
+                    </li>
+                    <li data-target="#odooAppsIndicators" data-slide-to="4"
+                        style="height: 15px !important; width: 15px !important; background-color: #000 !important;">
+                    </li>
+                    <li data-target="#odooAppsIndicators" data-slide-to="5"
+                        style="height: 15px !important; width: 15px !important; background-color: #000 !important;">
+                    </li>
+                </ol>
+                <div class="carousel-inner">
+                    <div class="carousel-item active" style="overflow: visible;">
+                        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16 d-flex w-100"
+                            style="float:left; margin-bottom: 1rem; margin-left: -15px;">
+                            <div class="d-flex justify-content-center align-items-center mr-1 deep-2"
+                                style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                                <img src="./assets/arrow-circle-black.png" height="26px" width="26px">
+                            </div>
+                            <div class="d-flex justify-content-start align-items-center deep-2"
+                                style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                                <p
+                                    style="font-family: Tahoma, 'sans-serif'; font-size: 12px; font-weight: 600; color: #000; margin-top: 1rem;">
+                                    Creating support packages with information like maximum number of tickets, maximum
+                                    duration of each ticket, validity of package, this will automatically create this
+                                    package as a product.</p>
+                            </div>
+                        </div>
+                        <img class="d-block w-100" src="./assets/screenshots/support_1.png" alt="First slide">
+                    </div>
+
+                    <div class="carousel-item" style="overflow: visible;">
+                        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16 d-flex w-100"
+                            style="float:left; margin-bottom: 1rem; margin-left: -15px;">
+                            <div class="d-flex justify-content-center align-items-center mr-1 deep-2"
+                                style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                                <img src="./assets/arrow-circle-black.png" height="26px" width="26px">
+                            </div>
+                            <div class="d-flex justify-content-start align-items-center deep-2"
+                                style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                                <p
+                                    style="font-family: Tahoma, 'sans-serif'; font-size: 13px; font-weight: 600; color: #000; margin-top: 1rem;">
+                                    Create sale order to customer with required package as product, then the customer
+                                    will be created in support packages</p>
+                            </div>
+                        </div>
+                        <img class="d-block w-100" src="./assets/screenshots/support_2.png" alt="First slide">
+                    </div>
+
+                    <div class="carousel-item " style="overflow: visible;">
+                        <!-- <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16 d-flex w-50"
+                                style="float:left; margin-bottom: 1rem; margin-left: -15px;">
+                                <div class="d-flex justify-content-center align-items-center mr-1 deep-2"
+                                    style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                                    <img src="./assets/arrow-circle-black.png" height="26px" width="26px">
+                                </div>
+                                <div class="d-flex justify-content-start align-items-center deep-2"
+                                    style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                                    <p
+                                        style="font-family: Tahoma, 'sans-serif'; font-size: 14px; font-weight: 600; color: #000; margin-top: 1rem;">
+                                        Easy to create, monitor and manage support service</p>
+                                </div>
+                            </div> -->
+                        <img class="d-block w-100" src="./assets/screenshots/support_3.png" alt="First slide">
+                    </div>
+
+                    <div class="carousel-item" style="overflow: visible;">
+                        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16 d-flex w-50"
+                            style="float:left; margin-bottom: 1rem; margin-left: -15px;">
+                            <div class="d-flex justify-content-center align-items-center mr-1 deep-2"
+                                style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                                <img src="./assets/arrow-circle-black.png" height="26px" width="26px">
+                            </div>
+                            <div class="d-flex justify-content-start align-items-center deep-2"
+                                style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                                <p
+                                    style="font-family: Tahoma, 'sans-serif'; font-size: 13px; font-weight: 600; color: #000; margin-top: 1rem;">
+                                    Information shown customer Kanban view</p>
+                            </div>
+                        </div>
+                        <img class="d-block w-100" src="./assets/screenshots/support_4.png" alt="First slide">
+                    </div>
+
+                    <div class="carousel-item" style="overflow: visible;">
+                        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16 d-flex w-50"
+                            style="float:left; margin-bottom: 1rem; margin-left: -15px;">
+                            <div class="d-flex justify-content-center align-items-center mr-1 deep-2"
+                                style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                                <img src="./assets/arrow-circle-black.png" height="26px" width="26px">
+                            </div>
+                            <div class="d-flex justify-content-start align-items-center deep-2"
+                                style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                                <p
+                                    style="font-family: Tahoma, 'sans-serif'; font-size: 13px; font-weight: 600; color: #000; margin-top: 1rem;">
+                                    Report</p>
+                            </div>
+                        </div>
+                        <img class="d-block w-100" src="./assets/screenshots/support_5.png" alt="First slide">
+                    </div>
+
+                    <div class="carousel-item" style="overflow: visible;">
+                        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16 d-flex w-100"
+                            style="float:left; margin-bottom: 1rem; margin-left: -15px;">
+                            <div class="d-flex justify-content-center align-items-center mr-1 deep-2"
+                                style="background-color: #fff; height: 40px; width: 40px; border-radius: 2px !important;">
+                                <img src="./assets/arrow-circle-black.png" height="26px" width="26px">
+                            </div>
+                            <div class="d-flex justify-content-start align-items-center deep-2"
+                                style="background-color: #fff; height: 40px; width: 100%; border-radius: 2px !important; padding: 10px">
+                                <p
+                                    style="font-family: Tahoma, 'sans-serif'; font-size: 13px; font-weight: 600; color: #000; margin-top: 1rem;">
+                                    Can create templates so that it helps in creating similar support packages</p>
+                            </div>
+                        </div>
+                        <img class="d-block w-100" src="./assets/screenshots/support_6.png" alt="First slide">
+                    </div>
+
+                </div>
+                <!-- <a class="carousel-control-prev" href="#odooAppsIndicators" role="button" data-slide="prev">
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" href="#odooAppsIndicators" role="button" data-slide="next">
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Next</span>
+                    </a> -->
+            </div>
+        </div>
+    </div>
+</section>
+<!-- END OF SCREENSHOTS SECTION-->
+
+<section class="container">
+    <div class="row">
+        <div class="col-lg-12" style="background-color:#ffffff !important; padding: 4rem 2.5rem;">
+            <hr style="border: 2px solid #CB114A; width: 150px; margin-left: 0;">
+            <p
+                style="font-family: Tahoma, 'sans-serif'; font-size: 18px; font-weight: 400; color: #000; margin-top: 1.6rem;">
+                Odoo Apps
+            </p>
+            <h1
+                style="font-family: Montserrat, 'sans-serif'; font-weight: 700; color: #000; margin-top: -1rem; margin-bottom: 0rem; text-transform: uppercase;">
+                Suggested Products
+            </h1>
+        </div>
+    </div>
+    <div class="col-lg-12">
+        <div id="suggestedSlider" class="row carousel slide" data-ride="carousel">
+            <!-- The slideshow -->
+            <div class="carousel-inner">
+                <div class="carousel-item" style="min-height: 191px;">
+                    <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/project_task_timer/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_task_timer.png?ae168aa">
+                            </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/project_report_pdf/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_repo.png?ae168aa">
+                            </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/project_custom_gantt/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_gantt.png?ae168aa">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <div class="carousel-item active" style="min-height: 191px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/12.0/project_task_timer/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/task_image.png?ae168aa">
+                            </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/task_deadline_reminder/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/reminder.png?ae168aa">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/12.0/project_report_pdf/" 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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_report.png?ae168aa">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Left and right controls -->
+            <!-- <a class="carousel-control-prev" href="#suggestedSlider" data-slide="prev"
+                    style="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="#suggestedSlider" data-slide="next" style="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>
+</section>
+
+<!-- Our Services -->
+<section class="container" style="margin-top: 6rem;">
+    <div class="row mt-4 position-relative" style="max-width:1540px; margin: 0 auto;">
+        <div class="col-lg-12 jumbotron text-white position-relative" style="background: #D4D4D4; border-radius: 10px;">
+            <span class="badge badge-pill px-3 py-2 text-white shadow-sm  font-weight-bold"
+                style="background-color: #CB114A;"><i class="fa fa-trophy mr-2"></i>Odoo Gold Partner</span>
+            <div class="row">
+                <div class="col-lg-12 mt-4">
+                    <h1 style="color: #000;">Our Services</h1>
+                    <p class="lead" style="color: #000;">We provide following services</p>
+                    <div class="row d-flex flex-row justify-content-start flex-wrap mt-4 pl-4">
+                        <a class="text-dark" href="https://www.cybrosys.com/odoo-customization-and-installation/"
+                            style="color: white; text-decoration: none;" target="_blank">
+                            <div class="bg-white deep-2 d-flex flex-column justify-content-center align-items-center rounded"
+                                style="padding: 2rem; margin-right: 1rem; height: 150px; width: 150px;">
+                                <i class="fa fa-cogs mr-2 mt-2" style="color: #CB114A; font-size: 3rem"></i>
+                                <h6 class="text-center mt-3" style="color: #000;">Odoo Customization</h6>
+                            </div>
+                        </a>
+                        <a class="text-dark" href="https://www.cybrosys.com/odoo-erp-implementation/"
+                            style="color: white; text-decoration: none;" target="_blank">
+                            <div class="bg-white deep-2 d-flex flex-column justify-content-center align-items-center rounded"
+                                style="padding: 2rem;  margin-right: 1rem; height: 150px; width: 150px;">
+                                <i class="fa fa-wrench mr-2 mt-2" style="color: #CB114A; font-size: 3rem"></i>
+                                <h6 class="text-center mt-3" style="color: #000;">Odoo Implementation</h6>
+                            </div>
+                        </a>
+                        <a class="text-dark" href="https://www.cybrosys.com/odoo-erp-support/"
+                            style="color: white; text-decoration: none;" target="_blank">
+                            <div class="bg-white deep-2 d-flex flex-column justify-content-center align-items-center rounded"
+                                style="padding: 2rem;  margin-right: 1rem; height: 150px; width: 150px;">
+                                <i class="fa fa-life-ring mr-2 mt-2" style="color: #CB114A; font-size: 3rem"></i>
+                                <h6 class="text-center mt-3" style="color: #000;">Odoo Support</h6>
+                            </div>
+                        </a>
+                        <a class="text-dark" href="https://www.cybrosys.com/hire-odoo-developer/" style=text-decoration:
+                            none;" target="_blank">
+                            <div class="bg-white deep-2 d-flex flex-column justify-content-center align-items-center rounded"
+                                style="padding: 2rem;  margin-right: 1rem; height: 150px; width: 150px;">
+                                <i class="fa fa-user mr-2 mt-2" style="color: #CB114A; font-size: 3rem"></i>
+                                <h6 class="text-center mt-3" style="color: #000;">Hire Odoo Developers</h6>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- End of Our Services -->
+<!-- Our Industries -->
+<section class="container" style="margin-top: 5rem;">
+    <div class="row" style="max-width:1540px; ">
+        <div class="col-lg-12" style="background-color:#ffffff !important; padding: 4rem 2.5rem;">
+            <hr style="border: 2px solid #CB114A; width: 150px; margin-left: 0;">
+            <p
+                style="font-family: Tahoma, 'sans-serif'; font-size: 18px; font-weight: 400; color: #000; margin-top: 1.6rem;">
+                Cybrosys
+            </p>
+            <h1
+                style="font-family: Montserrat, 'sans-serif'; font-weight: 700; color: #000; margin-top: -1rem; margin-bottom: 0rem; text-transform: uppercase;">
+                Our Services
+            </h1>
+        </div>
+        <div class="row mt-4 position-relative" style="max-width:1540px; margin: 0 auto;">
+            <!-- Left Column -->
+            <div class="col-lg-6">
+
+                <div class="bg-white shadow px-4 py-3 mb-3" style="border-radius: 10px;">
+                    <a href="https://www.cybrosys.com/odoo/industries/best-trading-erp/" target="_blank"
+                        class="text-dark" style="text-decoration: none;">
+                        <div class="row">
+                            <div class="col-lg-3 no-gutters">
+                                <img src="./assets/icons/trading.png">
+                            </div>
+                            <div class="col-lg-9 no-gutters pt-3">
+                                <h4 style="font-family: Roboto, 'sans-serif">Trading</h4>
+                                <p style="font-weight: 300;">Easily procure and sell your products</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+
+                <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
+                    <a href="https://www.cybrosys.com/odoo/industries/education-erp-software/" target="_blank"
+                        class="text-dark" style="text-decoration: none;">
+                        <div class="row">
+                            <div class="col-lg-3 no-gutters">
+                                <img src="./assets/icons/education.png">
+                            </div>
+                            <div class="col-lg-9 no-gutters pt-3">
+                                <h4 style="font-family: Roboto, 'sans-serif">Education</h4>
+                                <p style="font-weight: 300;">A Collaborative platform for educational
+                                    management</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+
+                <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
+                    <a href="https://www.cybrosys.com/odoo/industries/manufacturing-erp-software/" target="_blank"
+                        class="text-dark" style="text-decoration: none;">
+                        <div class="row">
+                            <div class="col-lg-3 no-gutters">
+                                <img src="./assets/icons/manufacturing.png">
+                            </div>
+                            <div class="col-lg-9 no-gutters pt-3">
+                                <h4 style="font-family: Roboto, 'sans-serif">Manufacturing</h4>
+                                <p style="font-weight: 300;">Plan, track and schedule your operations</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+
+                <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
+                    <a href="https://www.cybrosys.com/odoo/industries/ecommerce-website/" target="_blank"
+                        class="text-dark" style="text-decoration: none;">
+                        <div class="row">
+                            <div class="col-lg-3 no-gutters">
+                                <img src="./assets/icons/ecom.png">
+                            </div>
+                            <div class="col-lg-9 no-gutters pt-3">
+                                <h4 style="font-family: Roboto, 'sans-serif">E-commerce & Website</h4>
+                                <p style="font-weight: 300;">Mobile friendly, awe-inspiring product pages
+                                </p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <!-- End of Left Column -->
+            <!-- Right Column -->
+            <div class="col-lg-6">
+
+                <div class="bg-white shadow px-4 py-3 mb-3" style="border-radius: 10px;">
+                    <a href="https://www.cybrosys.com/odoo/industries/pos/" target="_blank" class="text-dark"
+                        style="text-decoration: none;">
+                        <div class="row">
+                            <div class="col-lg-3 no-gutters">
+                                <img src="./assets/icons/pos.png">
+                            </div>
+                            <div class="col-lg-9 no-gutters pt-3">
+                                <h4 style="font-family: Roboto, 'sans-serif">POS</h4>
+                                <p style="font-weight: 300;">Easy configuring and convivial selling</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+
+
+                <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
+                    <a href="https://www.cybrosys.com/odoo/industries/service-management/" target="_blank"
+                        class="text-dark" style="text-decoration: none;">
+                        <div class="row">
+                            <div class="col-lg-3 no-gutters">
+                                <img src="./assets/icons/service.png">
+                            </div>
+                            <div class="col-lg-9 no-gutters pt-3">
+                                <h4 style="font-family: Roboto, 'sans-serif">Service Management</h4>
+                                <p style="font-weight: 300;">Keep track of services and invoice accordingly
+                                </p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+
+                <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
+                    <a href="https://www.cybrosys.com/odoo/industries/restaurant-management/" target="_blank"
+                        class="text-dark" style="text-decoration: none;">
+                        <div class="row">
+                            <div class="col-lg-3 no-gutters">
+                                <img src="./assets/icons/restaurant.png">
+                            </div>
+                            <div class="col-lg-9 no-gutters pt-3">
+                                <h4 style="font-family: Roboto, 'sans-serif">Restaurant</h4>
+                                <p style="font-weight: 300;">Run your bar or restaurant methodica</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+
+                <div class="bg-white shadow px-4 py-3 my-3" style="border-radius: 10px;">
+                    <a href="https://www.cybrosys.com/odoo/industries/hotel-management-erp/" target="_blank"
+                        class="text-dark" style="text-decoration: none;">
+                        <div class="row">
+                            <div class="col-lg-3 no-gutters">
+                                <img src="./assets/icons/hotel.png">
+                            </div>
+                            <div class="col-lg-9 no-gutters pt-3">
+                                <h4 style="font-family: Roboto, 'sans-serif">Hotel Management</h4>
+                                <p style="font-weight: 300;">An all-inclusive hotel management application
+                                </p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <!-- End of Right Column -->
+        </div>
+    </div>
+</section>
+<!-- End of Our Industries-->
+<!-- Footer Section -->
+<section class="container">
+    <div class="row" style="max-width:1540px;">
+        <div class="col-lg-12" style="background-color:#ffffff !important; padding: 4rem 2.5rem;">
+            <hr style="border: 2px solid #CB114A; width: 150px; margin-left: 0;">
+            <p
+                style="font-family: Tahoma, 'sans-serif'; font-size: 18px; font-weight: 400; color: #000; margin-top: 1.6rem;">
+                Cybrosys
+            </p>
+            <h1
+                style="font-family: Montserrat, 'sans-serif'; font-weight: 700; color: #000; margin-top: -1rem; margin-bottom: 0rem; text-transform: uppercase;">
+                Need Help?
+            </h1>
+        </div>
+    </div>
+
+    <!-- Contact Cards -->
+    <div class="row d-flex justify-content-center align-items-center" style="max-width:1540px; margin: 0 auto;">
+        <div class="col-lg-3  shadow mt-2"
+            style="padding: 5rem 2rem 2rem; border-radius: 10px; margin-right: 3rem;  border-top: 7px solid #546E7A; height: 300px;">
+            <h5 class="font-weight-bold" style="font-family: Roboto, 'sans-serif';">Visit us</h5>
+            <p class="mb-4" style="color: #808e9b; font-size: 0.9rem;">Visit our website for more
+                information.</p>
+            <a href="https://cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
+                style="text-decoration: none; background-color: #546E7A; color: #FFF;  border-radius: 4px;">www.cybrosys.com</a>
+        </div>
+
+        <div class="col-lg-3  shadow mt-2"
+            style="padding: 5rem 2rem 2rem; border-radius: 10px; margin-right: 3rem;  border-top: 7px solid #b22126; height: 330px;">
+            <h5 class="font-weight-bold" style="font-family: Roboto, 'sans-serif';">Write to us</h5>
+            <p class="mb-4" style="color: #808e9b; font-size: 0.9rem;">Do you have any queries regarding our
+                products &amp; services? Let us know.</p>
+            <a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
+                style="text-decoration: none;  background-color: #b22126; color: #FFF;  border-radius: 4px;">odoo@cybrosys.com</a>
+            <a href="mailto:info@cybrosys.com" target="_blank" class="btn btn-block deep_hover"
+                style="text-decoration: none; background-color: #b22126; color: #FFF;  border-radius: 4px;">info@cybrosys.com</a>
+        </div>
+
+        <div class="col-lg-3  shadow mt-2"
+            style="padding: 5rem 2rem 2rem; border-radius: 10px; margin-right: 3rem;  border-top: 7px solid #546E7A; height: 300px;">
+            <h5 class="font-weight-bold" style="font-family: Roboto, 'sans-serif';">Follow Us</h5>
+            <p class="mb-4" style="color: #808e9b; font-size: 0.9rem;">Follow us on social media for latest
+                updates.</p>
+            <div class="d-flex justify-content-begin align-items-center">
+                <a href="https://www.facebook.com/cybrosystechnologies" target="_blank"
+                    class="btn mb-2 mr-2 deep_hover d-flex justify-content-center align-items-center"
+                    style="text-decoration: none; background-color:#3b5998; color: #fff; height: 35px; width: 35px;  border-radius: 4px;"><i
+                        class="fa fa-facebook"></i></a>
+
+                <a href="https://twitter.com/cybrosys" target="_blank"
+                    class="btn mb-2 mr-2 deep_hover d-flex justify-content-center align-items-center"
+                    style="text-decoration: none; background-color:#00acee ; color: #fff ; height: 35px; width: 35px;  border-radius: 4px;"><i
+                        class="fa fa-twitter"></i></a>
+
+                <a href="https://www.youtube.com/channel/UCKjWLm7iCyOYINVspCSanjg" target="_blank"
+                    class="btn mb-2 mr-2 deep_hover d-flex justify-content-center align-items-center"
+                    style="text-decoration: none; background-color:#FF0000 ; color: #fff ; height: 35px; width: 35px;  border-radius: 4px;"><i
+                        class="fa fa-play"></i></a>
+                <a href="https://medium.com/cybrosys" target="_blank"
+                    class="btn mb-2 deep_hover d-flex justify-content-center align-items-center"
+                    style="text-decoration: none; background-color:#000  ; color: #fff  ; height: 35px; width: 35px;  border-radius: 4px;"><i
+                        class="fa fa-medium"></i></a>
+            </div>
+
+        </div>
+        <!-- End of Contact Cards -->
+    </div>
+</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: 4rem;">
+            <img src="https://www.cybrosys.com/images/logo.png" width="200px" height="auto" />
+        </div>
+        <!-- End of Logo -->
+        <div class="col-lg-12" style="margin-top: 2rem;">
+            <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>
\ No newline at end of file