<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet">
  <title>OTP Verification</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background: #F2F2F2;
      color: #1C255F;
      font-family: "Domine", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    }
    .email-container {
      max-width: 600px;
      margin: 0 auto;
      background: #F2F2F2;
    }
    .header {
      background: #374ABE;
      text-align: center;
      padding: 20px;
    }
    .header img {
      width: 500px;
      height: auto;
    }
    .header h1 {
      margin: 10px 0;
      font-size: 24px;
      color: #fff;
    }
    .content {
      padding: 20px;
      background: #fff;
    }
    .content p {
      font-size: 16px;
      line-height: 1.6;
    }
    .otp-box {
      text-align: center;
      margin: 20px 0;
      padding: 15px;
      background: #FFFF00;
      color: #1C255F;
      font-size: 24px;
      font-weight: bold;
      border-radius: 5px;
    }
    .footer {
      text-align: center;
      padding: 15px;
      font-size: 14px;
      color: #1C255F;
      background: #ffff;
    }
    .footer a {
      color: #374ABE;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="email-container">
    <div class="header">
      <img src="https://propertyonlocation.com/logo-email.png">
      <h1>OTP Verification</h1>
    </div>
    <div class="content">
      <p>Hi <strong><%= username %></strong>,</p>
      <p>We received a request to verify on email. Use the OTP below to complete your verification. This OTP is valid for the next 5 minutes.</p>
      <div class="otp-box"><%= otp %></div>
      <p>If you did not request this verification, please ignore this email or contact our support team.</p>
    </div>
    <div class="footer">
      <p>Need help? Visit our <a href="https://propertyonlocation.com" target="_blank">support page</a>.</p>
      <p>&copy; 2024 Your propertyonlocation. All rights reserved.</p>
    </div>
  </div>
</body>
</html>
