

<!-- CONFIG DEBUG INFORMATION
========================================
=== CONFIG LOADER DEBUG START ===
Timestamp: 2026-04-14 04:07:29
Connecting to database: u699348899_gameelite_game
✓ Database connected successfully
📊 Found 63 settings in database
  ✗ No mapping found for key: 'site_title'
  ✗ No mapping found for key: 'site_description'
  ✗ No mapping found for key: 'logo_url'
  ✓ Applied: 'hero_heading' → 'hero.title'
    Old: Game Elite
    New: Game Elite 
  ✓ Applied: 'hero_subheading' → 'hero.span_text'
    Old: PLAY. COMPETE. WIN.
    New: PLAY. COMPETE. WIN.
  ✓ Applied: 'hero_description' → 'hero.description'
    Old: Introducing Game Elite, Your Competitive Gaming Destination. Join Daily Free Fire Tournaments, Earn Real Rewards Instantly, And Compete On A Skill-Based Platform.
    New: Introducing Game elite, Your Competitive Gaming Destination. Join Daily Free Fire Tournaments, Earn Real Rewards Instantly, And Compete On A Skill-Based Platform.
  ✓ Applied: 'hero_btn_text' → 'hero.button_text'
    Old: Download App
    New: Download App
  ✓ Applied: 'hero_btn_link' → 'hero.button_link'
    Old: https://gameelite.site/application/views/themes/front/Supremex.apk
    New: /application/views/themes/front/admin/upload/GameElite_v2.0.apk
  ✓ Applied: 'hero_image' → 'hero.mockup_image'
    Old: application/views/themes/front/admin/upload/1757732808008.png
    New: /application/views/themes/front/admin/upload/1773508321_DOC_20260312_WA0106..png
  ✓ Applied: 'hero_bg' → 'hero.background_image'
    Old: admin/upload/675eaea91ff1f6.76025837.file.php
    New: /application/views/themes/front/admin/upload/673ceccf60b305.95950561.png
  ✓ Applied: 'about_title' → 'about.title'
    Old: EXPERIENCE THE THRILL
    New: EXPERIENCE THE THRILL
  ✓ Applied: 'about_subtitle' → 'about.subtitle'
    Old: Trusted By Real Players, Built For Fair Play.
    New: Trusted By Real Players, Built For Fair Play.
  ⚠ Path segment 'icon1' not found for key 'about_icon1'
  ⚠ Path segment 'title1' not found for key 'about_title1'
  ⚠ Path segment 'desc1' not found for key 'about_desc1'
  ⚠ Path segment 'icon2' not found for key 'about_icon2'
  ⚠ Path segment 'title2' not found for key 'about_title2'
  ⚠ Path segment 'desc2' not found for key 'about_desc2'
  ⚠ Path segment 'icon3' not found for key 'about_icon3'
  ⚠ Path segment 'title3' not found for key 'about_title3'
  ⚠ Path segment 'desc3' not found for key 'about_desc3'
  ✗ No mapping found for key: 'feature_left_title1'
  ✗ No mapping found for key: 'feature_left_desc1'
  ✗ No mapping found for key: 'feature_left_icon1'
  ✗ No mapping found for key: 'feature_left_title2'
  ✗ No mapping found for key: 'feature_left_desc2'
  ✗ No mapping found for key: 'feature_left_icon2'
  ✗ No mapping found for key: 'feature_right_title1'
  ✗ No mapping found for key: 'feature_right_desc1'
  ✗ No mapping found for key: 'feature_right_icon1'
  ✗ No mapping found for key: 'feature_right_title2'
  ✗ No mapping found for key: 'feature_right_desc2'
  ✗ No mapping found for key: 'feature_right_icon2'
  ✗ No mapping found for key: 'screenshots_title'
  ✗ No mapping found for key: 'screenshots_subtitle'
  ✗ No mapping found for key: 'screenshot_count'
  ✗ No mapping found for key: 'counter_icon1'
  ✗ No mapping found for key: 'counter_value1'
  ✗ No mapping found for key: 'counter_label1'
  ✗ No mapping found for key: 'counter_icon2'
  ✗ No mapping found for key: 'counter_value2'
  ✗ No mapping found for key: 'counter_label2'
  ✗ No mapping found for key: 'counter_icon3'
  ✗ No mapping found for key: 'counter_value3'
  ✗ No mapping found for key: 'counter_label3'
  ✗ No mapping found for key: 'counter_icon4'
  ✗ No mapping found for key: 'counter_value4'
  ✗ No mapping found for key: 'counter_label4'
  ⚠ Path segment 'heading' not found for key 'download_heading'
  ⚠ Path segment 'desc' not found for key 'download_desc'
  ✓ Applied: 'download_btn_text' → 'download.button_text'
    Old: Download APK (v1.0)
    New: Download APK (v1.0)
  ✓ Applied: 'download_url' → 'download.button_link'
    Old: https://gameelite.site/application/views/themes/front/Supremex.apk
    New: /application/views/themes/front/admin/upload/GameElite_v2.0.apk1773578871_GameElite.apk
  ✗ No mapping found for key: 'copyright_text'
  ✓ Applied: 'social_instagram' → 'footer.social_links.0.url'
    Old: https://whatsapp.com/channel/0029Vb6tqeQ7T8bZSeidXn2t
    New: #
  ✓ Applied: 'social_facebook' → 'footer.social_links.1.url'
    Old: https://whatsapp.com/channel/0029Vb6tqeQ7T8bZSeidXn2t
    New: #
  ✓ Applied: 'social_youtube' → 'footer.social_links.2.url'
    Old: https://youtube.com/@gamevictoryesports
    New: #
  ✓ Applied: 'social_discord' → 'footer.social_links.3.url'
    Old: https://whatsapp.com/channel/0029Vb6tqeQ7T8bZSeidXn2t
    New: #
  ✓ Applied: 'color_primary' → 'colors.primary_blue'
    Old: #2979ff
    New: #ffff00
  ✓ Applied: 'color_accent' → 'colors.accent_cyan'
    Old: #00e5ff
    New: #fff200
  ✓ Applied: 'color_bg_dark' → 'colors.bg_dark'
    Old: #02050b
    New: #000000
  ✓ Applied: 'color_bg_secondary' → 'colors.bg_secondary'
    Old: #0a0f1c
    New: #000000
  ✓ Applied: 'color_text_white' → 'colors.text_white'
    Old: #ffffff
    New: #ffffff
  ✓ Applied: 'color_text_gray' → 'colors.text_gray'
    Old: #b0b8c8
    New: #b0b8c8
📈 Summary: 32 mapped, 21 applied, 31 unmapped
========================================
-->
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Game Elite | The Ultimate Battleground</title>
    
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/slicknav.min.css" />
    <link rel="stylesheet" href="assets/css/icofont.css" />
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Rajdhani:wght@500;600;700;800&display=swap" rel="stylesheet">

    <link rel="icon" type="image/png" href="application/views/themes/front/admin/upload/673cecdae43306.64431167.20241120_012335_0000.png" />

    <style>
        /* --- 1. GLOBAL VARIABLES & THEME CONFIG --- */
        :root {
            --bg-dark: #000000;
            --bg-secondary: #000000;
            --bg-card: rgba(20, 30, 48, 0.6);
            --primary-blue: #ffff00;
            --accent-cyan: #fff200;
            --text-white: #ffffff;
            --text-gray: #b0b8c8;
            --gradient-main: linear-gradient(135deg, #2979ff 0%, #00e5ff 100%);
            --glass-border: 1px solid rgba(255, 255, 255, 0.1);
            --neon-glow: 0 0 15px rgba(0, 229, 255, 0.4);
            --font-main: 'Poppins', sans-serif;
            --font-head: 'Rajdhani', sans-serif;
        }

        body {
            font-family: var(--font-main);
            background-color: var(--bg-dark);
            color: var(--text-gray);
            overflow-x: hidden;
            line-height: 1.7;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-head);
            color: var(--text-white);
            font-weight: 700;
            text-transform: none;
            letter-spacing: 0.5px;
        }

        a { text-decoration: none !important; transition: 0.3s; }
        
        /* --- 2. ADVANCED HEADER --- */
        header.header {
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            padding: 15px 0;
            background: rgba(2, 5, 11, 0.85);
            backdrop-filter: blur(15px); /* Stronger blur for readability */
            border-bottom: var(--glass-border);
            transition: all 0.3s ease;
        }

        .logo img {
            max-width: 120px;
            transition: 0.3s;
        }

        /* Desktop Menu */
        .mainmenu ul {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: right;
        }
        .mainmenu ul li { display: inline-block; margin-left: 25px; }
        .mainmenu ul li a {
            color: var(--text-white);
            font-size: 15px;
            font-weight: 600;
            position: relative;
            padding: 5px 0;
        }
        .mainmenu ul li a::before {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background: var(--accent-cyan);
            transition: 0.3s;
            box-shadow: var(--neon-glow);
        }
        .mainmenu ul li a:hover::before, .mainmenu ul li a.active::before { width: 100%; }
        .mainmenu ul li a:hover { color: var(--accent-cyan); text-shadow: var(--neon-glow); }

        /* Slicknav (Mobile Menu) Styling */
        .slicknav_menu {
            background: transparent;
            padding: 5px 0;
        }
        .slicknav_btn {
            background-color: rgba(255,255,255,0.1);
            border-radius: 4px;
            margin-top: 5px; /* Adjust alignment */
        }
        .slicknav_nav {
            background: var(--bg-secondary);
            border-radius: 0 0 10px 10px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            margin-top: 15px;
            position: absolute;
            width: 100%;
            left: 0;
            border-bottom: 2px solid var(--accent-cyan);
        }
        .slicknav_nav a {
            color: #fff;
            padding: 12px 15px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            font-weight: 600;
        }
        .slicknav_nav a:hover {
            background: rgba(41, 121, 255, 0.1);
            color: var(--accent-cyan);
        }

        /* --- 3. HERO SECTION (Redesigned) --- */
        .hero-area {
            background-color: var(--bg-dark);
            /* Tech Grid Background */
            background-image: 
                linear-gradient(rgba(2, 5, 11, 0.9), rgba(2, 5, 11, 0.95)),
                url('/application/views/themes/front/admin/upload/673ceccf60b305.95950561.png'); /* Fallback image */
            background-size: cover;
            background-position: center;
            position: relative;
            /* PADDING FIX: Adjusted for desktop */
            padding: 160px 0 100px; 
            overflow: hidden;
        }
        
        /* Grid Overlay Effect */
        .hero-area::before {
            content: "";
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: 
                linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
            background-size: 30px 30px;
            z-index: 0;
            pointer-events: none;
        }

        .hero-area-content { position: relative; z-index: 2; }

        .hero-area-content h1 {
            font-size: 65px;
            line-height: 1.1;
            margin-bottom: 20px;
            text-shadow: 0 0 20px rgba(41, 121, 255, 0.3);
        }
        
        .hero-area-content h1 span {
            color: transparent;
            background: var(--gradient-main);
            -webkit-background-clip: text;
            display: block;
            font-size: 0.6em;
            letter-spacing: 3px;
            margin-top: 10px;
        }

        .hero-area-content p {
            font-size: 18px;
            margin-bottom: 40px;
            max-width: 90%;
            color: #d0d8e8;
        }

        /* Pulse Button */
        .app-download-btn {
            display: inline-flex;
            align-items: center;
            background: var(--gradient-main);
            color: #fff;
            padding: 16px 40px;
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 18px;
            letter-spacing: 1px;
            text-transform: uppercase;
            border-radius: 4px;
            box-shadow: 0 0 20px rgba(41, 121, 255, 0.4);
            position: relative;
            z-index: 2;
            overflow: hidden;
            animation: pulse-glow 2s infinite;
        }
        
        @keyframes pulse-glow {
            0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
            70% { box-shadow: 0 0 0 15px rgba(0, 229, 255, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
        }

        .app-download-btn:hover { color: #fff; transform: translateY(-2px); }
        .app-download-btn i { font-size: 24px; margin-right: 12px; }

        .hand-mockup img {
            max-height: 600px;
            filter: drop-shadow(0 0 30px rgba(41, 121, 255, 0.2));
            animation: float 5s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* --- 4. CARDS (Glassmorphism) --- */
        .ptb-90 { padding: 90px 0; }
        
        .single-about-box, .single-feature-box li {
            background: var(--bg-card);
            backdrop-filter: blur(10px);
            border: var(--glass-border);
            padding: 35px;
            border-radius: 12px;
            transition: 0.4s;
            height: 100%;
        }
        .single-about-box:hover {
            border-color: var(--accent-cyan);
            background: rgba(20, 30, 48, 0.9);
            box-shadow: var(--neon-glow);
            transform: translateY(-5px);
        }
        .single-about-box i { font-size: 45px; color: var(--accent-cyan); margin-bottom: 20px; }

        /* --- 5. COUNTERS & SECTIONS --- */
        .sec-title h2 { font-size: 36px; margin-bottom: 10px; }
        .sec-title p { color: var(--accent-cyan); font-weight: 500; }
        .sec-title h2::after {
            content: ''; display: block; width: 80px; height: 3px; 
            background: var(--gradient-main); margin: 15px auto 0;
        }

        .counter-area {
            position: relative;
            background-attachment: fixed;
            background-size: cover;
        }
        .counter-area::before {
            content:''; position: absolute; top:0; left:0; width:100%; height:100%;
            background: rgba(2, 5, 11, 0.9);
        }
        .single-counter-box { position: relative; z-index: 1; }
        .single-counter-box h3 { font-size: 48px; color: var(--text-white); margin: 10px 0; }
        .single-counter-box p { color: var(--accent-cyan); font-weight: 600; text-transform: uppercase; }

        /* --- 6. MOBILE OPTIMIZATION (THE FIX) --- */
        @media only screen and (max-width: 991px) {
            /* Header Fixes */
            header.header { padding: 10px 0; }
            .logo img { max-width: 90px; } /* Smaller Logo */
            
            /* Slicknav Adjustments */
            .slicknav_menu { display: block; background: transparent; }
            .slicknav_btn { margin-top: 2px; }

            /* Hero Fixes */
            .hero-area {
                padding-top: 130px; /* INCREASED PADDING TO CLEAR MENU */
                padding-bottom: 60px;
                text-align: center;
            }
            .hero-area-content h1 {
                font-size: 42px; /* Smaller font so it fits */
                line-height: 1.2;
            }
            .hero-area-content h1 span { font-size: 0.5em; letter-spacing: 2px; }
            .hero-area-content p { margin: 20px auto 30px; font-size: 16px; }
            
            .hand-mockup img { max-height: 400px; margin-top: 40px; }
            
            /* General padding */
            .ptb-90 { padding: 60px 0; }
            
            /* Feature List Fix */
            .single-feature-box li, .single-feature-box.text-lg-right li {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }
            .feature-box-icon { margin: 0 0 20px 0 !important; }
        }
        
        /* Small phones specific */
        @media only screen and (max-width: 480px) {
            .hero-area-content h1 { font-size: 32px; }
            .app-download-btn { padding: 12px 30px; font-size: 16px; width: 100%; text-align: center; justify-content: center; }
        }
        /* ===== 3D SLIDER PHONE MOCKUP (GAMEVICTORY STYLE) ===== */

/* Screenshots Section */
.screenshots-area {
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.screenshots-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: radial-gradient(circle at center, rgba(41, 121, 255, 0.08), transparent 70%);
    pointer-events: none;
}

/* Slider Wrapper with Arrows */
.slider-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 60px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

/* Slider Arrows */
.slider-arrow {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(41, 121, 255, 0.15), rgba(0, 229, 255, 0.15));
    border: 2px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100;
    flex-shrink: 0;
}

.slider-arrow:hover {
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 229, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.slider-arrow:active {
    transform: scale(0.95);
}

.slider-arrow svg {
    width: 24px;
    height: 24px;
}

/* Main Slider Container */
#mockup-slider {
    flex: 1;
    perspective: 1500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 650px;
    overflow: visible;
}

/* Phone Mockup */
.phone-mockup {
    position: absolute;
    width: 280px;
    height: 570px;
    border-radius: 40px;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.6),
        inset 0 0 0 12px #1a2332,
        inset 0 0 40px rgba(0, 0, 0, 0.3);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    left: 50%;
    top: 50%;
    margin-top: -285px;
    cursor: pointer;
}

.phone-mockup:hover {
    box-shadow: 
        0 35px 90px rgba(0, 229, 255, 0.4),
        inset 0 0 0 12px #2a3a4e,
        inset 0 0 40px rgba(0, 229, 255, 0.1);
}

/* Screen */
.phone-mockup .screen {
    position: absolute;
    top: 32px;
    left: 22px;
    right: 22px;
    bottom: 32px;
    border-radius: 28px;
    overflow: hidden;
}

.phone-mockup .screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.phone-mockup:hover .screen img {
    transform: scale(1.05);
}

/* Dots Navigation */
.dots {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 50px;
    flex-wrap: wrap;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.dot:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.2);
}

.dot.active {
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan));
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.5);
    transform: scale(1.3);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .slider-wrapper {
        gap: 20px;
    }
    
    .slider-arrow {
        width: 48px;
        height: 48px;
    }
    
    #mockup-slider {
        min-height: 550px;
    }
    
    .phone-mockup {
        width: 240px;
        height: 490px;
        margin-top: -245px;
    }
}

@media (max-width: 768px) {
    .screenshots-area {
        padding: 60px 0;
    }
    
    .slider-arrow {
        width: 44px;
        height: 44px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .slider-arrow-left {
        left: 10px;
    }
    
    .slider-arrow-right {
        right: 10px;
    }
    
    .slider-wrapper {
        flex-direction: column;
        gap: 0;
    }
    
    #mockup-slider {
        min-height: 480px;
        width: 100%;
    }
    
    .phone-mockup {
        width: 220px;
        height: 450px;
        margin-top: -225px;
    }
}

@media (max-width: 480px) {
    .phone-mockup {
        width: 200px;
        height: 410px;
        margin-top: -205px;
    }
    
    .slider-arrow {
        width: 40px;
        height: 40px;
    }
}

@keyframes phoneFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}


    </style>
</head>

<body>

    <header class="header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-2 col-md-3 col-6">
                    <div class="logo">
                        <a href="https://gameelite.site/">
                            <img src="application/views/themes/front/admin/upload/673ceccf60b305.95950561.png" alt="Game Elite" />
                        </a>
                    </div>
                </div>
                <div class="col-lg-10 col-md-9 col-6">
                    <div class="responsive-menu d-lg-none"></div>
                    <div class="mainmenu d-none d-lg-block">
                        <ul id="primary-menu">
                                                    </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <section class="hero-area" id="home">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <div class="hero-area-content">
                        <h1>Game Elite  <br><span>PLAY. COMPETE. WIN.</span></h1>
                        <p>Introducing Game elite, Your Competitive Gaming Destination. Join Daily Free Fire Tournaments, Earn Real Rewards Instantly, And Compete On A Skill-Based Platform.</p>
                        <a href="/application/views/themes/front/admin/upload/GameElite_v2.0.apk" class="app-download-btn">
                            <i class="fab fa-android"></i> Download App                        </a>
                    </div>
                </div>
                <div class="col-lg-5 text-center">
                    <div class="hand-mockup">
                        <img src="/application/views/themes/front/admin/upload/1773508321_DOC_20260312_WA0106..png" alt="GameVictory App" class="img-fluid" />
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about-area ptb-90">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <div class="sec-title text-center">
                        <h2>EXPERIENCE THE THRILL</h2>
                        <p>Trusted By Real Players, Built For Fair Play.</p>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="single-about-box">
                        <i class="fas fa-gavel"></i>
                        <h4>FAIR PLAY</h4>
                        <p>All Matches Are Conducted Fairly, And Every Player Is Rewarded Based On Their In-Game Performance.</p>
                    </div>
                </div>
                                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="single-about-box">
                        <i class="fas fa-bolt"></i>
                        <h4>FAST PERFORMANCE</h4>
                        <p>Game Elite Is Built With Modern Technology And Optimized Performance, Ensuring A Smooth And Confident Gaming Experience.</p>
                    </div>
                </div>
                                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="single-about-box">
                        <i class="fas fa-trophy"></i>
                        <h4>FREE MATCHES</h4>
                        <p>Join Any Contest Of Your Liking And Of Your Desired Time For Free</p>
                    </div>
                </div>
                            </div>
        </div>
    </section>

    <section class="feature-area ptb-90" id="feature" style="background: var(--bg-secondary);">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-5 mb-lg-0">
                    <div class="single-feature-box text-lg-right text-center">
                        <ul style="list-style:none; padding:0;">
                                                        <li>
                                <div class="feature-box-info">
                                    <h4>SKILL-BASED TOURNAMENT APP</h4>
                                    <p>Join The Action, Dominate The Match, And Earn Big Rewards With Game Elite.</p>
                                </div>
                                <div class="feature-box-icon" style="background:rgba(41,121,255,0.1); border-radius:50%; width:60px; height:60px; display:flex; align-items:center; justify-content:center; margin-left:20px;">
                                    <i class="fas fa-gamepad" style="font-size:24px; margin:0;"></i>
                                </div>
                            </li>
                                                        <li>
                                <div class="feature-box-info">
                                    <h4>CREATE ACCOUNT</h4>
                                    <p>Create Your Account In Less Than 30 Seconds With A Secure, Privacy-First Setup.</p>
                                </div>
                                <div class="feature-box-icon" style="background:rgba(41,121,255,0.1); border-radius:50%; width:60px; height:60px; display:flex; align-items:center; justify-content:center; margin-left:20px;">
                                    <i class="fas fa-users" style="font-size:24px; margin:0;"></i>
                                </div>
                            </li>
                                                    </ul>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="single-feature-box text-lg-left text-center">
                        <ul style="list-style:none; padding:0;">
                                                        <li>
                                <div class="feature-box-icon" style="background:rgba(41,121,255,0.1); border-radius:50%; width:60px; height:60px; display:flex; align-items:center; justify-content:center; margin-right:20px;">
                                    <i class="fas fa-wallet" style="font-size:24px; margin:0;"></i>
                                </div>
                                <div class="feature-box-info">
                                    <h4>Instant Withdrawal</h4>
                                    <p>Transfer winnings to UPI, Paytm, or redeem as Gift Cards instantly 24/7.</p>
                                </div>
                            </li>
                                                        <li>
                                <div class="feature-box-icon" style="background:rgba(41,121,255,0.1); border-radius:50%; width:60px; height:60px; display:flex; align-items:center; justify-content:center; margin-right:20px;">
                                    <i class="fas fa-headset" style="font-size:24px; margin:0;"></i>
                                </div>
                                <div class="feature-box-info">
                                    <h4>24/7 CUSTOMER SUPPORT</h4>
                                    <p>Game Elite Provides Reliable 24x7 Customer Support To Ensure A Smooth Gaming Experience.</p>
                                </div>
                            </li>
                                                    </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="screenshots-area ptb-90" id="screenshot">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="sec-title text-center">
                        <h2>App Interface</h2>
                        <p>Sleek. Modern. Intuitive.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="slider-wrapper">
                        <!-- Left Arrow -->
                        <div class="slider-arrow slider-arrow-left">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                            </svg>
                        </div>

                        <div id="mockup-slider">
                                                        <div class="phone-mockup" data-index="1">
                                <div class="screen">
                                    <img src="application/views/themes/front/admin/upload/Screenshot_2026-02-01-23-21-30-429_com.app_.gamevictory.jpg-1.jpg" alt="Screenshot 1" loading="lazy">
                                </div>
                            </div>
                                                        <div class="phone-mockup" data-index="2">
                                <div class="screen">
                                    <img src="application/views/themes/front/admin/upload/Screenshot_2026-02-01-23-21-59-936_com.app_.gamevictory.jpg.jpg" alt="Screenshot 2" loading="lazy">
                                </div>
                            </div>
                                                        <div class="phone-mockup" data-index="3">
                                <div class="screen">
                                    <img src="application/views/themes/front/admin/upload/Screenshot_2026-02-01-23-22-06-060_com.app_.gamevictory.jpg-1.jpg" alt="Screenshot 3" loading="lazy">
                                </div>
                            </div>
                                                        <div class="phone-mockup" data-index="4">
                                <div class="screen">
                                    <img src="application/views/themes/front/admin/upload/Screenshot_2026-02-01-23-22-10-327_com.app_.gamevictory.jpg-1.jpg" alt="Screenshot 4" loading="lazy">
                                </div>
                            </div>
                                                        <div class="phone-mockup" data-index="5">
                                <div class="screen">
                                    <img src="application/views/themes/front/admin/upload/Screenshot_2026-02-01-23-21-53-626_com.app_.gamevictory.jpg.jpg" alt="Screenshot 5" loading="lazy">
                                </div>
                            </div>
                                                    </div>

                        <!-- Right Arrow -->
                        <div class="slider-arrow slider-arrow-right">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </div>
                    </div>
                    
                    <div id="screens-dots" class="dots"></div>
                </div>
            </div>
        </div>
    </section>

    <section class="counter-area ptb-90" style="background-image: url('admin/upload/618a5e3d80fb19.77116572.jpg');">
        <div class="container">
            <div class="row text-center">
                                <div class="col-md-3 col-6 mb-4">
                    <div class="single-counter-box">
                        <i class="fas fa-gamepad mb-2" style="font-size:30px; color:var(--accent-cyan)"></i>
                        <h3><span class="counter">50000</span></h3>
                        <p>Tournaments</p>
                    </div>
                </div>
                                <div class="col-md-3 col-6 mb-4">
                    <div class="single-counter-box">
                        <i class="fas fa-users mb-2" style="font-size:30px; color:var(--accent-cyan)"></i>
                        <h3><span class="counter">100</span>K+</h3>
                        <p>Gamers</p>
                    </div>
                </div>
                                <div class="col-md-3 col-6 mb-4">
                    <div class="single-counter-box">
                        <i class="fas fa-coins mb-2" style="font-size:30px; color:var(--accent-cyan)"></i>
                        <h3><span class="counter">1.2</span>L+</h3>
                        <p>Winnings Distributed</p>
                    </div>
                </div>
                                <div class="col-md-3 col-6 mb-4">
                    <div class="single-counter-box">
                        <i class="fas fa-gift mb-2" style="font-size:30px; color:var(--accent-cyan)"></i>
                        <h3><span class="counter">60</span>K</h3>
                        <p>Rewards Claimed</p>
                    </div>
                </div>
                            </div>
        </div>
    </section>

    <section class="download-area ptb-90">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="text-center" style="background: var(--bg-secondary); border: 1px solid var(--primary-blue); border-radius: 20px; padding: 50px; box-shadow: 0 0 30px rgba(41,121,255,0.2);">
                        <i class="fab fa-android" style="font-size: 60px; color: #fff; margin-bottom: 20px;"></i>
                        <h2 style="margin-bottom: 10px;">DOWNLOAD GAME ELITE ESPORTS APP</h2>
                        <p style="color: #a0aabf; margin-bottom: 30px;">Trusted By Real Players, Built For Fair Play.</p>
                        <a href="/application/views/themes/front/admin/upload/GameElite_v2.0.apk1773578871_GameElite.apk" class="app-download-btn">
                            Download APK (v1.0)                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer style="background: #000; padding: 40px 0; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 50px;">
    <div class="container text-center">
        <p style="color: #666; font-size: 14px;">&copy; 2026 <b>Game Elite</b>. All Rights Reserved.</p>
        <div style="margin-top: 20px;">
                        <a href="#" target="_blank" style="color: #fff; margin: 0 10px;">
                <i class="fab fa-instagram"></i>
            </a>
                        <a href="#" target="_blank" style="color: #fff; margin: 0 10px;">
                <i class="fab fa-facebook"></i>
            </a>
                        <a href="#" target="_blank" style="color: #fff; margin: 0 10px;">
                <i class="fab fa-youtube"></i>
            </a>
                        <a href="#" target="_blank" style="color: #fff; margin: 0 10px;">
                <i class="fab fa-discord"></i>
            </a>
                    </div>
    </div>
</footer>

    <a href="#" class="scrollToTop" style="background: var(--primary-blue); color: #fff; bottom: 30px; right: 30px; border-radius: 4px; padding: 10px 15px; position: fixed;">
        <i class="fas fa-chevron-up"></i>
    </a>

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.slicknav.min.js"></script>
    <script src="assets/js/slick.min.js"></script>
    <script src="assets/js/owl.carousel.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/waypoints.min.js"></script>
    <script src="assets/js/jquery.mb.YTPlayer.min.js"></script>
    <script src="assets/js/jquery.easing.1.3.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // SlickNav Setup
            $('#primary-menu').slicknav({
                prependTo: '.responsive-menu',
                label: '',
                allowParentLinks: true,
                duplicate: false,
                closedSymbol: '<i class="fas fa-chevron-right"></i>',
                openedSymbol: '<i class="fas fa-chevron-down"></i>'
            });

            // Width Checker for Menu
            function checkWidth() {
                var windowSize = $(window).width();
                if (windowSize >= 992) {
                    $('.mainmenu').show();
                    $('.slicknav_menu').hide();
                } else {
                    $('.mainmenu').hide();
                    $('.slicknav_menu').show();
                }
            }
            // Execute on load and resize
            checkWidth();
            $(window).resize(checkWidth);
        });
    </script>
    <script>
// 3D Mockup Slider
(function(){
    const slider = document.getElementById('mockup-slider');
    if (!slider) return;
    
    const dotsWrap = document.getElementById('screens-dots');
    const mockups = Array.from(slider.querySelectorAll('.phone-mockup'));
    const leftArrow = document.querySelector('.slider-arrow-left');
    const rightArrow = document.querySelector('.slider-arrow-right');
    
    let currentIdx = 0;
    const totalMockups = mockups.length;
    let sliderInterval;
    let isAnimating = false;

    // Build navigation dots
    function buildDots() {
        dotsWrap.innerHTML = '';
        for (let i = 0; i < totalMockups; i++) {
            const dot = document.createElement('div');
            dot.className = 'dot' + (i === 0 ? ' active' : '');
            dot.dataset.i = i;
            dot.addEventListener('click', e => {
                if (isAnimating) return;
                currentIdx = parseInt(e.target.dataset.i);
                updateSlider();
            });
            dotsWrap.appendChild(dot);
        }
    }

    // Update slider positions
    function updateSlider() {
        isAnimating = true;
        
        mockups.forEach((mockup, i) => {
            const relativePos = i - currentIdx;
            
            // Reset styles
            mockup.style.opacity = '0';
            mockup.style.zIndex = '1';
            mockup.style.pointerEvents = 'none';
            
            if (relativePos === 0) {
                // Center mockup
                mockup.style.transform = 'translateX(-50%) rotateY(0deg) scale(1)';
                mockup.style.opacity = '1';
                mockup.style.zIndex = '10';
                mockup.style.pointerEvents = 'auto';
            } else if (relativePos === -1) {
                // Left mockup
                mockup.style.transform = 'translateX(calc(-50% - 270px)) rotateY(-20deg) scale(0.85)';
                mockup.style.opacity = '0.6';
                mockup.style.zIndex = '5';
            } else if (relativePos === 1) {
                // Right mockup
                mockup.style.transform = 'translateX(calc(-50% + 270px)) rotateY(20deg) scale(0.85)';
                mockup.style.opacity = '0.6';
                mockup.style.zIndex = '5';
            } else if (relativePos === -2) {
                // Far left
                mockup.style.transform = 'translateX(calc(-50% - 470px)) rotateY(-30deg) scale(0.65)';
                mockup.style.opacity = '0.25';
                mockup.style.zIndex = '1';
            } else if (relativePos === 2) {
                // Far right
                mockup.style.transform = 'translateX(calc(-50% + 470px)) rotateY(30deg) scale(0.65)';
                mockup.style.opacity = '0.25';
                mockup.style.zIndex = '1';
            } else {
                // Hidden mockups
                mockup.style.transform = 'translateX(-50%) scale(0.5)';
                mockup.style.opacity = '0';
                mockup.style.zIndex = '0';
            }
        });
        
        // Update dots
        Array.from(dotsWrap.children).forEach((d, i) =>
            d.classList.toggle('active', i === currentIdx)
        );
        
        setTimeout(() => { isAnimating = false; }, 800);
    }

    // Navigation functions
    function nextSlide() {
        if (isAnimating) return;
        currentIdx = (currentIdx + 1) % totalMockups;
        updateSlider();
    }

    function prevSlide() {
        if (isAnimating) return;
        currentIdx = (currentIdx - 1 + totalMockups) % totalMockups;
        updateSlider();
    }

    // Arrow click events
    if (rightArrow) {
        rightArrow.addEventListener('click', nextSlide);
    }
    
    if (leftArrow) {
        leftArrow.addEventListener('click', prevSlide);
    }

    // Keyboard navigation
    document.addEventListener('keydown', e => {
        if (e.key === 'ArrowRight') nextSlide();
        if (e.key === 'ArrowLeft') prevSlide();
    });

    // Mouse wheel navigation
    slider.addEventListener('wheel', e => {
        e.preventDefault();
        if (isAnimating) return;
        
        if (e.deltaY > 0) {
            nextSlide();
        } else {
            prevSlide();
        }
    }, { passive: false });

    // Mouse Drag & Touch/Swipe Support
    let startX = 0;
    let endX = 0;
    let isDragging = false;
    let hasMoved = false;

    // Mouse Drag Events
    slider.addEventListener('mousedown', e => {
        isDragging = true;
        hasMoved = false;
        startX = e.pageX;
        slider.style.cursor = 'grabbing';
        e.preventDefault();
    });

    slider.addEventListener('mousemove', e => {
        if (!isDragging) return;
        hasMoved = true;
        const currentX = e.pageX;
        const diff = currentX - startX;
        
        // Visual feedback during drag
        slider.style.transform = `translateX(${diff * 0.3}px)`;
    });

    slider.addEventListener('mouseup', e => {
        if (!isDragging) return;
        isDragging = false;
        slider.style.cursor = 'grab';
        slider.style.transform = '';
        
        if (hasMoved) {
            endX = e.pageX;
            handleDragSwipe();
        }
    });

    slider.addEventListener('mouseleave', () => {
        if (isDragging) {
            isDragging = false;
            slider.style.cursor = 'grab';
            slider.style.transform = '';
        }
    });

    // Touch Swipe Events
    slider.addEventListener('touchstart', e => {
        startX = e.changedTouches[0].screenX;
        hasMoved = false;
    }, { passive: true });

    slider.addEventListener('touchmove', e => {
        hasMoved = true;
    }, { passive: true });

    slider.addEventListener('touchend', e => {
        if (hasMoved) {
            endX = e.changedTouches[0].screenX;
            handleDragSwipe();
        }
    }, { passive: true });

    // Handle Drag/Swipe
    function handleDragSwipe() {
        const swipeThreshold = 50;
        const diff = endX - startX;
        
        if (diff < -swipeThreshold) {
            // Dragged/Swiped Left -> Next Slide
            nextSlide();
        } else if (diff > swipeThreshold) {
            // Dragged/Swiped Right -> Previous Slide
            prevSlide();
        }
    }

    // Set initial cursor
    slider.style.cursor = 'grab';

    // Auto-play functionality
    function startAutoPlay() {
        sliderInterval = setInterval(nextSlide, 5000);
    }

    function stopAutoPlay() {
        clearInterval(sliderInterval);
    }

    // Pause on hover
    slider.addEventListener('mouseenter', stopAutoPlay);
    slider.addEventListener('mouseleave', startAutoPlay);

    // Initialize
    buildDots();
    updateSlider();
    startAutoPlay();

    // Click on mockup to navigate
    mockups.forEach((mockup, index) => {
        mockup.addEventListener('click', () => {
            if (index !== currentIdx && !isAnimating) {
                currentIdx = index;
                updateSlider();
            }
        });
    });
})();
</script>

</body>
</html>