MediFuture Hospital 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>MediFuture - Advanced Healthcare Solutions</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>
        <a href="#" class="logo">
            <i class="fas fa-hospital"></i> MediFuture
        </a>
        <div class="nav-links">
            <a href="#home">Home</a>
            <a href="#services">Services</a>
            <a href="#about">About</a>
            <a href="#doctors">Doctors</a>
            <a href="#testimonials">Testimonials</a>
            <a href="#faq">FAQ</a>
            <a href="#contact">Contact</a>
        </div>
        <a href="#appointment" class="cta-button">Book Appointment</a>
        <div class="menu-toggle">
            <i class="fas fa-bars"></i>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-content fade-in-up">
            <h1>Advanced <span>Healthcare</span> for a Better Tomorrow</h1>
            <p>Experience cutting-edge medical treatments with our team of specialists. Your health is our priority with 24/7 emergency services and personalized care.</p>
            <div class="hero-buttons">
                <a href="#appointment" class="cta-button">Book Now</a>
                <a href="#services" class="secondary-button">Our Services</a>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="section-header fade-in-up">
            <h2>Our Specialized Services</h2>
            <p>We offer comprehensive healthcare services using the latest technology and medical advancements.</p>
        </div>
        <div class="services-grid">
            <div class="service-card fade-in-up delay-1">
                <div class="card-icon">
                    <i class="fas fa-heartbeat"></i>
                </div>
                <h3>Cardiology</h3>
                <p>Advanced heart care with state-of-the-art diagnostic tools and treatment options for all cardiac conditions.</p>
            </div>
            <div class="service-card fade-in-up delay-2">
                <div class="card-icon">
                    <i class="fas fa-brain"></i>
                </div>
                <h3>Neurology</h3>
                <p>Specialized care for brain and nervous system disorders with cutting-edge neurological treatments.</p>
            </div>
            <div class="service-card fade-in-up delay-3">
                <div class="card-icon">
                    <i class="fas fa-bone"></i>
                </div>
                <h3>Orthopedics</h3>
                <p>Comprehensive bone and joint care including minimally invasive surgeries and rehabilitation.</p>
            </div>
            <div class="service-card fade-in-up delay-1">
                <div class="card-icon">
                    <i class="fas fa-lungs"></i>
                </div>
                <h3>Pulmonology</h3>
                <p>Expert care for respiratory conditions with advanced diagnostic and therapeutic approaches.</p>
            </div>
            <div class="service-card fade-in-up delay-2">
                <div class="card-icon">
                    <i class="fas fa-baby"></i>
                </div>
                <h3>Pediatrics</h3>
                <p>Specialized healthcare for infants, children and adolescents with child-friendly facilities.</p>
            </div>
            <div class="service-card fade-in-up delay-3">
                <div class="card-icon">
                    <i class="fas fa-x-ray"></i>
                </div>
                <h3>Diagnostics</h3>
                <p>Advanced imaging and laboratory services for accurate and timely diagnosis.</p>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="section-header fade-in-up">
            <h2>About Our Hospital</h2>
            <p>Committed to excellence in healthcare with a patient-centered approach.</p>
        </div>
        <div class="about-container">
            <div class="about-image fade-in-up delay-1">
                <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Hospital Facility">
            </div>
            <div class="about-content fade-in-up delay-2">
                <h2>World-Class Healthcare Facility</h2>
                <p>MediFuture Hospital is a leading healthcare institution dedicated to providing exceptional medical services with compassion and innovation. Our team of board-certified physicians and healthcare professionals are committed to delivering personalized care using the latest medical technologies.</p>
                <p>Founded in 2005, we have grown to become a trusted name in healthcare, serving thousands of patients annually with a comprehensive range of medical services.</p>
                <div class="about-stats">
                    <div class="stat-item">
                        <h3>250+</h3>
                        <p>Specialized Doctors</p>
                    </div>
                    <div class="stat-item">
                        <h3>50+</h3>
                        <p>Medical Departments</p>
                    </div>
                    <div class="stat-item">
                        <h3>10,000+</h3>
                        <p>Happy Patients</p>
                    </div>
                    <div class="stat-item">
                        <h3>24/7</h3>
                        <p>Emergency Services</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="doctors" id="doctors">
        <div class="section-header fade-in-up">
            <h2>Our Expert Doctors</h2>
            <p>Meet our team of highly qualified and experienced medical professionals.</p>
        </div>
        <div class="doctors-slider fade-in-up">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="doctor-card">
                            <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="Doctor">
                            </div>
                            <div class="doctor-info">
                                <h3>Dr. Sarah Johnson</h3>
                                <p>Cardiologist</p>
                                <div class="doctor-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-linkedin-in"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="doctor-card">
                            <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=1064&q=80" alt="Doctor">
                            </div>
                            <div class="doctor-info">
                                <h3>Dr. Michael Chen</h3>
                                <p>Neurologist</p>
                                <div class="doctor-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-linkedin-in"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="doctor-card">
                            <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=1074&q=80" alt="Doctor">
                            </div>
                            <div class="doctor-info">
                                <h3>Dr. Emily Rodriguez</h3>
                                <p>Pediatrician</p>
                                <div class="doctor-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-linkedin-in"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="doctor-card">
                            <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=1064&q=80" alt="Doctor">
                            </div>
                            <div class="doctor-info">
                                <h3>Dr. James Wilson</h3>
                                <p>Orthopedic Surgeon</p>
                                <div class="doctor-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-linkedin-in"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="section-header fade-in-up">
            <h2>Patient Testimonials</h2>
            <p>Hear what our patients say about their experience at MediFuture.</p>
        </div>
        <div class="testimonials-slider fade-in-up">
            <div class="swiper testimonialsSwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="testimonial-card">
                            <div class="testimonial-content">
                                <p>The care I received at MediFuture was exceptional. The doctors took time to listen to my concerns and explained everything clearly. The facilities are modern and clean, and the staff was incredibly kind throughout my treatment.</p>
                            </div>
                            <div class="testimonial-author">
                                <div class="author-image">
                                    <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Patient">
                                </div>
                                <div class="author-info">
                                    <h4>Jennifer Martinez</h4>
                                    <p>Cardiac Patient</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="testimonial-card">
                            <div class="testimonial-content">
                                <p>After my accident, the orthopedic team at MediFuture helped me regain full mobility. Their rehabilitation program was tailored to my needs, and the therapists were supportive every step of the way. I'm now back to my active lifestyle!</p>
                            </div>
                            <div class="testimonial-author">
                                <div class="author-image">
                                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Patient">
                                </div>
                                <div class="author-info">
                                    <h4>Robert Johnson</h4>
                                    <p>Orthopedic Patient</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="testimonial-card">
                            <div class="testimonial-content">
                                <p>As a new mother, I was nervous about my baby's health. The pediatric team was so patient and knowledgeable, answering all my questions. They made every visit comfortable and were always available when I needed advice.</p>
                            </div>
                            <div class="testimonial-author">
                                <div class="author-image">
                                    <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Patient">
                                </div>
                                <div class="author-info">
                                    <h4>Amanda Chen</h4>
                                    <p>Pediatric Patient's Parent</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

<section class="appointment" id="appointment">
        <div class="section-header fade-in-up">
            <h2>Book an Appointment</h2>
            <p>Schedule your visit with our specialists today.</p>
        </div>
        <div class="appointment-container">
            <div class="appointment-content fade-in-up delay-1">
                <h2>Ready to Take the First Step Towards Better Health?</h2>
                <p>Our patient care coordinators are available 24/7 to help you schedule appointments, answer questions about our services, and guide you through the process of becoming a patient at MediFuture Hospital.</p>
                <div class="about-stats">
                    <div class="stat-item">
                        <h3><i class="fas fa-phone-alt"></i></h3>
                        <p>Emergency: (123) 456-7890</p>
                    </div>
                    <div class="stat-item">
                        <h3><i class="fas fa-envelope"></i></h3>
                        <p>info@medifuture.com</p>
                    </div>
                </div>
            </div>
            <div class="appointment-form fade-in-up delay-2">
                <form>
                    <div class="form-group">
                        <label for="name">Full Name</label>
                        <input type="text" id="name" class="form-control" placeholder="Your Name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" class="form-control" placeholder="Your Email" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input type="tel" id="phone" class="form-control" placeholder="Your Phone" required>
                    </div>
                    <div class="form-group">
                        <label for="department">Department</label>
                        <select id="department" class="form-control" required>
                            <option value="">Select Department</option>
                            <option value="cardiology">Cardiology</option>
                            <option value="neurology">Neurology</option>
                            <option value="orthopedics">Orthopedics</option>
                            <option value="pediatrics">Pediatrics</option>
                            <option value="general">General Medicine</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="date">Preferred Date</label>
                        <input type="date" id="date" class="form-control" required>
                    </div>
                    <button type="submit" class="submit-btn">Book Appointment</button>
                </form>
            </div>
        </div>
    </section>

<section class="faq" id="faq">
        <div class="section-header fade-in-up">
            <h2>Frequently Asked Questions</h2>
            <p>Find answers to common questions about our hospital and services.</p>
        </div>
        <div class="faq-container fade-in-up">
            <div class="faq-item">
                <div class="faq-question">
                    <span>What insurance plans do you accept?</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        <p>We accept most major insurance plans including Medicare, Blue Cross Blue Shield, Aetna, Cigna, and UnitedHealthcare. Please contact our billing department at (123) 456-7891 to verify if we accept your specific insurance plan.</p>
                    </div>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">
                    <span>How do I get my medical records?</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        <p>You can request your medical records through our patient portal or by submitting a written request to our medical records department. There may be a small fee for copying and processing. Requests typically take 3-5 business days to complete.</p>
                    </div>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">
                    <span>What are your visiting hours?</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        <p>General visiting hours are from 8:00 AM to 8:00 PM daily. Intensive Care Units have more restricted visiting hours (typically 30 minutes every 2 hours) to ensure patient rest and recovery. Some departments may have special visiting policies.</p>
                    </div>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">
                    <span>Do you offer telemedicine services?</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        <p>Yes, we offer comprehensive telemedicine services for many specialties. You can schedule a virtual visit through our patient portal or by calling our appointment line. Telemedicine is available for follow-up visits, consultations, and certain types of evaluations.</p>
                    </div>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">
                    <span>Where should I park when visiting the hospital?</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        <p>We have several parking garages available for patients and visitors. The main visitor parking is located in Garage A, directly in front of the main hospital entrance. Valet parking is also available at the main entrance for a small fee. Emergency Department visitors may park in the designated ED parking area.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer id="contact">
        <div class="footer-container">
            <div class="footer-col">
                <h3>About Us</h3>
                <p>MediFuture Hospital is a leading healthcare provider committed to delivering exceptional medical care with cutting-edge technology and compassionate service.</p>
                <div class="social-links">
                    <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">
                <h3>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#doctors">Doctors</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#faq">FAQ</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Departments</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="#">Emergency</a></li>
                    <li><a href="#">Diagnostics</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <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>Main: (123) 456-7890<br>Emergency: (123) 456-7891</span>
                    </li>
                    <li>
                        <i class="fas fa-envelope"></i>
                        <span>info@medifuture.com<br>support@medifuture.com</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 MediFuture Hospital. All Rights Reserved. | Designed with <i class="fas fa-heart" style="color: var(--accent);"></i> by MediFuture Team</p>
        </div>
    </footer>

<div class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </div>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

</body>
</html>

CSS

:root {
            --primary: #00a3e1;
            --secondary: #1a2e5a;
            --accent: #ff6b6b;
            --light: #f8f9fa;
            --dark: #212529;
            --glass: rgba(255, 255, 255, 0.15);
            --glass-border: rgba(255, 255, 255, 0.2);
            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4f0fb 100%);
            color: var(--dark);
            overflow-x: hidden;
        }

/* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(10px);
            background: var(--glass);
            border-bottom: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
        }

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

.logo i {
            font-size: 2rem;
        }

.nav-links {
            display: flex;
            gap: 30px;
        }

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

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

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

.cta-button {
            background: var(--primary);
            color: white;
            padding: 10px 25px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 163, 225, 0.3);
        }

.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 163, 225, 0.4);
        }

.menu-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 5%;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 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') center/cover no-repeat;
            z-index: -1;
            opacity: 0.1;
        }

.hero-content {
            max-width: 600px;
            z-index: 1;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: var(--secondary);
            line-height: 1.2;
        }

.hero h1 span {
            color: var(--primary);
        }

.hero p {
            font-size: 1.1rem;
            margin-bottom: 30px;
            color: var(--dark);
            opacity: 0.9;
        }

.hero-buttons {
            display: flex;
            gap: 20px;
        }

.secondary-button {
            background: transparent;
            color: var(--primary);
            padding: 10px 25px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: 2px solid var(--primary);
        }

.secondary-button:hover {
            background: var(--primary);
            color: white;
        }

/* Services Section */
        .services {
            padding: 100px 5%;
            background: white;
        }

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

.section-header h2 {
            font-size: 2.5rem;
            color: var(--secondary);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

.section-header h2::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 3px;
            background: var(--primary);
            bottom: -10px;
            left: 25%;
            border-radius: 3px;
        }

.section-header p {
            color: #666;
            max-width: 700px;
            margin: 0 auto;
            font-size: 1.1rem;
        }

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

.service-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.4s ease;
            position: relative;
            z-index: 1;
        }

.service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s 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:hover .card-icon {
            background: white;
            color: var(--primary);
        }

.service-card:hover h3,
        .service-card:hover p {
            color: white;
        }

.card-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 30px auto 20px;
            transition: all 0.4s ease;
        }

.service-card h3 {
            text-align: center;
            margin-bottom: 15px;
            color: var(--secondary);
            transition: all 0.4s ease;
        }

.service-card p {
            text-align: center;
            padding: 0 20px 30px;
            color: #666;
            transition: all 0.4s ease;
        }

/* About Section */
        .about {
            padding: 100px 5%;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4f0fb 100%);
            position: relative;
        }

.about-container {
            display: flex;
            align-items: center;
            gap: 50px;
        }

.about-image {
            flex: 1;
            position: relative;
            min-height: 500px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

.about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

.about-content {
            flex: 1;
        }

.about-content h2 {
            font-size: 2.5rem;
            color: var(--secondary);
            margin-bottom: 20px;
        }

.about-content p {
            margin-bottom: 20px;
            color: #555;
            line-height: 1.6;
        }

.about-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 40px;
        }

.stat-item {
            background: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

.stat-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

.stat-item h3 {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 10px;
        }

.stat-item p {
            color: var(--secondary);
            font-weight: 600;
        }

/* Doctors Section */
        .doctors {
            padding: 100px 5%;
            background: white;
        }

.doctors-slider {
            margin-top: 50px;
            position: relative;
            overflow: hidden;
        }

.doctor-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.4s ease;
            margin: 0 15px;
        }

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

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

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

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

.doctor-info {
            padding: 25px;
            text-align: center;
        }

.doctor-info h3 {
            color: var(--secondary);
            margin-bottom: 5px;
        }

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

.doctor-social {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.doctor-social a {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary);
            transition: all 0.3s ease;
        }

.doctor-social a:hover {
            background: var(--primary);
            color: white;
        }

.swiper-pagination {
            position: relative;
            margin-top: 50px;
        }

.swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: #ddd;
            opacity: 1;
        }

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

/* Testimonials */
        .testimonials {
            padding: 100px 5%;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4f0fb 100%);
        }

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

.testimonial-card::before {
            content: '\201C';
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 5rem;
            color: rgba(0, 163, 225, 0.1);
            font-family: serif;
            line-height: 1;
        }

.testimonial-content {
            margin-bottom: 30px;
            color: #555;
            font-style: italic;
            line-height: 1.6;
            position: relative;
            z-index: 1;
        }

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

.author-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
        }

.author-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.author-info h4 {
            color: var(--secondary);
            margin-bottom: 5px;
        }

.author-info p {
            color: #777;
            font-size: 0.9rem;
        }

/* Appointment Section */
        .appointment {
            padding: 100px 5%;
            background: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
            position: relative;
            color: white;
        }

.appointment::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(26, 46, 90, 0.8);
        }

.appointment-container {
            position: relative;
            z-index: 1;
            display: flex;
            gap: 50px;
            align-items: center;
        }

.appointment-content {
            flex: 1;
        }

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

.appointment-content p {
            margin-bottom: 30px;
            opacity: 0.9;
            max-width: 600px;
        }

.appointment-form {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }

.form-control {
            width: 100%;
            padding: 12px 15px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: white;
            font-size: 1rem;
        }

.form-control::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary);
            background: rgba(255, 255, 255, 0.2);
        }

.submit-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
        }

.submit-btn:hover {
            background: #0088c7;
            transform: translateY(-2px);
        }

/* FAQ Section */
        .faq {
            padding: 100px 5%;
            background: white;
        }

.faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

.faq-item {
            margin-bottom: 15px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

.faq-question {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 20px 25px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.faq-question i {
            transition: transform 0.3s ease;
        }

.faq-answer {
            padding: 0;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: #f9f9f9;
        }

.faq-answer-inner {
            padding: 20px 25px;
            color: #555;
            line-height: 1.6;
        }

.faq-item.active .faq-question i {
            transform: rotate(180deg);
        }

.faq-item.active .faq-answer {
            max-height: 500px;
            padding: 0;
        }

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

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

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

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

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

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

.footer-links a {
            color: white;
            opacity: 0.8;
            text-decoration: none;
            transition: all 0.3s ease;
            display: block;
        }

.footer-links a:hover {
            opacity: 1;
            padding-left: 5px;
            color: var(--primary);
        }

.footer-contact li {
            margin-bottom: 15px;
            list-style: none;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

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

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

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

.social-links a:hover {
            background: var(--primary);
            transform: translateY(-3px);
        }

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

/* Back to Top */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 999;
        }

.back-to-top.active {
            opacity: 1;
            visibility: visible;
        }

.back-to-top:hover {
            background: var(--secondary);
            transform: translateY(-5px);
        }

/* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.fade-in-up {
            animation: fadeInUp 0.8s ease forwards;
        }

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

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

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

/* Responsive */
        @media (max-width: 1200px) {
            .about-container {
                flex-direction: column;
            }
            
            .about-image {
                min-height: 400px;
                width: 100%;
            }
            
            .appointment-container {
                flex-direction: column;
            }
        }

@media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: white;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 30px;
                transition: all 0.5s ease;
            }
            
            .nav-links.active {
                left: 0;
            }
            
            .menu-toggle {
                display: block;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero-buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .section-header h2 {
                font-size: 2rem;
            }
        }

@media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .about-stats {
                grid-template-columns: 1fr;
            }
            
            .footer-container {
                grid-template-columns: 1fr;
            }
        }

JavaScript

// Mobile Menu Toggle
        const menuToggle = document.querySelector('.menu-toggle');
        const navLinks = document.querySelector('.nav-links');
        
        menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            menuToggle.innerHTML = navLinks.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });

// Close mobile menu when clicking a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });

// Initialize Doctors Swiper
        const doctorsSwiper = new Swiper('.mySwiper', {
            slidesPerView: 1,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                640: {
                    slidesPerView: 2,
                },
                1024: {
                    slidesPerView: 3,
                },
            }
        });

// Initialize Testimonials Swiper
        const testimonialsSwiper = new Swiper('.testimonialsSwiper', {
            slidesPerView: 1,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                768: {
                    slidesPerView: 2,
                },
            }
        });

// FAQ Accordion
        const faqItems = document.querySelectorAll('.faq-item');
        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            question.addEventListener('click', () => {
                item.classList.toggle('active');
                
                // Close other open items
                faqItems.forEach(otherItem => {
                    if (otherItem !== item && otherItem.classList.contains('active')) {
                        otherItem.classList.remove('active');
                    }
                });
            });
        });

// Back to Top Button
        const backToTop = document.querySelector('.back-to-top');
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTop.classList.add('active');
            } else {
                backToTop.classList.remove('active');
            }
        });
        
        backToTop.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Scroll Reveal Animation
        const fadeElements = document.querySelectorAll('.fade-in-up');
        
        const fadeObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = 1;
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, { threshold: 0.1 });
        
        fadeElements.forEach(el => {
            fadeObserver.observe(el);
            el.style.opacity = 0;
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        });

// Smooth Scrolling for Anchor Links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

MediFuture Hospital Template Preview

Download Options