<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Public Health NGO</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <style>
        /* General Styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 10px;
        }

        section .container {
            margin: 20px 0; /* Reduced margin for section contents by 60px */
        }

        /* Header CSS */
        header {
            background-color: #fff;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            flex: 1;
        }

        .logo img {
            height: 65px; /* Increased logo size by 30% */
        }

        .navigation {
            display: flex;
            flex: 2;
            justify-content: center;
        }

        .navigation ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            background-color: #194686; /* Blue box background color */
            padding: 10px;
            border-radius: 5px;
        }

        .navigation li {
            margin: 0 15px;
        }

        .navigation a {
            text-decoration: none;
            color: #fff; /* White text color */
            font-weight: bold;
        }

        .hamburger-menu {
            display: none;
            font-size: 24px;
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
            color: #194686; /* Same color as logo icons */
        }

        .dropdown-menu {
            display: none;
            flex-direction: column;
            background-color: #194686;
            position: absolute;
            top: 50px;
            right: 10px;
            width: 200px;
            border-radius: 5px;
            z-index: 1000;
        }

        .dropdown-menu a {
            padding: 10px;
            color: #fff;
            text-decoration: none;
            border-bottom: 1px solid #ddd;
        }

        .dropdown-menu a:hover {
            background-color: #007bff;
        }

        /* Footer CSS */
        footer {
            background-color: #194686; /* Change footer background color */
            padding: 20px 0;
            text-align: center;
            color: #fff; /* Change footer text color to white */
        }

        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .footer-links {
            margin: 10px 0;
        }

        .footer-links a {
            color: #fff; /* Change footer link color to white */
            text-decoration: none;
            margin: 0 2px; /* Reduced space between words */
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        .office-location {
            margin: 10px 0;
        }

        .social-media {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            color: #fff; /* Change social media icon color to white */
            text-decoration: none; /* Remove underline */
        }

        .social-media a {
            margin: 0 10px;
            display: inline-block;
            color: #fff; /* Change social media icon color to white */
            text-decoration: none; /* Remove underline */
        }

        .social-media a:hover {
            color: #007bff;
        }

        /* Media Queries for Mobile Responsiveness */
        @media (max-width: 768px) {
            .navigation {
                display: none; /* Hide navigation menu on mobile */
            }

            .header-content {
                flex-direction: column;
                align-items: flex-start; /* Align logo to the left */
            }

            .logo img {
                height: 32.5px; /* Reduce logo size by 50% */
            }

            .hamburger-menu {
                display: block;
            }

            #mission-vision {
                padding: 30px 10px;
            }

            #mission-vision h2 {
                font-size: 1.5em;
            }

            #mission-vision p {
                font-size: 1em;
                margin: 0 0 10px 0; /* Reduce space between paragraphs */
            }

            .team-member {
                width: 100%;
                margin: 10px 0;
                text-align: center; /* Center align text */
            }

            .team-member img {
                width: 50%; /* Reduce size of team member images */
            }

            .team-member p {
                font-size: 0.9em; /* Reduce font size of team member text */
            }

            .team-member p strong {
                font-size: 0.7em; /* Reduce font size of team member name by 30% */
            }

            .team-member p:nth-child(3) {
                font-size: 0.7em; /* Reduce font size of team member position by 30% */
            }

            .footer-links a {
                margin: 0 1px; /* Further reduce space between words on mobile */
            }

            #our-team .container {
                height: auto; /* Ensure the container height adjusts to content */
                padding: 10px 0; /* Add padding to reduce height */
            }
        }

        /* Increased margins for specific sections */
        #about-us .container,
        #mission-vision .container,
        #our-team .container {
            margin: 40px 20px; /* Increased margin on both sides */
        }

        /* Custom CSS for Owl Carousel dots */
        .owl-dots {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
        }

        /* Add padding to body to prevent content from being hidden behind the fixed header */
        body {
            padding-top: 80px; /* Adjust this value based on the height of your header */
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <a href="index.html">
                        <img src="assets/images/logo.jpg" alt="NGO Logo">
                    </a>
                </div>
                <nav class="navigation">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="join-us.html">Join Us</a></li>
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                        <li><a href="projects.html">Projects</a></li>
                        <li><a href="programs.html">Programs</a></li>
                    </ul>
                </nav>
                <div class="hamburger-menu" onclick="toggleMenu()">?</div>
                <div class="dropdown-menu">
                    <a href="index.html">Home</a>
                    <a href="join-us.html">Join Us</a>
                    <a href="about.html">About Us</a>
                    <a href="contact.html">Contact Us</a>
                    <a href="projects.html">Projects</a>
                    <a href="programs.html">Programs</a>
                </div>
            </div>
        </div>
    </header>

    <!-- Image Slider -->
    <section id="image-slider">
        <div class="container">
            <div class="owl-carousel owl-theme">
                <div class="item">
                    <div class="slider-img"><img src="assets/images/slider/slider-1.jpg" alt="Slider Image 1"></div>
                </div>
                <div class="item">
                    <div class="slider-img"><img src="assets/images/slider/slider-2.jpg" alt="Slider Image 2"></div>
                </div>
                <div class="item">
                    <div class="slider-img"><img src="assets/images/slider/slider-3.jpg" alt="Slider Image 3"></div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- About Us -->
    <section id="about-us">
        <div class="container">
            <h2>About Us</h2>
            <p>With a population of approximately 62 million people, Tanzania ranks as the fourth most populous country 
            in Africa. It falls within the lower middle-income group of nations. Notably, over 45% of Tanzania's population
            consists of children under the age of 15.</p>
            <p>The Tanzania Society of Pediatric Nurses (TSPN) is an association established by pediatric nurses from both 
            mainland Tanzania and Zanzibar. Its goal is to create a strong multisectoral network among pediatric nurses, 
            healthcare providers, and other key stakeholders involved in child health and wellbeing. This is achieved through 
            clinical and community services, research projects, and scientific conferences. By collaborating with the Tanzanian 
            government and other child-focused organizations, TSPN is mobilizing and utilizing resources to make Tanzania 
            the safest place for children to live.</p>
        </div>
    </section>
    
    <!-- Our Mission and Vision -->
    <section id="mission-vision">
        <div class="container">
            <h2>Our Mission</h2>
            <p>To build a strong multisectoral network among pediatric nurses, health care providers, and other significant 
            stakeholders involve in child health and wellbeing through clinical and community services, conducting 
            researches/projects and scientific conferences..</p>
            <h2>Our Vision</h2>
            <p>Tanzania with healthy and wellbeing children and adolescents.</p>
        </div>
    </section>

    <!-- Our Team -->
    <section id="our-team">
        <div class="container">
            <h2>Our Team</h2>
            <div class="owl-carousel owl-theme team-carousel">
                <div class="team-member">
                    <img src="assets/images/team/team-memb1.jpg" alt="Team Member 1">
                    <p><strong>Team Member 1</strong></p>
                    <p>Position 1</p>
                </div>
                <div class="team-member">
                    <img src="assets/images/team/team-memb2.jpg" alt="Team Member 2">
                    <p><strong>Team Member 2</strong></p>
                    <p>Position 2</p>
                </div>
                <div class="team-member">
                    <img src="assets/images/team/team-memb3.jpg" alt="Team Member 3">
                    <p><strong>Team Member 3</strong></p>
                    <p>Position 3</p>
                </div>
                <div class="team-member">
                    <img src="assets/images/team/team-memb4.jpg" alt="Team Member 4">
                    <p><strong>Team Member 4</strong></p>
                    <p>Position 4</p>
                </div>
                <div class="team-member">
                    <img src="assets/images/team/team-memb5.jpg" alt="Team Member 5">
                    <p><strong>Team Member 5</strong></p>
                    <p>Position 5</p>
                </div>
                <div class="team-member">
                    <img src="assets/images/team/team-memb6.jpg" alt="Team Member 6">
                    <p><strong>Team Member 6</strong></p>
                    <p>Position 6</p>
                </div>
                <div class="team-member">
                    <img src="assets/images/team/team-memb7.jpg" alt="Team Member 7">
                    <p><strong>Team Member 7</strong></p>
                    <p>Position 7</p>
                </div>
                <div class="team-member">
                    <img src="assets/images/team/team-memb8.jpg" alt="Team Member 8">
                    <p><strong>Team Member 8</strong></p>
                    <p>Position 8</p>
                </div>
                <div class="team-member">
                    <img src="assets/images/team/team-memb9.jpg" alt="Team Member 9">
                    <p><strong>Team Member 9</strong></p>
                    <p>Position 9</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="social-media">
                    <a href="https://www.facebook.com/YourNGO" target="_blank" class="fab fa-facebook-f"></a>
                    <a href="https://www.instagram.com/YourNGO" target="_blank" class="fab fa-instagram"></a>
                    <a href="https://www.twitter.com/YourNGO" target="_blank" class="fab fa-twitter"></a>
                    <a href="https://www.linkedin.com/company/YourNGO" target="_blank" class="fab fa-linkedin-in"></a>
                </div>
                <div class="footer-links">
                    <a href="privacy-policy-url">Privacy Policy</a> |
                    <a href="terms-of-service-url">Terms of Service</a>
                </div>
                <div class="office-location">
                    <p><strong>Office Location:</strong> 123 Main Street, Dar es Salaam, Tanzania</p>
                    <p><strong>Postal Address:</strong> P.O. Box 456, Dar es Salaam, Tanzania</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Owl Carousel JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".team-carousel").owlCarousel({
                items: 3,
                loop: true,
                autoplay: true,
                autoplayTimeout: 5000,
                animateOut: 'slideOutLeft',
                dots: true
            });
            $(".owl-carousel").owlCarousel({
                items: 1,
                loop: true,
                autoplay: true,
                autoplayTimeout: 5000,
                animateOut: 'fadeOut',
                dots: true
            });
        });

        function toggleMenu() {
            const dropdownMenu = document.querySelector('.dropdown-menu');
            dropdownMenu.style.display = dropdownMenu.style.display === 'flex' ? 'none' : 'flex';
        }
    </script>
</body>
</html>