<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>UNIOSUN Teaching Hospital, Osogbo</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
        }
        /* Header Styles */
        .header {
            background-color: #f7fafc; /* bg-gray-100 */
            padding: 16px 0; /* py-4 */
        }
        .header .flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: auto;
            padding: 0 20px;
        }
        .header img {
            margin-right: 16px; /* mr-4 */
        }
        .header h1 {
            font-size: 1.25rem; /* text-xl */
            font-weight: bold; /* font-bold */
            margin: 0; /* Reset margin */
        }
        .header p {
            font-size: 0.875rem; /* text-sm */
            margin: 0; /* Reset margin */
        }
        .header input {
            border: 1px solid #d1d5db; /* border-gray-300 */
            border-radius: 4px; /* rounded */
            padding: 8px 16px; /* py-2 px-4 */
            margin-right: 16px; /* mr-4 */
        }
        /* Top Bar Styles */
        .top-bar {
            background-color: #06b6d4; /* bg-cyan-600 */
            color: white;
            text-align: center; /* center */
            padding: 8px 0; /* py-2 */
        }
        .top-bar p {
            font-size: 1.125rem; /* text-lg */
            font-weight: bold; /* font-bold */
            margin: 0; /* Reset margin */
        }
        /* Navigation Styles */
        .nav {
            background-color: white; /* bg-white */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* shadow */
            padding: 16px 0; /* py-4 */
        }
        .nav ul {
            display: flex; /* flex */
            justify-content: space-around; /* justify-between */
            padding: 0 20px; /* container padding */
            max-width: 1200px;
            margin: auto;
            list-style-type: none; /* Remove default list style */
        }
        .nav li {
            position: relative; /* For dropdown positioning */
        }
        .nav a {
            text-decoration: none;
            color: #4b5563; /* text-gray-600 */
            padding: 8px 16px; /* py-2 px-4 */
            transition: color 0.3s; /* Transition for hover */
        }
        .nav a:hover {
            color: #06b6d4; /* text-cyan-600 */
        }
        /* Dropdown Styles */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 300px; /* Minimum width for dropdown */
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
            padding: 10px; /* Padding for dropdown */
        }
        .nav li:hover .dropdown-content {
            display: block; /* Show dropdown on hover */
        }
        .dropdown-content ul {
            list-style-type: none; /* Remove default list style */
            padding: 0; /* Remove padding */
            margin: 0; /* Remove margin */
        }
        .dropdown-content li {
            margin: 5px 0; /* Spacing between items */
        }
        /* Main Content Styles */
        .main {
            max-width: 1200px;
            margin: 32px auto; /* my-8 */
            display: flex; /* flex */
            padding: 0 20px; /* container padding */
        }
        .main img {
            width: 66.66667%; /* w-2/3 */
        }
        .sidebar {
            width: 33.33333%; /* w-1/3 */
            padding-left: 32px; /* pl-8 */
        }
        .sidebar ul {
            list-style-type: none; /* Remove default list style */
            padding: 0;
            margin: 0;
        }
        .sidebar a {
            color: #06b6d4; /* text-cyan-600 */
            font-size: 1.125rem; /* text-lg */
            display: block;
            margin-bottom: 10px;
        }
        /* Fund Section Styles */
        .fund-section {
            padding: 20px;
            background-color: #f7fafc; /* Light gray background */
            border: 1px solid #d1d5db; /* Gray border */
            margin-top: 20px;
            border-radius: 8px;
            text-align: left; /* Align text left */
            max-width: 1200px;
            margin: 20px auto; /* Centering the section */
            padding: 16px; /* Adding padding */
        }
        .fund-section h2 {
            font-size: 1.5rem; /* Font size */
            font-weight: bold; /* Bold text */
            margin-bottom: 10px;
        }
        .fund-section p {
            margin-bottom: 10px;
        }
        /* Chat Button */
        .chat-button {
            position: fixed;
            bottom: 16px; /* bottom-4 */
            right: 16px; /* right-4 */
        }
        .chat-button button {
            background-color: #10b981; /* bg-green-500 */
            color: white; /* text-white */
            border: none;
            border-radius: 4px; /* rounded */
            padding: 12px 16px; /* p-4 */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-lg */
            cursor: pointer;
        }
        .chat-button button:focus {
            outline: none; /* Remove focus outline */
        }
    </style>
</head>
<body>
    <!-- Top Bar -->
    <div class="top-bar">
        <p>UNIOSUN Teaching Hospital, Osogbo.</p>
    </div>
    <!-- Header -->
    <header class="header">
        <div class="flex">
            <div class="flex items-center">
                <img alt="UNIOSUN Teaching Hospital Logo" height="50" 
                     src="https://storage.googleapis.com/a1aa/image/OjrI5gxzOVLI_D0qzN_8AqSq7PsUlod9L901WBLrL6Q.jpg" width="50"/>
                <div>
                    <h1>UNIOSUN</h1>
                    <p>TEACHING HOSPITAL, OSOGBO</p>
                </div>
            </div>
            <div class="flex items-center">
                <input type="text" placeholder="Enter your search"/>
                <button class="text-gray-600">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <div class="text-sm">
                <p><strong>STAFF WEBMAIL</strong></p>
                <p>MAIL US: <a class="text-cyan-600" href="mailto:info@uth-osogbo.org.ng">info@uth-osogbo.org.ng</a></p>
                <p>CALL US: <a class="text-cyan-600" href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>"><PRESIDIO_ANONYMIZED_PHONE_NUMBER></a></p>
                <p>LOCATION: Station Road, Osogbo</p>
            </div>
        </div>
    </header>
    <!-- Navigation -->
    <nav class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Our Journal</a>
                <div class="dropdown-content">
                    <ul>
                        <li><a href="#">Latest Publications</a></li>
                        <li><a href="#">Research Articles</a></li>
                        <li><a href="#">Subscriptions</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">Departments</a>
                <div class="dropdown-content">
                    <ul>
                        <li>
                            <h3>CLINICALS</h3>
                            <a href="#">Chairman Medical Advisory Committee (CMAC)</a>
                            <a href="#">Anaesthesia</a>
                            <a href="#">Radiology</a>
                            <a href="#">Internal Medicine</a>
                            <a href="#">Obstetric and Gynaecology</a>
                            <a href="#">Paediatrics</a>
                            <a href="#">Psychiatry / Mental Health</a>
                            <a href="#">Dental Surgery</a>
                            <a href="#">Community Medicine</a>
                            <a href="#">E. N. T.</a>
                            <a href="#">Surgery</a>
                            <a href="#">Ophthalmology</a>
                            <a href="#">Family Medicine</a>
                        </li>
                        <li>
                            <h3>LABORATORIES</h3>
                            <a href="#">Histopathology / Morbid Anatomy</a>
                            <a href="#">Microbiology and Parasitology</a>
                            <a href="#">Chemical Pathology</a>
                            <a href="#">Haematology / Blood Bank</a>
                        </li>
                        <li>
                            <h3>ADMINISTRATION</h3>
                            <a href="#">Chief Medical Director (CMD)</a>
                            <a href="#">Director of Administration (DA)</a>
                            <a href="#">Public Relations</a>
                            <a href="#">Management Information System</a>
                            <a href="#">Marketing</a>
                            <a href="#">Security</a>
                            <a href="#">Transport</a>
                            <a href="#">Catering</a>
                            <a href="#">General Administration</a>
                            <a href="#">Account and Finance</a>
                            <a href="#">Establishment and Personnel</a>
                            <a href="#">Internal Audit</a>
                            <a href="#">Corporate Planning</a>
                            <a href="#">Stores and Purchasing</a>
                            <a href="#">Legal and Entrepreneur</a>
                            <a href="#">Works and Services</a>
                            <a href="#">Laundry and Tailoring</a>
                        </li>
                        <li>
                            <h3>SUB-CLINICALS</h3>
                            <a href="#">Health Records</a>
                            <a href="#">Pharmacy</a>
                            <a href="#">Nursing</a>
                            <a href="#">Physiotherapy</a>
                            <a href="#">Medical Library</a>
                            <a href="#">Dietetics</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">Training</a>
                <div class="dropdown-content">
                    <ul>
                        <li><a href="#">Upcoming Workshops</a></li>
                        <li><a href="#">Professional Development</a></li>
                        <li><a href="#">Internships</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">Research</a>
                <div class="dropdown-content">
                    <ul>
                        <li><a href="#">Current Projects</a></li>
                        <li><a href="#">Funding Opportunities</a></li>
                        <li><a href="#">Research Collaborations</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">Login</a>
                <div class="dropdown-content">
                    <ul>
                        <li><a href="#">Student Login</a></li>
                        <li><a href="#">Staff Login</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">Medical Schools</a>
                <div class="dropdown-content">
                    <ul>
                        <li><a href="#">School of Post Basic Pediatric Nursing</a></li>
                        <li><a href="#">School of Medical Records</a></li>
                        <li><a href="#">School of Nursing</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Patients & Visitors</a></li>
            <li><a href="#">Blogs & News</a></li>
        </ul>
    </nav>
    <!-- Main Content -->
    <main class="main">
        <div>
            <img alt="Group of medical professionals" height="400" 
                 src="https://storage.googleapis.com/a1aa/image/OS3Cd2YzxvVNSi7PGbw95EESztmWGeNuRa-k89g-L8A.jpg" 
                 width="800"/>
        </div>
        <div class="sidebar">
            <ul>
                <li><a href="#">Find a Service</a></li>
                <li><a href="#">Patient Guide</a></li>
                <li><a href="#">Public Health Alerts</a></li>
                <li><a href="#">Contact us</a></li>
                <li><a href="#">Staff web mail</a></li>
            </ul>
        </div>
    </main>
    <!-- Itunu Fund Section -->
    <section class="fund-section">
        <h2>ITUNU FUND FOR NEEDY PATIENTS</h2>
        <p>The teaching hospital has witnessed some challenging patients who come to access care but are financially handicapped. These patients are not on any health insurance and therefore need some cash to be treated.</p>
        <p>To assist such patients, the hospital has opened an account, named "Itunu Fund" account, where donors can transfer funds to assist these patients.</p>
        <p>Several patients have benefitted from this by getting their treatment promptly and we are grateful to all our donors who have contributed to this fund since 2003.</p>
        <p>You can also be a part of this team of helping hands by transferring funds to:</p>
        <p><strong>ACCOUNT NAME:</strong> ITUNU FUND</p>
        <p><strong>BANK:</strong> WEMA BANK</p>
        <p><strong>ACCOUNT NUMBER:</strong> 0121774769</p>
        <p>Thanks for being a part of this and for your assistance to our teaching hospital, making it easier to serve our people.</p>
    </section>
    <!-- Chat Button -->
    <div class="chat-button">
        <button>
            <i class="fas fa-comments"></i> Chat
        </button>
    </div>
</body>
</html>   wrap a li elemt in every single one of the a element in the dropdown nsecxtion  evber single one of each a elemnt