<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <!-- Create the About Us website page record -->
    <record id="aboutus_page" model="website.page">
        <field name="name">About Us</field>
        <field name="url">/aboutus</field>
        <field name="is_published">True</field>
        <field name="view_id" ref="website.aboutus"/>
        <field name="track">True</field>
    </record>

    <!-- Inherit and Override Catalog Page -->
    <template id="rental_catalog_template_inherit" inherit_id="event_rental.rental_catalog_template">
        <xpath expr="//div[@id='wrap']" position="replace">
            <div id="wrap" class="oe_structure oe_empty tailwind-wrapper bg-cream" style="background-color: #fcf6e9;">
                <main class="flex-1">
                    <section class="mx-auto max-w-6xl px-6 py-12">
                        <p class="mb-4 text-xs uppercase tracking-[0.4em] text-gold">Rental Collection</p>
                        <h1 class="font-serif text-5xl text-navy md:text-6xl mb-6">Our Event Rental Products</h1>
                        <p class="mt-2 max-w-2xl text-muted-foreground mb-12">Browse our premium collection of event rental items to elevate your special occasion.</p>
                        
                        <div class="row">
                            <!-- Category Sidebar -->
                            <div class="col-md-3 mb-4">
                                <div class="bg-card rounded-xl border border-border/60 p-4 shadow-sm">
                                    <h5 class="font-serif text-xl text-navy mb-4" style="border-bottom: 2px solid #d4a14a; padding-bottom: 8px;">Categories</h5>
                                    <div class="list-group list-group-flush" style="background: transparent;">
                                        <a t-att-href="'/rentals' + (search and ('?search=' + search) or '')" 
                                           t-att-class="'list-group-item list-group-item-action border-0 px-2 py-2 rounded font-medium ' + (not current_category and 'bg-navy text-cream' or 'text-navy hover:bg-navy/5 bg-transparent')"
                                           style="transition: all 0.2s; text-decoration: none;">
                                            All Products
                                        </a>
                                        <t t-foreach="categories" t-as="cat">
                                            <a t-att-href="'/rentals?category=' + str(cat.id) + (search and ('&amp;search=' + search) or '')"
                                               t-att-class="'list-group-item list-group-item-action border-0 px-2 py-2 rounded font-medium mt-1 ' + (current_category == cat.id and 'bg-navy text-cream' or 'text-navy hover:bg-navy/5 bg-transparent')"
                                               style="transition: all 0.2s; text-decoration: none;">
                                                <span t-field="cat.name"/>
                                            </a>
                                        </t>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Products Section -->
                            <div class="col-md-9">
                                <!-- Search and Filter Area -->
                                <div class="mb-6">
                                    <form action="/rentals" method="get" class="flex gap-2">
                                        <input type="hidden" name="category" t-att-value="current_category" t-if="current_category"/>
                                        <input type="text" name="search" class="form-control flex-1 px-4 py-2 border border-border rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-gold" placeholder="Search rental products..." t-att-value="search"/>
                                        <button type="submit" class="btn bg-navy text-cream hover:bg-navy/90 px-6 py-2 rounded-lg font-medium shadow-sm transition-colors" style="color: #fcf6e9; border: none;">Search</button>
                                    </form>
                                </div>
                                
                                <!-- Empty state -->
                                <div class="text-center py-16 bg-card rounded-xl border border-border/60 shadow-sm" t-if="not products">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#d4a14a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-4"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                                    <h3 class="font-serif text-2xl text-navy mb-2">No Products Found</h3>
                                    <p class="text-muted-foreground text-sm">We couldn't find any rental products matching your filters.</p>
                                    <a href="/rentals" class="mt-4 inline-block text-gold underline text-sm font-semibold">Clear Filters</a>
                                </div>
                                
                                <!-- Product Grid -->
                                <div class="row" t-if="products">
                                    <t t-foreach="products" t-as="product">
                                        <div class="col-md-4 col-sm-6 mb-4">
                                            <div class="group flex flex-col h-100 rounded-xl border border-border/60 bg-card transition-shadow hover:shadow-lg overflow-hidden">
                                                <!-- Product Image -->
                                                <div class="relative overflow-hidden bg-slate-100" style="height: 200px;">
                                                    <img t-if="product.image_1920" t-att-src="image_data_uri(product.image_1920)" class="w-100 h-100 object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy"/>
                                                    <div t-else="" class="d-flex align-items-center justify-content-center h-100 text-muted bg-slate-50">
                                                        <i class="fa fa-picture-o fa-3x text-slate-300"></i>
                                                    </div>
                                                </div>
                                                <!-- Product Details -->
                                                <div class="p-4 d-flex flex-column flex-grow-1">
                                                    <h3 class="font-serif text-lg text-navy font-bold mb-2 group-hover:text-gold transition-colors" t-field="product.name"/>
                                                    <p class="text-sm text-muted-foreground leading-relaxed flex-grow-1 mb-4" t-field="product.description_sale" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"/>
                                                    
                                                    <div class="mt-auto pt-3 border-t border-border/40 d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <span class="font-serif text-lg text-navy font-bold" t-field="product.rental_price_per_day" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                                                            <span class="text-xs text-muted-foreground block">/ day</span>
                                                        </div>
                                                        <a t-att-href="'/rentals/%s' % slug(product)" class="inline-flex items-center justify-center font-medium cursor-pointer transition-colors px-3 py-1.5 text-xs bg-navy text-cream hover:bg-navy/90 rounded-md shadow-sm" style="color: #fcf6e9; text-decoration: none;">
                                                            View Details
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </t>
                                </div>
                            </div>
                        </div>
                    </section>
                </main>
            </div>
        </xpath>
    </template>


    <!-- Inherit and Override Product Detail Page -->
    <template id="rental_product_detail_template_inherit" inherit_id="event_rental.rental_product_detail_template">
        <xpath expr="//div[@id='wrap']" position="replace">
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=Outfit:wght@300;400;500;600;700;800&amp;family=Playball&amp;display=swap');

                #wrap {
                    background-color: #fcf6e9 !important;
                    font-family: 'Inter', sans-serif !important;
                }

                h1, h2, h3, h4, h5, h6 {
                    font-family: 'Outfit', sans-serif !important;
                    font-weight: 700;
                    color: #0f172a;
                }

                .aakriti-cursive {
                    font-family: 'Playball', cursive !important;
                    color: #d4a14a !important;
                }

                .breadcrumb-link {
                    color: #0b223e;
                    font-weight: 500;
                }

                .detail-card {
                    background: #ffffff;
                    border: 1px solid #EAE5E8;
                    border-radius: 16px;
                    box-shadow: 0 4px 25px rgba(113, 75, 103, 0.02);
                }

                .detail-price {
                    font-size: 2.5rem;
                    font-weight: 800;
                    color: #0b223e;
                }

                .detail-action-btn {
                    border-radius: 30px !important;
                    background-color: #0b223e !important;
                    border: none !important;
                    padding: 16px 24px !important;
                    font-weight: 700;
                    letter-spacing: 0.5px;
                    font-size: 1rem;
                    transition: all 0.3s ease;
                }

                .detail-action-btn:hover {
                    background-color: #061528 !important;
                    transform: translateY(-2px);
                    box-shadow: 0 6px 18px rgba(113, 75, 103, 0.3) !important;
                }

                .terms-title {
                    font-size: 1.4rem;
                    border-left: 4px solid #d4a14a;
                    padding-left: 12px;
                    color: #0b223e;
                }
            </style>

            <div id="wrap" class="py-5">
                <div class="container">
                    <div class="row">
                        <!-- Product Gallery -->
                        <div class="col-md-6 mb-4">
                            <div class="detail-card p-3">
                                <div style="height: 450px; overflow: hidden; border-radius: 10px; background-color: #f1f5f9;">
                                    <img t-if="product.image_1920" t-att-src="image_data_uri(product.image_1920)" class="w-100 h-100" style="object-fit: cover;"/>
                                    <div t-else="" class="d-flex align-items-center justify-content-center h-100 text-muted bg-light">
                                        <i class="fa fa-picture-o fa-5x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Product Purchase Details -->
                        <div class="col-md-6">
                            <div class="detail-card p-4 p-md-5 h-100 d-flex flex-column">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb bg-transparent p-0 mb-4" style="font-size: 0.85rem;">
                                        <li class="breadcrumb-item"><a href="/rentals" class="breadcrumb-link">Collections</a></li>
                                        <li class="breadcrumb-item active text-muted" aria-current="page">
                                            <span t-field="product.name"/>
                                        </li>
                                    </ol>
                                </nav>
                                <span class="aakriti-cursive mb-1 d-block" style="font-size: 1.5rem;">Bespoke Design Collection</span>
                                <h1 class="display-5 mb-3" style="font-size: 2.2rem;" t-field="product.name"/>
                                
                                <!-- <div class="mb-4">
                                    <span t-if="product.qty_available &gt; 0" class="badge badge-pill badge-success p-2 px-3" style="background-color: #28a745; font-size: 0.8rem; font-weight: 600;">In Stock &amp; Available</span>
                                    <span t-else="" class="badge badge-pill badge-warning p-2 px-3" style="font-size: 0.8rem; font-weight: 600;">Custom Order - Checking Dates</span>
                                </div> -->

                                <div class="my-4 py-3 border-top border-bottom d-flex align-items-baseline">
                                    <span class="detail-price">
                                        <span t-field="product.rental_price_per_day" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                                    </span>
                                    <span class="text-muted ml-2 font-weight-normal lead" style="font-size: 1.15rem;">/ Day</span>
                                </div>

                                <h5 class="font-weight-bold mb-2" style="font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; color: #0b223e;">Product Description</h5>
                                <p class="text-muted mb-5" style="line-height: 1.6; font-size: 0.95rem;" t-field="product.description_sale"/>

                                <div class="mt-auto">
                                    <a t-att-href="'/rental/request?product_id=%s' % product.product_variant_id.id" class="btn btn-primary btn-lg btn-block detail-action-btn shadow-sm">
                                        Request Booking Quotation
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-5" t-if="product.rental_terms">
                        <div class="col-12">
                            <div class="detail-card p-5 bg-white">
                                <h4 class="font-weight-bold terms-title mb-4">RESERVATION TERMS &amp; GENERAL POLICIES</h4>
                                <div class="text-muted" style="line-height: 1.7; font-size: 0.95rem;" t-field="product.rental_terms"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </xpath>
    </template>

    <!-- Inherit and Override Request Form Template -->
    <template id="rental_request_form_template_inherit" inherit_id="event_rental.rental_request_form_template">
        <xpath expr="//div[@id='wrap']" position="replace">
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=Outfit:wght@300;400;500;600;700;800&amp;family=Playball&amp;display=swap');

                #wrap {
                    background-color: #fcf6e9 !important;
                    font-family: 'Inter', sans-serif !important;
                }

                h2, h4, h5 {
                    font-family: 'Outfit', sans-serif !important;
                    font-weight: 700;
                    color: #0f172a;
                }

                .aakriti-cursive {
                    font-family: 'Playball', cursive !important;
                    color: #d4a14a !important;
                }

                .form-container {
                    background: #ffffff;
                    border: 1px solid #EAE5E8;
                    border-radius: 20px;
                    box-shadow: 0 4px 30px rgba(113, 75, 103, 0.03);
                }

                .section-header {
                    color: #0b223e;
                    border-left: 4px solid #d4a14a;
                    padding-left: 12px;
                    font-size: 1.15rem;
                    font-weight: 700;
                    letter-spacing: 0.5px;
                    text-transform: uppercase;
                }

                .form-control {
                    border-radius: 8px !important;
                    border: 1.5px solid #EAE5E8 !important;
                    padding: 12px 16px !important;
                    font-size: 0.95rem !important;
                    transition: all 0.2s ease;
                }

                .form-control:focus {
                    border-color: #0b223e !important;
                    box-shadow: 0 0 0 3px rgba(113, 75, 103, 0.1) !important;
                }

                .form-group label {
                    font-weight: 600;
                    color: #334155;
                    font-size: 0.9rem;
                    margin-bottom: 6px;
                }

                .submit-btn {
                    border-radius: 30px !important;
                    background-color: #0b223e !important;
                    border: none !important;
                    padding: 16px 24px !important;
                    font-weight: 700;
                    letter-spacing: 0.5px;
                    font-size: 1.05rem;
                    transition: all 0.3s ease;
                }

                .submit-btn:hover {
                    background-color: #061528 !important;
                    transform: translateY(-2px);
                    box-shadow: 0 6px 18px rgba(113, 75, 103, 0.3) !important;
                }

                .upload-box {
                    border: 2px dashed #d4a14a;
                    padding: 20px;
                    border-radius: 12px;
                    background: #fcf6e9;
                    text-align: center;
                    transition: all 0.2s ease;
                }
            </style>

            <div id="wrap" class="py-5">
                <div class="container col-lg-8 col-md-10">
                    <div class="form-container p-4 p-md-5 bg-white">
                        <div class="text-center mb-5">
                            <span class="aakriti-cursive d-block" style="font-size: 1.8rem;">Let's Design Together</span>
                            <h2 class="display-5" style="font-size: 2rem;">Inquire About Your Event</h2>
                            <p class="text-muted" style="max-width: 600px; margin: 8px auto 0; font-size: 0.95rem;">Enter details below to submit your inquiry. Our reservations engine will instantly generate an itemized quote.</p>
                        </div>

                        <!-- Error Alert -->
                        <div class="alert alert-danger p-3 mb-4" role="alert" style="border-radius: 10px;" t-if="error_message">
                            <i class="fa fa-exclamation-circle mr-2"></i> <t t-out="error_message"/>
                        </div>

                        <form action="/rental/request" method="post" enctype="multipart/form-data">
                            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                            
                            <!-- Customer Details -->
                            <h5 class="section-header mb-4">1. Customer Information</h5>
                            <div class="row">
                                <div class="form-group col-md-6 mb-3">
                                    <label for="customer_name">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" name="customer_name" id="customer_name" class="form-control" required="1" t-att-value="post.get('customer_name', '')"/>
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <label for="customer_email">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" name="customer_email" id="customer_email" class="form-control" required="1" t-att-value="post.get('customer_email', '')"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-6 mb-3">
                                    <label for="customer_phone">Mobile Number <span class="text-danger">*</span></label>
                                    <input type="tel" name="customer_phone" id="customer_phone" class="form-control" required="1" t-att-value="post.get('customer_phone', '')"/>
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <label for="company_name">Company Name <span class="text-muted">(Optional)</span></label>
                                    <input type="text" name="company_name" id="company_name" class="form-control" t-att-value="post.get('company_name', '')"/>
                                </div>
                            </div>
                            <div class="form-group mb-4">
                                <label for="customer_address">Full Delivery Address</label>
                                <textarea name="customer_address" id="customer_address" rows="2" class="form-control" placeholder="Provide complete delivery address..."><t t-out="post.get('customer_address', '')"/></textarea>
                            </div>

                            <hr class="my-4" style="border-top: 1px solid #eef2f7;"/>

                            <!-- Event Details -->
                            <h5 class="section-header mb-4">2. Event &amp; Schedule Details</h5>
                            <div class="row">
                                <div class="form-group col-md-6 mb-3">
                                    <label for="start_date">Rental Start Date &amp; Time <span class="text-danger">*</span></label>
                                    <input type="datetime-local" name="start_date" id="start_date" class="form-control" required="1" t-att-value="post.get('start_date', '')"/>
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <label for="end_date">Rental End Date &amp; Time <span class="text-danger">*</span></label>
                                    <input type="datetime-local" name="end_date" id="end_date" class="form-control" required="1" t-att-value="post.get('end_date', '')"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-6 mb-3">
                                    <label for="location">Event Venue Location <span class="text-danger">*</span></label>
                                    <input type="text" name="location" id="location" class="form-control" required="1" t-att-value="post.get('location', '')" placeholder="City or Venue Hall name"/>
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <label for="event_type">Event Type <span class="text-danger">*</span></label>
                                    <select name="event_type" id="event_type" class="form-control" required="1">
                                        <option value="wedding" t-att-selected="post.get('event_type') == 'wedding'">Wedding</option>
                                        <option value="birthday" t-att-selected="post.get('event_type') == 'birthday'">Birthday</option>
                                        <option value="corporate" t-att-selected="post.get('event_type') == 'corporate'">Corporate Event</option>
                                        <option value="stage" t-att-selected="post.get('event_type') == 'stage'">Stage Setup</option>
                                        <option value="festival" t-att-selected="post.get('event_type') == 'festival'">Festival</option>
                                        <option value="exhibition" t-att-selected="post.get('event_type') == 'exhibition'">Exhibition</option>
                                        <option value="other" t-att-selected="post.get('event_type') == 'other' or not post.get('event_type')">Other</option>
                                    </select>
                                </div>
                            </div>

                            <hr class="my-4" style="border-top: 1px solid #eef2f7;"/>

                            <!-- Product Details -->
                            <h5 class="section-header mb-4">3. Rental Item Selected</h5>
                            <div class="row">
                                <div class="form-group col-md-12 mb-3">
                                    <label for="product_id">Selected Product / Service <span class="text-danger">*</span></label>
                                    <select name="product_id" id="product_id" class="form-control" required="1">
                                        <t t-foreach="all_products" t-as="prod">
                                            <option t-att-value="prod.id" t-att-selected="(selected_product and selected_product.id == prod.id) or (post.get('product_id') == str(prod.id))">
                                                <t t-out="prod.display_name"/>
                                            </option>
                                        </t>
                                    </select>
                                </div>
                            </div>

                            <hr class="my-4" style="border-top: 1px solid #eef2f7;"/>

                            <!-- Document Upload -->
                            <h5 class="section-header mb-4">4. Document Verification</h5>
                            <div class="row">
                                <div class="form-group col-md-6 mb-3">
                                    <label for="doc_type">Government ID Proof <span class="text-danger">*</span></label>
                                    <select name="doc_type" id="doc_type" class="form-control" required="1">
                                        <option value="driving_license" t-att-selected="post.get('doc_type') == 'driving_license'">Driving License</option>
                                        <option value="passport" t-att-selected="post.get('doc_type') == 'passport'">Passport</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <label class="d-block mb-2">Upload File (PDF, JPG, PNG) <span class="text-danger">*</span></label>
                                    <div class="upload-box">
                                        <i class="fa fa-cloud-upload fa-2x text-brand-plum mb-2"></i>
                                        <input type="file" name="id_proof" id="id_proof" class="form-control-file d-block mx-auto" accept=".pdf,.jpg,.jpeg,.png" required="1" style="font-size: 0.85rem; max-width: 200px;"/>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary btn-lg btn-block submit-btn mt-4 shadow-sm">
                                Submit Rental Request
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </xpath>
    </template>

    <!-- Inherit and Override Success Confirmation Page -->
    <template id="rental_request_success_template_inherit" inherit_id="event_rental.rental_request_success_template">
        <xpath expr="//div[@id='wrap']" position="replace">
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=Outfit:wght@300;400;500;600;700;800&amp;family=Playball&amp;display=swap');

                #wrap {
                    background-color: #fcf6e9 !important;
                    font-family: 'Inter', sans-serif !important;
                }

                h2, h4 {
                    font-family: 'Outfit', sans-serif !important;
                    font-weight: 700;
                }

                .success-card {
                    background: #ffffff;
                    border: 1px solid #EAE5E8;
                    border-radius: 20px;
                    box-shadow: 0 4px 30px rgba(113, 75, 103, 0.03);
                    text-align: center;
                }

                .reference-badge {
                    padding: 12px 20px;
                    background-color: #eef2f7;
                    border-radius: 30px;
                    display: inline-block;
                    border: 1px dashed #d4a14a;
                }

                .success-icon {
                    color: #d4a14a;
                }
            </style>

            <div id="wrap" class="py-5">
                <div class="container text-center">
                    <div class="success-card p-5 col-lg-6 col-md-8 mx-auto bg-white">
                        <div class="mb-4">
                            <i class="fa fa-envelope-o fa-5x success-icon"></i>
                        </div>
                        <h2 class="display-5 text-brand-plum mb-3" style="font-size: 2rem;">Inquiry Registered!</h2>
                        <p class="lead text-muted mb-4" style="font-size: 1rem;">We have successfully registered your event rental inquiry in our booking database.</p>
                        
                        <div class="reference-badge mb-4">
                            <span class="text-muted" style="font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;">Reference Number</span><br/>
                            <h4 class="font-weight-bold text-brand-plum mb-0 mt-1" t-out="name"/>
                        </div>
                        
                        <p class="text-muted mb-4" style="font-size: 0.9rem; line-height: 1.6;">Our operations team is evaluating real-time stock allocations. You will receive an email and WhatsApp message shortly with a portal checkout link to review and pay the quotation.</p>
                        <a href="/rentals" class="btn btn-primary bg-brand-plum border-0 py-2 px-5 font-weight-bold shadow-sm" style="border-radius: 30px; font-size: 0.95rem;">Back to Catalog</a>
                    </div>
                </div>
            </div>
        </xpath>
    </template>

    <!-- Inherit and Override Homepage to match events.aakritidesign.com -->
    <template id="theme_aakriti_events_homepage" inherit_id="website.homepage" active="True" customize_show="False">
        <xpath expr="//div[@id='wrap']" position="replace">
            <div id="wrap" class="oe_structure oe_empty tailwind-wrapper bg-cream" style="background-color: #fcf6e9;">
                <main class="flex-1">
                    <section class="relative overflow-hidden" style="border-bottom: 1px solid #e0d6c6; overflow: hidden;">
                        <div class="pointer-events-none absolute inset-0 -z-10">
                            <div class="absolute -right-32 top-10 h-[420px] w-[420px] rounded-full bg-gold-soft/40 blur-3xl"></div>
                            <div class="absolute -left-40 top-1/3 h-[360px] w-[360px] rounded-full bg-sage/15 blur-3xl"></div>
                        </div>
                        <div class="mx-auto grid max-w-6xl gap-10 px-4 pt-20 pb-16 md:grid-cols-[1.1fr_1fr] md:items-center md:gap-16 md:pt-32 md:pb-28 md:px-6">
                            <div class="md:text-left">
                                <p class="mb-6 text-xs uppercase tracking-[0.4em] text-gold" style="margin-bottom: 1.5rem;">Aakriti Design · Events</p>
                                <h1 class="font-serif text-3xl leading-[1.1] text-navy sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl" style="margin:0;">
                                    Live Life Through
Design and Purpose —
Events that tell
your story,<br/>
                                    <span style="font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; color: #d4a14a; letter-spacing: 0.01em;">beautifully and meaningfully.</span>
                                </h1>
                                <p class="mt-6 text-base text-muted-foreground" style="margin-top: 1.5rem;">Thoughtful wedding and event design for fusion and multicultural celebrations — crafted with creativity, intention, and emotion.</p>
                                <div class="mt-8 flex flex-wrap justify-center gap-4 md:justify-start" style="margin-top: 2rem;">
                                    <a href="/rental/request" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium cursor-pointer transition-colors shadow rounded-md h-11 bg-navy px-6 text-cream hover:bg-navy/90" style="color: #fcf6e9;">
                                        Book Consultation 
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-2 h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                                    </a>
                                    <a href="/rentals" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium cursor-pointer transition-colors border shadow-sm rounded-md h-11 border-navy/30 px-6 text-navy hover:bg-navy/5">
                                        Explore Design
                                    </a>
                                </div>
                            </div>
                            <div class="relative mx-auto w-full max-w-sm md:max-w-none">
                                <img alt="Aakriti Design - Events and Celebrations" class="w-full rounded-2xl shadow-2xl ring-1 ring-navy/10" loading="eager" src="/theme_aakriti_events/static/src/img/right-img.webp" style="display: block;"/>
                            </div>
                        </div>
                    </section>
                    
                    <section style="background-color: #fefaef; border-top: 1px solid #e0d6c6; border-bottom: 1px solid #e0d6c6;">
                        <div class="mx-auto max-w-6xl px-6 py-20">
                            <div class="mb-14 max-w-2xl">
                                <p class="mb-3 text-xs uppercase tracking-[0.3em] text-gold" style="margin-bottom: 0.75rem;">What We Offer</p>
                                <h2 class="font-serif text-4xl text-navy md:text-5xl" style="margin: 0;">Five ways to bring your celebration to life</h2>
                            </div>
                            <div class="grid gap-px overflow-hidden rounded-xl border border-border/60 bg-border/60 md:grid-cols-2 lg:grid-cols-3">
                                <!-- Wedding Decor & Styling -->
                                <div class="group bg-cream p-8 transition-colors hover:bg-card">
                                    <img src="/theme_aakriti_events/static/src/img/1.webp" alt="Wedding Decor &amp; Styling icon" style="width: 35px; height: 35px; object-fit: contain; margin-bottom: 1.25rem;"/>
                                    <h3 class="mb-2 font-serif text-2xl text-navy" style="margin: 0 0 0.5rem 0;">Wedding Decor &amp; Styling</h3>
                                    <p class="text-sm leading-relaxed text-muted-foreground" style="margin: 0;">Creating personalized wedding environments designed around your story, traditions, and vision.</p>
                                </div>
                                <!-- Fusion Weddings -->
                                <div class="group bg-cream p-8 transition-colors hover:bg-card">
                                    <img src="/theme_aakriti_events/static/src/img/2.webp" alt="Fusion Weddings icon" style="width: 35px; height: 35px; object-fit: contain; margin-bottom: 1.25rem;"/>
                                    <h3 class="mb-2 font-serif text-2xl text-navy" style="margin: 0 0 0.5rem 0;">Fusion Weddings</h3>
                                    <p class="text-sm leading-relaxed text-muted-foreground" style="margin: 0;">Thoughtfully blending cultures and traditions into seamless, meaningful celebrations.</p>
                                </div>
                                <!-- Ceremony & Reception Design -->
                                <div class="group bg-cream p-8 transition-colors hover:bg-card">
                                    <img src="/theme_aakriti_events/static/src/img/3.webp" alt="Ceremony &amp; Reception Design icon" style="width: 35px; height: 35px; object-fit: contain; margin-bottom: 1.25rem;"/>
                                    <h3 class="mb-2 font-serif text-2xl text-navy" style="margin: 0 0 0.5rem 0;">Ceremony &amp; Reception Design</h3>
                                    <p class="text-sm leading-relaxed text-muted-foreground" style="margin: 0;">Designing elegant experiences that balance aesthetics, guest comfort, and flow.</p>
                                </div>
                                <!-- Stage & Mandap Design -->
                                <div class="group bg-cream p-8 transition-colors hover:bg-card">
                                    <img src="/theme_aakriti_events/static/src/img/4.webp" alt="Stage &amp; Mandap Design icon" style="width: 35px; height: 35px; object-fit: contain; margin-bottom: 1.25rem;"/>
                                    <h3 class="mb-2 font-serif text-2xl text-navy" style="margin: 0 0 0.5rem 0;">Stage &amp; Mandap Design</h3>
                                    <p class="text-sm leading-relaxed text-muted-foreground" style="margin: 0;">Custom focal spaces crafted with intention and visual impact.</p>
                                </div>
                                <!-- Event Styling & Rentals -->
                                <div class="group bg-cream p-8 transition-colors hover:bg-card">
                                    <img src="/theme_aakriti_events/static/src/img/5.webp" alt="Event Styling &amp; Rentals icon" style="width: 35px; height: 35px; object-fit: contain; margin-bottom: 1.25rem;"/>
                                    <h3 class="mb-2 font-serif text-2xl text-navy" style="margin: 0 0 0.5rem 0;">Event Styling &amp; Rentals</h3>
                                    <p class="text-sm leading-relaxed text-muted-foreground" style="margin: 0;">Decor elements, floral styling, and curated details that complete the experience.</p>
                                </div>
                                <!-- BEGIN card -->
                                <div class="bg-navy p-8 text-cream">
                                    <p class="text-xs uppercase tracking-[0.3em] text-gold-soft" style="margin: 0;">Begin</p>
                                    <h3 class="mt-4 font-serif text-2xl text-cream" style="margin: 1rem 0 0 0; color: #fcf6e9;">Start planning your celebration</h3>
                                    <p class="mt-2 text-sm leading-relaxed text-cream/70" style="margin: 0.5rem 0 0 0; color: rgba(252, 246, 233, 0.7);">Tell us about your vision — we'll help bring your ideas into a beautifully designed experience.</p>
                                    <a href="/rental/request" class="mt-6 inline-flex items-center gap-2 text-sm hover:gap-3 transition-all" style="margin-top: 1.5rem; color: #d4a14a;" onmouseover="this.style.color='#d4a14a'" onmouseout="this.style.color='#d4a14a'">
                                        Book a Consultation
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </section>
                    
                    <section class="mx-auto max-w-4xl px-6 py-24 text-center" style="background-color: #fcf6e9;">
                        <p class="mb-4 text-xs uppercase tracking-[0.3em] text-gold" style="margin-bottom: 1rem;">Meet Parul</p>
                        <h2 class="font-serif text-4xl text-navy md:text-5xl" style="margin: 0;">&#8220;Every celebration should feel like a reflection of the people at its center.&#8221;</h2>
                        <p class="mx-auto mt-8 max-w-2xl text-muted-foreground" style="margin-top: 2rem;">With over 10 years of experience in event design, logistics, and space planning, Paarul brings a thoughtful approach that balances creativity, culture, and practical execution.</p>
                        <div class="mt-8" style="margin-top: 2rem;">
                            <a href="/aboutus" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer underline-offset-4 hover:underline h-9 px-4 py-2 text-gold">Read more about Parul &#8594;</a>
                        </div>
                    </section>
                    
                    <section class="border-t border-border/60 bg-navy">
                        <div class="mx-auto max-w-5xl px-6 py-20 text-center text-cream">
                            <h2 class="font-serif text-4xl md:text-5xl" style="margin: 0; color: #fcf6e9;">Ready to begin?</h2>
                            <p class="mx-auto mt-4 max-w-xl text-cream/70" style="margin-top: 1rem; color: rgba(252, 246, 233, 0.7);">Book a consultation online and let's create an event experience designed with intention, beauty, and meaning — tailored specifically for your celebration.</p>
                            <a href="/rental/request" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium cursor-pointer shadow rounded-md mt-8 h-12 bg-gold px-8 text-navy hover:bg-gold/90" style="margin-top: 2rem; color: #0b223e;">Book a Design Consultation</a>
                        </div>
                    </section>
                </main>
            </div>
        </xpath>
    </template>

    
    <!-- Tailwind CSS Injection -->
    <template id="theme_aakriti_events_tailwind" inherit_id="website.layout">
        <xpath expr="//head" position="inside">
            <script src="https://cdn.tailwindcss.com"></script>
            <script>
              tailwind.config = {
                corePlugins: {
                  preflight: false,
                },
                theme: {
                  extend: {
                    colors: {
                      navy: '#0b223e',
                      cream: '#fcf6e9',
                      gold: '#d4a14a',
                      'gold-soft': '#d8b47d',
                      sage: '#8a9a86',
                      border: '#e5e7eb',
                      muted: { foreground: '#6b7280' },
                      card: '#fefaef',
                      background: '#fcf6e9'
                    },
                    fontFamily: {
                      serif: ['"Playfair Display"', 'serif'],
                      sans: ['Inter', 'sans-serif'],
                    }
                  }
                }
              }
            </script>
            <style>
              /* Add minimal preflight for Tailwind inside the specific wrapper since we disabled global preflight */
              .tailwind-wrapper h1, .tailwind-wrapper h2, .tailwind-wrapper h3, .tailwind-wrapper h4, .tailwind-wrapper p {
                  margin: 0;
              }
              .tailwind-wrapper a {
                  text-decoration: none;
              }
              /* Lock text color on hover - prevent Odoo's global a:hover from overriding */
              .tailwind-wrapper a[style*="color: #d4a14a"]:hover,
              .tailwind-wrapper a.text-gold:hover {
                  color: #d4a14a !important;
              }
              /* Navy buttons: keep cream text on hover */
              .tailwind-wrapper a.bg-navy:hover,
              .tailwind-wrapper a[style*="background-color: #0b223e"]:hover {
                  color: #fcf6e9 !important;
              }
              /* Cream buttons with navy text: keep navy on hover */
              .tailwind-wrapper a.text-navy:hover {
                  color: #0b223e !important;
              }
              /* Any link with explicit inline color: keep it on hover */
              .tailwind-wrapper a[style*="color:"]:hover {
                  color: inherit;
              }
              .tailwind-wrapper img {
                  max-width: 100%;
                  height: auto;
              }
              /* =====================================================
                 GLOBAL HORIZONTAL OVERFLOW FIX
                 Prevent any element from causing horizontal scroll
              ===================================================== */
              html, body {
                  overflow-x: hidden !important;
                  max-width: 100% !important;
              }
              #wrap, #wrapwrap {
                  overflow-x: hidden !important;
                  max-width: 100% !important;
              }
              /* Mobile drawer: start fully off-canvas to the right */
              #mobileDrawer {
                  right: -100% !important;
                  transform: none !important;
                  transition: right 0.3s ease, visibility 0.3s ease !important;
              }
              #mobileDrawer.drawer-open {
                  right: 0 !important;
              }
              #mobileDrawerOverlay {
                  pointer-events: none;
              }
              #mobileDrawerOverlay.overlay-active {
                  pointer-events: auto;
              }
              @media (min-width: 768px) {
                  #mobileDrawer, #mobileDrawerOverlay { display: none !important; }
              }
            </style>
        </xpath>
    </template>

    <!-- Inherit Website Layout to Override Header & Footer -->
    <template id="theme_aakriti_events_header_inherit" inherit_id="website.layout" priority="99">
        <!-- Header Override -->
        <xpath expr="//header" position="replace">
            <!-- Overflow and drawer CSS is now in the head style block (theme_aakriti_events_tailwind template) -->
            <header class="sticky top-0 z-40 backdrop-blur-md tailwind-wrapper" id="top" data-anchor="true" style="background-color: rgba(252, 246, 233, 0.92); border-bottom: 1px solid #e0d6c6;">
                <div class="mx-auto flex h-20 max-w-6xl items-center justify-between px-6">
                    <!-- Old logo block (ico + text) — kept for reference
                    <a class="group inline-flex items-center gap-3 active" href="/" data-status="active" aria-current="page">
                        <img alt="Aakriti Design" class="h-12 w-12 object-contain transition-transform duration-700 group-hover:rotate-6" src="/theme_aakriti_events/static/src/img/logo-aakriti.ico"/>
                        <span class="flex flex-col leading-none">
                            <span class="font-serif text-xl text-navy">Aakriti Design</span>
                            <span class="text-[10px] uppercase tracking-[0.25em] text-muted-foreground">Vastu Consultation</span>
                        </span>
                    </a>
                    -->
                    <a class="group inline-flex items-center active" href="/" data-status="active" aria-current="page">
                        <img alt="Aakriti Design" class="object-contain transition-transform duration-700 group-hover:scale-105" src="/theme_aakriti_events/static/src/img/logo.png" style="height: 56px; width: auto; max-width: 180px;"/>
                    </a>
                    <nav class="hidden items-center gap-8 md:flex">
                        <a t-attf-class="text-sm font-medium transition-colors hover:text-gold #{'text-gold' if request.httprequest.path == '/' else 'text-navy/80'}" t-attf-style="#{'color: #d4a14a; font-weight: 600;' if request.httprequest.path == '/' else ''}" href="/">Home</a>
                        <a t-attf-class="text-sm font-medium transition-colors hover:text-gold #{'text-gold' if request.httprequest.path == '/rentals' else 'text-navy/80'}" t-attf-style="#{'color: #d4a14a; font-weight: 600;' if request.httprequest.path == '/rentals' else ''}" href="/rentals">Services</a>
                        <a t-attf-class="text-sm font-medium transition-colors hover:text-gold #{'text-gold' if request.httprequest.path == '/aboutus' else 'text-navy/80'}" t-attf-style="#{'color: #d4a14a; font-weight: 600;' if request.httprequest.path == '/aboutus' else ''}" href="/aboutus">About</a>
                        <a t-attf-class="text-sm font-medium transition-colors hover:text-gold #{'text-gold' if request.httprequest.path == '/contactus' else 'text-navy/80'}" t-attf-style="#{'color: #d4a14a; font-weight: 600;' if request.httprequest.path == '/contactus' else ''}" href="/contactus">Contact</a>
                    </nav>
                    <div class="hidden items-center gap-3 md:flex">
                        <a href="/rental/request" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium cursor-pointer shadow h-8 rounded-md px-3 text-xs bg-navy text-cream hover:bg-navy/90" style="color: #fcf6e9;">Book a Consultation</a>
                    </div>
                    <!-- Mobile Hamburger Button -->
                    <button class="md:hidden text-navy" aria-label="Toggle menu" id="mobileMenuBtn" style="background: none; border: none; cursor: pointer; padding: 4px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>
                    </button>
                </div>

                <!-- Mobile Drawer Overlay -->
                <div id="mobileDrawerOverlay" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 998;"></div>

                <!-- Mobile Drawer Panel -->
                <div id="mobileDrawer" style="position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 90vw); background-color: #fcf6e9; z-index: 999; transform: translateX(100%); visibility: hidden; transition: transform 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(11,34,62,0.12);">
                    <!-- Drawer Header -->
                    <div style="display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid #e0d6c6;">
                        <!-- Old mobile drawer logo (ico + text) — kept for reference
                        <a href="/" style="display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none;">
                            <img alt="Aakriti Design" src="/theme_aakriti_events/static/src/img/logo-aakriti.ico" style="height: 2.75rem; width: 2.75rem; object-fit: contain;"/>
                            <span style="display: flex; flex-direction: column; line-height: 1;">
                                <span style="font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; color: #0b223e;">Aakriti Design</span>
                                <span style="font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.25em; color: #94a3b8;">Vastu Consultation</span>
                            </span>
                        </a>
                        -->
                        <a href="/" style="display: inline-flex; align-items: center; text-decoration: none;">
                            <img alt="Aakriti Design" src="/theme_aakriti_events/static/src/img/logo.png" style="height: 48px; width: auto; max-width: 160px; object-fit: contain;"/>
                        </a>
                        <button id="mobileDrawerCloseBtn" aria-label="Close menu" style="background: none; border: none; cursor: pointer; color: #0b223e; padding: 4px;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                        </button>
                    </div>
                    <!-- Drawer Nav Links -->
                    <nav style="flex: 1; display: flex; flex-direction: column; padding: 2rem 1.5rem; gap: 0;">
                        <a t-attf-href="/" t-attf-style="display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; padding: 0.9rem 0; color: #{'#d4a14a' if request.httprequest.path == '/' else '#0b223e'}; text-decoration: none; border-bottom: 1px solid #e0d6c6; transition: color 0.2s;" onmouseover="this.style.color='#d4a14a'" onmouseout="this.style.color=this.getAttribute('data-base-color')" data-base-color="#0b223e">Home</a>
                        <a t-attf-href="/rentals" style="display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; padding: 0.9rem 0; color: #0b223e; text-decoration: none; border-bottom: 1px solid #e0d6c6; transition: color 0.2s;" onmouseover="this.style.color='#d4a14a'" onmouseout="this.style.color='#0b223e'">Services</a>
                        <a t-attf-href="/aboutus" style="display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; padding: 0.9rem 0; color: #0b223e; text-decoration: none; border-bottom: 1px solid #e0d6c6; transition: color 0.2s;" onmouseover="this.style.color='#d4a14a'" onmouseout="this.style.color='#0b223e'">About</a>
                        <a t-attf-href="/contactus" style="display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; padding: 0.9rem 0; color: #0b223e; text-decoration: none; transition: color 0.2s;" onmouseover="this.style.color='#d4a14a'" onmouseout="this.style.color='#0b223e'">Contact</a>
                    </nav>
                    <!-- Drawer CTA Button -->
                    <div style="padding: 1.5rem;">
                        <a href="/rental/request" style="display: block; text-align: center; background-color: #0b223e; color: #fcf6e9; font-size: 0.9rem; font-weight: 500; padding: 0.9rem 1.5rem; border-radius: 0.5rem; text-decoration: none; transition: background-color 0.2s;" onmouseover="this.style.backgroundColor='#1a3a5c'" onmouseout="this.style.backgroundColor='#0b223e'">Book a Consultation</a>
                    </div>
                </div>

                <script>
                //<![CDATA[
                    (function() {
                        var overlay = document.getElementById('mobileDrawerOverlay');
                        var drawer = document.getElementById('mobileDrawer');
                        var btn = document.getElementById('mobileMenuBtn');

                        function openDrawer() {
                            drawer.classList.add('drawer-open');
                            drawer.style.visibility = 'visible';
                            if (overlay) {
                                overlay.style.display = 'block';
                                overlay.classList.add('overlay-active');
                            }
                            document.body.style.overflow = 'hidden';
                        }

                        function closeDrawer() {
                            drawer.classList.remove('drawer-open');
                            drawer.style.visibility = 'hidden';
                            if (overlay) {
                                overlay.classList.remove('overlay-active');
                                overlay.style.display = 'none';
                            }
                            document.body.style.overflow = '';
                        }

                        if (btn) {
                            btn.addEventListener('click', function() {
                                if (window.innerWidth > 767) return;
                                var isOpen = drawer.classList.contains('drawer-open');
                                if (isOpen) { closeDrawer(); } else { openDrawer(); }
                            });
                        }

                        var closeBtn = document.getElementById('mobileDrawerCloseBtn');
                        if (closeBtn) {
                            closeBtn.addEventListener('click', function() { closeDrawer(); });
                        }

                        if (overlay) {
                            overlay.addEventListener('click', function() { closeDrawer(); });
                        }

                        document.querySelectorAll('#mobileDrawer a').forEach(function(link) {
                            link.addEventListener('click', function() { closeDrawer(); });
                        });

                        window.addEventListener('resize', function() {
                            if (window.innerWidth > 767) { closeDrawer(); }
                        });
                    })();
                //]]>
                </script>
            </header>
        </xpath>

        <!-- Footer Override -->
        <xpath expr="//footer[@id='bottom']" position="attributes">
            <attribute name="style" add="background-color: #fcf6e9 !important; border-top: none !important; padding:0 !important;" separator=";"/>
            <attribute name="class" add="tailwind-wrapper" separator=" "/>
        </xpath>


        <!-- Hide Odoo's default copyright area -->
        <xpath expr="//div[hasclass('o_footer_copyright')]" position="attributes">
            <attribute name="class" add="d-none" separator=" "/>
        </xpath>

        <!-- Replace main footer div -->
        <xpath expr="//div[@id='footer']" position="replace">
            <div id="footer">
                <footer class="border-t border-border/60 bg-cream tailwind-wrapper" style="background-color: #fcf6e9; border-top: 1px solid #e0d6c6;">
                    <div class="mx-auto max-w-6xl px-6 py-14">
                        <div class="grid gap-10 md:grid-cols-4">
                            <div class="md:col-span-2">
                                <!-- Old footer logo (ico + text) — kept for reference
                                <a class="group inline-flex items-center gap-3 active" href="/">
                                    <img alt="Aakriti Design" class="h-12 w-12 object-contain transition-transform duration-700 group-hover:rotate-6" src="/theme_aakriti_events/static/src/img/logo-aakriti.ico"/>
                                    <span class="flex flex-col leading-none">
                                        <span class="font-serif text-xl text-navy">Aakriti Design</span>
                                        <span class="text-[10px] uppercase tracking-[0.25em] text-muted-foreground">Vastu Consultation</span>
                                    </span>
                                </a>
                                -->
                                <a class="group inline-flex items-center active" href="/">
                                    <img alt="Aakriti Design" class="object-contain transition-transform duration-700 group-hover:scale-105" src="/theme_aakriti_events/static/src/img/logo.png" style="height: 56px; width: auto; max-width: 180px;"/>
                                </a>
                                <p class="mt-4 max-w-sm text-sm" style="margin-top: 1rem; color: #000000;">Premium wedding and event design with thoughtful styling, meaningful experiences, and seamless execution.</p>
                            </div>
                            <div>
                                <h2 class="mb-3 text-base font-serif font-bold uppercase tracking-wider" style="color: #0b223e; margin-bottom: 0.75rem; font-family: 'Playfair Display', Georgia, serif;">Explore</h2>
                                <style> .footer-link:hover { color: #d4a14a !important; } </style>
                                <ul class="space-y-2 text-sm" style="list-style: none; padding: 0; margin: 0; gap: 0.5rem; display: flex; flex-direction: column; color: #000000;">
                                    <li><a href="/rentals" class="text-black footer-link" style="transition: color 0.2s; text-decoration: none;">Services</a></li>
                                    <li><a href="/aboutus" class="text-black footer-link" style="transition: color 0.2s; text-decoration: none;">About Parul</a></li>
                                    <li><a href="/rental/request" class="text-black footer-link" style="transition: color 0.2s; text-decoration: none;">Book a Consultation</a></li>
                                    <li><a href="/contactus" class="text-black footer-link" style="transition: color 0.2s; text-decoration: none;">Contact</a></li>
                                </ul>
                            </div>
                            <div>
                                <h2 class="mb-3 text-base font-serif font-bold uppercase tracking-wider" style="color: #0b223e; margin-bottom: 0.75rem; font-family: 'Playfair Display', Georgia, serif;">Connect</h2>
                                <style> .footer-connect-link:hover { color: #d4a14a !important; } </style>
                                <ul class="space-y-2 text-sm" style="list-style: none; padding: 0; margin: 0; gap: 0.5rem; display: flex; flex-direction: column; color: #000000;">
                                    <li><a href="mailto:info@aakritidesign.com" class="footer-connect-link" style="color: #000000; text-decoration: none; transition: color 0.2s;">info@aakritidesign.com</a></li>
                                    <li><a href="/contactus" class="footer-connect-link" style="color: #000000; text-decoration: none; transition: color 0.2s;">By appointment</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="mt-12" style="margin-top: 3rem; height: 1.5px; border: none; background: linear-gradient(to right, transparent, #d4a14a, transparent);"></div>
                        <p class="mt-6 text-center text-xs" style="margin-top: 1.5rem; color: #000000;">
                            &#169; <span id="aakriti-footer-year">2026</span> Aakriti Design. Premium Wedding &amp; Event Decor.
                        </p>
                        <script type="text/javascript">
                            //<![CDATA[
                            (function() {
                                var el = document.getElementById('aakriti-footer-year');
                                if (el) { el.textContent = new Date().getFullYear(); }
                            })();
                            //]]>
                        </script>
                    </div>
                </footer>
            </div>
        </xpath>
    </template>

    <!-- Inherit and Override About Us page -->
    <template id="theme_aakriti_events_aboutus" inherit_id="website.aboutus" active="True">
        <xpath expr="//div[@id='wrap']" position="replace">
            <div id="wrap" class="oe_structure oe_empty tailwind-wrapper bg-cream" style="background-color: #fcf6e9;">
                <main class="flex-1">
                    <section class="mx-auto grid max-w-6xl gap-12 px-6 py-24 md:grid-cols-[1fr_0.85fr] md:items-start md:gap-16">
                        <div>
                            <p class="mb-4 text-xs uppercase tracking-[0.4em] text-gold">About</p>
                            <h1 class="font-serif text-5xl text-navy md:text-6xl">About Aakriti Design Events</h1>
                            <div class="my-10 w-full max-w-2xl" style="height: 1.5px; background: linear-gradient(to right, transparent, rgba(212, 161, 74, 0.4), transparent);"></div>
                            <div class="space-y-6 text-lg leading-relaxed text-muted-foreground">
                                <p>Aakriti Design specializes in event decor and wedding design that goes beyond surface-level styling. We create environments that reflect your story, your culture, and the experience you want your guests to remember. Every celebration carries emotion, movement, and energy, and our approach begins with understanding how people gather, how spaces flow, and how each element supports the overall experience.</p>
                                <p>With over 10 years of experience in event design, logistics, and space management, Paarul Ladd brings a thoughtful understanding of how celebrations unfold and how environments shape experiences. Known for seamlessly blending cultures and creating beautifully balanced events, her work spans intimate weddings, large-scale celebrations, and complex fusion events.</p>
                            </div>
                            <div class="mt-12">
                                <a href="/rental/request" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 shadow h-9 px-4 py-2 bg-navy text-cream hover:bg-navy/90">Book a consultation</a>
                            </div>
                        </div>
                        <div class="relative md:sticky md:top-24" id="__FPSC_ID_2_1781584228681" style="">
                            <div class="absolute -inset-4 -z-10 rounded-3xl bg-gradient-to-br from-gold-soft/40 to-sage/15 blur-2xl"></div>
                            <img alt="Aakriti Design - Create a space that supports your life." class="w-full rounded-2xl shadow-2xl ring-1 ring-navy/10" loading="lazy" src="/theme_aakriti_events/static/src/img/about.webp"/>
                        </div>
                    </section>
                </main>
            </div>
        </xpath>
    </template>

    <!-- Inherit and Override Contact Us page -->
    <template id="theme_aakriti_events_contactus" inherit_id="website.contactus" active="True">
        <xpath expr="//div[@id='wrap']" position="replace">
            <div id="wrap" class="oe_structure oe_empty tailwind-wrapper bg-cream" style="background-color: #fcf6e9; min-height: 80vh; display: flex; align-items: center; justify-content: center;">
                <main class="flex-1 flex flex-col items-center justify-center py-24 px-6 text-center w-full">
                    <p class="mb-4 text-xs uppercase tracking-[0.4em] text-gold w-full" style="color: #d4a14a; letter-spacing: 0.4em; text-transform: uppercase; font-size: 0.75rem;">Contact</p>
                    <h1 class="font-serif text-5xl text-navy md:text-6xl w-full mt-2 mb-10" style="color: #0b223e;">Let's connect</h1>
                    
                    <div class="my-10 w-full max-w-2xl mx-auto" style="height: 1.5px; background: linear-gradient(to right, transparent, rgba(212, 161, 74, 0.4), transparent);"></div>
                    
                    <p class="max-w-xl mx-auto text-muted-foreground leading-relaxed mt-10" style="color: #64748b;">
                        For inquiries, collaborations, wedding consultations, or event planning questions, send us a message. We respond personally within two business days.
                    </p>
                    
                    <div class="mt-12 flex items-center justify-center gap-3 text-lg font-serif text-navy" style="color: #0b223e; margin-top: 3rem;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
                        <style> .contact-email:hover { color: #d4a14a !important; } </style><a href="mailto:info@aakritidesign.com" class="contact-email transition-colors text-xl" style="color: #0b223e; text-decoration: none;">info@aakritidesign.com</a>
                    </div>
                </main>
            </div>
        </xpath>
    </template>
</odoo>


