<div class="relative">
  <!-- Gradient fade transition - adjusted for light theme -->
  <div class="absolute top-0 left-0 w-full h-32 -translate-y-full"></div>

  <section class="relative py-20 bg-base-100">
    <div class="container mx-auto px-4">
      <h2 class="text-4xl font-display font-bold text-center mb-12">Our Services</h2>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Marine Engineering Card -->
        <div class="card bg-base-200 shadow-xl">
          <div class="card-body">
            <h3 class="card-title font-display text-xl">Marine Engineering</h3>
            <p class="font-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </div>

        <!-- Ship Management Card -->
        <div class="card bg-base-200 shadow-xl">
          <div class="card-body">
            <h3 class="card-title font-display text-xl">Ship Management</h3>
            <p class="font-body">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>

        <!-- Maritime Consulting Card -->
        <div class="card bg-base-200 shadow-xl">
          <div class="card-body">
            <h3 class="card-title font-display text-xl">Maritime Consulting</h3>
            <p class="font-body">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          </div>
        </div>
      </div>

      <div class="mt-20 text-center">
        <h2 class="text-4xl font-display font-bold mb-8">Why Choose Us?</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          <div class="card bg-base-200 shadow-xl">
            <div class="card-body">
              <h3 class="card-title font-display text-xl">Experience</h3>
              <p class="font-body">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          </div>
          <div class="card bg-base-200 shadow-xl">
            <div class="card-body">
              <h3 class="card-title font-display text-xl">Excellence</h3>
              <p class="font-body">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div> 