[av_slideshow_full size='featured' max_height='20%' stretch='' control_layout='av-control-default' src='' attachment='' attachment_size='' position='top left' repeat='no-repeat' attach='scroll' conditional_play='' animation='slide' transition_speed='' autoplay='false' interval='5' img_scrset='' lazy_loading='disabled' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-m65kz1gg' sc_version='1.0']
[av_slide_full slide_type='image' id='62' video='https://' mobile_image='' fallback_link='https://' title='Services' video_format='' video_ratio='16:9' caption_pos='caption_bottom' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' custom_title='' custom_content='' heading_tag='' heading_class='' link_apply='' link='lightbox' link_target='' button_label='Click me' button_color='light' link1='manually,http://' link_target1='' button_label2='Click me' button_color2='light' link2='manually,http://' link_target2='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' element_template='' one_element_template='' av_uid='av-m65kyzq8' sc_version='1.0']
Services offered by Sanguen - Click for more information
[/av_slide_full]
[/av_slideshow_full]

[av_slideshow size='featured' control_layout='' perma_caption='' conditional_play='' animation='slide' transition_speed='' autoplay='false' autoplay_stopper='' interval='5' img_scrset='' lazy_loading='disabled' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' alb_description='' id='' custom_class='' template_class='' element_template='' one_element_template='' show_locked_options_fakearg='' av_uid='av-2n2c3e' sc_version='1.0'][/av_slideshow]

[av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' template_class='' av_uid='av-mbncz7fn' sc_version='1.0']



<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Google Fonts: Inter -->

<!-- Font Awesome for Icons (Kept in case icons are used in main content later) -->

<style>
        /* Custom styles to extend Tailwind */<br />
        body {<br />
            font-family: 'Inter', sans-serif;<br />
        }<br />
        .card-hover-effect {<br />
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;<br />
        }<br />
        .card-hover-effect:hover {<br />
            transform: translateY(-5px);<br />
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);<br />
        }<br />
    </style>

&nbsp;

<!-- Main Content Section -->

<main class="container mx-auto px-6 py-12 md:py-20">
<!-- Page Title and Intro --></main>
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Our Programs &amp; Services</h1>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Sanguen Health Centre provides a range of comprehensive, person-centered programs and services to support our community. Explore how we can help you.</p>

</div>
<!-- Card Grid for Programs -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

<!-- Card 1: Hepatitis C Program -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg card-hover-effect flex flex-col"><img class="w-full h-56 object-cover" src="https://placehold.co/600x400/c8102e/ffffff?text=Community+Care" alt="Hepatitis C Program" />
<div class="p-6 flex-grow flex flex-col">
<h2 class="text-2xl font-bold text-gray-800 mb-2">Hepatitis C Program</h2>
<p class="text-gray-600 mb-4 flex-grow">Comprehensive care including screening, diagnosis, treatment, and ongoing support for individuals affected by Hepatitis C.</p>
<a class="mt-auto inline-block bg-red-600 text-white text-center font-semibold py-2 px-4 rounded-lg hover:bg-red-700 transition-colors" href="#">Learn More</a>

</div>
</div>
<!-- Card 2: Outreach & Harm Reduction -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg card-hover-effect flex flex-col"><img class="w-full h-56 object-cover" src="https://placehold.co/600x400/4a5568/ffffff?text=Harm+Reduction" alt="Outreach &amp; Harm Reduction" />
<div class="p-6 flex-grow flex flex-col">
<h2 class="text-2xl font-bold text-gray-800 mb-2">Outreach &amp; Harm Reduction</h2>
<p class="text-gray-600 mb-4 flex-grow">Mobile and community-based services providing essential supplies, education, and support to reduce harm associated with substance use.</p>
<a class="mt-auto inline-block bg-gray-700 text-white text-center font-semibold py-2 px-4 rounded-lg hover:bg-gray-800 transition-colors" href="#">Learn More</a>

</div>
</div>
<!-- Card 3: Peer Support Program -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg card-hover-effect flex flex-col"><img class="w-full h-56 object-cover" src="https://placehold.co/600x400/f59e0b/ffffff?text=Peer+Support" alt="Peer Support Program" />
<div class="p-6 flex-grow flex flex-col">
<h2 class="text-2xl font-bold text-gray-800 mb-2">Peer Support Program</h2>
<p class="text-gray-600 mb-4 flex-grow">Connecting individuals with trained peers who have lived experience, offering non-judgmental support, encouragement, and guidance.</p>
<a class="mt-auto inline-block bg-amber-500 text-white text-center font-semibold py-2 px-4 rounded-lg hover:bg-amber-600 transition-colors" href="#">Learn More</a>

</div>
</div>
<!-- Card 4: Education & Training -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg card-hover-effect flex flex-col"><img class="w-full h-56 object-cover" src="https://placehold.co/600x400/10b981/ffffff?text=Education" alt="Education &amp; Training" />
<div class="p-6 flex-grow flex flex-col">
<h2 class="text-2xl font-bold text-gray-800 mb-2">Education &amp; Training</h2>
<p class="text-gray-600 mb-4 flex-grow">Workshops and training sessions for community partners, healthcare providers, and the public on topics related to our core services.</p>
<a class="mt-auto inline-block bg-emerald-500 text-white text-center font-semibold py-2 px-4 rounded-lg hover:bg-emerald-600 transition-colors" href="#">Learn More</a>

</div>
</div>
<!-- Card 5: Health Services -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg card-hover-effect flex flex-col"><img class="w-full h-56 object-cover" src="https://placehold.co/600x400/6366f1/ffffff?text=Trans+Health" alt="Trans Health Services" />
<div class="p-6 flex-grow flex flex-col">
<h2 class="text-2xl font-bold text-gray-800 mb-2">Health Services</h2>
<p class="text-gray-600 mb-4 flex-grow">Providing affirming and inclusive healthcare services for underserved and at risk individuals, specialized care.</p>
<a class="mt-auto inline-block bg-indigo-500 text-white text-center font-semibold py-2 px-4 rounded-lg hover:bg-indigo-600 transition-colors" href="#">Learn More</a>

</div>
</div>
<!-- Card 6: Community Health Van -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg card-hover-effect flex flex-col"><img class="w-full h-56 object-cover" src="https://placehold.co/600x400/3b82f6/ffffff?text=Health+Van" alt="Community Health Van" />
<div class="p-6 flex-grow flex flex-col">
<h2 class="text-2xl font-bold text-gray-800 mb-2">Community Health Van</h2>
<p class="text-gray-600 mb-4 flex-grow">Our mobile clinic brings essential health services directly to underserviced populations throughout the community.</p>
<a class="mt-auto inline-block bg-blue-500 text-white text-center font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors" href="#">Learn More</a>

</div>
</div>
</div>
&nbsp;


[/av_codeblock]

[av_hr class='default' icon_select='yes' icon='ue808' position='center' shadow='no-shadow' height='50' custom_border='av-border-thin' custom_width='50px' custom_margin_top='30px' custom_margin_bottom='30px' custom_border_color='' custom_icon_color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' element_template='' one_element_template='' show_locked_options_fakearg='' av_uid='av-2dorbe' sc_version='1.0']