Medical Center Hero Slider<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n @keyframes zoomFade {\r\n from { transform: scale(1.05); opacity: 0; }\r\n to { transform: scale(1); opacity: 1; }\r\n }\r\n .slide-active {\r\n display: block;\r\n animation: zoomFade 1s ease-out forwards;\r\n }\r\n .slide-hidden {\r\n display: none;\r\n }\r\n .glass-btn {\r\n border: 2px solid white;\r\n background: transparent;\r\n transition: all 0.3s ease;\r\n }\r\n .glass-btn:hover {\r\n background: white;\r\n color: #0891b2; \/* cyan-600 *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-black overflow-x-hidden\">\r\n\r\n \r\n <section class=\"relative w-full h-screen overflow-hidden\">\r\n \r\n \r\n <div id=\"slider\" class=\"relative w-full h-full\">\r\n \r\n \r\n <div class=\"slide slide-active absolute inset-0 w-full h-full z-10\">\r\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/10292620\/pexels-photo-10292620.jpeg\" \r\n alt=\"Medical Service\" \r\n class=\"w-full h-full object-cover\">\r\n <div class=\"absolute inset-0 bg-black\/30\"><\/div>\r\n <div class=\"absolute inset-0 flex items-center justify-center\">\r\n <div class=\"container mx-auto px-6 text-center text-white max-w-4xl\">\r\n <h1 class=\"text-4xl md:text-7xl font-bold mb-6 drop-shadow-lg tracking-tight\">\r\n Best Medical Services\r\n <\/h1>\r\n <p class=\"text-base md:text-lg text-white\/90 mb-10 max-w-2xl mx-auto leading-relaxed drop-shadow-md\">\r\n Providing world-class healthcare with state-of-the-art technology and compassionate care.\r\n <\/p>\r\n <button class=\"glass-btn px-10 py-4 text-sm font-bold uppercase tracking-widest\">\r\n Shop Now\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-hidden absolute inset-0 w-full h-full z-0\">\r\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/13697927\/pexels-photo-13697927.jpeg\" \r\n alt=\"Clinical Support\" \r\n class=\"w-full h-full object-cover\">\r\n <div class=\"absolute inset-0 bg-black\/30\"><\/div>\r\n <div class=\"absolute inset-0 flex items-center justify-center\">\r\n <div class=\"container mx-auto px-6 text-center text-white max-w-4xl\">\r\n <h1 class=\"text-4xl md:text-7xl font-bold mb-6 drop-shadow-lg tracking-tight\">\r\n Expert Clinical Support\r\n <\/h1>\r\n <p class=\"text-base md:text-lg text-white\/90 mb-10 max-w-2xl mx-auto leading-relaxed drop-shadow-md\">\r\n Dedicated to excellence in every patient interaction and medical procedure.\r\n <\/p>\r\n <button class=\"glass-btn px-10 py-4 text-sm font-bold uppercase tracking-widest\">\r\n Shop Now\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <button id=\"prevBtn\" class=\"absolute left-4 md:left-8 top-1\/2 -translate-y-1\/2 z-30 text-white\/40 hover:text-white transition-all transform hover:scale-110\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-10 h-10 md:w-16 md:h-16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/>\r\n <\/svg>\r\n <\/button>\r\n <button id=\"nextBtn\" class=\"absolute right-4 md:right-8 top-1\/2 -translate-y-1\/2 z-30 text-white\/40 hover:text-white transition-all transform hover:scale-110\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-10 h-10 md:w-16 md:h-16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/button>\r\n\r\n \r\n <div class=\"absolute bottom-10 left-1\/2 -translate-x-1\/2 z-30 flex gap-4\" id=\"dotsContainer\">\r\n <button class=\"dot w-3 h-3 rounded-full border-2 border-white bg-white scale-125 transition-all duration-300\"><\/button>\r\n <button class=\"dot w-3 h-3 rounded-full border-2 border-white bg-transparent opacity-40 hover:opacity-70 transition-all duration-300\"><\/button>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <script>\r\n const slides = document.querySelectorAll('.slide');\r\n const dots = document.querySelectorAll('.dot');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n let currentSlide = 0;\r\n let slideInterval;\r\n\r\n function showSlide(index) {\r\n \/\/ Reset slides\r\n slides.forEach((slide, i) => {\r\n slide.classList.remove('slide-active', 'z-10');\r\n slide.classList.add('slide-hidden', 'z-0');\r\n dots[i].classList.remove('bg-white', 'scale-125');\r\n dots[i].classList.add('bg-transparent', 'opacity-40');\r\n });\r\n\r\n \/\/ Show current\r\n currentSlide = (index + slides.length) % slides.length;\r\n slides[currentSlide].classList.remove('slide-hidden', 'z-0');\r\n slides[currentSlide].classList.add('slide-active', 'z-10');\r\n dots[currentSlide].classList.add('bg-white', 'scale-125');\r\n dots[currentSlide].classList.remove('bg-transparent', 'opacity-40');\r\n }\r\n\r\n function next() {\r\n showSlide(currentSlide + 1);\r\n }\r\n\r\n function prev() {\r\n showSlide(currentSlide - 1);\r\n }\r\n\r\n function startAutoPlay() {\r\n stopAutoPlay();\r\n slideInterval = setInterval(next, 5000);\r\n }\r\n\r\n function stopAutoPlay() {\r\n clearInterval(slideInterval);\r\n }\r\n\r\n \/\/ Event Listeners\r\n nextBtn.addEventListener('click', () => {\r\n next();\r\n startAutoPlay();\r\n });\r\n\r\n prevBtn.addEventListener('click', () => {\r\n prev();\r\n startAutoPlay();\r\n });\r\n\r\n dots.forEach((dot, index) => {\r\n dot.addEventListener('click', () => {\r\n showSlide(index);\r\n startAutoPlay();\r\n });\r\n });\r\n\r\n \/\/ Initialize\r\n window.onload = startAutoPlay;\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Medical Center Hero Slider Best Medical Services Providing world-class healthcare with state-of-the-art technology and compassionate care. Shop Now Expert Clinical Support Dedicated to excellence in every patient interaction and medical procedure. Shop Now<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"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":""},"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-442","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/pages\/442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/comments?post=442"}],"version-history":[{"count":3,"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/pages\/442\/revisions"}],"predecessor-version":[{"id":2108,"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/pages\/442\/revisions\/2108"}],"wp:attachment":[{"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/media?parent=442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Medical Center Hero Slider<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n @keyframes zoomFade {\r\n from { transform: scale(1.05); opacity: 0; }\r\n to { transform: scale(1); opacity: 1; }\r\n }\r\n .slide-active {\r\n display: block;\r\n animation: zoomFade 1s ease-out forwards;\r\n }\r\n .slide-hidden {\r\n display: none;\r\n }\r\n .glass-btn {\r\n border: 2px solid white;\r\n background: transparent;\r\n transition: all 0.3s ease;\r\n }\r\n .glass-btn:hover {\r\n background: white;\r\n color: #0891b2; \/* cyan-600 *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-black overflow-x-hidden\">\r\n\r\n \r\n <section class=\"relative w-full h-screen overflow-hidden\">\r\n \r\n \r\n <div id=\"slider\" class=\"relative w-full h-full\">\r\n \r\n \r\n <div class=\"slide slide-active absolute inset-0 w-full h-full z-10\">\r\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/10292620\/pexels-photo-10292620.jpeg\" \r\n alt=\"Medical Service\" \r\n class=\"w-full h-full object-cover\">\r\n <div class=\"absolute inset-0 bg-black\/30\"><\/div>\r\n <div class=\"absolute inset-0 flex items-center justify-center\">\r\n <div class=\"container mx-auto px-6 text-center text-white max-w-4xl\">\r\n <h1 class=\"text-4xl md:text-7xl font-bold mb-6 drop-shadow-lg tracking-tight\">\r\n Best Medical Services\r\n <\/h1>\r\n <p class=\"text-base md:text-lg text-white\/90 mb-10 max-w-2xl mx-auto leading-relaxed drop-shadow-md\">\r\n Providing world-class healthcare with state-of-the-art technology and compassionate care.\r\n <\/p>\r\n <button class=\"glass-btn px-10 py-4 text-sm font-bold uppercase tracking-widest\">\r\n Shop Now\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-hidden absolute inset-0 w-full h-full z-0\">\r\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/13697927\/pexels-photo-13697927.jpeg\" \r\n alt=\"Clinical Support\" \r\n class=\"w-full h-full object-cover\">\r\n <div class=\"absolute inset-0 bg-black\/30\"><\/div>\r\n <div class=\"absolute inset-0 flex items-center justify-center\">\r\n <div class=\"container mx-auto px-6 text-center text-white max-w-4xl\">\r\n <h1 class=\"text-4xl md:text-7xl font-bold mb-6 drop-shadow-lg tracking-tight\">\r\n Expert Clinical Support\r\n <\/h1>\r\n <p class=\"text-base md:text-lg text-white\/90 mb-10 max-w-2xl mx-auto leading-relaxed drop-shadow-md\">\r\n Dedicated to excellence in every patient interaction and medical procedure.\r\n <\/p>\r\n <button class=\"glass-btn px-10 py-4 text-sm font-bold uppercase tracking-widest\">\r\n Shop Now\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <button id=\"prevBtn\" class=\"absolute left-4 md:left-8 top-1\/2 -translate-y-1\/2 z-30 text-white\/40 hover:text-white transition-all transform hover:scale-110\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-10 h-10 md:w-16 md:h-16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/>\r\n <\/svg>\r\n <\/button>\r\n <button id=\"nextBtn\" class=\"absolute right-4 md:right-8 top-1\/2 -translate-y-1\/2 z-30 text-white\/40 hover:text-white transition-all transform hover:scale-110\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-10 h-10 md:w-16 md:h-16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/button>\r\n\r\n \r\n <div class=\"absolute bottom-10 left-1\/2 -translate-x-1\/2 z-30 flex gap-4\" id=\"dotsContainer\">\r\n <button class=\"dot w-3 h-3 rounded-full border-2 border-white bg-white scale-125 transition-all duration-300\"><\/button>\r\n <button class=\"dot w-3 h-3 rounded-full border-2 border-white bg-transparent opacity-40 hover:opacity-70 transition-all duration-300\"><\/button>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <script>\r\n const slides = document.querySelectorAll('.slide');\r\n const dots = document.querySelectorAll('.dot');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n let currentSlide = 0;\r\n let slideInterval;\r\n\r\n function showSlide(index) {\r\n \/\/ Reset slides\r\n slides.forEach((slide, i) => {\r\n slide.classList.remove('slide-active', 'z-10');\r\n slide.classList.add('slide-hidden', 'z-0');\r\n dots[i].classList.remove('bg-white', 'scale-125');\r\n dots[i].classList.add('bg-transparent', 'opacity-40');\r\n });\r\n\r\n \/\/ Show current\r\n currentSlide = (index + slides.length) % slides.length;\r\n slides[currentSlide].classList.remove('slide-hidden', 'z-0');\r\n slides[currentSlide].classList.add('slide-active', 'z-10');\r\n dots[currentSlide].classList.add('bg-white', 'scale-125');\r\n dots[currentSlide].classList.remove('bg-transparent', 'opacity-40');\r\n }\r\n\r\n function next() {\r\n showSlide(currentSlide + 1);\r\n }\r\n\r\n function prev() {\r\n showSlide(currentSlide - 1);\r\n }\r\n\r\n function startAutoPlay() {\r\n stopAutoPlay();\r\n slideInterval = setInterval(next, 5000);\r\n }\r\n\r\n function stopAutoPlay() {\r\n clearInterval(slideInterval);\r\n }\r\n\r\n \/\/ Event Listeners\r\n nextBtn.addEventListener('click', () => {\r\n next();\r\n startAutoPlay();\r\n });\r\n\r\n prevBtn.addEventListener('click', () => {\r\n prev();\r\n startAutoPlay();\r\n });\r\n\r\n dots.forEach((dot, index) => {\r\n dot.addEventListener('click', () => {\r\n showSlide(index);\r\n startAutoPlay();\r\n });\r\n });\r\n\r\n \/\/ Initialize\r\n window.onload = startAutoPlay;\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Medical Center Hero Slider Best Medical Services Providing world-class healthcare with state-of-the-art technology and compassionate care. Shop Now Expert Clinical Support Dedicated to excellence in every patient interaction and medical procedure. Shop Now<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"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":""},"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-442","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/pages\/442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/comments?post=442"}],"version-history":[{"count":3,"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/pages\/442\/revisions"}],"predecessor-version":[{"id":2108,"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/pages\/442\/revisions\/2108"}],"wp:attachment":[{"href":"https:\/\/upwebservices.com\/gradica-test\/wp-json\/wp\/v2\/media?parent=442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}