Decorative Pattern Overlay Background

<div class="w-full min-h-[400px] bg-gray-800 relative flex items-center
  justify-center overflow-hidden px-5 py-12">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
    
    .pattern-overlay::before {
      content: "";
      position: absolute;
      width: 700px;
      height: 700px;
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Trong_dong_Ngoc_Lu_1.png/800px-Trong_dong_Ngoc_Lu_1.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.12;
      z-index: 1;
      pointer-events: none;
    }</style>
  <div class="pattern-overlay absolute inset-0"></div>
  <div class="relative z-10 text-center w-full max-w-[1000px]">
    <h2 class="text-white text-4xl md:text-5xl font-bold mb-4" style="text-shadow: 2px 3px 6px rgba(0,0,0,0.6); font-family: 'Inter', Arial, sans-serif;">Content with Decorative Pattern</h2>
    <p class="text-gray-200 text-lg md:text-xl" style="font-family: 'Inter', Arial, sans-serif;">Add your content here. The pattern provides subtle visual interest.</p>
  </div>
</div>