Our Doctors<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n \/* Custom styles to ensure full height and smooth transitions *\/\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f3f4f6; \/* Light gray background *\/\n }\n .modal-overlay {\n background-color: rgba(0, 0, 0, 0.7); \/* Darker overlay *\/\n transition: opacity 0.3s ease-in-out;\n opacity: 0;\n pointer-events: none; \/* Allows clicks through when hidden *\/\n }\n .modal-overlay.open {\n opacity: 1;\n pointer-events: auto; \/* Re-enable clicks when open *\/\n }\n .modal-content {\n transform: translateY(20px); \/* Slight initial offset *\/\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n opacity: 0;\n }\n .modal-overlay.open .modal-content {\n transform: translateY(0);\n opacity: 1;\n }\n \/* Custom scrollbar for modal content if it overflows *\/\n .modal-scrollable-content::-webkit-scrollbar {\n width: 8px;\n }\n .modal-scrollable-content::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n }\n .modal-scrollable-content::-webkit-scrollbar-thumb {\n background: #cbd5e1; \/* Tailwind gray-300 *\/\n border-radius: 10px;\n }\n .modal-scrollable-content::-webkit-scrollbar-thumb:hover {\n background: #94a3b8; \/* Tailwind gray-400 *\/\n }\n\n \/* NEW: Full Width Fix for WordPress Content Areas *\/\n \/* These selectors target common WordPress content wrappers.\n You might need to adjust them based on your specific theme.\n Use your browser's \"Inspect Element\" tool to find the correct one. *\/\n .page-id-YOUR_PAGE_ID .site-content, \/* Replace YOUR_PAGE_ID with the actual ID of your doctor page *\/\n .page-template-full-width .entry-content,\n .page .entry-content,\n .single-page .entry-content,\n .wp-block-group.alignfull, \/* For Gutenberg full-width blocks *\/\n .wp-block-group.alignwide,\n .content-area,\n #primary,\n #main-content,\n .site-main {\n width: 100% !important;\n max-width: 100% !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n padding-left: 0 !important;\n padding-right: 0 !important;\n box-sizing: border-box; \/* Ensures padding is included in the width *\/\n }\n\n \/* Remove default WordPress padding if it's interfering *\/\n .entry-content > *,\n .page-content > * {\n max-width: 100% !important;\n margin-left: auto !important; \/* Re-center the internal content if needed *\/\n margin-right: auto !important;\n box-sizing: border-box;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen flex flex-col items-center py-10 px-4\">\n\n \n <header class=\"text-center mb-12\">\n <h1 class=\"text-5xl font-extrabold text-gray-900 leading-tight\">Meet Our Esteemed Doctors<\/h1>\n <p class=\"mt-4 text-xl text-gray-600 max-w-2xl mx-auto\">\n Dedicated to your health and well-being, our team of specialists is here to provide exceptional care.\n <\/p>\n <\/header>\n\n \n <main id=\"doctors-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 max-w-7xl w-full\">\n \n <\/main>\n\n \n <div id=\"doctor-modal\" class=\"modal-overlay fixed inset-0 flex items-center justify-center p-4 z-50\">\n <div class=\"modal-content bg-white rounded-lg shadow-xl p-6 w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col\">\n \n <div class=\"flex justify-end mb-4\">\n <button id=\"close-modal\" class=\"text-gray-500 hover:text-gray-700 focus:outline-none\">\n <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n\n <div class=\"modal-scrollable-content flex-grow overflow-y-auto pr-4 -mr-4\"> \n <div class=\"flex flex-col md:flex-row items-center md:items-start gap-8\">\n \n <div class=\"flex-shrink-0 text-center\">\n <img decoding=\"async\" id=\"modal-doctor-image\" class=\"w-48 h-48 md:w-64 md:h-64 rounded-full object-cover shadow-md mx-auto\"\n src=\"https:\/\/placehold.co\/256x256\/a0c4ff\/ffffff?text=Doctor\" alt=\"Doctor Image\">\n <h2 id=\"modal-doctor-name\" class=\"mt-4 text-3xl font-bold text-gray-900\"><\/h2>\n <p id=\"modal-doctor-specialty\" class=\"text-xl text-indigo-600\"><\/p>\n \n <p id=\"modal-clinic-days\" class=\"text-md text-gray-600 mt-2\"><\/p>\n <\/div>\n\n \n <div class=\"flex-grow text-gray-700\">\n <h3 class=\"text-2xl font-semibold mb-3 text-gray-800\">About Me<\/h3>\n <p id=\"modal-doctor-bio\" class=\"text-lg leading-relaxed mb-6\"><\/p>\n\n <h3 class=\"text-2xl font-semibold mb-3 text-gray-800\">My Approach<\/h3>\n <div id=\"modal-doctor-video-container\" class=\"w-full aspect-video bg-gray-200 rounded-lg overflow-hidden shadow-md\">\n \n <\/div>\n <p class=\"mt-4 text-sm text-gray-500\">\n Watch a short video about my philosophy and patient care.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Data for our doctors\n const doctors = [\n {\n id: 'dr-peter-mwika',\n name: 'Dr. Peter Mwika',\n specialty: 'Paediatric Surgeon',\n image: 'https:\/\/guardianhospitalmeru.com\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-14-at-13.54.52.webp',\n bio: 'Dr. Peter Mwika is a highly qualified Paediatric and general Surgeon in Guardian Hospital Meru Kenya, dedicated to children\u2019s surgical well-being.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/t0e2QsPAzuo?si=EMu2qugnY0lvjcK8&start=30',\n clinicDays: 'Friday and Saturday (9 AM - 5 PM)' \/\/ NEW: Clinic Days\n },\n {\n id: 'dr-mercy-gatua',\n name: 'Dr. Mercy Gatua',\n specialty: 'Oncologist',\n image: 'https:\/\/guardianhospitalmeru.com\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-14-141215.png',\n bio: 'Dr. Mercy Njeri Gatua is a dedicated physician specializing in Internal Medicine with a subspecialty in Medical Oncology, practicing in Nairobi, Kenya. She holds an MBChB from 2005, an M.Med in Internal Medicine (2017), and a Fellowship in Medical Oncology (2019), all from the University of Nairobi. She is a Medical Oncologist at Guardian Hospital Meru and Kenyatta University Teaching Research and Referral Hospital.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/S_fQ9s2-o7M?autoplay=0&controls=1&showinfo=0&rel=0', \/\/ Replace with actual video URL\n clinicDays: 'Friday (9 AM - 5 PM)' \/\/ NEW: Clinic Days\n },\n {\n id: 'dr-bruce-semo',\n name: 'Dr. Bruce Semo',\n specialty: 'Gynaecologist',\n image: 'https:\/\/guardianhospitalmeru.com\/wp-content\/uploads\/2025\/06\/1711033011374-1.webp',\n bio: 'Dr. Bruce Semo is a Consultant Obstetrician and Gynecologist in Guardian Hospital Meru, Kenya. He specializes in advanced minimally invasive gynecological surgery, high-risk pregnancy management, and reproductive health.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/M9O_x91p3dI?autoplay=0&controls=1&showinfo=0&rel=0', \/\/ Replace with actual video URL\n clinicDays: 'Friday (By Appointment Only)' \/\/ NEW: Clinic Days\n },\n {\n id: 'dr-sila-ontita',\n name: 'Dr. Sila Ontita',\n specialty: 'Orthopedic Surgeon',\n image: 'https:\/\/placehold.co\/400x400\/f39c12\/ffffff?text=Dr.+Sila Ontita',\n bio: 'Dr. Sila Ontita is a highly skilled orthopedic surgeon specializing in sports injuries and arthroscopic procedures. He is committed to helping athletes and active individuals return to their peak performance. Dr. Sterling is recognized for his meticulous surgical techniques and his dedication to patient recovery.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/videoseries?list=PLx0sYbCqOb8TBPRdmCgA4GxL_yqTj_s4J', \/\/ Example playlist or different video\n clinicDays: 'Wednesday (11 AM - 4 PM)' \/\/ NEW: Clinic Days\n },\n {\n id: 'dr-beth',\n name: 'Dr. Beth',\n specialty: 'Dermatologist',\n image: 'https:\/\/placehold.co\/400x400\/e74c3c\/ffffff?text=Dr.+Beth',\n bio: 'Dr. Beth is a compassionate dermatologist specializing in both medical and cosmetic dermatology. She focuses on skin cancer prevention, acne treatment, and anti-aging solutions. Dr. Monroe is passionate about helping her patients achieve healthy, radiant skin.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/q_mYm1X4R1E?autoplay=0&controls=1&showinfo=0&rel=0',\n clinicDays: 'Wednesday (11 AM - 5 PM)'\n },\n {\n id: 'dr-douglas-kiprotich',\n name: 'Dr. Douglas Kiprotich',\n specialty: 'General Practitioner',\n image: 'https:\/\/guardianhospitalmeru.com\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-14-140449.webp',\n bio: 'Dr. Douglas kiprotich is a dedicated General Practitioner, providing comprehensive primary care for patients of all ages. He believes in building strong, trusting relationships with his patients to provide personalized and preventive healthcare. Dr. Kiprotich is committed to ongoing education and staying abreast of the latest medical advancements.', \/\/ Fixed: Added missing comma here\n videoUrl: 'https:\/\/www.youtube.com\/embed\/e_yWJ_oM1pY?autoplay=0&controls=1&showinfo=0&rel=0',\n clinicDays: 'Monday - Friday (General Hours)'\n },\n {\n id: 'dr-jeremiah-njogu',\n name: 'Dr. Jeremiah Njogu',\n specialty: 'Urologist',\n image: 'https:\/\/placehold.co\/400x400\/a35d6a\/ffffff?text=Dr.+Njogu',\n bio: 'Dr. Jeremiah Njogu is a Consultant General Surgeon and Urologist practicing in Kenya. He has over 10 years of experience and is affiliated with Kenyatta National Hospital. His education includes an M.B.Ch.B, M.Med Surgery (UON), and specialized training in Urology and Renal',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/K_BwF8T_B2U?autoplay=0&controls=1&showinfo=0&rel=0',\n clinicDays: 'Thursday (11 AM - 5 PM)'\n },\n {\n id: 'dr-everlyne-kawira', \/* Fixed: Corrected ID from 'dr-everlyne Kawira' to 'dr-everlyne-kawira' *\/\n name: 'Dr. Everlyne Kawira',\n specialty: 'Pysician', \/* Note: Typo, usually 'Physician' *\/\n image: 'https:\/\/placehold.co\/400x400\/5cb85c\/ffffff?text=Dr.+Everlyne',\n bio: 'Dr. everlyne Kawira is a compassionate physician and a medical professional dedicated to maintaining and restoring human health. She diagnose illnesses, prescribe treatments, and provide preventive care, utilizing their extensive medical knowledge and clinical skills to improve patient well-being.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/9w_U9q_zT4g?autoplay=0&controls=1&showinfo=0&rel=0',\n clinicDays: 'Saturday (Full Day)'\n }\n ];\n\n \/\/ Get DOM elements\n const doctorsGrid = document.getElementById('doctors-grid');\n const doctorModal = document.getElementById('doctor-modal');\n const closeModalBtn = document.getElementById('close-modal');\n const modalDoctorImage = document.getElementById('modal-doctor-image');\n const modalDoctorName = document.getElementById('modal-doctor-name');\n const modalDoctorSpecialty = document.getElementById('modal-doctor-specialty');\n const modalClinicDays = document.getElementById('modal-clinic-days'); \/\/ NEW: Get clinic days element\n const modalDoctorBio = document.getElementById('modal-doctor-bio');\n const modalDoctorVideoContainer = document.getElementById('modal-doctor-video-container');\n\n \/**\n * Creates a doctor card HTML element.\n * @param {Object} doctor - The doctor data object.\n * @returns {HTMLElement} The created doctor card element.\n *\/\n function createDoctorCard(doctor) {\n const card = document.createElement('div');\n card.className = 'bg-white rounded-lg shadow-lg overflow-hidden flex flex-col items-center p-6 text-center transform transition-transform hover:scale-105 duration-300 ease-in-out cursor-pointer';\n card.setAttribute('data-id', doctor.id); \/\/ Store doctor ID for lookup\n\n card.innerHTML = `\n <img decoding=\"async\" src=\"${doctor.image}\" alt=\"${doctor.name}\" class=\"w-32 h-32 rounded-full object-cover border-4 border-indigo-200 mb-4 shadow-md\">\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-1\">${doctor.name}<\/h2>\n <p class=\"text-md text-indigo-600 mb-4\">${doctor.specialty}<\/p>\n <button class=\"view-profile-btn mt-auto bg-indigo-600 text-white py-2 px-5 rounded-full hover:bg-indigo-700 transition-colors duration-200 ease-in-out shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50\">\n View Profile\n <\/button>\n `;\n\n \/\/ Add event listener to the button on the card\n const viewProfileBtn = card.querySelector('.view-profile-btn');\n viewProfileBtn.addEventListener('click', () => openDoctorModal(doctor.id));\n\n return card;\n }\n\n \/**\n * Populates the doctors grid with cards.\n *\/\n function populateDoctorsGrid() {\n doctors.forEach(doctor => {\n const card = createDoctorCard(doctor);\n doctorsGrid.appendChild(card);\n });\n }\n\n \/**\n * Opens the doctor profile modal and populates it with data.\n * @param {string} doctorId - The ID of the doctor to display.\n *\/\n function openDoctorModal(doctorId) {\n const doctor = doctors.find(d => d.id === doctorId);\n if (doctor) {\n modalDoctorImage.src = doctor.image;\n modalDoctorImage.alt = doctor.name;\n modalDoctorName.textContent = doctor.name;\n modalDoctorSpecialty.textContent = doctor.specialty;\n modalClinicDays.textContent = `Clinic Days: ${doctor.clinicDays}`; \/\/ NEW: Set clinic days text\n modalDoctorBio.textContent = doctor.bio;\n\n \/\/ Dynamically create and embed the video iframe\n modalDoctorVideoContainer.innerHTML = ''; \/\/ Clear previous video\n if (doctor.videoUrl) {\n const iframe = document.createElement('iframe');\n iframe.src = doctor.videoUrl;\n iframe.setAttribute('frameborder', '0');\n iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');\n iframe.setAttribute('allowfullscreen', '');\n iframe.className = 'w-full h-full rounded-lg'; \/\/ Make iframe fill container\n modalDoctorVideoContainer.appendChild(iframe);\n } else {\n \/\/ Fallback for no video\n modalDoctorVideoContainer.innerHTML = `\n <div class=\"flex items-center justify-center w-full h-full text-gray-500 text-lg\">\n Video not available.\n <\/div>\n `;\n }\n\n doctorModal.classList.add('open');\n }\n }\n\n \/**\n * Closes the doctor profile modal.\n *\/\n function closeDoctorModal() {\n doctorModal.classList.remove('open');\n \/\/ Stop video playback when closing\n modalDoctorVideoContainer.innerHTML = '';\n }\n\n \/\/ Event Listeners\n closeModalBtn.addEventListener('click', closeDoctorModal);\n\n \/\/ Close modal when clicking outside the content\n doctorModal.addEventListener('click', (event) => {\n \/\/ Check if the click target is the modal overlay itself, not its children\n if (event.target === doctorModal) {\n closeDoctorModal();\n }\n });\n\n \/\/ Initialize on page load\n document.addEventListener('DOMContentLoaded', populateDoctorsGrid);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our Doctors Meet Our Esteemed Doctors Dedicated to your health and well-being, our team of specialists is here to provide exceptional care. About Me My Approach Watch a short video about my philosophy and patient care.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-11467","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/guardianhospitalmeru.com\/index.php\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"Our Doctors Meet Our Esteemed Doctors Dedicated to your health and well-being, our team of specialists is here to provide exceptional care. About Me My Approach Watch a short video about my philosophy and patient care.","_links":{"self":[{"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/pages\/11467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/comments?post=11467"}],"version-history":[{"count":34,"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/pages\/11467\/revisions"}],"predecessor-version":[{"id":11591,"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/pages\/11467\/revisions\/11591"}],"wp:attachment":[{"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/media?parent=11467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":11467,"date":"2025-06-27T17:58:34","date_gmt":"2025-06-27T17:58:34","guid":{"rendered":"https:\/\/guardianhospitalmeru.com\/?page_id=11467"},"modified":"2025-06-27T21:48:34","modified_gmt":"2025-06-27T21:48:34","slug":"our-team-2","status":"publish","type":"page","link":"https:\/\/guardianhospitalmeru.com\/index.php\/our-team-2\/","title":{"rendered":"Our Doctors"},"content":{"rendered":"\n\n\n\n \n \n Our Doctors<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n \/* Custom styles to ensure full height and smooth transitions *\/\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f3f4f6; \/* Light gray background *\/\n }\n .modal-overlay {\n background-color: rgba(0, 0, 0, 0.7); \/* Darker overlay *\/\n transition: opacity 0.3s ease-in-out;\n opacity: 0;\n pointer-events: none; \/* Allows clicks through when hidden *\/\n }\n .modal-overlay.open {\n opacity: 1;\n pointer-events: auto; \/* Re-enable clicks when open *\/\n }\n .modal-content {\n transform: translateY(20px); \/* Slight initial offset *\/\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n opacity: 0;\n }\n .modal-overlay.open .modal-content {\n transform: translateY(0);\n opacity: 1;\n }\n \/* Custom scrollbar for modal content if it overflows *\/\n .modal-scrollable-content::-webkit-scrollbar {\n width: 8px;\n }\n .modal-scrollable-content::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n }\n .modal-scrollable-content::-webkit-scrollbar-thumb {\n background: #cbd5e1; \/* Tailwind gray-300 *\/\n border-radius: 10px;\n }\n .modal-scrollable-content::-webkit-scrollbar-thumb:hover {\n background: #94a3b8; \/* Tailwind gray-400 *\/\n }\n\n \/* NEW: Full Width Fix for WordPress Content Areas *\/\n \/* These selectors target common WordPress content wrappers.\n You might need to adjust them based on your specific theme.\n Use your browser's \"Inspect Element\" tool to find the correct one. *\/\n .page-id-YOUR_PAGE_ID .site-content, \/* Replace YOUR_PAGE_ID with the actual ID of your doctor page *\/\n .page-template-full-width .entry-content,\n .page .entry-content,\n .single-page .entry-content,\n .wp-block-group.alignfull, \/* For Gutenberg full-width blocks *\/\n .wp-block-group.alignwide,\n .content-area,\n #primary,\n #main-content,\n .site-main {\n width: 100% !important;\n max-width: 100% !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n padding-left: 0 !important;\n padding-right: 0 !important;\n box-sizing: border-box; \/* Ensures padding is included in the width *\/\n }\n\n \/* Remove default WordPress padding if it's interfering *\/\n .entry-content > *,\n .page-content > * {\n max-width: 100% !important;\n margin-left: auto !important; \/* Re-center the internal content if needed *\/\n margin-right: auto !important;\n box-sizing: border-box;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen flex flex-col items-center py-10 px-4\">\n\n \n <header class=\"text-center mb-12\">\n <h1 class=\"text-5xl font-extrabold text-gray-900 leading-tight\">Meet Our Esteemed Doctors<\/h1>\n <p class=\"mt-4 text-xl text-gray-600 max-w-2xl mx-auto\">\n Dedicated to your health and well-being, our team of specialists is here to provide exceptional care.\n <\/p>\n <\/header>\n\n \n <main id=\"doctors-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 max-w-7xl w-full\">\n \n <\/main>\n\n \n <div id=\"doctor-modal\" class=\"modal-overlay fixed inset-0 flex items-center justify-center p-4 z-50\">\n <div class=\"modal-content bg-white rounded-lg shadow-xl p-6 w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col\">\n \n <div class=\"flex justify-end mb-4\">\n <button id=\"close-modal\" class=\"text-gray-500 hover:text-gray-700 focus:outline-none\">\n <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n\n <div class=\"modal-scrollable-content flex-grow overflow-y-auto pr-4 -mr-4\"> \n <div class=\"flex flex-col md:flex-row items-center md:items-start gap-8\">\n \n <div class=\"flex-shrink-0 text-center\">\n <img decoding=\"async\" id=\"modal-doctor-image\" class=\"w-48 h-48 md:w-64 md:h-64 rounded-full object-cover shadow-md mx-auto\"\n src=\"https:\/\/placehold.co\/256x256\/a0c4ff\/ffffff?text=Doctor\" alt=\"Doctor Image\">\n <h2 id=\"modal-doctor-name\" class=\"mt-4 text-3xl font-bold text-gray-900\"><\/h2>\n <p id=\"modal-doctor-specialty\" class=\"text-xl text-indigo-600\"><\/p>\n \n <p id=\"modal-clinic-days\" class=\"text-md text-gray-600 mt-2\"><\/p>\n <\/div>\n\n \n <div class=\"flex-grow text-gray-700\">\n <h3 class=\"text-2xl font-semibold mb-3 text-gray-800\">About Me<\/h3>\n <p id=\"modal-doctor-bio\" class=\"text-lg leading-relaxed mb-6\"><\/p>\n\n <h3 class=\"text-2xl font-semibold mb-3 text-gray-800\">My Approach<\/h3>\n <div id=\"modal-doctor-video-container\" class=\"w-full aspect-video bg-gray-200 rounded-lg overflow-hidden shadow-md\">\n \n <\/div>\n <p class=\"mt-4 text-sm text-gray-500\">\n Watch a short video about my philosophy and patient care.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Data for our doctors\n const doctors = [\n {\n id: 'dr-peter-mwika',\n name: 'Dr. Peter Mwika',\n specialty: 'Paediatric Surgeon',\n image: 'https:\/\/guardianhospitalmeru.com\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-14-at-13.54.52.webp',\n bio: 'Dr. Peter Mwika is a highly qualified Paediatric and general Surgeon in Guardian Hospital Meru Kenya, dedicated to children\u2019s surgical well-being.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/t0e2QsPAzuo?si=EMu2qugnY0lvjcK8&start=30',\n clinicDays: 'Friday and Saturday (9 AM - 5 PM)' \/\/ NEW: Clinic Days\n },\n {\n id: 'dr-mercy-gatua',\n name: 'Dr. Mercy Gatua',\n specialty: 'Oncologist',\n image: 'https:\/\/guardianhospitalmeru.com\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-14-141215.png',\n bio: 'Dr. Mercy Njeri Gatua is a dedicated physician specializing in Internal Medicine with a subspecialty in Medical Oncology, practicing in Nairobi, Kenya. She holds an MBChB from 2005, an M.Med in Internal Medicine (2017), and a Fellowship in Medical Oncology (2019), all from the University of Nairobi. She is a Medical Oncologist at Guardian Hospital Meru and Kenyatta University Teaching Research and Referral Hospital.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/S_fQ9s2-o7M?autoplay=0&controls=1&showinfo=0&rel=0', \/\/ Replace with actual video URL\n clinicDays: 'Friday (9 AM - 5 PM)' \/\/ NEW: Clinic Days\n },\n {\n id: 'dr-bruce-semo',\n name: 'Dr. Bruce Semo',\n specialty: 'Gynaecologist',\n image: 'https:\/\/guardianhospitalmeru.com\/wp-content\/uploads\/2025\/06\/1711033011374-1.webp',\n bio: 'Dr. Bruce Semo is a Consultant Obstetrician and Gynecologist in Guardian Hospital Meru, Kenya. He specializes in advanced minimally invasive gynecological surgery, high-risk pregnancy management, and reproductive health.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/M9O_x91p3dI?autoplay=0&controls=1&showinfo=0&rel=0', \/\/ Replace with actual video URL\n clinicDays: 'Friday (By Appointment Only)' \/\/ NEW: Clinic Days\n },\n {\n id: 'dr-sila-ontita',\n name: 'Dr. Sila Ontita',\n specialty: 'Orthopedic Surgeon',\n image: 'https:\/\/placehold.co\/400x400\/f39c12\/ffffff?text=Dr.+Sila Ontita',\n bio: 'Dr. Sila Ontita is a highly skilled orthopedic surgeon specializing in sports injuries and arthroscopic procedures. He is committed to helping athletes and active individuals return to their peak performance. Dr. Sterling is recognized for his meticulous surgical techniques and his dedication to patient recovery.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/videoseries?list=PLx0sYbCqOb8TBPRdmCgA4GxL_yqTj_s4J', \/\/ Example playlist or different video\n clinicDays: 'Wednesday (11 AM - 4 PM)' \/\/ NEW: Clinic Days\n },\n {\n id: 'dr-beth',\n name: 'Dr. Beth',\n specialty: 'Dermatologist',\n image: 'https:\/\/placehold.co\/400x400\/e74c3c\/ffffff?text=Dr.+Beth',\n bio: 'Dr. Beth is a compassionate dermatologist specializing in both medical and cosmetic dermatology. She focuses on skin cancer prevention, acne treatment, and anti-aging solutions. Dr. Monroe is passionate about helping her patients achieve healthy, radiant skin.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/q_mYm1X4R1E?autoplay=0&controls=1&showinfo=0&rel=0',\n clinicDays: 'Wednesday (11 AM - 5 PM)'\n },\n {\n id: 'dr-douglas-kiprotich',\n name: 'Dr. Douglas Kiprotich',\n specialty: 'General Practitioner',\n image: 'https:\/\/guardianhospitalmeru.com\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-14-140449.webp',\n bio: 'Dr. Douglas kiprotich is a dedicated General Practitioner, providing comprehensive primary care for patients of all ages. He believes in building strong, trusting relationships with his patients to provide personalized and preventive healthcare. Dr. Kiprotich is committed to ongoing education and staying abreast of the latest medical advancements.', \/\/ Fixed: Added missing comma here\n videoUrl: 'https:\/\/www.youtube.com\/embed\/e_yWJ_oM1pY?autoplay=0&controls=1&showinfo=0&rel=0',\n clinicDays: 'Monday - Friday (General Hours)'\n },\n {\n id: 'dr-jeremiah-njogu',\n name: 'Dr. Jeremiah Njogu',\n specialty: 'Urologist',\n image: 'https:\/\/placehold.co\/400x400\/a35d6a\/ffffff?text=Dr.+Njogu',\n bio: 'Dr. Jeremiah Njogu is a Consultant General Surgeon and Urologist practicing in Kenya. He has over 10 years of experience and is affiliated with Kenyatta National Hospital. His education includes an M.B.Ch.B, M.Med Surgery (UON), and specialized training in Urology and Renal',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/K_BwF8T_B2U?autoplay=0&controls=1&showinfo=0&rel=0',\n clinicDays: 'Thursday (11 AM - 5 PM)'\n },\n {\n id: 'dr-everlyne-kawira', \/* Fixed: Corrected ID from 'dr-everlyne Kawira' to 'dr-everlyne-kawira' *\/\n name: 'Dr. Everlyne Kawira',\n specialty: 'Pysician', \/* Note: Typo, usually 'Physician' *\/\n image: 'https:\/\/placehold.co\/400x400\/5cb85c\/ffffff?text=Dr.+Everlyne',\n bio: 'Dr. everlyne Kawira is a compassionate physician and a medical professional dedicated to maintaining and restoring human health. She diagnose illnesses, prescribe treatments, and provide preventive care, utilizing their extensive medical knowledge and clinical skills to improve patient well-being.',\n videoUrl: 'https:\/\/www.youtube.com\/embed\/9w_U9q_zT4g?autoplay=0&controls=1&showinfo=0&rel=0',\n clinicDays: 'Saturday (Full Day)'\n }\n ];\n\n \/\/ Get DOM elements\n const doctorsGrid = document.getElementById('doctors-grid');\n const doctorModal = document.getElementById('doctor-modal');\n const closeModalBtn = document.getElementById('close-modal');\n const modalDoctorImage = document.getElementById('modal-doctor-image');\n const modalDoctorName = document.getElementById('modal-doctor-name');\n const modalDoctorSpecialty = document.getElementById('modal-doctor-specialty');\n const modalClinicDays = document.getElementById('modal-clinic-days'); \/\/ NEW: Get clinic days element\n const modalDoctorBio = document.getElementById('modal-doctor-bio');\n const modalDoctorVideoContainer = document.getElementById('modal-doctor-video-container');\n\n \/**\n * Creates a doctor card HTML element.\n * @param {Object} doctor - The doctor data object.\n * @returns {HTMLElement} The created doctor card element.\n *\/\n function createDoctorCard(doctor) {\n const card = document.createElement('div');\n card.className = 'bg-white rounded-lg shadow-lg overflow-hidden flex flex-col items-center p-6 text-center transform transition-transform hover:scale-105 duration-300 ease-in-out cursor-pointer';\n card.setAttribute('data-id', doctor.id); \/\/ Store doctor ID for lookup\n\n card.innerHTML = `\n <img decoding=\"async\" src=\"${doctor.image}\" alt=\"${doctor.name}\" class=\"w-32 h-32 rounded-full object-cover border-4 border-indigo-200 mb-4 shadow-md\">\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-1\">${doctor.name}<\/h2>\n <p class=\"text-md text-indigo-600 mb-4\">${doctor.specialty}<\/p>\n <button class=\"view-profile-btn mt-auto bg-indigo-600 text-white py-2 px-5 rounded-full hover:bg-indigo-700 transition-colors duration-200 ease-in-out shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50\">\n View Profile\n <\/button>\n `;\n\n \/\/ Add event listener to the button on the card\n const viewProfileBtn = card.querySelector('.view-profile-btn');\n viewProfileBtn.addEventListener('click', () => openDoctorModal(doctor.id));\n\n return card;\n }\n\n \/**\n * Populates the doctors grid with cards.\n *\/\n function populateDoctorsGrid() {\n doctors.forEach(doctor => {\n const card = createDoctorCard(doctor);\n doctorsGrid.appendChild(card);\n });\n }\n\n \/**\n * Opens the doctor profile modal and populates it with data.\n * @param {string} doctorId - The ID of the doctor to display.\n *\/\n function openDoctorModal(doctorId) {\n const doctor = doctors.find(d => d.id === doctorId);\n if (doctor) {\n modalDoctorImage.src = doctor.image;\n modalDoctorImage.alt = doctor.name;\n modalDoctorName.textContent = doctor.name;\n modalDoctorSpecialty.textContent = doctor.specialty;\n modalClinicDays.textContent = `Clinic Days: ${doctor.clinicDays}`; \/\/ NEW: Set clinic days text\n modalDoctorBio.textContent = doctor.bio;\n\n \/\/ Dynamically create and embed the video iframe\n modalDoctorVideoContainer.innerHTML = ''; \/\/ Clear previous video\n if (doctor.videoUrl) {\n const iframe = document.createElement('iframe');\n iframe.src = doctor.videoUrl;\n iframe.setAttribute('frameborder', '0');\n iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');\n iframe.setAttribute('allowfullscreen', '');\n iframe.className = 'w-full h-full rounded-lg'; \/\/ Make iframe fill container\n modalDoctorVideoContainer.appendChild(iframe);\n } else {\n \/\/ Fallback for no video\n modalDoctorVideoContainer.innerHTML = `\n <div class=\"flex items-center justify-center w-full h-full text-gray-500 text-lg\">\n Video not available.\n <\/div>\n `;\n }\n\n doctorModal.classList.add('open');\n }\n }\n\n \/**\n * Closes the doctor profile modal.\n *\/\n function closeDoctorModal() {\n doctorModal.classList.remove('open');\n \/\/ Stop video playback when closing\n modalDoctorVideoContainer.innerHTML = '';\n }\n\n \/\/ Event Listeners\n closeModalBtn.addEventListener('click', closeDoctorModal);\n\n \/\/ Close modal when clicking outside the content\n doctorModal.addEventListener('click', (event) => {\n \/\/ Check if the click target is the modal overlay itself, not its children\n if (event.target === doctorModal) {\n closeDoctorModal();\n }\n });\n\n \/\/ Initialize on page load\n document.addEventListener('DOMContentLoaded', populateDoctorsGrid);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our Doctors Meet Our Esteemed Doctors Dedicated to your health and well-being, our team of specialists is here to provide exceptional care. About Me My Approach Watch a short video about my philosophy and patient care.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-11467","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/guardianhospitalmeru.com\/index.php\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"Our Doctors Meet Our Esteemed Doctors Dedicated to your health and well-being, our team of specialists is here to provide exceptional care. About Me My Approach Watch a short video about my philosophy and patient care.","_links":{"self":[{"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/pages\/11467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/comments?post=11467"}],"version-history":[{"count":34,"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/pages\/11467\/revisions"}],"predecessor-version":[{"id":11591,"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/pages\/11467\/revisions\/11591"}],"wp:attachment":[{"href":"https:\/\/guardianhospitalmeru.com\/index.php\/wp-json\/wp\/v2\/media?parent=11467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}