<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Privacy Policy - PlayHub</title>
    <style>
        :root {
            --primary: #6c5ce7;
            --primary-light: #a29bfe;
            --secondary: #fd79a8;
            --dark: #1f222d;
            --light: #f5f6fa;
            --gray: #636e72;
            --success: #00b894;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
        }
        
        html {
            scroll-behavior: smooth;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        header {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 10px;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            position: relative;
        }
        
        .logo {
            font-size: 28px;
            font-weight: 700;
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 10px;
            font-size: 32px;
        }
        
        /* Navigation Styles */
        .nav-container {
            display: flex;
            align-items: center;
        }
        
        .nav-links {
            display: flex;
            gap: 25px;
            transform: translateX(-50%);
        }
        
        .nav-links a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            font-weight: 500;
            font-size: 16px;
            transition: all 0.3s;
            position: relative;
        }
        
        .nav-links a:hover, .nav-links a.active {
            color: white;
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: white;
            transition: width 0.3s;
        }
        
        .nav-links a:hover::after, .nav-links a.active::after {
            width: 100%;
        }
        
        .user-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .search-bar {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            padding: 8px 15px;
            border-radius: 30px;
            color: white;
            display: flex;
            align-items: center;
            transition: all 0.3s;
            width: 200px;
        }
        
        .search-bar input {
            background: transparent;
            border: none;
            color: white;
            outline: none;
            width: 100%;
            font-size: 14px;
        }
        
        .search-bar input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        
        .search-bar i {
            margin-right: 8px;
            opacity: 0.7;
        }
        
        .search-bar:focus-within {
            background: rgba(255, 255, 255, 0.3);
        }
        
        /* Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 10px;
            z-index: 1001;
        }
        
        /* Mobile Menu Styles */
        @media (max-width: 992px) {
            .mobile-menu-toggle {
                display: block;
            }
            
            .nav-container {
                position: fixed;
                top: 0;
                right: -100%;
                width: 80%;
                max-width: 350px;
                height: 100vh;
                background: linear-gradient(135deg, var(--primary), var(--primary-light));
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                padding: 80px 30px 30px;
                transition: right 0.3s ease-in-out;
                z-index: 1000;
                box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            }
            
            .nav-container.active {
                right: 0;
            }
            
            .nav-links {
                flex-direction: column;
                width: 100%;
                gap: 15px;
                margin-bottom: 30px;
                transform: none;
            }
            
            .nav-links a {
                font-size: 18px;
                padding: 10px 0;
            }
            
            .user-actions {
                flex-direction: column;
                width: 100%;
                gap: 20px;
            }
            
            .search-bar {
                width: 100%;
            }
            
            .mobile-menu-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 999;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s, visibility 0.3s;
            }
            
            .mobile-menu-overlay.active {
                opacity: 1;
                visibility: visible;
            }
        }
        
        .hero {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            padding: 80px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
        }
        
        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .hero p {
            font-size: 18px;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: white;
            color: var(--primary);
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
            font-size: 16px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }
        
        .btn-primary {
            background-color: var(--secondary);
            color: white;
        }
        
        .main-content {
            padding: 60px 0;
        }
        
        .section {
            margin-bottom: 60px;
            animation: fadeIn 0.6s ease-out;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 28px;
            font-weight: 700;
            position: relative;
            display: inline-block;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 50px;
            height: 4px;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            border-radius: 2px;
        }
        
        .privacy-content {
            background-color: white;
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .privacy-content h2 {
            color: var(--primary);
            margin: 30px 0 15px;
            font-size: 22px;
        }
        
        .privacy-content h3 {
            color: var(--dark);
            margin: 25px 0 10px;
            font-size: 18px;
        }
        
        .privacy-content p {
            margin-bottom: 15px;
            color: var(--gray);
        }
        
        .privacy-content ul {
            margin-bottom: 20px;
            padding-left: 20px;
        }
        
        .privacy-content li {
            margin-bottom: 8px;
            color: var(--gray);
        }
        
        footer {
            background-color: var(--dark);
            color: white;
            padding: 60px 0 0;
        }
        
        .footer-content {
            display: grid;
            justify-items: center;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-column h3 {
            font-size: 18px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            border-radius: 3px;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: #b2bec3;
            text-decoration: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .footer-links a:hover {
            color: white;
            transform: translateX(5px);
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-link {
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            text-decoration: none;
            justify-content: center;
            align-items: center;
            color: white;
            transition: all 0.3s;
        }
        
        .social-link:hover {
            background-color: var(--primary);
            transform: translateY(-3px);
        }
        
        .copyright {
            text-align: center;
            padding: 20px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #b2bec3;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 32px;
            }
            
            .privacy-content {
                padding: 25px;
            }
        }
        
        @media (max-width: 576px) {
            .section-title {
                font-size: 24px;
            }
            
            .privacy-content h2 {
                font-size: 20px;
            }
            
            .privacy-content h3 {
                font-size: 17px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <a href="/" class="logo">
                    <i class="fas fa-gamepad"></i>
                    PlayHub
                </a>
                
                <!-- Mobile Menu Toggle Button -->
                <button class="mobile-menu-toggle" id="mobile-menu-toggle">
                    <i class="fas fa-bars"></i>
                </button>
                
                <!-- Mobile Menu Overlay -->
                <div class="mobile-menu-overlay" id="mobile-menu-overlay"></div>
                
                <!-- Navigation Container -->
                <div class="nav-container" id="nav-container">
                    <nav class="nav-links">
                        <a href="/">Home</a>
                        <a href="index.html#popular-games">Popular</a>
                        <a href="index.html#categories">Categories</a>
                        <a href="index.html#new-releases">New Releases</a>
                        <a href="#">Favorites</a>
                    </nav>
                    
                    <div class="user-actions">
                        <div class="search-bar">
                            <i class="fas fa-search"></i>
                            <input type="text" placeholder="Search games..." id="search-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Privacy Policy</h1>
                <p>Your privacy is important to us. Learn how we collect, use, and protect your personal information.</p>
            </div>
        </div>
    </section>
    
    <main class="main-content">
        <div class="container">
            <section class="section">
                <div class="privacy-content">
                    <h2>1. Introduction</h2>
                    <p>Welcome to GameVerse. We are committed to protecting your privacy and ensuring the security of your personal information. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website.</p>
                    
                    <h2>2. Information We Collect</h2>
                    <p>We may collect personal information that you voluntarily provide to us when you register on the site, subscribe to our newsletter, or participate in other activities on our website. The types of information we may collect include:</p>
                    <ul>
                        <li>Contact information (email address)</li>
                        <li>Demographic information</li>
                        <li>Game preferences and play history</li>
                        <li>Device and browser information</li>
                        <li>Cookies and usage data</li>
                    </ul>
                    
                    <h2>3. How We Use Your Information</h2>
                    <p>We use the information we collect for various purposes, including:</p>
                    <ul>
                        <li>To provide and maintain our service</li>
                        <li>To notify you about changes to our service</li>
                        <li>To allow you to participate in interactive features of our service</li>
                        <li>To provide customer support</li>
                        <li>To gather analysis or valuable information so that we can improve our service</li>
                        <li>To monitor the usage of our service</li>
                        <li>To detect, prevent and address technical issues</li>
                    </ul>
                    
                    <h2>4. Cookies and Tracking Technologies</h2>
                    <p>We use cookies and similar tracking technologies to track activity on our website and hold certain information. Cookies are files with small amounts of data which may include an anonymous unique identifier. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.</p>
                    
                    <h2>5. Data Security</h2>
                    <p>We implement appropriate technical and organizational measures to maintain the safety of your personal information. However, no method of transmission over the Internet or method of electronic storage is 100% secure, and we cannot guarantee absolute security.</p>
                    
                    <h2>6. Third-Party Services</h2>
                    <p>We may employ third-party companies and individuals to facilitate our service, provide the service on our behalf, perform service-related services, or assist us in analyzing how our service is used. These third parties have access to your personal information only to perform these tasks on our behalf and are obligated not to disclose or use it for any other purpose.</p>
                    
                    <h2>7. Children's Privacy</h2>
                    <p>Our service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal data, please contact us.</p>
                    
                    <h2>8. Changes to This Privacy Policy</h2>
                    <p>We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the "effective date" at the top of this Privacy Policy.</p>
                    
                    <h2>9. Contact Us</h2>
                    <p>If you have any questions about this Privacy Policy, please contact us at <a href="mailto:privacy@gameverse.com">privacy@gameverse.com</a>.</p>
                </div>
            </section>
        </div>
    </main>
    
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>PlayHub</h3>
                    <p>Your ultimate destination for free HTML5 games. Play instantly without downloads.</p>
                    <div class="social-links">
                        <a href="https://www.facebook.com" class="social-link" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>
                        <a href="https://www.twitter.com" class="social-link" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
                        <a href="https://www.instagram.com/" class="social-link" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
                        <a href="https://www.youtube.com/" class="social-link" target="_blank" rel="noopener noreferrer"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
               
                <div class="footer-column">
                    <h3>Important Links</h3>
                    <ul class="footer-links">
                        <li><a href="/"><i class="fas fa-chevron-right"></i> Home</a></li>
                        <li><a href="/privacy"><i class="fas fa-chevron-right"></i> Privacy Policy</a></li>
                        <li><a href="/terms" class="active"><i class="fas fa-chevron-right"></i> Terms of Service</a></li>
                        <li><a href="/about"><i class="fas fa-chevron-right"></i> About Us</a></li>
                        <li><a href="/contact"><i class="fas fa-chevron-right"></i> Contact Us</a></li>
                    </ul>
                </div>
               
                <div class="footer-column">
                    <h3>Categories</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Action</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Adventure</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Puzzle</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Racing</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Sports</a></li>
                    </ul>
                </div>
            </div>
           
            <div class="copyright">
                &copy; 2025 PlayHub. All rights reserved.
            </div>
        </div>
    </footer>
    
    <script>
        // Mobile Menu Toggle Functionality
        const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
        const navContainer = document.getElementById('nav-container');
        const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
        
        mobileMenuToggle.addEventListener('click', function() {
            navContainer.classList.toggle('active');
            mobileMenuOverlay.classList.toggle('active');
            
            // Change icon based on menu state
            if (navContainer.classList.contains('active')) {
                this.innerHTML = '<i class="fas fa-times"></i>';
            } else {
                this.innerHTML = '<i class="fas fa-bars"></i>';
            }
        });
        
        // Close menu when clicking overlay
        mobileMenuOverlay.addEventListener('click', function() {
            navContainer.classList.remove('active');
            this.classList.remove('active');
            mobileMenuToggle.innerHTML = '<i class="fas fa-bars"></i>';
        });
    </script>
</body>
</html>