Nexus Clinic 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>Nexus Clinic - Premium Healthcare Services</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
 
</head>
<body>
    
    <header id="header">
        <a href="#" class="logo"><i class="fas fa-heartbeat"></i> <span class="slide-reveal"><span>Nexus</span></span> <span class="velvet-caption" data-text="Clinic">Clinic</span></a>
        <div class="menu-toggle" id="menuToggle">
            <i class="fas fa-bars"></i>
        </div>
        <ul class="nav-links" id="navLinks">
            <li><a href="#">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#doctors">Doctors</a></li>
            <li><a href="#testimonials">Testimonials</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </header>

<section class="hero">
        <div class="hero-content fade-in">
            <h1>Premium <span class="velvet-caption" data-text="Healthcare">Healthcare</span> Services</h1>
            <p>Experience world-class medical care with our state-of-the-art facilities and expert healthcare professionals dedicated to your well-being.</p>
            <a href="#services" class="btn">Explore Services</a>
        </div>
    </section>

<section class="section" id="services">
        <div class="section-title fade-in">
            <h2><span class="slide-reveal"><span>Our Medical</span></span> <span class="velvet-caption" data-text="Services">Services</span></h2>
            <p>We offer comprehensive healthcare services using cutting-edge technology and personalized treatment plans.</p>
        </div>
        <div class="services-grid">
            
            <div class="service-card fade-in delay-1">
                <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Cardiology">
                <div class="service-content">
                    <h3>Cardiology</h3>
                    <p>Comprehensive heart care including diagnostic tests, treatment, and preventive cardiology services.</p>
                    <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="service-card fade-in delay-2">
                <img src="https://images.unsplash.com/photo-1581595219315-a187dd40c322?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Neurology">
                <div class="service-content">
                    <h3>Neurology</h3>
                    <p>Advanced neurological care for conditions affecting the brain, spine, and nervous system.</p>
                    <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="service-card fade-in delay-3">
                <img src="https://images.unsplash.com/photo-1579684453423-f84349ef60b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1986&q=80" alt="Orthopedics">
                <div class="service-content">
                    <h3>Orthopedics</h3>
                    <p>Specialized care for musculoskeletal system including bones, joints, ligaments, and muscles.</p>
                    <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="service-card fade-in delay-4">
                <img src="https://images.unsplash.com/photo-1631815588090-d4bfec5b1ccb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Pediatrics">
                <div class="service-content">
                    <h3>Pediatrics</h3>
                    <p>Compassionate healthcare for infants, children, and adolescents from birth through young adulthood.</p>
                    <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="service-card fade-in delay-1">
                <img src="https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Dermatology">
                <div class="service-content">
                    <h3>Dermatology</h3>
                    <p>Expert care for skin, hair, and nails including medical, surgical, and cosmetic treatments.</p>
                    <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="service-card fade-in delay-2">
                <img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Oncology">
                <div class="service-content">
                    <h3>Oncology</h3>
                    <p>Comprehensive cancer care including diagnosis, treatment, and supportive therapies.</p>
                    <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

<section class="section showcase" id="showcase">
        <div class="section-title fade-in">
            <h2><span class="slide-reveal"><span>Advanced</span></span> <span class="velvet-caption" data-text="Technologies">Technologies</span></h2>
            <p>We utilize the latest medical technologies to provide accurate diagnoses and effective treatments.</p>
        </div>
        <div class="swiper fade-in">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="showcase-content">
                        <h3>Robotic Surgery System</h3>
                        <p>Our state-of-the-art robotic surgery platform allows for minimally invasive procedures with enhanced precision, smaller incisions, and faster recovery times. Surgeons can perform complex procedures with greater control and accuracy than conventional techniques.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                    <div class="showcase-image">
                        <img src="https://images.unsplash.com/photo-1581595219315-a187dd40c322?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Robotic Surgery">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="showcase-content">
                        <h3>3D Mammography</h3>
                        <p>Our advanced 3D mammography system detects breast cancer earlier than traditional 2D mammography, especially in women with dense breast tissue. The system creates multiple thin slices through the breast tissue, allowing radiologists to examine the tissue layer by layer.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                    <div class="showcase-image">
                        <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="3D Mammography">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="showcase-content">
                        <h3>AI-Powered Diagnostics</h3>
                        <p>Our artificial intelligence system assists physicians in analyzing medical images and patient data to detect abnormalities and predict health risks with unprecedented accuracy. The AI continuously learns from new cases to improve its diagnostic capabilities over time.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                    <div class="showcase-image">
                        <img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="AI Diagnostics">
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>

<section class="section doctors" id="doctors">
        <div class="section-title fade-in">
            <h2><span class="slide-reveal"><span>Our Expert</span></span> <span class="velvet-caption" data-text="Doctors">Doctors</span></h2>
            <p>Meet our team of board-certified physicians dedicated to providing exceptional patient care.</p>
        </div>
        <div class="doctors-grid">
            <div class="doctor-card fade-in delay-1">
                <div class="doctor-image">
                    <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Dr. Sarah Johnson">
                    <div class="doctor-social">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="doctor-info">
                    <h3>Dr. Sarah Johnson</h3>
                    <p>Cardiologist</p>
                    <a href="#" class="btn">Book Appointment</a>
                </div>
            </div>
            <div class="doctor-card fade-in delay-2">
                <div class="doctor-image">
                    <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Dr. Michael Chen">
                    <div class="doctor-social">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="doctor-info">
                    <h3>Dr. Michael Chen</h3>
                    <p>Neurologist</p>
                    <a href="#" class="btn">Book Appointment</a>
                </div>
            </div>
            <div class="doctor-card fade-in delay-3">
                <div class="doctor-image">
                    <img src="https://images.unsplash.com/photo-1651008376811-b90baee60c1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Dr. Emily Rodriguez">
                    <div class="doctor-social">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="doctor-info">
                    <h3>Dr. Emily Rodriguez</h3>
                    <p>Pediatrician</p>
                    <a href="#" class="btn">Book Appointment</a>
                </div>
            </div>
            <div class="doctor-card fade-in delay-4">
                <div class="doctor-image">
                    <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Dr. David Wilson">
                    <div class="doctor-social">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="doctor-info">
                    <h3>Dr. David Wilson</h3>
                    <p>Orthopedic Surgeon</p>
                    <a href="#" class="btn">Book Appointment</a>
                </div>
            </div>
        </div>
    </section>

<section class="section testimonials" id="testimonials">
        <div class="section-title fade-in">
            <h2><span class="slide-reveal"><span>Patient</span></span> <span class="velvet-caption" data-text="Testimonials">Testimonials</span></h2>
            <p>Hear what our patients have to say about their experiences at our clinic.</p>
        </div>
        <div class="testimonial-slider fade-in">
            <div class="testimonial-card">
                <div class="testimonial-content">
                    <p>"The care I received at Nexus Clinic was exceptional. From the moment I walked in, I felt welcomed and well taken care of. Dr. Johnson took the time to explain everything clearly and made sure all my questions were answered. The facilities are state-of-the-art and the staff is incredibly professional."</p>
                    <div class="testimonial-author">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Jennifer Smith">
                        <div class="author-info">
                            <h4>Jennifer Smith</h4>
                            <p>Cardiology Patient</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="testimonial-content">
                    <p>"After struggling with chronic back pain for years, the team at Nexus Clinic finally provided me with an accurate diagnosis and effective treatment plan. The orthopedic specialists are truly knowledgeable and caring. I'm now pain-free and able to enjoy activities I haven't done in years."</p>
                    <div class="testimonial-author">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Robert Johnson">
                        <div class="author-info">
                            <h4>Robert Johnson</h4>
                            <p>Orthopedics Patient</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="testimonial-content">
                    <p>"As a parent, finding the right pediatrician was incredibly important to me. Dr. Rodriguez has been amazing with my children - patient, kind, and extremely competent. The clinic's child-friendly environment makes visits stress-free for both parents and kids. Highly recommend their pediatric services!"</p>
                    <div class="testimonial-author">
                        <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt="Maria Garcia">
                        <div class="author-info">
                            <h4>Maria Garcia</h4>
                            <p>Parent of Pediatric Patient</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section stats">
        <div class="section-title fade-in">
            <h2><span class="slide-reveal"><span>Our Clinic</span></span> <span class="velvet-caption" data-text="By Numbers">By Numbers</span></h2>
            <p>Quality healthcare delivered with compassion and excellence.</p>
        </div>
        <div class="stats-grid">
            <div class="stat-item fade-in delay-1">
                <i class="fas fa-user-md"></i>
                <h3>45+</h3>
                <p>Specialist Doctors</p>
            </div>
            <div class="stat-item fade-in delay-2">
                <i class="fas fa-procedures"></i>
                <h3>120+</h3>
                <p>Advanced Procedures</p>
            </div>
            <div class="stat-item fade-in delay-3">
                <i class="fas fa-smile"></i>
                <h3>10,000+</h3>
                <p>Happy Patients</p>
            </div>
            <div class="stat-item fade-in delay-4">
                <i class="fas fa-award"></i>
                <h3>25+</h3>
                <p>Medical Awards</p>
            </div>
        </div>
    </section>

<section class="section cta">
        <div class="cta-content fade-in">
            <h2>Ready to Experience Premium Healthcare?</h2>
            <p>Schedule your appointment today and take the first step towards better health with our expert medical team.</p>
            <div class="cta-buttons">
                <a href="#" class="btn">Book an Appointment</a>
                <a href="#" class="btn btn-outline">Contact Us</a>
            </div>
        </div>
    </section>

<footer id="contact">
        <div class="footer-grid">
            <div class="footer-col fade-in">
                <h3><span class="slide-reveal"><span>Nexus</span></span> <span class="velvet-caption" data-text="Clinic">Clinic</span></h3>
                <p>Providing exceptional healthcare services with cutting-edge technology and compassionate care.</p>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <div class="footer-col fade-in delay-1">
                <h3>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#doctors">Doctors</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div class="footer-col fade-in delay-2">
                <h3>Services</h3>
                <ul class="footer-links">
                    <li><a href="#">Cardiology</a></li>
                    <li><a href="#">Neurology</a></li>
                    <li><a href="#">Orthopedics</a></li>
                    <li><a href="#">Pediatrics</a></li>
                    <li><a href="#">Dermatology</a></li>
                </ul>
            </div>
            <div class="footer-col fade-in delay-3">
                <h3>Contact Us</h3>
                <ul class="footer-contact">
                    <li>
                        <i class="fas fa-map-marker-alt"></i>
                        <span>123 Medical Drive, Health City, HC 12345</span>
                    </li>
                    <li>
                        <i class="fas fa-phone-alt"></i>
                        <span>+1 (555) 123-4567</span>
                    </li>
                    <li>
                        <i class="fas fa-envelope"></i>
                        <span>info@nexusclinic.com</span>
                    </li>
                    <li>
                        <i class="fas fa-clock"></i>
                        <span>Mon-Fri: 8:00 AM - 6:00 PM<br>Sat: 9:00 AM - 2:00 PM</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom fade-in">
            <p>&copy; 2023 Nexus Clinic. All Rights Reserved. | Designed with <i class="fas fa-heart" style="color: #ff0000;"></i> by Future-Stick UI</p>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary-color: #FFD700;
            --primary-dark: #FFC000;
            --primary-light: #FFF9C4;
            --dark-color: #1A1A1A;
            --light-color: #FFFFFF;
            --gray-color: #F5F5F5;
            --text-dark: #333333;
            --text-light: #757575;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            background-color: var(--gray-color);
            color: var(--text-dark);
            overflow-x: hidden;
        }

/* Header Styles */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }

header.scrolled {
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            padding: 15px 5%;
        }

.logo {
            display: flex;
            align-items: center;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--light-color);
            text-decoration: none;
        }

header.scrolled .logo {
            color: var(--primary-color);
        }

.logo i {
            margin-right: 10px;
            color: var(--primary-color);
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 30px;
        }

.nav-links a {
            color: var(--light-color);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }

header.scrolled .nav-links a {
            color: var(--dark-color);
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }

.nav-links a:hover::after {
            width: 100%;
        }

.menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--light-color);
        }

header.scrolled .menu-toggle {
            color: var(--dark-color);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
            display: flex;
            align-items: center;
            padding: 0 5%;
            position: relative;
        }

.hero-content {
            max-width: 600px;
            color: var(--light-color);
        }

.hero-content h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }

.hero-content p {
            font-size: 1.1rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }

.btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--primary-color);
            color: var(--dark-color);
            border: none;
            border-radius: 30px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
        }

.btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
        }

/* Services Section */
        .section {
            padding: 100px 5%;
        }

.section-title {
            text-align: center;
            margin-bottom: 60px;
        }

.section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

.section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--primary-color);
        }

.section-title p {
            font-size: 1.1rem;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
        }

/* Services Grid */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

/* Card Luxe UI */
        .service-card {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            z-index: 1;
        }

.service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0) 100%);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }

.service-card:hover::before {
            opacity: 1;
        }

.service-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

.service-content {
            padding: 25px;
        }

.service-content h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

.service-content h3::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 40px;
            height: 2px;
            background-color: var(--primary-color);
        }

.service-content p {
            color: var(--text-light);
            margin-bottom: 20px;
            line-height: 1.6;
        }

.service-content a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }

.service-content a i {
            margin-left: 5px;
            transition: all 0.3s ease;
        }

.service-content a:hover {
            color: var(--primary-dark);
        }

.service-content a:hover i {
            transform: translateX(5px);
        }

/* Smart Showcase Carousel */
        .showcase {
            background-color: var(--dark-color);
            padding: 100px 5%;
            position: relative;
            overflow: hidden;
        }

.showcase .section-title h2,
        .showcase .section-title p {
            color: var(--light-color);
        }

.swiper {
            width: 100%;
            height: 500px;
            margin-top: 50px;
        }

.swiper-slide {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 0 50px;
            position: relative;
        }

.swiper-slide::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0) 100%);
            z-index: -1;
        }

.showcase-content {
            flex: 1;
            color: var(--light-color);
            padding-right: 50px;
        }

.showcase-content h3 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

.showcase-content p {
            margin-bottom: 30px;
            line-height: 1.6;
            opacity: 0.9;
        }

.showcase-image {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.showcase-image img {
            max-height: 80%;
            max-width: 100%;
            object-fit: contain;
            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
        }

.swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 1;
        }

.swiper-pagination-bullet-active {
            background: var(--primary-color);
        }

.swiper-button-next,
        .swiper-button-prev {
            color: var(--primary-color);
        }

/* Doctors Section */
        .doctors {
            background-color: var(--light-color);
        }

.doctors-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

.doctor-card {
            background-color: var(--light-color);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            text-align: center;
        }

.doctor-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }

.doctor-image {
            height: 300px;
            overflow: hidden;
            position: relative;
        }

.doctor-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s ease;
        }

.doctor-card:hover .doctor-image img {
            transform: scale(1.1);
        }

.doctor-social {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s ease;
        }

.doctor-card:hover .doctor-social {
            opacity: 1;
        }

.doctor-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: var(--primary-color);
            color: var(--dark-color);
            border-radius: 50%;
            margin: 0 5px;
            transition: all 0.3s ease;
        }

.doctor-social a:hover {
            background-color: var(--light-color);
            transform: translateY(-5px);
        }

.doctor-info {
            padding: 25px;
        }

.doctor-info h3 {
            font-size: 1.3rem;
            margin-bottom: 5px;
        }

.doctor-info p {
            color: var(--primary-color);
            font-weight: 500;
            margin-bottom: 15px;
        }

.doctor-info .btn {
            padding: 8px 20px;
            font-size: 0.9rem;
        }

/* Testimonials Section */
        .testimonials {
            background-color: var(--gray-color);
        }

.testimonial-slider {
            max-width: 1000px;
            margin: 0 auto;
        }

.testimonial-card {
            background-color: var(--light-color);
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            margin: 20px;
            position: relative;
        }

.testimonial-card::before {
            content: '\201C';
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 5rem;
            color: var(--primary-light);
            font-family: serif;
            line-height: 1;
            z-index: 0;
        }

.testimonial-content {
            position: relative;
            z-index: 1;
        }

.testimonial-content p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 30px;
            color: var(--text-dark);
        }

.testimonial-author {
            display: flex;
            align-items: center;
        }

.testimonial-author img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
        }

.author-info h4 {
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

.author-info p {
            color: var(--text-light);
            font-size: 0.9rem;
            margin: 0;
        }

/* Stats Section */
        .stats {
            background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1581056771107-24ca5f033842?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
            padding: 100px 5%;
            color: var(--light-color);
            text-align: center;
        }

.stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.stat-item {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 40px 20px;
            transition: all 0.3s ease;
        }

.stat-item:hover {
            transform: translateY(-10px);
            background: rgba(255, 215, 0, 0.2);
        }

.stat-item i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

.stat-item h3 {
            font-size: 3rem;
            margin-bottom: 10px;
            font-weight: 700;
        }

.stat-item p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

/* CTA Section */
        .cta {
            background-color: var(--primary-light);
            padding: 100px 5%;
            text-align: center;
        }

.cta-content {
            max-width: 800px;
            margin: 0 auto;
        }

.cta h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

.cta p {
            font-size: 1.1rem;
            margin-bottom: 40px;
            color: var(--text-dark);
        }

.cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

.btn-outline {
            background-color: transparent;
            border: 2px solid var(--primary-color);
            color: var(--dark-color);
        }

.btn-outline:hover {
            background-color: var(--primary-color);
        }

/* Footer */
        footer {
            background-color: var(--dark-color);
            color: var(--light-color);
            padding: 80px 5% 30px;
        }

.footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 60px;
        }

.footer-col h3 {
            font-size: 1.3rem;
            margin-bottom: 25px;
            position: relative;
            display: inline-block;
        }

.footer-col h3::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 40px;
            height: 2px;
            background-color: var(--primary-color);
        }

.footer-col p {
            margin-bottom: 20px;
            line-height: 1.6;
            opacity: 0.8;
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 15px;
        }

.footer-links a {
            color: var(--light-color);
            text-decoration: none;
            opacity: 0.8;
            transition: all 0.3s ease;
            position: relative;
            padding-left: 20px;
        }

.footer-links a::before {
            content: '\f054';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.7rem;
            color: var(--primary-color);
            transition: all 0.3s ease;
        }

.footer-links a:hover {
            opacity: 1;
            padding-left: 25px;
        }

.footer-links a:hover::before {
            left: 5px;
        }

.footer-contact li {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
        }

.footer-contact i {
            margin-right: 15px;
            color: var(--primary-color);
            margin-top: 5px;
        }

.footer-social {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

.footer-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--light-color);
            border-radius: 50%;
            transition: all 0.3s ease;
        }

.footer-social a:hover {
            background-color: var(--primary-color);
            color: var(--dark-color);
            transform: translateY(-5px);
        }

.footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 30px;
            text-align: center;
            opacity: 0.7;
            font-size: 0.9rem;
        }

/* Velvet Caption Reveal */
        .velvet-caption {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }

.velvet-caption::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            color: var(--primary-color);
            width: 0;
            overflow: hidden;
            white-space: nowrap;
            transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }

.velvet-caption:hover::after {
            width: 100%;
        }

/* Elegant Slide Reveal */
        .slide-reveal {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }

.slide-reveal::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--primary-color);
            transform: translateX(-100%);
            transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
            z-index: 1;
        }

.slide-reveal:hover::after {
            transform: translateX(100%);
        }

.slide-reveal span {
            position: relative;
            z-index: 2;
            transition: color 0.3s ease;
        }

.slide-reveal:hover span {
            color: var(--dark-color);
        }

/* Responsive Styles */
        @media (max-width: 1200px) {
            .swiper-slide {
                flex-direction: column;
                padding: 50px 30px;
                text-align: center;
            }

.showcase-content {
                padding-right: 0;
                margin-bottom: 30px;
            }
        }

@media (max-width: 992px) {
            .hero-content h1 {
                font-size: 3rem;
            }

.section-title h2 {
                font-size: 2.2rem;
            }

.swiper {
                height: auto;
            }
        }

@media (max-width: 768px) {
            .menu-toggle {
                display: block;
                z-index: 1001;
            }

.nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                width: 80%;
                height: 100vh;
                background-color: var(--light-color);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 0.5s ease;
                z-index: 1000;
            }

.nav-links.active {
                right: 0;
            }

.nav-links li {
                margin: 15px 0;
            }

.nav-links a {
                color: var(--dark-color);
                font-size: 1.2rem;
            }

header.scrolled .nav-links a {
                color: var(--dark-color);
            }

.hero-content h1 {
                font-size: 2.5rem;
            }

.section {
                padding: 80px 5%;
            }

.stat-item h3 {
                font-size: 2.5rem;
            }
        }

@media (max-width: 576px) {
            .hero-content h1 {
                font-size: 2rem;
            }

.hero-content p {
                font-size: 1rem;
            }

.btn {
                padding: 10px 25px;
            }

.section-title h2 {
                font-size: 1.8rem;
            }

.section-title p {
                font-size: 1rem;
            }

.testimonial-card {
                padding: 30px 20px;
            }

.cta h2 {
                font-size: 2rem;
            }

.cta-buttons {
                flex-direction: column;
                gap: 15px;
            }

.cta-buttons .btn {
                width: 100%;
            }
        }

/* Animation Classes */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

.fade-in.active {
            opacity: 1;
            transform: translateY(0);
        }

.delay-1 {
            transition-delay: 0.2s;
        }

.delay-2 {
            transition-delay: 0.4s;
        }

.delay-3 {
            transition-delay: 0.6s;
        }

.delay-4 {
            transition-delay: 0.8s;
        }

JavaScript

// Mobile Menu Toggle
        const menuToggle = document.getElementById('menuToggle');
        const navLinks = document.getElementById('navLinks');

menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });

// Header Scroll Effect
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

// Initialize Swiper
        const swiper = new Swiper('.swiper', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

// Scroll Animation
        const fadeElements = document.querySelectorAll('.fade-in');
        
        const fadeInOnScroll = () => {
            fadeElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                
                if (elementTop < windowHeight - 100) {
                    element.classList.add('active');
                }
            });
        };

window.addEventListener('scroll', fadeInOnScroll);
        window.addEventListener('load', fadeInOnScroll);

// Smooth Scrolling for Anchor Links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                if (this.getAttribute('href') === '#') return;
                
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    window.scrollTo({
                        top: target.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    if (navLinks.classList.contains('active')) {
                        navLinks.classList.remove('active');
                    }
                }
            });
        });

Nexus Clinic Template Preview

Download Options