NOVA CARE Premium Healthcare Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NOVA CARE | Premium Healthcare</title>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=Outfit:wght@300;500;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

</head>
<body>

<div class="ambient-bg">
        <div class="glow-orb orb-1"></div>
        <div class="glow-orb orb-2"></div>
    </div>
    <div class="ecg-bg"></div>

<div class="cursor-dot" id="c-dot"></div>
    <div class="cursor-ring" id="c-ring"></div>

<nav class="glass reveal active" id="navbar">
        <div class="logo"><i class="fa-solid fa-staff-snake"></i> NOVA CARE</div>
        <ul class="nav-links">
            <li><a href="#hero" class="mag-btn">Home</a></li>
            <li><a href="#about" class="mag-btn">About Us</a></li>
            <li><a href="#departments" class="mag-btn">Departments</a></li>
            <li><a href="#doctors" class="mag-btn">Our Doctors</a></li>
        </ul>
        <div style="display: flex; gap: 15px;">
            <a href="#" class="btn mag-btn" style="padding: 10px 20px; font-size: 0.8rem;">Book Appointment</a>
            <a href="#emergency" class="btn btn-emergency mag-btn" style="padding: 10px 20px; font-size: 0.8rem;"><i class="fa-solid fa-phone"></i> Emergency</a>
        </div>
    </nav>

<section id="hero">
        
        <div class="slide active">
            <img src="https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=2000&q=80" class="slide-bg" alt="Hospital Building">
            <div class="hero-content">
                <span class="sec-subtitle">Welcome to Nova Care</span>
                <h1>Advanced Healthcare <br><span>Human Touch.</span></h1>
                <p>Equipped with state-of-the-art technology and globally recognized medical professionals, we provide compassionate care when you need it most.</p>
                <div class="hero-btns">
                    <a href="#departments" class="btn mag-btn">Explore Services</a>
                    <a href="#doctors" class="btn mag-btn" style="background:transparent; color:#fff;">Find a Doctor</a>
                </div>
            </div>
        </div>
        
        <div class="slide">
            <img src="https://images.unsplash.com/photo-1551076805-e1869043e560?auto=format&fit=crop&w=2000&q=80" class="slide-bg" alt="Surgery">
            <div class="hero-content">
                <span class="sec-subtitle">Elite Specialists</span>
                <h1>Precision in <br><span>Every Procedure.</span></h1>
                <p>Our surgical suites integrate the latest robotic and minimally invasive technologies to ensure faster recovery and optimal outcomes.</p>
                <div class="hero-btns">
                    <a href="#about" class="btn mag-btn">Why Choose Us</a>
                </div>
            </div>
        </div>
        
        <div class="slider-controls">
            <div class="ctrl-dot active mag-btn" onclick="setSlide(0)"></div>
            <div class="ctrl-dot mag-btn" onclick="setSlide(1)"></div>
        </div>
    </section>

<section id="marquee-sec">
        <div class="marquee mag-btn">
            <span><i class="fa-solid fa-heart-pulse"></i> Cardiology</span>
            <span><i class="fa-solid fa-brain"></i> Neurology</span>
            <span><i class="fa-solid fa-bone"></i> Orthopedics</span>
            <span><i class="fa-solid fa-baby"></i> Pediatrics</span>
            <span><i class="fa-solid fa-eye"></i> Ophthalmology</span>
            <span><i class="fa-solid fa-heart-pulse"></i> Cardiology</span>
            <span><i class="fa-solid fa-brain"></i> Neurology</span>
            <span><i class="fa-solid fa-bone"></i> Orthopedics</span>
            <span><i class="fa-solid fa-baby"></i> Pediatrics</span>
            <span><i class="fa-solid fa-eye"></i> Ophthalmology</span>
        </div>
    </section>

<section id="about">
        <div class="about-grid">
            <div class="about-text reveal">
                <span class="sec-subtitle">Who We Are</span>
                <h2 class="sec-title">Pioneering <br>Medical <span>Excellence.</span></h2>
                <p>For over two decades, Nova Care has stood at the forefront of medical innovation. Our multidisciplinary approach ensures that every patient receives comprehensive, personalized care.</p>
                <p>From accurate diagnostics to post-operative rehabilitation, our ecosystem is designed to support your journey to full health in a comforting, premium environment.</p>
                <a href="#" class="btn mag-btn" style="margin-top: 20px;">Read Our Mission</a>
            </div>
            <div class="stats-grid reveal" style="transition-delay: 0.2s;">
                <div class="glass stat-card tilt-card mag-btn">
                    <i class="fa-solid fa-user-doctor"></i>
                    <div class="stat-num">150+</div>
                    <div class="stat-label">Expert Specialists</div>
                </div>
                <div class="glass stat-card tilt-card mag-btn">
                    <i class="fa-solid fa-bed-pulse"></i>
                    <div class="stat-num">500+</div>
                    <div class="stat-label">Hospital Beds</div>
                </div>
                <div class="glass stat-card tilt-card mag-btn">
                    <i class="fa-solid fa-face-smile"></i>
                    <div class="stat-num">50k+</div>
                    <div class="stat-label">Happy Patients</div>
                </div>
                <div class="glass stat-card tilt-card mag-btn">
                    <i class="fa-solid fa-award"></i>
                    <div class="stat-num">25+</div>
                    <div class="stat-label">Years Experience</div>
                </div>
            </div>
        </div>
    </section>

<section id="departments">
        <div style="text-align: center; margin-bottom: 60px;" class="reveal">
            <span class="sec-subtitle" style="justify-content: center;">Centers of Excellence</span>
            <h2 class="sec-title">Our <span>Departments</span></h2>
        </div>
        
        <div class="carousel-wrapper reveal delay-1">
            <div class="carousel-track" id="track">
                
                <div class="glass dept-card active-card mag-btn">
                    <img src="https://images.unsplash.com/photo-1505751172876-fa1923c5c528?auto=format&fit=crop&w=600&q=80" alt="Cardiology">
                    <h3>Cardiology</h3>
                    <p>Comprehensive heart care, from diagnostics to advanced open-heart surgeries.</p>
                </div>
                <div class="glass dept-card mag-btn">
                    <img src="https://images.unsplash.com/photo-1559757175-5700dde675bc?auto=format&fit=crop&w=600&q=80" alt="Neurology">
                    <h3>Neurology</h3>
                    <p>Expert treatment for brain, spine, and nervous system disorders using cutting-edge tech.</p>
                </div>
                <div class="glass dept-card mag-btn">
                    <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=600&q=80" alt="Orthopedics">
                    <h3>Orthopedics</h3>
                    <p>Advanced joint replacements, sports medicine, and physical rehabilitation therapies.</p>
                </div>
                <div class="glass dept-card mag-btn">
                    <img src="https://images.unsplash.com/photo-1581594693702-fbdc51b2763b?auto=format&fit=crop&w=600&q=80" alt="Laboratory">
                    <h3>Diagnostics</h3>
                    <p>24/7 fully automated pathology and high-resolution radiology imaging centers.</p>
                </div>
            </div>
        </div>
        
        <div class="carousel-nav reveal">
            <button class="c-btn mag-btn" id="prevBtn"><i class="fa-solid fa-arrow-left"></i></button>
            <button class="c-btn mag-btn" id="nextBtn"><i class="fa-solid fa-arrow-right"></i></button>
        </div>
    </section>

<section id="doctors">
        <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 60px;" class="reveal">
            <div>
                <span class="sec-subtitle">Medical Leaders</span>
                <h2 class="sec-title">Meet Our <span>Specialists</span></h2>
            </div>
            <a href="#" class="btn mag-btn" style="background:transparent; color:#fff;">View Directory</a>
        </div>
        
        <div class="docs-grid">
            <div class="glass doc-card tilt-card reveal mag-btn">
                <img src="https://plus.unsplash.com/premium_photo-1658506671316-0b293df7c72b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8ZG9jdG9yfGVufDB8fDB8fHww" class="doc-img" alt="Doctor">
                <h3>Dr. Robert Vance</h3>
                <span class="spec">Chief Cardiologist</span>
                <p style="color:var(--text-muted); font-size:0.9rem; margin-bottom:20px; transform:translateZ(10px);">20+ years experience in complex angioplasty.</p>
                <div class="doc-socials">
                    <i class="fa-brands fa-linkedin"></i>
                    <i class="fa-solid fa-envelope"></i>
                </div>
            </div>
            <div class="glass doc-card tilt-card reveal mag-btn" style="transition-delay: 0.1s;">
                <img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZG9jdG9yfGVufDB8fDB8fHww" class="doc-img" alt="Doctor">
                <h3>Dr. Elena Rostova</h3>
                <span class="spec">Lead Neurosurgeon</span>
                <p style="color:var(--text-muted); font-size:0.9rem; margin-bottom:20px; transform:translateZ(10px);">Pioneer in minimally invasive spine surgeries.</p>
                <div class="doc-socials">
                    <i class="fa-brands fa-linkedin"></i>
                    <i class="fa-solid fa-envelope"></i>
                </div>
            </div>
            <div class="glass doc-card tilt-card reveal mag-btn" style="transition-delay: 0.2s;">
                <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?auto=format&fit=crop&w=300&q=80" class="doc-img" alt="Doctor">
                <div style="transform: translateZ(30px);">
                    <h3>Dr. James Chen</h3>
                    <span class="spec">Orthopedic Surgeon</span>
                </div>
                <p style="color:var(--text-muted); font-size:0.9rem; margin-bottom:20px; transform:translateZ(10px);">Specialist in joint replacement and sports injuries.</p>
                <div class="doc-socials">
                    <i class="fa-brands fa-linkedin"></i>
                    <i class="fa-solid fa-envelope"></i>
                </div>
            </div>
        </div>
    </section>

<section id="emergency" class="reveal">
        <div class="glass em-content mag-btn">
            <h2>Critical Care <br><span>24/7 Available</span></h2>
            <p style="font-size: 1.2rem; color: #ddd;">Our Emergency Response Team and Fleet of Advanced Life Support Ambulances are always on standby.</p>
            <span class="em-number">1-800-NOVA-EMG</span>
            <a href="#" class="btn btn-emergency"><i class="fa-solid fa-truck-medical"></i> Dispatch Ambulance</a>
        </div>
    </section>

<section id="testimonials">
        <div style="text-align: center; margin-bottom: 60px;" class="reveal">
            <span class="sec-subtitle" style="justify-content: center;">Patient Stories</span>
            <h2 class="sec-title">Trust & <span>Care</span></h2>
        </div>
        
        <div class="testi-grid">
            <div class="glass testi-card reveal mag-btn">
                <i class="fa-solid fa-quote-right quote-icon"></i>
                <div class="stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
                <p class="testi-text">"The cardiology team at Nova Care saved my life. Their prompt response, advanced facilities, and compassionate nursing staff made all the difference during my recovery."</p>
                <div class="patient">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&q=80" alt="Patient">
                    <div>
                        <h4>Michael T.</h4>
                        <span>Heart Bypass Patient</span>
                    </div>
                </div>
            </div>
            <div class="glass testi-card reveal mag-btn" style="transition-delay: 0.1s;">
                <i class="fa-solid fa-quote-right quote-icon"></i>
                <div class="stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
                <p class="testi-text">"From the clean, hotel-like rooms to the incredibly detailed explanations by Dr. Chen, my knee replacement surgery was smoother than I ever imagined."</p>
                <div class="patient">
                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=100&q=80" alt="Patient">
                    <div>
                        <h4>Sarah Jenkins</h4>
                        <span>Orthopedic Patient</span>
                    </div>
                </div>
            </div>
            <div class="glass testi-card reveal mag-btn" style="transition-delay: 0.2s;">
                <i class="fa-solid fa-quote-right quote-icon"></i>
                <div class="stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
                <p class="testi-text">"Having our first baby here was a blessing. The pediatric and maternity wards are state-of-the-art, and the staff made us feel entirely safe and supported."</p>
                <div class="patient">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100&q=80" alt="Patient">
                    <div>
                        <h4>Emily & David</h4>
                        <span>Maternity Ward</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer class="reveal">
        <div class="footer-grid">
            <div>
                <div class="footer-logo"><i class="fa-solid fa-staff-snake"></i> NOVA CARE</div>
                <p class="footer-text">Committed to clinical excellence, patient safety, and compassionate care. Setting the global standard in modern healthcare.</p>
            </div>
            <div class="f-links">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="#">Find a Doctor</a></li>
                    <li><a href="#">Book an Appointment</a></li>
                    <li><a href="#">Patient Portal</a></li>
                    <li><a href="#">Health Packages</a></li>
                </ul>
            </div>
            <div class="f-links">
                <h4>Centers of Excellence</h4>
                <ul>
                    <li><a href="#">Nova Heart Institute</a></li>
                    <li><a href="#">Brain & Spine Center</a></li>
                    <li><a href="#">Joint Replacement</a></li>
                    <li><a href="#">Women & Child Care</a></li>
                </ul>
            </div>
            <div class="newsletter">
                <h4>Health Newsletter</h4>
                <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 15px;">Get health tips and hospital updates.</p>
                <input type="email" placeholder="Your Email Address" class="mag-btn">
                <button class="btn mag-btn" style="width: 100%;">Subscribe</button>
            </div>
        </div>
        
        <div class="footer-bottom">
            <div>&copy; 2024 Nova Care Hospital Group. All Rights Reserved.</div>
            <div class="socials">
                <a href="#" class="mag-btn"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="#" class="mag-btn"><i class="fa-brands fa-twitter"></i></a>
                <a href="#" class="mag-btn"><i class="fa-brands fa-linkedin-in"></i></a>
            </div>
        </div>
        <div class="watermark">NOVA CARE</div>
    </footer>

</body>
</html>

CSS

/* ================= VARIABLES & RESET ================= */
        :root {
            --bg-dark: #040d1a;
            --text-main: #f0f4f8;
            --text-muted: #94a3b8;
            --primary: #00e5ff; /* Cyan/Teal Medical Glow */
            --primary-glow: rgba(0, 229, 255, 0.4);
            --danger: #ff0055; /* Emergency Red */
            
            /* High-End Glassmorphism */
            --glass-bg: rgba(255, 255, 255, 0.03);
            --glass-border: 1px solid rgba(255, 255, 255, 0.08);
            --glass-glow: 0 15px 35px rgba(0, 0, 0, 0.5);
            
            --font-head: 'Outfit', sans-serif;
            --font-body: 'Manrope', sans-serif;
            --transition: all 0.5s cubic-bezier(0.25, 1, 0.2, 1);
        }

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
        html { scroll-behavior: smooth; overflow-x: hidden; }

body {
            background-color: var(--bg-dark); color: var(--text-main);
            font-family: var(--font-body); overflow-x: hidden;
        }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; }

/* ================= AMBIENT BACKGROUND & HEARTBEAT ================= */
        .ambient-bg { position: fixed; inset: 0; z-index: -2; background: var(--bg-dark); overflow: hidden; }
        
        .glow-orb {
            position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.4;
            animation: floatOrb 20s infinite alternate ease-in-out;
        }
        .orb-1 { width: 50vw; height: 50vw; background: rgba(0, 119, 255, 0.15); top: -20%; left: -10%; }
        .orb-2 { width: 40vw; height: 40vw; background: rgba(0, 229, 255, 0.1); bottom: -10%; right: -10%; animation-delay: -5s; }

/* Background Heartbeat ECG Line */
        .ecg-bg {
            position: fixed; top: 50%; left: 0; width: 100vw; height: 200px; z-index: -1; opacity: 0.05;
            transform: translateY(-50%); pointer-events: none;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" preserveAspectRatio="none"><path d="M0,100 L200,100 L250,50 L300,150 L350,20 L400,180 L450,100 L1000,100" fill="none" stroke="%2300e5ff" stroke-width="4"/></svg>') repeat-x;
            animation: ecgMove 10s linear infinite;
        }
        @keyframes ecgMove { 0% { background-position: 0 0; } 100% { background-position: -1000px 0; } }
        @keyframes floatOrb { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(5vw, 5vh) scale(1.1); } }

/* ================= CUSTOM CURSOR ================= */
        .cursor-dot {
            position: fixed; width: 6px; height: 6px; background: var(--primary);
            border-radius: 50%; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%);
            box-shadow: 0 0 10px var(--primary);
        }
        .cursor-ring {
            position: fixed; width: 40px; height: 40px; border: 1px solid rgba(0, 229, 255, 0.5);
            border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s, background 0.3s;
        }
        .cursor-active .cursor-ring { width: 70px; height: 70px; background: rgba(0, 229, 255, 0.1); border-color: transparent; backdrop-filter: blur(2px); }
        .cursor-active .cursor-dot { width: 0; height: 0; }

/* ================= PREMIUM GLASS UTILITIES ================= */
        .glass {
            background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: var(--glass-border); border-top: 1px solid rgba(255,255,255,0.15);
            box-shadow: var(--glass-glow); border-radius: 20px; position: relative; overflow: hidden;
            transition: var(--transition);
        }
        .glass::before {
            content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
            transform: skewX(-25deg); transition: 0.7s ease; pointer-events: none; z-index: 1;
        }
        .glass:hover::before { left: 200%; }

.btn {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 14px 35px; border-radius: 50px; color: var(--bg-dark); font-weight: 700;
            background: var(--primary); text-decoration: none; font-family: var(--font-head);
            letter-spacing: 1px; transition: var(--transition); border: 1px solid var(--primary);
            box-shadow: 0 5px 20px var(--primary-glow); position: relative; overflow: hidden;
        }
        .btn:hover { background: transparent; color: var(--primary); transform: translateY(-3px); }
        
        .btn-emergency {
            background: rgba(255, 0, 85, 0.1); border-color: var(--danger); color: var(--danger);
            box-shadow: 0 0 15px rgba(255,0,85,0.3); animation: pulseDanger 2s infinite;
        }
        .btn-emergency:hover { background: var(--danger); color: #fff; animation: none; }
        @keyframes pulseDanger { 0% { box-shadow: 0 0 0 0 rgba(255,0,85,0.4); } 70% { box-shadow: 0 0 0 15px rgba(255,0,85,0); } 100% { box-shadow: 0 0 0 0 rgba(255,0,85,0); } }

/* ================= SECTION STYLING & GLOBAL HOVER ================= */
        section { padding: 100px 5%; position: relative; transition: background 0.6s ease; }
        section:hover { background: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.03) 0%, transparent 60%); }
        section:hover .sec-title span { text-shadow: 0 0 20px var(--primary-glow); }

.sec-title { font-size: 3.5rem; letter-spacing: 2px; margin-bottom: 20px; }
        .sec-title span { color: var(--primary); transition: 0.5s; }
        .sec-subtitle { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 3px; font-size: 0.9rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
        .sec-subtitle::before { content: ''; width: 30px; height: 2px; background: var(--primary); }

/* Scroll Reveal CSS */
        .reveal { opacity: 0; transform: translateY(50px); transition: 1s cubic-bezier(0.25, 1, 0.2, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

/* ================= 1. NAVBAR ================= */
        nav {
            position: fixed; top: 20px; left: 5%; width: 90%; z-index: 1000;
            display: flex; justify-content: space-between; align-items: center;
            padding: 15px 30px; border-radius: 50px;
        }
        .logo { font-size: 1.8rem; font-family: var(--font-head); font-weight: 800; display: flex; align-items: center; gap: 10px; letter-spacing: 2px; }
        .logo i { color: var(--primary); }
        .nav-links { display: flex; gap: 30px; list-style: none; }
        .nav-links a { color: var(--text-main); text-decoration: none; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; position: relative; }
        .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--primary); transition: 0.3s; }
        .nav-links a:hover { color: var(--primary); }
        .nav-links a:hover::after { width: 100%; }

/* ================= 2. HERO SLIDER ================= */
        #hero { padding: 0; height: 100vh; position: relative; overflow: hidden; }
        .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease; display: flex; align-items: center; padding: 0 5%; }
        .slide.active { opacity: 1; z-index: 5; }
        .slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transform: scale(1.1); transition: transform 8s ease-out; filter: brightness(0.4) contrast(1.1); }
        .slide.active .slide-bg { transform: scale(1); }
        
        .hero-content { position: relative; z-index: 10; max-width: 800px; padding-left: 5%; }
        .hero-content h1 { font-size: 5vw; line-height: 1.1; margin-bottom: 20px; transform: translateY(50px); opacity: 0; transition: 1s 0.3s; }
        .hero-content h1 span { color: transparent; -webkit-text-stroke: 1px var(--primary); text-shadow: 0 0 30px var(--primary-glow); }
        .hero-content p { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 40px; transform: translateY(30px); opacity: 0; transition: 1s 0.5s; max-width: 600px; line-height: 1.6; }
        .hero-btns { transform: translateY(30px); opacity: 0; transition: 1s 0.7s; display: flex; gap: 20px; }
        .slide.active .hero-content h1, .slide.active .hero-content p, .slide.active .hero-btns { transform: translateY(0); opacity: 1; }

.slider-controls { position: absolute; bottom: 50px; right: 5%; z-index: 10; display: flex; gap: 15px; }
        .ctrl-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: 0.4s; border: 2px solid transparent; }
        .ctrl-dot.active { background: transparent; border-color: var(--primary); transform: scale(1.5); }

/* ================= 3. INFINITE MARQUEE ================= */
        #marquee-sec { padding: 30px 0; background: rgba(0, 229, 255, 0.02); border-top: 1px solid rgba(0, 229, 255, 0.05); border-bottom: 1px solid rgba(0, 229, 255, 0.05); overflow: hidden; }
        .marquee { display: flex; width: max-content; animation: scroll 20s linear infinite; }
        .marquee:hover { animation-play-state: paused; }
        .marquee span { font-family: var(--font-head); font-size: 2.5rem; text-transform: uppercase; margin: 0 40px; color: var(--text-muted); transition: 0.4s; display: flex; align-items: center; gap: 15px; }
        .marquee span i { color: var(--primary); font-size: 2rem; }
        .marquee span:hover { color: #fff; text-shadow: 0 0 20px rgba(255,255,255,0.5); }
        @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ================= 4. ABOUT / STATS ================= */
        .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
        .about-text p { font-size: 1.1rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 20px; }
        
        .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; perspective: 1000px; }
        .stat-card { padding: 40px 30px; text-align: center; transform-style: preserve-3d; transition: transform 0.4s, border-color 0.4s; }
        .stat-card:hover { transform: translateY(-10px) rotateX(10deg) rotateY(-10deg); border-color: var(--primary); box-shadow: 0 20px 40px var(--primary-glow); }
        .stat-card i { font-size: 2.5rem; color: var(--primary); transform: translateZ(40px); margin-bottom: 15px; }
        .stat-num { font-size: 3.5rem; font-family: var(--font-head); color: #fff; transform: translateZ(30px); margin-bottom: 5px; }
        .stat-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); transform: translateZ(20px); }

/* ================= 5. DEPARTMENTS CAROUSEL ================= */
        .carousel-wrapper { width: 100%; overflow: hidden; padding: 20px 0; cursor: grab; }
        .carousel-wrapper:active { cursor: grabbing; }
        .carousel-track { display: flex; gap: 30px; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
        
        .dept-card {
            min-width: 350px; height: 450px; border-radius: 20px; overflow: hidden; position: relative;
            padding: 40px; display: flex; flex-direction: column; justify-content: flex-end;
            transform: scale(0.95); opacity: 0.6; transition: var(--transition);
        }
        .dept-card.active-card { transform: scale(1); opacity: 1; border: 1px solid var(--primary); }
        .dept-card:hover { transform: translateY(-15px) scale(1.02); opacity: 1; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
        
        .dept-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: 1s; filter: grayscale(50%); }
        .dept-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 13, 26, 1) 10%, transparent); z-index: -1; transition: 0.5s; }
        .dept-card:hover img { transform: scale(1.1); filter: grayscale(0%); }
        .dept-card:hover::after { background: linear-gradient(to top, rgba(4, 13, 26, 1) 10%, rgba(0, 229, 255, 0.2)); }
        
        .dept-card h3 { font-size: 2rem; transition: 0.4s; transform: translateY(20px); }
        .dept-card p { color: var(--text-muted); font-size: 0.9rem; opacity: 0; transform: translateY(20px); transition: 0.4s 0.1s; margin-top: 10px; }
        .dept-card:hover h3 { transform: translateY(0); color: var(--primary); }
        .dept-card:hover p { opacity: 1; transform: translateY(0); }
        
        .carousel-nav { display: flex; justify-content: center; gap: 20px; margin-top: 40px; }
        .c-btn { width: 50px; height: 50px; border-radius: 50%; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 1.2rem; display: flex; justify-content: center; align-items: center; transition: 0.3s; }
        .c-btn:hover { background: var(--primary); color: var(--bg-dark); transform: scale(1.1); border-color: var(--primary); box-shadow: 0 0 15px var(--primary-glow); }

/* ================= 6. OUR DOCTORS (3D GRID) ================= */
        .docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; perspective: 1000px; }
        .doc-card { padding: 30px; text-align: center; transform-style: preserve-3d; transition: transform 0.1s; }
        .doc-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; border: 3px solid rgba(0, 229, 255, 0.2); transform: translateZ(40px); transition: 0.4s; }
        .doc-card:hover .doc-img { border-color: var(--primary); transform: translateZ(50px) scale(1.1); box-shadow: 0 10px 20px var(--primary-glow); }
        .doc-card h3 { font-size: 1.5rem; transform: translateZ(30px); margin-bottom: 5px; }
        .doc-card .spec { color: var(--primary); font-size: 0.9rem; transform: translateZ(20px); margin-bottom: 20px; display: block; text-transform: uppercase; letter-spacing: 1px; }
        .doc-socials { transform: translateZ(20px); display: flex; justify-content: center; gap: 15px; }
        .doc-socials i { color: var(--text-muted); transition: 0.3s; }
        .doc-socials i:hover { color: #fff; transform: scale(1.2); }

/* ================= 7. EMERGENCY PARALLAX ================= */
        #emergency { min-height: 60vh; background: url('https://images.unsplash.com/photo-1587559070757-f72a388edbba?auto=format&fit=crop&w=2000&q=80') fixed center/cover; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; }
        #emergency::before { content: ''; position: absolute; inset: 0; background: rgba(4, 13, 26, 0.85); backdrop-filter: blur(5px); }
        .em-content { position: relative; z-index: 2; max-width: 800px; padding: 50px; border: 1px solid rgba(255, 0, 85, 0.3); box-shadow: 0 0 50px rgba(255, 0, 85, 0.1); }
        .em-content h2 { color: #fff; margin-bottom: 20px; font-size: 4rem; }
        .em-content h2 span { color: var(--danger); text-shadow: 0 0 20px rgba(255,0,85,0.5); }
        .em-number { font-size: 3.5rem; font-family: var(--font-head); color: var(--danger); font-weight: 800; letter-spacing: 5px; margin: 20px 0; display: block; }

/* ================= 8. TESTIMONIALS ================= */
        .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
        .testi-card { padding: 40px; position: relative; top: 0; transition: var(--transition); display: flex; flex-direction: column; justify-content: space-between; }
        .testi-card:hover { top: -15px; border-color: var(--primary); box-shadow: 0 20px 40px var(--primary-glow); }
        .quote-icon { font-size: 2.5rem; color: rgba(0, 229, 255, 0.2); position: absolute; top: 30px; right: 30px; }
        .stars { color: var(--primary); margin-bottom: 20px; }
        .testi-text { font-style: italic; font-size: 1.05rem; line-height: 1.8; color: #e2e8f0; margin-bottom: 30px; }
        .patient { display: flex; align-items: center; gap: 15px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
        .patient img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.1); }
        .patient h4 { font-size: 1rem; margin-bottom: 2px; }
        .patient span { font-size: 0.8rem; color: var(--text-muted); }

/* ================= 9. FOOTER ================= */
        footer { padding: 80px 5% 30px; border-top: 1px solid rgba(0, 229, 255, 0.2); position: relative; overflow: hidden; background: #02060c; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 50px; margin-bottom: 60px; position: relative; z-index: 2; }
        .footer-logo { font-size: 2rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
        .footer-logo i { color: var(--primary); }
        .footer-text { color: var(--text-muted); max-width: 300px; line-height: 1.8; }
        .f-links h4 { font-size: 1.1rem; margin-bottom: 20px; color: #fff; letter-spacing: 1px; }
        .f-links ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
        .f-links a { color: var(--text-muted); text-decoration: none; transition: 0.3s; font-size: 0.9rem; }
        .f-links a:hover { color: var(--primary); padding-left: 8px; }
        
        .newsletter input { width: 100%; padding: 15px 20px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; color: #fff; font-family: var(--font-body); margin-bottom: 15px; outline: none; transition: 0.3s; }
        .newsletter input:focus { border-color: var(--primary); background: rgba(0, 229, 255, 0.05); }
        
        .footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 0.85rem; position: relative; z-index: 2; }
        .socials { display: flex; gap: 15px; }
        .socials a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.05); display: flex; justify-content: center; align-items: center; color: #fff; transition: 0.3s; }
        .socials a:hover { background: var(--primary); color: var(--bg-dark); transform: translateY(-5px); }
        
        .watermark { position: absolute; bottom: -5%; left: 50%; transform: translateX(-50%); font-size: 18vw; font-family: var(--font-head); color: rgba(255, 255, 255, 0.01); white-space: nowrap; z-index: 1; pointer-events: none; }

/* ================= RESPONSIVE ================= */
        @media (max-width: 1024px) {
            .about-grid { grid-template-columns: 1fr; }
            .stats-grid, .docs-grid, .testi-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .hero-content h1 { font-size: 8vw; }
        }
        @media (max-width: 768px) {
            .stats-grid, .docs-grid, .testi-grid, .footer-grid { grid-template-columns: 1fr; }
            .nav-links { display: none; }
            .sec-title { font-size: 2.8rem; }
        }

JavaScript

// --- 1. Custom Cursor & Magnetic Buttons ---
        const cDot = document.getElementById('c-dot');
        const cRing = document.getElementById('c-ring');
        const magBtns = document.querySelectorAll('.mag-btn, a, button');

magBtns.forEach(btn => {
            btn.addEventListener('mouseenter', () => document.body.classList.add('cursor-active'));
            btn.addEventListener('mouseleave', () => {
                document.body.classList.remove('cursor-active');
                btn.style.transform = ''; // Reset magnetic pull
            });
            
            if(btn.classList.contains('mag-btn') && !btn.classList.contains('marquee')) {
                btn.addEventListener('mousemove', (e) => {
                    const rect = btn.getBoundingClientRect();
                    const h = rect.width / 2;
                    const v = rect.height / 2;
                    const x = e.clientX - rect.left - h;
                    const y = e.clientY - rect.top - v;
                    
                    btn.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`;
                });
            }
        });

// --- 2. Scroll Reveal Animations ---
        const reveals = document.querySelectorAll('.reveal');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if(entry.isIntersecting) {
                    entry.target.classList.add('active');
                }
            });
        }, { threshold: 0.1, rootMargin: "0px 0px -50px 0px" });

reveals.forEach(reveal => observer.observe(reveal));

// --- 3. Hero Slider ---
        const slides = document.querySelectorAll('.slide');
        const dots = document.querySelectorAll('.ctrl-dot');
        let currentSlide = 0;
        let slideInterval;

function setSlide(index) {
            slides.forEach(s => s.classList.remove('active'));
            dots.forEach(d => d.classList.remove('active'));
            
            currentSlide = index;
            
            slides[currentSlide].classList.add('active');
            dots[currentSlide].classList.add('active');
            resetInterval();
        }

function nextSlide() { setSlide((currentSlide + 1) % slides.length); }
        function resetInterval() {
            clearInterval(slideInterval);
            slideInterval = setInterval(nextSlide, 6000);
        }
        resetInterval();

// --- 4. Draggable Carousel (Departments) ---
        const track = document.getElementById('track');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const cards = document.querySelectorAll('.dept-card');
        
        let cIndex = 0;
        
        function updateCarousel() {
            cards.forEach(c => c.classList.remove('active-card'));
            
            const cardWidth = cards[0].offsetWidth;
            const gap = 30; // Defined in CSS gap
            track.style.transform = `translateX(-${(cardWidth + gap) * cIndex}px)`;
            
            cards[cIndex].classList.add('active-card');
        }

nextBtn.addEventListener('click', () => {
            const maxVisible = Math.floor(track.parentElement.offsetWidth / cards[0].offsetWidth);
            if(cIndex < cards.length - maxVisible) { cIndex++; }
            else { cIndex = 0; }
            updateCarousel();
        });

prevBtn.addEventListener('click', () => {
            if(cIndex > 0) { cIndex--; }
            else { 
                const maxVisible = Math.floor(track.parentElement.offsetWidth / cards[0].offsetWidth);
                cIndex = cards.length - maxVisible; 
            }
            updateCarousel();
        });
        window.addEventListener('resize', updateCarousel);

// --- 5. 3D Tilt Effect on Cards ---
        const tiltCards = document.querySelectorAll('.tilt-card');
        tiltCards.forEach(card => {
            card.addEventListener('mousemove', (e) => {
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                const centerX = rect.width / 2;
                const centerY = rect.height / 2;
                
                const rotateX = ((y - centerY) / centerY) * -10;
                const rotateY = ((x - centerX) / centerX) * 10;
                
                card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;
            });
            
            card.addEventListener('mouseleave', () => {
                card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)`;
            });
        });

// --- 6. Navbar Blur on Scroll ---
        const nav = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if(window.scrollY > 50) {
                nav.style.background = 'rgba(4, 13, 26, 0.9)';
            } else {
                nav.style.background = 'var(--glass-bg)';
            }
        });

NOVA CARE Premium Healthcare Template Preview

Download Options