<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keeler Family - About Us</title>
    <link rel="icon" type="image/png" href="files/logo.png">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-red: #c50d25;
            --primary-gray: #0d1112;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Cairo', sans-serif;
            cursor: url('files/cursor.png'), auto;
        }

        body {
            background-color: var(--primary-gray);
            color: white;
            background-image: linear-gradient(to bottom, rgba(13, 17, 18, 0.95), rgba(13, 17, 18, 0.8)),
                            url('files/bg-pattern.png');
            background-attachment: fixed;
            min-height: 100vh;
        }

        header {
            background-color: var(--primary-red);
            padding: 1rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(197, 13, 37, 0.3);
            position: relative;
        }

        .mobile-menu-btn {
            display: none;
            width: 40px;
            height: 40px;
            border: none;
            background: transparent;
            cursor: pointer;
            padding: 5px;
            margin-right: 1rem;
        }

        .mobile-menu-btn img {
            width: 100%;
            height: 100%;
            transition: transform 0.3s ease;
        }

        .mobile-menu-btn.active img {
            transform: rotate(90deg);
        }

        .settings-btn, .discord-btn {
            position: absolute;
            width: 40px;
            height: 40px;
            border: none;
            background: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 50%;
        }

        .settings-btn {
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
        }

        .discord-btn {
            --icon-size: 30px;
            width: var(--icon-size);
            height: var(--icon-size);
            right: 80px;
            top: 50%;
            transform: translateY(-50%);
        }

        .settings-btn img, .discord-btn img {
            width: 100%;
            height: 100%;
            transition: all 0.3s ease;
        }

        .settings-btn:hover, .discord-btn:hover {
            filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
            transform: translateY(-50%) scale(1.1);
        }

        .discord-btn.active img {
            filter: hue-rotate(210deg) brightness(150%);
        }

        .settings-menu {
            display: none;
            position: absolute;
            right: 20px;
            top: 100%;
            background: var(--primary-gray);
            border: 1px solid var(--primary-red);
            border-radius: 15px;
            padding: 1rem;
            z-index: 1000;
        }

        .settings-menu.active {
            display: block;
        }

        .logo {
            width: 60px;
            height: 60px;
            left: 30%;
            margin-right: 1rem;
            border-radius: 50%;
            transition: transform 0.3s ease;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
        }

        .logo:hover {
            transform: scale(1.2) rotate(10deg);
        }

        nav {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        nav h2 {
            font-family: 'Cairo', sans-serif;
            margin-right: 2rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

        .nav-links a {
            font-family: 'Cairo', sans-serif;
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            padding: 0.8rem 1.5rem;
            border-radius: 25px;
            background: linear-gradient(145deg, var(--primary-gray), #2a2021);
            box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
        }

        .nav-links a:hover {
            background: linear-gradient(145deg, #2a2021, var(--primary-gray));
            transform: scale(1.2);
            font-size: 1.2rem;
            box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
        }

        .about-section {
            padding: 3rem;
            margin: 2rem auto;
            max-width: 1200px;
            text-align: right;
            direction: rtl;
        }

        .about-section h2 {
            color: var(--primary-red);
            font-size: 3rem;
            margin-bottom: 2rem;
            text-align: center;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            letter-spacing: 2px;
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from {
                text-shadow: 0 0 5px hsl(0, 87%, 45%), 0 0 10px hsl(0, 87%, 45%), 0 0 15px hsl(0, 87%, 45%);
            }
            to {
                text-shadow: 0 0 10px hsl(0, 87%, 45%), 0 0 20px hsl(0, 87%, 45%), 0 0 30px hsl(0, 87%, 45%);
            }
        }

        .story-section {
            background: rgba(25, 19, 20, 0.95);
            padding: 4rem;
            border-radius: 30px;
            margin: 2rem auto;
            box-shadow: 0 0 40px rgba(197, 13, 37, 0.4);
            position: relative;
            overflow: hidden;
            border: 3px solid var(--primary-red);
            backdrop-filter: blur(10px);
        }

        .story-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(197, 13, 37, 0.15), transparent);
            z-index: 0;
        }

        .story-content {
            position: relative;
            z-index: 1;
            line-height: 2;
            font-size: 1.2rem;
        }

        .story-chapter {
            margin-bottom: 3rem;
            padding: 2rem;
            background: rgba(0,0,0,0.4);
            border-radius: 20px;
            border-right: 6px solid var(--primary-red);
            transition: all 0.3s ease;
        }

        .story-chapter:hover {
            transform: translateX(-10px);
            box-shadow: 10px 0 20px rgba(197, 13, 37, 0.3);
            background: rgba(0,0,0,0.5);
        }

        .story-chapter h3 {
            color: var(--primary-red);
            font-size: 2rem;
            margin-bottom: 1.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            position: relative;
            padding-right: 20px;
        }

        .story-chapter h3::before {
            content: '◆';
            position: absolute;
            right: -10px;
            color: var(--primary-red);
            opacity: 0.8;
        }

        .story-chapter p {
            margin-bottom: 1.5rem;
            text-align: justify;
            padding-right: 1.5rem;
            color: #f5f5f5;
            line-height: 1.8;
            font-size: 1.1rem;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }

            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                right: 0;
                left: 0;
                background: var(--primary-red);
                flex-direction: column;
                padding: 1rem;
                gap: 1rem;
                z-index: 1000;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            }

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

            .nav-links a {
                width: 100%;
                text-align: center;
                padding: 1rem;
                background: rgba(0, 0, 0, 0.2);
            }

            .nav-links a:hover {
                transform: scale(1.05);
                font-size: 1.1rem;
            }

            header {
                padding: 0.8rem;
            }

            .logo {
                width: 50px;
                height: 50px;
            }

            nav h2 {
                font-size: 1.2rem;
                margin-right: 1rem;
            }

            .about-section {
                padding: 1.5rem;
            }

            .story-section {
                padding: 2rem 1rem;
            }

            .story-chapter {
                padding: 1.5rem 1rem;
            }

            .story-chapter h3 {
                font-size: 1.5rem;
            }

            .story-chapter p {
                font-size: 1rem;
                padding-right: 1rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <button class="mobile-menu-btn" onclick="toggleMenu()">
                <img src="files/more1.png" alt="Menu" id="menuIcon">
            </button>
            <img src="files/logo.png" alt="Keeler Family Logo" class="logo" onclick="window.location.href='index.html'">
            <h2>Keeler Family</h2>
            <ul class="nav-links" id="navLinks">
                <li><a href="apps.html">التقديمات</a></li>
                <li><a href="store.html">المتجر</a></li>
                <li><a href="tune.html">التعديلات</a></li>
                <li><a href="subs.html">المشتركين</a></li>
                <li><a href="gallery.html">المعرض</a></li>
                <li><a href="index.html">الرئيسية</a></li>
            </ul>
        </nav>
        <button class="discord-btn" onclick="window.location.href='https://discord.gg/FN6TpbHrYT'">
            <img src="files/dis.png" alt="Discord">
        </button>
        <button class="settings-btn" onclick="window.location.href='https://discord.gg/wnashtime'">
            <img src="files/wnash.png" alt="WnashTime">
        </button>
        <div class="settings-menu" id="settingsMenu">
            <h3>Settings</h3>
        </div>
    </header>

    <div class="about-section">
        <h2>قصة عائلة كيلر</h2>
        
        <div class="story-section">
            <div class="story-content">
                <div class="story-chapter">
                    <h3>الفصل الأول: البدايات المتواضعة</h3>
                    <p>في قلب الريف الروسي القاسي، حيث تتراقص ندف الثلج في سماء شتوية قاتمة، بدأت قصة عائلة كيلر. في قرية صغيرة محاطة بغابات الصنوبر الكثيفة، اجتمع ثلاثة رجال استثنائيين: ثيو، ايرش، وستيف كيلر. كانوا يحملون في قلوبهم حلماً كبيراً، وفي عقولهم رؤية تتجاوز حدود قريتهم المتواضعة.</p>
                    <p>رغم قسوة الظروف وشح الموارد، كان إيمانهم بمستقبل أفضل يتغلب على كل التحديات. عملوا بجد في ورشة صغيرة، يصلحون السيارات ويطورون مهاراتهم، محولين كل عقبة إلى فرصة للتعلم والنمو.</p>
                </div>

                <div class="story-chapter">
                    <h3>الفصل الثاني: الانطلاق نحو العالمية</h3>
                    <p>مع مرور السنوات، تحولت الورشة الصغيرة إلى مصنع، ثم إلى سلسلة مصانع في روسيا. انضم إلى العائلة رجال أعمال موهوبون: كولونيل، المفاوض البارع، وبايلي، العقل المالي الحاد، ومارك، عبقري الابتكار.</p>
                    <p>وفي لحظة حاسمة، قررت العائلة خوض مغامرة جديدة. حزموا أمتعتهم وعبروا المحيط إلى لوس سانتوس، حاملين معهم خبرات السنين وطموحات المستقبل. في هذه المدينة الساحرة، بدأوا فصلاً جديداً من قصتهم.</p>
                </div>

                <div class="story-chapter">
                    <h3>الفصل الثالث: إمبراطورية كيلر</h3>
                    <p>اليوم، تقف عائلة كيلر شامخة في عالم صناعة السيارات. يقود ثيو العائلة برؤية ثاقبة، بينما يشرف ايرش على أحدث خطوط الإنتاج. يبني ستيف فرقاً استثنائية، ويعقد كولونيل صفقات تاريخية.</p>
                    <p>يدير بايلي الإمبراطورية المالية بحكمة، في حين يدفع مارك حدود الابتكار إلى آفاق جديدة. معاً، يواصلون كتابة فصول جديدة في قصة عائلة بدأت في قرية روسية صغيرة، لتصبح اسماً يتردد صداه في أرجاء العالم.</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        function toggleMenu() {
            const navLinks = document.getElementById('navLinks');
            const menuIcon = document.getElementById('menuIcon');
            navLinks.classList.toggle('active');
            
            if (navLinks.classList.contains('active')) {
                menuIcon.src = 'files/more2.png';
            } else {
                menuIcon.src = 'files/more1.png';
            }
        }
    </script>
