Hero Video

                    <section class="relative h-screen overflow-hidden">
  <!-- Video Background -->
  <div class="absolute inset-0 z-0">
    <video autoplay loop muted playsinline class="w-full h-full object-cover filter brightness-[0.3]">
      <source src="https://assets.mixkit.co/videos/preview/mixkit-business-people-walking-around-the-office-in-slow-motion-13742-large.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
  
  <!-- Gradient Overlay for better text readability -->
  <div class="absolute inset-0 bg-gradient-to-b from-black/50 to-black/80 z-[1]"></div>
  
  <!-- Content -->
  <div class="relative z-10 h-full flex items-center justify-center">
    <div class="text-center max-w-5xl mx-auto px-6">
      <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
        <span class="block opacity-0 animate-[fadeInUp_1s_ease_0.3s_forwards]">Lead</span>
        <span class="block opacity-0 animate-[fadeInUp_1s_ease_0.6s_forwards]">Digital</span>
        <span class="block opacity-0 animate-[fadeInUp_1s_ease_0.9s_forwards]">Revolution</span>
      </h1>
      <p class="text-xl text-gray-200 mb-10 max-w-3xl mx-auto opacity-0 animate-[fadeInUp_1s_ease_1.2s_forwards]">
        Our technical team will help your business navigate the digital wave and create unlimited business value.
      </p>
      <div class="flex flex-wrap justify-center gap-4 opacity-0 animate-[fadeInUp_1s_ease_1.5s_forwards]">
        <a href="#" class="inline-block bg-white text-gray-900 px-8 py-4 rounded-full font-medium hover:bg-gray-100 transition-colors shadow-lg">
          Consult Now
        </a>
        <a href="#" class="inline-block bg-transparent text-white border-2 border-white px-8 py-4 rounded-full font-medium hover:bg-white/10 transition-colors">
          Learn More
        </a>
      </div>
    </div>
  </div>
  
  <!-- Scroll Down Indicator -->
  <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 text-white animate-bounce opacity-80">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    </svg>
  </div>
</section>