<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>

        <!-- ====================================================== -->
        <!-- 1. HOME PAGE (Inherits and Replaces Default Home)      -->
        <!-- ====================================================== -->
        <template id="custom_homepage" inherit_id="website.homepage" name="Shivasakthi Homepage" priority="1000">
            <xpath expr="//div[@id='wrap']" position="replace">
                <t t-set="pop_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True), ('sale_ok', '=', True), ('is_popular_deal', '=', True), ('website_id', 'in', [False, website.id])], limit=10, order='website_sequence asc')"/>
                <div id="wrap" class="oe_structure">
    <section class="s_carousel_wrapper" data-vxml="001" data-snippet="s_carousel" data-name="Carousel">
        <div class="s_carousel carousel s_carousel_rounded slide" data-bs-interval="10000" id="myCarouselShivasakthi" data-bs-ride="carousel">
            
            <ol class="carousel-indicators o_we_no_overlay">
                <li data-bs-target="#myCarouselShivasakthi" class="active" data-bs-slide-to="0" aria-current="true"/>
                <li data-bs-target="#myCarouselShivasakthi" data-bs-slide-to="1"/>
                <li data-bs-target="#myCarouselShivasakthi" data-bs-slide-to="2"/>
              </ol>
            
            <div class="carousel-inner">
                <!-- Slide 1 -->
                <div class="carousel-item o_colored_level pt128 pb128 active oe_img_bg o_bg_img_center shivasakthi-hero-slide" data-name="Slide">
                    <!-- Left Side Dish (Pizza/Uttapam Platter) -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/left-side-image.webp" class="hero-left-dish d-none d-lg-block" alt="Left Pizza Platter"/>
                    
                    <!-- Right Side Dish (Dosa Platter) -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/shiva-sakthi-web-banner.webp" class="hero-right-dish d-none d-lg-block" alt="Right Dosa Platter"/>

                    <!-- Floating Spices / Shapes -->
                    <!-- Left Side Spices -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/about-new-pepper.png" class="hero-spice-chili-left d-none d-lg-block" alt="Chili Pepper"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" class="hero-spice-tomato-left d-none d-lg-block" alt="Tomato Slice"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/hero-shape5.png" class="hero-spice-leaf-left d-none d-lg-block" alt="Bell Pepper Shape"/>
                    
                    <!-- Right Side Spices -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/about-leaves.png" class="hero-spice-leaf-right d-none d-lg-block" alt="Mint Leaf"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/hero-shape2.png" class="hero-spice-onion-right d-none d-lg-block" alt="Onion Ring Shape" style="position: absolute; right: 22%; bottom: 33%; width: clamp(40px, 6vw, 75px); z-index: 6; pointer-events: none; filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.3)); animation: floatWobbleTomato 10s ease-in-out infinite;"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/about-new-pepper.png" class="hero-spice-chili-right d-none d-lg-block" alt="Chili Pepper"/>

                    <div class="container text-center hero-content-container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8 o_colored_level o_animate o_anim_fade_in_up">
                                <h6 class="hero-subtitle">AUTHENTIC FLAVORS. TIMELESS TRADITIONS.</h6>
                                <h1 class="hero-title">SOUTH INDIAN SOUL<br/>ON EVERY PLATE</h1>
                                <p class="hero-desc">At Shiva Sakthi, we serve more than just food — we serve memories. Taste the heritage of South India in every bite, lovingly prepared with spices that tell a story.</p>
                                <div class="mt-4">
                                    <a href="/shop" class="btn btn-hero-cta">EXPLORE MENU <i class="fa fa-long-arrow-right ms-2"/></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Slide 2 -->
                <div class="carousel-item o_colored_level pt128 pb128 oe_img_bg o_bg_img_center shivasakthi-hero-slide" data-name="Slide">
                    <!-- Left Side Dish -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/left-side-image.webp" class="hero-left-dish d-none d-lg-block" alt="Left Pizza Platter"/>
                    
                    <!-- Right Side Dish -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/shiva-sakthi-web-banner.webp" class="hero-right-dish d-none d-lg-block" alt="Right Dosa Platter"/>

                    <!-- Floating Spices / Shapes -->
                    <!-- Left Side Spices -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/about-new-pepper.png" class="hero-spice-chili-left d-none d-lg-block" alt="Chili Pepper"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" class="hero-spice-tomato-left d-none d-lg-block" alt="Tomato Slice"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/hero-shape5.png" class="hero-spice-leaf-left d-none d-lg-block" alt="Bell Pepper Shape"/>
                    
                    <!-- Right Side Spices -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/about-leaves.png" class="hero-spice-leaf-right d-none d-lg-block" alt="Mint Leaf"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/hero-shape2.png" class="hero-spice-onion-right d-none d-lg-block" alt="Onion Ring Shape" style="position: absolute; right: 22%; bottom: 33%; width: clamp(40px, 6vw, 75px); z-index: 6; pointer-events: none; filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.3)); animation: floatWobbleTomato 10s ease-in-out infinite;"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/about-new-pepper.png" class="hero-spice-chili-right d-none d-lg-block" alt="Chili Pepper"/>

                    <div class="container text-center hero-content-container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8 o_colored_level o_animate o_anim_fade_in_up">
                                <h6 class="hero-subtitle">WELCOME TO SHIVA SAKTHI RESTAURANT</h6>
                                <h1 class="hero-title">TASTE OF HERITAGE<br/>&amp; TRADITION</h1>
                                <p class="hero-desc">At Shiva Sakthi, we serve more than just food — we serve memories. Taste the heritage of South India in every bite, lovingly prepared with spices that tell a story.</p>
                                <div class="mt-4">
                                    <a href="/shop" class="btn btn-hero-cta">ORDER NOW <i class="fa fa-long-arrow-right ms-2"/></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Slide 3 -->
                <div class="carousel-item o_colored_level pt128 pb128 oe_img_bg o_bg_img_center shivasakthi-hero-slide" data-name="Slide">
                    <!-- Left Side Dish -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/left-side-image.webp" class="hero-left-dish d-none d-lg-block" alt="Left Pizza Platter"/>
                    
                    <!-- Right Side Dish -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/shiva-sakthi-web-banner.webp" class="hero-right-dish d-none d-lg-block" alt="Right Dosa Platter"/>

                    <!-- Floating Spices / Shapes -->
                    <!-- Left Side Spices -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/about-new-pepper.png" class="hero-spice-chili-left d-none d-lg-block" alt="Chili Pepper"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" class="hero-spice-tomato-left d-none d-lg-block" alt="Tomato Slice"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/hero-shape5.png" class="hero-spice-leaf-left d-none d-lg-block" alt="Bell Pepper Shape"/>
                    
                    <!-- Right Side Spices -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/about-leaves.png" class="hero-spice-leaf-right d-none d-lg-block" alt="Mint Leaf"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/hero-shape2.png" class="hero-spice-onion-right d-none d-lg-block" alt="Onion Ring Shape" style="position: absolute; right: 22%; bottom: 33%; width: clamp(40px, 6vw, 75px); z-index: 6; pointer-events: none; filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.3)); animation: floatWobbleTomato 10s ease-in-out infinite;"/>
                    <img src="/dine360_theme_shivasakthi/static/src/img/about-new-pepper.png" class="hero-spice-chili-right d-none d-lg-block" alt="Chili Pepper"/>

                    <div class="container text-center hero-content-container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8 o_colored_level o_animate o_anim_fade_in_up">
                                <h6 class="hero-subtitle">WELCOME TO SHIVA SAKTHI RESTAURANT</h6>
                                <h1 class="hero-title">UNLIMITED THALI<br/>ON WEEKENDS</h1>
                                <p class="hero-desc">Enjoy the comfort of home-style cooking blended with restaurant excellence. At Shiva Sakthi, every weekend meal is crafted with love and served by reservation only.</p>
                                <div class="mt-4">
                                    <a href="/shop" class="btn btn-hero-cta">BOOK NOW <i class="fa fa-long-arrow-right ms-2"/></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <a class="carousel-control-prev o_not_editable o_we_no_overlay" role="img" aria-label="Previous" title="Previous" href="#myCarouselShivasakthi" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"/>
                <span class="visually-hidden o_default_snippet_text">Previous</span>
            </a>
            <a class="carousel-control-next o_not_editable o_we_no_overlay" role="img" aria-label="Next" title="Next" href="#myCarouselShivasakthi" data-bs-slide="next">
                <span class="carousel-control-next-icon"/>
                <span class="visually-hidden o_default_snippet_text">Next</span>
            </a>
        </div>
    </section>
    <section class="s_about_premium o_colored_level pt96 pb96" data-snippet="s_about_premium" data-name="Premium About">
        <!-- Floating Elements -->
        <img src="/dine360_theme_shivasakthi/static/src/img/about-lemon.png" class="floating-lemon d-none d-lg-block" alt=""/>
        <img src="/dine360_theme_shivasakthi/static/src/img/about-leaves.png" class="floating-leaves d-none d-lg-block" alt=""/>
        <img src="/dine360_theme_shivasakthi/static/src/img/about-bellpepper.png" class="floating-bellpepper d-none d-lg-block" alt=""/>

        <div class="container">
            <div class="row align-items-center">
                <!-- Left Image Side -->
                <div class="col-lg-6 mb-5 mb-lg-0 o_colored_level">
                    <div class="about-image-wrapper o_animate o_anim_fade_in">
                        <img src="/dine360_theme_shivasakthi/static/src/img/left-side-image.webp" class="img img-fluid mx-auto" alt="Welcome Dosa Platter"/>
                    </div>
                </div>

                <!-- Right Content Side -->
                <div class="col-lg-6 ps-lg-5 o_colored_level">
                    <div class="about-content">
                        <h6 class="d-flex align-items-center mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">
                            <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" alt=""/>
                            Real . authentic . South Indian
                            <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" alt=""/>
                        </h6>
                        <h2 class="display-4 fw-bold mb-4" style="color: #04121D; line-height: 1.2;">Welcome to Shiva Sakthi Restaurant</h2>
                        <p class="text-muted mb-5" style="font-size: 16px; line-height: 1.8;">
                            Your new favorite destination for authentic South Indian cuisine, now in the Greater Toronto Area (GTA). Enjoy dine-in, take-out, and full-service catering tailored to your needs. We also offer a spacious party hall for your special occasions.
                        </p>

                        <!-- CTA Buttons -->
                        <div class="d-flex flex-wrap align-items-center gap-4 pt-2">
                            <a href="/about" class="btn btn-lg flat d-inline-flex align-items-center" style="background-color: #ffb800; color: #04121D; font-weight: 700; padding: 15px 35px; border-radius: 5px; text-transform: uppercase; font-size: 14px; border: none;">
                                LEARN MORE US <i class="fa fa-long-arrow-right ms-2"/>
                            </a>
                            <a href="/shop" class="fw-bold text-dark text-decoration-none d-inline-flex align-items-center" style="font-size: 14px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 2px solid #ffb800; padding-bottom: 3px;">
                                EXPLORE POPULAR MENU <i class="fa fa-long-arrow-right ms-2"/>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="s_stats_section o_colored_level pt128 pb128 oe_img_bg o_bg_img_center" style="background-image: url('/dine360_theme_shivasakthi/static/src/img/bg-image.jpg'); background-size: cover; background-position: center; position: relative;">
        <div class="o_we_bg_filter bg-black-50" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.45); z-index: 1;"/>
        <div class="container position-relative" style="z-index: 2;">
            <div class="row justify-content-end">
                <div class="col-lg-6">
                    <div class="row g-0 rounded overflow-hidden shadow-lg" style="border: 1px solid rgba(255, 255, 255, 0.1);">
                        <div class="col-4 text-center py-5" style="background-color: #ffb800; color: #04121D;">
                            <h2 class="display-4 fw-bold mb-1">6+</h2>
                            <p class="small fw-bold text-uppercase mb-0" style="letter-spacing: 1px; font-size: 11px;">Years<br/>Experience</p>
                        </div>
                        <div class="col-4 text-center py-5" style="background-color: #0c0f12; color: white;">
                            <h2 class="display-4 fw-bold mb-1 text-white">1K+</h2>
                            <p class="small fw-bold text-uppercase mb-0 text-white-50" style="letter-spacing: 1px; font-size: 11px;">Happy<br/>Customer</p>
                        </div>
                        <div class="col-4 text-center py-5" style="background-color: #ffb800; color: #04121D;">
                            <h2 class="display-4 fw-bold mb-1">13+</h2>
                            <p class="small fw-bold text-uppercase mb-0" style="letter-spacing: 1px; font-size: 11px;">Popular<br/>Dishes</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Category Section Header -->
    <section class="s_title o_colored_level pb24 pt64" data-vcss="001" data-snippet="s_title" data-name="Title" style="background-color: rgb(244, 241, 234); background-image: none;">
        <div class="s_allow_columns container">
            <h6 style="text-align: center;">
                <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" loading="lazy"/>
                <span style="color: #ffb800; font-weight: 700; letter-spacing: 2px;">SPECIAL CATEGORY</span>
                <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" loading="lazy"/>
            </h6>
            <h2 class="display-4 fw-bold" style="text-align: center; color: #04121D; text-transform: uppercase;">Popular Items</h2>
        </div>
    </section>

    <!-- Category Slider Section -->
    <section class="s_category_slider o_colored_level pb64" data-snippet="s_category_slider" data-name="Category Slider" style="background-color: rgb(244, 241, 234);">
        <t t-set="shop_categories" t-value="request.env['product.public.category'].sudo().search([('website_id', 'in', [False, website.id]), ('parent_id', '=', False)], order='sequence asc')"/>
        <div class="container overflow-hidden">
            <div class="row justify-content-center g-4">
                <t t-foreach="shop_categories[:4]" t-as="categ">
                    <div class="col-lg-3 col-md-6 col-6 category-item text-center">
                        <a t-attf-href="/shop?category=#{categ.id}" class="d-block text-decoration-none p-3">
                            <div class="bg-white rounded-circle p-1 shadow-sm mb-3 category-img mx-auto" style="border: 2px solid transparent; width: 180px; height: 180px; overflow: hidden; transition: all 0.3s ease;">
                                <img t-att-src="website.image_url(categ, 'image_1920')" class="img img-fluid rounded-circle" style="width: 100%; height: 100%; object-fit: cover;" t-att-alt="categ.name" loading="lazy"/>
                            </div>
                            <h6 class="fw-bold mb-1 text-dark" style="font-size: 18px; text-transform: uppercase;" t-field="categ.name"/>
                            <small class="text-muted"><t t-esc="categ.product_tmpl_ids and len(categ.product_tmpl_ids) or 0"/>+ Varieties</small>
                        </a>
                    </div>
                </t>
            </div>
        </div>
    </section>

    <!-- Unlimited Thali Section -->
    <section class="s_unlimited_thali_section o_colored_level pt96 pb96" style="background-color: #080808; background-image: url('/dine360_theme_shivasakthi/static/src/img/hero-bg.jpg'); background-size: cover; background-position: center; position: relative; overflow: hidden;">
        <div class="o_we_bg_filter bg-black-50" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.55); z-index: 1;"/>
        <div class="container position-relative" style="z-index: 2;">
            <div class="row align-items-center">
                <!-- Left Text Side -->
                <div class="col-lg-6 text-white o_colored_level">
                    <h6 class="mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">SPECIAL DEAL</h6>
                    <h1 class="display-3 fw-bold mb-2 text-white" style="line-height: 1.1; letter-spacing: 1px;">UNLIMITED THALI</h1>
                    <h2 class="h3 fw-bold mb-4" style="color: #ffb800; text-transform: uppercase;">FOR RESERVATION</h2>
                    <p class="lead mb-5 text-white-50" style="font-size: 16px; line-height: 1.7;">
                        Enjoy the comfort of home-style cooking blended with restaurant excellence. At Shiva Sakthi, every weekend meal is crafted with love and served by reservation only.
                    </p>
                    <div class="d-flex flex-wrap gap-3">
                        <a href="/reservation" class="btn px-4 py-3 fw-bold text-uppercase" style="background-color: #ffb800; color: #04121D; border-radius: 4px; font-size: 13px;">BOOK NOW</a>
                        <a href="/shop" class="btn btn-outline-light px-4 py-3 fw-bold text-uppercase" style="border-radius: 4px; font-size: 13px;">EXPLORE MENU</a>
                    </div>
                </div>
                <!-- Right Image Side -->
                <div class="col-lg-6 text-center mt-5 mt-lg-0 o_colored_level">
                    <img src="/dine360_theme_shivasakthi/static/src/img/unlimited-thali-right.webp" class="img img-fluid mx-auto" alt="Unlimited Thali Platter" style="max-height: 480px; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));"/>
                </div>
            </div>
        </div>
    </section>

    <!-- Menu Section Header -->
    <section class="s_title o_colored_level pb24 pt64" data-vcss="001" data-snippet="s_title" data-name="Title" style="background-color: white; background-image: none;">
        <div class="s_allow_columns container">
            <h6 style="text-align: center;">
                <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" loading="lazy"/>
                <span style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">CHINESE DISH</span>
                <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" loading="lazy"/>
            </h6>
            <h2 class="display-4 fw-bold" style="text-align: center; color: #04121D; text-transform: uppercase;">Popular Exquisite Dishes</h2>
        </div>
    </section>

    <!-- Menu List Section -->
    <section class="s_menu_section o_colored_level pb80" style="background-color: white;">
        <div class="container">
            <div class="row g-5">
                <!-- Column 1 -->
                <div class="col-lg-6">
                    <div class="d-flex flex-column gap-4">
                        <!-- Item 1 -->
                        <div class="menu-list-item d-flex align-items-center">
                            <img src="/dine360_theme_shivasakthi/static/src/img/crispy-gobi-65.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-baseline">
                                    <h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">CHICKEN MANCHURIAN</h5>
                                    <span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
                                    <span class="fw-bold text-dark" style="font-size: 16px;">$15.99</span>
                                </div>
                                <p class="small text-muted mb-0">Tender chicken chunks tossed in spicy Chinese Manchurian sauce.</p>
                            </div>
                        </div>
                        <!-- Item 2 -->
                        <div class="menu-list-item d-flex align-items-center">
                            <img src="/dine360_theme_shivasakthi/static/src/img/cat-curries.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-baseline">
                                    <h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">SCHEZWAN CHICKEN NOODLES</h5>
                                    <span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
                                    <span class="fw-bold text-dark" style="font-size: 16px;">$15.99</span>
                                </div>
                                <p class="small text-muted mb-0">Noodles stir-fried with chicken and spicy Schezwan sauce.</p>
                            </div>
                        </div>
                        <!-- Item 3 -->
                        <div class="menu-list-item d-flex align-items-center">
                            <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-baseline">
                                    <h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">VEG FRIED RICE</h5>
                                    <span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
                                    <span class="fw-bold text-dark" style="font-size: 16px;">$13.99</span>
                                </div>
                                <p class="small text-muted mb-0">Stir-fried rice mixed with colorful fresh vegetables.</p>
                            </div>
                        </div>
                        <!-- Item 4 -->
                        <div class="menu-list-item d-flex align-items-center">
                            <img src="/dine360_theme_shivasakthi/static/src/img/crispy-gobi-65.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-baseline">
                                    <h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">GOBI MANCHURIAN</h5>
                                    <span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
                                    <span class="fw-bold text-dark" style="font-size: 16px;">$14.99</span>
                                </div>
                                <p class="small text-muted mb-0">Crispy cauliflower florets in dark, sweet and tangy sauce.</p>
                            </div>
                        </div>
                        <!-- Item 5 -->
                        <div class="menu-list-item d-flex align-items-center">
                            <img src="/dine360_theme_shivasakthi/static/src/img/cat-dosa.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-baseline">
                                    <h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">CHILLI PANEER</h5>
                                    <span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
                                    <span class="fw-bold text-dark" style="font-size: 16px;">$14.99</span>
                                </div>
                                <p class="small text-muted mb-0">Paneer cubes tossed with bell peppers and green chillies.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Column 2 -->
                <div class="col-lg-6">
                    <div class="d-flex flex-column gap-4">
                        <!-- Item 1 -->
                        <div class="menu-list-item d-flex align-items-center">
                            <img src="/dine360_theme_shivasakthi/static/src/img/fiery-fish-curry.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-baseline">
                                    <h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">CHILLI CHICKEN</h5>
                                    <span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
                                    <span class="fw-bold text-dark" style="font-size: 16px;">$15.99</span>
                                </div>
                                <p class="small text-muted mb-0">Spicy and crispy chicken tossed in soy-chilli gravy.</p>
                            </div>
                        </div>
                        <!-- Item 2 -->
                        <div class="menu-list-item d-flex align-items-center">
                            <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-baseline">
                                    <h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">CHICKEN FRIED RICE</h5>
                                    <span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
                                    <span class="fw-bold text-dark" style="font-size: 16px;">$15.99</span>
                                </div>
                                <p class="small text-muted mb-0">Stir-fried rice tossed with eggs, chicken, and spring onions.</p>
                            </div>
                        </div>
                        <!-- Item 3 -->
                        <div class="menu-list-item d-flex align-items-center">
                            <img src="/dine360_theme_shivasakthi/static/src/img/cat-curries.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-baseline">
                                    <h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">CHICKEN NOODLES</h5>
                                    <span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
                                    <span class="fw-bold text-dark" style="font-size: 16px;">$15.99</span>
                                </div>
                                <p class="small text-muted mb-0">Noodles tossed with chicken chunks and fresh stir-fry veggies.</p>
                            </div>
                        </div>
                        <!-- Item 4 -->
                        <div class="menu-list-item d-flex align-items-center">
                            <img src="/dine360_theme_shivasakthi/static/src/img/cat-desserts.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-baseline">
                                    <h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">EGG NOODLES</h5>
                                    <span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
                                    <span class="fw-bold text-dark" style="font-size: 16px;">$14.99</span>
                                </div>
                                <p class="small text-muted mb-0">Stir-fried noodles cooked with eggs and standard spices.</p>
                            </div>
                        </div>
                        <!-- Item 5 -->
                        <div class="menu-list-item d-flex align-items-center">
                            <img src="/dine360_theme_shivasakthi/static/src/img/cat-beverages.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-baseline">
                                    <h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">VEG NOODLES</h5>
                                    <span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
                                    <span class="fw-bold text-dark" style="font-size: 16px;">$13.99</span>
                                </div>
                                <p class="small text-muted mb-0">Classic stir-fried noodles cooked with cabbage, carrot, and onion.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- View All Button -->
            <div class="row mt-5">
                <div class="col-12 text-center">
                    <a href="/shop" class="btn px-5 py-3 fw-bold text-uppercase" style="background-color: #ffb800; color: #04121D; border-radius: 4px; font-size: 13px;">VIEW ALL</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Enjoy the Flavors Section -->
    <section class="s_enjoy_flavors_section o_colored_level pt96 pb96" style="background-color: #080808; background-image: url('/dine360_theme_shivasakthi/static/src/img/hero-bg.jpg'); background-size: cover; background-position: center; position: relative; overflow: hidden;">
        <div class="o_we_bg_filter bg-black-50" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.55); z-index: 1;"/>
        <div class="container position-relative" style="z-index: 2;">
            <div class="row align-items-center">
                <!-- Left Text Side -->
                <div class="col-lg-6 text-white o_colored_level">
                    <h6 class="mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">SPECIAL DEAL</h6>
                    <h1 class="display-3 fw-bold mb-2 text-white" style="line-height: 1.1; letter-spacing: 1px;">ENJOY THE FLAVORS</h1>
                    <h2 class="h3 fw-bold mb-5" style="color: #ffb800; text-transform: uppercase;">SOUTH INDIAN FOOD HERITAGE</h2>
                    <div class="pt-2">
                        <a href="/shop" class="btn px-5 py-3 fw-bold text-uppercase" style="background-color: #ffb800; color: #04121D; border-radius: 4px; font-size: 13px;">ORDER NOW</a>
                    </div>
                </div>
                <!-- Right Image Side -->
                <div class="col-lg-6 text-center mt-5 mt-lg-0 o_colored_level">
                    <img src="/dine360_theme_shivasakthi/static/src/img/offer-dosa-left.webp" class="img img-fluid mx-auto" alt="Dosa Platter Deal" style="max-height: 400px; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));"/>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonial Section -->
    <section class="s_testimonials_premium o_colored_level" data-snippet="s_testimonials_premium" data-name="Premium Testimonials" style="background-color: #0c0f12; padding: 100px 0;">
        <div class="container">
            <div class="row align-items-center g-5">
                <!-- Left Image Side -->
                <div class="col-lg-6 o_colored_level text-center">
                    <img src="/dine360_theme_shivasakthi/static/src/img/home-testi.webp" class="img img-fluid rounded-circle border border-yellow" style="max-width: 480px; aspect-ratio: 1/1; object-fit: cover; border-width: 8px !important; border-color: #ffb800 !important; box-shadow: 0 20px 40px rgba(0,0,0,0.5);" alt="Testimonial food dish"/>
                </div>

                <!-- Right Content Side -->
                <div class="col-lg-6 o_colored_level">
                    <div class="content-wrapper text-white ps-lg-4">
                        <h6 class="d-flex align-items-center mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">
                            <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" alt=""/>
                            TESTIMONIALS
                            <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" alt=""/>
                        </h6>
                        <h2 class="display-4 fw-bold text-white mb-4">What Our Clients Say</h2>
                        
                        <!-- Google Reviews Branding -->
                        <div class="google-reviews-info mb-5 d-flex align-items-center gap-3">
                            <img src="https://www.vectorlogo.zone/logos/google/google-ar21.svg" class="google-reviews-logo" alt="Google" style="height: 35px;"/>
                            <div class="stars" style="color: #ffb800; font-size: 16px;">
                                <i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/>
                                <span class="ms-2 text-white-50 small">(4.8 / 5.0)</span>
                            </div>
                        </div>

                        <!-- Testimonial Slider -->
                        <div id="testimonialCarousel" class="carousel slide testimonial-carousel" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <p class="lead text-white-50" style="line-height: 1.8; font-style: italic;">"Authentic South Indian flavor right here in Mississauga! The biryani was fragrant and the dosa was perfectly crispy. Definitely our new favorite spot for Indian food."</p>
                                    <div class="author-info d-flex align-items-center mt-4">
                                        <div class="ms-0">
                                            <h6 class="text-white fw-bold mb-0" style="font-size: 18px;">Arun Kumar</h6>
                                            <small class="text-white-50">Local Guide</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <p class="lead text-white-50" style="line-height: 1.8; font-style: italic;">"Amazing hospitality and even better food. The Chicken Kothu is a must-try. The staff is very friendly and the atmosphere is vibrant and welcoming."</p>
                                    <div class="author-info d-flex align-items-center mt-4">
                                        <div class="ms-0">
                                            <h6 class="text-white fw-bold mb-0" style="font-size: 18px;">Sarah Thompson</h6>
                                            <small class="text-white-50">Regular Customer</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Custom Controls -->
                            <div class="testimonial-controls mt-5 d-flex gap-2">
                                <button class="btn btn-outline-warning border-2 rounded-circle" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fa fa-arrow-left"/>
                                </button>
                                <button class="btn btn-outline-warning border-2 rounded-circle ms-2" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fa fa-arrow-right"/>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Premium Blog Section -->
    <section class="s_blog_premium o_colored_level pt80 pb80" data-snippet="s_blog_premium" data-name="Premium Blog">
        <t t-set="latest_blogs" t-value="website.get_recent_blogs(3)"/>
        <!-- Floating Accent -->
        <img src="/dine360_theme_shivasakthi/static/src/img/french-fries-accent.png" class="fries-accent d-none d-lg-block" alt=""/>

        <div class="container">
            <!-- Header -->
            <div class="row mb-5">
                <div class="col-12 text-center">
                    <h6 class="d-flex align-items-center justify-content-center mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">
                        <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" alt=""/>
                        OUR LATEST FOOD NEWS
                        <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" alt=""/>
                    </h6>
                    <h2 class="display-4 fw-bold" style="color: #04121D; text-transform: uppercase;">Latest News &amp; Articles</h2>
                </div>
            </div>

            <div class="row g-4 d-flex align-items-stretch">
                <t t-foreach="latest_blogs" t-as="blog">
                    <div class="col-lg-4">
                        <div class="blog-card">
                            <div class="blog-img-wrapper">
                                <img t-att-src="blog.get('image')" t-att-alt="blog.get('title')"/>
                                <div class="date-badge">
                                    <span t-esc="blog.get('day')"/>
                                    <span t-esc="blog.get('month')"/>
                                </div>
                            </div>
                            <div class="blog-body">
                                <span class="category-line" t-esc="'Category: ' + blog.get('category')"/>
                                <h4><a t-attf-href="/blog/#{blog.get('slug')}" class="text-decoration-none" style="color: inherit;" t-esc="blog.get('title')"/></h4>
                                <p class="blog-excerpt" t-esc="blog.get('excerpt')"/>
                                <a t-attf-href="/blog/#{blog.get('slug')}" class="btn-link text-decoration-none fw-bold mt-2 d-inline-block" style="color: #ffb800; font-size: 14px;">Read More</a>
                            </div>
                        </div>
                    </div>
                </t>
            </div>

            <!-- Bottom Button -->
            <div class="row mt-5">
                <div class="col-12 text-center">
                    <a href="/blog" class="know-more-btn">
                        Know More <span><i class="fa fa-arrow-right"></i></span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Premium Auto-Sliding Gallery Section -->
    <section class="s_gallery_slider_premium o_colored_level" data-snippet="s_gallery_slider_premium" data-name="Premium Gallery Slider">
        <div class="gallery-track">
            <!-- Set 1 -->
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/gallery-1.png" alt="Gallery 1"/></div>
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/gallery-2.png" alt="Gallery 2"/></div>
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/gallery-3.png" alt="Gallery 3"/></div>
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" alt="Gallery 4"/></div>
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/cat-dosa.png" alt="Gallery 5"/></div>
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/cat-curries.png" alt="Gallery 6"/></div>
            <!-- Duplicate for Seamless Loop -->
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/gallery-1.png" alt="Gallery 1"/></div>
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/gallery-2.png" alt="Gallery 2"/></div>
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/gallery-3.png" alt="Gallery 3"/></div>
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" alt="Gallery 4"/></div>
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/cat-dosa.png" alt="Gallery 5"/></div>
            <div class="gallery-item"><img src="/dine360_theme_shivasakthi/static/src/img/cat-curries.png" alt="Gallery 6"/></div>
        </div>
    </section>

                </div>
            </xpath>
        </template>


      


        


        <!-- ====================================================== -->
        <!-- 4. SHOP PAGE                                            -->
        <!-- ====================================================== -->
        <!--
        <template id="custom_shop" inherit_id="website_sale.products" name="Shivasakthi Shop">
            <xpath expr="//div[@id='wrap']" position="replace">
                <div id="wrap" class="oe_structure">
                     <section class="s_text_block pt80 pb80">
                        <div class="container">
                            <h1>Shop Page</h1>
                            <p>Paste your shop page code here.</p>
                        </div>
                    </section>
                </div>
            </xpath>
        </template>
        -->

    </data>
</odoo>




