<!DOCTYPE html>
<html lang="en">
<?php require_once('inc/head.php'); ?>
<body  class="home-4">
    <style>
        /* About Page Specific Styles */
        .about-hero {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            color: #fff;
            padding: 100px 0 80px;
            position: relative;
            overflow: unset;
        }
        .about-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('assets/img/bg/slide1.jpg') center/cover no-repeat;
            opacity: 0.2;
            z-index: 1;
        }
        .about-hero .container {
            position: relative;
            z-index: 2;
        }
        .about-hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: #fff;
        }
        .about-hero p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
            opacity: 0.9;
        }
        .breadcrumb {
            background: transparent;
            justify-content: center;
            margin-bottom: 30px;
        }
        .breadcrumb-item a {
            color: #f7921a;
            text-decoration: none;
        }
        .breadcrumb-item.active {
            color: #fff;
        }
        .breadcrumb-item+.breadcrumb-item::before {
            color: #fff;
        }

        /* Mission & Vision Section */
        .mission-vision {
            padding: 80px 0;
            background: #f9f9f9;
        }
        .mission-box, .vision-box {
            background: #fff;
            border-radius: 12px;
            padding: 40px 30px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            height: 100%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .mission-box:hover, .vision-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        .mission-icon, .vision-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #f7921a, #ffa94d);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            color: #fff;
            font-size: 2rem;
        }
        .mission-box h3, .vision-box h3 {
            font-size: 1.8rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }
        .mission-box p, .vision-box p {
            color: #555;
            line-height: 1.7;
            text-align: center;
        }

        /* Values Section */
        .values-section {
            padding: 80px 0;
        }
        .value-card {
            background: #fff;
            border-radius: 12px;
            padding: 30px 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            text-align: center;
            height: 100%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-top: 4px solid #f7921a;
        }
        .value-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
        }
        .value-icon {
            width: 70px;
            height: 70px;
            background: #f9f9f9;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: #f7921a;
            font-size: 1.8rem;
            transition: all 0.3s ease;
        }
        .value-card:hover .value-icon {
            background: #f7921a;
            color: #fff;
            transform: scale(1.1);
        }
        .value-card h4 {
            font-size: 1.4rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }
        .value-card p {
            color: #555;
            line-height: 1.6;
        }

        /* Team Section */
        .team-section {
            padding: 80px 0;
            background: #f9f9f9;
        }
        .team-member {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 30px;
        }
        .team-member:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        .team-img {
            height: 280px;
            overflow: hidden;
        }
        .team-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .team-member:hover .team-img img {
            transform: scale(1.05);
        }
        .team-info {
            padding: 25px 20px;
            text-align: center;
        }
        .team-info h4 {
            font-size: 1.4rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        .team-info p {
            color: #f7921a;
            font-weight: 500;
            margin-bottom: 15px;
        }
        .team-info .social-links {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .team-info .social-links a {
            width: 36px;
            height: 36px;
            background: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #555;
            transition: all 0.3s ease;
        }
        .team-info .social-links a:hover {
            background: #f7921a;
            color: #fff;
            transform: translateY(-3px);
        }

        /* Stats Section */
        .stats-section {
            padding: 80px 0;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        .stats-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('assets/img/bg/slide3.jpg') center/cover no-repeat;
            opacity: 0.2;
            z-index: 1;
        }
        .stats-section .container {
            position: relative;
            z-index: 2;
        }
        .stat-box {
            text-align: center;
            padding: 20px;
        }
        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: #f7921a;
            margin-bottom: 10px;
            display: block;
        }
        .stat-text {
            font-size: 1.1rem;
            font-weight: 500;
            color: #fff;
        }

        /* Timeline Section */
        .timeline-section {
            padding: 80px 0;
        }
        .timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
        }
        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background: #f7921a;
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
            border-radius: 10px;
        }
        .timeline-item {
            padding: 10px 40px;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }
        .timeline-item::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            background: #fff;
            border: 4px solid #f7921a;
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }
        .left {
            left: 0;
        }
        .right {
            left: 50%;
        }
        .left::after {
            right: -12px;
        }
        .right::after {
            left: -12px;
        }
        .timeline-content {
            padding: 20px 30px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            position: relative;
        }
        .timeline-content h3 {
            font-size: 1.4rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }
        .timeline-content p {
            color: #555;
            line-height: 1.6;
            margin-bottom: 0;
        }
        .timeline-date {
            display: inline-block;
            padding: 5px 15px;
            background: #f7921a;
            color: #fff;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            margin-bottom: 15px;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .about-hero h1 {
                font-size: 2.5rem;
            }
            .about-hero p {
                font-size: 1rem;
            }
            .timeline::after {
                left: 31px;
            }
            .timeline-item {
                width: 100%;
                padding-left: 70px;
                padding-right: 25px;
            }
            .timeline-item::after {
                left: 18px;
            }
            .right {
                left: 0;
            }
            .mission-box, .vision-box {
                padding: 30px 20px;
            }
            .mission-box h3, .vision-box h3 {
                font-size: 1.5rem;
            }
            .value-card {
                padding: 25px 20px;
            }
            .stat-number {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 576px) {
            .about-hero {
                padding: 80px 0 60px;
            }
            .about-hero h1 {
                font-size: 2rem;
            }
            .mission-vision, .values-section, .team-section, .stats-section, .timeline-section {
                padding: 60px 0;
            }
            .mission-icon, .vision-icon {
                width: 70px;
                height: 70px;
                font-size: 1.8rem;
            }
        }
    </style>
    
   <?php require_once('inc/preloader.php'); ?>

   <?php require_once('inc/ticker.php'); ?>

<?php require_once('inc/header.php'); ?>

    <!-- START ABOUT HERO SECTION -->
    <section class="about-hero">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">About Us</li>
                        </ol>
                    </nav>
                    <h1 data-aos="fade-down" data-aos-duration="1000">About Speedbitplus</h1>
                    <p data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                        Leading the cryptocurrency revolution with secure, innovative trading solutions since 2018.
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- END ABOUT HERO SECTION -->

    <!-- START MISSION & VISION SECTION -->
    <section style="overflow: hidden;" class="mission-vision">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <div class="section-title">
                        <h5>Our Foundation</h5>
                        <h3>Mission & <span>Vision</span></h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-12 mb-4">
                    <div class="mission-box" data-aos="fade-right" data-aos-duration="1000">
                        <div class="mission-icon">
                            <i class="fa fa-bullseye"></i>
                        </div>
                        <h3>Our Mission</h3>
                        <p>
                            To democratize cryptocurrency trading by providing a secure, intuitive, and accessible platform 
                            that empowers individuals and institutions to participate in the digital economy with confidence. 
                            We strive to bridge the gap between traditional finance and the emerging crypto landscape through 
                            innovative technology and exceptional user experience.
                        </p>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12 mb-4">
                    <div class="vision-box" data-aos="fade-left" data-aos-duration="1000">
                        <div class="vision-icon">
                            <i class="fa fa-eye"></i>
                        </div>
                        <h3>Our Vision</h3>
                        <p>
                            To become the world's most trusted cryptocurrency platform, recognized for our commitment to 
                            security, transparency, and user empowerment. We envision a future where digital assets are 
                            seamlessly integrated into everyday financial activities, and Speedbitplus is at the forefront 
                            of this transformation, driving financial inclusion and innovation globally.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END MISSION & VISION SECTION -->

    <!-- START VALUES SECTION -->
    <section style="overflow: hidden;" class="values-section">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <div class="section-title">
                        <h5>What We Stand For</h5>
                        <h3>Our Core <span>Values</span></h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6 col-12 mb-4">
                    <div class="value-card" data-aos="fade-up" data-aos-duration="1000">
                        <div class="value-icon">
                            <i class="fa fa-shield-alt"></i>
                        </div>
                        <h4>Security First</h4>
                        <p>
                            We prioritize the safety of our users' assets and data through advanced encryption, 
                            multi-layered security protocols, and continuous monitoring systems.
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12 mb-4">
                    <div class="value-card" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <div class="value-icon">
                            <i class="fa fa-handshake"></i>
                        </div>
                        <h4>Transparency</h4>
                        <p>
                            We believe in open communication, clear fee structures, and honest relationships 
                            with our users, building trust through complete transparency in all operations.
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12 mb-4">
                    <div class="value-card" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                        <div class="value-icon">
                            <i class="fa fa-lightbulb"></i>
                        </div>
                        <h4>Innovation</h4>
                        <p>
                            We continuously evolve our platform with cutting-edge technology, 
                            introducing new features and services that anticipate market needs and user expectations.
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12 mb-4">
                    <div class="value-card" data-aos="fade-up" data-aos-duration="1000">
                        <div class="value-icon">
                            <i class="fa fa-users"></i>
                        </div>
                        <h4>User-Centric</h4>
                        <p>
                            Our users are at the heart of everything we do. We design intuitive interfaces 
                            and provide exceptional support to ensure a seamless trading experience for everyone.
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12 mb-4">
                    <div class="value-card" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <div class="value-icon">
                            <i class="fa fa-gem"></i>
                        </div>
                        <h4>Excellence</h4>
                        <p>
                            We strive for excellence in every aspect of our service, from platform performance 
                            to customer support, setting new standards in the cryptocurrency industry.
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12 mb-4">
                    <div class="value-card" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                        <div class="value-icon">
                            <i class="fa fa-globe"></i>
                        </div>
                        <h4>Global Access</h4>
                        <p>
                            We're committed to breaking down financial barriers and providing equal access 
                            to cryptocurrency markets for users across the globe, regardless of location or background.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END VALUES SECTION -->





    <!-- START STATS SECTION -->
    <section class="stats-section">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <div class="section-title">
                        <h5>Our Achievements</h5>
                        <h3 style="color:#fff;">Company <span>Statistics</span></h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 col-12 mb-4">
                    <div class="stat-box" data-aos="fade-up" data-aos-duration="1000">
                        <span class="stat-number" data-count="1000000">1M+</span>
                        <div class="stat-text">Registered Users</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 mb-4">
                    <div class="stat-box" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <span class="stat-number" data-count="150">150+</span>
                        <div class="stat-text">Countries Served</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 mb-4">
                    <div class="stat-box" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                        <span class="stat-number" data-count="50">50+</span>
                        <div class="stat-text">Cryptocurrencies</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 mb-4">
                    <div class="stat-box" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
                        <span class="stat-number" data-count="99.9">99.9%</span>
                        <div class="stat-text">Uptime Record</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END STATS SECTION -->

    <!-- START FOOTER -->
   <?php 
    require_once('inc/footer.php');
    ?>	
    <!-- END FOOTER -->

    <!-- Latest jQuery -->
    <!--<script src="assets/js/jquery-2.2.4.min.js"></script>-->
    <!-- popper js -->
    <!--<script src="assets/bootstrap/js/popper.min.js"></script>-->
    <!-- Latest compiled and minified Bootstrap -->
    <!--<script src="assets/bootstrap/js/bootstrap.min.js"></script>-->
    <!-- meanmenu min js -->
    <!--<script src="assets/js/jquery.meanmenu.min.js"></script>-->
    <!-- Sticky JS -->
    <!--<script src="assets/js/jquery.sticky.js"></script>-->
    <!-- owl-carousel min js -->
    <!--<script src="assets/owlcarousel/js/owl.carousel.min.js"></script>	-->
    <!-- jquery appear js -->
    <!--<script src="assets/js/jquery.appear.js"></script>-->
    <!-- countTo js -->
    <!--<script src="assets/js/jquery.inview.min.js"></script>-->
    <!-- venobox js -->
    <!--<script src="assets/venobox/js/venobox.min.js"></script>-->
    <!-- masonry js -->
    <!--<script src="assets/js/masonry.pkgd.min.js"></script>-->
    <!-- scroll to top js -->
    <!--<script src="assets/js/scrolltopcontrol.js"></script>-->
    <!-- WOW - Reveal Animations When You Scroll -->
    <!--<script src="assets/js/wow.min.js"></script>-->
    <!-- AOS Animation JS -->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
    
    	 <?php 
    require_once('incx/script.php');
    ?>	
    
    <!-- Custom Scripts for About Page -->
    <script>
        $(document).ready(function(){
            // Initialize AOS
            AOS.init();

            // Crypto Data Array
            const cryptos = [
                { symbol: 'BTC', name: 'Bitcoin', icon: 'logos/bitcoin-btc-logo.png' },
                { symbol: 'ETH', name: 'Ethereum', icon: 'logos/ethereum-eth-logo.png' },
                { symbol: 'BNB', name: 'Binance Coin', icon: 'logos/bnb-bnb-logo.png' },
                { symbol: 'XRP', name: 'Ripple', icon: 'logos/xrp-xrp-logo.png' },
                { symbol: 'ADA', name: 'Cardano', icon: 'logos/cardano-ada-logo.png' },
                { symbol: 'SOL', name: 'Solana', icon: 'logos/solana-sol-logo.png' },
                { symbol: 'DOT', name: 'Polkadot', icon: 'logos/polkadot-new-dot-logo.png' },
                { symbol: 'DOGE', name: 'Dogecoin', icon: 'logos/dogecoin-doge-logo.png' }
            ];

            const tickerContent = $('#tickerContent');

            // Fetch Crypto Prices for Ticker
            function fetchCryptoPrices() {
                // Fallback with demo data
                let tickerHtml = '';
                cryptos.forEach(crypto => {
                    const mockPrice = Math.random() * 100000;
                    const mockChange = (Math.random() - 0.5) * 10;
                    const changeClass = mockChange >= 0 ? 'positive' : 'negative';
                    const changeSign = mockChange >= 0 ? '+' : '';

                    // Ticker Fallback
                    tickerHtml += `
                        <div class="crypto-item">
                            <img src="${crypto.icon}" alt="${crypto.name} icon" class="crypto-icon" onerror="this.src='assets/img/default-coin.png'">
                            <span class="crypto-symbol">${crypto.symbol}</span>
                            <span class="crypto-price">$${mockPrice.toLocaleString(undefined, {maximumFractionDigits: 2})}</span>
                            <span class="crypto-change ${changeClass}">${changeSign}${mockChange.toFixed(2)}%</span>
                        </div>
                    `;
                });
                tickerContent.html(tickerHtml + tickerHtml);
            }

            // Fetch prices every 30 seconds
            fetchCryptoPrices();
            setInterval(fetchCryptoPrices, 30000);

            // Counter Animation for Stats
            $('.stat-number').each(function() {
                $(this).prop('Counter', 0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 2000,
                    easing: 'swing',
                    step: function (now) {
                        if ($(this).data('count') > 1000) {
                            $(this).text(Math.ceil(now) + '+');
                        } else {
                            $(this).text(Math.ceil(now));
                        }
                    }
                });
            });

            // Faster Preloader
            setTimeout(function() {
                $('#page-preloader').addClass('loaded');
                
                // Remove from DOM after animation completes
                setTimeout(function() {
                    $('#page-preloader').remove();
                }, 500);
            }, 1500);
            
            // Alternative: Hide when page is fully loaded (even faster)
            $(window).on('load', function() {
                $('#page-preloader').addClass('loaded');
                setTimeout(function() {
                    $('#page-preloader').remove();
                }, 500);
            });
            
            // Fallback: Maximum 3 seconds even if page isn't fully loaded
            setTimeout(function() {
                $('#page-preloader').addClass('loaded');
                setTimeout(function() {
                    $('#page-preloader').remove();
                }, 500);
            }, 3000);
        });
    </script>
    
    	 <?php 
    require_once('incx/ticker.php');
    ?>	
	
	
  <?php 
    require_once('incx/preloader.php');
    ?>
        <script src="assets/js/scripts.js"></script>

</body>
</html>