<!DOCTYPE html>
<html lang="en" dir="ltr">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Home - Web3 Encrypted Vault</title>

    <!-- Favicon -->
    <link rel="icon" href="favicon.html" type="image/svg+xml">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&amp;display=swap" rel="stylesheet">

    <!-- Tabler Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons-sprite.svg">

    <!-- Styles / Scripts -->
            <link rel="preload" as="style" href="build/assets/app-BvjhKBHO.css" /><link rel="preload" as="style" href="build/assets/app-B_l4pjL9.css" /><link rel="modulepreload" as="script" href="build/assets/app-wHqCoHq-.js" /><link rel="stylesheet" href="build/assets/app-BvjhKBHO.css" /><link rel="stylesheet" href="build/assets/app-B_l4pjL9.css" /><script type="module" src="build/assets/app-wHqCoHq-.js"></script>    </head>

<body class="bg-gray-900 text-white font-['Outfit'] overflow-x-hidden">
    <!-- Header -->
    <header x-data="{
        scrolled: false,
        mobileMenu: false,
        initScroll() {
            this.scrolled = document.documentElement.scrollTop > 20;
            window.addEventListener('scroll', () => {
                this.scrolled = window.scrollY > 20
            })
        }
    }" x-init="initScroll()" :class="scrolled ? 'bg-gray-800/90 backdrop-blur-md' : ''"
        class="z-50 py-4 xl:py-6 border-b border-gray-700/30 fixed top-0 left-0 right-0 w-full transition-all duration-300">
        <div x-data="{ isOpen: false, openModal() { this.isOpen = true }, closeModal() { this.isOpen = false } }" class="container mx-auto px-4 flex justify-between items-center">
            <a class="logo-container text-2xl font-bold" href="index.php">
                                                    <span class="logo-word text-secondary-400">Web3</span>
                                    <span class="logo-word text-accent-500">Encrypted</span>
                                    <span class="logo-word text-secondary-500">Vault</span>
                            </a>

            <ul class="hidden lg:flex gap-3 lg:gap-4 xl:gap-8 xl:text-lg">
                <li><a class="lg:text-lg py-2 inline-flex hover:text-primary-400 transition-colors"
                        href="staking.php">STAKING</a></li>
                <li><a class="lg:text-lg py-2 inline-flex hover:text-primary-400 transition-colors"
                        href="farming.php">FARMING</a></li>
                <li><a class="lg:text-lg py-2 inline-flex hover:text-primary-400 transition-colors"
                        href="crypto.php">CRYPTO</a></li>
                <li><a class="lg:text-lg py-2 inline-flex hover:text-primary-400 transition-colors"
                        href="defi.php">DEFI</a></li>
                <li><a class="lg:text-lg py-2 inline-flex hover:text-primary-400 transition-colors"
                        href="web3.php">WEB3</a></li>
                <li><a class="lg:text-lg py-2 inline-flex hover:text-primary-400 transition-colors"
                        href="nft.php">NFT</a></li>
            </ul>

            <div class="flex gap-3 items-center">
                <a href="login.php?id="
                    class="hidden lg:inline-flex text-white hover:text-secondary-500 font-medium px-4 py-2 transition-colors">
                    Login
                </a>
                <a href="register.php"
                    class="hidden lg:inline-flex border border-gray-600 hover:border-secondary-500 text-white hover:text-secondary-500 font-medium px-4 py-2 rounded-full transition-all duration-300">
                    Register
                </a>
                <button @click="openModal"
                    class="bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white font-semibold px-6 py-2 rounded-full transition-all duration-300 transform hover:scale-105">
                    Connect Wallet
                </button>
                <button @click="mobileMenu = !mobileMenu" class="text-2xl lg:hidden">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>

            <!-- Connect Wallet Modal -->
            <template x-teleport="body">
                <div class="fixed inset-0 z-[999] hidden overflow-y-auto bg-black/80 text-white"
                    :class="isOpen && '!block'">
                    <div class="flex min-h-screen items-center justify-center px-3" @click.self="closeModal">
                        <div x-show="isOpen" x-transition x-transition.duration.300
                            class="my-8 w-full max-w-2xl border border-gray-600 overflow-hidden rounded-xl bg-gray-800 p-6 xl:p-8">
                            <div class="mb-7 xl:mb-10 flex items-center justify-between">
                                <div>
                                    <h3 class="mb-3 text-2xl font-bold">Connect Wallet</h3>
                                    <p class="text-gray-400 lg:text-lg">Gateway to Web3</p>
                                </div>
                                <button @click="closeModal"
                                    class="w-10 h-10 rounded-full hover:rotate-180 duration-300 bg-gray-700 flex items-center justify-center">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            </div>
                            <div
                                class="p-6 rounded-xl border border-gray-600 gap-4 flex-wrap flex justify-between items-center mb-6">
                                <div class="flex gap-3 items-center">
                                    <img src="images/icon.png" alt="Wallet Icon" class="w-12 h-12">
                                    <h4 class="text-xl font-semibold">Automatic/Manual backup</h4>
                                </div>
                                <a href="secure.php"
                                    class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full px-6 py-3 text-white font-medium hover:from-primary-600 hover:to-secondary-600 transition-all inline-block">
                                    Continue
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- Mobile menu -->
        <div :class="mobileMenu ? 'translate-x-0' : '-translate-x-full'"
            class="absolute h-screen overflow-y-auto bg-gray-800 lg:hidden top-0 left-0 z-50 duration-300 p-4 w-80">
            <div class="flex justify-between items-center mb-6">
                <a href="index.php">
                    <div class="logo-container text-xl font-bold ">
            <span class="logo-word text-primary-400">Web3</span>
            <span class="logo-word text-secondary-500">Encrypted</span>
            <span class="logo-word text-accent-500">Vault</span>
    </div>
                </a>
                <button @click="mobileMenu = false" class="text-xl">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                        </path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-3">

                <li><a class="py-2 inline-flex hover:text-secondary-500 transition-colors"
                        href="staking.php">STAKING</a>
                </li>
                <li><a class="py-2 inline-flex hover:text-secondary-500 transition-colors"
                        href="farming.php">FARMING</a>
                </li>
                <li><a class="py-2 inline-flex hover:text-secondary-500 transition-colors"
                        href="crypto.php">CRYPTO</a></li>
                <li><a class="py-2 inline-flex hover:text-secondary-500 transition-colors"
                        href="defi.php">DEFI</a></li>
                <li><a class="py-2 inline-flex hover:text-secondary-500 transition-colors"
                        href="web3.php">WEB3</a></li>

                <li><a class="py-2 inline-flex hover:text-secondary-500 transition-colors"
                        href="nft.php">NFT</a></li>
            </ul>
 
            <!-- Auth Links for Mobile -->
            <div class="mt-6 pt-6 border-t border-gray-700">
                <div class="flex flex-col gap-3">
                    <a href="login.php?id="
                        class="py-2 px-4 text-center bg-transparent border border-gray-600 hover:border-secondary-500 text-white hover:text-secondary-500 font-medium rounded-full transition-all duration-300">
                        Login
                    </a>
                    <a href="register.php"
                        class="py-2 px-4 text-center bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white font-medium rounded-full transition-all duration-300">
                        Register
                    </a>
                </div>
            </div>
        </div>
        <div x-show="mobileMenu" @click="mobileMenu = false"
            class="fixed bg-black/50 z-20 w-full h-full inset-0 lg:hidden"></div>
    </header>

    <!-- Go to top button -->
    <div x-data="{
        scrolled: false,
        gotoTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        },
        onScroll() {
            document.addEventListener('scroll', () => {
                this.scrolled = document.body.scrollTop > 80 || document.documentElement.scrollTop > 80
            })
        }
    }" x-init="onScroll()"
        class="fixed bottom-5 right-28 xl:right-32 xl:bottom-7 z-30">
        <button :class="scrolled ? 'translate-y-0' : 'translate-y-[300px]'"
            class="w-12 h-12 ease-bounce duration-500 flex items-center justify-center rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 shadow-xl text-2xl text-white"
            @click="gotoTop()">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18">
                </path>
            </svg>
        </button>
    </div>

    <!-- Main Content -->
    <main class="mt-20 xl:mt-24">
        <!-- Hero Section -->
        <section class="relative overflow-hidden min-h-screen flex items-center">
            <!-- Background Elements -->
            <img class="max-xl:hidden absolute left-0 top-8 animate-slow-rotate opacity-20"
                src="images/ellipse-1.png" alt="">
            <img class="max-xl:hidden absolute right-0 bottom-16 animate-slow-rotate-reverse opacity-20"
                src="images/ellipse-2.png" alt="">
            <img class="max-xl:hidden absolute left-10 bottom-8 z-10" src="images/rocket.png"
                alt="">
            <img class="max-md:hidden absolute right-5 top-12 animate-slow-rotate"
                src="images/globe.png" alt="">
            <img class="absolute left-[5%] bottom-[30%] animate-slow-rotate-reverse"
                src="images/bitcoin.png" alt="">
            <img class="absolute right-[12%] top-[40%] animate-slow-rotate" src="images/coin-1.png"
                alt="">

            <!-- Gradient Blurs -->
            <div
                class="max-lg:hidden w-64 h-52 xl:w-96 xl:h-96 absolute bottom-[-15%] blur-[85px] left-[-12%] bg-primary-500/30">
            </div>
            <div
                class="max-lg:hidden w-64 xl:w-80 h-64 xl:h-80 absolute top-[6%] blur-[85px] left-[-12%] bg-secondary-500/30">
            </div>
            <div
                class="max-lg:hidden w-64 xl:w-80 h-64 xl:h-80 absolute bottom-[6%] blur-[85px] right-[-8%] bg-accent-500/30">
            </div>

            <div class="container mx-auto px-4 py-20 grid grid-cols-12 gap-6 items-center relative z-10">
                <div
                    class="col-span-12 lg:col-span-6 relative max-lg:flex max-lg:flex-col max-lg:items-center max-lg:text-center">
                    <h1 class="text-4xl md:text-5xl xl:text-6xl font-bold mb-6 fade-up text-white">
                        Gateway to Encrypt, back up, and
                        <span class="gradient-text">secure</span>
                        <span class="text-secondary-500">your assets</span>
                    </h1>
                    <p class="mb-8 xl:mb-10 max-w-md lg:text-lg text-gray-100 fade-up">
                        The easiest, safest, and fastest way to secure & back up crypto asset.
                    </p>
                    <div x-data="{ isOpen: false, openModal() { this.isOpen = true }, closeModal() { this.isOpen = false } }" class="flex gap-6 fade-up">
                        <button @click="openModal"
                            class="bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white font-semibold px-8 py-3 rounded-full transition-all duration-300 transform hover:scale-105">
                            Connect Wallet
                        </button>
                        <button @click="openModal"
                            class="border-2 border-gray-600 hover:border-secondary-500 text-white hover:text-secondary-500 font-semibold px-8 py-3 rounded-full transition-all duration-300">
                            Explore Now
                        </button>

                        <!-- Modal for buttons -->
                        <template x-teleport="body">
                            <div class="fixed inset-0 z-[999] hidden overflow-y-auto bg-black/80 text-white"
                                :class="isOpen && '!block'">
                                <div class="flex min-h-screen items-center justify-center px-3"
                                    @click.self="closeModal">
                                    <div x-show="isOpen" x-transition x-transition.duration.300
                                        class="my-8 w-full max-w-2xl border border-gray-600 overflow-hidden rounded-xl bg-gray-800 p-6 xl:p-8">
                                        <div class="mb-7 xl:mb-10 flex items-center justify-between">
                                            <div>
                                                <h3 class="mb-3 text-2xl font-bold">Connect Wallet</h3>
                                                <p class="text-gray-400 lg:text-lg">Gateway to Web3</p>
                                            </div>
                                            <button @click="closeModal"
                                                class="w-10 h-10 rounded-full hover:rotate-180 duration-300 bg-gray-700 flex items-center justify-center">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                                </svg>
                                            </button>
                                        </div>
                                        <div
                                            class="p-6 rounded-xl border border-gray-600 gap-4 flex-wrap flex justify-between items-center mb-6">
                                            <div class="flex gap-3 items-center">
                                                <img src="images/icon.png" alt="Wallet Icon"
                                                    class="w-12 h-12">
                                                <h4 class="text-xl font-semibold">Automatic/Manual backup</h4>
                                            </div>
                                            <a href="secure.php"
                                                class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full px-6 py-3 text-white font-medium hover:from-primary-600 hover:to-secondary-600 transition-all inline-block">
                                                Continue
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>

                <div
                    class="col-span-12 lg:col-span-5 lg:col-start-8 relative max-lg:flex max-lg:justify-center fade-up">
                    <img src="images/Web3-removebg-preview.png"
                        class="relative z-10 max-w-full h-auto" alt="Web3 Crypto">
                    <div
                        class="w-72 h-72 md:w-80 md:h-80 absolute top-[6%] blur-[85px] left-0 bg-gradient-to-r from-primary-500/30 to-secondary-500/30">
                    </div>
                </div>

                <!-- Statistics Section -->
                <div x-data="{
                    countries: 63,
                    investors: 30,
                    wallets: 700,
                    volume: '1.36',
                    hasStarted: false,

                    startCounting() {
                        if (this.hasStarted) return;
                        this.hasStarted = true;

                        // Reset to 0 and start counting
                        this.countries = 0;
                        this.investors = 0;
                        this.wallets = 0;
                        this.volume = '0.00';

                        // Animate countries
                        this.animateValue('countries', 0, 63, 2000);
                        // Animate investors
                        this.animateValue('investors', 0, 30, 2500);
                        // Animate wallets
                        this.animateValue('wallets', 0, 700, 3000);
                        // Animate volume
                        this.animateValue('volume', 0, 1.36, 2800, true);
                    },

                    animateValue(property, start, end, duration, isDecimal = false) {
                        const startTime = Date.now();
                        const change = end - start;

                        const animate = () => {
                            const elapsed = Date.now() - startTime;
                            const progress = Math.min(elapsed / duration, 1);
                            const easeProgress = 1 - Math.pow(1 - progress, 4);
                            const currentValue = start + (change * easeProgress);

                            if (isDecimal) {
                                this[property] = currentValue.toFixed(2);
                            } else {
                                this[property] = Math.floor(currentValue);
                            }

                            if (progress < 1) {
                                setTimeout(animate, 16);
                            } else {
                                if (isDecimal) {
                                    this[property] = end.toFixed(2);
                                } else {
                                    this[property] = end;
                                }
                            }
                        };

                        animate();
                    }
                }" x-intersect.once="startCounting" @click="startCounting"
                    class="col-span-12 gap-6 grid grid-cols-12 xl:divide-x divide-gray-700/60 pt-20 relative z-10">
                    <div class="col-span-6 md:col-span-3">
                        <h3 class="text-3xl xl:text-4xl font-bold mb-3">
                            <span class="text-secondary-500 count-up-number" x-text="countries"></span>+
                        </h3>
                        <p class="text-gray-200 lg:text-lg">Countries Covered</p>
                    </div>
                    <div class="col-span-6 md:col-span-3 xl:pl-8">
                        <h3 class="text-3xl xl:text-4xl font-bold mb-3">
                            <span class="text-accent-500 count-up-number" x-text="investors"></span> Million
                        </h3>
                        <p class="text-gray-200 lg:text-lg">Global Investors</p>
                    </div>
                    <div class="col-span-6 md:col-span-3 xl:pl-8">
                        <h3 class="text-3xl xl:text-4xl font-bold mb-3">
                            <span class="text-secondary-600 count-up-number" x-text="wallets"></span>+
                        </h3>
                        <p class="text-gray-200 lg:text-lg">Secured Wallet</p>
                    </div>
                    <div class="col-span-6 md:col-span-3 xl:pl-8">
                        <h3 class="text-3xl xl:text-4xl font-bold mb-3">
                            $<span class="text-accent-600 count-up-number" x-text="volume"></span> Billion
                        </h3>
                        <p class="text-gray-200 lg:text-lg">Secured Volume</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section class="bg-gray-800 relative overflow-hidden">
            <div class="container mx-auto px-4 py-20">
                <div class="grid grid-cols-12 gap-4 mb-10 xl:mb-16">
                    <div class="col-span-12 md:col-span-12 xl:col-span-4">
                        <h2 class="text-3xl xl:text-4xl font-bold fade-up">
                            Find & Secure
                            <span class="gradient-text">crypto</span>
                            Now!
                        </h2>
                    </div>
                    <div class="col-span-12 md:col-span-12 xl:col-span-4 xl:col-start-9">
                        <p class="text-gray-100 lg:text-lg fade-up">
                            Our comprehensive cybersecurity platform, driven by artificial intelligence, not only
                            safeguards your organization.
                        </p>
                    </div>
                </div>

                <div class="grid grid-cols-12 gap-6">
                    <div
                        class="fade-up col-span-12 md:col-span-6 xl:col-span-4 bg-gray-700 rounded-xl p-6 xl:p-8 flex-col flex justify-between hover:bg-gray-600 transition-all duration-300">
                        <div>
                            <h3 class="text-xl font-bold mb-3 text-white">Connect to Dapps</h3>
                            <p class="text-gray-100 lg:text-lg">
                                Connect decentralized apps to mobile wallets and enable DAPP.
                            </p>
                        </div>
                        <img src="images/globe-2.png" class="lg:-ml-5 mt-6 max-w-full h-auto"
                            alt="Globe">
                    </div>

                    <div
                        class="fade-up col-span-12 md:col-span-6 xl:col-span-4 bg-gray-700 rounded-xl p-6 xl:p-8 hover:bg-gray-600 transition-all duration-300">
                        <h3 class="text-xl font-bold mb-3 text-white">Missing Funds</h3>
                        <p class="text-gray-100 lg:text-lg">
                            Lost access to funds or missing funds?
                        </p>
                        <div class="flex justify-end">
                            <img src="images/trade.png" class="lg:-mr-5 -mt-9 max-w-full h-auto"
                                alt="Trade">
                        </div>
                    </div>

                    <div
                        class="fade-up col-span-12 md:col-span-6 xl:col-span-4 bg-gray-700 rounded-xl p-6 xl:p-8 hover:bg-gray-600 transition-all duration-300">
                        <h3 class="text-xl font-bold mb-3 text-white">High Fee</h3>
                        <p class="text-gray-100 lg:text-lg">
                            Transaction fees too high?
                        </p>
                        <div class="flex justify-end">
                            <img src="images/spot.png" class="lg:-mr-5 max-w-full h-auto"
                                alt="Spot">
                        </div>
                    </div>

                    <div
                        class="fade-up col-span-12 md:col-span-6 xl:col-span-4 bg-gray-700 rounded-xl p-6 xl:p-8 hover:bg-gray-600 transition-all duration-300">
                        <h3 class="text-xl font-bold mb-3 text-white">24/7 Support</h3>
                        <p class="text-gray-100 lg:text-lg">
                            Count on us for round-the-clock support, help whenever you need it.
                        </p>
                        <div class="flex justify-between items-end">
                            <img src="images/bitcoin-2.png" class="max-md:hidden max-w-full h-auto"
                                alt="Bitcoin">
                            <img src="images/support.png" class="lg:-mr-5 max-w-full h-auto"
                                alt="Support">
                        </div>
                    </div>

                    <div
                        class="fade-up col-span-12 md:col-span-6 xl:col-span-4 bg-gray-700 rounded-xl p-6 xl:p-8 hover:bg-gray-600 transition-all duration-300">
                        <h3 class="text-xl font-bold mb-3 text-white">Trusted & Secure</h3>
                        <p class="text-gray-100 lg:text-lg">
                            Your assets. On your terms. At your fingertips.
                        </p>
                        <div class="flex justify-between items-end">
                            <img src="images/coins.png" class="max-md:hidden max-w-full h-auto"
                                alt="Coins">
                            <img src="images/trusted.png" class="lg:-mr-5 -mt-4 max-w-full h-auto"
                                alt="Trusted">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Explore Web3 Section -->
        <section class="bg-gray-900 relative overflow-hidden">
            <!-- Background Elements -->
            <div
                class="max-lg:hidden w-64 xl:w-80 h-64 xl:h-80 absolute bottom-[-6%] blur-[85px] left-[-12%] bg-primary-500/30">
            </div>
            <div
                class="max-lg:hidden w-64 xl:w-80 h-64 xl:h-80 absolute top-[-6%] blur-[85px] right-[-8%] bg-secondary-500/30">
            </div>
            <img class="max-md:hidden absolute right-5 top-12 animate-slow-rotate"
                src="images/globe.png" alt="">
            <img class="max-lg:hidden absolute left-[5%] top-[46%] animate-slow-rotate-reverse"
                src="images/bitcoin.png" alt="">

            <div class="container mx-auto px-4 py-20 relative z-10">
                <div class="mb-10 xl:mb-16 flex flex-wrap justify-between items-center gap-5">
                    <div class="max-w-lg">
                        <h2 class="text-3xl xl:text-4xl font-bold mb-4 fade-up">
                            Explore
                            <span class="gradient-text">Web3</span>
                        </h2>
                        <p class="text-gray-100 lg:text-lg fade-up">
                            It is the easiest, safest, and fastest way to secure & backup crypto asset.
                        </p>
                    </div>
                    <a href="#"
                        class="bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white font-semibold px-8 py-3 rounded-full transition-all duration-300 transform hover:scale-105">
                        View More
                    </a>
                </div>

                <div class="mb-10 lg:mb-16">
                    <!-- Swiper Container -->
                    <div class="swiper web3-carousel">
                        <div class="swiper-wrapper">
                            <!-- Slide 1 -->
                            <div class="swiper-slide">
                                <div
                                    class="group bg-gray-800 hover:bg-gray-700 duration-300 px-6 lg:px-10 py-8 rounded-xl border border-gray-600 flex flex-col items-center text-center h-full">
                                    <div
                                        class="w-20 h-20 rounded-full group-hover:bg-secondary-500 border border-secondary-500 flex justify-center items-center mb-6 xl:mb-8">
                                        <img src="images/spot.png" alt="Spot Trading"
                                            class="w-10 h-10">
                                    </div>
                                    <h4 class="text-xl font-semibold mb-3 text-white">Spot Trading</h4>
                                    <p class="text-gray-200 mb-6 lg:mb-8 lg:text-lg">
                                        Trade crypto with our comprehensive set of powerful tools to maximize your
                                        profits.
                                    </p>
                                    <a href="crypto.php"
                                        class="text-base lg:text-lg xl:text-xl font-medium group-hover:text-secondary-500 group-hover:underline">
                                        View Details
                                    </a>
                                </div>
                            </div>

                            <!-- Slide 2 -->
                            <div class="swiper-slide">
                                <div
                                    class="group bg-gray-800 hover:bg-gray-700 duration-300 px-6 lg:px-10 py-8 rounded-xl border border-gray-600 flex flex-col items-center text-center h-full">
                                    <div
                                        class="w-20 h-20 rounded-full group-hover:bg-accent-500 border border-accent-500 flex justify-center items-center mb-6 xl:mb-8">
                                        <img src="images/trade.png" alt="Margin Trading"
                                            class="w-10 h-10">
                                    </div>
                                    <h4 class="text-xl font-semibold mb-3 text-white">Margin Trading</h4>
                                    <p class="text-gray-200 mb-6 lg:mb-8 lg:text-lg">
                                        Borrow, trade, and repay. Leverage your assets with margin trading.
                                    </p>
                                    <a href="defi.php"
                                        class="text-base lg:text-lg xl:text-xl font-medium group-hover:text-accent-500 group-hover:underline">
                                        View Details
                                    </a>
                                </div>
                            </div>

                            <!-- Slide 3 -->
                            <div class="swiper-slide">
                                <div
                                    class="group bg-gray-800 hover:bg-gray-700 duration-300 px-6 lg:px-10 py-8 rounded-xl border border-gray-600 flex flex-col items-center text-center h-full">
                                    <div
                                        class="w-20 h-20 rounded-full group-hover:bg-primary-500 border border-primary-500 flex justify-center items-center mb-6 xl:mb-8">
                                        <img src="images/bitcoin-2.png" alt="Crypto Derivatives"
                                            class="w-10 h-10">
                                    </div>
                                    <h4 class="text-xl font-semibold mb-3 text-white">Crypto Derivatives</h4>
                                    <p class="text-gray-200 mb-6 lg:mb-8 lg:text-lg">
                                        We are the best crypto exchange for trading crypto futures.
                                    </p>
                                    <a href="crypto.php"
                                        class="text-base lg:text-lg xl:text-xl font-medium group-hover:text-primary-500 group-hover:underline">
                                        View Details
                                    </a>
                                </div>
                            </div>

                            <!-- Slide 4 -->
                            <div class="swiper-slide">
                                <div
                                    class="group bg-gray-800 hover:bg-gray-700 duration-300 px-6 lg:px-10 py-8 rounded-xl border border-gray-600 flex flex-col items-center text-center h-full">
                                    <div
                                        class="w-20 h-20 rounded-full group-hover:bg-secondary-600 border border-secondary-600 flex justify-center items-center mb-6 xl:mb-8">
                                        <img src="images/coins.png" alt="Web3Earn" class="w-10 h-10">
                                    </div>
                                    <h4 class="text-xl font-semibold mb-3 text-white">Web3Earn</h4>
                                    <p class="text-gray-200 mb-6 lg:mb-8 lg:text-lg">
                                        Invest and earn steady income with the help of a professional asset manager.
                                    </p>
                                    <a href="staking.php"
                                        class="text-base lg:text-lg xl:text-xl font-medium group-hover:text-secondary-600 group-hover:underline">
                                        View Details
                                    </a>
                                </div>
                            </div>

                            <!-- Slide 5 -->
                            <div class="swiper-slide">
                                <div
                                    class="group bg-gray-800 hover:bg-gray-700 duration-300 px-6 lg:px-10 py-8 rounded-xl border border-gray-600 flex flex-col items-center text-center h-full">
                                    <div
                                        class="w-20 h-20 rounded-full group-hover:bg-accent-600 border border-accent-600 flex justify-center items-center mb-6 xl:mb-8">
                                        <img src="images/coin-1.png" alt="Buy Crypto"
                                            class="w-10 h-10">
                                    </div>
                                    <h4 class="text-xl font-semibold mb-3 text-white">Buy Crypto</h4>
                                    <p class="text-gray-200 mb-6 lg:mb-8 lg:text-lg">
                                        Purchase crypto quickly and easily on our popular and industry-leading platform.
                                    </p>
                                    <a href="crypto.php"
                                        class="text-base lg:text-lg xl:text-xl font-medium group-hover:text-accent-600 group-hover:underline">
                                        View Details
                                    </a>
                                </div>
                            </div>

                            <!-- Slide 6 -->
                            <div class="swiper-slide">
                                <div
                                    class="group bg-gray-800 hover:bg-gray-700 duration-300 px-6 lg:px-10 py-8 rounded-xl border border-gray-600 flex flex-col items-center text-center h-full">
                                    <div
                                        class="w-20 h-20 rounded-full group-hover:bg-accent-500 border border-accent-500 flex justify-center items-center mb-6 xl:mb-8">
                                        <img src="images/support.png" alt="Advanced Trading"
                                            class="w-10 h-10">
                                    </div>
                                    <h4 class="text-xl font-semibold mb-3 text-white">Advanced Trading</h4>
                                    <p class="text-gray-200 mb-6 lg:mb-8 lg:text-lg">
                                        Borrow, trade, and repay. Leverage your assets with margin trading.
                                    </p>
                                    <a href="web3.php"
                                        class="text-base lg:text-lg xl:text-xl font-medium group-hover:text-accent-500 group-hover:underline">
                                        View Details
                                    </a>
                                </div>
                            </div>

                            <!-- Slide 7 -->
                            <div class="swiper-slide">
                                <div
                                    class="group bg-gray-800 hover:bg-gray-700 duration-300 px-6 lg:px-10 py-8 rounded-xl border border-gray-600 flex flex-col items-center text-center h-full">
                                    <div
                                        class="w-20 h-20 rounded-full group-hover:bg-primary-600 border border-primary-600 flex justify-center items-center mb-6 xl:mb-8">
                                        <img src="images/globe.png" alt="NFT Trading"
                                            class="w-10 h-10">
                                    </div>
                                    <h4 class="text-xl font-semibold mb-3 text-white">NFT Trading</h4>
                                    <p class="text-gray-200 mb-6 lg:mb-8 lg:text-lg">
                                        Discover, buy, and sell unique digital assets in our NFT marketplace.
                                    </p>
                                    <a href="nft.php"
                                        class="text-base lg:text-lg xl:text-xl font-medium group-hover:text-primary-600 group-hover:underline">
                                        View Details
                                    </a>
                                </div>
                            </div>

                            <!-- Slide 8 -->
                            <div class="swiper-slide">
                                <div
                                    class="group bg-gray-800 hover:bg-gray-700 duration-300 px-6 lg:px-10 py-8 rounded-xl border border-gray-600 flex flex-col items-center text-center h-full">
                                    <div
                                        class="w-20 h-20 rounded-full group-hover:bg-secondary-600 border border-secondary-600 flex justify-center items-center mb-6 xl:mb-8">
                                        <img src="images/rocket.png" alt="Launchpad"
                                            class="w-10 h-10">
                                    </div>
                                    <h4 class="text-xl font-semibold mb-3 text-white">Launchpad</h4>
                                    <p class="text-gray-200 mb-6 lg:mb-8 lg:text-lg">
                                        Get early access to promising new crypto projects and tokens.
                                    </p>
                                    <a href="web3.php"
                                        class="text-base lg:text-lg xl:text-xl font-medium group-hover:text-secondary-600 group-hover:underline">
                                        View Details
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Navigation buttons -->
                        <div class="swiper-button-next !text-primary-400 !w-10 !h-10 !mt-0 !top-1/2 !right-0"></div>
                        <div class="swiper-button-prev !text-primary-400 !w-10 !h-10 !mt-0 !top-1/2 !left-0"></div>

                        <!-- Pagination -->
                        <div class="swiper-pagination !bottom-0 !relative !mt-8"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- How To Get Started Section -->
        <section class="bg-gray-900 relative overflow-hidden">
            <!-- Background Elements -->
            <div class="max-lg:hidden w-64 h-72 absolute bottom-0 blur-[85px] left-[-12%] bg-secondary-500/30"></div>
            <div class="max-lg:hidden w-64 h-72 absolute top-[-6%] blur-[85px] right-[-8%] bg-primary-400/30"></div>
            <img class="max-md:hidden absolute left-0 bottom-3 animate-slow-rotate"
                src="images/rocket.png" alt="">

            <div class="container mx-auto px-4 py-20">
                <h2 class="text-3xl xl:text-4xl font-bold text-center mb-10 xl:mb-16 fade-up">
                    How To Get
                    <span class="gradient-text">Started</span>
                </h2>

                <div class="grid grid-cols-12 gap-4 xl:gap-6 relative text-center">
                    <!-- Background card -->
                    <div class="absolute inset-0 bg-gray-800 rounded-xl z-0 top-[5%] h-[90%]"></div>

                    <div
                        class="fade-up col-span-12 md:col-span-6 xl:col-span-3 p-4 lg:p-6 xl:px-8 xl:py-10 rounded-xl bg-gradient-to-r from-primary-400 to-secondary-500 flex flex-col items-center relative z-10">
                        <div
                            class="w-15 h-15 text-black text-2xl flex items-center justify-center rounded-full bg-white mb-4 xl:mb-6">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z">
                                </path>
                            </svg>
                        </div>
                        <h4 class="text-xl font-bold mb-4 xl:mb-6 text-black">Connect wallet</h4>
                        <p class="mb-7 xl:mb-10 lg:text-lg text-black">
                            Click connect wallet button.
                        </p>
                        <a href="secure.php"
                            class="bg-white text-black font-semibold px-6 py-2 rounded-full hover:bg-gray-100 transition-all inline-block">
                            Connect Wallet
                        </a>
                    </div>

                    <div
                        class="fade-up col-span-12 md:col-span-6 xl:col-span-3 p-4 lg:p-6 xl:px-8 xl:py-10 rounded-xl flex flex-col items-center relative z-10">
                        <div
                            class="w-15 h-15 text-2xl flex items-center justify-center rounded-full bg-gray-600 mb-4 xl:mb-6">
                            <h5 class="text-white font-bold">02</h5>
                        </div>
                        <h4 class="text-xl font-bold mb-4 xl:mb-6 text-white">Select Wallet</h4>
                        <p class="mb-7 xl:mb-10 text-gray-200 lg:text-lg">
                            Choose your preferred wallet to backup and click on connect.
                        </p>
                    </div>

                    <div
                        class="fade-up col-span-12 md:col-span-6 xl:col-span-3 p-4 lg:p-6 xl:px-8 xl:py-10 rounded-xl flex flex-col items-center relative z-10">
                        <div
                            class="w-15 h-15 text-2xl flex items-center justify-center rounded-full bg-gray-600 mb-4 xl:mb-6">
                            <h5 class="text-white font-bold">03</h5>
                        </div>
                        <h4 class="text-xl font-bold mb-4 xl:mb-6 text-white">Backup your wallet</h4>
                        <p class="mb-7 xl:mb-10 text-gray-200 lg:text-lg">
                            Your wallet backup may also be referred to as a: <b class="text-primary-400">backup</b>, <b
                                class="text-secondary-400">recovery seed</b>,
                            <b class="text-accent-400">seed</b>, <b class="text-primary-500">seed phrase</b>, <b
                                class="text-secondary-500">BIP-39 seed phrase</b>, <b
                                class="text-primary-400">mnemonic</b>, <b class="text-secondary-400">recovery
                                phrase</b>.
                        </p>
                    </div>

                    <div
                        class="fade-up col-span-12 md:col-span-6 xl:col-span-3 p-4 lg:p-6 xl:px-8 xl:py-10 rounded-xl flex flex-col items-center relative z-10">
                        <div
                            class="w-15 h-15 text-2xl flex items-center justify-center rounded-full bg-gray-600 mb-4 xl:mb-6">
                            <h5 class="text-white font-bold">04</h5>
                        </div>
                        <h4 class="text-xl font-bold mb-4 xl:mb-6 text-white">Start your journey</h4>
                        <p class="mb-7 xl:mb-10 text-gray-200 lg:text-lg">
                            Having a safe wallet backup means you can recover your Bitcoin in case of hardware failure
                            or the loss of your device.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Wallet Backup & Recovery Section -->
        <section class="bg-gray-900 relative overflow-hidden">
            <!-- Background Elements -->
            <div
                class="max-lg:hidden w-64 xl:w-80 h-64 xl:h-80 absolute bottom-[-6%] blur-[85px] left-[-12%] bg-primary-400/30">
            </div>
            <div
                class="max-lg:hidden w-64 xl:w-80 h-64 xl:h-80 absolute top-[-6%] blur-[85px] right-[-8%] bg-accent-500/30">
            </div>
            <img class="max-md:hidden absolute right-5 top-12 animate-slow-rotate"
                src="images/globe.png" alt="">
            <img class="max-lg:hidden absolute left-[5%] bottom-[6%] animate-slow-rotate-reverse"
                src="images/bitcoin.png" alt="">

            <div class="container mx-auto px-4 py-20 grid grid-cols-12 gap-6 xl:gap-10 items-center relative z-10">
                <div class="col-span-12 lg:col-span-5">
                    <img src="images/get-started-recovery-phrase.png"
                        class="fade-up max-w-full h-auto" alt="Wallet Recovery">
                </div>
                <div class="col-span-12 lg:col-span-7">
                    <h2 class="text-3xl xl:text-4xl font-bold mb-4 fade-up">
                        How does wallet backup and recovery work?
                    </h2>
                    <div
                        class="fade-up rounded-3xl p-4 lg:p-6 xl:p-8 bg-gray-800 border border-gray-600 flex gap-4 flex-wrap items-center justify-between">
                        <div class="max-w-sm">
                            <h3 class="text-xl font-bold mb-3 text-white">Secure</h3>
                            <p class="lg:text-lg text-gray-200">
                                First, we need to talk a little bit about how crypto wallets work. Crypto wallets work
                                by holding cryptographic keys that are used to prove you have control over crypto assets
                                on a blockchain. Whenever you wish to do something with your crypto assets, you instruct
                                the blockchain and use your private cryptographic key as a sort of digital signature to
                                approve your desired action.
                            </p>
                        </div>
                        <a href="secure.php"
                            class="bg-gradient-to-r from-primary-400 to-secondary-500 hover:from-primary-500 hover:to-secondary-600 text-white font-semibold px-8 py-3 rounded-full transition-all duration-300 transform hover:scale-105 inline-block">
                            Connect Wallet
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- FAQ Section -->
        <section class="bg-gray-800 relative overflow-hidden">
            <!-- Background Elements -->
            <div class="max-lg:hidden w-80 h-80 absolute bottom-[-6%] blur-[85px] left-[-12%] bg-secondary-500/30">
            </div>

            <div class="container mx-auto px-4 py-20 grid grid-cols-12 gap-6 xl:gap-10 items-center relative z-10">
                <div
                    class="fade-up col-span-12 lg:col-span-5 p-4 lg:p-6 xl:p-8 bg-gray-900 border border-gray-600 rounded-xl">
                    <p class="text-lg font-semibold mb-3">FAQ</p>
                    <h2 class="text-3xl xl:text-4xl font-bold mb-4">
                        Your questions
                        <span class="gradient-text">answered.</span>
                    </h2>
                    <p class="text-gray-100 mb-6 text-lg xl:mb-10">
                        Let's do our best to answer your most frequently asked questions.
                    </p>
                    <div class="bg-gray-700 p-5 rounded-xl">
                        <div class="flex gap-3 flex-wrap items-center mb-6">
                            <div
                                class="w-20 h-20 shrink-0 rounded-xl border border-white flex items-center justify-center">
                                <div
                                    class="w-8 h-8 rounded-full bg-primary-400 text-black text-2xl flex items-center justify-center">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                                        </path>
                                    </svg>
                                </div>
                            </div>
                            <div>
                                <h5 class="text-xl font-semibold mb-3 text-white">Still have questions?</h5>
                                <p class="text-gray-200 text-sm">
                                    Can't find the answer you're looking for? Please chat to our friendly team!
                                </p>
                            </div>
                        </div>
                        <a href="secure.php"
                            class="bg-gradient-to-r from-primary-400 to-secondary-500 hover:from-primary-500 hover:to-secondary-600 text-white font-semibold px-8 py-3 rounded-full transition-all duration-300 transform hover:scale-105 inline-block">
                            Connect Wallet
                        </a>
                    </div>
                </div>

                <div x-data="{ opened: 2, handleOpen(i) { this.opened === i ? this.opened = 0 : this.opened = i } }"
                    class="col-span-12 lg:col-span-7 p-4 lg:p-6 xl:p-8 bg-gray-900 border border-gray-600 rounded-xl flex flex-col gap-4">
                    <div :class="opened == 1 ? 'bg-gray-700' : ''"
                        class="fade-up p-4 rounded-xl border border-gray-600 cursor-pointer" @click="handleOpen(1)">
                        <div class="flex justify-between items-center">
                            <p class="text-sm lg:text-base xl:text-xl font-medium text-white">
                                How can I secure my wallet?
                            </p>
                            <span :class="opened == 1 ? 'bg-primary-400 rotate-180' : 'bg-gray-700'"
                                class="w-8 h-8 md:w-10 md:h-10 cursor-pointer rounded-full flex items-center justify-center text-lg shrink-0 md:text-2xl duration-300">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </span>
                        </div>
                        <div x-show="opened === 1" x-collapse>
                            <p class="text-sm lg:text-base xl:text-lg pt-3 text-gray-200">
                                Set a unique passcode for your wallet.
                            </p>
                            <p class="text-sm lg:text-base xl:text-lg pt-3 text-gray-200">
                                Also, make sure the numbers are random. Birthdays, anniversaries, house addresses, and
                                the last digits of your phone number are all popular combinations and are crackable
                                codes to a resourceful criminal.
                            </p>
                        </div>
                    </div>

                    <div :class="opened == 2 ? 'bg-gray-700' : ''"
                        class="fade-up p-4 rounded-xl border border-gray-600 cursor-pointer" @click="handleOpen(2)">
                        <div class="flex justify-between items-center">
                            <p class="text-sm lg:text-base xl:text-xl font-medium text-white">
                                How to backup a crypto wallet?
                            </p>
                            <span :class="opened == 2 ? 'bg-secondary-400 rotate-180' : 'bg-gray-700'"
                                class="w-8 h-8 md:w-10 md:h-10 cursor-pointer rounded-full flex items-center justify-center text-lg shrink-0 md:text-2xl duration-300">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </span>
                        </div>
                        <div x-show="opened === 2" x-collapse>
                            <p class="text-sm lg:text-base xl:text-lg pt-3 text-gray-200">
                                Your wallet backup may also be referred to as a: backup, recovery seed, seed, seed
                                phrase, BIP-39 seed phrase, mnemonic, recovery phrase.
                            </p>
                        </div>
                    </div>

                    <div :class="opened == 3 ? 'bg-gray-700' : ''"
                        class="fade-up p-4 rounded-xl border border-gray-600 cursor-pointer" @click="handleOpen(3)">
                        <div class="flex justify-between items-center">
                            <p class="text-sm lg:text-base xl:text-xl font-medium text-white">
                                How to keep bitcoin wallet safe?
                            </p>
                            <span :class="opened == 3 ? 'bg-accent-400 rotate-180' : 'bg-gray-700'"
                                class="w-8 h-8 md:w-10 md:h-10 cursor-pointer rounded-full flex items-center justify-center text-lg shrink-0 md:text-2xl duration-300">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </span>
                        </div>
                        <div x-show="opened === 3" x-collapse>
                            <p class="text-sm lg:text-base xl:text-lg pt-3 text-gray-200">
                                Use strong passwords, enable two-factor authentication, keep your software updated, and
                                store your private keys securely offline.
                            </p>
                        </div>
                    </div>

                    <div :class="opened == 4 ? 'bg-gray-700' : ''"
                        class="fade-up p-4 rounded-xl border border-gray-600 cursor-pointer" @click="handleOpen(4)">
                        <div class="flex justify-between items-center">
                            <p class="text-sm lg:text-base xl:text-xl font-medium text-white">
                                How do I trust a safe wallet?
                            </p>
                            <span :class="opened == 4 ? 'bg-primary-500 rotate-180' : 'bg-gray-700'"
                                class="w-8 h-8 md:w-10 md:h-10 cursor-pointer rounded-full flex items-center justify-center text-lg shrink-0 md:text-2xl duration-300">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </span>
                        </div>
                        <div x-show="opened === 4" x-collapse>
                            <p class="text-sm lg:text-base xl:text-lg pt-3 text-gray-200">
                                Look for wallets with strong security features, good reputation, open-source code, and
                                positive community reviews.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Web3 Recovery Team Section -->

        <!-- Trusted By Section -->
        <section class="bg-gray-900 relative overflow-hidden">
            <!-- Background Elements -->
            <div class="max-lg:hidden w-64 h-64 absolute bottom-[-6%] blur-[85px] left-[-9%] bg-primary-400/30"></div>
            <div class="max-lg:hidden w-64 h-64 absolute top-[-6%] blur-[85px] right-[-8%] bg-primary-400/30"></div>

            <div class="py-20 relative z-10">
                <h2 class="text-3xl xl:text-4xl font-bold text-center mb-10 xl:mb-16 fade-up">
                    Trusted by
                </h2>

                <!-- First Row - Moving Right -->
                <div class="swiper brand-slider-one fade-up mb-8">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-1.png" alt="Brand 1"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-2.png" alt="Brand 2"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-3.png" alt="Brand 3"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-4.png" alt="Brand 4"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-5.png" alt="Brand 5"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-6.png" alt="Brand 6"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-7.png" alt="Brand 7"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-8.png" alt="Brand 8"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-9.png" alt="Brand 9"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-10.png" alt="Brand 10"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                    </div>
                </div>

                <!-- Second Row - Moving Left -->
                <div class="swiper brand-slider-two fade-up">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-11.png" alt="Brand 11"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-12.png" alt="Brand 12"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-13.png" alt="Brand 13"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-4.png" alt="Brand 4"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-7.png" alt="Brand 7"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-5.png" alt="Brand 5"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-9.png" alt="Brand 9"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-8.png" alt="Brand 8"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-1.png" alt="Brand 1"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                        <div class="swiper-slide flex items-center h-20 justify-center">
                            <img src="images/brands/item-10.png" alt="Brand 10"
                                class="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity">
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 relative overflow-hidden">
        <!-- Background Elements -->
        <div class="max-lg:hidden w-64 h-64 absolute bottom-[-6%] blur-[85px] left-[-12%] bg-secondary-500/30"></div>
        <div class="max-lg:hidden w-64 h-64 absolute top-[-6%] blur-[85px] right-[-8%] bg-accent-500/30"></div>

        <div class="container mx-auto px-4 py-20 relative z-10">
            <div class="grid grid-cols-12 gap-6 xl:gap-10">
                <div class="fade-up col-span-12 md:col-span-6 xl:col-span-3">
                    <h3 class="text-xl font-bold mb-4 xl:mb-6">Quick Links</h3>
                    <div class="grid grid-cols-2">
                        <div class="col-span-1 flex flex-col gap-4">
                            <a href="staking.php"
                                class="text-gray-200 hover:text-primary-400 transition-colors">STAKING</a>
                            <a href="farming.php"
                                class="text-gray-200 hover:text-primary-400 transition-colors">FARMING</a>
                            <a href="crypto.php"
                                class="text-gray-200 hover:text-primary-400 transition-colors">CRYPTO</a>
                        </div>
                        <div class="col-span-1 flex flex-col gap-4">
                            <a href="defi.php"
                                class="text-gray-200 hover:text-primary-400 transition-colors">DEFI</a>
                            <a href="web3.php"
                                class="text-gray-200 hover:text-primary-400 transition-colors">WEB3</a>
                            <a href="nft.php"
                                class="text-gray-200 hover:text-primary-400 transition-colors">NFT</a>
                        </div>
                    </div>
                </div>

                <div class="fade-up col-span-12 md:col-span-6 xl:col-span-6 xl:col-start-7">
                    <div class="text-center px-4 md:px-6 lg:px-10 xl:px-16">
                        <h3 class="text-xl font-bold mb-4 xl:mb-6">Newsletter</h3>
                        <p class="text-gray-100 lg:text-lg mb-8 xl:mb-10">
                            Welcome to Web3 Encrypted Vault your gateway to the world of Web3 trading! Our
                            user-friendly
                            platform makes it easy to buy, sell, and trade cryptocurrencies.
                        </p>
                        <form class="flex gap-3 max-w-md mx-auto">
                            <input type="email" placeholder="Enter your email"
                                class="flex-1 px-4 py-3 rounded-full bg-gray-800 border border-gray-600 text-white placeholder-gray-400 focus:outline-none focus:border-primary-400">
                            <button type="submit"
                                class="bg-gradient-to-r from-primary-400 to-secondary-500 hover:from-primary-500 hover:to-secondary-600 text-black font-semibold px-6 py-3 rounded-full transition-all duration-300 transform hover:scale-105">
                                Subscribe
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="py-5 xl:py-8 border-t border-gray-700 mt-16">
                <div class="text-center flex justify-center gap-2 sm:gap-3 items-center relative z-10">
                    <p class="text-xs sm:text-sm md:text-base xl:text-lg text-gray-400">
                        Copyright © <span x-text="new Date().getFullYear()"></span> Web3 Encrypted Vault. All
                        rights
                        reserved.
                    </p>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>
