bg-black text-white min-h-screen overflow-x-hidden

<div class="star-field" id="starField"></div>
    <div class="glow-orb glow-orb-1"></div>
    <div class="glow-orb glow-orb-2"></div>

    <div class="mobile-frame relative z-10 page-enter min-h-screen pb-24">

        <header class="flex items-center justify-between px-5 py-4">
            <a href="index.html" class="shrink-0 block"><img src="profilephoto/logo.png" alt="Virtuosic" class="w-24 h-24 rounded-2xl object-cover shimmer"></a>
            <div class="text-right">
                <p
                    class="font-outfit text-[13px] font-extrabold text-white tracking-wide leading-tight uppercase whitespace-nowrap">
                    SSPM's College of Engineering</p>
                <p class="text-[11px] text-zinc-500 font-medium tracking-widest mt-0.5 uppercase">Kankavli · Sindhudurg
                </p>
            </div>
        </header>

        
        <div class="flex flex-col items-center justify-start px-6 pt-2 pb-8 min-h-[calc(100vh-72px-96px)]">
            <span
                class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[10px] font-bold font-space uppercase tracking-[2px] mb-3 bg-gradient-to-r from-purple-500/20 via-cyan-500/20 to-pink-500/20 border border-purple-400/25 text-purple-200">
                Follow Virtuosic 2K26
            </span>
            <h1 class="font-anton text-[2.5rem] leading-none text-white uppercase tracking-wide text-center mb-2"
                style="text-shadow: 0 0 40px rgba(124,58,237,0.2);">
                Connect<br>With Us
            </h1>
            <p class="text-sm text-zinc-400 mb-6 text-center">Follow us for updates, behind-the-scenes & more!</p>
            <div class="w-full max-w-sm rounded-2xl p-4 border border-white/[0.06] bg-white/[0.01]">
                <div class="flex flex-col gap-4 w-full" id="social-links"></div>
            </div>
        </div>

        
        <nav class="nav-bar-fixed fixed bottom-0 left-0 right-0 h-[72px] bg-black/90 backdrop-blur-2xl border-t border-white/[0.04] flex items-center justify-around px-2 z-50"
            style="padding-bottom: env(safe-area-inset-bottom, 0px);">
            <a href="index.html" class="flex flex-col items-center gap-1 px-4 py-2">
                <svg class="w-[22px] h-[22px] text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                    <polyline points="9 22 9 12 15 12 15 22" />
                </svg>
                <span class="font-space text-[9px] font-bold uppercase tracking-widest text-zinc-600">Home</span>
            </a>
            <a href="competition.html" class="flex flex-col items-center gap-1 px-4 py-2">
                <svg class="w-[22px] h-[22px] text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                    <polygon
                        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                </svg>
                <span class="font-space text-[9px] font-bold uppercase tracking-widest text-zinc-600">Events</span>
            </a>
            <a href="contact.html" class="flex flex-col items-center gap-1 px-4 py-2">
                <svg class="w-[22px] h-[22px] text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                    <path
                        d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z" />
                </svg>
                <span class="font-space text-[9px] font-bold uppercase tracking-widest text-zinc-600">Contact</span>
            </a>
            <a href="social.html" class="relative flex flex-col items-center gap-1 px-4 py-2 nav-active">
                <svg class="w-[22px] h-[22px] text-purple-400"
                    style="filter: drop-shadow(0 0 8px rgba(168,85,247,0.5));" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="18" cy="5" r="3" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="19" r="3" />
                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
                </svg>
                <span class="font-space text-[9px] font-bold uppercase tracking-widest text-purple-400">Social</span>
            </a>
        </nav>
    </div>

ConnectWith Us

Connect
With Us