<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DailyNews</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-white">

<!-- ================= HEADER ================= -->
<header class="bg-black text-white border-b border-gray-800 sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">

    <!-- Left: Logo + Desktop Menu -->
    <div class="flex items-center space-x-6">

      <!-- Logo -->
      <a href="index.html" class="bg-white px-2 py-1">
        <img src="images/fav-icon.svg" alt="Logo" class="h-8">
      </a>

      <!-- Desktop Navigation -->
      <nav class="hidden md:flex space-x-6 text-sm font-semibold">
        <a href="#" class="hover:text-red-500">WORLD</a>
        <a href="#" class="hover:text-red-500">U.S.</a>
        <a href="#" class="hover:text-red-500">POLITICS</a>
        <a href="#" class="hover:text-red-500">SPORTS</a>
        <a href="#" class="hover:text-red-500">ENTERTAINMENT</a>
        <a href="#" class="hover:text-red-500">BUSINESS</a>
        <a href="#" class="hover:text-red-500">SCIENCE</a>
        <a href="#" class="hover:text-red-500">TECH</a>
        <a href="#" class="hover:text-red-500">PRESS RELEASES</a>
      </nav>

    </div>

    <!-- Right Section -->
    <div class="flex items-center space-x-5">

      <!-- Sign in (desktop only) -->
      <a href="#" class="hidden md:block text-sm hover:text-gray-300">
        Sign in
      </a>

      <!-- Search Icon (desktop only) -->
      <svg xmlns="http://www.w3.org/2000/svg"
        class="hidden md:block h-5 w-5 cursor-pointer hover:text-gray-300"
        fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round"
          stroke-width="2"
          d="M21 21l-4.35-4.35M10 18a8 8 0 100-16 8 8 0 000 16z" />
      </svg>

      <!-- Donate Button (desktop only) -->
      <button class="hidden md:block bg-red-600 hover:bg-red-700 text-white text-sm font-semibold px-4 py-1 rounded">
        DONATE
      </button>

      <!-- Hamburger Button (Mobile only - Right side) -->
      <button id="menuBtn" class="md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7"
          fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>

    </div>

  </div>
</header>

<!-- ================= MOBILE MENU ================= -->
<div id="mobileMenu" class="hidden md:hidden bg-black text-white border-b border-gray-800">
  <nav class="flex flex-col space-y-4 px-4 py-4 text-sm font-semibold">
    <a href="#" class="hover:text-red-500">WORLD</a>
    <a href="#" class="hover:text-red-500">U.S.</a>
    <a href="#" class="hover:text-red-500">POLITICS</a>
    <a href="#" class="hover:text-red-500">SPORTS</a>
    <a href="#" class="hover:text-red-500">ENTERTAINMENT</a>
    <a href="#" class="hover:text-red-500">BUSINESS</a>
    <a href="#" class="hover:text-red-500">SCIENCE</a>
    <a href="#" class="hover:text-red-500">TECH</a>
    <a href="#" class="hover:text-red-500">PRESS RELEASES</a>
    <hr class="border-gray-700">
    <a href="#" class="hover:text-red-500">Sign in</a>
  </nav>
</div>


<main>



    <section class="bg-gradient-to-b from-black to-gray-900 text-white py-6">
  <div class="max-w-7xl mx-auto px-4">

    <!-- Top Red Line -->
    <div class="relative border-t border-gray-700">
      <span class="absolute -top-[2px] left-0 w-16 h-1 bg-red-600"></span>
    </div>

    <!-- Title -->
    <h1 class="text-5xl md:text-6xl font-extrabold mt-6 tracking-tight">
      THE ASSOCIATED PRESS
    </h1>

  </div>
   </section>



<!-- ================= PRIVACY POLICY ================= -->
<section class="max-w-4xl ml-6 lg:ml-12 mr-6 lg:mr-48 px-4 py-12 text-gray-800">

  <!-- Page Title -->
  <h1 class="text-4xl font-extrabold mb-3">
    Privacy Policy
  </h1>

  <p class="text-gray-500 mb-10">
    Last updated: January 2026
  </p>

  <!-- Intro -->
  <p class="mb-6 leading-relaxed">
    This Privacy Policy describes how we collect, use, and disclose your
    information when you use our website. We respect your privacy and are
    committed to protecting the personal information you share with us.
  </p>

  <!-- Section -->
  <h2 class="text-2xl font-bold mt-10 mb-3">
    Information We Collect
  </h2>

  <p class="mb-4 leading-relaxed">
    We may collect personal information that you voluntarily provide when you
    use our services. This may include your name, email address, and other
    details submitted through forms or account registrations.
  </p>

  <p class="mb-6 leading-relaxed">
    We also collect certain information automatically when you visit our
    website such as your IP address, browser type, pages visited, and time
    spent on the site.
  </p>

  <!-- Section -->
  <h2 class="text-2xl font-bold mt-10 mb-3">
    How We Use Your Information
  </h2>

  <ul class="list-disc pl-6 space-y-2 mb-6">
    <li>To provide and maintain our website</li>
    <li>To improve our services and user experience</li>
    <li>To communicate with you regarding updates or inquiries</li>
    <li>To monitor usage and detect technical issues</li>
  </ul>

  <!-- Section -->
  <h2 class="text-2xl font-bold mt-10 mb-3">
    Cookies
  </h2>

  <p class="mb-6 leading-relaxed">
    We use cookies and similar tracking technologies to track activity on our
    website and store certain information. Cookies help us improve functionality
    and analyze site traffic.
  </p>

  <!-- Section -->
  <h2 class="text-2xl font-bold mt-10 mb-3">
    Third-Party Services
  </h2>

  <p class="mb-6 leading-relaxed">
    We may employ third-party companies and services to facilitate our website,
    provide services on our behalf, or assist us in analyzing how our site is
    used. These third parties have access to your information only to perform
    tasks on our behalf.
  </p>

  <!-- Section -->
  <h2 class="text-2xl font-bold mt-10 mb-3">
    Data Security
  </h2>

  <p class="mb-6 leading-relaxed">
    We take reasonable steps to protect your information. However, no method of
    transmission over the internet or electronic storage is completely secure.
  </p>

  <!-- Section -->
  <h2 class="text-2xl font-bold mt-10 mb-3">
    Changes to This Policy
  </h2>

  <p class="mb-6 leading-relaxed">
    We may update our Privacy Policy from time to time. Changes will be posted
    on this page with an updated revision date.
  </p>

  <!-- Section -->
  <h2 class="text-2xl font-bold mt-10 mb-3">
    Contact Us
  </h2>

  <p class="leading-relaxed">
    If you have any questions about this Privacy Policy, you can contact us at:
  </p>

  <p class="mt-2 font-semibold">
    email@example.com
  </p>

</section>



</main>



<!-- ================= FOOTER ================= -->
<footer class="bg-black text-white mt-12">

  <!-- Top Section -->
  <div class="max-w-7xl mx-auto px-4 md:px-6 lg:pl-0 lg:pr-56 py-10
              grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.5fr_0.8fr_0.8fr]
              gap-x-6 gap-y-10">

    <!-- Column 1 -->
    <div>
      <div class="bg-white inline-block px-3 py-2 mb-4">
        <img src="images/fav-icon.svg" alt="Logo" class="h-10">
      </div>

      <h2 class="text-xl font-bold">The Associated Press</h2>
      <p class="text-gray-400 mb-4">Advancing the Power of Facts</p>

      <p class="text-sm font-semibold leading-relaxed max-w-md">
        The Associated Press is an independent global news organization dedicated
        to factual reporting. Founded in 1846, AP remains the most trusted source
        of fast, accurate, unbiased news in all formats.
      </p>
    </div>

    <!-- Column 2 -->
    <div>
      <h3 class="font-semibold mb-4">FROM AP NEWS</h3>
      <ul class="space-y-3 text-sm font-semibold">
        <li><a href="#" class="hover:text-white">About</a></li>
        <li><a href="#" class="hover:text-white">Contact Us</a></li>
        <li><a href="#" class="hover:text-white">Accessibility Statement</a></li>
        <li><a href="#" class="hover:text-white">Terms of Use</a></li>
        <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
        <li><a href="#" class="hover:text-white">Your Privacy Choices</a></li>
        <li><a href="#" class="hover:text-white">Do Not Sell My Info</a></li>
        <li><a href="#" class="hover:text-white">CA Notice of Collection</a></li>
      </ul>
    </div>

    <!-- Column 3 -->
    <div>
      <h3 class="font-semibold mb-4">THE ASSOCIATED PRESS</h3>
      <ul class="space-y-3 text-sm font-semibold">
        <li><a href="#" class="hover:text-white">AP.org</a></li>
        <li><a href="#" class="hover:text-white">Careers</a></li>
        <li><a href="#" class="hover:text-white">Advertise With Us</a></li>
        <li><a href="#" class="hover:text-white">AP News Values</a></li>
        <li><a href="#" class="hover:text-white">AP’s Role in Elections</a></li>
        <li><a href="#" class="hover:text-white">AP Leads</a></li>
        <li><a href="#" class="hover:text-white">AP Stylebook</a></li>
        <li><a href="#" class="hover:text-white">Code of Conduct</a></li>
      </ul>
    </div>

  </div>


  <!-- Bottom Bar -->
  <div class="border-t border-gray-800">
    <div class="max-w-7xl mx-auto px-4 md:px-6 lg:pl-4 lg:pr-12 py-4
                flex flex-col sm:flex-row justify-between items-center
                text-sm text-gray-400">

      <p class="text-center sm:text-left">
        Copyright © 2026 The Associated Press. All Rights Reserved.
      </p>

      <!-- Social Icons -->
      <div class="flex space-x-5 mt-3 sm:mt-0">
        <a href="#" class="hover:opacity-80">
          <img src="images/footer-instagram.webp" class="h-5 w-5">
        </a>
        <a href="#" class="hover:opacity-80">
          <img src="images/footer-instagram.webp" class="h-5 w-5">
        </a>
        <a href="#" class="hover:opacity-80">
          <img src="images/footer-instagram.webp" class="h-5 w-5">
        </a>
      </div>

    </div>
  </div>

</footer>


<script src="./script.js"></script>
</body>
</html>