File Manager

X7ROOT File Manager

Current Path: /home/softbdltd/rdrs.softbdltd.com

?? ..
?? image1.jpeg(12.87 KB)
?? index.htm(112.68 KB)

Editing: index.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RDRS Bangladesh - Home</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Custom styles for Inter font */
        body {
            font-family: 'Inter', sans-serif;
            /* Add left padding to body to make space for the fixed left navigation */
            padding-left: 16rem; /* Equivalent to w-64 for the nav */
        }

/* Adjust body padding for smaller screens where nav is hidden by default */
        @media (max-width: 767px) {
            body {
                padding-left: 0;
            }
        }

/* Style for the custom popup */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

.popup-content {
            background-color: white;
            padding: 2.5rem;
            border-radius: 0.75rem; /* Rounded corners */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            max-width: 500px;
            text-align: center;
            position: relative;
        }

.popup-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #6b7280; /* Gray-500 */
        }

.popup-close:hover {
            color: #374151; /* Gray-700 */
        }

/* Active navigation link style - matching logo's blue */
        .active-nav-link {
            background-color: #2563eb; /* Tailwind's blue-600, matching the logo's blue */
            color: white !important; /* Ensure text is white */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        }

/* Hidden class for payment options */
        .hidden {
            display: none;
        }

/* Accordion specific styles */
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

.accordion-content.active {
            max-height: 1000px; /* Increased max-height for more content */
            transition: max-height 0.5s ease-in;
        }

.accordion-header svg {
            transition: transform 0.3s ease-in-out;
        }

.accordion-header.active svg {
            transform: rotate(180deg);
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">

<div id="introPopup" class="popup-overlay">
    <div class="popup-content">
        <button class="popup-close" onclick="closePopup()">&times;</button>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">Welcome to RDRS Bangladesh!</h3>
        <p class="text-gray-700 leading-relaxed">
            RDRS was established on 08 February 1972 to provide relief, rehabilitation, and development assistance to
            war-affected peoples in northwest Bangladesh. We are a leading development organization committed to
            improving lives.
        </p>
        <button class="mt-6 px-6 py-3 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200"
                onclick="closePopup()">
            Learn More
        </button>
    </div>
</div>

<nav class="bg-blue-700 shadow-lg fixed top-0 left-0 h-full w-64 flex-col items-center py-8 z-50 hidden md:flex">
    
    <a href="#home" class="flex flex-col items-center space-y-2 mb-10">
        <img src="image1.jpeg" alt="RDRS Logo"
             class="h-16 w-16 rounded-full object-cover border-2 border-white shadow-md">
        <span class="text-xl font-bold text-white text-center">RDRS Bangladesh</span>
    </a>

<div class="flex flex-col space-y-3 w-full px-4">
        <a href="#home"
           class="nav-link py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-300 ease-in-out transform hover:scale-105 flex items-center space-x-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2 2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
            </svg>
            <span>Home</span>
        </a>
        <a href="#who-we-are"
           class="nav-link py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-300 ease-in-out transform hover:scale-105 flex items-center space-x-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M17 20h-4v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2H0V8a6 6 0 016-6h12a6 6 0 016 6v12h-3zm-6-7a4 4 0 100-8 4 4 0 000 8z"></path>
            </svg>
            <span>Who We Are</span>
        </a>
        <a href="#what-we-do"
           class="nav-link py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-300 ease-in-out transform hover:scale-105 flex items-center space-x-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
            </svg>
            <span>What We Do</span>
        </a>
        <a href="#reports"
           class="nav-link py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-300 ease-in-out transform hover:scale-105 flex items-center space-x-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            <span>Reports & Publications</span>
        </a>
        <a href="#work-with-us"
           class="nav-link py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-300 ease-in-out transform hover:scale-105 flex items-center space-x-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253m9 0c1.168-.776 2.754-1.253 4.5-1.253 1.746 0 3.332.477 4.5 1.253m-4.5 0v13M12 6.253c-4.667 0-9 2.104-9 5.747 0 3.643 4.333 5.747 9 5.747s9-2.104 9-5.747c0-3.643-4.333-5.747-9-5.747z"></path>
            </svg>
            <span>Work With Us</span>
        </a>
        
        <a href="#contact"
           class="nav-link py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-300 ease-in-out transform hover:scale-105 flex items-center space-x-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
            </svg>
            <span>Contact Us</span>
        </a>
        <a href="#notice"
           class="nav-link py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-300 ease-in-out transform hover:scale-105 flex items-center space-x-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
            </svg>
            <span>Notice</span>
        </a>
        <a href="#donate"
           class="nav-link py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-300 ease-in-out transform hover:scale-105 flex items-center space-x-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
            </svg>
            <span>Donate</span>
        </a>
    </div>
</nav>

<div class="min-h-screen">
    
    <div class="fixed top-4 left-4 md:hidden z-50">
        <button id="mobileMenuButton" class="text-gray-700 focus:outline-none bg-white p-2 rounded-md shadow-md">
            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
            </svg>
        </button>
    </div>

<div id="mobileMenu"
         class="fixed top-0 left-0 w-64 h-full bg-blue-700 shadow-lg transform -translate-x-full transition-transform duration-300 ease-in-out z-40">
        <div class="flex flex-col items-center py-8 space-y-4">
            <button class="absolute top-4 right-4 text-white focus:outline-none" onclick="closeMobileMenu()">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
            <a href="#home"
               class="nav-link-mobile py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-200 w-full text-center"
               onclick="closeMobileMenu()">Home</a>
            <a href="#who-we-are"
               class="nav-link-mobile py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-200 w-full text-center"
               onclick="closeMobileMenu()">Who We Are</a>
            <a href="#what-we-do"
               class="nav-link-mobile py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-200 w-full text-center"
               onclick="closeMobileMenu()">What We Do</a>
            <a href="#reports"
               class="nav-link-mobile py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-200 w-full text-center"
               onclick="closeMobileMenu()">Reports & Publications</a>
            <a href="#work-with-us"
               class="nav-link-mobile py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-200 w-full text-center"
               onclick="closeMobileMenu()">Work With Us</a>
            
            <a href="#contact"
               class="nav-link-mobile py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-200 w-full text-center"
               onclick="closeMobileMenu()">Contact Us</a>
            <a href="#notice"
               class="nav-link-mobile py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-200 w-full text-center"
               onclick="closeMobileMenu()">Notice</a>
            <a href="#donate"
               class="nav-link-mobile py-2 px-4 text-blue-100 hover:bg-blue-600 hover:text-white font-semibold rounded-md transition duration-200 w-full text-center"
               onclick="closeMobileMenu()">Donate</a>
        </div>
    </div>

<section id="home" class="bg-blue-700 text-white py-20 md:py-32 text-center relative overflow-hidden">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-6 animate-fade-in-up">
                Empowering Communities, Building Futures
            </h1>
            <p class="text-lg md:text-xl mb-10 max-w-2xl mx-auto animate-fade-in-up delay-200">
                RDRS Bangladesh is dedicated to sustainable development, providing relief, rehabilitation, and
                development assistance to those in need.
            </p>
            <a href="#what-we-do"
               class="inline-block bg-white text-blue-700 px-8 py-4 rounded-full text-lg font-semibold hover:bg-gray-200 transition duration-300 transform hover:scale-105 animate-fade-in-up delay-400">
                Discover Our Work
            </a>
        </div>
        
        <div class="absolute top-0 left-0 w-full h-full">
            <div class="absolute w-48 h-48 bg-blue-800 rounded-full opacity-20 -top-10 -left-10 animate-pulse"></div>
            <div class="absolute w-64 h-64 bg-blue-800 rounded-full opacity-20 -bottom-20 -right-20 animate-pulse delay-500"></div>
        </div>
    </section>

<section id="latest-news" class="py-16 md:py-24 bg-gray-100">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center text-gray-900 mb-12">Latest News</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                
                <div class="bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300 overflow-hidden">
                    <img src="https://placehold.co/600x400/ADD8E6/000000?text=News+Image+1" alt="News Image 1"
                         class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">RDRS Hosts AZEECON Summit in Rangpur</h3>
                        <p class="text-gray-600 text-sm mb-4">July 25, 2025</p>
                        <p class="text-gray-700">RDRS Bangladesh recently hosted the AZEECON Summit, bringing together
                            stakeholders to discuss key development initiatives...</p>
                        <a href="#" class="text-blue-600 hover:underline mt-4 inline-block">Read More</a>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300 overflow-hidden">
                    <img src="https://placehold.co/600x400/ADD8E6/000000?text=News+Image+2" alt="News Image 2"
                         class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">Mr. Farique Ahmed Elected as Vice-Chairman
                            of RDRS Board of Trustees</h3>
                        <p class="text-gray-600 text-sm mb-4">July 20, 2025</p>
                        <p class="text-gray-700">We are pleased to announce the election of Mr. Farique Ahmed to the
                            position of Vice-Chairman of our Board of Trustees...</p>
                        <a href="#" class="text-blue-600 hover:underline mt-4 inline-block">Read More</a>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300 overflow-hidden">
                    <img src="https://placehold.co/600x400/ADD8E6/000000?text=News+Image+3" alt="News Image 3"
                         class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">Lutheran World Federation Delegates Examine
                            RDRS Education Projects in Moulvibazar</h3>
                        <p class="text-gray-600 text-sm mb-4">July 15, 2025</p>
                        <p class="text-700">Delegates from the Lutheran World Federation recently visited Moulvibazar to
                            assess the progress of RDRS education projects...</p>
                        <a href="#" class="text-blue-600 hover:underline mt-4 inline-block">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="who-we-are" class="py-16 md:py-24 bg-gray-100 text-center">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-gray-900 mb-8">Who We Are</h2>
            
            <img src="https://placehold.co/600x400/ADD8E6/000000?text=RDRS+Team" alt="RDRS Team"
                 class="mx-auto rounded-lg shadow-lg mb-8 max-w-full h-auto">

<section id="rdrs-in-brief-sub" class="text-left max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md mb-12">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">RDRS in Brief</h3>
                <p class="text-lg text-gray-700 mb-4">
                    RDRS was established in February 1972 as the Bangladesh field program of the Geneva-based Lutheran
                    World Federation/Department for World Service (LWF/DWS). Its initial purpose was to provide relief,
                    rehabilitation, and development assistance to war-affected peoples in northwest Bangladesh. In 1997,
                    RDRS became a localized national NGO, registered under the Trust Act in Bangladesh. The organization
                    is also registered with the NGO Affairs Bureau and the Microcredit Regulatory Authority, and it is
                    governed by a Board of Trustees.
                </p>

<h4 class="text-xl font-bold text-gray-900 mb-4 mt-8">Vision</h4>
                <p class="text-lg text-gray-700 mb-4">
                    A just and peaceful society where citizens live with dignity, free from poverty, distress, and
                    ignorance in a sustainable environment.
                </p>

<h4 class="text-xl font-bold text-gray-900 mb-4 mt-8">Mission</h4>
                <p class="text-lg text-gray-700 mb-4">
                    RDRS works with disadvantaged and marginalized communities and their organizations to empower them,
                    make them resilient, and ensure sustainable improvements in their lives with dignity.
                </p>

<h4 class="text-xl font-bold text-gray-900 mb-4 mt-8">Core Values</h4>
                <ul class="list-disc list-inside text-lg text-gray-700 space-y-2">
                    <li><strong>Compassion:</strong> We essentially feel and are motivated to relieve the suffering of
                        our beneficiaries, and thus design and implement actions equitably, professionally, and
                        efficiently.
                    </li>
                    <li><strong>Commitment:</strong> We promise to design and implement our program actions equitably,
                        professionally, and efficiently.
                    </li>
                    <li><strong>Innovation:</strong> We are open to new ideas, innovative approaches and technology,
                        relevant to local context and culture, to apply in boosting the people's livelihoods and coping
                        methods.
                    </li>
                    <li><strong>Adaptability:</strong> We are responsive to changes in the environment and intervention
                        as relevant to the emerging trends and needs to ensure our program objectives and organization's
                        mission are effectively achieved.
                    </li>
                    <li><strong>Accountability:</strong> We are transparent in our transparent operations and feedback
                        mechanisms, and are answerable for all our actions to the people we seek to serve, our donors
                        and society.
                    </li>
                </ul>

<h4 class="text-xl font-bold text-gray-900 mb-4 mt-8">RDRS Programme Coverage</h4>
                <div class="overflow-x-auto">
                    <table class="min-w-full bg-white border border-gray-200 rounded-lg shadow-sm">
                        <thead>
                        <tr class="bg-gray-100 text-gray-600 uppercase text-sm leading-normal">
                            <th class="py-3 px-6 text-left">Category</th>
                            <th class="py-3 px-6 text-left">Count</th>
                        </tr>
                        </thead>
                        <tbody class="text-gray-700 text-sm">
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Divisions</td>
                            <td class="py-3 px-6 text-left">07</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Districts</td>
                            <td class="py-3 px-6 text-left">31</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Upazilas</td>
                            <td class="py-3 px-6 text-left">175</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Unions</td>
                            <td class="py-3 px-6 text-left">1296</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Municipalities</td>
                            <td class="py-3 px-6 text-left">88</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">City Corporations</td>
                            <td class="py-3 px-6 text-left">05</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Programme Participants</td>
                            <td class="py-3 px-6 text-left">16,958,498</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Federations</td>
                            <td class="py-3 px-6 text-left">406</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Registered Federations</td>
                            <td class="py-3 px-6 text-left">398</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Federation Members</td>
                            <td class="py-3 px-6 text-left">3,61,484 (Female 71.9%)</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Branches</td>
                            <td class="py-3 px-6 text-left">284</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Areas</td>
                            <td class="py-3 px-6 text-left">61</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">Regions</td>
                            <td class="py-3 px-6 text-left">16</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-6 text-left whitespace-nowrap">MF Clients</td>
                            <td class="py-3 px-6 text-left">6,41,297 (Female 92.68%)</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </section>

<section id="dr-olav-hodne-sub" class="text-left max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md mb-12">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Dr Olav Hodne (Founder Director)</h3>
                <p class="text-lg text-gray-700">
                    Dr. Olav Hodne was the visionary founder and first director of RDRS Bangladesh. His dedication and
                    leadership were instrumental in establishing the organization and guiding its initial efforts in
                    providing relief and rehabilitation to war-affected communities in northwest Bangladesh. His legacy
                    continues to inspire RDRS's commitment to sustainable development and empowering vulnerable
                    populations.
                </p>
            </section>

<section id="board-of-trustees-sub"
                     class="text-left max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md mb-12">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Board of Trustees</h3>
                <p class="text-lg text-gray-700 mb-4">
                    The Board of Trustees is the supreme governing body of RDRS Bangladesh, responsible for setting the
                    strategic direction, ensuring good governance, and overseeing the organization's operations.
                    Comprised of distinguished individuals with diverse expertise, the Board provides leadership and
                    guidance to fulfill RDRS's mission.
                </p>
                <h4 class="text-xl font-semibold text-gray-800 mb-3">Current Members:</h4>
                <ul class="list-disc list-inside text-lg text-gray-700 space-y-2">
                    <li>Mr. Farique Ahmed (Vice-Chairman)</li>
                    <li>[Member Name 2]</li>
                    <li>[Member Name 3]</li>
                    <li>[Member Name 4]</li>
                    <li>[Member Name 5]</li>
                </ul>
            </section>

<section id="general-body-sub" class="text-left max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md mb-12">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">General Body</h3>
                <p class="text-lg text-gray-700">
                    The General Body of RDRS Bangladesh comprises a broader group of stakeholders and members who
                    contribute to the organization's mission and vision. They play a crucial role in providing oversight
                    and support for RDRS's activities.
                </p>
            </section>

<section id="former-chairperson-sub"
                     class="text-left max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md mb-12">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Former Chairperson of Board of Trustees</h3>
                <p class="text-lg text-gray-700">
                    RDRS Bangladesh acknowledges the invaluable contributions of its former Chairpersons, who have
                    provided exemplary leadership and guidance to the Board of Trustees, steering the organization
                    through various phases of its development and impact.
                </p>
                <h4 class="text-xl font-semibold text-gray-800 mb-3">Past Chairpersons:</h4>
                <ul class="list-disc list-inside text-lg text-gray-700 space-y-2">
                    <li>[Former Chairperson Name 1]</li>
                    <li>[Former Chairperson Name 2]</li>
                    <li>[Former Chairperson Name 3]</li>
                </ul>
            </section>

<section id="management-sub" class="text-left max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md mb-12">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Management</h3>
                <p class="text-lg text-gray-700">
                    The management team of RDRS Bangladesh is responsible for the day-to-day operations, program
                    implementation, and strategic execution of the organization's goals. Led by experienced
                    professionals, the team ensures efficient and effective delivery of development initiatives.
                </p>
                <h4 class="text-xl font-semibold text-gray-800 mb-3">Key Management Team:</h4>
                <ul class="list-disc list-inside text-lg text-gray-700 space-y-2">
                    <li>[CEO/Executive Director Name]</li>
                    <li>[Program Director Name]</li>
                    <li>[Finance Director Name]</li>
                </ul>
            </section>

<section id="where-we-work-sub" class="text-left max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md mb-12">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Where We Work</h3>
                <p class="text-lg text-gray-700">
                    RDRS Bangladesh operates across various regions and districts of Bangladesh, focusing its efforts on
                    areas with high vulnerability and significant development needs. Our presence ensures direct
                    engagement with communities and tailored interventions.
                </p>
                <h4 class="text-xl font-semibold text-gray-800 mb-3">Operational Areas:</h4>
                <ul class="list-disc list-inside text-lg text-gray-700 space-y-2">
                    <li>Rangpur Division</li>
                    <li>Kurigram District</li>
                    <li>Gaibandha District</li>
                    <li>Cox's Bazar (Rohingya Response)</li>
                    <li>And more...</li>
                </ul>
            </section>

<section id="award-recognition-sub"
                     class="text-left max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md mb-12">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Award & Recognition</h3>
                <p class="text-lg text-gray-700">
                    RDRS Bangladesh is proud to have received numerous awards and recognitions for its impactful work in
                    development, humanitarian response, and community empowerment. These accolades reflect our
                    commitment to excellence and the positive change we bring to the lives of millions.
                </p>
                <h4 class="text-xl font-semibold text-gray-800 mb-3">Notable Recognitions:</h4>
                <ul class="list-disc list-inside text-lg text-gray-700 space-y-2">
                    <li>[Award Name 1] - [Year]</li>
                    <li>[Award Name 2] - [Year]</li>
                    <li>[Recognition Type] from [Organization]</li>
                </ul>
            </section>

</div>
    </section>

<section id="what-we-do" class="py-16 md:py-24 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center text-gray-900 mb-12">What We Do</h2>

<h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">Our Programmes</h3>
            
            <div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200 rounded-t-lg"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">

<span>Skills, Employment, and Entrepreneurship</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Empower Youth For Resilience Building
                            (EYRB)</h4>
                        <p class="text-gray-700 mb-4">
                            RDRS Bangladesh implements this project in partnership with the Government of Bangladesh and
                            the U.S. Embassy in Bangladesh. It aims to increase livelihood and employment opportunities
                            for indigenous youth in Rangpur district, focusing on their rights, empowerment, and active
                            citizenship. The project targets about 30% of the 2,400 households in Mithapukur Upazila,
                            addressing socio-economic vulnerabilities in extreme areas. Activities include leadership
                            training for 557 youth group leaders and life skills and technical training for 557 group
                            members. The project also develops entrepreneurs and facilitates job placements and
                            financial support.
                        </p>
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Rural Microenterprise Transformation Project
                            (RMTP)</h4>
                        <p class="text-gray-700">
                            RDRS Bangladesh is implementing the Rural Microenterprise Transformation Project (RMTP) in
                            Rangpur, Kurigram, and Gaibandha districts. The project is being implemented with the
                            support of the International Fund for Agricultural Development (IFAD). The project aims to
                            increase the income, food security, and nutrition of farmers and service providers across
                            poultry value chains. It also focuses on developing value addition at various levels,
                            expansion of financial services for enterprise development, and strengthening of the
                            institutional framework.
                        </p>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Social Empowerment</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Strengthening Local Governance for Effective
                            Social
                            Services (SLGESS) Project</h4>
                        <p class="text-gray-700 mb-4">
                            Aims to improve the quality of social services and local governance.
                        </p>
                        <h4 class="text-lg font-bold text-gray-800 mb-3">"A Justice For Women" Project (AJW) for
                            Women</h4>
                        <p class="text-gray-700 mb-4">
                            Focuses on gender equality and women's rights.
                        </p>
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Rights Issues and Well-being in Human (RIWH)
                            Project</h4>
                        <p class="text-gray-700 mb-4">
                            Addresses human rights and well-being.
                        </p>
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Community-Based Rehabilitation (CBR)
                            Project</h4>
                        <p class="text-gray-700 mb-4">
                            Supports rehabilitation within communities.
                        </p>
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Rehabilitation Centre for Violence Affected
                            Women</h4>
                        <p class="text-gray-700 mb-4">
                            Provides support for women affected by violence.
                        </p>
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Social Experiment Project</h4>
                        <p class="text-gray-700">
                            Aims to promote social justice and community participation.
                        </p>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Agriculture, Food Security, and Climate Change</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Socio-Economic Development for Climate Change
                            and
                            Livelihoods (SEDCC) Project</h4>
                        <p class="text-gray-700 mb-4">
                            Focuses on climate change adaptation and sustainable livelihoods.
                        </p>
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Climate Resilient Agriculture and Food Security
                            (CRAFS) Project</h4>
                        <p class="text-gray-700 mb-4">
                            Aims to enhance agricultural resilience to climate change and ensure food security.
                        </p>
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Sustainable Agriculture and Food Security
                            (SAFS)
                            Project</h4>
                        <p class="text-gray-700">
                            Promotes sustainable agricultural practices.
                        </p>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Microfinance</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Microfinance Program</h4>
                        <p class="text-gray-700">
                            RDRS Bangladesh's microfinance program provides essential financial services to empower
                            vulnerable communities, fostering economic independence and improving livelihoods through
                            small
                            loans, savings, and financial literacy training.
                        </p>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Emergency and Humanitarian Response</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Disaster Risk Financing (DRF)</h4>
                        <p class="text-gray-700 mb-4">
                            A civil society managed rapid emergency response pooled funding mechanism. RDRS Bangladesh
                            became a member in 2021. The project for 2023 (May 2023 to July 2023) and 2024 was for
                            February
                            2024 only and the project is implemented in Kurigram district. It reached over 17,986
                            vulnerable
                            households.
                        </p>
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Transboundary Flood Resilience Project in South
                            Asia</h4>
                        <p class="text-gray-700 mb-4">
                            Implemented since February 2023 under the core development program with long-term support
                            from
                            Lutheran World Federation/World Service. Aims to increase the resilience of communities
                            through
                            multi-stakeholder action in the Brahmaputra basin. Priority areas are strengthening early
                            warning systems, disaster resilience, and climate justice. The project is implemented in
                            Bangladesh, Nepal, and India. In Bangladesh, it covers Kurigram, Sadar, Chilmari, Ulipur,
                            and
                            Nagheshwari and Rowmari upazilas.
                        </p>
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Humanitarian Response To Rohingya (FDMN)</h4>
                        <p class="text-gray-700">
                            RDRS Bangladesh, in partnership with Lutheran World Federation (LWF) Geneva, has been
                            implementing an emergency response program titled "LWF-RDRS Emergency Programme (LWF-EP)" in
                            Cox's Bazar. The project aims to meet the humanitarian and protection needs and increase
                            resilience of the Rohingya community and host communities. Activities include livelihood and
                            employment opportunities, tree plantation, life skills and leadership development, youth
                            engagement, social inclusion, promoting reforestation, and providing psychosocial support.
                            Over
                            56,298 program participants have been benefited.
                        </p>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">

<span>Advocacy & Human Rights</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <p class="text-gray-700">
                            RDRS Bangladesh actively engages in advocacy for the rights of marginalized communities,
                            promoting social justice, equality, and human dignity. Our initiatives aim to influence
                            policy,
                            raise awareness, and ensure equitable access to resources and opportunities for all.
                        </p>
                    </div>
                </div>
            </div>

<section id="radio-chilmari-sub" class="py-16 md:py-24 bg-gray-100 text-center rounded-lg shadow-md mt-12">
                <div class="container mx-auto px-4">
                    <h3 class="text-4xl font-bold text-gray-900 mb-8">Radio Chilmari</h3>
                    <p class="text-lg text-gray-700 max-w-3xl mx-auto mb-8">
                        Radio Chilmari is a community radio station dedicated to serving the local population with
                        informative and engaging programs.
                    </p>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-left">
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <h4 class="text-xl font-semibold text-gray-900 mb-3">About Radio Chilmari</h4>
                            <p class="text-gray-700">
                                Radio Chilmari aims to empower local communities by providing a platform for information
                                sharing, cultural exchange, and community development. It broadcasts programs on
                                agriculture, health, education, and local news.
                            </p>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <h4 class="text-xl font-semibold text-gray-900 mb-3">Programme Schedule</h4>
                            <p class="text-gray-700">
                                Tune in daily for a variety of programs: <br>
                                - Morning Show: 8:00 AM - 10:00 AM <br>
                                - Agricultural Tips: 10:00 AM - 11:00 AM <br>
                                - Health & Wellness: 11:00 AM - 12:00 PM <br>
                                - Local News & Updates: 1:00 PM - 2:00 PM <br>
                                - Community Voices: 3:00 PM - 4:00 PM
                            </p>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <h4 class="text-xl font-semibold text-gray-900 mb-3">Rate Chart</h4>
                            <p class="text-gray-700">
                                For advertising and program sponsorship rates, please contact our office. We offer
                                competitive rates for local businesses and organizations to reach a wide audience.
                            </p>
                            <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                                Request Rate Card
                            </button>
                        </div>
                    </div>
                </div>
            </section>

<section id="guest-house-sub" class="bg-white py-16 md:py-24 mt-12 rounded-lg shadow-md">
                
                <div class="relative h-96 bg-cover bg-center"
                     style="background-image: url('https://placehold.co/1920x500/34D399/FFFFFF?text=Luxurious+Hotel');">
                    <div class="absolute inset-0 bg-black opacity-50"></div>
                    <div class="relative z-10 flex flex-col items-center justify-center h-full text-white text-center px-4">
                        <h3 class="text-5xl font-bold mb-4">Luxurious Hotel</h3>
                        <p class="text-xl mb-8">Experience a blend of comfort and elegance.</p>
                        <a href="#guest-house-rooms-sub"
                           class="inline-block bg-green-500 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-green-600 transition duration-300">
                            Explore Rooms
                        </a>
                    </div>
                </div>

<div class="py-16 md:py-24 bg-gray-50">
                    <div class="container mx-auto px-4 text-center">
                        <h4 class="text-4xl font-bold text-gray-900 mb-8">Welcome to RDRS Guest House</h4>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-3xl mx-auto mb-12">
                            <div class="bg-white p-6 rounded-lg shadow-md">
                                <h5 class="text-3xl font-bold text-green-600">5</h5>
                                <p class="text-gray-700">Stars</p>
                            </div>
                            <div class="bg-white p-6 rounded-lg shadow-md">
                                <h5 class="text-3xl font-bold text-green-600">66</h5>
                                <p class="text-gray-700">Rooms</p>
                            </div>
                            <div class="bg-white p-6 rounded-lg shadow-md">
                                <h5 class="text-3xl font-bold text-green-600">120+</h5>
                                <p class="text-gray-700">Happy Guests</p>
                            </div>
                        </div>
                        <button class="px-6 py-3 bg-green-600 text-white font-semibold rounded-md hover:bg-green-700 transition duration-200">
                            Book Now
                        </button>
                    </div>
                </div>

<div id="guest-house-rooms-sub" class="py-16 md:py-24 bg-white">
                    <div class="container mx-auto px-4 text-center">
                        <h4 class="text-4xl font-bold text-gray-900 mb-12">Explore Our Rooms</h4>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                            
                            <div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
                                <img src="https://placehold.co/400x250/A2D2FF/000000?text=Standard+Room"
                                     alt="Standard Room" class="w-full h-48 object-cover rounded-md mb-4">
                                <h5 class="text-xl font-semibold text-gray-900 mb-2">Standard Room</h5>
                                <p class="text-gray-700 mb-4">Comfortable and cozy, perfect for a relaxing stay.</p>
                                <button class="px-6 py-2 bg-green-600 text-white font-semibold rounded-md hover:bg-green-700 transition duration-200">
                                    View Details
                                </button>
                            </div>
                            
                            <div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
                                <img src="https://placehold.co/400x250/B2F2BB/000000?text=Deluxe+Room" alt="Deluxe Room"
                                     class="w-full h-48 object-cover rounded-md mb-4">
                                <h5 class="text-xl font-semibold text-gray-900 mb-2">Deluxe Room</h5>
                                <p class="text-gray-700 mb-4">Spacious and elegant, offering enhanced amenities.</p>
                                <button class="px-6 py-2 bg-green-600 text-white font-semibold rounded-md hover:bg-green-700 transition duration-200">
                                    View Details
                                </button>
                            </div>
                            
                            <div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
                                <img src="https://placehold.co/400x250/FFD1DC/000000?text=Suite" alt="Suite"
                                     class="w-full h-48 object-cover rounded-md mb-4">
                                <h5 class="text-xl font-semibold text-gray-900 mb-2">Executive Suite</h5>
                                <p class="text-gray-700 mb-4">Luxurious and expansive, ideal for extended stays.</p>
                                <button class="px-6 py-2 bg-green-600 text-white font-semibold rounded-md hover:bg-green-700 transition duration-200">
                                    View Details
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

<div class="py-16 md:py-24 bg-blue-700 text-white">
                    <div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                        <div class="text-center md:text-left">
                            <h4 class="text-4xl font-bold mb-6">Discover A Brand Luxurious Hotel</h4>
                            <p class="text-lg mb-8">
                                Our guest house offers unparalleled comfort and service, making it the perfect choice
                                for your stay. Enjoy modern amenities, serene surroundings, and warm hospitality.
                            </p>
                            <button class="px-8 py-3 bg-white text-blue-700 font-semibold rounded-full hover:bg-gray-200 transition duration-300">
                                Learn More
                            </button>
                        </div>
                        <div class="flex justify-center md:justify-end">
                            <img src="https://placehold.co/500x350/ADD8E6/000000?text=Hotel+Exterior"
                                 alt="Hotel Exterior" class="rounded-lg shadow-xl max-w-full h-auto">
                        </div>
                    </div>
                </div>

<div class="py-16 md:py-24 bg-gray-50">
                    <div class="container mx-auto px-4 text-center">
                        <h4 class="text-4xl font-bold text-gray-900 mb-12">Explore Our Services</h4>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                            
                            <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
                                <div class="text-green-600 mb-4">
                                    <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                                    </svg>
                                </div>
                                <h5 class="text-xl font-semibold text-gray-900 mb-2">Food & Restaurant</h5>
                                <p class="text-gray-700">Enjoy delicious meals at our in-house restaurant, offering a
                                    variety of local and international cuisines.</p>
                            </div>
                            
                            <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
                                <div class="text-green-600 mb-4">
                                    <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M18.364 18.364A9 9 0 0012 3V1m-6.364 1.364A9 9 0 003 12h1m7-11v12m-6.364 7.636A9 9 0 0012 21v1m6.364-1.364A9 9 0 0021 12h-1m-7 11v-4m-6.364 1.364A9 9 0 003 12h1m7-11v12"></path>
                                    </svg>
                                </div>
                                <h5 class="text-xl font-semibold text-gray-900 mb-2">Spa & Fitness</h5>
                                <p class="text-gray-700">Rejuvenate at our spa or stay active in our well-equipped
                                    fitness center.</p>
                            </div>
                            
                            <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
                                <div class="text-green-600 mb-4">
                                    <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M7 13l3-3m0 0l3 3m-3-3v6m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                </div>
                                <h5 class="text-xl font-semibold text-gray-900 mb-2">Laundry Service</h5>
                                <p class="text-gray-700">Convenient and efficient laundry services available for all our
                                    guests.</p>
                            </div>
                        </div>
                    </div>
                </div>

</section>

<section id="scholarship-sub" class="py-16 md:py-24 bg-gray-100 text-center rounded-lg shadow-md mt-12">
                <div class="container mx-auto px-4">
                    <h3 class="text-4xl font-bold text-gray-900 mb-8">Scholarship</h3>
                    <p class="text-lg text-gray-700 max-w-3xl mx-auto mb-8">
                        RDRS Bangladesh is committed to promoting education through various scholarship programs for
                        deserving students from underprivileged backgrounds.
                    </p>
                    <h4 class="text-2xl font-bold text-gray-900 mb-6">Photo Gallery</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <img src="https://placehold.co/400x300/A2D2FF/000000?text=Scholarship+Event+1"
                             alt="Scholarship Event 1" class="w-full h-auto rounded-lg shadow-md">
                        <img src="https://placehold.co/400x300/B2F2BB/000000?text=Scholarship+Event+2"
                             alt="Scholarship Event 2" class="w-full h-auto rounded-lg shadow-md">
                        <img src="https://placehold.co/400x300/FFD1DC/000000?text=Scholarship+Event+3"
                             alt="Scholarship Event 3" class="w-full h-auto rounded-lg shadow-md">
                    </div>
                    <button class="mt-8 px-6 py-3 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                        View All Gallery
                    </button>
                </div>
            </section>

<section id="citizen-charter-sub" class="py-16 md:py-24 bg-white text-center rounded-lg shadow-md mt-12">
                <div class="container mx-auto px-4">
                    <h3 class="text-4xl font-bold text-gray-900 mb-8">Citizen Charter</h3>
                    <p class="text-lg text-gray-700 max-w-3xl mx-auto">
                        Our Citizen Charter outlines the commitments of RDRS Bangladesh to its stakeholders, detailing
                        the standards of service, transparency, and accountability we uphold in all our operations.
                    </p>
                    <button class="mt-8 px-6 py-3 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                        Download Citizen Charter
                    </button>
                </div>
            </section>

<section id="partners-sub" class="py-16 md:py-24 bg-gray-100 text-center rounded-lg shadow-md mt-12">
                <div class="container mx-auto px-4">
                    <h3 class="text-4xl font-bold text-gray-900 mb-8">Our Partners</h3>
                    <p class="text-lg text-gray-700 max-w-3xl mx-auto mb-8">
                        RDRS Bangladesh collaborates with a wide range of national and international partners to achieve
                        its development goals and maximize impact.
                    </p>
                    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center justify-center">
                        <img src="https://placehold.co/120x60/CCCCCC/000000?text=Partner+1" alt="Partner Logo 1"
                             class="mx-auto h-16 object-contain">
                        <img src="https://placehold.co/120x60/CCCCCC/000000?text=Partner+2" alt="Partner Logo 2"
                             class="mx-auto h-16 object-contain">
                        <img src="https://placehold.co/120x60/CCCCCC/000000?text=Partner+3" alt="Partner Logo 3"
                             class="mx-auto h-16 object-contain">
                        <img src="https://placehold.co/120x60/CCCCCC/000000?text=Partner+4" alt="Partner Logo 4"
                             class="mx-auto h-16 object-contain">
                        <img src="https://placehold.co/120x60/CCCCCC/000000?text=Partner+5" alt="Partner Logo 5"
                             class="mx-auto h-16 object-contain">
                        <img src="https://placehold.co/120x60/CCCCCC/000000?text=Partner+6" alt="Partner Logo 6"
                             class="mx-auto h-16 object-contain">
                    </div>
                </div>
            </section>

</div>
    </section>

<section id="work-with-us" class="py-16 md:py-24 bg-white text-center">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-gray-900 mb-8">Work With Us</h2>
            <p class="text-lg text-gray-700 max-w-3xl mx-auto mb-8">
                Join RDRS Bangladesh in our mission to empower communities and build a better future. We offer diverse
                opportunities for talented and passionate individuals to contribute to sustainable development.
            </p>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200 rounded-t-lg"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 10h2m2 0h2m2 0h2m2 0h2m-6 4h4m-4 4h4"></path>
                        </svg>
                        <span>Vacancy</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Current Job Openings:</h4>
                        <ul class="list-disc list-inside text-gray-700 space-y-2">
                            <li><strong>Project Coordinator</strong> - Deadline: August 15, 2025</li>
                            <li><strong>Field Officer (Agriculture)</strong> - Deadline: August 20, 2025</li>
                            <li><strong>Monitoring & Evaluation Specialist</strong> - Deadline: August 25, 2025</li>
                        </ul>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            Apply Now
                        </button>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0h4m-4 6h4m-4 4h4m-6 3h6"></path>
                        </svg>
                        <span>Internship</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Internship Opportunities:</h4>
                        <p class="text-gray-700 mb-4">
                            RDRS Bangladesh offers dynamic internship programs for students and recent graduates looking
                            to
                            gain hands-on experience in the development sector. Interns contribute to various projects
                            while
                            learning from experienced professionals.
                        </p>
                        <ul class="list-disc list-inside text-gray-700 space-y-2">
                            <li><strong>Summer Internship Program</strong> - Applications open: September 1, 2025</li>
                            <li><strong>Research Internship (Climate Change)</strong> - Rolling applications</li>
                        </ul>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            Learn More & Apply
                        </button>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                        </svg>
                        <span>Tender Notice</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Recent Tender Notices:</h4>
                        <ul class="list-disc list-inside text-gray-700 space-y-2">
                            <li><strong>Supply of Agricultural Equipment</strong> - Submission Deadline: August 10, 2025
                            </li>
                            <li><strong>Construction of Community Centers</strong> - Submission Deadline: August 22,
                                2025
                            </li>
                            <li><strong>Consultancy for Baseline Survey</strong> - Submission Deadline: September 5,
                                2025
                            </li>
                        </ul>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            View All Tenders
                        </button>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                        </svg>
                        <span>Job Bank</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Submit Your Resume:</h4>
                        <p class="text-gray-700 mb-4">
                            If you don't see a suitable vacancy but are passionate about our mission, you can submit
                            your
                            resume to our job bank. We will keep your profile on file for future opportunities that
                            match
                            your skills and experience.
                        </p>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            Submit Resume
                        </button>
                    </div>
                </div>
            </div>

</div>
    </section>

<section id="reports" class="py-16 md:py-24 bg-gray-100 text-center">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-gray-900 mb-8">Reports & Publications</h2>
            <p class="text-lg text-gray-700 mb-8">
                Access our annual reports, research papers, and publications detailing our impact and activities.
            </p>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden text-left">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200 rounded-t-lg"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Flash News</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            
                            <div class="flex items-start space-x-4">
                                <div>
                                    <h4 class="text-lg font-semibold text-gray-900 mb-1">RDRS Hosts AZEECON Summit in
                                        Rangpur</h4>
                                    <p class="text-gray-600 text-sm">July 25, 2025</p>
                                    <p class="text-gray-700 text-sm mt-2">RDRS Bangladesh recently hosted the AZEECON
                                        Summit, bringing together stakeholders to discuss key development
                                        initiatives...</p>
                                    <a href="#" class="text-blue-600 hover:underline text-sm mt-1 inline-block">Read
                                        More</a>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-4">
                                <div>
                                    <h4 class="text-lg font-semibold text-gray-900 mb-1">Mr. Farique Ahmed Elected as
                                        Vice-Chairman of RDRS Board Of Trustees</h4>
                                    <p class="text-gray-600 text-sm">July 20, 2025</p>
                                    <p class="text-gray-700 text-sm mt-2">We are pleased to announce the election of Mr.
                                        Farique Ahmed to the position of Vice-Chairman of our Board of Trustees...</p>
                                    <a href="#" class="text-blue-600 hover:underline text-sm mt-1 inline-block">Read
                                        More</a>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-4">
                                <div>
                                    <h4 class="text-lg font-semibold text-gray-900 mb-1">Lutheran World Federation
                                        Delegates
                                        Examine RDRS Education Projects in Moulvibazar</h4>
                                    <p class="text-gray-600 text-sm">July 15, 2025</p>
                                    <p class="text-gray-700 text-sm mt-2">Delegates from the Lutheran World Federation
                                        recently visited Moulvibazar to assess the progress of RDRS education
                                        projects...</p>
                                    <a href="#" class="text-blue-600 hover:underline text-sm mt-1 inline-block">Read
                                        More</a>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-4">
                                <div>
                                    <h4 class="text-lg font-semibold text-gray-900 mb-1">New Partnership for Rural
                                        Development Announced</h4>
                                    <p class="text-gray-600 text-sm">July 10, 2025</p>
                                    <p class="text-gray-700 text-sm mt-2">RDRS Bangladesh has forged a new partnership
                                        to
                                        expand its rural development initiatives in underserved areas...</p>
                                    <a href="#" class="text-blue-600 hover:underline text-sm mt-1 inline-block">Read
                                        More</a>
                                </div>
                            </div>
                        </div>
                        <button class="mt-8 px-6 py-3 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            View All Flash News
                        </button>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden text-left">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Newsletter</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Latest Newsletters:</h4>
                        <ul class="list-disc list-inside text-gray-700 space-y-2">
                            <li><a href="#" class="text-blue-600 hover:underline">RDRS Quarterly Newsletter - Q2 2025
                                (PDF)</a></li>
                            <li><a href="#" class="text-blue-600 hover:underline">Highlights from RDRS - May 2025 (Web
                                Version)</a></li>
                            <li><a href="#" class="text-blue-600 hover:underline">Community Impact Stories - April 2025
                                (PDF)</a></li>
                        </ul>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            View All Newsletters
                        </button>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden text-left">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Fact Sheet & Brochure</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Download Our Information Materials:</h4>
                        <ul class="list-disc list-inside text-gray-700 space-y-2">
                            <li><a href="#" class="text-blue-600 hover:underline">RDRS Overview Fact Sheet 2025
                                (PDF)</a>
                            </li>
                            <li><a href="#" class="text-blue-600 hover:underline">Microfinance Program Brochure
                                (PDF)</a>
                            </li>
                            <li><a href="#" class="text-blue-600 hover:underline">Climate Resilience Initiatives Fact
                                Sheet
                                (PDF)</a></li>
                        </ul>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            View All Fact Sheets & Brochures
                        </button>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden text-left">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200 rounded-t-lg"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Study Report</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Our Research and Study Reports:</h4>
                        <ul class="list-disc list-inside text-gray-700 space-y-2">
                            <li><a href="#" class="text-blue-600 hover:underline">Impact Assessment of EYRB Project 2024
                                (PDF)</a></li>
                            <li><a href="#" class="text-blue-600 hover:underline">Study on Women's Empowerment in Rural
                                Bangladesh (PDF)</a></li>
                            <li><a href="#" class="text-blue-600 hover:underline">Climate Change Vulnerability in
                                Northern
                                Bangladesh (PDF)</a></li>
                        </ul>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            View All Study Reports
                        </button>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden text-left">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200 rounded-t-lg"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Feature Stories</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Inspiring Stories from the Field:</h4>
                        <ul class="list-disc list-inside text-gray-700 space-y-2">
                            <li><a href="#" class="text-blue-600 hover:underline">From Vulnerability to Resilience: A
                                Farmer's Journey</a></li>
                            <li><a href="#" class="text-blue-600 hover:underline">Empowering Women Through Microfinance:
                                Shahana's Story</a></li>
                            <li><a href="#" class="text-blue-600 hover:underline">Youth Leading Change: The Story of a
                                Community Leader</a></li>
                        </ul>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            Read All Feature Stories
                        </button>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden text-left">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200 rounded-t-lg"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Annual Reports</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Download Our Annual Reports:</h4>
                        <ul class="list-disc list-inside text-gray-700 space-y-2">
                            <li><a href="#" class="text-blue-600 hover:underline">Annual Report 2024 (PDF)</a></li>
                            <li><a href="#" class="text-blue-600 hover:underline">Annual Report 2023 (PDF)</a></li>
                            <li><a href="#" class="text-blue-600 hover:underline">Annual Report 2022 (PDF)</a></li>
                        </ul>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            View All Annual Reports
                        </button>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden text-left">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200 rounded-t-lg"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Good Practice</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Sharing Our Successes:</h4>
                        <ul class="list-disc list-inside text-gray-700 space-y-2">
                            <li><a href="#" class="text-blue-600 hover:underline">Case Study: Integrated Water
                                Management in
                                Flood-Prone Areas</a></li>
                            <li><a href="#" class="text-blue-600 hover:underline">Best Practices in Community-Led
                                Disaster
                                Preparedness</a></li>
                            <li><a href="#" class="text-blue-600 hover:underline">Innovative Approaches to Skill
                                Development
                                for Rural Youth</a></li>
                        </ul>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            Explore All Good Practices
                        </button>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden text-left">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200 rounded-t-lg"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Policy Manuals</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Our Operational Policies and Guidelines:</h4>
                        <ul class="list-disc list-inside text-gray-700 space-y-2">
                            <li><a href="#" class="text-blue-600 hover:underline">Safeguarding Policy (PDF)</a></li>
                            <li><a href="#" class="text-blue-600 hover:underline">Financial Management Manual (PDF)</a>
                            </li>
                            <li><a href="#" class="text-blue-600 hover:underline">Procurement Guidelines (PDF)</a></li>
                        </ul>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            View All Policy Manuals
                        </button>
                    </div>
                </div>
            </div>

<div class="mb-8 bg-gray-50 rounded-lg shadow-md overflow-hidden text-left">
                <button class="accordion-header w-full text-left p-6 flex justify-between items-center text-xl font-semibold text-gray-900 bg-blue-100 hover:bg-blue-200 transition duration-200 rounded-t-lg"
                        onclick="toggleAccordion(this)">
                    <div class="flex items-center space-x-3">
                        <span>Photo Gallery</span>
                    </div>
                    <svg class="w-6 h-6 transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div class="accordion-content  border-t border-gray-200">
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Visualizing Our Impact:</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <img src="https://placehold.co/300x200/A2D2FF/000000?text=Field+Work" alt="Gallery Image 1"
                                 class="w-full h-auto rounded-md shadow-sm object-cover">
                            <img src="https://placehold.co/300x200/B2F2BB/000000?text=Community+Meeting"
                                 alt="Gallery Image 2" class="w-full h-auto rounded-md shadow-sm object-cover">
                            <img src="https://placehold.co/300x200/FFD1DC/000000?text=Training+Session"
                                 alt="Gallery Image 3" class="w-full h-auto rounded-md shadow-sm object-cover">
                            <img src="https://placehold.co/300x200/D4A5A5/000000?text=Relief+Distribution"
                                 alt="Gallery Image 4" class="w-full h-auto rounded-md shadow-sm object-cover">
                        </div>
                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                            View Full Gallery
                        </button>
                    </div>
                </div>
            </div>

<button class="mt-8 px-6 py-3 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                View All Reports & Publications
            </button>
        </div>
    </section>

<section id="notice" class="py-16 md:py-24 bg-white text-center">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-gray-900 mb-8">Notice Board</h2>
            <p class="text-lg text-gray-700">
                Stay updated with the latest news, announcements, and tenders from RDRS Bangladesh.
            </p>
            <button class="mt-8 px-6 py-3 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200">
                See All Notices
            </button>
        </div>
    </section>

<section id="donate" class="py-16 md:py-24 bg-gray-100 text-center">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-gray-900 mb-8">Support Our Cause</h2>
            <p class="text-lg text-gray-700 mb-6">
                Your generous contributions enable us to continue our vital work in empowering communities and fostering
                sustainable development across Bangladesh. Every donation, big or small, makes a significant impact.
            </p>
            <button id="donateNowButton"
                    class="mt-8 px-8 py-4 bg-green-600 text-white font-semibold rounded-full text-lg hover:bg-green-700 transition duration-300 transform hover:scale-105 shadow-lg">
                Donate Now
            </button>

<div id="paymentOptions"
                 class="hidden mt-12 p-8 bg-gray-50 rounded-lg shadow-md max-w-xl mx-auto text-left">
                <h3 class="text-2xl font-bold text-gray-900 mb-6 text-center">Choose Your Payment Method</h3>

<div class="mb-6 p-4 border border-gray-200 rounded-lg flex items-center space-x-4">
                    <img src="https://placehold.co/60x60/E2136E/FFFFFF?text=bKash" alt="bKash Logo"
                         class="w-12 h-12 rounded-md">
                    <div>
                        <h4 class="text-xl font-semibold text-gray-800">bKash (Merchant Pay)</h4>
                        <p class="text-gray-700 mt-1">
                            **Merchant Number:** 01XXXXXXXXX <br>
                            **Instructions:** Go to your bKash app, select "Make Payment," enter the merchant number,
                            amount, and your PIN.
                        </p>
                    </div>
                </div>

<div class="p-4 border border-gray-200 rounded-lg flex items-center space-x-4">
                    <img src="https://placehold.co/60x60/FF0000/FFFFFF?text=Nagad" alt="Nagad Logo"
                         class="w-12 h-12 rounded-md">
                    <div>
                        <h4 class="text-xl font-semibold text-gray-800">Nagad (Merchant Pay)</h4>
                        <p class="text-gray-700 mt-1">
                            **Merchant Number:** 01YYYYYYYYY <br>
                            **Instructions:** Open your Nagad app, choose "Merchant Pay," enter the merchant number,
                            amount, and your PIN.
                        </p>
                    </div>
                </div>

<p class="text-sm text-gray-600 mt-6 text-center">
                    For other payment methods (Visa Card, etc.) or if you encounter any issues, please contact us
                    directly.
                    <br>
                    **Note:** This is a demonstration of payment options. Actual secure payment gateway integration
                    requires backend development.
                </p>
            </div>
        </div>
    </section>

<section id="contact" class="py-16 md:py-24 bg-white text-center">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-gray-900 mb-8">Contact Us</h2>
            <p class="text-lg text-gray-700 mb-4">
                Have questions or want to get involved? Reach out to us!
            </p>
            <p class="text-lg text-gray-700">
                Email: <a href="mailto:info@rdrsbangladesh.org" class="text-blue-600 hover:underline">info@rdrsbangladesh.org</a>
            </p>
            <p class="text-lg text-gray-700 mt-2">
                Phone: +880 1551027108 (Monazzil Riyad, Coordinator, Communications)
            </p>
            <p class="text-lg text-gray-700 mt-2">
                Address: House 43, Road 10, Sector 06, Uttara, Dhaka 1230, Bangladesh.
            </p>
        </div>
    </section>

<footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4 text-center">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-left mb-8">
                <div>
                    <h3 class="text-xl font-semibold mb-4">Head Office</h3>
                    <p class="text-gray-400">House 43, Road 10, Sector 6, Uttara, Dhaka 1230</p>
                    <p class="text-gray-400">Phone: +88 02 58957071, 58954973, 58959802</p>
                    <p class="text-gray-400">Email: <a href="mailto:rdrs@rdrsbangladesh.org" class="hover:underline">rdrs@rdrsbangladesh.org</a>
                    </p>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4">RTI Focal Person</h3>
                    <p class="text-gray-400">Phone: +880 1720328214</p>
                    <p class="text-gray-400">Phone: +88 02 58959802, 58957071</p>
                    <p class="text-gray-400">Email: <a href="mailto:rtifp@rdrsbangladesh.org" class="hover:underline">rtifp@rdrsbangladesh.org</a>
                    </p>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4">Safeguarding And Complaints</h3>
                    <p class="text-gray-400">Phone: +880 1733032829</p>
                    <p class="text-gray-400">Email: <a href="mailto:helpline@rdrsbangladesh.org"
                                                       class="hover:underline">helpline@rdrsbangladesh.org</a></p>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4">Join Us</h3>
                    <div class="flex space-x-3 mb-4">
                        <a href="https://www.facebook.com/RDRSBangladesh/" target="_blank"
                           class="text-gray-400 hover:text-white transition duration-200">
                            <svg fill="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
                                <path d="M12 2C6.477 2 2 6.477 2 12c0 5.016 3.657 9.18 8.438 9.879V14.37h-2.438V12h2.438V9.75c0-2.413 1.465-3.746 3.657-3.746 1.057 0 1.967.078 2.23.113v2.58h-1.542c-1.21 0-1.445.575-1.445 1.423V12h2.89l-.472 2.37h-2.418v7.509C18.343 21.18 22 17.016 22 12c0-5.523-4.477-10-10-10z"></path>
                            </svg>
                        </a>
                        <a href="https://twitter.com/RDRSBangladesh" target="_blank"
                           class="text-gray-400 hover:text-white transition duration-200">
                            <svg fill="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
                                <path d="M22.46 6c-.77.344-1.6.577-2.47.68.89-.535 1.56-1.38 1.88-2.39-.83.495-1.75.855-2.72 1.05C18.37 3.51 17.26 3 16 3c-2.39 0-4.34 1.95-4.34 4.34 0 .34.03.67.09.99C8.36 8.16 5.4 6.5 3.3 3.96c-.37.64-.58 1.39-.58 2.19 0 1.51.77 2.84 1.94 3.62-.71-.02-1.38-.22-1.96-.54v.05c0 2.11 1.5 3.86 3.49 4.26-.36.1-.74.15-1.13.15-.28 0-.55-.03-.81-.08.55 1.73 2.15 2.99 4.05 3.02-1.49 1.17-3.37 1.87-5.42 1.87-.35 0-.69-.02-1.03-.06C3.15 20.3 5.4 21 7.8 21c8.47 0 13.1-7.01 13.1-13.1 0-.2 0-.4-.01-.6z"></path>
                            </svg>
                        </a>
                        <a href="https://www.linkedin.com/company/rdrs-bangladesh/" target="_blank"
                           class="text-gray-400 hover:text-white transition duration-200">
                            <svg fill="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
                                <path d="M20.447 20.452h-3.554v-5.567c0-1.325-.028-3.044-1.853-3.044-1.854 0-2.136 1.445-2.136 2.946v5.665H9.351V9.495h3.414v1.561h.049c.477-.9 1.637-1.853 3.37-1.853 3.606 0 4.267 2.367 4.267 5.425v6.234zM5.337 7.433a2.062 2.062 0 01-2.064-2.065 2.062 2.062 0 012.064-2.065c1.13 0 2.064.935 2.064 2.065 0 1.13-.934 2.065-2.064 2.065zm-.001 13.019H7.39V9.495H5.336v10.957z"></path>
                            </svg>
                        </a>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">Accreditation</h3>
                    <a href="#" class="text-gray-400 hover:text-white transition duration-200">View Accreditation
                        Details</a>
                </div>
            </div>
            <p class="text-center text-gray-400">&copy; 2025 RDRS Bangladesh. All rights reserved.</p>
        </div>
    </footer>
</div>

mobileMenuButton.addEventListener('click', function () {
        mobileMenu.classList.toggle('-translate-x-full'); // Slide in/out
    });

function closeMobileMenu() {
        mobileMenu.classList.add('-translate-x-full');
    }

// JavaScript for the introduction popup
    function closePopup() {
        document.getElementById('introPopup').style.display = 'none';
    }

// Show popup on page load
    window.onload = function () {
        document.getElementById('introPopup').style.display = 'flex';
        // Set initial active link
        setActiveNavLink();

// JavaScript for showing/hiding payment options - moved inside window.onload
        const donateNowButton = document.getElementById('donateNowButton');
        const paymentOptions = document.getElementById('paymentOptions');

if (donateNowButton && paymentOptions) { // Check if elements exist before adding listener
            donateNowButton.addEventListener('click', function () {
                paymentOptions.classList.toggle('hidden'); // Toggle visibility
                // Optional: Scroll to payment options if they appear far down
                if (!paymentOptions.classList.contains('hidden')) {
                    paymentOptions.scrollIntoView({behavior: 'smooth', block: 'start'});
                }
            });
        }
    };

// JavaScript for active navigation link highlighting
    const navLinks = document.querySelectorAll('.nav-link');
    const mobileNavLinks = document.querySelectorAll('.nav-link-mobile');

function removeActiveClasses() {
        navLinks.forEach(link => link.classList.remove('active-nav-link'));
        mobileNavLinks.forEach(link => link.classList.remove('active-nav-link'));
    }

// Add click listeners to desktop nav links
    navLinks.forEach(link => {
        link.addEventListener('click', (event) => {
            // Prevent default hash jump to allow for smooth scrolling if implemented later
            // event.preventDefault();
            window.location.hash = link.getAttribute('href'); // Update hash
            setActiveNavLink(); // Set active class based on new hash
        });
    });

// Add click listeners to mobile nav links
    mobileNavLinks.forEach(link => {
        link.addEventListener('click', (event) => {
            // event.preventDefault();
            window.location.hash = link.getAttribute('href'); // Update hash
            setActiveNavLink(); // Set active class based on new hash
            closeMobileMenu(); // Close mobile menu after clicking a link
        });
    });

// JavaScript for accordion functionality
    function toggleAccordion(button) {
        const content = button.nextElementSibling;
        const svg = button.querySelector('svg');

if (content.classList.contains('active')) {
            content.classList.remove('active');
            button.classList.remove('active');
        } else {
            // Close all other open accordions
            document.querySelectorAll('.accordion-content.active').forEach(item => {
                item.classList.remove('active');
                item.previousElementSibling.classList.remove('active');
            });
            content.classList.add('active');
            button.classList.add('active');
        }
    }
</script>
</body>
</html>

X7ROOT File Manager

Editing: index.htm

Upload File

Create Folder