Amazing Hospitals Healthcare | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MedCare General Hospital | Comprehensive Healthcare Services | Emergency & Specialty Care</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

</head>
<body>
    
    <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom">
        <div class="container">
            <a class="navbar-brand elegant-font" href="#home"> MedCare Hospital</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#departments">Departments</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#booking">Book Appointment</a>
                    </li>
                    <li class="nav-item">
                        <button class="btn btn-emergency" onclick="scrollToEmergency()">
                            <i class="fas fa-ambulance me-2"></i>Emergency
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

<section id="home" class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <div class="hero-content">
                        <div class="hero-greeting"> Trusted Healthcare Since 1985</div>
                        <h1 class="hero-title elegant-font">MedCare General Hospital</h1>
                        <p class="hero-subtitle">Providing comprehensive, compassionate healthcare with state-of-the-art medical technology and expert physicians. Your health and well-being are our top priority, 24/7.</p>
                        
                        <div class="hero-features">
                            <span class="feature-tag">24/7 Emergency</span>
                            <span class="feature-tag">Expert Doctors</span>
                            <span class="feature-tag">Patient Care</span>
                        </div>
                        
                        <div class="hero-buttons">
                            <a href="#booking" class="btn btn-custom btn-primary-custom">Book Appointment</a>
                            <a href="#services" class="btn btn-custom btn-secondary-custom">Our Services</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="hero-image text-center">
                        <div class="medical-showcase">
                            <i class="fas fa-heartbeat"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="services-section section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center mb-5">
                    <h2 class="section-title animate-on-scroll elegant-font">Medical Services</h2>
                    <p class="section-subtitle animate-on-scroll">Comprehensive healthcare services delivered by experienced medical professionals</p>
                </div>
            </div>
            
            <div class="services-grid">
                <div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-user-md"></i>
                    </div>
                    <h4 class="service-title">Primary Care</h4>
                    <p class="service-description">Comprehensive primary healthcare services for patients of all ages with preventive care and health maintenance.</p>
                    <ul class="service-features">
                        <li><i class="fas fa-check"></i>Annual health checkups</li>
                        <li><i class="fas fa-check"></i>Preventive screenings</li>
                        <li><i class="fas fa-check"></i>Chronic disease management</li>
                        <li><i class="fas fa-check"></i>Immunizations & vaccines</li>
                        <li><i class="fas fa-check"></i>Health counseling</li>
                    </ul>
                </div>

<div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-procedures"></i>
                    </div>
                    <h4 class="service-title">Surgical Services</h4>
                    <p class="service-description">Advanced surgical procedures performed by board-certified surgeons using minimally invasive techniques.</p>
                    <ul class="service-features">
                        <li><i class="fas fa-check"></i>General surgery</li>
                        <li><i class="fas fa-check"></i>Orthopedic surgery</li>
                        <li><i class="fas fa-check"></i>Laparoscopic procedures</li>
                        <li><i class="fas fa-check"></i>Outpatient surgery</li>
                        <li><i class="fas fa-check"></i>Post-operative care</li>
                    </ul>
                </div>

<div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-x-ray"></i>
                    </div>
                    <h4 class="service-title">Diagnostic Imaging</h4>
                    <p class="service-description">State-of-the-art imaging technology for accurate diagnosis and treatment planning.</p>
                    <ul class="service-features">
                        <li><i class="fas fa-check"></i>MRI & CT scans</li>
                        <li><i class="fas fa-check"></i>Digital X-rays</li>
                        <li><i class="fas fa-check"></i>Ultrasound imaging</li>
                        <li><i class="fas fa-check"></i>Mammography</li>
                        <li><i class="fas fa-check"></i>Nuclear medicine</li>
                    </ul>
                </div>

<div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-ambulance"></i>
                    </div>
                    <h4 class="service-title">Emergency Care</h4>
                    <p class="service-description">24/7 emergency medical services with rapid response and critical care capabilities.</p>
                    <ul class="service-features">
                        <li><i class="fas fa-check"></i>24/7 emergency room</li>
                        <li><i class="fas fa-check"></i>Trauma care</li>
                        <li><i class="fas fa-check"></i>Critical care unit</li>
                        <li><i class="fas fa-check"></i>Emergency surgery</li>
                        <li><i class="fas fa-check"></i>Ambulance services</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

<section id="departments" class="departments-section section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center mb-5">
                    <h2 class="section-title animate-on-scroll elegant-font">Medical Departments</h2>
                    <p class="section-subtitle animate-on-scroll">Specialized medical departments staffed by expert physicians and healthcare professionals</p>
                </div>
            </div>
            
            <div class="departments-grid">
                <div class="department-card animate-on-scroll">
                    <div class="department-image">
                        <i class="fas fa-heart"></i>
                        <div class="department-badge">Cardiology</div>
                        <div class="department-overlay">
                            <a href="#" class="department-btn" onclick="viewDepartment('Cardiology')">
                                <i class="fas fa-info-circle me-2"></i>Learn More
                            </a>
                            <a href="#" class="department-btn" onclick="bookDepartment('Cardiology')">
                                <i class="fas fa-calendar me-2"></i>Book
                            </a>
                        </div>
                    </div>
                    <div class="department-content">
                        <h4 class="department-title">Cardiology Department</h4>
                        <p class="department-description">Comprehensive heart and cardiovascular care with advanced diagnostic and treatment options.</p>
                        <div class="department-stats">
                            <div class="department-stat">
                                <div class="stat-number">15+</div>
                                <div class="stat-label">Cardiologists</div>
                            </div>
                            <div class="department-stat">
                                <div class="stat-number">5,000+</div>
                                <div class="stat-label">Patients/Year</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="department-card animate-on-scroll">
                    <div class="department-image">
                        <i class="fas fa-brain"></i>
                        <div class="department-badge">Neurology</div>
                        <div class="department-overlay">
                            <a href="#" class="department-btn" onclick="viewDepartment('Neurology')">
                                <i class="fas fa-info-circle me-2"></i>Learn More
                            </a>
                            <a href="#" class="department-btn" onclick="bookDepartment('Neurology')">
                                <i class="fas fa-calendar me-2"></i>Book
                            </a>
                        </div>
                    </div>
                    <div class="department-content">
                        <h4 class="department-title">Neurology Department</h4>
                        <p class="department-description">Expert care for neurological conditions including stroke, epilepsy, and brain disorders.</p>
                        <div class="department-stats">
                            <div class="department-stat">
                                <div class="stat-number">12+</div>
                                <div class="stat-label">Neurologists</div>
                            </div>
                            <div class="department-stat">
                                <div class="stat-number">3,500+</div>
                                <div class="stat-label">Patients/Year</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="department-card animate-on-scroll">
                    <div class="department-image">
                        <i class="fas fa-bone"></i>
                        <div class="department-badge">Orthopedics</div>
                        <div class="department-overlay">
                            <a href="#" class="department-btn" onclick="viewDepartment('Orthopedics')">
                                <i class="fas fa-info-circle me-2"></i>Learn More
                            </a>
                            <a href="#" class="department-btn" onclick="bookDepartment('Orthopedics')">
                                <i class="fas fa-calendar me-2"></i>Book
                            </a>
                        </div>
                    </div>
                    <div class="department-content">
                        <h4 class="department-title">Orthopedics Department</h4>
                        <p class="department-description">Specialized care for bone, joint, and musculoskeletal conditions and injuries.</p>
                        <div class="department-stats">
                            <div class="department-stat">
                                <div class="stat-number">18+</div>
                                <div class="stat-label">Orthopedists</div>
                            </div>
                            <div class="department-stat">
                                <div class="stat-number">8,000+</div>
                                <div class="stat-label">Patients/Year</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="department-card animate-on-scroll">
                    <div class="department-image">
                        <i class="fas fa-baby"></i>
                        <div class="department-badge">Pediatrics</div>
                        <div class="department-overlay">
                            <a href="#" class="department-btn" onclick="viewDepartment('Pediatrics')">
                                <i class="fas fa-info-circle me-2"></i>Learn More
                            </a>
                            <a href="#" class="department-btn" onclick="bookDepartment('Pediatrics')">
                                <i class="fas fa-calendar me-2"></i>Book
                            </a>
                        </div>
                    </div>
                    <div class="department-content">
                        <h4 class="department-title">Pediatrics Department</h4>
                        <p class="department-description">Comprehensive healthcare for infants, children, and adolescents with specialized pediatric care.</p>
                        <div class="department-stats">
                            <div class="department-stat">
                                <div class="stat-number">20+</div>
                                <div class="stat-label">Pediatricians</div>
                            </div>
                            <div class="department-stat">
                                <div class="stat-number">12,000+</div>
                                <div class="stat-label">Patients/Year</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="department-card animate-on-scroll">
                    <div class="department-image">
                        <i class="fas fa-female"></i>
                        <div class="department-badge">Women's Health</div>
                        <div class="department-overlay">
                            <a href="#" class="department-btn" onclick="viewDepartment('Women\'s Health')">
                                <i class="fas fa-info-circle me-2"></i>Learn More
                            </a>
                            <a href="#" class="department-btn" onclick="bookDepartment('Women\'s Health')">
                                <i class="fas fa-calendar me-2"></i>Book
                            </a>
                        </div>
                    </div>
                    <div class="department-content">
                        <h4 class="department-title">Women's Health</h4>
                        <p class="department-description">Complete women's healthcare including obstetrics, gynecology, and reproductive health.</p>
                        <div class="department-stats">
                            <div class="department-stat">
                                <div class="stat-number">14+</div>
                                <div class="stat-label">Specialists</div>
                            </div>
                            <div class="department-stat">
                                <div class="stat-number">6,500+</div>
                                <div class="stat-label">Patients/Year</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="department-card animate-on-scroll">
                    <div class="department-image">
                        <i class="fas fa-eye"></i>
                        <div class="department-badge">Ophthalmology</div>
                        <div class="department-overlay">
                            <a href="#" class="department-btn" onclick="viewDepartment('Ophthalmology')">
                                <i class="fas fa-info-circle me-2"></i>Learn More
                            </a>
                            <a href="#" class="department-btn" onclick="bookDepartment('Ophthalmology')">
                                <i class="fas fa-calendar me-2"></i>Book
                            </a>
                        </div>
                    </div>
                    <div class="department-content">
                        <h4 class="department-title">Ophthalmology</h4>
                        <p class="department-description">Advanced eye care services including surgery, treatment, and vision correction.</p>
                        <div class="department-stats">
                            <div class="department-stat">
                                <div class="stat-number">8+</div>
                                <div class="stat-label">Eye Specialists</div>
                            </div>
                            <div class="department-stat">
                                <div class="stat-number">4,200+</div>
                                <div class="stat-label">Patients/Year</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="booking" class="booking-section section-padding">
        <div class="container">
            <div class="booking-container">
                <div class="booking-card animate-on-scroll">
                    <div class="booking-header">
                        <h2 class="booking-title elegant-font">Book Your Appointment</h2>
                        <p class="booking-subtitle">Schedule your visit with our medical experts. We're here to provide the best care for you and your family.</p>
                    </div>
                    
                    <form id="appointmentForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">First Name *</label>
                                    <input type="text" class="form-control" placeholder="Your first name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Last Name *</label>
                                    <input type="text" class="form-control" placeholder="Your last name" required>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Phone Number *</label>
                                    <input type="tel" class="form-control" placeholder="(555) 123-4567" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Email Address *</label>
                                    <input type="email" class="form-control" placeholder="your.email@example.com" required>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Department *</label>
                                    <select 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="womens-health">Women's Health</option>
                                        <option value="ophthalmology">Ophthalmology</option>
                                        <option value="primary-care">Primary Care</option>
                                        <option value="emergency">Emergency Care</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Preferred Date *</label>
                                    <input type="date" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Preferred Time *</label>
                                    <select class="form-control" required>
                                        <option value="">Select time</option>
                                        <option value="08:00">8:00 AM</option>
                                        <option value="09:00">9:00 AM</option>
                                        <option value="10:00">10:00 AM</option>
                                        <option value="11:00">11:00 AM</option>
                                        <option value="13:00">1:00 PM</option>
                                        <option value="14:00">2:00 PM</option>
                                        <option value="15:00">3:00 PM</option>
                                        <option value="16:00">4:00 PM</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Insurance Provider</label>
                                    <select class="form-control">
                                        <option value="">Select insurance</option>
                                        <option value="blue-cross">Blue Cross Blue Shield</option>
                                        <option value="aetna">Aetna</option>
                                        <option value="cigna">Cigna</option>
                                        <option value="united">United Healthcare</option>
                                        <option value="medicare">Medicare</option>
                                        <option value="medicaid">Medicaid</option>
                                        <option value="self-pay">Self Pay</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Reason for Visit *</label>
                            <textarea class="form-control" rows="4" placeholder="Please describe your symptoms or reason for the appointment" required></textarea>
                        </div>
                        
                        <button type="submit" class="btn-book">
                            <i class="fas fa-calendar-check me-2"></i>Schedule Appointment
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<section id="emergency" class="emergency-section section-padding">
        <div class="container">
            <div class="emergency-content animate-on-scroll">
                <h2 class="emergency-title elegant-font">24/7 Emergency Care</h2>
                <p class="emergency-description">When every second counts, our emergency department is ready to provide immediate, life-saving care with experienced emergency physicians and state-of-the-art equipment.</p>
                
                <div class="emergency-info">
                    <div class="emergency-item">
                        <div class="emergency-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="emergency-item-title">24/7 Availability</div>
                        <div class="emergency-item-text">Emergency services available around the clock, every day of the year</div>
                    </div>
                    
                    <div class="emergency-item">
                        <div class="emergency-icon">
                            <i class="fas fa-user-md"></i>
                        </div>
                        <div class="emergency-item-title">Expert Staff</div>
                        <div class="emergency-item-text">Board-certified emergency physicians and trauma specialists</div>
                    </div>
                    
                    <div class="emergency-item">
                        <div class="emergency-icon">
                            <i class="fas fa-heartbeat"></i>
                        </div>
                        <div class="emergency-item-title">Advanced Care</div>
                        <div class="emergency-item-text">State-of-the-art equipment and immediate diagnostic capabilities</div>
                    </div>
                    
                    <div class="emergency-item">
                        <div class="emergency-icon">
                            <i class="fas fa-ambulance"></i>
                        </div>
                        <div class="emergency-item-title">Rapid Response</div>
                        <div class="emergency-item-text">Fast triage and treatment for all emergency conditions</div>
                    </div>
                </div>
                
                <button class="btn-emergency-call" onclick="callEmergency()">
                    <i class="fas fa-phone me-2"></i>Call Emergency: 911
                </button>
            </div>
        </div>
    </section>

<section id="contact" class="contact-section section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center mb-5">
                    <h2 class="section-title animate-on-scroll elegant-font">Contact Us</h2>
                    <p class="section-subtitle animate-on-scroll">Get in touch with our healthcare team for appointments, questions, or medical information</p>
                </div>
            </div>
            
            <div class="contact-content animate-on-scroll">
                <div class="contact-info">
                    <h3 class="contact-title elegant-font">Get Medical Care</h3>
                    <p class="contact-description">Our dedicated healthcare team is available to assist you with appointments, medical questions, and provide the compassionate care you deserve. Contact us today to schedule your visit or learn more about our services.</p>
                    
                    <div class="contact-methods">
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <div><strong>Main Hospital</strong></div>
                                <div>+1 (555) MEDCARE</div>
                            </div>
                        </div>
                        
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-ambulance"></i>
                            </div>
                            <div>
                                <div><strong>Emergency</strong></div>
                                <div>911 or +1 (555) 911-HELP</div>
                            </div>
                        </div>
                        
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <div><strong>Email</strong></div>
                                <div>info@medcare-hospital.com</div>
                            </div>
                        </div>
                        
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <div><strong>Location</strong></div>
                                <div>123 Healthcare Blvd, Medical City</div>
                            </div>
                        </div>
                        
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div>
                                <div><strong>Visiting Hours</strong></div>
                                <div>Daily, 8 AM - 8 PM</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="contact-form">
                    <form id="contactForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">First Name *</label>
                                    <input type="text" class="form-control" placeholder="Your first name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Last Name *</label>
                                    <input type="text" class="form-control" placeholder="Your last name" required>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Email Address *</label>
                            <input type="email" class="form-control" placeholder="your.email@example.com" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Phone Number</label>
                            <input type="tel" class="form-control" placeholder="(555) 123-4567">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Inquiry Type</label>
                            <select class="form-control">
                                <option value="">Select inquiry type</option>
                                <option value="appointment">Appointment Scheduling</option>
                                <option value="medical">Medical Question</option>
                                <option value="billing">Billing Inquiry</option>
                                <option value="insurance">Insurance Information</option>
                                <option value="feedback">Patient Feedback</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Message *</label>
                            <textarea class="form-control" rows="5" placeholder="How can we help you today? Please provide details about your inquiry or medical question." required></textarea>
                        </div>
                        
                        <button type="submit" class="btn-submit">
                            <i class="fas fa-paper-plane me-2"></i>Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="footer-section">
        <div class="container">
            <div class="social-links">
                <a href="#" onclick="openSocial('Facebook')"><i class="fab fa-facebook-f"></i></a>
                <a href="#" onclick="openSocial('Twitter')"><i class="fab fa-twitter"></i></a>
                <a href="#" onclick="openSocial('LinkedIn')"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" onclick="openSocial('YouTube')"><i class="fab fa-youtube"></i></a>
                <a href="#" onclick="openSocial('Instagram')"><i class="fab fa-instagram"></i></a>
            </div>
            <p class="mb-0">&copy; 2024 MedCare General Hospital. All rights reserved. | Caring for Your Health, Every Day ?</p>
        </div>
    </footer>

<div class="success-message" id="successMessage">
        <i class="fas fa-check-circle me-2"></i>
        <span id="successText">Success!</span>
    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

CSS

:root {
            --primary-blue: #0066CC;
            --secondary-navy: #003D7A;
            --accent-teal: #00A3A3;
            --medical-green: #00B894;
            --emergency-red: #E74C3C;
            --light-blue: #F0F8FF;
            --dark-navy: #001F3F;
            --warm-gray: #64748B;
            --light-gray: #F1F5F9;
            --pure-white: #FFFFFF;
            --gradient-primary: linear-gradient(135deg, #0066CC 0%, #003D7A 100%);
            --gradient-secondary: linear-gradient(135deg, #00A3A3 0%, #00B894 100%);
            --gradient-emergency: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
            --gradient-medical: linear-gradient(135deg, #001F3F 0%, #0066CC 100%);
            --shadow-soft: 0 4px 20px rgba(0, 102, 204, 0.1);
            --shadow-medium: 0 8px 30px rgba(0, 102, 204, 0.15);
            --shadow-strong: 0 15px 40px rgba(0, 102, 204, 0.2);
            --border-radius: 16px;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--dark-navy);
            background: var(--pure-white);
            overflow-x: hidden;
        }

.elegant-font {
            font-family: 'Playfair Display', serif;
        }

/* Navigation */
        .navbar-custom {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(0, 102, 204, 0.1);
        }

.navbar-brand {
            font-weight: 800;
            font-size: 1.8rem;
            color: var(--primary-blue) !important;
            letter-spacing: -0.5px;
        }

.nav-link {
            font-weight: 500;
            color: var(--warm-gray) !important;
            margin: 0 1rem;
            transition: all 0.3s ease;
            position: relative;
            letter-spacing: 0.2px;
        }

.nav-link:hover {
            color: var(--primary-blue) !important;
        }

.nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background: var(--gradient-primary);
            transition: all 0.3s ease;
            transform: translateX(-50%);
            border-radius: 1px;
        }

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

.btn-emergency {
            background: var(--gradient-emergency);
            color: white;
            border: none;
            padding: 12px 28px;
            border-radius: 25px;
            font-weight: 600;
            margin-left: 20px;
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
        }

.btn-emergency:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
            color: white;
        }

/* Hero Section */
        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 163, 163, 0.05) 100%);
            position: relative;
            overflow: hidden;
        }

.hero-content {
            position: relative;
            z-index: 2;
        }

.hero-greeting {
            font-size: 1.2rem;
            color: var(--secondary-navy);
            font-weight: 600;
            margin-bottom: 1rem;
            animation: fadeInUp 0.8s ease-out;
        }

.hero-title {
            font-size: 3rem;
            font-weight: 800;
            color: var(--primary-blue);
            /* margin-bottom: 1.5rem; */
            animation: fadeInUp 0.8s ease-out 0.2s both;
            line-height: 1.1;
            letter-spacing: -2px;
        }

.hero-subtitle {
            font-size: 1.2rem;
            color: var(--warm-gray);
            /* margin-bottom: 2rem; */
            animation: fadeInUp 0.8s ease-out 0.4s both;
            font-weight: 400;
            max-width: 600px;
        }

.hero-features {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 3rem;
            animation: fadeInUp 0.8s ease-out 0.6s both;
            flex-wrap: wrap;
        }

.feature-tag {
            background: rgba(0, 102, 204, 0.1);
            color: var(--primary-blue);
            padding: 12px 20px;
            border-radius: 25px;
            font-weight: 600;
            font-size: 0.9rem;
            border: 1px solid rgba(0, 102, 204, 0.2);
            transition: all 0.3s ease;
        }

.feature-tag:hover {
            background: var(--primary-blue);
            color: white;
            transform: translateY(-2px);
        }

.hero-buttons {
            animation: fadeInUp 0.8s ease-out 0.8s both;
        }

.hero-image {
            position: relative;
            animation: fadeInRight 1s ease-out 0.5s both;
        }

.medical-showcase {
            width: 400px;
            height: 400px;
            border-radius: var(--border-radius);
            background: var(--gradient-medical);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8rem;
            color: white;
            box-shadow: var(--shadow-strong);
            position: relative;
            overflow: hidden;
        }

.medical-showcase::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: shimmer 3s infinite;
        }

@keyframes shimmer {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

.btn-custom {
            padding: 16px 35px;
            font-weight: 600;
            border-radius: 30px;
            letter-spacing: 0.3px;
            transition: all 0.3s ease;
            border: none;
            margin: 0 10px;
            text-decoration: none;
            display: inline-block;
            font-size: 1rem;
        }

.btn-primary-custom {
            background: var(--gradient-primary);
            color: white;
        }

.btn-primary-custom:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
            color: white;
        }

.btn-secondary-custom {
            background: transparent;
            color: var(--primary-blue);
            border: 2px solid var(--primary-blue);
        }

.btn-secondary-custom:hover {
            background: var(--primary-blue);
            color: white;
            transform: translateY(-3px);
        }

/* Section Styling */
        .section-padding {
            padding: 100px 0;
        }

.section-title {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            color: var(--primary-blue);
            text-align: center;
            line-height: 1.2;
            letter-spacing: -1px;
        }

.section-subtitle {
            font-size: 1.2rem;
            color: var(--warm-gray);
            margin-bottom: 4rem;
            text-align: center;
            font-weight: 400;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

/* Services Section */
        .services-section {
            background: var(--light-blue);
        }

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

.service-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 2.5rem;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            border-top: 4px solid var(--primary-blue);
            text-align: center;
        }

.service-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-strong);
        }

.service-card:nth-child(2) {
            border-top-color: var(--accent-teal);
        }

.service-card:nth-child(3) {
            border-top-color: var(--medical-green);
        }

.service-card:nth-child(4) {
            border-top-color: var(--emergency-red);
        }

.service-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2.5rem;
            color: white;
        }

.service-card:nth-child(2) .service-icon {
            background: var(--gradient-secondary);
        }

.service-card:nth-child(3) .service-icon {
            background: linear-gradient(135deg, #00B894 0%, #00A085 100%);
        }

.service-card:nth-child(4) .service-icon {
            background: var(--gradient-emergency);
        }

.service-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }

.service-description {
            color: var(--warm-gray);
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

.service-features {
            list-style: none;
            text-align: left;
        }

.service-features li {
            display: flex;
            align-items: center;
            margin-bottom: 0.8rem;
            color: var(--warm-gray);
            font-weight: 500;
        }

.service-features i {
            color: var(--secondary-navy);
            margin-right: 10px;
            width: 16px;
        }

/* Departments Section */
        .departments-section {
            background: var(--pure-white);
        }

.departments-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

.department-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            position: relative;
        }

.department-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-strong);
        }

.department-image {
            height: 200px;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: white;
            position: relative;
            overflow: hidden;
        }

.department-card:nth-child(2) .department-image {
            background: var(--gradient-secondary);
        }

.department-card:nth-child(3) .department-image {
            background: linear-gradient(135deg, #00B894 0%, #00A085 100%);
        }

.department-card:nth-child(4) .department-image {
            background: var(--gradient-emergency);
        }

.department-card:nth-child(5) .department-image {
            background: linear-gradient(135deg, #8E44AD 0%, #9B59B6 100%);
        }

.department-card:nth-child(6) .department-image {
            background: linear-gradient(135deg, #E67E22 0%, #F39C12 100%);
        }

.department-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

.department-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s ease;
        }

.department-card:hover .department-overlay {
            opacity: 1;
        }

.department-btn {
            background: white;
            color: var(--primary-blue);
            padding: 12px 20px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            margin: 0 5px;
        }

.department-btn:hover {
            background: var(--accent-teal);
            color: white;
            transform: translateY(-2px);
        }

.department-content {
            padding: 2rem;
        }

.department-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 0.5rem;
        }

.department-description {
            color: var(--warm-gray);
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

.department-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

.department-stat {
            text-align: center;
            padding: 1rem;
            background: var(--light-gray);
            border-radius: 8px;
        }

.stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 0.3rem;
        }

.stat-label {
            font-size: 0.9rem;
            color: var(--warm-gray);
            font-weight: 600;
        }

/* Booking Section */
        .booking-section {
            background: var(--light-blue);
        }

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

.booking-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 3rem;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
        }

.booking-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
        }

.booking-header {
            text-align: center;
            margin-bottom: 2rem;
        }

.booking-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }

.booking-subtitle {
            color: var(--warm-gray);
            font-size: 1.1rem;
        }

.form-group {
            margin-bottom: 1.5rem;
        }

.form-label {
            font-weight: 600;
            color: var(--primary-blue);
            margin-bottom: 0.5rem;
            display: block;
        }

.form-control {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #E9ECEF;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
        }

.btn-book {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 16px 40px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            width: 100%;
            letter-spacing: 0.3px;
        }

.btn-book:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
        }

/* Emergency Section */
        .emergency-section {
            background: var(--gradient-emergency);
            color: white;
        }

.emergency-content {
            text-align: center;
        }

.emergency-title {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            color: white;
        }

.emergency-description {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            line-height: 1.7;
        }

.emergency-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

.emergency-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 2rem;
            border-radius: var(--border-radius);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

.emergency-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-5px);
        }

.emergency-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

.emergency-item-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

.emergency-item-text {
            opacity: 0.9;
        }

.btn-emergency-call {
            background: white;
            color: var(--emergency-red);
            border: none;
            padding: 20px 50px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
        }

.btn-emergency-call:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-strong);
            background: var(--light-gray);
        }

/* Contact Section */
        .contact-section {
            background: var(--gradient-medical);
            color: white;
        }

.contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: start;
        }

.contact-info {
            padding: 2rem;
        }

.contact-title {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            color: white;
        }

.contact-description {
            font-size: 1.1rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            line-height: 1.7;
        }

.contact-methods {
            margin-bottom: 2rem;
        }

.contact-method {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

.contact-method:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(10px);
        }

.contact-icon {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            font-size: 1.2rem;
        }

.contact-form {
            background: rgba(255, 255, 255, 0.1);
            padding: 2.5rem;
            border-radius: var(--border-radius);
            backdrop-filter: blur(10px);
        }

.contact-form .form-control {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            backdrop-filter: blur(10px);
        }

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

.contact-form .form-control:focus {
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.15);
        }

.contact-form .form-label {
            color: white;
        }

.btn-submit {
            background: white;
            color: var(--primary-blue);
            border: none;
            padding: 16px 40px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            width: 100%;
            letter-spacing: 0.3px;
        }

.btn-submit:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
            background: var(--light-gray);
        }

/* Footer */
        .footer-section {
            background: #1A1A1A;
            color: white;
            padding: 60px 0 30px;
            text-align: center;
        }

.social-links {
            margin-bottom: 2rem;
        }

.social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: var(--gradient-primary);
            color: white;
            border-radius: 50%;
            margin: 0 10px;
            transition: all 0.3s ease;
            text-decoration: none;
        }

.social-links a:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
        }

/* Success Messages */
        .success-message {
            position: fixed;
            top: 100px;
            right: 30px;
            background: var(--gradient-primary);
            color: white;
            padding: 16px 25px;
            border-radius: 12px;
            box-shadow: var(--shadow-medium);
            z-index: 1060;
            transform: translateX(400px);
            transition: transform 0.3s ease;
            font-weight: 600;
        }

.success-message.show {
            transform: translateX(0);
        }

/* Loading Animation */
        .loading-spinner {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 2px solid rgba(0, 102, 204, 0.3);
            border-radius: 50%;
            border-top-color: var(--primary-blue);
            animation: spin 1s ease-in-out infinite;
        }

@keyframes spin {
            to { transform: rotate(360deg); }
        }

/* Animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

.animate-on-scroll.animated {
            opacity: 1;
            transform: translateY(0);
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 3rem;
            }
            
            .section-title {
                font-size: 2.5rem;
            }
            
            .contact-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .medical-showcase {
                width: 300px;
                height: 300px;
                font-size: 6rem;
            }
            
            .hero-features {
                justify-content: center;
            }
            
            .emergency-info {
                grid-template-columns: 1fr;
            }
        }

JavaScript

// Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

// Animate elements on scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.animate-on-scroll');
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('animated');
                }
            });
        }

// Navbar background on scroll
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar-custom');
            if (window.scrollY > 50) {
                navbar.style.background = 'rgba(255, 255, 255, 0.98)';
                navbar.style.boxShadow = '0 8px 30px rgba(0, 102, 204, 0.15)';
            } else {
                navbar.style.background = 'rgba(255, 255, 255, 0.95)';
                navbar.style.boxShadow = '0 4px 20px rgba(0, 102, 204, 0.1)';
            }
            
            animateOnScroll();
        });

// Scroll to emergency function
        function scrollToEmergency() {
            document.querySelector('#emergency').scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }

// View department function
        function viewDepartment(departmentName) {
            showSuccessMessage(`Loading ${departmentName} information...`);
            setTimeout(() => {
                alert(`? DEPARTMENT: ${departmentName.toUpperCase()} ?\n\n? COMPREHENSIVE MEDICAL CARE:\n\n? DEPARTMENT OVERVIEW:\n• Specialized medical expertise\n• Board-certified physicians\n• Advanced diagnostic equipment\n• Comprehensive treatment options\n• Patient-centered care approach\n\n?‍⚕️ MEDICAL TEAM:\n• Department head physician\n• Specialist doctors and surgeons\n• Registered nurses and staff\n• Medical technicians\n• Patient care coordinators\n\n? SERVICES PROVIDED:\n• Diagnostic consultations\n• Treatment planning\n• Surgical procedures (if applicable)\n• Follow-up care\n• Emergency services\n• Preventive care programs\n\n? FACILITIES & EQUIPMENT:\n• State-of-the-art medical technology\n• Modern examination rooms\n• Surgical suites (if applicable)\n• Diagnostic imaging equipment\n• Patient monitoring systems\n\n? APPOINTMENT SCHEDULING:\n• Online booking available\n• Same-day appointments\n• Emergency consultations\n• Follow-up scheduling\n• Telemedicine options\n\n? TREATMENT SPECIALTIES:\n${departmentName === 'Cardiology' ? '• Heart disease diagnosis\n• Cardiac catheterization\n• Pacemaker implantation\n• Heart surgery\n• Cardiac rehabilitation' :
  departmentName === 'Neurology' ? '• Stroke treatment\n• Epilepsy management\n• Brain tumor care\n• Neurological disorders\n• Memory disorders' :
  departmentName === 'Orthopedics' ? '• Joint replacement surgery\n• Sports medicine\n• Fracture treatment\n• Spine surgery\n• Physical therapy' :
  departmentName === 'Pediatrics' ? '• Well-child checkups\n• Immunizations\n• Growth monitoring\n• Childhood illnesses\n• Developmental assessments' :
  departmentName === 'Women\'s Health' ? '• Obstetric care\n• Gynecological services\n• Prenatal care\n• Family planning\n• Women\'s wellness' :
  '• Comprehensive eye exams\n• Cataract surgery\n• Glaucoma treatment\n• Retinal disorders\n• Vision correction'}\n\n? PATIENT OUTCOMES:\n• 98% patient satisfaction rate\n• Reduced recovery times\n• Improved quality of life\n• Comprehensive follow-up care\n• Evidence-based treatments\n\n? DEPARTMENT STATISTICS:\n• Years of experience: 15+\n• Successful procedures: 10,000+\n• Patient satisfaction: 98%\n• Board certifications: 100%\n• Advanced training: Ongoing\n\n?️ INSURANCE & BILLING:\n• Most insurance plans accepted\n• Medicare and Medicaid\n• Payment plan options\n• Financial counseling\n• Transparent pricing\n\n? PATIENT RESOURCES:\n• Educational materials\n• Pre-procedure instructions\n• Post-care guidelines\n• Support groups\n• Online patient portal\n\n? QUALITY MEASURES:\n• Joint Commission accredited\n• Board-certified physicians\n• Evidence-based protocols\n• Continuous quality improvement\n• Patient safety initiatives\n\n? CONTACT INFORMATION:\n• Department direct line\n• Appointment scheduling\n• Nurse consultation line\n• Emergency contact\n• Patient coordinator\n\n? MEDICAL EDUCATION:\n• Residency training programs\n• Continuing medical education\n• Research participation\n• Clinical trials available\n• Medical student rotations\n\n? COLLABORATIVE CARE:\n• Multidisciplinary approach\n• Care coordination\n• Referral network\n• Integrated services\n• Patient advocacy\n\n? INNOVATION & RESEARCH:\n• Latest treatment protocols\n• Clinical research studies\n• Medical device trials\n• Quality improvement initiatives\n• Technology advancement\n\n? AWARDS & RECOGNITION:\n• Excellence in patient care\n• Quality achievement awards\n• Safety recognition\n• Medical innovation honors\n• Community service awards\n\n? Ready to schedule your appointment?\nCall us at +1 (555) MEDCARE\n\n? Your health is our priority!\nExperienced care you can trust.`);
            }, 1000);
        }

// Book department function
        function bookDepartment(departmentName) {
            showSuccessMessage(`Booking ${departmentName} appointment...`);
            setTimeout(() => {
                document.querySelector('#booking').scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }, 1000);
        }

// Call emergency function
        function callEmergency() {
            showSuccessMessage('Connecting to emergency services...');
            setTimeout(() => {
                alert('? EMERGENCY SERVICES: 911 ?\n\n? MEDCARE EMERGENCY DEPARTMENT:\n\n? EMERGENCY CONTACTS:\n• Call 911 for life-threatening emergencies\n• Hospital Emergency: +1 (555) 911-HELP\n• Poison Control: 1-800-222-1222\n• Crisis Hotline: 988\n\n? WHEN TO CALL 911:\n• Chest pain or heart attack symptoms\n• Difficulty breathing or choking\n• Severe bleeding or trauma\n• Loss of consciousness\n• Stroke symptoms (F.A.S.T.)\n• Severe allergic reactions\n• Overdose or poisoning\n• Severe burns\n• Head injuries\n• Broken bones with deformity\n\n⚡ EMERGENCY DEPARTMENT SERVICES:\n• 24/7 emergency care\n• Trauma center Level II\n• Emergency surgery capability\n• Critical care unit\n• Cardiac emergency care\n• Stroke center\n• Pediatric emergency care\n• Mental health crisis intervention\n\n? WHAT TO EXPECT:\n• Immediate triage assessment\n• Priority based on severity\n• Experienced emergency physicians\n• Advanced diagnostic equipment\n• Rapid treatment protocols\n• Family notification services\n\n? EMERGENCY PREPARATION:\n• Keep emergency contacts handy\n• Know your medical history\n• List current medications\n• Have insurance information ready\n• Identify nearest hospital\n\n? STROKE RECOGNITION (F.A.S.T.):\n• Face: Facial drooping\n• Arms: Arm weakness\n• Speech: Speech difficulty\n• Time: Time to call 911\n\n? HEART ATTACK SYMPTOMS:\n• Chest pain or pressure\n• Shortness of breath\n• Nausea or vomiting\n• Pain in arms, neck, jaw\n• Cold sweats\n• Lightheadedness\n\n? EMERGENCY ROOM LOCATION:\n• MedCare General Hospital\n• 123 Healthcare Blvd\n• Emergency entrance clearly marked\n• Ambulance bay available\n• Helicopter landing pad\n\n⏰ RESPONSE TIMES:\n• Ambulance dispatch: <8 minutes\n• Triage assessment: <5 minutes\n• Emergency physician: <15 minutes\n• Critical care: Immediate\n• Surgery team: <30 minutes\n\n?‍⚕️ EMERGENCY STAFF:\n• Board-certified emergency physicians\n• Trauma surgeons on call\n• Emergency nurses (24/7)\n• Respiratory therapists\n• Radiology technicians\n• Laboratory staff\n\n? EMERGENCY CERTIFICATIONS:\n• Trauma Center Level II\n• Stroke Center Certified\n• Chest Pain Center\n• Emergency Department Approved\n• STEMI Receiving Center\n\n? EMERGENCY APPS:\n• MedCare Emergency App\n• What3Words location\n• Emergency SOS features\n• Medical ID information\n• ICE contacts\n\n? NON-EMERGENCY ALTERNATIVES:\n• Urgent care centers\n• Telemedicine consultations\n• Nurse hotline: +1 (555) ASK-NURSE\n• Primary care physician\n• Walk-in clinics\n\n? REMEMBER:\n• Stay calm and call 911\n• Provide clear location\n• Describe the emergency\n• Follow dispatcher instructions\n• Don\'t hang up until told\n\n? EMERGENCY: 911\n? HOSPITAL: +1 (555) MEDCARE\n\n⚡ Every second counts in an emergency!\nWe\'re here to save lives 24/7.');
            }, 1500);
        }

// Open social media
        function openSocial(platform) {
            showSuccessMessage(`Opening ${platform} page...`);
            setTimeout(() => {
                alert(`? SOCIAL MEDIA: ${platform.toUpperCase()} ?\n\n? Follow MedCare Hospital on ${platform}:\n\n? HEALTH EDUCATION:\n• Daily health tips and advice\n• Disease prevention information\n• Wellness and nutrition guides\n• Exercise and fitness tips\n• Mental health awareness\n\n? HOSPITAL UPDATES:\n• New medical services\n• Doctor spotlights\n• Patient success stories\n• Community health events\n• Medical technology updates\n\n? EDUCATIONAL CONTENT:\n• Health condition explanations\n• Treatment option discussions\n• Medication information\n• Recovery and rehabilitation tips\n• Preventive care guidelines\n\n? COMMUNITY ENGAGEMENT:\n• Health awareness campaigns\n• Free health screenings\n• Community wellness programs\n• Medical education seminars\n• Support group information\n\n? PLATFORM-SPECIFIC CONTENT:\n${platform === 'Facebook' ? '• Detailed health articles\n• Live Q&A with doctors\n• Community health discussions\n• Event announcements and updates' : 
  platform === 'Twitter' ? '• Quick health tips\n• Medical news updates\n• Emergency health alerts\n• Real-time hospital updates' :
  platform === 'LinkedIn' ? '• Medical professional content\n• Healthcare industry insights\n• Career opportunities\n• Professional development' :
  platform === 'YouTube' ? '• Medical procedure explanations\n• Doctor interviews\n• Patient testimonials\n• Health education videos' :
  '• Health infographics\n• Medical condition awareness\n• Wellness inspiration\n• Hospital facility tours'}\n\n? FOLLOWER BENEFITS:\n• Health screening reminders\n• Exclusive health content\n• Early event registration\n• Direct messaging with staff\n• Priority appointment booking\n\n? SOCIAL ENGAGEMENT:\n• Ask health questions\n• Share your recovery story\n• Connect with other patients\n• Get appointment reminders\n• Access telehealth services\n\n? HEALTH RESOURCES:\n• Symptom checkers\n• Medication reminders\n• Health tracking tools\n• Emergency contact info\n• Insurance information\n\n? STAY INFORMED:\n• Weekly health newsletters\n• Monthly wellness challenges\n• Seasonal health tips\n• Vaccination reminders\n• Health screening schedules\n\n? NOTIFICATION SETTINGS:\n• Health alerts and updates\n• Appointment reminders\n• Medication notifications\n• Emergency announcements\n• Wellness program updates\n\n? WELLNESS COMMUNITY:\n• 100,000+ health-conscious followers\n• Daily inspiring content\n• Expert medical advice\n• Supportive patient community\n• Local health resources\n\n? Connect with us today!\nFollow @MedCareHospital for daily health inspiration!`);
            }, 1000);
        }

// Appointment form submission
        document.getElementById('appointmentForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const submitBtn = this.querySelector('.btn-book');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<span class="loading-spinner"></span> Scheduling Your Appointment...';
            submitBtn.disabled = true;
            
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                this.reset();
                
                showSuccessMessage('Appointment scheduled successfully!');
                
                setTimeout(() => {
                    alert('? APPOINTMENT CONFIRMED! ?\n\n✅ Your appointment has been successfully scheduled!\n\n? APPOINTMENT DETAILS:\n• Confirmation number: MC-2024-' + Math.floor(Math.random() * 10000) + '\n• Status: Confirmed and scheduled\n• Department: As requested\n• Date & time: As selected\n• Location: MedCare General Hospital\n\n? WHAT HAPPENS NEXT:\n• Confirmation call within 24 hours\n• Appointment reminder 48 hours prior\n• Pre-visit instructions via email\n• Insurance verification completed\n• Medical records prepared\n\n? PREPARE FOR YOUR VISIT:\n• Bring valid photo ID\n• Insurance cards and information\n• List of current medications\n• Previous medical records\n• Payment method for copays\n\n? APPOINTMENT CHECKLIST:\n• Arrive 15 minutes early\n• Complete registration forms\n• Bring medication list\n• Prepare questions for doctor\n• Bring insurance information\n\n? MEDICAL INFORMATION:\n• Current medications and dosages\n• Allergy information\n• Previous surgeries or procedures\n• Family medical history\n• Current symptoms or concerns\n\n? APPOINTMENT MANAGEMENT:\n• Online patient portal access\n• Mobile app for updates\n• Text message reminders\n• Email confirmations\n• Easy rescheduling options\n\n? HOSPITAL LOCATION:\n• MedCare General Hospital\n• 123 Healthcare Blvd, Medical City\n• Main entrance for appointments\n• Parking validation available\n• Wheelchair accessible\n\n⏰ ARRIVAL INSTRUCTIONS:\n• Check in at main reception\n• Bring completed forms\n• Allow extra time for parking\n• Follow COVID-19 protocols\n• Bring face mask if required\n\n? APPOINTMENT BENEFITS:\n• Comprehensive medical evaluation\n• Personalized treatment plan\n• Expert medical consultation\n• Advanced diagnostic testing\n• Follow-up care coordination\n\n? CONTACT INFORMATION:\n• Appointment changes: +1 (555) MEDCARE\n• Insurance questions: Extension 2\n• Medical records: Extension 3\n• Patient services: Extension 4\n• Emergency: 911\n\n? BILLING & INSURANCE:\n• Insurance verification completed\n• Copay due at time of service\n• Payment plans available\n• Financial counseling offered\n• Transparent pricing provided\n\n? PATIENT SERVICES:\n• Multilingual staff available\n• Disability accommodations\n• Transportation assistance\n• Childcare information\n• Family support services\n\n? CANCELLATION POLICY:\n• 24-hour notice required\n• Easy online cancellation\n• Rescheduling options available\n• No-show fees may apply\n• Emergency exceptions honored\n\n? QUALITY CARE PROMISE:\n• Board-certified physicians\n• Evidence-based treatments\n• Patient-centered approach\n• Comprehensive care coordination\n• Excellent patient outcomes\n\n? PATIENT PORTAL ACCESS:\n• View appointment details\n• Access test results\n• Message your care team\n• Request prescription refills\n• Update personal information\n\n? AWARD-WINNING CARE:\n• Top-rated hospital\n• Excellence in patient safety\n• Quality care recognition\n• Patient satisfaction awards\n• Medical innovation leader\n\n? Questions about your appointment?\nCall +1 (555) MEDCARE\n\n? We look forward to caring for you!\nYour health is our priority.');
                }, 1000);
            }, 2000);
        });

// Contact form submission
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const submitBtn = this.querySelector('.btn-submit');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<span class="loading-spinner"></span> Sending Your Message...';
            submitBtn.disabled = true;
            
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                this.reset();
                
                showSuccessMessage('Message sent successfully!');
                
                setTimeout(() => {
                    alert('? MESSAGE RECEIVED! ?\n\n? Thank you for contacting MedCare Hospital!\n\n✅ MESSAGE CONFIRMATION:\n• Your message has been received\n• Ticket number: MC-MSG-' + Math.floor(Math.random() * 10000) + '\n• Response time: Within 24 hours\n• Priority: Standard inquiry\n• Status: Under review\n\n? RESPONSE TIMELINE:\n• Acknowledgment: Immediate\n• Initial response: Within 4 hours\n• Detailed response: Within 24 hours\n• Follow-up: As needed\n• Resolution: Priority-based\n\n? WHAT HAPPENS NEXT:\n• Message routed to appropriate department\n• Medical staff review (if applicable)\n• Personalized response prepared\n• Direct contact via preferred method\n• Follow-up scheduling if needed\n\n? INQUIRY TYPES & RESPONSE:\n• Medical questions: Nurse or physician\n• Appointment scheduling: Patient services\n• Billing inquiries: Financial department\n• Insurance questions: Benefits coordinator\n• General information: Patient relations\n\n? COMMUNICATION PREFERENCES:\n• Email responses (primary)\n• Phone call follow-up\n• Text message updates\n• Patient portal messages\n• In-person consultations\n\n? MEDICAL INQUIRIES:\n• Reviewed by medical professionals\n• Evidence-based information provided\n• Appointment recommendations\n• Specialist referrals if needed\n• Educational resources included\n\n? BILLING & INSURANCE:\n• Detailed explanation provided\n• Payment options discussed\n• Insurance verification assistance\n• Financial counseling available\n• Billing department direct contact\n\n? HOSPITAL SERVICES:\n• Department information\n• Physician credentials\n• Service availability\n• Location and directions\n• Parking and accessibility\n\n? URGENT INQUIRIES:\n• Same-day response guaranteed\n• Direct phone contact\n• Immediate appointment scheduling\n• Emergency department guidance\n• Nurse consultation line\n\n? PATIENT SUPPORT:\n• Multilingual assistance\n• Disability accommodations\n• Transportation resources\n• Financial assistance programs\n• Community health resources\n\n? FEEDBACK & SUGGESTIONS:\n• Patient experience team review\n• Quality improvement consideration\n• Service enhancement opportunities\n• Recognition for staff excellence\n• Continuous improvement initiatives\n\n? CONTACT METHODS:\n• Email: info@medcare-hospital.com\n• Phone: +1 (555) MEDCARE\n• Patient portal: Online messaging\n• In-person: Patient relations office\n• Emergency: 911 or emergency department\n\n? DIGITAL RESOURCES:\n• Hospital website information\n• Online appointment scheduling\n• Patient portal access\n• Mobile app features\n• Telehealth consultations\n\n? QUALITY ASSURANCE:\n• All inquiries tracked\n• Response time monitoring\n• Patient satisfaction surveys\n• Continuous improvement\n• Staff training updates\n\n? ADDITIONAL SUPPORT:\n• Patient advocate available\n• Social services coordination\n• Chaplain services\n• Support group information\n• Community resource referrals\n\n? ACCESSIBILITY:\n• Language interpretation services\n• Sign language interpreters\n• Large print materials\n• Audio assistance\n• Wheelchair accessibility\n\n? FOLLOW-UP COMMUNICATION:\n• Satisfaction survey\n• Additional resource sharing\n• Appointment reminders\n• Health education materials\n• Community event invitations\n\n? Need immediate assistance?\nCall +1 (555) MEDCARE\n\n? Thank you for choosing MedCare Hospital!\nWe\'re here to help with all your healthcare needs.');
                }, 1000);
            }, 2000);
        });

// Show success message
        function showSuccessMessage(message) {
            const successMessage = document.getElementById('successMessage');
            const successText = document.getElementById('successText');
            successText.textContent = message;
            successMessage.classList.add('show');
            
            setTimeout(() => {
                successMessage.classList.remove('show');
            }, 3000);
        }

// Initialize animations on page load
        document.addEventListener('DOMContentLoaded', function() {
            animateOnScroll();
        });

Amazing Hospitals Healthcare Preview

Download Options