<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Terms and Condition</title>

  <style>
    :root {
      --primary: #9c2c91;
      --text-dark: #2b2b2b;
      --text-gray: #6f6f6f;
      --background: #ffffff;
      --divider: #eaeaea;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background: var(--background);
      color: var(--text-dark);
      line-height: 1.6;
    }

    .container {
      max-width: 420px;
      margin: 0 auto;
      padding: 20px;
    }

    /* Header */
    .header {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 20px;
    }

    .back-btn {
      position: absolute;
      left: 0;
      font-size: 20px;
      cursor: pointer;
    }

    .title {
      color: var(--primary);
      font-weight: 600;
      font-size: 18px;
    }

    .updated {
      font-size: 13px;
      color: var(--primary);
      margin-bottom: 20px;
    }

    /* Sections */
    h2 {
      font-size: 22px;
      font-weight: 700;
      margin: 20px 0 10px;
    }

    p {
      font-size: 15px;
      color: var(--text-gray);
      margin-bottom: 15px;
    }

    ul {
      padding-left: 18px;
      margin-top: 10px;
    }

    li {
      font-size: 15px;
      color: var(--text-gray);
      margin-bottom: 8px;
    }

    a {
      color: #7b2cff;
      text-decoration: none;
      font-weight: 500;
    }

    /* Button */
    .download-btn {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 40px);
      max-width: 420px;
      background: var(--primary);
      color: white;
      border: none;
      padding: 15px;
      border-radius: 30px;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
    }

    .spacer {
      height: 100px;
    }
  </style>
</head>

<body>

  <div class="container">
    <!-- Header -->
    <div class="header">
      <div class="back-btn">←</div>
      <div class="title">Terms and Condition</div>
    </div>

    <div class="updated">Last updated: October 26, 2025</div>

    <!-- Introduction -->
    <h2>Introduction</h2>
    <p>
      Welcome to Yimaru! These terms and conditions outline the rules and
      regulations for the use of our application. By accessing this app,
      we assume you accept these terms and conditions.
    </p>

    <!-- User Accounts -->
    <h2>User Accounts</h2>
    <p>
      When you create an account with us, you must provide us with information
      that is accurate, complete, and current at all times. Failure to do so
      constitutes a breach of the Terms, which may result in immediate
      termination of your account on our Service.
    </p>

    <!-- Content & Services -->
    <h2>Content & Services</h2>
    <p>
      Our Service allows you to access learning materials. You are granted a
      limited license to access and use the app content for personal,
      non-commercial purposes. You agree not to:
    </p>

    <ul>
      <li>Reproduce, duplicate, copy, or sell any material from the app.</li>
      <li>Redistribute content from Yimaru.</li>
      <li>Use the app in any way that is damaging or harmful.</li>
    </ul>

    <!-- Privacy Policy -->
    <h2>Privacy Policy</h2>
    <p>
      Your privacy is important to us. Please read our
      <a href="#">Privacy Policy</a> to understand how we collect, use,
      and share information about you.
    </p>

    <!-- Contact -->
    <h2>Contact Us</h2>
    <p>
      If you have any questions about these Terms, please contact us at
      <strong>support@yimaru.et</strong>.
    </p>

    <div class="spacer"></div>
  </div>

  <!-- Download Button -->
  <button class="download-btn">
    Download as PDF ⬇
  </button>

</body>
</html>
