<nav x-data="{
        scrolled: false,
        mobileMenuOpen: false,
        academicsOpen: false
    }"
    @scroll.window="scrolled = (window.pageYOffset > 20)"
    :class="scrolled ? 'shadow-md' : 'shadow-sm'"
    class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 bg-white/95 backdrop-blur-sm">

    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-20">

            
            <a href="https://sushmasecondary.edu.np" class="flex items-center gap-3 group">
                <div class="w-16 h-16 sm:w-20 sm:h-20 bg-[#f7f7f9] rounded-xl flex items-center justify-center">
                    <img src="https://sushmasecondary.edu.np/assets/image/sushma_logo.png" alt="Sushma Secondary School Logo"
                        class="w-[60px] h-[60px] sm:w-[72px] sm:h-[72px] object-contain group-hover:scale-110 transition-transform duration-300">
                </div>
                <div class="hidden sm:flex sm:flex-col sm:justify-center">
                    <span class="font-bold text-lg text-gray-900 leading-tight tracking-tight">Sushma Secondary School</span>
                    <span class="text-[11px] text-gray-500 font-medium">Fostering Excellence, Inspiring Futures</span>
                </div>
            </a>

            
            <div class="hidden lg:flex items-center gap-6">
                <a href="https://sushmasecondary.edu.np"
                    class="text-[14px] transition-all duration-200 text-gray-700 font-medium hover:text-red-600 hover:font-bold hover:underline">Home</a>
                <a href="https://sushmasecondary.edu.np/about"
                    class="text-[14px] transition-all duration-200 text-gray-700 font-medium hover:text-red-600 hover:font-bold hover:underline">About</a>

                
                <div class="relative" @mouseenter="academicsOpen = true" @mouseleave="academicsOpen = false">
                    <button class="flex items-center gap-1 text-[14px] transition-all duration-200 outline-none text-gray-700 font-medium hover:text-red-600 hover:font-bold hover:underline">
                        Academics
                        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>
                    <div x-show="academicsOpen"
                        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 left-0 mt-2 w-56 bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden"
                        style="display:none;">
                        <div class="p-2">
                            <a href="https://sushmasecondary.edu.np/academics/elementary" class="block px-4 py-3 rounded-lg hover:bg-red-50 transition-all duration-200 group">
                                <div class="text-gray-900 text-sm font-medium group-hover:text-red-600 group-hover:font-bold group-hover:underline transition-all">Kids School</div>
                                <div class="text-xs text-gray-500 mt-0.5">Nursery - Grade 3</div>
                            </a>
                            <a href="https://sushmasecondary.edu.np/academics/primary" class="block px-4 py-3 rounded-lg hover:bg-red-50 transition-all duration-200 group">
                                <div class="text-gray-900 text-sm font-medium group-hover:text-red-600 group-hover:font-bold group-hover:underline transition-all">Middle School</div>
                                <div class="text-xs text-gray-500 mt-0.5">Grade 4 - 8</div>
                            </a>
                            <a href="https://sushmasecondary.edu.np/academics/secondary" class="block px-4 py-3 rounded-lg hover:bg-red-50 transition-all duration-200 group">
                                <div class="text-gray-900 text-sm font-medium group-hover:text-red-600 group-hover:font-bold group-hover:underline transition-all">High School</div>
                                <div class="text-xs text-gray-500 mt-0.5">Grade 9 - 12</div>
                            </a>
                        </div>
                    </div>
                </div>

                <a href="https://sushmasecondary.edu.np/admissions"
                    class="text-[14px] transition-all duration-200 text-gray-700 font-medium hover:text-red-600 hover:font-bold hover:underline">Admissions</a>
                <a href="https://sushmasecondary.edu.np/news"
                    class="text-[14px] transition-all duration-200 text-gray-700 font-medium hover:text-red-600 hover:font-bold hover:underline">News & Events</a>
                <a href="https://sushmasecondary.edu.np/gallery"
                    class="text-[14px] transition-all duration-200 text-gray-700 font-medium hover:text-red-600 hover:font-bold hover:underline">Gallery</a>
                <a href="https://sushmasecondary.edu.np/faculty"
                    class="text-[14px] transition-all duration-200 text-gray-700 font-medium hover:text-red-600 hover:font-bold hover:underline">Faculty</a>
                <a href="https://sushmasecondary.edu.np/contact"
                    class="text-[14px] transition-all duration-200 text-gray-700 font-medium hover:text-red-600 hover:font-bold hover:underline">Contact</a>

                <a href="https://sushmasecondary.edu.np/admissions"
                    class="ml-2 px-5 py-2.5 text-[14px] bg-[#1a5632] text-white rounded-full font-medium transition-all duration-300 shadow-sm hover:bg-red-600">
                    Enroll Now
                </a>
            </div>

            
            <button @click="mobileMenuOpen = !mobileMenuOpen"
                class="lg:hidden p-2 text-gray-600 rounded-lg hover:bg-gray-100 transition-colors focus:outline-none"
                aria-label="Toggle menu">
                <svg x-show="!mobileMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
                <svg x-show="mobileMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display:none;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
    </div>

    
    
    
    
    <div class="border-t border-gray-100 bg-[#1a5632]">
        <div class="flex items-stretch">

            
            <div class="flex-shrink-0 flex items-center gap-2 px-4 bg-[#e2a024] text-[#0b2415] font-bold text-xs uppercase tracking-widest select-none">
                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                </svg>
                <span class="hidden sm:inline">Notice</span>
            </div>

            
            <div class="flex-1 overflow-hidden relative py-1.5" style="min-width:0;">

                
                <div class="absolute left-0 top-0 bottom-0 w-8 z-10 pointer-events-none"
                     style="background: linear-gradient(to right, #1a5632, transparent);"></div>
                <div class="absolute right-0 top-0 bottom-0 w-8 z-10 pointer-events-none"
                     style="background: linear-gradient(to left, #1a5632, transparent);"></div>

                
                <div class="ticker-wrapper flex items-center whitespace-nowrap">
                    
                    <div class="ticker-track flex items-center gap-0 animate-ticker">
                                                <a href="/admissions"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Admission Open for 2081 BS — Apply Now!
                            </span>
                            
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 1, 2081
                            </span>
                        </a>
                                                <a href="/news"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Annual Sports Day — Baisakh 5, 2081
                            </span>
                            
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 5, 2081
                            </span>
                        </a>
                                                <a href="/news"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Parent-Teacher Meeting scheduled for Baisakh 10
                            </span>
                            
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 8, 2081
                            </span>
                        </a>
                                                <a href="/news"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Grade 10 Board Exam Preparation Workshop
                            </span>
                            
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 12, 2081
                            </span>
                        </a>
                                                <a href="/news"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Cultural Program — celebrating diversity
                            </span>
                            
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 15, 2081
                            </span>
                        </a>
                                                <a href="/news"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Science Exhibition: Register before Baisakh 3
                            </span>
                            
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 18, 2081
                            </span>
                        </a>
                                            </div>
                    
                    <div class="ticker-track flex items-center gap-0 animate-ticker" aria-hidden="true">
                                                <a href="/admissions"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Admission Open for 2081 BS — Apply Now!
                            </span>
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 1, 2081
                            </span>
                        </a>
                                                <a href="/news"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Annual Sports Day — Baisakh 5, 2081
                            </span>
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 5, 2081
                            </span>
                        </a>
                                                <a href="/news"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Parent-Teacher Meeting scheduled for Baisakh 10
                            </span>
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 8, 2081
                            </span>
                        </a>
                                                <a href="/news"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Grade 10 Board Exam Preparation Workshop
                            </span>
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 12, 2081
                            </span>
                        </a>
                                                <a href="/news"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Cultural Program — celebrating diversity
                            </span>
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 15, 2081
                            </span>
                        </a>
                                                <a href="/news"
                           class="inline-flex items-center gap-3 px-6 group cursor-pointer">
                            <span class="w-1.5 h-1.5 rounded-full bg-[#e2a024] flex-shrink-0 opacity-70"></span>
                            <span class="text-white text-xs font-medium group-hover:text-[#e2a024] transition-colors duration-200">
                                Science Exhibition: Register before Baisakh 3
                            </span>
                            <span class="text-[10px] font-semibold text-white/50 bg-white/10 px-2 py-0.5 rounded-full flex-shrink-0 group-hover:bg-[#e2a024]/20 group-hover:text-[#e2a024] transition-colors duration-200">
                                Chaitra 18, 2081
                            </span>
                        </a>
                                            </div>
                </div>
            </div>

            
            <a href="/news"
               class="flex-shrink-0 flex items-center gap-1.5 px-4 text-[#e2a024] text-xs font-bold hover:bg-white/10 transition-colors border-l border-white/10 select-none whitespace-nowrap">
                <span class="hidden sm:inline">View All</span>
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
        </div>
    </div>

    
    <div x-show="mobileMenuOpen"
        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="lg:hidden bg-white border-t border-gray-100 overflow-hidden shadow-lg absolute w-full"
        style="display:none;">
        <div class="px-4 py-4 space-y-1">
            <a href="https://sushmasecondary.edu.np" class="block px-4 py-3 rounded-lg transition-all duration-200 text-gray-700 font-medium hover:bg-red-50 hover:text-red-600 hover:font-bold hover:underline text-sm">Home</a>
            <a href="https://sushmasecondary.edu.np/about" class="block px-4 py-3 rounded-lg transition-all duration-200 text-gray-700 font-medium hover:bg-red-50 hover:text-red-600 hover:font-bold hover:underline text-sm">About</a>
            <a href="https://sushmasecondary.edu.np/academics" class="block px-4 py-3 rounded-lg transition-all duration-200 text-gray-700 font-medium hover:bg-red-50 hover:text-red-600 hover:font-bold hover:underline text-sm">Academics</a>
            <a href="https://sushmasecondary.edu.np/admissions" class="block px-4 py-3 rounded-lg transition-all duration-200 text-gray-700 font-medium hover:bg-red-50 hover:text-red-600 hover:font-bold hover:underline text-sm">Admissions</a>
            <a href="https://sushmasecondary.edu.np/news" class="block px-4 py-3 rounded-lg transition-all duration-200 text-gray-700 font-medium hover:bg-red-50 hover:text-red-600 hover:font-bold hover:underline text-sm">News & Events</a>
            <a href="https://sushmasecondary.edu.np/gallery" class="block px-4 py-3 rounded-lg transition-all duration-200 text-gray-700 font-medium hover:bg-red-50 hover:text-red-600 hover:font-bold hover:underline text-sm">Gallery</a>
            <a href="https://sushmasecondary.edu.np/faculty" class="block px-4 py-3 rounded-lg transition-all duration-200 text-gray-700 font-medium hover:bg-red-50 hover:text-red-600 hover:font-bold hover:underline text-sm">Faculty</a>
            <a href="https://sushmasecondary.edu.np/contact" class="block px-4 py-3 rounded-lg transition-all duration-200 text-gray-700 font-medium hover:bg-red-50 hover:text-red-600 hover:font-bold hover:underline text-sm">Contact</a>
            <a href="https://sushmasecondary.edu.np/admissions" class="block mt-4 mx-4 px-4 py-3 bg-[#1a5632] text-white rounded-xl font-medium text-center text-sm shadow-sm transition-all duration-300 hover:bg-red-600">
                Enroll Now
            </a>
        </div>
    </div>
</nav>




<style>
    /* Seamless left-scroll: moves exactly one copy-width (50%) then jumps back */
    @keyframes ticker-scroll {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    .ticker-wrapper {
        /* Both copies side by side = 2× content width */
        display: flex;
        width: max-content;
        animation: ticker-scroll 40s linear infinite;
    }

    /* Pause the whole wrapper on hover over any item inside the ticker area */
    .ticker-wrapper:hover {
        animation-play-state: paused;
    }

    /*
      Tailwind's `animate-ticker` won't exist unless added to tailwind.config.js,
      so we drive animation directly on .ticker-wrapper above.
      The two inner .ticker-track divs are plain flex rows — no animation on them.
    */
    .ticker-track {
        display: flex;
        align-items: center;
    }
</style>