@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;">
                            Uniwolc Blog</span>
                        </h1>
                        
                        <div class="pxp-hero-subtitle mt-3 mt-lg-4">
                            Tips, Advice, And Updates To Help You Across Every Step Of The Study Abroad Journey.
                        </div>

                        <div class="mt-5">
                            <a href="#" class="btn rounded-pill pxp-section-cta um-explore-program-hero-section-cta">View All Articles</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" style="transform: translateY(1.22812px) translateX(-1.625px);">
                            <div class="pxp-hero-card pxp-cover pxp-cover-top pxp-animate" style="background-image: url(https://dev.uniwolc.com/public/images/our-news-main.jpg);width:500px !important"></div>
                            <div class="pxp-hero-card-dark pxp-animate"></div>
                            <div class="pxp-hero-card-light pxp-animate"></div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="pxp-hero-right-bg-card pxp-has-animation" style="background-color: #ff913f !important;"></div>
    </section>
    
@endsection