<section
  class="max-w-[90%] mx-auto px-4 pb-[40px]"
  data-component-type="Content"
>

 
  <p
    class="lg:text-[20px] text-[#534931] text-center pb-[10px] text-[12px] mt-[30px]"
    data-node="contact_subtitle"
    data-node-type="text"
    data-node-label="Contact Subtitle"
    data-node-default="CONTACT US"
  >
    <b>{{contact_subtitle}}</b>
  </p>

  <h2
    class="text-[40px] text-[#534931] font-bold text-center mb-5"
    data-node="contact_title"
    data-node-type="text"
    data-node-label="Contact Title"
    data-node-default="Book Your Reservation Today"
  >
    {{contact_title}}
  </h2>

  <p
    class="text-gray-600 text-center text-[20px] mb-5"
    data-node="contact_description"
    data-node-type="text"
    data-node-label="Contact Description"
    data-node-default="Lorem ipsum dolor sit amet consectetur. Leo elit sollicitudin aliquet maecenas sed consectetur feugiat ut sed. Mi neque tortor netus amet ultrices risus."
  >
    {{contact_description}}
  </p>

  <div class="flex justify-center">
    <button
      class="mt-8 bg-[#B38E6A] text-white font-semibold px-6 py-3
             border border-transparent lg:text-[18px]
             hover:bg-[#B38E6A] hover:border-[#B38E6A]
             rounded-[30px] transition-all duration-300
             shadow-md hover:shadow-lg flex items-center gap-2"
      data-node="contact_button_text"
      data-node-type="text"
      data-node-label="Contact Button Text"
      data-node-default="Reserve a Table"
    >
      {{contact_button_text}}
    </button>
  </div>

</section>
