<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $conference['title'] ?? ($title ?? 'Conference') }} - Global Event</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Importing polished serif and sans-serif fonts -->
    <link
        href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <style>
        [x-cloak] {
            display: none !important;
        }

        .font-serif {
            font-family: 'Playfair Display', serif;
        }

        .font-sans {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        /* Modern Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #000;
        }

        ::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Main nav link font size */
        .nav-main-link {
            font-size: 15px !important;
        }

        /* Offset for fixed top bar + fixed nav when scrolling to hash links */
        html {
            scroll-padding-top: 130px;
        }
    </style>
</head>

<body class="font-sans antialiased text-gray-900 bg-white selection:bg-orange-500 selection:text-white">

    <!-- Top Utility Bar -->
    <div class="fixed top-0 left-0 w-full bg-black border-b border-white/10" style="z-index: 100; height: 36px;">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 h-full">
            <div class="flex justify-end items-center h-full space-x-6">


                <a href="#speakers"
                    class="font-semibold tracking-widest text-gray-300 hover:text-orange-500 transition-colors capitalize"
                    style="font-size: 14px;">
                    Key Speakers
                </a>
                <span class="text-white/30">|</span>
                <a href="#research-library"
                    class="font-semibold tracking-widest text-gray-300 hover:text-orange-500 transition-colors capitalize"
                    style="font-size: 14px;">Research Library
                </a>
                <span class="text-white/30">|</span>
                <a href="#sign-in"
                    class="font-semibold tracking-widest text-orange-400 hover:text-white transition-colors capitalize flex items-center gap-1.5"
                    style="font-size: 14px;">
                    <i class="fas fa-user-circle" style="font-size: 15px;"></i> Sign In
                </a>
            </div>
        </div>
    </div>

    <!-- Modern Navigation -->
    <nav x-data="{ scrolled: false, mobileOpen: false, rightMenuOpen: false }"
        @scroll.window="scrolled = (window.pageYOffset > 50)"
        :class="{ 'bg-black/80 backdrop-blur-md py-4': scrolled, 'bg-transparent py-8': !scrolled }"
        class="fixed w-full transition-all duration-300 border-b border-white/10" style="top: 36px; z-index: 150;">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="flex justify-between items-center">
                <!-- Dynamic Logo -->
                <div class="flex-shrink-0 flex items-center">
                    <a href="{{ route('conference.show', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                        class="flex flex-col leading-none group">

                        <!-- Hosted By Label -->
                        <span class="text-xs font-medium tracking-widest text-white mb-1 uppercase"
                            style="font-size: 10px;">HOSTED BY</span>

                        @if(isset($conference) && isset($conference['logo_image']))
                            <!-- Image Logo if provided -->
                            <img src="{{ $conference['logo_image'] }}" alt="Conference Logo"
                                class="h-14 md:h-16 w-auto object-contain bg-white px-3 py-1.5 rounded-md shadow-sm">
                        @elseif(isset($conference) && isset($conference['logo_text']))
                            <!-- Text Logo from Data -->
                            <span
                                class="text-white font-bold text-2xl tracking-tighter group-hover:text-orange-500 transition-colors">
                                {{ explode(':', $conference['logo_text'])[0] ?? 'CONF' }}<span
                                    class="font-light text-orange-500">:</span>{{ explode(':', $conference['logo_text'])[1] ?? 'EVENT' }}
                            </span>
                        @else
                            <span class="text-white font-bold text-2xl tracking-tighter">GARI<span
                                    class="text-orange-500">.</span></span>
                        @endif
                    </a>
                </div>

                <!-- Desktop Menu -->
                <div class="hidden lg:flex items-center space-x-6">
                    <!-- Call for Papers Dropdown -->
                    <div class="relative group" x-data="{ open: false }" @click.outside="open = false">
                        <button @click="open = !open"
                            class="nav-main-link font-semibold tracking-widest text-white hover:text-orange-500 transition-colors capitalize flex items-center focus:outline-none py-2">
                            Call for Papers
                            <i class="fas fa-chevron-down ml-1.5 text-[10px] opacity-70 transition-transform duration-300"
                                :class="open ? 'rotate-180' : ''"></i>
                        </button>
                        <div x-show="open" x-cloak x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 translate-y-2"
                            x-transition:enter-end="opacity-100 translate-y-0"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 translate-y-0"
                            x-transition:leave-end="opacity-0 translate-y-2"
                            class="absolute top-full left-0 mt-4 w-56 bg-white rounded-xl shadow-[0_15px_40px_-10px_rgba(0,0,0,0.3)] border border-gray-100 py-3 z-[150] before:absolute before:content-[''] before:-top-2 before:left-8 before:w-4 before:h-4 before:bg-white before:rotate-45 before:border-l before:border-t before:border-gray-100">
                            <a href="{{ route('conference.call-for-papers', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Call
                                for Papers</a>
                            <a href="#scopes"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Scopes</a>
                            <a href="#important-dates"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Important
                                Dates</a>
                            <a href="{{ route('conference.registration-fees', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Registration
                                Fees</a>
                        </div>
                    </div>

                    <!-- About Dropdown -->
                    <div class="relative group" x-data="{ open: false }" @click.outside="open = false">
                        <button @click="open = !open"
                            class="nav-main-link font-semibold tracking-widest text-white hover:text-orange-500 transition-colors capitalize flex items-center focus:outline-none py-2">
                            About
                            <i class="fas fa-chevron-down ml-1.5 text-[10px] opacity-70 transition-transform duration-300"
                                :class="open ? 'rotate-180' : ''"></i>
                        </button>
                        <div x-show="open" x-cloak x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 translate-y-2"
                            x-transition:enter-end="opacity-100 translate-y-0"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 translate-y-0"
                            x-transition:leave-end="opacity-0 translate-y-2"
                            class="absolute top-full left-0 mt-4 w-56 bg-white rounded-xl shadow-[0_15px_40px_-10px_rgba(0,0,0,0.3)] border border-gray-100 py-3 z-[150] before:absolute before:content-[''] before:-top-2 before:left-8 before:w-4 before:h-4 before:bg-white before:rotate-45 before:border-l before:border-t before:border-gray-100">
                            <a href="#program-schedule"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Program
                                Schedule</a>
                            <a href="#abstract-guidelines"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Abstract
                                Guidelines</a>
                            <a href="#full-paper-guidelines"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Full
                                Paper Guidelines</a>
                            <a href="#participation-opportunities"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Participation
                                Opportunities</a>
                            <a href="#organizing-team"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Organizing
                                Team</a>
                            <a href="#co-chair-and-keynote"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Co-chair
                                and Keynote</a>
                            <a href="#scientific-committee"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Scientific
                                Committee</a>
                            <a href="#academic-partners"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Academic
                                Partners</a>
                            <a href="#presentation-guidelines"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Presentation
                                Guidelines</a>
                            <a href="#history"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">History</a>
                            <a href="#sponsors"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Sponsors</a>
                        </div>
                    </div>
                    <a href="{{ route('conference.abstract-submission', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                        class="nav-main-link font-semibold tracking-widest text-white hover:text-orange-500 transition-colors capitalize whitespace-nowrap">Paper
                        / Abstract Submission</a>

                    <!-- Journal & Publications Dropdown -->
                    <div class="relative group" x-data="{ open: false }" @click.outside="open = false">
                        <button @click="open = !open"
                            class="nav-main-link font-semibold tracking-widest text-white hover:text-orange-500 transition-colors capitalize flex items-center focus:outline-none py-2">
                            Journal & Publications
                            <i class="fas fa-chevron-down ml-1.5 text-[10px] opacity-70 transition-transform duration-300"
                                :class="open ? 'rotate-180' : ''"></i>
                        </button>
                        <div x-show="open" x-cloak x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 translate-y-2"
                            x-transition:enter-end="opacity-100 translate-y-0"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 translate-y-0"
                            x-transition:leave-end="opacity-0 translate-y-2"
                            class="absolute top-full left-0 mt-4 w-56 bg-white rounded-xl shadow-[0_15px_40px_-10px_rgba(0,0,0,0.3)] border border-gray-100 py-3 z-[150] before:absolute before:content-[''] before:-top-2 before:left-8 before:w-4 before:h-4 before:bg-white before:rotate-45 before:border-l before:border-t before:border-gray-100">
                            <a href="#journal-publications"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Journal
                                & Publications</a>
                            <a href="#past-proceedings"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Past
                                Proceedings</a>
                        </div>
                    </div>

                    <!-- Help Desk Dropdown -->
                    <div class="relative group" x-data="{ open: false }" @click.outside="open = false">
                        <button @click="open = !open"
                            class="nav-main-link font-semibold tracking-widest text-white hover:text-orange-500 transition-colors capitalize flex items-center focus:outline-none py-2">
                            Help Desk
                            <i class="fas fa-chevron-down ml-1.5 text-[10px] opacity-70 transition-transform duration-300"
                                :class="open ? 'rotate-180' : ''"></i>
                        </button>
                        <div x-show="open" x-cloak x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 translate-y-2"
                            x-transition:enter-end="opacity-100 translate-y-0"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 translate-y-0"
                            x-transition:leave-end="opacity-0 translate-y-2"
                            class="absolute top-full right-0 mt-4 w-56 bg-white rounded-xl shadow-[0_15px_40px_-10px_rgba(0,0,0,0.3)] border border-gray-100 py-3 z-[150] before:absolute before:content-[''] before:-top-2 before:right-8 before:w-4 before:h-4 before:bg-white before:rotate-45 before:border-l before:border-t before:border-gray-100">
                            <a href="{{ route('conference.contact-us', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Contact
                                Us</a>
                            <a href="{{ route('conference.visa', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Visa Apply</a>
                            <a href="{{ route('conference.accommodations', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Accommodation</a>
                            <a href="{{ route('conference.tour', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Conference
                                Tour</a>
                            <a href="#venue-travel-info"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Venue
                                & Travel Info</a>
                            <a href="#upcoming-conferences"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Upcoming
                                Conferences</a>
                            <a href="#testimonials"
                                class="block px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-500 transition-colors">Testimonials</a>
                        </div>
                    </div>

                    <!-- Desktop Right Menu Toggle Button -->
                    <button @click="rightMenuOpen = true"
                        class="text-white hover:text-orange-500 transition-colors focus:outline-none ml-4">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>

                <!-- Mobile Menu Buttons -->
                <div class="lg:hidden flex items-center space-x-6">
                    <!-- Right Offcanvas Menu Button (Sub Conferences & Main Menus) -->
                    <button @click="rightMenuOpen = true"
                        class="text-white text-xl focus:outline-none flex transition-colors hover:text-orange-500">
                        <i class="fas fa-th-large"></i>
                    </button>
                    <!-- Local Page Mobile Menu Button -->
                    <button @click="mobileOpen = !mobileOpen"
                        class="text-white text-2xl focus:outline-none transition-colors hover:text-orange-500">
                        <i class="fas" :class="mobileOpen ? 'fa-times' : 'fa-bars'"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile Menu Overlay -->
        <div x-show="mobileOpen" x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 -translate-y-4" x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 -translate-y-4"
            class="lg:hidden absolute top-full left-0 w-full bg-black/95 backdrop-blur-xl border-t border-white/10 py-8 px-6 flex flex-col space-y-5 shadow-2xl max-h-[85vh] overflow-y-auto custom-scrollbar">

            <!-- Mobile About Dropdown -->
            <div x-data="{ open: false }" class="flex flex-col space-y-3">
                <button @click="open = !open"
                    class="flex items-center justify-between text-white text-base font-medium hover:text-orange-500 capitalize focus:outline-none">
                    About
                    <i class="fas fa-chevron-down text-sm transition-transform duration-300"
                        :class="open ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="open" x-collapse.duration.300ms
                    class="flex flex-col space-y-3 pl-4 border-l-2 border-orange-500/50">
                    <a href="#program-schedule" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Program Schedule</a>
                    <a href="#abstract-guidelines" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Abstract Guidelines</a>
                    <a href="#full-paper-guidelines" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Full Paper Guidelines</a>
                    <a href="#participation-opportunities" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Participation Opportunities</a>
                    <a href="#organizing-team" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Organizing Team</a>
                    <a href="#co-chair-and-keynote" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Co-chair and Keynote</a>
                    <a href="#scientific-committee" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Scientific Committee</a>
                    <a href="#academic-partners" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Academic Partners</a>
                    <a href="#presentation-guidelines" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Presentation Guidelines</a>
                    <a href="#history" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">History</a>
                    <a href="#sponsors" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Sponsors</a>
                </div>
            </div>

            <a href="{{ route('conference.call-for-papers', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                @click="mobileOpen = false"
                class="text-white text-base font-medium hover:text-orange-500 capitalize">Call for Papers</a>
            <a href="{{ route('conference.abstract-submission', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                @click="mobileOpen = false"
                class="text-white text-base font-medium hover:text-orange-500 capitalize">Paper / Abstract
                Submission</a>

            <!-- Mobile Journal & Publications Dropdown -->
            <div x-data="{ open: false }" class="flex flex-col space-y-3">
                <button @click="open = !open"
                    class="flex items-center justify-between text-white text-base font-medium hover:text-orange-500 capitalize focus:outline-none">
                    Journal & Publications
                    <i class="fas fa-chevron-down text-sm transition-transform duration-300"
                        :class="open ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="open" x-collapse.duration.300ms
                    class="flex flex-col space-y-3 pl-4 border-l-2 border-orange-500/50">
                    <a href="#journal-publications" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Journal & Publications</a>
                    <a href="#past-proceedings" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Past Proceedings</a>
                </div>
            </div>

            <!-- Mobile Help Desk Dropdown -->
            <div x-data="{ open: false }" class="flex flex-col space-y-3">
                <button @click="open = !open"
                    class="flex items-center justify-between text-white text-base font-medium hover:text-orange-500 capitalize focus:outline-none">
                    Help Desk
                    <i class="fas fa-chevron-down text-sm transition-transform duration-300"
                        :class="open ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="open" x-collapse.duration.300ms
                    class="flex flex-col space-y-3 pl-4 border-l-2 border-orange-500/50">
                    <a href="{{ route('conference.contact-us', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Contact Us</a>
                    <a href="{{ route('conference.visa', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Visa Apply</a>
                    <a href="{{ route('conference.accommodations', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Accommodation</a>
                    <a href="{{ route('conference.tour', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Conference Tour</a>
                    <a href="#venue-travel-info" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Venue & Travel Info</a>
                    <a href="#upcoming-conferences" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Upcoming Conferences</a>
                    <a href="#testimonials" @click="mobileOpen = false"
                        class="text-white text-sm hover:text-orange-500 font-medium">Testimonials</a>
                </div>
            </div>

        </div>

        <!-- Right Hide Menu (Offcanvas) -->
        <div x-show="rightMenuOpen" class="fixed inset-0" style="display: none; z-index: 200;" x-cloak>
            <!-- Premium Backdrop blur -->
            <div x-show="rightMenuOpen"
                x-transition:enter="ease-[cubic-bezier(0.19,1,0.22,1)] duration-700 transition-opacity"
                x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in-out duration-500 transition-opacity" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0" class="fixed inset-0 bg-black/40 backdrop-blur-md"
                @click="rightMenuOpen = false"></div>

            <!-- Premium Sidebar -->
            <div x-show="rightMenuOpen"
                x-transition:enter="ease-[cubic-bezier(0.19,1,0.22,1)] duration-700 transition transform"
                x-transition:enter-start="translate-x-full shadow-none"
                x-transition:enter-end="translate-x-0 shadow-[-20px_0_60px_-15px_rgba(0,0,0,0.3)]"
                x-transition:leave="ease-[cubic-bezier(0.19,1,0.22,1)] duration-500 transition transform"
                x-transition:leave-start="translate-x-0 shadow-[-20px_0_60px_-15px_rgba(0,0,0,0.3)]"
                x-transition:leave-end="translate-x-full shadow-none"
                class="fixed right-0 w-full max-w-sm sm:w-[400px] bg-white/95 backdrop-blur-3xl overflow-hidden flex flex-col border-l border-white/20"
                style="top: 36px; bottom: 0; z-index: 210;">

                <!-- Header -->
                <div class="flex items-center justify-between px-8 py-6 border-b border-gray-100/50">
                    <h2 class="text-2xl font-bold font-serif text-gray-900 tracking-tight">Navigation</h2>
                    <button @click="rightMenuOpen = false"
                        class="text-gray-400 hover:text-orange-500 group transition-all duration-300 focus:outline-none w-10 h-10 flex items-center justify-center rounded-full hover:bg-orange-50 bg-gray-50 border border-gray-100">
                        <i
                            class="fas fa-times text-lg transform group-hover:rotate-90 transition-transform duration-300"></i>
                    </button>
                </div>

                <div class="px-8 py-6 overflow-y-auto flex-1 custom-scrollbar space-y-1">

                    <!-- About -->
                    <div x-data="{ open: false }" class="border-b border-gray-100/60 py-3">
                        <button @click="open = !open"
                            class="flex items-center justify-between w-full font-bold text-gray-900 hover:text-orange-500 transition-all duration-300 group">
                            <span
                                class="text-[17px] flex items-center gap-4 group-hover:translate-x-1 transition-transform duration-300">
                                <i
                                    class="fas fa-layer-group text-gray-400 group-hover:text-orange-400 w-5 transition-colors duration-300"></i>
                                About
                            </span>
                            <i class="fas fa-chevron-down text-xs transition-transform duration-500 ease-out text-gray-400 group-hover:text-orange-500"
                                :class="open ? '-rotate-180' : ''"></i>
                        </button>
                        <div x-show="open" x-collapse.duration.400ms>
                            <ul class="mt-4 pl-9 space-y-3 pb-2 border-l-2 border-orange-100/50 ml-[11px]">
                                <li><a href="#program-schedule"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Program
                                        Schedule</a></li>
                                <li><a href="#abstract-guidelines"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Abstract
                                        Guidelines</a></li>
                                <li><a href="#full-paper-guidelines"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Full
                                        Paper Guidelines</a></li>
                                <li><a href="#participation-opportunities"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Participation
                                        Opportunities</a></li>
                                <li><a href="#organizing-team"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Organizing
                                        Team</a></li>
                                <li><a href="#co-chair-and-keynote"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Co-chair
                                        and Keynote</a></li>
                                <li><a href="#scientific-committee"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Scientific
                                        Committee</a></li>
                                <li><a href="#academic-partners"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Academic
                                        Partners</a></li>
                                <li><a href="#presentation-guidelines"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Presentation
                                        Guidelines</a></li>
                                <li><a href="#history"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>History</a>
                                </li>
                                <li><a href="#sponsors"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Sponsors</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Speakers -->
                    <div x-data="{ open: false }" class="border-b border-gray-100/60 py-3">
                        <button @click="open = !open"
                            class="flex items-center justify-between w-full font-bold text-gray-900 hover:text-orange-500 transition-all duration-300 group">
                            <span
                                class="text-[17px] flex items-center gap-4 group-hover:translate-x-1 transition-transform duration-300">
                                <i
                                    class="fas fa-bullhorn text-gray-400 group-hover:text-orange-400 w-5 transition-colors duration-300"></i>
                                Speakers
                            </span>
                            <i class="fas fa-chevron-down text-xs transition-transform duration-500 ease-out text-gray-400 group-hover:text-orange-500"
                                :class="open ? '-rotate-180' : ''"></i>
                        </button>
                        <div x-show="open" x-collapse.duration.400ms>
                            <ul class="mt-4 pl-9 space-y-3 pb-2 border-l-2 border-orange-100/50 ml-[11px]">
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Co-chairs
                                        & Keynote</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Presenters
                                        - Upcoming</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Scientific
                                        Committee</a></li>
                            </ul>
                        </div>
                    </div>

                    <!-- About -->
                    <div x-data="{ open: false }" class="border-b border-gray-100/60 py-3">
                        <button @click="open = !open"
                            class="flex items-center justify-between w-full font-bold text-gray-900 hover:text-orange-500 transition-all duration-300 group">
                            <span
                                class="text-[17px] flex items-center gap-4 group-hover:translate-x-1 transition-transform duration-300">
                                <i
                                    class="fas fa-info-circle text-gray-400 group-hover:text-orange-400 w-5 transition-colors duration-300"></i>
                                About
                            </span>
                            <i class="fas fa-chevron-down text-xs transition-transform duration-500 ease-out text-gray-400 group-hover:text-orange-500"
                                :class="open ? '-rotate-180' : ''"></i>
                        </button>
                        <div x-show="open" x-collapse.duration.400ms>
                            <ul class="mt-4 pl-9 space-y-3 pb-2 border-l-2 border-orange-100/50 ml-[11px]">
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>About
                                        GARI</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Advisory
                                        Team</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>GARI
                                        Publications</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Journal
                                        Partners</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Academic
                                        Partners</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Country
                                        Ambassador</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Organizing
                                        Teams</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>CSR
                                        Project</a></li>
                            </ul>
                        </div>
                    </div>

                    <!-- Registration -->
                    <div x-data="{ open: false }" class="border-b border-gray-100/60 py-3">
                        <button @click="open = !open"
                            class="flex items-center justify-between w-full font-bold text-gray-900 hover:text-orange-500 transition-all duration-300 group">
                            <span
                                class="text-[17px] flex items-center gap-4 group-hover:translate-x-1 transition-transform duration-300">
                                <i
                                    class="fas fa-ticket-alt text-gray-400 group-hover:text-orange-400 w-5 transition-colors duration-300"></i>
                                Registration
                            </span>
                            <i class="fas fa-chevron-down text-xs transition-transform duration-500 ease-out text-gray-400 group-hover:text-orange-500"
                                :class="open ? '-rotate-180' : ''"></i>
                        </button>
                        <div x-show="open" x-collapse.duration.400ms>
                            <ul class="mt-4 pl-9 space-y-3 pb-2 border-l-2 border-orange-100/50 ml-[11px]">
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Presenter
                                        / Participant</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Co-Chair
                                        / Keynote</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Scientific
                                        Reviewer</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Apply
                                        for Journal Editorial Board</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Media
                                        Partner Apply</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Sponsor
                                        Apply</a></li>
                            </ul>
                        </div>
                    </div>

                    <!-- Research Library -->
                    <div x-data="{ open: false }" class="border-b border-gray-100/60 py-3">
                        <button @click="open = !open"
                            class="flex items-center justify-between w-full font-bold text-gray-900 hover:text-orange-500 transition-all duration-300 group">
                            <span
                                class="text-[17px] flex items-center gap-4 group-hover:translate-x-1 transition-transform duration-300">
                                <i
                                    class="fas fa-book-reader text-gray-400 group-hover:text-orange-400 w-5 transition-colors duration-300"></i>
                                Research Library
                            </span>
                            <i class="fas fa-chevron-down text-xs transition-transform duration-500 ease-out text-gray-400 group-hover:text-orange-500"
                                :class="open ? '-rotate-180' : ''"></i>
                        </button>
                        <div x-show="open" x-collapse.duration.400ms>
                            <ul class="mt-4 pl-9 space-y-3 pb-2 border-l-2 border-orange-100/50 ml-[11px]">
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Library</a>
                                </li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Past
                                        Proceedings</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Abstract
                                        Guideline</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Full
                                        Paper Guideline</a></li>
                            </ul>
                        </div>
                    </div>

                    <!-- History -->
                    <div x-data="{ open: false }" class="border-b border-gray-100/60 py-3">
                        <button @click="open = !open"
                            class="flex items-center justify-between w-full font-bold text-gray-900 hover:text-orange-500 transition-all duration-300 group">
                            <span
                                class="text-[17px] flex items-center gap-4 group-hover:translate-x-1 transition-transform duration-300">
                                <i
                                    class="fas fa-history text-gray-400 group-hover:text-orange-400 w-5 transition-colors duration-300"></i>
                                History
                            </span>
                            <i class="fas fa-chevron-down text-xs transition-transform duration-500 ease-out text-gray-400 group-hover:text-orange-500"
                                :class="open ? '-rotate-180' : ''"></i>
                        </button>
                        <div x-show="open" x-collapse.duration.400ms>
                            <ul class="mt-4 pl-9 space-y-3 pb-2 border-l-2 border-orange-100/50 ml-[11px]">
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Past
                                        Conferences</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Past
                                        Speakers</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Past
                                        Presenters</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Video
                                        Gallery</a></li>
                                <li><a href="#"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Image
                                        Gallery</a></li>
                            </ul>
                        </div>
                    </div>

                    <!-- Help Desk -->
                    <div x-data="{ open: false }" class="border-b border-gray-100/60 py-3">
                        <button @click="open = !open"
                            class="flex items-center justify-between w-full font-bold text-gray-900 hover:text-orange-500 transition-all duration-300 group">
                            <span
                                class="text-[17px] flex items-center gap-4 group-hover:translate-x-1 transition-transform duration-300">
                                <i
                                    class="fas fa-headset text-gray-400 group-hover:text-orange-400 w-5 transition-colors duration-300"></i>
                                Help Desk
                            </span>
                            <i class="fas fa-chevron-down text-xs transition-transform duration-500 ease-out text-gray-400 group-hover:text-orange-500"
                                :class="open ? '-rotate-180' : ''"></i>
                        </button>
                        <div x-show="open" x-collapse.duration.400ms>
                            <ul class="mt-4 pl-9 space-y-3 pb-2 border-l-2 border-orange-100/50 ml-[11px]">
                                <li><a href="{{ route('conference.contact-us', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Contact
                                        Us</a></li>
                                <li><a href="{{ route('conference.visa', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Visa
                                        Apply</a></li>
                                <li><a href="{{ route('conference.accommodations', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Accommodation</a>
                                </li>
                                <li><a href="{{ route('conference.tour', ['slug' => $conference['slug'] ?? request()->segment(2) ?? '']) }}"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Conference Tour</a>
                                </li>
                                <li><a href="#venue-travel-info"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>Venue & Travel</a>
                                </li>
                                <li><a href="#faq"
                                        class="flex items-center text-gray-600 hover:text-orange-500 transition-all duration-300 text-sm font-medium hover:translate-x-1 relative"><span
                                            class="absolute -left-[19px] w-2 h-2 rounded-full bg-orange-200 border-2 border-white"></span>FAQ</a>
                                </li>
                            </ul>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main>
        {{ $slot }}
    </main>

    <!-- Footer -->
    <footer class="bg-black text-white pt-24 pb-12 border-t border-white/5 relative overflow-hidden">
        <!-- Background Glow -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
            <div class="absolute -top-24 -right-24 w-96 h-96 bg-orange-600/10 rounded-full blur-3xl"></div>
            <div class="absolute bottom-0 left-0 w-full h-64 bg-gradient-to-t from-black to-transparent"></div>
        </div>

        <div class="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-16 mb-20">
                <div class="col-span-1 md:col-span-1">
                    @if(isset($conference) && isset($conference['logo_text']))
                        <h3 class="text-3xl font-bold tracking-tighter mb-8">
                            {{ explode(':', $conference['logo_text'])[0] ?? 'CONF' }}<span
                                class="text-orange-500">:</span>{{ explode(':', $conference['logo_text'])[1] ?? 'EVENT' }}
                        </h3>
                    @else
                        <h3 class="text-3xl font-bold tracking-tighter mb-8">GARI<span class="text-orange-500">.</span></h3>
                    @endif
                    <p class="text-gray-400 text-sm leading-relaxed mb-8">
                        We are shaping the future of global academic collaboration. providing a platform for innovation
                        and excellence.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#"
                            class="w-10 h-10 flex items-center justify-center rounded-full bg-white/5 hover:bg-orange-500 hover:text-white transition-all duration-300"><i
                                class="fab fa-twitter"></i></a>
                        <a href="#"
                            class="w-10 h-10 flex items-center justify-center rounded-full bg-white/5 hover:bg-orange-500 hover:text-white transition-all duration-300"><i
                                class="fab fa-linkedin-in"></i></a>
                        <a href="#"
                            class="w-10 h-10 flex items-center justify-center rounded-full bg-white/5 hover:bg-orange-500 hover:text-white transition-all duration-300"><i
                                class="fab fa-instagram"></i></a>
                    </div>
                </div>

                <div>
                    <h4 class="text-sm font-bold capitalize tracking-widest mb-8 text-white">Platform</h4>
                    <ul class="space-y-4 text-gray-400 text-sm font-medium">
                        <li><a href="#" class="hover:text-orange-500 transition-colors">Program</a></li>
                        <li><a href="#" class="hover:text-orange-500 transition-colors">Speakers</a></li>
                        <li><a href="#" class="hover:text-orange-500 transition-colors">Sponsors</a></li>
                        <li><a href="#" class="hover:text-orange-500 transition-colors">Past Events</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-sm font-bold capitalize tracking-widest mb-8 text-white">Support</h4>
                    <ul class="space-y-4 text-gray-400 text-sm font-medium">
                        <li><a href="#" class="hover:text-orange-500 transition-colors">Contact Us</a></li>
                        <li><a href="#" class="hover:text-orange-500 transition-colors">FAQ</a></li>
                        <li><a href="#" class="hover:text-orange-500 transition-colors">Privacy Policy</a></li>
                        <li><a href="#" class="hover:text-orange-500 transition-colors">Terms of Service</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-sm font-bold capitalize tracking-widest mb-8 text-white">Subscribe</h4>
                    <p class="text-gray-400 text-sm mb-6">Get the latest updates and offers.</p>
                    <form class="flex border-b border-gray-700 pb-2">
                        <input type="email" placeholder="Email address"
                            class="bg-transparent border-none focus:ring-0 text-white placeholder-gray-500 w-full px-0">
                        <button type="button"
                            class="text-orange-500 hover:text-white transition-colors font-bold capitalize text-xs">Join</button>
                    </form>
                </div>
            </div>

            <div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="text-xs text-gray-500 capitalize tracking-wider">&copy; {{ date('Y') }} GARI Conference. All
                    rights reserved.</p>
                <div class="flex items-center gap-2">
                    <div class="h-1 w-1 rounded-full bg-green-500"></div>
                    <span class="text-xs text-gray-400">System Operational</span>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>