@extends('client.raffles.layouts.app')
@section('content')
    <section class="career">
        <div class="p-20 ">
            <div class="h-175 rounded-10 bg-after relative">
                <img class="h-full w-full rounded-30 object-cover" src="{{ asset($page->banner) }}" alt="">
            </div>


        </div>

        <section class="section ">
            <div class="flex flex-col gap-5 justify-center items-center text-center">
                <h2 class="text-60 md:text-30 text-sec">CSR</h2>
                <div class="title-line mx-auto"></div>


            </div>
        </section>
        <section class=" about-page">
            <div class="container">
                <div class="ceo-container">

                    <div class="content-wrapper">
                        <div class="image-section">
                            <div class="image-frame">
                                <img src="{{ asset($page->image) }}" alt="" class="ceo-image">

                            </div>
                        </div>
                        <div class="message-section">
                            <div class="accent-line"></div>
                            <div class="quote-mark">"</div>


                            <h2 class="heading">{{$page->short_description}}</h2>

                            <p class="message">
                                {!! $page->description !!}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- <div class="row items-center">
                                                                        <div class="col col-12 col-md-6">
                                                                            <div class="flex flex-wrap mr-120 ml-40 lg:m-0">

                                                                                <div class="mb-20 relative">
                                                                                    <h2 class="ld-fh-element inline-block relative lqd-highlight-classic lqd-highlight-grow-left mt-0/5em mb-0 md:text-20 font-bold w-full"
                                                                                        data-inview="true" data-transition-delay="true"
                                                                                        data-delay-options='{"elements": ".lqd-highlight-inner", "delayType": "transition"}'>
                                                                                        <span>Your Trusted Study Abroad
                                                                                        </span>
                                                                                        <mark class="lqd-highlight"><span class="lqd-highlight-txt">Partner.</span>
                                                                                            <span class="left-0 bottom-10  lqd-highlight-inner"></span></mark>
                                                                                    </h2>
                                                                                </div>
                                                                                <div class="mb-20 ld-fancy-heading relative">
                                                                                    <p class="leading-25 ld-fh-element inline-block relative mb-0/5em">
                                                                                        We’re more than just a consultancy—we’re your ultimate study abroad ally! With years of
                                                                                        experience and a passion for helping students succeed, we’ve guided thousands of
                                                                                        students to their dream universities across the globe. Your dreams are our mission
                                                                                    </p>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                          <div class="col col-12 col-md-6 p-0">
                                                                            <div class="module-section flex items-center justify-center transition-all p-20 lg:p-0">
                                                                                <div class="flex items-center justify-center bg-center bg-no-repeat bg-contain" style="
                        background-image: url('assets/images/demo/start-hub-1/shape-ellipse.png');
                      ">
                                                                                    <div class="lqd-imggrp-single block relative " data-float="ease-in-out">
                                                                                        <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
                                                                                            <figure class="w-full relative">
                                                                                                <img width="450" height="450" src="assets/images/general/about-banner.png"
                                                                                                    alt="text box image" />
                                                                                            </figure>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        </div> -->
            </div>
        </section>




        <section class="section ">
            <div class="container">
                <h2 class="text-60 md:text-30 text-brand text-center">Blogs</h2>
            </div>
        </section>

        <section class="lqd-section  pt-40 pb-30">
            <div class="container">
                <div class="swiper mySwiper-img">
                    <div class="swiper-wrapper">
                        @foreach ($blogs as $blog)
                            <div class="swiper-slide ">
                                <a class="h-full w-full relative bg-dark-before" href="blog-detail.php"> <img
                                        class="rounded-30" src="{{ route('blog.single', $blog->slug) }}" alt="">
                                    <div class="absolute left-5percent bottom-20">
                                        <h3 class="text-white text-20">{{ $blog->title }}</h3>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>

            </div>
        </section>
        <section class="section ">
            <div class="container">
                <h2 class="text-60 md:text-30 text-brand text-center">Gallery</h2>
                <!-- <img class="w-20percent" src="assets/images/icons/line.png" alt=""> -->


            </div>
        </section>

        <section class="lqd-section  pt-40 pb-30">
            <div class="container">



                <div class="swiper mySwiper-img">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"> <img class="rounded-10" src="assets/images/general/about-banner.png"
                                alt=""></div>
                        <div class="swiper-slide"> <img class="rounded-10" src="assets/images/general/about-banner.png"
                                alt=""></div>
                        <div class="swiper-slide"> <img class="rounded-10" src="assets/images/general/about-banner.png"
                                alt=""></div>
                        <div class="swiper-slide"> <img class="rounded-10" src="assets/images/general/about-banner.png"
                                alt=""></div>
                        <div class="swiper-slide"> <img class="rounded-10" src="assets/images/general/about-banner.png"
                                alt=""></div>
                        <div class="swiper-slide"> <img class="rounded-10" src="assets/images/general/about-banner.png"
                                alt=""></div>
                        <div class="swiper-slide"> <img class="rounded-10" src="assets/images/general/about-banner.png"
                                alt=""></div>
                        <div class="swiper-slide"> <img class="rounded-10" src="assets/images/general/about-banner.png"
                                alt=""></div>
                        <div class="swiper-slide"> <img class="rounded-10" src="assets/images/general/about-banner.png"
                                alt=""></div>
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                </div>
            </div>
        </section>





    </section>
@endsection