<?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" style="background-image: url('/dine360_theme_shivasakthi/static/src/img/bg-image.jpg'); background-size: cover; background-position: center; position: relative; min-height: 600px; display: flex; align-items: flex-end; padding-bottom: 0;">
        <div class="o_we_bg_filter bg-black-25" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); z-index: 1;"/>
        <div class="container position-relative" style="z-index: 2;">
            <div class="row justify-content-center">
                <div class="col-lg-8 col-md-10">
                    <div class="row g-0 overflow-hidden shadow-lg stats-box-row" style="background: transparent;">
                        <!-- Box 1 -->
                        <div class="col-4 text-center py-4 px-2 d-flex flex-column align-items-center justify-content-center" style="background-color: #ffb800; color: #000; min-height: 170px;">
                            <h2 class="fw-bold mb-1" style="font-size: clamp(32px, 4.5vw, 54px); line-height: 1; font-family: 'Bebas Neue', sans-serif !important;">20+</h2>
                            <div class="wavy-line mb-3" style="font-size: 14px; font-weight: bold; color: #000; letter-spacing: -2px;">~~~~</div>
                            <p class="text-uppercase fw-bold mb-0" style="font-size: clamp(10px, 1.2vw, 13px); letter-spacing: 0.5px; font-family: 'Bebas Neue', sans-serif !important;">Experience Chefs</p>
                        </div>
                        <!-- Box 2 -->
                        <div class="col-4 text-center py-4 px-2 d-flex flex-column align-items-center justify-content-center" style="background-color: #1c1c1c; color: #fff; min-height: 170px;">
                            <h2 class="fw-bold mb-1 text-white" style="font-size: clamp(32px, 4.5vw, 54px); line-height: 1; font-family: 'Bebas Neue', sans-serif !important;">2K+</h2>
                            <div class="wavy-line mb-3" style="font-size: 14px; font-weight: bold; color: #fff; letter-spacing: -2px;">~~~~</div>
                            <p class="text-uppercase fw-bold mb-0 text-white" style="font-size: clamp(10px, 1.2vw, 13px); letter-spacing: 0.5px; font-family: 'Bebas Neue', sans-serif !important;">Happy Customers</p>
                        </div>
                        <!-- Box 3 -->
                        <div class="col-4 text-center py-4 px-2 d-flex flex-column align-items-center justify-content-center" style="background-color: #ffb800; color: #000; min-height: 170px;">
                            <h2 class="fw-bold mb-1" style="font-size: clamp(32px, 4.5vw, 54px); line-height: 1; font-family: 'Bebas Neue', sans-serif !important;">40+</h2>
                            <div class="wavy-line mb-3" style="font-size: 14px; font-weight: bold; color: #000; letter-spacing: -2px;">~~~~</div>
                            <p class="text-uppercase fw-bold mb-0" style="font-size: clamp(10px, 1.2vw, 13px); letter-spacing: 0.5px; font-family: 'Bebas Neue', sans-serif !important;">Favorite Dishes</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Category Slider Section -->
    <section class="s_category_slider o_colored_level pt80 pb80" data-snippet="s_category_slider" data-name="Category Slider" style="background-color: white; position: relative; overflow: hidden;">
        <!-- Floating Accents -->
        <img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" class="category-accent-tomato d-none d-lg-block" style="position: absolute; left: 5%; bottom: 15%; width: 60px; z-index: 5; pointer-events: none; filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.15)); animation: floatWobbleTomato 8s ease-in-out infinite;" alt=""/>
        <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/shapes/hero-shape3.png" class="category-accent-cucumber d-none d-lg-block" style="position: absolute; right: 5%; top: 15%; width: 60px; z-index: 5; pointer-events: none; filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.15)); animation: floatWobbleTomato 10s ease-in-out infinite reverse;" alt=""/>

        <div class="container">
            <!-- Header -->
            <div class="row mb-5">
                <div class="col-12 text-center">
                    <h6 class="mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-family: 'Bebas Neue', sans-serif !important;">SOUTH INDIAN AND NORTH INDIAN</h6>
                    <h2 class="display-4 fw-bold" style="color: #04121D; text-transform: uppercase; font-family: 'Bebas Neue', sans-serif !important; font-size: 46px; letter-spacing: 1px;">Popular Dishes</h2>
                </div>
            </div>

            <!-- Category Track Container for Carousel -->
            <div class="category-track-container">
                <div class="category-track">
                    <!-- Item 1: Hakka -->
                    <div class="category-item">
                        <a href="/shop?search=Hakka" class="text-decoration-none">
                            <div class="category-card">
                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/hakka.webp" class="category-plate-img img-fluid" alt="Hakka"/>
                                <div class="category-btn">Hakka</div>
                            </div>
                        </a>
                    </div>
                    <!-- Item 2: Veg Biryani -->
                    <div class="category-item">
                        <a href="/shop?search=Veg+Biryani" class="text-decoration-none">
                            <div class="category-card">
                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/veg-biryani.webp" class="category-plate-img img-fluid" alt="Veg Biryani"/>
                                <div class="category-btn">Veg Biryani</div>
                            </div>
                        </a>
                    </div>
                    <!-- Item 3: Veg Curry -->
                    <div class="category-item">
                        <a href="/shop?search=Veg+Curry" class="text-decoration-none">
                            <div class="category-card">
                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/veg-curry.webp" class="category-plate-img img-fluid" alt="Veg Curry"/>
                                <div class="category-btn">Veg Curry</div>
                            </div>
                        </a>
                    </div>
                    <!-- Item 4: Non-Veg Biryani -->
                    <div class="category-item">
                        <a href="/shop?search=Non+Veg+Biryani" class="text-decoration-none">
                            <div class="category-card">
                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/nonveg-biryani.webp" class="category-plate-img img-fluid" alt="Non-Veg Biryani"/>
                                <div class="category-btn">Non - Veg Biryani</div>
                            </div>
                        </a>
                    </div>
                    <!-- Item 5: Dosa -->
                    <div class="category-item">
                        <a href="/shop?search=Dosa" class="text-decoration-none">
                            <div class="category-card">
                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/dosa.webp" class="category-plate-img img-fluid" alt="Dosa"/>
                                <div class="category-btn">Dosa</div>
                            </div>
                        </a>
                    </div>
                    <!-- Item 6: Idly -->
                    <div class="category-item">
                        <a href="/shop?search=Idly" class="text-decoration-none">
                            <div class="category-card">
                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/idly.webp" class="category-plate-img img-fluid" alt="Idly"/>
                                <div class="category-btn">Idly</div>
                            </div>
                        </a>
                    </div>
                    <!-- Item 7: Uthappam -->
                    <div class="category-item">
                        <a href="/shop?search=Uthappam" class="text-decoration-none">
                            <div class="category-card">
                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/uthappam.webp" class="category-plate-img img-fluid" alt="Uthappam"/>
                                <div class="category-btn">Uthappam</div>
                            </div>
                        </a>
                    </div>
                    <!-- Item 8: Beverages -->
                    <div class="category-item">
                        <a href="/shop?search=Beverages" class="text-decoration-none">
                            <div class="category-card">
                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/beverages.webp" class="category-plate-img img-fluid" alt="Beverages"/>
                                <div class="category-btn">Beverages</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Dots Slider representation -->
            <div class="row mt-5">
                <div class="col-12 d-flex justify-content-center gap-2 align-items-center category-dots">
                    <span class="dot active" data-index="0"/>
                    <span class="dot" data-index="1"/>
                    <span class="dot" data-index="2"/>
                    <span class="dot" data-index="3"/>
                    <span class="dot" data-index="4"/>
                    <span class="dot" data-index="5"/>
                    <span class="dot" data-index="6"/>
                    <span class="dot" data-index="7"/>
                </div>
            </div>
        </div>
    </section>

    <!-- Unlimited Thali Section -->
    <section class="s_unlimited_thali_section o_colored_level pt128 pb128" 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-85" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 1;"/>
        
        <!-- Watermark -->
        <div class="thali-watermark d-none d-lg-block">THALI</div>

        <!-- Floating Accents -->
        <!-- Left Side Chili -->
        <img src="/dine360_theme_shivasakthi/static/src/img/about-new-pepper.png" class="thali-accent-chili-top d-none d-lg-block" alt="Chili Accent Top"/>
        <img src="/dine360_theme_shivasakthi/static/src/img/about-new-pepper.png" class="thali-accent-chili-bottom d-none d-lg-block" alt="Chili Accent Bottom"/>
        <!-- Right Side Tomato -->
        <img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" class="thali-accent-tomato-top d-none d-lg-block" alt="Tomato Accent Top"/>
        <img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" class="thali-accent-tomato-bottom d-none d-lg-block" alt="Tomato Accent Bottom"/>

        <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">
                    <img src="/dine360_theme_shivasakthi/static/src/img/unlimited-thali-text.png" class="thali-title-img img-fluid mb-4" alt="Unlimited Thali"/>
                    <h2 class="thali-subtitle mb-4">FOR RESERVATION</h2>
                    <p class="thali-desc mb-4">
                        Enjoy our Unlimited Thali, available by reservation Recommended, every Saturday and Sunday from 12 PM to 4 PM.
                    </p>
                    <div class="d-flex gap-3 mb-4">
                        <a href="/reservation" class="btn btn-thali-day">SATURDAY</a>
                        <a href="/reservation" class="btn btn-thali-day">SUNDAY</a>
                    </div>
                    <div>
                        <a href="/reservation" class="btn btn-thali-reserve">RESERVATION <i class="fa fa-long-arrow-right ms-2"/></a>
                    </div>
                </div>
                <!-- Right Image Side -->
                <div class="col-lg-6 text-center mt-5 mt-lg-0 o_colored_level position-relative">
                    <div class="thali-image-container">
                        <!-- Steam overlay effect -->
                        <div class="thali-steam-effect"/>
                        <img src="/dine360_theme_shivasakthi/static/src/img/unlimited-thali-leaf.png" class="img img-fluid mx-auto thali-leaf-img" alt="Unlimited Thali Platter"/>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- From Authentic Indian Kitchen Section -->
    <section class="s_authentic_kitchen_section o_colored_level pt96 pb96" style="background-color: #fcfbf7; position: relative; overflow: hidden;">
        <!-- Floating Accent Images -->
        <img src="/dine360_theme_shivasakthi/static/src/img/menu-cucumber.png" class="menu-accent-cucumber d-none d-lg-block" alt="Cucumber Accent"/>
        <img src="/dine360_theme_shivasakthi/static/src/img/menu-tomato.png" class="menu-accent-tomato d-none d-lg-block" alt="Tomato Accent"/>

        <div class="container">
            <!-- Header -->
            <div class="row mb-5">
                <div class="col-12 text-center">
                    <h6 class="mb-2" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-family: 'Bebas Neue', sans-serif !important; font-size: 16px;">POPULAR MENU</h6>
                    <h2 class="display-4 fw-bold" style="color: #04121D; text-transform: uppercase; font-family: 'Bebas Neue', sans-serif !important; font-size: 46px; letter-spacing: 1px; line-height: 1.2;">FROM AUTHENTIC INDIAN KITCHEN</h2>
                </div>
            </div>

            <!-- Menu Card Container -->
            <div class="menu-card-container mb-5">
                <div class="row g-0">
                    <!-- Column 1 -->
                    <div class="col-lg-6 menu-column border-end-lg">
                        <div class="d-flex flex-column gap-4 p-4 p-md-5">
                            <!-- 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" alt="Medhu Vada"/>
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-baseline">
                                        <h5 class="fw-bold mb-0 text-dark">MEDHU VADA</h5>
                                        <span class="flex-grow-1 border-bottom mx-2"/>
                                        <span class="fw-bold price-text">$7.99</span>
                                    </div>
                                    <p class="small text-muted mb-0">The popular soft and savory appetizer</p>
                                </div>
                            </div>
                            <!-- Item 2 -->
                            <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" alt="Garlic Naan"/>
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-baseline">
                                        <h5 class="fw-bold mb-0 text-dark">GARLIC NAAN</h5>
                                        <span class="flex-grow-1 border-bottom mx-2"/>
                                        <span class="fw-bold price-text">$1.99</span>
                                    </div>
                                    <p class="small text-muted mb-0">Naan infused with garlic</p>
                                </div>
                            </div>
                            <!-- Item 3 -->
                            <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" alt="King Fish Fry"/>
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-baseline">
                                        <h5 class="fw-bold mb-0 text-dark">KING FISH FRY</h5>
                                        <span class="flex-grow-1 border-bottom mx-2"/>
                                        <span class="fw-bold price-text">$17.99</span>
                                    </div>
                                    <p class="small text-muted mb-0">House Special - Premium King Fish Slice Fry</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" alt="Paruppu Pradhaman"/>
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-baseline">
                                        <h5 class="fw-bold mb-0 text-dark">PARUPPU PRADHAMAN</h5>
                                        <span class="flex-grow-1 border-bottom mx-2"/>
                                        <span class="fw-bold price-text">$3.99</span>
                                    </div>
                                    <p class="small text-muted mb-0">south style Payasam made with coconut, Lentils and Jaggery</p>
                                </div>
                            </div>
                            <!-- Item 5 -->
                            <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" alt="Egg Bhurji"/>
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-baseline">
                                        <h5 class="fw-bold mb-0 text-dark">EGG BHURJI (PODIMAS)</h5>
                                        <span class="flex-grow-1 border-bottom mx-2"/>
                                        <span class="fw-bold price-text">$11.99</span>
                                    </div>
                                    <p class="small text-muted mb-0">Masala Egg Bhurji (Podimas)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column 2 -->
                    <div class="col-lg-6 menu-column">
                        <div class="d-flex flex-column gap-4 p-4 p-md-5">
                            <!-- Item 1 -->
                            <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" alt="Veg Biryani"/>
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-baseline">
                                        <h5 class="fw-bold mb-0 text-dark">VEG BIRYANI</h5>
                                        <span class="flex-grow-1 border-bottom mx-2"/>
                                        <span class="fw-bold price-text">$13.99</span>
                                    </div>
                                    <p class="small text-muted mb-0">Cooked in Chettinadu style using Basmati rice</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" alt="Hakka Noodles"/>
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-baseline">
                                        <h5 class="fw-bold mb-0 text-dark">HAKKA NOODLES (VEG)</h5>
                                        <span class="flex-grow-1 border-bottom mx-2"/>
                                        <span class="fw-bold price-text">$13.99</span>
                                    </div>
                                    <p class="small text-muted mb-0">Hakka Flavored Noodles</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" alt="Thalapakattu Mutton Biryani"/>
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-baseline">
                                        <h5 class="fw-bold mb-0 text-dark">THALAPAKATTU MUTTON BIRYANI</h5>
                                        <span class="flex-grow-1 border-bottom mx-2"/>
                                        <span class="fw-bold price-text">$16.99</span>
                                    </div>
                                    <p class="small text-muted mb-0">Authentic Thalapakattu style in seeraga samba rice</p>
                                </div>
                            </div>
                            <!-- Item 4 -->
                            <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" alt="Pizza Dosa"/>
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-baseline">
                                        <h5 class="fw-bold mb-0 text-dark">PIZZA DOSA</h5>
                                        <span class="flex-grow-1 border-bottom mx-2"/>
                                        <span class="fw-bold price-text">$14.99</span>
                                    </div>
                                    <p class="small text-muted mb-0">Classic Dosa made to taste like pizza and favorite with kids and adults alike</p>
                                </div>
                            </div>
                            <!-- Item 5 -->
                            <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" alt="Payasam"/>
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-baseline">
                                        <h5 class="fw-bold mb-0 text-dark">PAYASAM</h5>
                                        <span class="flex-grow-1 border-bottom mx-2"/>
                                        <span class="fw-bold price-text">$3.99</span>
                                    </div>
                                    <p class="small text-muted mb-0">Traditional Tamilnadu style vermichilli payasam</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- View All Button -->
            <div class="row">
                <div class="col-12 text-center">
                    <a href="/shop" class="btn btn-menu-view-all">VIEW FULL MENU <i class="fa fa-long-arrow-right ms-2"/></a>
                </div>
            </div>
        </div>
    </section>

    <!-- Enjoy the Flavors Section -->
    <section class="s_enjoy_flavors_section o_colored_level" style="background-color: #111111; position: relative; overflow: hidden; min-height: 380px; display: flex; align-items: center;">

        <!-- Container -->
        <div class="container position-relative" style="z-index: 2; padding: 60px 0;">
            <div class="row align-items-center">

                <!-- LEFT: Text Content -->
                <div class="col-lg-5 col-md-6 text-white o_colored_level" style="padding-right: 40px;">
                    <!-- "ENJOY THE" small brush title -->
                    <!-- <div class="enjoy-title-enjoy">ENJOY THE</div> -->
                    <!-- "FLAVORS" large brush image text -->
                    <div class="enjoy-title-flavors">
                        <img src="/dine360_theme_shivasakthi/static/src/img/offer-dosa-left.webp" alt="FLAVORS" class="enjoy-flavors-img"/>
                    </div>
                    <!-- Golden Subtitle -->
                    <h3 class="enjoy-subtitle">SOUTH INDIAN AND NORTH<br/>INDIAN CUSINE</h3>
                    <!-- Outline ORDER NOW Button -->
                    <a href="/shop" class="enjoy-btn-outline text-uppercase fw-bold">ORDER NOW <i class="fa fa-arrow-right ms-2"/></a>
                </div>

                <!-- RIGHT: Dosa Image with Floating Elements + Watermark -->
                <div class="col-lg-7 col-md-6 o_colored_level position-relative enjoy-right-col">

                    <!-- DOSADOS Watermark Text -->
                    <div class="enjoy-watermark">DOSADOS</div>

                    <!-- Floating: Onion Ring (top-left of image area) -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/hero-onion-ring.png" class="enjoy-float enjoy-float-onion" alt=""/>

                    <!-- Floating: Green Chili (top-right) -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/hero-shape2.png" class="enjoy-float enjoy-float-chili" alt=""/>

                    <!-- Floating: Tomato Slice (bottom-right) -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" class="enjoy-float enjoy-float-tomato" alt=""/>

                    <!-- Steam Effect -->
                    <div class="enjoy-steam">
                        <div class="enjoy-steam-line s1"/>
                        <div class="enjoy-steam-line s2"/>
                        <div class="enjoy-steam-line s3"/>
                    </div>

                    <!-- Main Dosa Tray Image -->
                    <img src="/dine360_theme_shivasakthi/static/src/img/shiva-sakthi-web-banner.webp" class="enjoy-dosa-img img-fluid" alt="Masala Dosa Platter"/>

                </div>

            </div>
        </div>
    </section>

    <!-- Testimonial Section -->
    <section class="s_testimonials_premium o_colored_level" style="padding: 0; overflow: hidden;">
        <div class="row g-0" style="min-height: 580px;">

            <!-- LEFT: Dark Food Pan Image — full cover -->
            <div class="col-lg-6 col-md-5 testi-left-col">
                <div class="testi-left-img" style="background-image: url('/dine360_theme_shivasakthi/static/src/img/home-testi.webp');"/>
            </div>

            <!-- RIGHT: Golden Yellow Background + Review Content -->
            <div class="col-lg-6 col-md-7 testi-right-col">

                <!-- Tomato accent — bottom right -->
                <div class="testi-tomato-accent">
                    <img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" alt=""/>
                </div>

                <div class="testi-content-wrap">

                    <!-- Title -->
                    <h2 class="testi-main-title">WHAT HAVE LOT'S OFF HAPPY CUSTOMER<br/>EXPLORE FEEDBACK</h2>

                    <!-- Stars -->
                    <div class="testi-stars mb-3">
                        <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"/>
                    </div>

                    <!-- Review Carousel -->
                    <div id="testiCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
                        <div class="carousel-inner">

                            <div class="carousel-item active">
                                <p class="testi-review-text">Visited this beautiful restaurant while nearby for a conference. The staff were welcoming from the very start! We started with the Gobi 65 which had light spice but a lot of flavour. Then, we had the hakka noodles, masala dosa and chettinadu chicken curry which was so tasty. Our Server Gagan recommended it and I'm glad he did. He was fantastic and if we are in town again, we will definitely return!</p>
                                <p class="testi-author-name">Cam Larocque</p>
                            </div>

                            <div class="carousel-item">
                                <p class="testi-review-text">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. The service was warm and attentive throughout our visit.</p>
                                <p class="testi-author-name">Arun Kumar</p>
                            </div>

                            <div class="carousel-item">
                                <p class="testi-review-text">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. Will definitely be coming back with the family!</p>
                                <p class="testi-author-name">Sarah Thompson</p>
                            </div>

                        </div>

                        <!-- Prev / Next controls -->
                        <div class="testi-nav-btns mt-4">
                            <button class="testi-nav-btn" type="button" data-bs-target="#testiCarousel" data-bs-slide="prev">
                                <i class="fa fa-chevron-left"/>
                            </button>
                            <button class="testi-nav-btn" type="button" data-bs-target="#testiCarousel" data-bs-slide="next">
                                <i class="fa fa-chevron-right"/>
                            </button>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </section>

    <!-- Premium Blog Section -->
    <section class="s_blog_premium o_colored_level" style="background-color: #ffffff; padding: 80px 0;">
        <div class="container">

            <!-- Header -->
            <div class="row mb-5">
                <div class="col-12 text-center">
                    <p class="blog-subtitle-top">THE LATEST NEWS WHAT WE HAVE</p>
                    <h2 class="blog-main-heading">OUR LATEST FOOD NEWS</h2>
                </div>
            </div>

            <!-- Blog Cards Row -->
            <div class="row g-4">

                <!-- Card 1 -->
                <div class="col-lg-4 col-md-6">
                    <div class="blog-news-card">
                        <div class="blog-news-img-wrap">
                            <img src="/dine360_theme_shivasakthi/static/src/img/blog-news-1.png" alt="The Flavors of North India" class="blog-news-img"/>
                        </div>
                        <div class="blog-news-body">
                            <h3 class="blog-news-title">THE FLAVORS OF NORTH INDIA: MORE THAN JUST CURRIES</h3>
                            <p class="blog-news-excerpt">Exploring the Bread, Tandoor, and Delights of North Indian Cuisine 'North Indian cuisine is not only about rich curries but also a vibrant array of breads, tandoor-cooked</p>
                            <a href="/blog" class="blog-news-readmore">READ MORE <i class="fa fa-star ms-1"/></a>
                        </div>
                    </div>
                </div>

                <!-- Card 2 -->
                <div class="col-lg-4 col-md-6">
                    <div class="blog-news-card">
                        <div class="blog-news-img-wrap">
                            <img src="/dine360_theme_shivasakthi/static/src/img/blog-news-2.png" alt="The Secret to Perfect North Indian Curries" class="blog-news-img"/>
                        </div>
                        <div class="blog-news-body">
                            <h3 class="blog-news-title">THE SECRET TO PERFECT NORTH INDIAN CURRIES</h3>
                            <p class="blog-news-excerpt">Unlocking the Flavors of Authentic North Indian CuisineNorth Indian curries are the heart and soul of Indian cuisine, known for their rich textures, deep flavors, and</p>
                            <a href="/blog" class="blog-news-readmore">READ MORE <i class="fa fa-star ms-1"/></a>
                        </div>
                    </div>
                </div>

                <!-- Card 3 -->
                <div class="col-lg-4 col-md-6">
                    <div class="blog-news-card">
                        <div class="blog-news-img-wrap">
                            <img src="/dine360_theme_shivasakthi/static/src/img/blog-news-3.png" alt="The Rich History of South Indian Cuisine" class="blog-news-img"/>
                        </div>
                        <div class="blog-news-body">
                            <h3 class="blog-news-title">THE RICH HISTORY OF SOUTH INDIAN CUISINE</h3>
                            <p class="blog-news-excerpt">A Journey Through Time: The Story of South Indian Cuisine</p>
                            <a href="/blog" class="blog-news-readmore">READ MORE <i class="fa fa-star ms-1"/></a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>



    <!-- Pre-footer Food Slider -->
    <section class="s_prefooter_food_slider overflow-hidden" style="background-color: #ffffff;">
        <div class="food-slider-container">
            <div class="food-slider-track">
                <!-- Set 1 -->
                <div class="food-slide"><img src="/dine360_theme_shivasakthi/static/src/img/slider-dish-1.png" alt="Dish 1"/></div>
                <div class="food-slide"><img src="/dine360_theme_shivasakthi/static/src/img/slider-dish-2.png" alt="Dish 2"/></div>
                <div class="food-slide"><img src="/dine360_theme_shivasakthi/static/src/img/slider-dish-3.png" alt="Dish 3"/></div>
                <div class="food-slide"><img src="/dine360_theme_shivasakthi/static/src/img/slider-dish-4.png" alt="Dish 4"/></div>
                <div class="food-slide"><img src="/dine360_theme_shivasakthi/static/src/img/slider-dish-5.png" alt="Dish 5"/></div>
                <!-- Set 2 for infinite loop -->
                <div class="food-slide"><img src="/dine360_theme_shivasakthi/static/src/img/slider-dish-1.png" alt="Dish 1"/></div>
                <div class="food-slide"><img src="/dine360_theme_shivasakthi/static/src/img/slider-dish-2.png" alt="Dish 2"/></div>
                <div class="food-slide"><img src="/dine360_theme_shivasakthi/static/src/img/slider-dish-3.png" alt="Dish 3"/></div>
                <div class="food-slide"><img src="/dine360_theme_shivasakthi/static/src/img/slider-dish-4.png" alt="Dish 4"/></div>
                <div class="food-slide"><img src="/dine360_theme_shivasakthi/static/src/img/slider-dish-5.png" alt="Dish 5"/></div>
            </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>




