<div style="width: 100%; margin: 20px auto; font-family: Arial, sans-serif; line-height: 1.5;">

    <div style="text-align: center; margin-bottom: 40px;">
        <div style="margin-bottom: 20px; vertical-align: top !important;">
            <img src="{{logo}}" style="height: 80px;" alt="logo">
        </div>
        <h1 style="font-size: 2.5rem; margin: 0;">Invoice</h1>
        <p style="color: #6c757d; font-size: 1rem;">Thank you for your business!</p>
    </div>

    <!-- From and To content in a table with zero borders -->
    <table style="width: 100%; border-collapse: collapse; font-size: 1rem; margin-bottom: 40px; border: 0;">
        <tbody><tr style="border: 0;">
            <td style="border: 0; vertical-align: top; padding-bottom: 20px;">
                <h4 style="margin-bottom: 10px; font-size: 1.25rem;">From:</h4>
                <p style="margin: 0; font-size: 1rem;">
                    <strong>{{company_name}}</strong><br>
                    {{company_address}}<br>
                    Email: {{company_email}}<br>
                    Phone: {{company_phone}}
                </p>
            </td>
            <td style="border: 0; vertical-align: top; padding-bottom: 20px;">
                <h4 style="margin-bottom: 10px; font-size: 1.25rem;">To:</h4>
                <p style="margin: 0; font-size: 1rem;">
                    <strong>{{user_name}}</strong><br>
                    {{user_address}}<br>
                    Email: {{user_email}}<br>
                    Phone: {{user_phone}}
                </p>
            </td>
        </tr>
    </tbody></table>

    <!-- Invoice Table -->
    <table style="width: 100%; border-collapse: collapse; font-size: 1rem; margin-bottom: 20px;">
        <thead style="background-color: #f8f9fa; text-align: left;">
            <tr>
                <th style="border: 1px solid #dee2e6; padding: 8px;">#</th>
                <th style="border: 1px solid #dee2e6; padding: 8px;">Item</th>
                <th style="border: 1px solid #dee2e6; padding: 8px;">Description</th>
                <th style="border: 1px solid #dee2e6; padding: 8px; text-align: right;">Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="border: 1px solid #dee2e6; padding: 8px;">1</td>
                <td style="border: 1px solid #dee2e6; padding: 8px;">Service/Quote</td>
                <td style="border: 1px solid #dee2e6; padding: 8px;">{{description}}</td>
                <td style="border: 1px solid #dee2e6; padding: 8px; text-align: right;">${{quote}}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="3" style="border: 1px solid #dee2e6; padding: 8px; text-align: right;">Total</th>
                <th style="border: 1px solid #dee2e6; padding: 8px; text-align: right;">${{quote}}</th>
            </tr>
        </tfoot>
    </table>
</div>