<link rel="stylesheet" type="text/css" href="{{ asset('css/styleA.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('css/responsive.css') }}" />


<style>
    #tiny li.active > a,
    #tiny li.dropdown.active > a {
        /* color: #c89b3c; */
        font-weight: bold;
        background-color:#382600;
        color:white
    }
    /* Dropdown container */
    .dropdown {
        position: relative;
    }
    li.active > a {
    color: #ffffff !important;
}

    /* Dropdown menu - hidden by default */
    .dropdown > ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
        list-style: none;
        padding: 0;
        margin: 0;
        /* border: 1px solid #ddd; */
    }

    /* Dropdown menu items */
    .dropdown > ul > li {
        margin: 0;
    }

    .dropdown > ul a {
        display: block;
        padding: 10px 15px; 
        text-decoration: none;
        color: #333;
        border-bottom: 1px solid #eee;
        white-space: nowrap;
    }

    .dropdown > ul a:hover {
        background: #f5f5f5;
    }

    /* Show dropdown on hover */
    .dropdown:hover > ul {
        display: block;
    }

    /* Remove default padding/margin from menu lists */
    #tiny > li > ul,
    #tinyNew > li > ul {
        padding: 0;
        margin: 0;
    }

    /* Optional: Add a caret/down arrow for dropdown items */
    .dropdown > a:after {
        /* content: ' ▼';
        font-size: 0.8em; */
    }
</style>

<!-- HEADER -->
<header id="header">
    <!-- Top header bar -->
    <div id="topHeader">
        <div class="wrapper" style="background-color: #ACAAAB; box-shadow: 0 4px 8px rgba(160, 160, 160, 0.35), 0 10px 25px rgba(110, 110, 110, 0.25);">
            <div class="top_contact_info">
                <div class="container">
                    <!-- end section -->
                    <div class="center_sec">
                        <!-- Logo -->
                        <a href="{{ url('/') }}">
                            <img src="{{ asset('images/logo.png') }}"></a>
                    </div>
                    <!-- end section -->
                    <div class="clock_display" style="padding-top: 7px;">
                        <!-- Clock flash objects remain unchanged -->
                        <table width="150" border="0" cellspacing="0" cellpadding="0" align="right">
                            <tbody>
                                <!-- <tr valign="top">
                                    <td>
                                        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/web/20161023051709oe_/http://www.agcx.com/web/20081019235411oe_/http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="57" height="81">
                                            <param name="movie" value="newyork.swf">
                                            <param name="quality" value="high">
                                            <param name="wmode" value="transparent">
                                            <embed src="/web/20161023051709oe_/http://www.agcx.com/newyork.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="57" height="81" wmode="transparent"></object></td>
                                    <td>
                                        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/web/20161023051709oe_/http://www.agcx.com/web/20081019235411oe_/http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="57" height="81">
                                            <param name="movie" value="london.swf">
                                            <param name="quality" value="high">
                                            <param name="wmode" value="transparent">
                                            <embed src="/web/20161023051709oe_/http://www.agcx.com/london.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="57" height="81" wmode="transparent"></object></td>
                                    <td>
                                        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/web/20161023051709oe_/http://www.agcx.com/web/20081019235411oe_/http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="57" height="81">
                                            <param name="movie" value="dubai.swf">
                                            <param name="quality" value="high">
                                            <param name="wmode" value="transparent">
                                            <embed src="/web/20161023051709oe_/http://www.agcx.com/dubai.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="57" height="81" wmode="transparent"></object></td>
                                    <td>
                                        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/web/20161023051709oe_/http://www.agcx.com/web/20081019235411oe_/http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="57" height="81">
                                            <param name="movie" value="tokyo.swf">
                                            <param name="quality" value="high">
                                            <param name="wmode" value="transparent">
                                            <embed src="/web/20161023051709oe_/http://www.agcx.com/tokyo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="57" height="81" wmode="transparent"></object></td>
                                    <td width="50">&nbsp;</td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                    <!-- end section -->
                </div>
            </div>
            <!-- end top contact info -->
        </div>
    </div>

    <div id="trueHeader">
        <div class="wrapper" style=" background: linear-gradient(
        to bottom,
        #D6D3D2 0%,
        #B8B4B3 50%,
        #9E9A98 100%
    );
    border-top: 1px solid #EFEDED;
    border-bottom: 1px solid #7F7B79;">
            <div class="container">

                <nav id="access" role="navigation">
                    <div id="menu" class="menu">

                        <ul id="tiny">

                            <!-- HOME -->
                            <li class="{{ request()->is('/') ? 'active' : '' }}">
                                <a href="{{ url('/') }}">Home</a>
                            </li>

                            <!-- ABOUT US -->
                            <li class="dropdown {{ request()->is('about/*') ? 'active' : '' }}">
                                <a>About Us</a>
                                <ul>
                                    <li><a href="{{ url('/about/introduction') }}">Introduction</a></li>
                                    <li><a href="{{ url('/about/our_story') }}">Our Story</a></li>
                                    <li><a href="{{ url('/about/management') }}">Management</a></li>
                                    <li><a href="{{ url('/about/oppurtunity') }}">Our Opportunity</a></li>
                                    <li><a href="{{ url('/about/FAQs') }}">FAQs</a></li>
                                    <li><a href="{{ url('/about/contact_us') }}">Contact Us</a></li>
                                </ul>
                            </li>

                            <!-- GOLD -->
                            <!-- <li class="dropdown {{ request()->is('gold/*') ? 'active' : '' }}">
                                <a>Gold</a>
                                <ul>
                                    <li><a href="{{ url('/gold/introduction') }}">Introduction</a></li>
                                    <li><a href="{{ url('/gold/background_history') }}">Background History</a></li>
                                    <li><a href="{{ url('/gold/overview') }}">Overview</a></li>
                                    <li><a href="{{ url('/gold/trade_gold') }}">Why Trade Gold?</a></li>
                                    <li><a href="{{ url('/gold/oppurtunity') }}">Opportunity</a></li>
                                    <li><a href="{{ url('/gold/risk_warning') }}">Risk Warning</a></li>
                                    <li><a href="{{ url('/gold/presentation') }}">Presentation</a></li>
                                </ul>
                            </li> -->

                            <!-- FOREX -->
                            <li class="dropdown {{ request()->is('forex/*') ? 'active' : '' }}">
                                <a>Forex</a>
                                <ul>
                                    <li><a href="{{ url('/forex/introduction') }}">Introduction</a></li>
                                    <li><a href="{{ url('/forex/background_history') }}">Background History</a></li>
                                    <li><a href="{{ url('/forex/overview') }}">Overview</a></li>
                                    <li><a href="{{ url('/forex/trade_forex') }}">Why Trade Forex?</a></li>
                                    <li><a href="{{ url('/forex/risk_warning') }}">Risk Warning</a></li>
                                </ul>
                            </li>

                            <!-- COMMODITIES -->
                            <li class="dropdown {{ request()->is('commodities/*') ? 'active' : '' }}">
                                <a>Commodities</a>
                                <ul>
                                    <li><a href="{{ url('/commodities/introduction') }}">Introduction</a></li>
                                    <li><a href="{{ url('/commodities/background_history') }}">Background History</a></li>
                                    <li><a href="{{ url('/commodities/overview') }}">Overview</a></li>
                                    <li><a href="{{ url('/commodities/trade_commodities') }}">Why Trade Commodities?</a></li>
                                    <li><a href="{{ url('/commodities/commodities_vs_stocks') }}">Commodities vs Stocks</a></li>
                                    <li><a href="{{ url('/commodities/oppurtunity') }}">Opportunity</a></li>
                                    <!-- <li><a href="{{ url('/commodities/commodities_basics') }}">Commodities Basics</a></li> -->
                                    <li><a href="{{ url('/commodities/risk_warning') }}">Risk Warning</a></li>
                                    <li><a href="{{ url('/commodities/presentation') }}">Presentation</a></li>
                                </ul>
                            </li>

                            <!-- OPPORTUNITY -->
                            <li class="dropdown {{ request()->is('oppurtunity/*') ? 'active' : '' }}">
                                <a>Opportunity</a>
                                <ul>
                                    <li><a href="{{ url('/oppurtunity/introduction') }}">Introduction</a></li>
                                    <li><a href="{{ url('/oppurtunity/why_agcx') }}">Why AGCX?</a></li>
                                    <li><a href="{{ url('/oppurtunity/referral_comission') }}">Referral Commissions</a></li>
                                    <li><a href="{{ url('/oppurtunity/system_success') }}">System to Success</a></li>
                                    <li><a href="{{ url('/oppurtunity/reward_bonus') }}">Rewards & Bonus</a></li>
                                    <li><a href="{{ url('/oppurtunity/income_calculator') }}">Income Calculator</a></li>
                                </ul>
                                
                            </li>
                            <li class="dropdown {{ request()->is('products/*') ? 'active' : '' }}">
                                <a>Products</a>
                                
                                 <ul>
                                    <li><a href="#">Our Products</a></li>
                                    <li><a href="#">IBA Registration Kit</a></li>
                                    <li><a href="#">Trading Courses</a></li>
                                    <li><a href="#">Charts</a></li>
                                    <li><a href="#">Online trading Rooms</a></li>
                                </ul>
                            </li>

                            <!-- LOGIN -->
                            <li class="{{ request()->is('login') ? 'active' : '' }}">
                                <a href="{{ url('/login') }}">Login</a>
                            </li>

                            <!-- REGISTER -->
                            <li class="{{ request()->is('register') ? 'active' : '' }}">
                                <a href="{{ url('/register') }}">Open Account</a>
                            </li>
                             <li class="{{ request()->is('latest_news') ? 'active' : '' }}">
                                <a href="{{ url('/register') }}">Latest News</a>
                            </li>

                            <!-- CONTACT -->
                            <li class="{{ request()->is('contact_us') ? 'active' : '' }}">
                                <a href="{{ url('/contact_us') }}">Contact Us</a>
                            </li>

                        </ul>

                    </div>
                </nav>

            </div>
        </div>
    </div>
</header>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add dropdown functionality for mobile devices
    const dropdowns = document.querySelectorAll('.dropdown');
    
    dropdowns.forEach(dropdown => {
        const toggle = dropdown.querySelector('a:first-child');
        
        if (toggle) {
            // Toggle dropdown on click for mobile/touch devices
            toggle.addEventListener('click', function(e) {
                if (window.innerWidth <= 768) { // Mobile devices
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Close other open dropdowns
                    dropdowns.forEach(otherDropdown => {
                        if (otherDropdown !== dropdown) {
                            const otherUl = otherDropdown.querySelector('ul');
                            if (otherUl) otherUl.style.display = 'none';
                        }
                    });
                    
                    const menu = dropdown.querySelector('ul');
                    if (menu) {
                        menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
                    }
                }
            });
        }
    });
    
    // Close dropdowns when clicking outside
    document.addEventListener('click', function(e) {
        if (window.innerWidth <= 768) {
            if (!e.target.closest('.dropdown')) {
                dropdowns.forEach(dropdown => {
                    const menu = dropdown.querySelector('ul');
                    if (menu) menu.style.display = 'none';
                });
            }
        }
    });
    
    // Handle window resize
    window.addEventListener('resize', function() {
        if (window.innerWidth > 768) {
            // Reset display for desktop
            dropdowns.forEach(dropdown => {
                const menu = dropdown.querySelector('ul');
                if (menu) menu.style.display = '';
            });
        }
    });
});
</script>