Hero

            <div class="relative bg-white flex flex-col">
    <div class="w-full py-16 md:pt-20 md:pb-24 lg:pt-32 lg:pb-40">
        <div class="container max-w-lg mx-0 md:w-1/2 xl:w-1/3 xl:max-w-xl">
            <h1 class="text-3xl text-gray-800 md:text-5xl">Progress Through Partnerships</h1>
            <p class="mt-6 text-gray-500 md:text-lg">Engage with communities in Boston and beyond by joining one or more of our programs. </p>
            <a href="#" class="mt-8 btn text-white bg-red-600 hover:bg-red-800">Learn about our programs</a>
        </div>
    </div>
    <div class="h-64 w-full bg-gray-800 bg-cover bg-no-repeat bg-center md:h-full md:absolute md:inset-y-0 md:right-0 md:w-1/2 xl:w-2/3" style="background-image: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .65)), url('https://images.unsplash.com/photo-1577036421869-7c8d388d2123?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=60')"></div>
</div>

        

            <div
    class="bg-gray-800 bg-cover bg-no-repeat bg-center"
    style="background-image: url('https://images.unsplash.com/photo-1496517463163-3550265405c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60')"
>
    <div class="container py-16">
        <div class="max-w-xl w-full px-8 py-12 text-white bg-black md:py-16 md:px-16 lg:max-w-2xl lg:px-20 xl:px-24">
            <h1 class="text-3xl md:text-5xl">Progress Through Partnerships</h1>
            <p class="mt-6 text-gray-200">We bring together community organizations, social service groups, government agencies, and Northeastern students, faculty, and staff to build a better world. A spirit of collaboration infuses everything we do, from hosting volunteer programs, to conducting service-based research, to organizing community events.</p>
            <a href="#" class="mt-8 btn text-white bg-red-600 hover:bg-red-800">Learn about our programs</a>
        </div>
    </div>
</div>

        

            <div
    class="bg-gray-800 bg-cover bg-no-repeat bg-center"
    style="background-image: linear-gradient(to right, rgba(0, 0, 0, .85), rgba(0, 0, 0, .25)), url('https://images.unsplash.com/photo-1496517463163-3550265405c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60')"
>
    <div class="container py-16 md:py-24 lg:py-32">
        <div class="max-w-3xl text-white">
            <h1 class="text-3xl md:text-5xl">Progress Through Partnerships</h1>
            <p class="mt-4 text-lg md:text-2xl">Engage with communities in Boston and beyond by joining one or more of our programs. </p>
            <p class="mt-6">We bring together community organizations, social service groups, government agencies, and Northeastern students, faculty, and staff to build a better world. A spirit of collaboration infuses everything we do, from hosting volunteer programs, to conducting service-based research, to organizing community events.</p>
            <a href="#" class="mt-8 btn text-white bg-red-600 hover:bg-red-800">Learn about our programs</a>
        </div>
    </div>
</div>

        

            <div class="pt-16 pb-20 md:pt-20 md:pb-24 lg:pt-32 lg:pb-40">
    <div class="container sm:text-center">
        <h1 class="text-4xl text-gray-900 font-bold uppercase md:text-5xl lg:text-6xl">Progress Through Partnerships</h1>
        <span class="mt-6 inline-flex w-20 border-t-4 border-red-600 md:mt-8"></span>
        <p class="mt-2 text-gray-900 md:text-lg">We are your gateway to achieve what's next</p>
        <p class="mt-6 mx-auto max-w-3xl text-gray-600 md:text-lg">
            Discover new experiences, strengthen connections, and fulfill your next ambition through the power of Northeastern’s global network. The Office of Alumni Relations is your catalyst to stay in touch with your lifelong community, keep learning, access career strategies, engage with thought leaders and idea-generators, and find the resources you need to achieve what’s next.
        </p>
    </div>
</div>

        

            <div
    class="relative pt-16 pb-20 bg-black bg-cover bg-center bg-no-repeat md:pt-20 md:pb-24 lg:pt-32 lg:pb-40"
>
    <video
        class="absolute inset-0 w-full h-full object-cover"
        src="/assets/videos/hero-background.mp4"
        autoplay
        loop
    ></video>
    <div
        class="absolute inset-0 w-full h-full bg-black bg-opacity-60"
    ></div>
    <div class="relative container text-white sm:text-center">
        <h1 class="text-3xl md:text-5xl lg:text-6xl"><strong class="font-bold">Personalize</strong> your path</h1>
        <p class="mt-6 md:text-lg">At Northeastern, multidisciplinary and experiential learning options expand your window of knowledge, fuel innovation, and enable you to create an educational journey that meets your goals.</p>
        <div class="mt-10 flex items-center sm:justify-center">
            <a href="#" class="btn text-white bg-red-600 hover:bg-red-700">Apply</a>
            <a href="#" class="ml-2 btn text-gray-800 bg-white hover:bg-gray-200">Learn More</a>
        </div>
    </div>
</div>