Hero With Image

                    <section class="relative py-20 overflow-hidden">
  <!-- Background Image -->
  <div class="absolute inset-0 z-0">
    <img src="https://images.unsplash.com/photo-1579547945413-497e1b99dac0" alt="Background" class="w-full h-full object-cover filter brightness-50">
  </div>
  
  <!-- Content -->
  <div class="relative z-10 max-w-7xl mx-auto px-4 text-center">
    <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
      Innovative Technology Solutions
    </h1>
    <p class="text-xl text-gray-200 mb-8 max-w-3xl mx-auto">
      Leverage our technical expertise and innovative thinking to give your business an unparalleled competitive advantage.
    </p>
    <div class="flex flex-wrap justify-center gap-4">
      <a href="#" class="inline-block bg-white text-blue-800 px-6 py-3 rounded-lg shadow hover:bg-gray-100 transition">
        Learn More
      </a>
      <a href="#" class="inline-block bg-transparent text-white border border-white px-6 py-3 rounded-lg hover:bg-white/10 transition">
        Contact Us
      </a>
    </div>
  </div>
</section>