Untitled

mail@pastecode.io avatar
unknown
plain_text
7 months ago
156 kB
1
Indexable
Never
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Doctor Collection Page</title>
  <link rel="stylesheet" href="./dist/output.css" />
  <link rel="stylesheet" href="./icons.css" />

  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.1/dist/cdn.min.js"></script>
</head>

<body class="bg-[#f2f2f2]">
  <!-- Doctor card -  About section display modal  -->
  <div id="dc-modal" class="relative z-40 hidden " aria-labelledby="modal-title" role="dialog" aria-modal="true">

    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

    <div class="fixed inset-0 z-10 overflow-y-auto">
      <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">

        <div
          class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl">
          <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">

              <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                <h3 id="modalTitle"
                  class="text-black text-left lg:text-[23px] xsm:text-md xl:text-2xl text-xl font-sans font-bold mb-2"
                  id="modal-title">About | Dr ashish magadum
                </h3>
                <div class="mt-2">
                  <p id="modalContent" class="pr-3 text-justify text-gray-700 fz-scale max-h-[60vh] overflow-auto">
                    modalContact.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
            <button type="button"
              class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
              onclick="showAndHideModal('hide')">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ratings icon modal -->
  <div id="ratingInfo-modal" class="relative z-40 hidden " aria-labelledby="modal-title" role="dialog"
    aria-modal="true">

    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

    <div class="fixed inset-0 z-10 overflow-y-auto">
      <div class="flex min-h-full items-end justify-center p-3 text-center sm:items-center sm:p-0">

        <div
          class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
          <div class="bg-white px-3 py-3 sm:p-3 sm:pb-3">
            <div class="sm:flex sm:items-start">

              <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">

                <div class="mt-2">
                  <p id="ratings-modalContent" class="pr-3 flex text-gray-700 fz-scale overflow-auto">
                    <span class="pt-1">

                      <i class="inline  fa-rating-info px-1 bg-[#1e3050db] before:text-[#fff] after:text-[#fff]"></i>
                    </span>
                    <span class="text-left">
                      This score is an aggregation of ratings for this doctor on Pregawish.com & trusted platforms on
                      the
                      Internet.
                    </span>

                  </p>
                </div>

              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
            <button type="button"
              class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
              onclick="ratingModalToggle('hide')">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- top heading content info display modal -->
  <div id="info-modal" class="relative z-40 hidden " aria-labelledby="modal-title" role="dialog" aria-modal="true">

    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

    <div class="fixed inset-0 z-10 overflow-y-auto">
      <div class="flex min-h-full items-end justify-center p-3 text-center sm:items-center sm:p-0">

        <div
          class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
          <div class="bg-white px-3 py-3 sm:p-3 sm:pb-3">
            <div class="sm:flex sm:items-start">

              <div class="mt-3 sm:ml-4 sm:mt-0 sm:text-left">

                <div class="mt-2">
                  <p id="ratings-modalContent" class="pr-3 text-gray-700 fz-scale  max-h-[60vh] overflow-auto">

                    <span class="text-left">
                      In the bustling metropolis of Delhi, a city known for its rich history and vibrant culture, there
                      exists a
                      cadre of medical professionals who stand out for their expertise and dedication. These are the IVF
                      doctors, specialists in the field of In Vitro Fertilization, who have dedicated their lives to
                      assisting
                      couples in their journey to parenthood. The capital city, with its advanced medical
                      infrastructure, has
                      become a hub for fertility treatments in India. Among the myriad of healthcare professionals, a
                      select few
                      have earned the title of 'best' in the realm of IVF. Their commitment to excellence, combined with
                      their
                      compassionate approach, has transformed countless lives. Couples from not only India but also from
                      around
                      the world flock to Delhi, placing their trust in these esteemed doctors. Their success stories,
                      filled
                      with hope and joy, are a testament to the unparalleled expertise of Delhi's top IVF specialists.
                    </span>

                  </p>
                </div>

              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
            <button type="button"
              class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
              onclick="infoModalToggle('hide')">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>



  <!-- navbar -->
  <div class="bg-color relative isolate z-30 " x-data="{openNav:0}">
    <div class=" py-3 max-w-[1536px] mx-auto">
      <div class=" flex mx-auto px-6 gap-5 lg:px-4">
        <!-- btn 1 -->
        <button type="button"
          class="inline-flex items-center gap-x-1 px-3 py- rounded-lg text-base font-semibold leading-6 text-gray-600 hover:text-gray-900"
          aria-expanded="false">
          Home

        </button>
        <!-- btn 2 -->
        <button type="button" @click="openNav===1?openNav = 0:openNav = 1"
          :class="openNav===1?'text-gray-950':'text-gray-600'"
          class="px-3 py-2  rounded-lg inline-flex items-center gap-x-1 text-base font-semibold leading-6 hover:text-gray-900"
          aria-expanded="false">
          Cities
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd"
              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
              clip-rule="evenodd" />
          </svg>
        </button>
        <!-- btn 3 -->
        <button type="button" @click="openNav===2?openNav = 0:openNav = 2"
          :class="openNav===2?'text-gray-950':'text-gray-600'" x-on:hover=""
          class="px-3 py-2  rounded-lg inline-flex items-center gap-x-1 text-base font-semibold leading-6 hover:text-gray-950"
          aria-expanded="false">
          Resources
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd"
              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
              clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- flyouts -->
    <div class="absolute inset-x-0 top-[64px] -z-10 ">
      <!-- flyout 1 -->
      <div x-show="openNav === 1" @click.outside="openNav===1 ? openNav = 0:null"
        class="relative  max-w-[1536px] ul:mx-auto bg-color rounded-b-2xl shadow-lg flex justify-center  border-t-2   gap-x-8 gap-y-10 px-6 py-10  lg:px-8">
        
      
        <ul role="list" class="flex  h-full gap-x-4 gap-y-8 flex-wrap xl:gap-x-8">
          <li class="relative w-[80px] xs:w-[100px]">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://media.gettyimages.com/id/1096026706/photo/the-rashtrapati-bhavan-during-sunset-time-india.jpg?s=612x612&w=0&k=20&c=3tq_3qpK1bTQQRpW2aHyuCYn5p8gTfQB4YeURb0q_z4="
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Delhi</p>

          </li>
          <li class="relative w-[80px] xs:w-[100px]">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://media.gettyimages.com/id/160438757/photo/chhatrapati-shivaji-terminus-train-station-mumbai.jpg?s=612x612&w=0&k=20&c=k6Ae3kHF_SUCLou5uLkhc5-lkD4HzNY9g8ZS9LGoIZ0="
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Mumbai</p>

          </li>
          <li class="relative w-[80px] xs:w-[100px]">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://media.gettyimages.com/id/1330322647/photo/a-fine-evening-at-vidhana-soudha-bengaluru.jpg?s=612x612&w=0&k=20&c=Ykc4w6yEct4p03N4L7BBHhEzpxpo1_76simiAumKbwo="
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Bangalore</p>
          </li>
          <li class="relative w-[80px] xs:w-[100px]">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://media.gettyimages.com/id/142605497/photo/charminar.jpg?s=612x612&w=0&k=20&c=-8sXKXCtzR_G82SBWLGa43CnQhyDKKwIJUAk2m1okKY="
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Hyderabad</p>

          </li>
          <li class="relative w-[80px] xs:w-[100px]">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwBacAd-mDlLDZMMem-SDj7t8Nnn4fyg5r1A&usqp=CAU"
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Kolkata</p>

          </li>
          <li class="relative w-[80px] xs:w-[100px] hidden sm:block">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTo7rnvqtgvJMrVb6FNB3uy3YmKqu3071eISg&usqp=CAU"
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Chennai</p>

          </li>
          <li class="relative w-[80px] xs:w-[100px]  hidden sm:block">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">

              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJ8ZPdh3WUUJ5IU2XWf-fkTGNHxDcKyIp2jg&usqp=CAU"
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Noida</p>
          </li>
          <li class="relative w-[80px] xs:w-[100px]  hidden sm:block">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0hDCPke9dFQoAAM0k7JiSjHIaki-ai5dc4A&usqp=CAU"
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Greater Noida</p>

          </li>
          <li class="relative w-[80px] xs:w-[100px]  hidden sm:block">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ87iLD34g2VJB4xDzAnboppeydTITofGdrtQ&usqp=CAU"
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Jaipur</p>

          </li>
          <li class="relative w-[80px] xs:w-[100px]  hidden sm:block">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZv0htqEr5JiMSHXA5ElZXDGbfa5HHnA_tXA&usqp=CAU"
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Pune</p>

          </li>
          <li class="relative w-[80px] xs:w-[100px]  hidden sm:block">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8BCQuf_2gWrhOeneVjSGGeDqM1HvfvJpltQ&usqp=CAU"
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Lucknow</p>
          </li>
          <li class="relative w-[80px] xs:w-[100px]  hidden sm:block">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtG2nuE_4mYX1ePSodLfK06C2quAjdDhWeLw&usqp=CAU"
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Chandigarh</p>

          </li>
          <li class="relative w-[80px] xs:w-[100px]  hidden sm:block">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRJvu5eBSFeoh9u9BxrpOcFEtRddx4A8IG0w&usqp=CAU"
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Ahemdabad</p>
          </li>
          <li class="relative w-[80px] xs:w-[100px]">
            <div
              class="group  block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
              <img
                src="https://media.gettyimages.com/id/142605497/photo/charminar.jpg?s=612x612&w=0&k=20&c=-8sXKXCtzR_G82SBWLGa43CnQhyDKKwIJUAk2m1okKY="
                alt="" class="pointer-events-none object-cover group-hover:opacity-75 aspect-1">
              <button type="button" class="absolute inset-0 focus:outline-none">
                <span class="sr-only">View details for IMG_4985.HEIC</span>
              </button>
            </div>
            <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">All Cities</p>

          </li>
          <!-- More files... -->
        </ul>
      </div>

      <!-- flyout 2 -->
      <div x-show="openNav === 2" @click.outside="openNav===2 ? openNav = 0: null"
        class=" grid max-w-[1536px] bg-color ul:mx-auto  rounded-b-2xl shadow-lg  border-t-2 grid-cols-1 gap-x-8 gap-y-6 px-6 py-5 lg:grid-cols-2 lg:px-8">
        <div class="grid grid-cols-2 gap-x-6 sm:gap-x-8">
          <div class="hidden sm:block">
            <h3 class="text-sm font-medium leading-6 text-gray-500">Engagement</h3>
            <div class="mt-6 flow-root">
              <div class="-my-2">
                <a href="#" class="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900">
                  <svg class="h-6 w-6 flex-none text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                  </svg>
                  About
                </a>
                <a href="#" class="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900">
                  <svg class="h-6 w-6 flex-none text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                  </svg>
                  Customers
                </a>
                <a href="#" class="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900">
                  <svg class="h-6 w-6 flex-none text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" />
                  </svg>
                  Press
                </a>
                <a href="#" class="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900">
                  <svg class="h-6 w-6 flex-none text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" />
                  </svg>
                  Careers
                </a>
                <a href="#" class="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900">
                  <svg class="h-6 w-6 flex-none text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
                  </svg>
                  Privacy
                </a>
              </div>
            </div>
          </div>
          <div>
            <h3 class="text-sm font-medium leading-6 text-gray-500">Resources</h3>
            <div class="mt-6 flow-root">
              <div class="-my-2">
                <a href="#" class="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900">
                  <svg class="h-6 w-6 flex-none text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
                  </svg>
                  Community
                </a>
                <a href="#" class="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900">
                  <svg class="h-6 w-6 flex-none text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
                  </svg>
                  Partners
                </a>
                <a href="#" class="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900">
                  <svg class="h-6 w-6 flex-none text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
                  </svg>
                  Guides
                </a>
                <a href="#" class="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900">
                  <svg class="h-6 w-6 flex-none text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round"
                      d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
                  </svg>
                  Webinars
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="hidden grid-cols-1 sm:grid gap-1  sm:gap-8 lg:grid-cols-2">
          <h3 class="sr-only">Recent posts</h3>
          <article
            class="relative isolate flex max-w-2xl  gap-x-8 gap-y-6 flex-row items-start lg:flex-col lg:items-stretch">
            <div class="relative flex-none">
              <img class="rounded-lg bg-gray-100 object-cover aspect-1 h-20 sm:aspect-[16/9] sm:h-32 lg:h-auto"
                src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80"
                alt="">
              <div class="absolute inset-0 rounded-lg ring-1 ring-inset ring-gray-900/10"></div>
            </div>
            <div>
              <div class="flex items-center gap-x-4">
                <time datetime="2023-03-16" class="text-sm leading-6 text-gray-600">Mar 16, 2023</time>
                <a href="#"
                  class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
              </div>
              <h4 class="mt-2 text-sm font-semibold leading-6 text-gray-900">
                <a href="#">
                  <span class="absolute inset-0"></span>
                  Boost your conversion rate
                </a>
              </h4>
              <p class="mt-2 text-sm leading-6 text-gray-600 hidden sm:block">Et et dolore officia quis nostrud esse
                aute cillum irure
                do esse. Eiusmod ad deserunt cupidatat est magna Lorem.</p>
            </div>
          </article>
          <p class="mt-2 block sm:hidden text-sm leading-6 text-gray-600">Et et dolore officia quis nostrud esse aute
            cillum irure
            do esse. Eiusmod ad deserunt cupidatat est magna Lorem.</p>
          <article
            class="relative isolate flex max-w-2xl pt-3 sm:pt-0  gap-x-8 gap-y-6 flex-row items-start lg:flex-col lg:items-stretch">
            <div class="relative flex-none">
              <img class="rounded-lg bg-gray-100 object-cover aspect-1 h-20 sm:aspect-[16/9] sm:h-32 lg:h-auto"
                src="https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80"
                alt="">
              <div class="absolute inset-0 rounded-lg ring-1 ring-inset ring-gray-900/10"></div>
            </div>
            <div>
              <div class="flex items-center gap-x-4">
                <time datetime="2023-03-10" class="text-sm leading-6 text-gray-600">Mar 10, 2023</time>
                <a href="#"
                  class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-100">Sales</a>
              </div>
              <h4 class="mt-2 text-sm font-semibold leading-6 text-gray-900">
                <a href="#">
                  <span class="absolute inset-0"></span>
                  How to use search engine optimization to drive sales
                </a>
              </h4>
              <p class="mt-2 text-sm leading-6 hidden sm:block text-gray-600">Optio cum necessitatibus dolor voluptatum
                provident
                commodi et.</p>
            </div>
          </article>
          <p class="mt-2 text-sm leading-6 text-gray-600 block sm:hidden">Optio cum necessitatibus dolor voluptatum
            provident
            commodi et.</p>
        </div>
      </div>

    </div>
  </div>





  <!-- doctors cards -->
  <div class="flex px-0 lg:px-4 mt-4 gap-3 flex-col lg:flex-row max-w-[1536px] mx-auto">
    <!-- Left Side Content -->
    <div class="w-full lg:w-[70%]">

      <!-- collection page header -->

      <div
        class="bg-white mb-5 mt-3 pt-4 shadow-lg pb-6 lg:rounded-lg lg:mx-auto lg:grid lg:w-full lg:max-w-7xl  lg:gap-x-8 px-5 lg:px-8">
        <div class="">
          <div class="">
            <h1 class="mt-2 text-center text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">IVF Doctors in
              Delhi
            </h1>
            <div class="line-clamp-6 mt-4 fz-scale text-justify leading-7 text-gray-700 relative">
              In the bustling metropolis of Delhi, a city known for its rich history and vibrant culture, there exists a
              cadre of medical professionals who stand out for their expertise and dedication. These are the IVF
              doctors, specialists in the field of In Vitro Fertilization, who have dedicated their lives to assisting
              couples in their journey to parenthood. The capital city, with its advanced medical infrastructure, has
              become a hub for fertility treatments in India. Among the myriad of healthcare professionals, a select few
              have earned the title of 'best' in the realm of IVF. Their commitment to excellence, combined with their
              compassionate approach, has transformed countless lives. Couples from not only India but also from around
              the world flock to Delhi, placing their trust in these esteemed doctors. Their success stories, filled
              with hope and joy, are a testament to the unparalleled expertise of Delhi's top IVF specialists.
              <div class="w-[90%] sm:w-[35%] absolute bottom-0 right-0 rm-shadow leading-normal ">

                <span id="rmBtn-0" onclick="infoModalToggle('show')" class="mr-0">Read More</span>
              </div>
            </div>
          </div>
        </div>
      </div>



      <!-- Doctor Card 1 -->
      <div class="doc-card bg-white lg:rounded-lg shadow-lg mb-8 p-5 lg:border-none" x-data="{openTab:1}">
        <div class="sm:flex gap-0 sm:gap-4 lg:gap-7 mb-5">
          <div class="img grow-0 gap-3 w-full  sm:w-1/4">
            <img src="./images/doctor.png" alt="" class="min-w-[100px] w-full md:min-w-[180px] rounded-lg " />

          </div>
          <div
            class="w-full  sm:w-3/4 sm:max-h-[15rem] sm:h-[15rem] max-h-[18rem] h-[18rem] relative mr-[15px] pt-4 sm:pt-0">
            <!-- tab content 1 -->
            <div class="information grow flex flex-col h-full " x-show="openTab === 1">

              <h2 class="info-h2 ">
                Dr. Brigadier R K Sharma
              </h2>

              <p class="info-texts fz-scale font-clamp gap-2 mt-2 xsm:mt-0">
                <i class="fa-graduation"></i> MBBS, MD (Obs & Gyn), VSM
              </p>
              <p class="info-texts fz-mrv ">
                <i class="fa-badge "></i> Medical Registration Verified
              </p>

              <div class="flex my-3 items-center doc1">
                <span class="number-rating mr-2">(100)</span>
                <div class="rating">
                  <div class="stars"></div>
                </div>
                <span class="number-rating ml-2">(360 Reviews)</span>
                <i class="fa-rating-info" onclick="ratingModalToggle('show')"></i>
              </div>

              <div class="flex flex-col sm:flex-row  w-full">
                <div class=" flex flex-col w-full lg:w-1/2">

                  <p class="info-texts fz-scale ">
                    <i class="fa-experience"></i>28 Years Experience
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-baby"></i>10000 IVF Cycles
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-phone"></i>+91-9814325187
                  </p>

                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 my-3 px-2 rounded-lg sm:hidden">
                  Call Now
                </button>
                <div class=" mt-0 sm:flex flex-col w-full max-w-[250px] lg:w-1/2 hidden sm:visible">

                  <p class="flex gap-6 items-center justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Belagavi</span><span class="gap-1">
                      <i class="fa-rupee"></i>
                      1000</span>
                  </p>

                  <p class="mt-2 info-texts fz-scale">First Consultancy Free</p>
                </div>
              </div>
            </div>
            <!-- tab content 2 -->

            <div x-show="openTab === 2">
              <h3 class="tabs-h3 xsm:text-md">
                About | Dr. R K Sharma
              </h3>
              <div class="aboutTab-content relative ">
                Brigadier Dr. R K Sharma (VSM) is a Delhi-based IVF
                specialist, gynecologist, and obstetrician. He has been
                working since 1981. He is a reputed IVF specialist with more
                than 15,000 IVF cycles under his belt. Dr. RK Sharma is among
                the best IVF specialists in Delhi. His areas of specialization
                are infertility, endoscopy, obstetrics, and gynecology.
                Brigadier Dr. R K Sharma completed his MBBS from Pune
                University in 1981. He did his MD in Obstetrics & Gynecology
                from Pune University passing out in 1989. He trained in IVF at
                Bombay Hospital in 1995.
                Brigadier Dr. R K Sharma completed his MBBS from Pune
                University in 1981. He did his MD in Obstetrics & Gynecology
                from Pune University passing out in 1989. He trained in IVF at
                Bombay Hospital in 1995.


                <div class="w-[100%] sm:w-[55%] absolute bottom-0 right-0 bg rm-shadow  ">

                  <span id="aboutTab-rmBtn-0" class="hidden" onclick="showAndHideModal('show',0)">Read More</span>
                </div>
              </div>

            </div>
            <!-- tab content 3 -->

            <div x-show="openTab === 3" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Highlights | Dr. R K Sharma
              </h3>
              <div class="hightlightTab-content p-0">
                <div>
                  <ul class="list-disc pl-5">
                    <li>Performed over 20,000 IVF cases.</li>
                    <li>Trained numerous infertility specialists from esteemed institutions such as the armed forces,
                      AIIMS.</li>
                    <li>Served as the Past General Secretary of the Indian Fertility Society.</li>
                    <li>Acted as an advisor to numerous ART programs across the country.</li>
                  </ul>
                </div>

              </div>
            </div>
            <!-- tab content 4 -->

            <div x-show="openTab === 4" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Where to consult Dr. R K Sharma
              </h3>
              <div class="consultTab-content">
                <!-- component -->
                <!-- This is an flowbite compoent  -->
                <!-- there is a flowbite script tag at end end of body  -->
                <div class=" mx-auto">

                  <div id="default-carousel" class="relative " data-carousel="static">
                    <!-- Carousel wrapper -->
                    <div class="overflow-hidden mx-auto relative w-full h-[13rem] rounded-lg ">
                      <!-- Item 1 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Prime Health Center <br />
                              <span class="font-normal text-sm sm:hidden">Belgaum, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Belgaum,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Wed, Fri:</span>
                                    <span>07:00PM - 09:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>09:30PM - 11:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Tue, Thu:</span>
                                    <span>05:00AM - 01:00PM</span>
                                  </div>

                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>05:00PM - 07:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Item 2 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out  bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Oceanview Medical Center <br />
                              <span class="font-normal text-sm sm:hidden">Mangalore, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Mangalore,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Wed, Fri:</span>
                                    <span>08:00AM - 12:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>02:00PM - 05:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Tue, Thu, Sat:</span>
                                    <span>09:00AM - 01:00PM</span>
                                  </div>

                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Item 3 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out  bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Greenfield Health Institute <br />
                              <span class="font-normal text-sm sm:hidden">Mysore, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Mysore,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Tue, Wed:</span>
                                    <span>10:00AM - 02:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>03:00PM - 06:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Thu, Fri:</span>
                                    <span>11:00AM - 03:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>


                    <!-- Slider controls -->
                    <button type="button"
                      class="fa-car-left flex absolute top-[35%] sm:top-[30%] -left-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-prev>

                    </button>
                    <button type="button"
                      class="fa-car-right flex absolute top-[35%] sm:top-[30%] -right-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-next>

                    </button>
                  </div>


                </div>
              </div>
            </div>
          </div>

        </div>

        <!-- tab buttons -->
        <nav aria-label="Tabs">
          <ul class="flex border-b border-gray-100 text-sm">
            <li class="flex-1" @click="openTab = 1">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 1" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>

                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-info"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Info
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 2">
              <button class="relative block p-2 md:p-4 w-full">
                <span x-show="openTab === 2" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-about"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    About
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 3">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 3" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-highlights"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Highlights
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 4">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 4" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-consult"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Consult
                  </span>
                </div>
              </button>
            </li>
          </ul>
        </nav>

      </div>


      <!-- Doctor Card 2 -->
      <div class="doc-card bg-white lg:rounded-lg shadow-lg mb-8 p-5 lg:border-none" x-data="{
        openTab:1,
      }">
        <div class="sm:flex gap-0 sm:gap-4 lg:gap-7 mb-5">
          <div class="img grow-0 gap-3 w-full  sm:w-1/4">
            <img src="https://www.pregawish.com/uploads/doctor/thumbnail/179/dr-rashmi-sharma.jpg" alt=""
              class="min-w-[100px] w-full md:min-w-[180px] rounded-lg " />

          </div>
          <div
            class="w-full  sm:w-3/4 sm:max-h-[15rem] sm:h-[15rem] max-h-[18rem] h-[18rem] relative mr-[15px] pt-4 sm:pt-0">
            <!-- tab content 1 -->
            <div class="information grow flex flex-col h-full " x-show="openTab === 1">

              <h2 class="info-h2 ">
                Dr. Rashmi Sharma

              </h2>

              <p class="info-texts fz-scale gap-2 mt-2 xsm:mt-0">
                <i class="fa-graduation"></i> MBBS, MD (Obs & Gyn), DNB
              </p>
              <p class="info-texts fz-mrv">
                <i class="fa-badge"></i> Medical Registration Verified
              </p>

              <div class="flex my-3 items-center doc2">
                <span class="number-rating mr-2">(100)</span>
                <div class="rating">
                  <div class="stars"></div>
                </div>
                <span class="number-rating ml-2">(513 Reviews)</span>
                <i class="fa-rating-info" onclick="ratingModalToggle('show')"></i>

              </div>

              <div class="flex flex-col sm:flex-row  w-full">
                <div class=" flex flex-col w-full lg:w-1/2">

                  <p class="info-texts fz-scale ">
                    <i class="fa-experience"></i>27 Years Experience
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-baby"></i>6000 IVF Cycles
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-phone"></i> +91-11-45991111
                  </p>

                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 my-3 px-2 rounded-lg sm:hidden">
                  Call Now
                </button>
                <div class=" mt-0 sm:flex flex-col w-full max-w-[250px] lg:w-1/2 hidden sm:visible">

                  <p class="flex gap-6 items-center justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Janakpuri</span><span class="gap-1">
                      <i class="fa-rupee text-sm font-light"></i>
                      500</span>
                  </p>
                  <p class="flex gap-6 justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Noida</span><span class="gap-1"> <i
                        class="fa-rupee text-sm font-light"></i>
                      300</span>
                  </p>
                  <p class="mt-2 info-texts fz-scale">First Consultancy Free</p>
                </div>
              </div>
            </div>
            <!-- tab content 2 -->

            <div x-show="openTab === 2">
              <h3 class="tabs-h3 xsm:text-md">
                About | Dr. Rashmi Sharma
              </h3>
              <div class="aboutTab-content relative">
                Dr. Rashmi Sharma is Delhi based senior infertility specialist and gynecologist. She is practicing since
                1996. Dr. Rashmi Sharma has over twenty four years experience as a medical practitioner. She has been
                working as a specialist (Obstetrics and Gynecology) since twenty one years. She completed her MBBS from
                Banaras Hindu University in 1996. She finished her MD (Obstetrics & Gynecology) from the same university
                in 1999. She also holds a Diploma in OBGYN from National Board of Examination. Dr. Rashmi trained in IVF
                at Kiel University, Germany. She is a member of National Academy of Medical Sciences and FICOG. She is
                the director of Origyn Fertility & IVF and also a clinician (Sr. IVF Consultant) at the clinic. She
                handles cases of IVF, IUI, and infertility consultation. The doctor has performed over 6000 IVF cycles
                with excellent success rate (between 60% to 70%). She has years of experience at procedures like IUI,
                IVF, ICSI, TESA, PESA, IMSI, Assisted Laser Hatching, Blastocyst culture, crypto preservation and
                laparoscopic & hysteroscopic surgeries.
                <div class="w-[100%] sm:w-[55%] absolute bottom-0 right-0 bg rm-shadow  ">

                  <span id="aboutTab-rmBtn-1" class="hidden" onclick="showAndHideModal('show',1)">Read More</span>
                </div>
              </div>

            </div>
            <!-- tab content 3 -->

            <div x-show="openTab === 3" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Highlights | Dr. Rashmi Sharma
              </h3>
              <div class="hightlightTab-content p-0">
                <div>
                  <ul class="list-disc pl-5">
                    <li>Published over 100 research papers in esteemed medical journals.</li>
                    <li>Collaborated with top researchers from institutions like Johns Hopkins and Mayo Clinic.</li>
                    <li>Held the position of Chief Medical Researcher at the National Health Institute.</li>
                    <li>Instrumental in groundbreaking discoveries in the field of neurology.</li>
                  </ul>
                </div>


              </div>
            </div>
            <!-- tab content 4 -->

            <div x-show="openTab === 4" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Where to consult Dr. Rashmi Sharma
              </h3>
              <div class="consultTab-content">
                <!-- component -->
                <!-- This is an flowbite compoent  -->
                <!-- there is a flowbite script tag at end end of body  -->
                <div class=" mx-auto">

                  <div id="default-carousel" class="relative h-full" data-carousel="static">
                    <!-- Carousel wrapper -->
                    <div class="overflow-hidden mx-auto relative w-full h-[13rem] rounded-lg ">
                      <!-- Item 1 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Riverside Wellness Center <br />
                              <span class="font-normal text-sm sm:hidden">Hubli, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Hubli,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Tue, Thu:</span>
                                    <span>09:00AM - 01:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>02:00PM - 06:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Wed, Fri:</span>
                                    <span>10:00AM - 03:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Item 2 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Hilltop Medical Facility <br />
                              <span class="font-normal text-sm sm:hidden">Dharwad, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Dharwad,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Wed, Sat:</span>
                                    <span>08:00AM - 12:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>01:00PM - 04:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Tue, Thu, Fri:</span>
                                    <span>09:00AM - 02:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Item 3 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Hilltop Medical Facility <br />
                              <span class="font-normal text-sm sm:hidden">Dharwad, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Dharwad,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Wed, Sat:</span>
                                    <span>08:00AM - 12:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>01:00PM - 04:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Tue, Thu, Fri:</span>
                                    <span>09:00AM - 02:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>


                    <!-- Slider controls -->
                    <button type="button"
                      class="fa-car-left flex absolute top-[35%] sm:top-[30%] -left-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-prev>

                    </button>
                    <button type="button"
                      class="fa-car-right flex absolute top-[35%] sm:top-[30%] -right-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-next>

                    </button>
                  </div>


                </div>
              </div>
            </div>
          </div>

        </div>

        <!-- tab buttons -->
        <nav aria-label="Tabs">
          <ul class="flex border-b border-gray-100 text-sm">
            <li class="flex-1" @click="openTab = 1">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 1" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>

                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-info"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Info
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 2">
              <button class="relative block p-2 md:p-4 w-full">
                <span x-show="openTab === 2" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-about"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    About
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 3">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 3" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-highlights"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Highlights
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 4">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 4" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-consult"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Consult
                  </span>
                </div>
              </button>
            </li>
          </ul>
        </nav>

      </div>


      <!-- Doctor Card 3 -->
      <div class="doc-card bg-white lg:rounded-lg shadow-lg mb-8 p-5 lg:border-none" x-data="{
        openTab:1,
      }">
        <div class="sm:flex gap-0 sm:gap-4 lg:gap-7 mb-5">
          <div class="img grow-0 gap-3 w-full  sm:w-1/4">
            <img src="https://www.pregawish.com/uploads/doctor/thumbnail/541/dr-prerna-gupta-ivf-doctor-delhi.jpeg"
              alt="" class="min-w-[100px] w-full md:min-w-[180px] rounded-lg " />

          </div>
          <div
            class="w-full  sm:w-3/4 sm:max-h-[15rem] sm:h-[15rem] max-h-[18rem] h-[18rem] relative mr-[15px] pt-4 sm:pt-0">
            <!-- tab content 1 -->
            <div class="information grow flex flex-col h-full " x-show="openTab === 1">

              <h2 class="info-h2 ">
                Dr. Prerna Gupta
              </h2>

              <p class="info-texts fz-scale gap-2 mt-2 xsm:mt-0">
                <i class="fa-graduation"></i> MBBS, MD (Obs & Gyn), DNB, MNAMS, MRCOG


              </p>
              <p class="info-texts fz-mrv">
                <i class="fa-badge"></i> Medical Registration Verified
              </p>

              <div class="flex my-3 items-center doc3">
                <span class="number-rating mr-2">(100)</span>
                <div class="rating">
                  <div class="stars"></div>
                </div>
                <span class="number-rating ml-2">(165 Reviews)</span>
                <i class="fa-rating-info" onclick="ratingModalToggle('show')"></i>
              </div>

              <div class="flex flex-col sm:flex-row  w-full">
                <div class=" flex flex-col w-full lg:w-1/2">

                  <p class="info-texts fz-scale ">
                    <i class="fa-experience"></i>19 Years Experience
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-baby"></i>6000 IVF Cycles
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-phone"></i> +91-9910724959


                  </p>

                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 my-3 px-2 rounded-lg sm:hidden">
                  Call Now
                </button>
                <div class=" mt-0 sm:flex flex-col w-full max-w-[250px] lg:w-1/2 hidden sm:visible">

                  <p class="flex gap-6 items-center justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Delhi</span><span class="gap-1">
                      <i class="fa-rupee text-sm font-light"></i>
                      1500</span>
                  </p>
                  <p class="flex gap-6 justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Utamnagar</span><span class="gap-1"> <i
                        class="fa-rupee text-sm font-light"></i>
                      1000</span>
                  </p>
                  <p class="flex gap-6 justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Ahemdabad</span><span class="gap-1"> <i
                        class="fa-rupee text-sm font-light"></i>
                      800</span>
                  </p>
                  <p class="mt-2 info-texts fz-scale">First Consultancy Free</p>
                </div>
              </div>
            </div>
            <!-- tab content 2 -->

            <div x-show="openTab === 2">
              <h3 class="tabs-h3 xsm:text-md">
                About | Dr. Prerna Gupta
              </h3>
              <div class="aboutTab-content relative">
                Dr. Prerna Gupta is Senior Consultant (Obstetrics, Gynecology, & Infertility Specialist) in Delhi. She
                practices in Hauz Khas area of South Delhi. Dr. Prerna Gupta completed her MBBS form All India Institute
                of Medical Sciences (AIIMS) New Delhi in 2004. She completed her MD (Obstetrics & Gynecology) in 2007
                from the same institute. She is a member of Royal College of Obstetricians and Gynecologists (UK). She
                did a fellowship in Assisted Reproduction Techniques in 2012 from Royal College of Obstetricians and
                Gynecologists. Dr. Prerna Gupta is one of the few infertility specialists in Delhi with an "ivy league"
                education. She provides treatments and procedures like IVF, third party reproduction, fertility
                cryptopreservation, ovulation induction, IUI, fertility enhancing services, male infertility, and IVF
                failures. She also handles gynecological and obstetric cases.
                <div class="w-[100%] sm:w-[55%] absolute bottom-0 right-0 bg rm-shadow  ">

                  <span id="aboutTab-rmBtn-2" class="hidden" onclick="showAndHideModal('show',2)">Read More</span>
                </div>
              </div>

            </div>
            <!-- tab content 3 -->

            <div x-show="openTab === 3" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Highlights | Dr. Prerna Gupta

              </h3>
              <div class="hightlightTab-content p-0">
                <div>
                  <ul class="list-disc pl-5">
                    <li>Performed over 10,000 successful heart surgeries.</li>
                    <li>Introduced innovative techniques in minimally invasive cardiac procedures.</li>
                    <li>Served as the President of the National Cardiology Association.</li>
                    <li>Lectured at global conferences on advancements in cardiovascular health.</li>
                  </ul>
                </div>

              </div>
            </div>
            <!-- tab content 4 -->

            <div x-show="openTab === 4" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Where to consult Dr. Prerna Gupta

              </h3>
              <div class="consultTab-content">
                <!-- component -->
                <!-- This is an flowbite compoent  -->
                <!-- there is a flowbite script tag at end end of body  -->
                <div class=" mx-auto">

                  <div id="default-carousel" class="relative h-full" data-carousel="static">
                    <!-- Carousel wrapper -->
                    <div class="overflow-hidden mx-auto relative w-full h-[13rem] rounded-lg ">
                      <!-- Item 1 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Harmony Health Hub <br />
                              <span class="font-normal text-sm sm:hidden">Shimoga, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Shimoga,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Thu, Sat:</span>
                                    <span>08:30AM - 11:30AM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>01:30PM - 04:30PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Tue, Wed, Fri:</span>
                                    <span>09:30AM - 01:30PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Item 2 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Serenity Medical Services <br />
                              <span class="font-normal text-sm sm:hidden">Davangere, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Davangere,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Wed, Fri:</span>
                                    <span>07:30AM - 11:30AM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>02:30PM - 05:30PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Tue, Thu:</span>
                                    <span>08:30AM - 12:30PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Item 3 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Healthwise Clinic <br />
                              <span class="font-normal text-sm sm:hidden">Tumkur, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Tumkur,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Tue, Thu:</span>
                                    <span>09:00AM - 01:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>03:00PM - 06:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Wed, Fri, Sat:</span>
                                    <span>08:00AM - 12:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>


                    <!-- Slider controls -->
                    <button type="button"
                      class="fa-car-left flex absolute top-[35%] sm:top-[30%] -left-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-prev>

                    </button>
                    <button type="button"
                      class="fa-car-right flex absolute top-[35%] sm:top-[30%] -right-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-next>

                    </button>
                  </div>


                </div>

              </div>
            </div>
          </div>

        </div>

        <!-- tab buttons -->
        <nav aria-label="Tabs">
          <ul class="flex border-b border-gray-100 text-sm">
            <li class="flex-1" @click="openTab = 1">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 1" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>

                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-info"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Info
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 2">
              <button class="relative block p-2 md:p-4 w-full">
                <span x-show="openTab === 2" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-about"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    About
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 3">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 3" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-highlights"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Highlights
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 4">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 4" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-consult"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Consult
                  </span>
                </div>
              </button>
            </li>
          </ul>
        </nav>

      </div>

      <!-- Doctor Card 4 -->
      <div class="doc-card bg-white lg:rounded-lg shadow-lg mb-8 p-5 lg:border-none" x-data="{
        openTab:1,
      }">
        <div class="sm:flex gap-0 sm:gap-4 lg:gap-7 mb-5">
          <div class="img grow-0 gap-3 w-full  sm:w-1/4">
            <img src="https://www.pregawish.com/uploads/doctor/thumbnail/489/dr-nandita-p-palshetkar.jpeg" alt=""
              class="min-w-[100px] w-full md:min-w-[180px] rounded-lg " />

          </div>
          <div
            class="w-full  sm:w-3/4 sm:max-h-[15rem] sm:h-[15rem] max-h-[18rem] h-[18rem] relative mr-[15px] pt-4 sm:pt-0">
            <!-- tab content 1 -->
            <div class="information grow flex flex-col h-full " x-show="openTab === 1">

              <h2 class="info-h2 ">
                Dr. Nandita Palshetkar
              </h2>

              <p class="info-texts fz-scale gap-2 mt-2 xsm:mt-0">
                <i class="fa-graduation"></i> MBBS, MD (Obs & Gyn), FCPS
              </p>
              <p class="info-texts fz-mrv">
                <i class="fa-badge"></i> Medical Registration Verified
              </p>

              <div class="flex my-3 items-center doc4">
                <span class="number-rating mr-2">(100)</span>
                <div class="rating">
                  <div class="stars"></div>
                </div>
                <span class="number-rating ml-2">(97 Reviews)</span>
                <i class="fa-rating-info" onclick="ratingModalToggle('show')"></i>
              </div>

              <div class="flex flex-col sm:flex-row  w-full">
                <div class="flex flex-col w-full lg:w-1/2">


                  <p class="info-texts fz-scale ">
                    <i class="fa-experience"></i>37 Years Experience
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-baby"></i>8000 IVF Cycles
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-phone"></i> +91-8433732400



                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 my-3 px-2 rounded-lg sm:hidden">
                  Call Now
                </button>
                <div class=" mt-0 sm:flex flex-col w-full max-w-[250px] lg:w-1/2 hidden sm:visible">

                  <p class="flex gap-6 items-center justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Janakpuri</span><span class="gap-1">
                      <i class="fa-rupee text-sm font-light"></i>
                      2000</span>
                  </p>

                </div>
              </div>
            </div>
            <!-- tab content 2 -->

            <div x-show="openTab === 2">
              <h3 class="tabs-h3 xsm:text-md">
                About | Dr. Nandita Palshetkar

              </h3>
              <div class="aboutTab-content relative">
                Dr. Nandita P Palshetkar is an Obstetrician and Gynecologist. She is based in Mumbai. The doctor
                practices at Babies and Us Fertility IVF Centre. She did her MBBS from Grant Medical College and Sir JJ
                Hospital, Mumbai in 1985. She did her MS in Obstetrics and Gynecology from University of Mumbai, Mumbai,
                in 1993. She was awarded FCPS from College of Physicians and surgeons Mumbai in 1993. Dr. Nandita P
                Palshetkar is a pioneer in the field of assisted reproductive technology. She introduced techniques like
                assisted laser hatching, IMSI, embryoscopy, and egg banking to India. She is the founder of Bloom IVF.
                Bloom IVF has 12 centers in India. She is the The Federation of Obstetric & Gynaecological Societies of
                India. She has also served as the president of the Mumbai Obstetrics and Gynaecology Society. She was
                the Vice President of Federation of Obstetrics and Gynaecology India in 2011.
                <div class="w-[100%] sm:w-[55%] absolute bottom-0 right-0 bg rm-shadow  ">

                  <span id="aboutTab-rmBtn-3" class="hidden" onclick="showAndHideModal('show',3)">Read More</span>
                </div>
              </div>

            </div>
            <!-- tab content 3 -->

            <div x-show="openTab === 3" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Highlights | Dr. Nandita Palshetkar

              </h3>
              <div class="hightlightTab-content p-0">
                <div>
                  <ul class="list-disc pl-5">
                    <li>Established three pediatric clinics in underserved regions.</li>
                    <li>Developed new vaccination protocols adopted by health departments nationwide.</li>
                    <li>Served as the Chairperson for the Pediatric Health Council.</li>
                    <li>Initiated programs focusing on early detection of developmental disorders in children.</li>
                  </ul>
                </div>

              </div>
            </div>
            <!-- tab content 4 -->

            <div x-show="openTab === 4" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Where to consult Dr. Nandita Palshetkar

              </h3>
              <div class="consultTab-content">
                <!-- component -->
                <!-- This is an flowbite compoent  -->
                <!-- there is a flowbite script tag at end end of body  -->
                <div class=" mx-auto">

                  <div id="default-carousel" class="relative h-full" data-carousel="static">
                    <!-- Carousel wrapper -->
                    <div class="overflow-hidden mx-auto relative w-full h-[13rem] rounded-lg ">
                      <!-- Item 1 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Lifeline Medical Complex <br />
                              <span class="font-normal text-sm sm:hidden">Bidar, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Bidar,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Thu, Sat:</span>
                                    <span>08:00AM - 11:00AM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>02:00PM - 05:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Tue, Wed, Fri:</span>
                                    <span>09:00AM - 02:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Item 2 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              CareFirst Medical Center <br />
                              <span class="font-normal text-sm sm:hidden">Raichur, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Raichur,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Wed, Fri:</span>
                                    <span>07:30AM - 11:30AM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>03:00PM - 06:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Tue, Thu:</span>
                                    <span>08:00AM - 12:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Item 3 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              HealthBridge Clinic <br />
                              <span class="font-normal text-sm sm:hidden">Gulbarga, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Gulbarga,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Tue, Thu:</span>
                                    <span>09:30AM - 01:30PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>03:30PM - 06:30PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Wed, Fri, Sat:</span>
                                    <span>08:30AM - 12:30PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>


                    <!-- Slider controls -->
                    <button type="button"
                      class="fa-car-left flex absolute top-[35%] sm:top-[30%] -left-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-prev>

                    </button>
                    <button type="button"
                      class="fa-car-right flex absolute top-[35%] sm:top-[30%] -right-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-next>

                    </button>
                  </div>


                </div>
              </div>
            </div>
          </div>

        </div>

        <!-- tab buttons -->
        <nav aria-label="Tabs">
          <ul class="flex border-b border-gray-100 text-sm">
            <li class="flex-1" @click="openTab = 1">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 1" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>

                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-info"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Info
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 2">
              <button class="relative block p-2 md:p-4 w-full">
                <span x-show="openTab === 2" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-about"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    About
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 3">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 3" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-highlights"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Highlights
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 4">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 4" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-consult"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Consult
                  </span>
                </div>
              </button>
            </li>
          </ul>
        </nav>

      </div>


      <!-- Doctor Card 5 -->
      <div class="doc-card bg-white lg:rounded-lg shadow-lg mb-8 p-5 lg:border-none" x-data="{
        openTab:1,
      }">
        <div class="sm:flex gap-0 sm:gap-4 lg:gap-7 mb-5">
          <div class="img grow-0 gap-3 w-full  sm:w-1/4">
            <img src="https://www.pregawish.com/uploads/doctor/thumbnail/459/dr-s-mayadevi-kurup.jpg" alt=""
              class="min-w-[100px] w-full md:min-w-[180px] rounded-lg " />

          </div>
          <div
            class="w-full  sm:w-3/4 sm:max-h-[15rem] sm:h-[15rem] max-h-[18rem] h-[18rem] relative mr-[15px] pt-4 sm:pt-0">
            <!-- tab content 1 -->
            <div class="information grow flex flex-col h-full " x-show="openTab === 1">

              <h2 class="info-h2 ">
                Dr. S Mayadevi Kurup

              </h2>

              <p class="info-texts fz-scale gap-2 mt-2 xsm:mt-0">
                <i class="fa-graduation"></i> MBBS, MD (Obs & Gyn), DNB (Obs & Gyn), DGO, MRCOG (UK)


              </p>
              <p class="info-texts fz-mrv">
                <i class="fa-badge"></i> Medical Registration Verified
              </p>

              <div class="flex my-3 items-center doc5">
                <span class="number-rating mr-2">(100)</span>
                <div class="rating">
                  <div class="stars"></div>
                </div>
                <span class="number-rating ml-2">(0 Reviews)</span>
                <i class="fa-rating-info" onclick="ratingModalToggle('show')"></i>
              </div>

              <div class="flex flex-col sm:flex-row  w-full">
                <div class=" flex flex-col w-full lg:w-1/2">

                  <p class="info-texts fz-scale ">
                    <i class="fa-experience"></i>27 Years Experience
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-baby"></i>6000 IVF Cycles
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-phone"></i> +914846699999


                  </p>

                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 my-3 px-2 rounded-lg sm:hidden">
                  Call Now
                </button>
                <div class=" mt-0 sm:flex flex-col w-full max-w-[250px] lg:w-1/2 hidden sm:visible">

                  <p class="flex gap-6 items-center justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Dharwad</span><span class="gap-1">
                      <i class="fa-rupee text-sm font-light"></i>
                      500</span>
                  </p>
                  <p class="flex gap-6 justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Kittur</span><span class="gap-1"> <i
                        class="fa-rupee text-sm font-light"></i>
                      300</span>
                  </p>
                </div>
              </div>
            </div>
            <!-- tab content 2 -->

            <div x-show="openTab === 2">
              <h3 class="tabs-h3 xsm:text-md">
                About | Dr. S Mayadevi Kurup

              </h3>
              <div class="aboutTab-content relative">
                Dr. S. Mayadevi Kurup is an obstetrician and gynecologist. She has been working since 1996. She
                completed her MBBS from Government Medical College, Thiruvananthapuram. She did her MD in obstetrics and
                gynecology from the same college. She is a senior consultant (Obstetrics and Gynecology) at Aster
                Medcity Hospital, Kochi.

                Dr. S. Mayadevi Kurup is the first doctor in Kerala to perform robotic surgery. Her areas of
                specialization are general gynaecology, high risk obstetrics, maternal medicine, critical care in
                obstetrics, and gyne-oncology. She has been working as a senior consultant (Obstetrician and
                Gynecologist) at the Centre of Excellence in Women's Health, Aster Medcity since 2014. She has also
                worked as an obstetrician and gynecologist in the United Kingdom for almost twenty years. She has the
                distinction of being the first gynecologist in Kerala to perform robotic surgery. She is trained in the
                field of complex robotic gynecological surgery. Dr. S. Mayadevi Kurup is also experienced at managing
                complex and high-risk pregnancies.
                <div class="w-[100%] sm:w-[55%] absolute bottom-0 right-0 bg rm-shadow  ">

                  <span id="aboutTab-rmBtn-4" class="hidden" onclick="showAndHideModal('show',4)">Read More</span>
                </div>

              </div>

            </div>
            <!-- tab content 3 -->

            <div x-show="openTab === 3" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Highlights | Dr. S Mayadevi Kurup

              </h3>
              <div class="hightlightTab-content p-0">
                <div>
                  <ul class="list-disc pl-5">
                    <li>Contributed to the development of three new cancer drugs.</li>
                    <li>Collaborated with global institutions on cancer research projects.</li>
                    <li>Held the position of Chief Oncologist at the National Cancer Institute.</li>
                    <li>Advocated for early cancer screening programs across the country.</li>
                  </ul>
                </div>

              </div>
            </div>
            <!-- tab content 4 -->

            <div x-show="openTab === 4" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Where to consult Dr. S Mayadevi Kurup

              </h3>
              <div class="consultTab-content">
                <!-- component -->
                <!-- This is an flowbite compoent  -->
                <!-- there is a flowbite script tag at end end of body  -->
                <div class=" mx-auto">

                  <div id="default-carousel" class="relative h-full" data-carousel="static">
                    <!-- Carousel wrapper -->
                    <div class="overflow-hidden mx-auto relative w-full h-[13rem] rounded-lg ">
                      <!-- Item 1 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Mediville Health Center <br />
                              <span class="font-normal text-sm sm:hidden">Bellary, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Bellary,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Thu, Sat:</span>
                                    <span>09:00AM - 12:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>02:30PM - 05:30PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Tue, Wed, Fri:</span>
                                    <span>08:30AM - 11:30AM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Item 2 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              HealthPulse Medical Facility <br />
                              <span class="font-normal text-sm sm:hidden">Chitradurga, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Chitradurga,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Wed, Fri:</span>
                                    <span>07:00AM - 10:00AM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>03:00PM - 06:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Tue, Thu:</span>
                                    <span>08:00AM - 12:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Item 3 -->
                      <div class="hidden h-[13rem] duration-700 ease-in-out bg-white" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              VitalCare Clinic <br />
                              <span class="font-normal text-sm sm:hidden">Hassan, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Hassan,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Tue, Thu:</span>
                                    <span>09:30AM - 01:30PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>03:30PM - 06:30PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Wed, Fri, Sat:</span>
                                    <span>08:30AM - 12:30PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>


                    <!-- Slider controls -->
                    <button type="button"
                      class="fa-car-left flex absolute top-[35%] sm:top-[30%] -left-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-prev>

                    </button>
                    <button type="button"
                      class="fa-car-right flex absolute top-[35%] sm:top-[30%] -right-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-next>

                    </button>
                  </div>


                </div>
              </div>
            </div>
          </div>

        </div>

        <!-- tab buttons -->
        <nav aria-label="Tabs">
          <ul class="flex border-b border-gray-100 text-sm">
            <li class="flex-1" @click="openTab = 1">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 1" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>

                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-info"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Info
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 2">
              <button class="relative block p-2 md:p-4 w-full">
                <span x-show="openTab === 2" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-about"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    About
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 3">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 3" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-highlights"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Highlights
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 4">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 4" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-consult"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Consult
                  </span>
                </div>
              </button>
            </li>
          </ul>
        </nav>

      </div>


      <!-- Doctor Card 6 -->
      <div class="doc-card bg-white lg:rounded-lg shadow-lg mb-8 p-5 lg:border-none" x-data="{
        openTab:1,
      }">
        <div class="sm:flex gap-0 sm:gap-4 lg:gap-7 mb-5">
          <div class="img grow-0 gap-3 w-full  sm:w-1/4">
            <img src="https://www.pregawish.com/uploads/doctor/thumbnail/1280/dr.sharath-p-devdas.jpg" alt=""
              class="min-w-[100px] w-full md:min-w-[180px] rounded-lg " />

          </div>
          <div
            class="w-full  sm:w-3/4 sm:max-h-[15rem] sm:h-[15rem] max-h-[18rem] h-[18rem] relative mr-[15px] pt-4 sm:pt-0">
            <!-- tab content 1 -->
            <div class="information grow flex flex-col h-full " x-show="openTab === 1">

              <h2 class="info-h2 ">
                Dr. Sharath P Devdas
              </h2>

              <p class="info-texts fz-scale gap-2 mt-2 xsm:mt-0">
                <i class="fa-graduation"></i> MBBS, MS (Obs & Gyn)




              </p>
              <p class="info-texts fz-mrv">
                <i class="fa-badge"></i> Medical Registration Verified
              </p>

              <div class="flex my-3 items-center doc6">
                <span class="number-rating mr-2">(100)</span>
                <div class="rating">
                  <div class="stars"></div>
                </div>
                <span class="number-rating ml-2">(21 Reviews)</span>
                <i class="fa-rating-info" onclick="ratingModalToggle('show')"></i>
              </div>

              <div class="flex flex-col sm:flex-row  w-full">
                <div class=" flex flex-col w-full lg:w-1/2">

                  <p class="info-texts fz-scale ">
                    <i class="fa-experience"></i>12 Years Experience
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-baby"></i>6000 IVF Cycles
                  </p>
                  <p class="info-texts fz-scale">
                    <i class="fa-phone"></i> +91 4942605000


                  </p>

                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 my-3 px-2 rounded-lg sm:hidden">
                  Call Now
                </button>
                <div class=" mt-0 sm:flex flex-col w-full max-w-[250px] lg:w-1/2 hidden sm:visible">

                  <p class="flex gap-6 items-center justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Hubbali</span><span class="gap-1">
                      <i class="fa-rupee text-sm font-light"></i>
                      500</span>
                  </p>
                  <p class="flex gap-6 justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Noida</span><span class="gap-1"> <i
                        class="fa-rupee text-sm font-light"></i>
                      200</span>
                  </p>
                  <p class="flex gap-6 justify-between">
                    <span class="info-texts fz-scale"><i class="fa-location"></i>Kolkata</span><span class="gap-1"> <i
                        class="fa-rupee text-sm font-light"></i>
                      400</span>
                  </p>
                </div>
              </div>
            </div>
            <!-- tab content 2 -->

            <div x-show="openTab === 2">
              <h3 class="tabs-h3 xsm:text-md">
                About | Dr. Sharath P Devdas

              </h3>
              <div class="aboutTab-content relative">
                Dr. Sharath P Devdas is a Delhi-based IVF specialist, gynecologist, and obstetrician. He has
                been working since 1981. He is a reputed IVF specialist with more than 15,000 IVF cycles under his belt.
                Dr. Sharath P Devdas is among the best IVF specialists in Delhi. His areas of specialization are
                infertility,
                endoscopy, obstetrics, and gynecology. Brigadier Dr. R K Sharma completed his MBBS from Pune University
                in 1981. He did his MD in Obstetrics & Gynecology from Pune University passing out in 1989. He trained
                in IVF at Bombay Hospital in 1995.
                <div class="w-[100%] sm:w-[55%] absolute bottom-0 right-0 bg rm-shadow  ">

                  <span id="aboutTab-rmBtn-5" class="hidden" onclick="showAndHideModal('show',5)">Read More</span>
                </div>

              </div>

            </div>
            <!-- tab content 3 -->

            <div x-show="openTab === 3" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Highlights | Dr. Sharath P Devdas


              </h3>
              <div class="hightlightTab-content p-0">
                <div>
                  <ul class="list-disc pl-5">
                    <li>Introduced robotic-assisted joint replacement surgeries in the region.</li>
                    <li>Published a seminal book on sports injuries and their management.</li>
                    <li>Served as the Head of the Orthopedic Department at MedCare Hospital.</li>
                    <li>Led workshops on advanced techniques in bone and joint surgeries.</li>
                  </ul>
                </div>

              </div>

            </div>
            <!-- tab content 4 -->

            <div x-show="openTab === 4" class="">
              <h3 class="tabs-h3 xsm:text-md">
                Where to consult Dr. Sharath P Devdas


              </h3>
              <div class="consultTab-content">
                <!-- component -->
                <!-- This is an flowbite compoent  -->
                <!-- there is a flowbite script tag at end end of body  -->
                <div class=" mx-auto">

                  <div id="default-carousel" class="relative h-full" data-carousel="static">
                    <!-- Carousel wrapper -->
                    <div class="overflow-hidden mx-auto relative w-full h-[13rem] rounded-lg ">
                      <!-- Item 1 -->
                      <div class="hidden duration-700 ease-in-out" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Maa Fertility Clinic <br />
                              <span class="font-normal text-sm sm:hidden">Kittur, Karnataka</span>

                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Kittur,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Tue, Wed, Thu:</span>
                                    <span>06:00PM - 08:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>08:30PM - 10:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Fri, Sat:</span>
                                    <span>06:00AM - 02:00PM</span>
                                  </div>

                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>06:00PM - 08:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- Item 2 -->
                      <div class="hidden duration-700 ease-in-out" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Dharwad Clinic <br />
                              <span class="font-normal text-sm sm:hidden">Kittur, Karnataka</span>

                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium">
                                  Dharwad,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4 flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Tue, Wed, Thu:</span>
                                    <span>06:00PM - 08:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>08:30PM - 10:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Fri, Sat:</span>
                                    <span>06:00AM - 02:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>06:00PM - 08:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- Item 3 -->
                      <div class="hidden duration-700 ease-in-out" data-carousel-item>
                        <div class="container max-w-full mx-auto bg-white border border-gray-300 rounded-lg ">
                          <div class="flex flex-col divide-y divide-gray-300">
                            <!-- First Row: Hospital Name -->
                            <div class="py-2 pr-4 text-base font-semibold text-left pl-4">
                              Kittur Clinic <br />
                              <span class="font-normal text-sm sm:hidden">Kittur, Karnataka</span>
                            </div>
                            <!-- Second Row: Location and Days/Time -->
                            <div class="flex">
                              <!-- Location -->
                              <div class="py-2 px-4 border-r border-gray-300 text-sm hidden sm:block">
                                <div class="text-left font-medium ">
                                  Kittur,<br /> Karnataka
                                </div>
                              </div>
                              <!-- Days and Time -->
                              <div class="py-2 px-4  flex-1 text-sm">
                                <div class="">
                                  <div class="flex justify-between">
                                    <span>Mon, Tue, Wed, Thu:</span>
                                    <span>06:00PM - 08:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>08:30PM - 10:00PM</span>
                                  </div>
                                  <hr class="my-1">
                                  <div class="flex justify-between">
                                    <span>Fri, Sat:</span>
                                    <span>06:00AM - 02:00PM</span>
                                  </div>
                                  <div class="flex justify-between">
                                    <span></span>
                                    <span>06:00PM - 08:00PM</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>


                    <!-- Slider controls -->
                    <button type="button"
                      class="fa-car-left flex absolute top-[35%] sm:top-[30%] -left-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-prev>

                    </button>
                    <button type="button"
                      class="fa-car-right flex absolute top-[35%] sm:top-[30%] -right-[12px] z-[25] justify-center items-center cursor-pointer group focus:outline-none"
                      data-carousel-next>

                    </button>
                  </div>


                </div>
              </div>
            </div>
          </div>

        </div>

        <!-- tab buttons -->
        <nav aria-label="Tabs">
          <ul class="flex border-b border-gray-100 text-sm">
            <li class="flex-1" @click="openTab = 1">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 1" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>

                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-info"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Info
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 2">
              <button class="relative block p-2 md:p-4 w-full">
                <span x-show="openTab === 2" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-about"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    About
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 3">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 3" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-highlights"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Highlights
                  </span>
                </div>
              </button>
            </li>

            <li class="flex-1" @click="openTab = 4">
              <button class="relative block p-2 md:p-4 w-full" href="#">
                <span x-show="openTab === 4" class="absolute inset-x-0 -bottom-px h-px w-full bg-yellow-400"></span>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-1 md:gap-4">
                  <i class="fa-consult"></i>
                  <span class=" font-medium text-gray-900 uppercase">
                    Consult
                  </span>
                </div>
              </button>
            </li>
          </ul>
        </nav>

      </div>

      <div class=" bg-white lg:rounded-lg shadow-lg  max-w-7xl mx-auto pt-5 pb-6 px-5 lg:px-8 mb-4">
        <div class="p-5">
          <h1 class="text-2xl font-bold mb-4">Lorem Ipsum - h1</h1>
          <p class="text-base mb-4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum. Donec in
            efficitur leo. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
            mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
            tellus.
          </p>

          <h2 class="text-xl font-semibold mb-3">Dolor Sit Amet - h2</h2>
          <p class="text-base mb-4">
            Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
            quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
            Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
          </p>

          <h3 class="text-lg font-medium mb-2">Vivamus Lacinia - h3</h3>
          <p class="text-base mb-4">
            Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed
            ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
            tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
          </p>

          <h4 class="text-base font-medium mb-2">Vivamus Lacinia - h4</h4>
          <p class="text-base mb-4">
            Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed
            ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
            tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
          </p>
        </div>

        <div class="p-5 ">
          <h1 class="text-2xl font-bold mb-4">Lorem Ipsum</h1>

          <ol class="list-decimal pl-5">
            <li class="mb-4">
              <p class="text-base">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum. Donec in
                efficitur leo. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu
                pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
                eleifend tellus.
              </p>
            </li>
            <li class="mb-4">
              <p class="text-base">
                Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
                imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
                rhoncus.
              </p>
            </li>
            <li>
              <p class="text-base">
                Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
                sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
              </p>
            </li>
          </ol>
        </div>
        <div class="p-5 ">
          <h1 class="text-2xl font-bold mb-4">Dolor Sit Amet</h1>

          <ul class="list-disc pl-5">
            <li class="mb-4">
              <p class="text-base">
                dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum. Donec in efficitur
                leo. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
                pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
                tellus.
              </p>
            </li>
            <li class="mb-4">
              <p class="text-base">
                Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
                imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
                rhoncus.
              </p>
            </li>
            <li>
              <p class="text-base">
                Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
                sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
              </p>
            </li>
          </ul>
        </div>
        <div class="p-5">
          <h1 class="text-2xl font-bold mb-4">Lorem Ipsum</h1>
          <h2 class="text-xl font-semibold mb-4">Table Data</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full table-auto border-collapse border border-gray-300 w-full">
              <thead>
                <tr>
                  <th class="px-4 py-2 border border-gray-300 w-1/4">Lorem Ipsum</th>
                  <th class="px-4 py-2 border border-gray-300 w-1/4">Dolor Sit</th>
                  <th class="px-4 py-2 border border-gray-300 w-1/4">Amet Consectetur</th>
                  <th class="px-4 py-2 border border-gray-300 w-1/4">Adipiscing Elit</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="px-4 py-2 border border-gray-300">Vivamus lacinia odio vitae vestibulum. Nullam dictum
                    felis eu pede mollis pretium. Nullam dictum felis eu pede mollis pretium.</td>
                  <td class="px-4 py-2 border border-gray-300">Donec in efficitur leo. In enim justo. Nullam dictum
                    felis eu pede mollis pretium. Nullam dictum felis eu pede mollis pretium.</td>
                  <td class="px-4 py-2 border border-gray-300">Rhoncus ut, imperdiet a, venenatis vitae. Nullam dictum
                    felis eu pede mollis pretium. Nullam dictum felis eu pede mollis pretium.</td>
                  <td class="px-4 py-2 border border-gray-300">Nullam dictum felis eu pede mollis pretium. Nullam dictum
                    felis eu pede mollis pretium. Nullam dictum felis eu pede mollis pretium.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>







      </div>




    </div>

    <!-- Right Side Content -->
    <div class="w-full md:w-[30%] border my-3 hidden md:block border-gray-400">
      <h1 class="text-3xl text-center"></h1>
    </div>
  </div>

  <!-- footer section -->
  <div class="px-5  pt-10 bg-[#f2f2f2] max-w-[1536px] mx-auto">



    <!-- ====== footer part 1 -->
    <div class="relative pt-4 lg:pt-[25px]">
      <div class=" w-full">
        <div class="flex flex-wrap w-full">
          <div class="w-full pe-4 sm:w-2/3 lg:w-3/12">
            <div class="mb-10 w-full">
              <a href="/" class="mb-8 inline-block max-w-[160px]">

                <h1 class="text-3xl font-extrabold	tracking-[1px] text-gray-800">PregaWish</h1>

              </a>
              <p class="text-body-color mb-7 text-base">
                Sed ut perspiciatis undmnis is iste natus error sit amet voluptatem
                totam rem aperiam.
              </p>
              <p class="text-dark flex items-center text-sm font-medium">
              <div class="mb-6 flex items-center">
                <a href="javascript:void(0)"
                  class="text-dark hover:bg-black  mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-[#E5E5E5] hover:text-white sm:mr-4 lg:mr-2 xl:mr-4">
                  <svg width="8" height="16" viewBox="0 0 8 16" class="fill-current">
                    <path
                      d="M7.43902 6.4H6.19918H5.75639V5.88387V4.28387V3.76774H6.19918H7.12906C7.3726 3.76774 7.57186 3.56129 7.57186 3.25161V0.516129C7.57186 0.232258 7.39474 0 7.12906 0H5.51285C3.76379 0 2.54609 1.44516 2.54609 3.5871V5.83226V6.34839H2.10329H0.597778C0.287819 6.34839 0 6.63226 0 7.04516V8.90323C0 9.26452 0.243539 9.6 0.597778 9.6H2.05902H2.50181V10.1161V15.3032C2.50181 15.6645 2.74535 16 3.09959 16H5.18075C5.31359 16 5.42429 15.9226 5.51285 15.8194C5.60141 15.7161 5.66783 15.5355 5.66783 15.3806V10.1419V9.62581H6.13276H7.12906C7.41688 9.62581 7.63828 9.41935 7.68256 9.10968V9.08387V9.05806L7.99252 7.27742C8.01466 7.09677 7.99252 6.89032 7.85968 6.68387C7.8154 6.55484 7.61614 6.42581 7.43902 6.4Z" />
                  </svg>
                </a>
                <a href="javascript:void(0)"
                  class="text-dark hover:bg-black mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-[#E5E5E5] hover:text-white sm:mr-4 lg:mr-2 xl:mr-4">
                  <svg width="16" height="12" viewBox="0 0 16 12" class="fill-current">
                    <path
                      d="M14.2194 2.06654L15.2 0.939335C15.4839 0.634051 15.5613 0.399217 15.5871 0.2818C14.8129 0.704501 14.0903 0.845401 13.6258 0.845401H13.4452L13.3419 0.751468C12.7226 0.258317 11.9484 0 11.1226 0C9.31613 0 7.89677 1.36204 7.89677 2.93542C7.89677 3.02935 7.89677 3.17025 7.92258 3.26419L8 3.73386L7.45806 3.71037C4.15484 3.61644 1.44516 1.03327 1.00645 0.587084C0.283871 1.76125 0.696774 2.88845 1.13548 3.59296L2.0129 4.90802L0.619355 4.20352C0.645161 5.18982 1.05806 5.96477 1.85806 6.52838L2.55484 6.99804L1.85806 7.25636C2.29677 8.45401 3.27742 8.94716 4 9.13503L4.95484 9.36986L4.05161 9.93346C2.60645 10.8728 0.8 10.8024 0 10.7319C1.62581 11.7652 3.56129 12 4.90323 12C5.90968 12 6.65806 11.9061 6.83871 11.8356C14.0645 10.2857 14.4 4.41487 14.4 3.2407V3.07632L14.5548 2.98239C15.4323 2.23092 15.7935 1.8317 16 1.59687C15.9226 1.62035 15.8194 1.66732 15.7161 1.6908L14.2194 2.06654Z" />
                  </svg>
                </a>
                <a href="javascript:void(0)"
                  class="text-dark hover:bg-black mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-[#E5E5E5] hover:text-white sm:mr-4 lg:mr-2 xl:mr-4">
                  <svg width="16" height="12" viewBox="0 0 16 12" class="fill-current">
                    <path
                      d="M15.6645 1.88018C15.4839 1.13364 14.9419 0.552995 14.2452 0.359447C13.0065 6.59222e-08 8 0 8 0C8 0 2.99355 6.59222e-08 1.75484 0.359447C1.05806 0.552995 0.516129 1.13364 0.335484 1.88018C0 3.23502 0 6 0 6C0 6 0 8.79263 0.335484 10.1198C0.516129 10.8664 1.05806 11.447 1.75484 11.6406C2.99355 12 8 12 8 12C8 12 13.0065 12 14.2452 11.6406C14.9419 11.447 15.4839 10.8664 15.6645 10.1198C16 8.79263 16 6 16 6C16 6 16 3.23502 15.6645 1.88018ZM6.4 8.57143V3.42857L10.5548 6L6.4 8.57143Z" />
                  </svg>
                </a>
                <a href="javascript:void(0)"
                  class="text-dark hover:bg-black mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-[#E5E5E5] hover:text-white sm:mr-4 lg:mr-2 xl:mr-4">
                  <svg width="14" height="14" viewBox="0 0 14 14" class="fill-current">
                    <path
                      d="M13.0214 0H1.02084C0.453707 0 0 0.451613 0 1.01613V12.9839C0 13.5258 0.453707 14 1.02084 14H12.976C13.5432 14 13.9969 13.5484 13.9969 12.9839V0.993548C14.0422 0.451613 13.5885 0 13.0214 0ZM4.15142 11.9H2.08705V5.23871H4.15142V11.9ZM3.10789 4.3129C2.42733 4.3129 1.90557 3.77097 1.90557 3.11613C1.90557 2.46129 2.45002 1.91935 3.10789 1.91935C3.76577 1.91935 4.31022 2.46129 4.31022 3.11613C4.31022 3.77097 3.81114 4.3129 3.10789 4.3129ZM11.9779 11.9H9.9135V8.67097C9.9135 7.90323 9.89082 6.8871 8.82461 6.8871C7.73571 6.8871 7.57691 7.74516 7.57691 8.60323V11.9H5.51254V5.23871H7.53154V6.16452H7.55423C7.84914 5.62258 8.50701 5.08065 9.52785 5.08065C11.6376 5.08065 12.0232 6.43548 12.0232 8.2871V11.9H11.9779Z" />
                  </svg>
                </a>
                <a href="javascript:void(0)"
                  class="text-dark hover:bg-black mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-[#E5E5E5] hover:text-white sm:mr-4 lg:mr-2 xl:mr-4">
                  <svg xmlns="http://www.w3.org/2000/svg" height="17px" class="fill-current" viewBox="0 0 448 512">
                    <path
                      d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z" />
                  </svg>
                </a>
              </div>

              </p>
            </div>
          </div>

          <div class="lg:px-4 w-1/2 lg:w-2/12">
            <div class="mb-10 w-full">
              <h4 class="text-dark mb-9 text-lg font-semibold">Resources</h4>
              <ul>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    SaaS Development
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    Our Products
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    User Flow
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    User Strategy
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div class="lg:px-4  w-1/2 lg:w-2/12">
            <div class="mb-10 w-full">
              <h4 class="text-dark mb-9 text-lg font-semibold">Quick Links</h4>
              <ul>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    Premium Support
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    Our Services
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    Know Our Team
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    Download App
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div class="lg:px-4  w-1/2 lg:w-2/12">
            <div class="mb-10 w-full">
              <h4 class="text-dark mb-9 text-lg font-semibold">Quick Links</h4>
              <ul>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    Premium Support
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    Our Services
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    Know Our Team
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0)"
                    class="text-body-color hover:text-primary mb-2 inline-block text-sm leading-loose">
                    Download App
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div class="w-full lg:px-4 md:w-1/2 lg:w-3/12">
            <div class="mb-10 w-full">
              <h2 class="text-lg font-bold tracking-tight mb-7 md:mb-9">Subscribe</h2>
              <form class="">
                <label for="email-address" class="sr-only">Email address</label>
                <input id="email-address" name="email" type="email" autocomplete="email" required
                  class="min-w-0 mb-5 w-full bg-white flex-auto rounded-md border-2 focus:border-indigo-500 border-gray-400 outline-0 px-3.5 py-2 shadow-sm inset  sm:text-sm sm:leading-6"
                  placeholder="Enter your email">
                <button type="submit"
                  class="w-full rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500;">Subscribe</button>
                <p class="mt-2 text-">Get the latest update via email.</p>
              </form>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- ====== footer part 2 -->
    <div
      class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 bg-white drop-shadow-lg	p-4 md:p-5 rounded-lg text-sm md:text-base	">
      <div class="md:ps-8 font-bold md:border-e-2 flex items-center">
        <div class="border-2 rounded-full px-2.5 py-1 me-4  text-lg">
          <i class="fa-s-bullhorn"></i>
        </div>
        <div>

          <div class="text-slate-600">
            Advertise With Us
          </div>
          <div class="text-blue-800 pt-1">
            sales@pregawish.com
          </div>
        </div>
      </div>
      <div class="md:ps-8 font-bold  lg:border-e-2 mt-4 md:mt-0 flex items-center">
        <div class="border-2 rounded-full px-2.5 py-1 me-4 text-lg">

          <i class="fa-s-phone"></i>
        </div>
        <div>
          <div class="text-slate-600">
            Call Us
          </div>
          <div class="text-blue-800 pt-1">
            +91-9873533801
          </div>
        </div>

      </div>
      <div class="md:ps-8 font-bold flex items-center mt-4 lg:mt-0">
        <div class="border-2 rounded-full px-2.5 py-1 me-4 text-lg">
          <i class="fa-s-envelope"></i>
        </div>
        <div>
          <div class="text-slate-600">
            E-mail
          </div>
          <div class="text-blue-800 pt-1">
            support@pregawish.com
          </div>
        </div>

      </div>

    </div>


    <!-- ====== footer part 3 -->
    <div class="w-full mx-auto border-t border-black/[.1]	 py-4 md:flex md:items-center md:justify-between">
      <span class="text-sm  sm:text-center ">© <a href="/" class="hover:underline">PregaWish
          2023</a> | All Rights Reserved.
      </span>
      <ul class="flex flex-wrap items-center mt-3 text-sm font-medium sm:mt-0">
        <li>
          <a href="#" class="mr-2 hover:underline md:mr-3">Privacy</a> |
        </li>
        <li>
          <a href="#" class="mx-2 hover:underline md:mx-3">Terms</a> |
        </li>
        <li>
          <a href="#" class="mx-2 hover:underline md:mx-3">Sitemap</a> |
        </li>
        <li>
          <a href="#" class="ml-2 md:ml-3 hover:underline">Help</a>
        </li>
      </ul>
    </div>

  </div>

  <script src="./dist/flowbite.min.js"></script>
  <script src="./index.js"></script>

</body>

</html>