Gallery | Renacare - Our Centres, Team & Facilities
*{margin:0;padding:0;box-sizing:border-box}
:root{--navy:#0a1f44;--navy-light:#0f2d5e;--teal:#0D9488;--teal-light:#14B8A6;--orange:#f7941d;--orange-hover:#e5850f;--white:#ffffff;--light:#F0F6FC;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-400:#94a3b8;--gray-600:#475569;--gray-800:#1e293b;--green:#10B981;--border:#e2e8f0;--shadow-sm:0 1px 3px rgba(0,0,0,0.08);--shadow-md:0 4px 16px rgba(0,0,0,0.08);--shadow-lg:0 10px 40px rgba(0,0,0,0.1);--shadow-xl:0 20px 60px rgba(0,0,0,0.12);--radius:12px;--radius-lg:20px}
html{scroll-behavior:smooth}body{font-family:'Inter',sans-serif;color:var(--gray-600);line-height:1.7;background:var(--white);overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',serif;color:var(--navy);font-weight:700;line-height:1.2}
.container{max-width:1280px;margin:0 auto;padding:0 2rem}img{max-width:100%;height:auto}
.navbar{position:fixed;top:0;left:0;right:0;background:var(--white);z-index:1000;padding:0.8rem 2rem;transition:all 0.3s ease}.navbar.scrolled{box-shadow:var(--shadow-md)}.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.nav-logo{display:flex;align-items:center;gap:0.8rem;text-decoration:none}.nav-logo img{height:48px;width:auto}.nav-logo-text{display:flex;flex-direction:column}.nav-logo-text h3{font-size:1.3rem;font-family:'Playfair Display',serif;color:var(--navy);margin:0;line-height:1.1}.nav-logo-text span{font-size:0.7rem;color:var(--teal);font-weight:500;letter-spacing:1px;text-transform:uppercase}.nav-menu{display:flex;list-style:none;gap:2rem;align-items:center}.nav-menu a{text-decoration:none;color:var(--gray-600);font-weight:500;font-size:0.9rem;transition:color 0.3s;position:relative}.nav-menu a:hover{color:var(--teal)}.nav-menu a.active{color:var(--teal)}.nav-menu a.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--teal);border-radius:2px}.nav-cta{background:var(--orange);color:var(--white)!important;padding:0.7rem 1.5rem;border-radius:8px;font-weight:600;font-size:0.9rem;transition:all 0.3s;display:inline-flex;align-items:center;gap:0.5rem}.nav-cta:hover{background:var(--orange-hover)}.hamburger{display:none;flex-direction:column;cursor:pointer;gap:5px;padding:5px}.hamburger span{width:24px;height:2.5px;background:var(--navy);border-radius:2px}
.page-hero{padding:8rem 0 4rem;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 50%,#1a3a6b 100%);position:relative;overflow:hidden;text-align:center}.page-hero::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(13,148,136,0.15) 0%,transparent 70%)}.page-hero .container{position:relative;z-index:2}.page-hero-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(13,148,136,0.15);border:1px solid rgba(13,148,136,0.3);padding:0.4rem 1rem;border-radius:50px;color:var(--teal-light);font-size:0.8rem;font-weight:500;margin-bottom:1.5rem}.page-hero h1{font-size:3rem;color:var(--white);margin-bottom:1rem}.page-hero h1 span{color:var(--orange)}.page-hero p{font-size:1.15rem;color:rgba(255,255,255,0.8);max-width:700px;margin:0 auto 2rem;line-height:1.8}.breadcrumb{display:flex;justify-content:center;gap:0.5rem;font-size:0.85rem;color:rgba(255,255,255,0.5)}.breadcrumb a{color:rgba(255,255,255,0.7);text-decoration:none}
.section{padding:5rem 0}
/* FILTER TABS */
.filter-tabs{display:flex;justify-content:center;gap:0.8rem;flex-wrap:wrap;margin-bottom:3rem}
.filter-tab{padding:0.6rem 1.5rem;border-radius:50px;border:1px solid var(--border);background:var(--white);color:var(--gray-600);font-weight:500;font-size:0.85rem;cursor:pointer;transition:all 0.3s}
.filter-tab:hover{border-color:var(--teal);color:var(--teal)}
.filter-tab.active{background:var(--teal);color:white;border-color:var(--teal)}
/* GALLERY GRID */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.gallery-item{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;aspect-ratio:1;background:var(--gray-100)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-overlay{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(10,31,68,0.8));opacity:0;transition:opacity 0.3s;display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-overlay h4{color:white;font-size:0.9rem;font-family:'Inter',sans-serif;font-weight:600}
.gallery-overlay span{color:rgba(255,255,255,0.7);font-size:0.75rem}
.gallery-item.wide{grid-column:span 2}
.gallery-item.tall{grid-row:span 2}
/* LIGHTBOX */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:9999;align-items:center;justify-content:center;padding:2rem}
.lightbox.active{display:flex}
.lightbox img{max-width:90%;max-height:85vh;border-radius:var(--radius);object-fit:contain}
.lightbox-close{position:absolute;top:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.1);color:white;border:none;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.3s}
.lightbox-close:hover{background:rgba(255,255,255,0.2)}
.lightbox-caption{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:white;text-align:center}
.lightbox-caption h4{font-size:1rem;font-family:'Inter',sans-serif;margin-bottom:0.3rem}
.lightbox-caption span{font-size:0.85rem;color:rgba(255,255,255,0.7)}
.cta-section{background:linear-gradient(135deg,var(--teal) 0%,#0D7B71 100%);padding:5rem 0;text-align:center;position:relative;overflow:hidden}.cta-section::before{content:'';position:absolute;top:-50%;right:-20%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.08),transparent)}.cta-section h2{color:var(--white);font-size:2.5rem;margin-bottom:1rem}.cta-section p{color:rgba(255,255,255,0.85);font-size:1.1rem;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}.btn-primary{background:var(--orange);color:var(--white);padding:1rem 2rem;border-radius:10px;text-decoration:none;font-weight:600;font-size:1rem;transition:all 0.3s;display:inline-flex;align-items:center;gap:0.5rem;border:none;cursor:pointer}.btn-primary:hover{background:var(--orange-hover);transform:translateY(-2px)}.btn-secondary{background:transparent;color:var(--white);padding:1rem 2rem;border-radius:10px;text-decoration:none;font-weight:600;font-size:1rem;border:2px solid rgba(255,255,255,0.3);transition:all 0.3s;display:inline-flex;align-items:center;gap:0.5rem}.btn-secondary:hover{border-color:var(--white);background:rgba(255,255,255,0.1)}
.footer{background:var(--navy);padding:4rem 0 0;color:rgba(255,255,255,0.7)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}.footer h3{color:var(--white);font-size:1.3rem;margin-bottom:1.5rem;font-family:'Playfair Display',serif}.footer-about p{font-size:0.9rem;line-height:1.8;margin-bottom:1.5rem}.footer-social{display:flex;gap:0.8rem}.footer-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all 0.3s}.footer-social a:hover{background:var(--teal);color:var(--white)}.footer-links{list-style:none}.footer-links li{margin-bottom:0.8rem}.footer-links a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:0.9rem;display:flex;align-items:center;gap:0.5rem;transition:color 0.3s}.footer-links a:hover{color:var(--teal-light)}.footer-links a i{font-size:0.7rem;color:var(--teal)}.footer-contact li{list-style:none;display:flex;align-items:flex-start;gap:0.8rem;margin-bottom:1rem;font-size:0.9rem}.footer-contact i{color:var(--teal);margin-top:0.2rem;width:16px}.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center;font-size:0.8rem}
.whatsapp-float{position:fixed;bottom:2rem;right:2rem;z-index:999;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.6rem;text-decoration:none;box-shadow:0 4px 20px rgba(37,211,102,0.4);transition:all 0.3s;animation:pulse-wa 2s infinite}.whatsapp-float:hover{transform:scale(1.1)}@keyframes pulse-wa{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.4)}50%{box-shadow:0 4px 30px rgba(37,211,102,0.6)}}
@media(max-width:1024px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.nav-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--white);flex-direction:column;justify-content:center;align-items:center;gap:2rem;z-index:999}.nav-menu.active{display:flex}.hamburger{display:flex}.page-hero{padding:7rem 0 3rem}.page-hero h1{font-size:2.2rem}.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-item.wide{grid-column:span 1}.gallery-item.tall{grid-row:span 1}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:0.5rem;text-align:center}}
@media(max-width:480px){.gallery-grid{grid-template-columns:1fr}}
Photo Gallery
Our Gallery
Take a visual tour of our modern dialysis centres, advanced equipment, dedicated medical team, and the compassionate care environment at Renacare.
Modern Centre Reception
Centres
Advanced Dialysis Machines
Equipment
Expert Nephrologist
Team
Compassionate Patient Care
Patient Care
Centre Interior
Centres
Specialist Consultation
Team
State-of-the-Art Equipment
Equipment
Patient Wellness
Patient Care
Community Health Camp
Events
Partner Hospital Facility
Centres
Dedicated Nursing Staff
Team
Medical Conference
Events
Visit Our Centres in Person
Experience our world-class facilities firsthand. Schedule a tour of your nearest Renacare dialysis centre today.
![]()
window.addEventListener('scroll',function(){document.getElementById('navbar').classList.toggle('scrolled',window.scrollY>50)});
function filterGallery(cat,btn){
document.querySelectorAll('.filter-tab').forEach(function(t){t.classList.remove('active')});
btn.classList.add('active');
document.querySelectorAll('.gallery-item').forEach(function(item){
if(cat==='all'||item.dataset.cat===cat){item.style.display=''}
else{item.style.display='none'}
});
}
function openLightbox(el){
var img=el.querySelector('img');
var overlay=el.querySelector('.gallery-overlay');
document.getElementById('lightboxImg').src=img.src;
document.getElementById('lightboxTitle').textContent=overlay.querySelector('h4').textContent;
document.getElementById('lightboxCat').textContent=overlay.querySelector('span').textContent;
document.getElementById('lightbox').classList.add('active');
document.body.style.overflow='hidden';
}
function closeLightbox(){
document.getElementById('lightbox').classList.remove('active');
document.body.style.overflow='';
}
document.addEventListener('keydown',function(e){if(e.key==='Escape')closeLightbox()});