<!DOCTYPE html>
                            <html>
                            <head>
                                <meta charset="UTF-8">
                                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                <style>
                                    body.email-template { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 10px; }
                                    .container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border: 1px solid #eaeaea; border-radius: 8px; overflow: hidden; }
                                    .header { background-color: #f1f1f1; text-align: left; padding: 20px; }                           
                                    .content { padding: 30px 20px; text-align: left; color: #333333; font-size: 14px; }
                                    .button { background-color: #1E3A8A; color: #ffffff !important; padding: 12px 24px; text-decoration: none; font-weight: bold; border-radius: 6px; display: inline-block; margin: 20px 0; }
                                    .footer { background-color: #22242A; padding: 20px; text-align: center; font-size: 12px; color: #FFFFFF; }
                                    .heading { color: #1E3A8A; }
                                    .footer a { color: #FFFFFF; text-decoration: none; }
                                </style>
                            </head>
                            <body class="email-template">
                                <div class="container">
                                    <!-- Header Image -->
                                    <div class="header">
                                        <img src="{{EMAIL_LOGO}}" alt="{{IMAGE_ALT}}" style="width: 200px; max-width: 600px; height: auto; border-radius: 8px 8px 0 0;">
                                    </div>

                                    <!-- Content -->
                                    <div class="content">
                                        <h2 class="heading">You’re Invited to Join Eventably!</h2>
                                        <p>Hi there,</p>
                                        <p>You have been invited to join <strong>Eventably</strong> as a team member. To accept this invitation and join the team, please confirm your membership by clicking the button below:</p>
                                        <a href="{{BASE_URL}}/teamconfirm?teamId={{TEAMID}}&memberId={{USERID}}" class="button" target="_blank">Confirm Invitation</a>
                                        <p>If the button above doesn't work, copy and paste the following link into your browser:</p>
                                        <p><a href="{{BASE_URL}}/teamconfirm?teamId={{TEAMID}}&memberId={{USERID}}" target="_blank">{{BASE_URL}}/teamconfirm?teamId={{TEAMID}}&memberId={{USERID}}</a></p>
                                        <p style="color: #555555; font-size: 15px; margin-top: 20px;">Best regards,<br />{{SIGNATURE}}</p>
                                    </div>

                                    <!-- Footer -->
                                    <div class="footer">
                                        {{FOOTER}} <br>
                                    </div>
                                </div>
                            </body>
                            </html>
                            