@extends('website.layouts.layout')
@section('content')
<section class="pxp-hero vh-100" style="background-color: #fff0d9;">
    <div class="pxp-hero-caption">
        <div class="pxp-container">
            <div class="row pxp-pl-80 align-items-center justify-content-between">
                <div class="col-12 col-xl-6 col-xxl-5">
                    <h1 style="font-size: 50px; line-height: 69px; letter-spacing: 0px;">
                        Life at UNIWOLC</span>
                    </h1>

                    <div class="pxp-hero-subtitle mt-3 mt-lg-4">
                        Uniwolc Is A Diverse Community Working To Build A Future Where Anyone, Anywhere Has Access To The Best Education. Join Us On This Journey As We Make A Big Impact On The Lives Of Countless Students.
                    </div>

                    <div class="mt-5">
                        <a href="#" class="btn rounded-pill pxp-section-cta um-explore-program-hero-section-cta">Join Us</a>
                    </div>
                </div>

                <div class="d-none d-xl-block col-xl-5 position-relative">
                    <div class="pxp-hero-cards-container pxp-animate-cards pxp-mouse-move" data-speed="160">
                        <div class="pxp-hero-card pxp-cover pxp-cover-top" style="background-image: url(https://dev.uniwolc.com/public/images/life-main2.jpg);width:500px !important"></div>
                        <div class="pxp-hero-card-dark"></div>
                        <div class="pxp-hero-card-light"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pxp-hero-right-bg-card pxp-has-animation" style="background-color: #ff913f !important;"></div>
</section>





<!--<section class="mt-100">
        <div class="pxp-container">
            <h1 class="text-center" >Latest Resources</h1>
            <div class="row justify-content-evenly mt-4 mt-md-5 pxp-animate-in pxp-animate-in-top pxp-in">
                
                <div class="col-lg-4 col-xl-4 pxp-services-1-item-container">
                    <div class="pxp-services-1-item text-center pxp-animate-icon">
                        <div class="pxp-services-1-item-icon">
                            <img src="https://uniwolc.com/assets/images/01-making-education.png" alt="Candidate"
                                class="animate__animated animate__jackInTheBox">
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-xl-4 pxp-services-1-item-container">
                    <div class="pxp-services-1-item text-center pxp-animate-icon">
                        <div class="pxp-services-1-item-icon">
                            <img src="https://uniwolc.com/assets/images/02-making-education.png" alt="Employer" class="">
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-xl-4 pxp-services-1-item-container">
                    <div class="pxp-services-1-item text-center pxp-animate-icon">
                        <div class="pxp-services-1-item-icon">
                            <img src="https://uniwolc.com/assets/images/03-making-education.png" alt="Press" class="">
                        </div>
                        
                    </div>
                </div>
                <center>
                    <div class="pxp-info-caption-cta">
                        <a href="{{ route('ourstory') }}" class="btn rounded-pill pxp-section-cta">See More Posts
                        </a>        
                    </div>
                </center>
            </div>
        </div>
    </section> -->

<style type="text/css">
    .pxp-services-1-item-icon img {
        width: 100%;
        height: 300px !important;
    }
</style>

<section class="mt-100">
    <div class="pxp-container">
        <h1 class="text-center">We’re Passionate About Making Education <br> Accessible for Everyone</h1>
        <div class="row justify-content-evenly mt-4 mt-md-5 pxp-animate-in pxp-animate-in-top pxp-in">
            <div class="col-lg-4 col-xl-4">
                <a href="javascript:void(0);" data-toggle="modal" data-target="#exampleModal">
                    <img src="https://uniwolc.com/assets/images/01-making-education.png" alt="Candidate" style="width:100%">
                </a>

            </div>
            <div class="col-lg-4 col-xl-4 ">

                <a href="javascript:void(0);" data-toggle="modal" data-target="#exampleModal">
                    <img src="https://uniwolc.com/assets/images/02-making-education.png" alt="Employer" style="width:100%">
                </a>

            </div>
            <div class="col-lg-4 col-xl-4">

                <a href="javascript:void(0);" data-toggle="modal" data-target="#exampleModal">
                    <img src="https://uniwolc.com/assets/images/03-making-education.png" alt="Press" style="width:100%">
                </a>

            </div>
            <center>
                <div class="pxp-info-caption-cta">
                    <a href="{{ route('ourstory') }}" class="btn rounded-pill pxp-section-cta">Our Story
                    </a>
                </div>
            </center>
        </div>
    </div>
</section>




@endsection