<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Privacy Policy</title>
    <link rel="icon" type="image/svg+xml" href="favicon.png" />

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap" rel="stylesheet" />

    <style>
        /* RESET & GLOBAL */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Roboto Mono", monospace;
            background: #f5f5f5;
            color: #333;
            line-height: 1.6;
            overflow-x: hidden;
            /* Prevent horizontal scroll on small screens */
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem;
        }

        /* NAVBAR (same style as your site) */
        .navbar {
            position: sticky;
            top: 0;
            width: 100%;
            background: linear-gradient(45deg,
                    rgba(200, 200, 200, 0.3),
                    rgba(133, 132, 132, 0.3));
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.8rem 1.5rem;
            z-index: 1000;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #333;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 1rem;
            transition: all 0.3s ease-in-out;
        }

        .nav-links li {
            position: relative;
        }

        .nav-links a {
            font-size: 1rem;
            padding: 0.5rem 0.8rem;
            transition: color 0.3s ease-in-out;
            color: #333;
        }

        .nav-links a:hover {
            color: #000;
        }

        /* Hover underline effect */
        .nav-links a::after {
            content: "";
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: rgba(0, 0, 0, 0.7);
            transition: width 0.3s ease-in-out;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* Hamburger (mobile) */
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 0.3rem;
            cursor: pointer;
        }

        .hamburger span {
            display: block;
            width: 25px;
            height: 3px;
            background-color: #333;
            border-radius: 3px;
            transition: all 0.3s ease-in-out;
        }

        /* For smaller screens, show the hamburger and collapse nav links */
        @media screen and (max-width: 768px) {
            .hamburger {
                display: flex;
            }

            .nav-links {
                display: none;
                flex-direction: column;
                gap: 0.5rem;
                position: absolute;
                top: 100%;
                right: 0;
                background: rgba(255, 255, 255, 0.95);
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                padding: 1rem;
                border-radius: 0.5rem;
            }

            .nav-links.show {
                display: flex;
            }

            .nav-links li {
                text-align: right;
            }
        }

        /* FOOTER */
        .footer {
            position: relative;
            z-index: 20;
            background: linear-gradient(45deg,
                    rgba(200, 200, 200, 0.3),
                    rgba(133, 132, 132, 0.3));
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            /* Safari support */
            padding: 1rem;
            text-align: center;
            margin-top: 3rem;
            box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .footer p {
            font-size: 1rem;
            color: #555;
            margin: 0;
        }

        /* MAIN POLICY CONTENT */
        .privacy-container {
            margin-top: 3rem;
            padding: 2rem;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        .privacy-container h1 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            font-weight: 700;
            color: #333;
        }

        .privacy-container p {
            font-size: 1rem;
            margin-bottom: 1.5rem;
            line-height: 1.7;
            color: #444;
        }
    </style>
</head>

<body>

    <!-- NAVBAR -->
    <nav class="navbar">
        <div class="container">
            <a href="/" class="logo">Outlook.me.uk</a>
            <div class="hamburger" id="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <ul class="nav-links" id="nav-links">
                <li><a href="/">Home</a></li>
                <li><a href="/blogs">Blogs</a></li>
                <li><a href="/contact-me">Contact Me</a></li>
            </ul>
        </div>
    </nav>

    <!-- MAIN PRIVACY POLICY CONTENT -->
    <div class="container">
        <div class="privacy-container">
            <h1>Privacy Policy</h1>
            <p>
                This Privacy Policy applies to the website <strong>Outlook.me.uk</strong>.
                By using this website, you agree to the terms outlined here.
            </p>
            <p>
                <strong>No Data Collection:</strong>
                We do not collect or store any personal information about our visitors.
            </p>
            <p>
                <strong>No Cookies Used:</strong>
                We do not use cookies or any similar tracking technologies.
            </p>
            <p>
                <strong>No Data Sharing or Selling:</strong>
                Since we do not collect any user data, there is no data to share or sell
                to third parties.
            </p>
            <p>
                <strong>Third-Party Links:</strong>
                Any links on this site that direct you to external services (e.g., Microsoft)
                are not governed by this policy. Please review their respective privacy policies
                for details on how they handle user information.
            </p>
            <p>
                <strong>Changes to this Policy:</strong>
                We may update or modify this policy at any time without prior notice. Any
                changes will be posted on this page with an updated effective date.
            </p>
            <p>
                <strong>Contact Us:</strong>
                If you have any questions or concerns about this Privacy Policy, you can
                reach out at <a href="mailto:siddhartha@outlook.me.uk">siddhartha@outlook.me.uk</a>.
            </p>
            <p>
                Effective Date: <em>January 2025</em>
            </p>
        </div>
    </div>

    <!-- FOOTER -->
    <footer class="footer">
        <p>&copy; 2025 Outlook.me.uk. All rights reserved.</p>
    </footer>

    <script>
        // NAVBAR TOGGLE FOR MOBILE
        const hamburger = document.getElementById("hamburger");
        const navLinks = document.getElementById("nav-links");

        hamburger.addEventListener("click", () => {
            navLinks.classList.toggle("show");
        });
    </script>
</body>

</html>