Animated Contact Section with Social Links

<div class="z-10 md:px-10 flex flex-col min-h-[85vh] w-full max-w-7xl mr-auto ml-auto pt-24 pr-6 pb-0 pl-6 relative justify-between">
        <!-- Top Navigation Row -->
        <div class="flex flex-col md:flex-row justify-between items-start w-full gap-12 border-b border-white/5 pb-12 animate-on-scroll [animation:fadeSlideIn_1s_cubic-bezier(0.2,0.8,0.2,1)_0.2s_both]">
          <!-- Left: Get In Touch Label -->
          <div class="flex items-center gap-3">
            <div class="flex items-center justify-center w-8 h-8 rounded-full bg-white/5 border border-white/10 text-orange-500 shadow-[0_0_15px_rgba(249,115,22,0.2)]">
              <!-- Solar Chat Round Dots Bold Duotone -->
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" class="">
                <circle cx="12" cy="12" r="10" fill="currentColor" fill-opacity="0.15" class=""></circle>
                <path d="M8 12C8 12.5523 7.55228 13 7 13C6.44772 13 6 12.5523 6 12C6 11.4477 6.44772 11 7 11C7.55228 11 8 11.4477 8 12Z" fill="currentColor" class=""></path>
                <path d="M13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z" fill="currentColor" class=""></path>
                <path d="M18 12C18 12.5523 17.5523 13 17 13C16.4477 13 16 12.5523 16 12C16 11.4477 16.4477 11 17 11C17.5523 11 18 11.4477 18 12Z" fill="currentColor" class=""></path>
              </svg>
            </div>
            <span class="text-xs font-bold tracking-[0.2em] uppercase text-neutral-400">
              Get In Touch
            </span>
          </div>

          <!-- Right: Links -->
          <div class="flex flex-wrap gap-8 md:gap-12 text-xs font-semibold tracking-widest uppercase text-neutral-500">
            <a href="#" class="hover:text-white transition-colors duration-300">
              Privacy &amp; Policy
            </a>
            <a href="#" class="hover:text-white transition-colors duration-300">
              Terms of Service
            </a>
            <span class="text-neutral-700">@2025 Lumina Creative Inc.</span>
          </div>
        </div>

        <!-- Middle Content: Contact Info -->
        <div class="flex flex-col gap-6 mt-16 mb-auto relative">
          <!-- Phone Number -->
          <div class="group/item relative flex flex-col items-start w-fit">
            <a href="tel:+18005550199" class="relative z-10 text-5xl md:text-7xl lg:text-8xl font-medium tracking-tighter text-white group-hover/item:text-transparent group-hover/item:bg-clip-text group-hover/item:bg-gradient-to-r group-hover/item:from-white group-hover/item:to-neutral-500 transition-all duration-500 animate-on-scroll [animation:fadeSlideIn_1s_cubic-bezier(0.2,0.8,0.2,1)_0.3s_both]">
              +1 800 555 0199
            </a>
            <div class="absolute -right-8 top-4 opacity-0 group-hover/item:opacity-100 transition-opacity duration-500 translate-x-2 group-hover/item:translate-x-0">
              <span class="flex items-center justify-center w-5 h-5 rounded bg-orange-500 text-[9px] font-bold text-black uppercase tracking-wider shadow-[0_0_15px_rgba(249,115,22,0.6)]">
                T
              </span>
            </div>
          </div>

          <!-- Email Address -->
          <div class="group/item relative flex flex-col items-start w-fit animate-on-scroll [animation:fadeSlideIn_1s_cubic-bezier(0.2,0.8,0.2,1)_0.5s_both]">
            <a href="mailto:hello@lumina.ai" class="relative z-10 text-5xl md:text-7xl lg:text-8xl font-medium tracking-tighter text-white group-hover/item:text-transparent group-hover/item:bg-clip-text group-hover/item:bg-gradient-to-r group-hover/item:from-white group-hover/item:to-neutral-500 transition-all duration-500 animate-on-scroll [animation:fadeSlideIn_1s_cubic-bezier(0.2,0.8,0.2,1)_0.4s_both]">
              HELLO@LUMINA.AI
            </a>
            <div class="absolute -right-8 top-4 opacity-0 group-hover/item:opacity-100 transition-opacity duration-500 translate-x-2 group-hover/item:translate-x-0">
              <span class="flex items-center justify-center w-5 h-5 rounded bg-orange-500 text-[9px] font-bold text-black uppercase tracking-wider shadow-[0_0_15px_rgba(249,115,22,0.6)]">
                E
              </span>
            </div>
          </div>

          <!-- Social Logos (Monotone SVG) -->
          <div class="flex items-center gap-8 mt-12 pl-1 animate-on-scroll [animation:fadeSlideIn_1s_cubic-bezier(0.2,0.8,0.2,1)_0.6s_both]">
            <!-- X (Twitter) -->
            <a href="#" class="text-neutral-600 hover:text-white transition-colors duration-300 transform hover:scale-110">
              <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
                <title class="">X</title>
                <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" class=""></path>
              </svg>
            </a>
            <!-- GitHub -->
            <a href="#" class="text-neutral-600 hover:text-white transition-colors duration-300 transform hover:scale-110">
              <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
                <title class="">GitHub</title>
                <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.419-1.305.762-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" class=""></path>
              </svg>
            </a>
            <!-- LinkedIn -->
            <a href="#" class="text-neutral-600 hover:text-white transition-colors duration-300 transform hover:scale-110">
              <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
                <title class="">LinkedIn</title>
                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" class=""></path>
              </svg>
            </a>
          </div>
        </div>

        <!-- Bottom Brand Text -->
        <div class="relative w-full mt-12 select-none overflow-hidden">
          <!-- Huge text spanning width -->
          <h1 class="text-[17vw] leading-[0.75] font-bold tracking-tighter text-center md:text-left text-white mix-blend-overlay opacity-90 pointer-events-none animate-on-scroll [animation:fadeSlideIn_1.5s_cubic-bezier(0.2,0.8,0.2,1)_0.2s_both]">
            LUMINA
          </h1>
          <!-- Gradient Fade at very bottom -->
          <div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-[#050505] to-transparent"></div>
        </div>
      </div>