y<!-- Hero Section -->
<div class="container pt-4 mt-4 rounded" style="background-color: #f0f2f4; font-family: Montserrat, 'sans-serif';">
    <div class="row">
        <div class="col-lg-12 mb-4">
            <img src="images/Cybrosys.png" alt="Cybrosys Logo" style="width: 120px; height: auto;">
            <hr style="border-color: #e1e5e9;" />
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 text-center">
            <img src="images/hero.png" width=60% height="auto" class="mb-4" alt="Theme Screenshot">
        </div>
        <div class="col-lg-12 text-center">
            <h1 class="mt-4">The Chef</h1>
            <p class="lead mb-4" style="max-width: 700px; margin: 0 auto;">
                Theme The Chef is a popular attractive and unique front end theme for your restaurant website. Many
                custom designed snippets facilitates to add better user experience. Just drag & drop the building
                blocks you need to easily build your layout. All layouts are made of sections, that you can easily
                combine to fit your specific project.It has simple and more attractive snippets.
            </p>
        </div>
    </div>

    <!-- End of Hero Section -->

    <!-- Alternate Section -->
    <div class="row p-4">
        <div class="col-lg-6 px-4" style="margin-top: 100px;">
            <h2>Desktop View</h2>
            <p class="lead">
                It is easy to customize and use. Just drag and drop the building blocks to make attractive webpages.
            </p>
        </div>
        <div class="col-lg-6 px-4">
            <img style="border-radius: 0.5em;" src="images/laptop-screenshots.jpg" width="90%" height="auto"
                class="mb-4 shadow-sm" alt="Theme Screenshot">
        </div>
    </div>
    <div class="row p-4">
        <div class="col-lg-6 px-4">
            <img style="border-radius: 0.5em;" src="images/phone-screenshots.jpg" width="90%" height="auto"
                class="mb-4 shadow-sm" alt="Theme Screenshot">
        </div>
        <div class="col-lg-6 px-4" style="margin-top: 100px;">
            <h2>Mobile View</h2>
            <p class="lead">
                User friendly and modern looking theme makes your page more Stylish And Beautiful.
            </p>
        </div>
    </div>
    <!-- End of Alternate Section -->


    <!-- Two Columns Section -->
    <div class="row p-4">
        <!-- Column 1 -->
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-12">
                    <img style="border-radius: 0.5em;" src="images/1.jpg" width="100%" height="auto"
                        class="mb-4 shadow-sm" alt="Theme Screenshot">
                </div>
                <div class="col-lg-12 mt-4">
                    <h2 class="text-center">Main Banner with Slider</h2>
                    <p class="lead text-center">
                        It is easy to customize and use. Just drag and drop the building blocks to make attractive
                        webpages.
                    </p>
                </div>
            </div>
        </div>
        <!-- End of Column 1 -->

        <!-- Column 2 -->
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-12">
                    <img style="border-radius: 0.5em;" src="images/2.jpg" width="100%" height="auto"
                        class="mb-4 shadow-sm" alt="Theme Screenshot">
                </div>
                <div class="col-lg-12 mt-4">
                    <h2 class="text-center">Reservation Form</h2>
                    <p class="lead text-center">
                        It is easy to customize and use. Just drag and drop the building blocks to make attractive
                        webpages.We can make reservations and store each details in database.
                    </p>
                </div>
            </div>
        </div>
        <!-- End of Column 2 -->
    </div>
    <!-- End of Two Columns Section -->


    <!-- One Column Section -->
    <div class="row p-4">
        <div class="col-lg-6">
            <img style="border-radius: 0.5em;" src="images/3.jpg" width="90%" height="auto" class="mb-4 shadow-sm"
                alt="Theme Screenshot">
        </div>
        <div class="col-lg-6" style="padding-top: 100px;">
            <h2>Overview</h2>
            <p class="lead">
                It is easy to customize and use. Just drag and drop the building blocks to make attractive webpages.
            </p>
        </div>
    </div>
    <!-- End of Two Columns Section -->

    <!-- Two Columns Section -->
    <div class="row p-4">
        <!-- Column 1 -->
        <div class="col-lg-4">
            <div class="row">
                <div class="col-lg-12">
                    <img style="border-radius: 0.5em;" src="images/4.jpg" width="100%" height="auto"
                        class="mb-4 shadow-sm" alt="Theme Screenshot">
                </div>
                <div class="col-lg-12 mt-4">
                    <h2 class="text-center">Testimonial Snippet</h2>
                    <p class="lead text-center">
                        It is easy to customize and use. Just drag and drop the building blocks to make attractive
                        webpages.
                    </p>
                </div>
            </div>
        </div>
        <!-- End of Column 1 -->

        <!-- Column 2 -->
        <div class="col-lg-4">
            <div class="row">
                <div class="col-lg-12">
                    <img style="border-radius: 0.5em;" src="images/5.jpg" width="100%" height="auto"
                        class="mb-4 shadow-sm" alt="Theme Screenshot">
                </div>
                <div class="col-lg-12 mt-4">
                    <h2 class="text-center">Main Dishes Snippet</h2>
                    <p class="lead text-center">
                        It is easy to customize and use. Just drag and drop the building blocks to make attractive
                        webpages.
                    </p>
                </div>
            </div>
        </div>
        <!-- End of Column 2 -->


        <!-- Column 4 -->
        <div class="col-lg-4">
            <div class="row">
                <div class="col-lg-12">
                    <img style="border-radius: 0.5em;" src="images/6.jpg" width="100%" height="auto"
                        class="mb-4 shadow-sm" alt="Theme Screenshot">
                </div>
                <div class="col-lg-12 mt-4">
                    <h2 class="text-center">Menu Snippet</h2>
                    <p class="lead text-center">
                        It is easy to customize and use. Just drag and drop the building blocks to make attractive
                        webpages.
                    </p>
                </div>
            </div>
        </div>
        <!-- End of Column 4 -->
    </div>
    <!-- End of Two Columns Section -->

    <!-- Demo Pages -->
    <section class="oe_container">
        <div class="row" style="margin: 60px auto -30px;">
            <div class="col-lg-12 text-center">
                <h4 class="mt-4">Demo Sections</h4>
                <hr style="border-width: 3px; border-color: #0984e3; width: 100px;">
            </div>
        </div>

        <div class="row" style="margin: 40px auto; border-radius: 15px; padding: 38px;">
            <div class="col-sm-6 col-md-4 px-2">
                <div class="bg-white shadow overflow-hidden mb32"
                    style="border-radius: 15px; width: 300px; padding-bottom: 0; margin-right: 30px;">
                    <img src="./images/demo-1.jpg" width="300px" height="auto">
                    <h6 class="text-center my-3">Hero Slider &amp; Blogs</h6>
                    <hr style="border-width: 5px; border-color: #0984e3; width: 150px; margin-bottom: 0;">
                </div>
            </div>

            <div class="col-sm-6 col-md-4 px-2">
                <div class="bg-white shadow overflow-hidden mb32"
                    style="border-radius: 15px; width: 300px; padding-bottom: 0;">
                    <img src="./images/demo-2.jpg" width="300px" height="auto">
                    <h6 class="text-center my-3">Menu &amp; Testimonial</h6>
                    <hr style="border-width: 5px; border-color: #05c46b; width: 150px; margin-bottom: 0;">
                </div>
            </div>

            <div class="col-sm-6 col-md-4 px-2">
                <div class="bg-white shadow overflow-hidden mb32"
                    style="border-radius: 15px; width: 300px; padding-bottom: 0;">
                    <img src="./images/demo-3.jpg" width="300px" height="auto">
                    <h6 class="text-center my-3">Reservation Form &amp; Footer</h6>
                    <hr style="border-width: 5px; border-color: #f44f52; width: 150px; margin-bottom: 0;">
                </div>
            </div>

        </div>
    </section>
    <!-- End of Demo Pages -->

    <!-- Footer -->
    <div class="row" style="margin-top: 4rem;">
        <div class="col-lg-12 text-center">
            <h2>Get Help</h2>
            <hr style=" border: 2px solid #b22126; margin-top: 2px;" width="40px">
            <p class="text-center" style="max-width: 650px; margin: 0 auto;">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.</p>
        </div>
    </div>
    <div class="row">
        <div class="col px-4 pt-3 pb-2 shadow-sm"
            style="background-color: #fff; max-width: 450px; border-radius: 0.5em; margin: 1em auto;">
            <div class="row">
                <div class="col-lg-8">
                    <h6><a href="mailto:odoo@cybrosys.com" target="_blank"
                            style="color: #050505; text-decoration: none;"><i
                                class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a></h6>
                </div>
                <div class="col-lg-4 d-flex justify-content-end" style="position: relative;">
                    <h6><a href="mailto:odoo@cybrosys.com" target="_blank"
                            style="color: #050505; text-decoration: none;"><i class="fa fa-chevron-right"></i></a>
                    </h6>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col px-4 pt-3 pb-2 shadow-sm"
            style="background-color: #fff; max-width: 450px; border-radius: 0.5em; margin: 1em auto;">
            <div class="row">
                <div class="col-lg-8">
                    <h6><a href="https://www.cybrosys.com" target="_blank"
                            style="color: #050505; text-decoration: none;"><i
                                class="fa fa-globe mr-2"></i>www.cybrosys.com</a></h6>
                </div>
                <div class="col-lg-4 d-flex justify-content-end" style="position: relative;">
                    <h6><a href="https://www.cybrosys.com" target="_blank"
                            style="color: #050505; text-decoration: none;"><i class="fa fa-chevron-right"></i></a>
                    </h6>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 mt-4 mb-2 text-center">
            <p style="font-weight: bold">A Quality Theme From</p>
        </div>
        <div class="col-lg-12 text-center">
            <img src="images/cybro-logo-oca.png" width="80px" height="auto">
        </div>
    </div>
    <!-- End of Footer -->
</div>