@extends('layouts.app')



@section('style')
    <style>
        .section-title__title {
            color: var(--anity-black);
            font-size: 40px;
            line-height: 1.2em;
            font-weight: 700;
            letter-spacing: -.04em;
            margin: 9px 0 0;
            font-weight: 500;
        }
    </style>
@endsection


@section('content')
    <div class="custom-cursor">


        @include('layouts.components.cursor-and-preloader')
        <!-- /cursor and preloader -->




        <div class="page-wrapper">


            @include('layouts.header')

            <div class="stricky-header stricked-menu main-menu main-menu-two">
                <div class="sticky-header__content"></div>
                <!-- /.sticky-header__content -->
            </div>

            <!-- /.stricky-header -->



            {{-- page header --}}

            {{-- @include('layouts.components.page-header', [
                'page_title' => 'about us',
            ]) --}}


            <!--About One Start -->
            <section class="about-One" style="padding-top:50px; padding-bottom:100px;">
                <h1 class="mb-5 text-center heading" style="font-weight: 700;">Nabir Foundation - A Nonprofit Charity
                    Organisation</h1>


                <div class="container">
                    <div class="row">
                        <div class="col-xl-6">
                            <div class="about-One__left  wow slideInLeft" data-wow-delay="100ms" data-wow-duration="2500ms">
                                <div class="about-One__img-box">
                                    <div class="about-One__img">
                                        <img src="{{ asset('assets/imgs/media/Support-Orphans-through-nabir-foundation10.webp') }}"
                                            alt="Support Orphans through nabir foundation">
                                    </div>
                                    <div class="about-One__img-2">
                                        <img src="{{ asset('assets/imgs/resources/Charity-Organisation-in-London-UK.webp') }}"
                                            alt="Charity Organisation in London UK">
                                    </div>
                                    <div class="about-One__provide-box wow zoomIn animated animated" data-wow-delay="500ms"
                                        data-wow-duration="2500ms">
                                        <div class="about-One__provide-icon">
                                            <span class="icon-pet-care"></span>
                                        </div>
                                        <div class="about-One__provide-content">
                                            <div class="about-One__provide-count count-box">
                                                <h3 class="count-text" data-stop="250" data-speed="1500">00</h3>
                                                <span>+</span>
                                            </div>
                                            <p class="about-One__provide-count-text">Family We Serve</p>
                                        </div>
                                    </div>
                                    <div class="about-One__shape-1"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6">
                            <div class="about-One__right wow fadeInRight" data-wow-delay="300ms">
                                <div class="section-title text-left sec-title-animation animation-style2">




                                    <h2 class="section-title__title title-animation mb-2">One Step of Kindness, <br> A
                                        Lifetime
                                        of Change
                                    </h2>
                                    <div class="section-title__tagline-box">
                                        <span style="color: var(--anity-base);">A Helping Hand in Need is a Helping Hand
                                            Indeed</span>
                                    </div>
                                </div>
                                <div class="about-One__vission-mission">
                                    <div class="about-One__tab-box tabs-box">
                                        <ul class="tab-buttons clearfix list-unstyled">
                                            <li data-tab="#mission" class="tab-btn active-btn"><span>Our Mission</span>
                                            </li>
                                            <li data-tab="#vission" class="tab-btn"><span>Our Vision</span></li>
                                            <li data-tab="#goal" class="tab-btn"><span>Our Goal</span></li>
                                        </ul>
                                        <div class="tabs-content">
                                            <!--tab-->
                                            <div class="tab active-tab" id="mission">
                                                <div class="tabs-content__inner">
                                                    <p>Our mission is to give orphans a safe home, quality education,
                                                        healthcare, and lifelong guidance so that they can grow with dignity
                                                        and hope.
                                                        We also support vulnerable families by building homes, and ensuring
                                                        clean water through tube well donations.
                                                    </p>
                                                </div>
                                            </div>
                                            <!--tab-->

                                            <!--tab-->
                                            <div class="tab" id="vission">
                                                <div class="tabs-content__inner">
                                                    <p>Our vision is a world where no child is left abandoned, every family
                                                        has a roof to sleep under, and every community has access to clean,
                                                        safe drinking water.
                                                    </p>
                                                </div>
                                            </div>
                                            <!--tab-->

                                            <!--tab-->
                                            <div class="tab" id="goal">
                                                <div class="tabs-content__inner">
                                                    <ul style="padding-left:2rem;">
                                                        <li style="list-style-type: disc;">Provide lifelong care and
                                                            education for orphans.</li>
                                                        <li style="list-style-type: disc;">Build safe homes for families
                                                            with nothing.</li>
                                                        <li style="list-style-type: disc;">Install hand pumps to bring clean
                                                            water to rural communities.
                                                        </li>
                                                        <li style="list-style-type: disc;">Supporting education and Marriage
                                                            Opportunities for Women.</li>

                                                    </ul>
                                                </div>
                                            </div>
                                            <!--tab-->
                                        </div>
                                    </div>
                                </div>
                                <div class="about-One__btn-and-need-help">
                                    <div class="donation-one__btn-box">
                                        <a href="{{ route('donation-details') }}" class="donation-one__btn thm-btn unq-3">Donate
                                            Now<span><i class="icon-arrow-right"></i></span></a>
                                    </div>


                                    {{-- <div class="about-One__need-help">
                                        <div class="icon">
                                            <span class="icon-phone-call"></span>
                                        </div>
                                        <div class="content">
                                            <p>Need help?</p>
                                            <h4>
                                                <a target="_blank" href="tel:+447708971995">+44 7708 971995
                                                </a>
                                            </h4>
                                        </div>
                                    </div> --}}


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--About One End -->




            <!--Found One Start -->
            {{-- <section class="found-one">
                <div class="found-one__bg">
                    <div class="found-one__shape-1 float-bob-y">
                        <img src="assets/images/shapes/found-one-shape-1.png" alt="">
                    </div>
                </div>
                <div class="container">
                    <div class="section-title text-center sec-title-animation animation-style1">
                        <div class="section-title__tagline-box">
                            <span class="section-title__tagline">Charity Fund</span>
                        </div>
                        <h2 class="section-title__title title-animation">Helping to <span>Make</span> Our World <br> a
                            Better Place
                        </h2>
                    </div>
                    <div class="row">
                        <!--Found One Single Start-->
                        <div class="col-xl-4 col-lg-4 wow fadeInLeft" data-wow-delay="100ms">
                            <div class="found-one__single">
                                <div class="found-one__img-box">
                                    <div class="found-one__img">
                                        <img src="assets/images/resources/found-1-1.jpg" alt="">
                                        <img src="assets/images/resources/found-1-1.jpg" alt="">
                                    </div>
                                </div>
                                <div class="found-one__content">
                                    <h4 class="found-one__title"><a href="{{ route('donation-details') }}"> Transform
                                            Orphanage Lives
                                        </a>
                                    </h4>
                                    <p class="found-one__text">Your one pound - gives shelters, feeds, and protects orphans.
                                        Turning small kindness into endless hope today
                                    </p>
                                    <div class="found-one__goals">
                                        <div class="found-one__raised">
                                            <p>Raised</p>
                                            <span><i class="fas fa-pound-sign"></i>40,802</span>
                                        </div>
                                        <div class="found-one__raised">
                                            <p>Goal</p>
                                            <span><i class="fas fa-pound-sign"></i>100,000</span>
                                        </div>
                                    </div>
                                    <div class="found-one__progress">
                                        <div class="bar">
                                            <div class="bar-inner count-bar" data-percent="75%">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="found-one__btn-box">
                                        <a href="{{ route('donation-details') }}" class="found-one__btn thm-btn">Donate
                                            Now<span><i class="icon-arrow-right"></i></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Found One Single End-->
                        <!--Found One Single Start-->
                        <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="200ms">
                            <div class="found-one__single">
                                <div class="found-one__img-box">
                                    <div class="found-one__img">
                                        <img src="assets/images/resources/found-1-2.jpg" alt="">
                                        <img src="assets/images/resources/found-1-2.jpg" alt="">
                                    </div>
                                </div>
                                <div class="found-one__content">
                                    <h4 class="found-one__title"><a href="{{ route('donation-details') }}">Shelter for
                                            Homeless</a></h4>
                                    <p class="found-one__text">A roof means safety, dignity, and life. Help us build
                                        shelter for those forgotten by society. One gift changes everything.</p>
                                    <div class="found-one__goals">
                                        <div class="found-one__raised">
                                            <p>Raised</p>
                                            <span><i class="fas fa-pound-sign"></i>40,802</span>
                                        </div>
                                        <div class="found-one__raised">
                                            <p>Goal</p>
                                            <span><i class="fas fa-pound-sign"></i>100,000</span>
                                        </div>
                                    </div>
                                    <div class="found-one__progress">
                                        <div class="bar">
                                            <div class="bar-inner count-bar" data-percent="75%">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="found-one__btn-box">
                                        <a href="{{ route('donation-details') }}" class="found-one__btn thm-btn">Donate
                                            Now<span><i class="icon-arrow-right"></i></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Found One Single End-->
                        <!--Found One Single Start-->
                        <div class="col-xl-4 col-lg-4 wow fadeInRight" data-wow-delay="300ms">
                            <div class="found-one__single">
                                <div class="found-one__img-box">
                                    <div class="found-one__img">
                                        <img src="assets/images/resources/found-1-3.jpg" alt="">
                                        <img src="assets/images/resources/found-1-3.jpg" alt="">
                                    </div>
                                </div>
                                <div class="found-one__content">
                                    <h4 class="found-one__title"><a href="{{ route('donation-details') }}">Education for
                                            People
                                        </a></h4>
                                    <p class="found-one__text">Education breaks poverty’s cycle. Your support buys books,
                                        teachers, and hope for children who dream beyond hunger and struggle.
                                    </p>
                                    <div class="found-one__goals">
                                        <div class="found-one__raised">
                                            <p>Raised</p>
                                            <span><i class="fas fa-pound-sign"></i>40,802</span>
                                        </div>
                                        <div class="found-one__raised">
                                            <p>Goal</p>
                                            <span><i class="fas fa-pound-sign"></i>100,000</span>
                                        </div>
                                    </div>
                                    <div class="found-one__progress">
                                        <div class="bar">
                                            <div class="bar-inner count-bar" data-percent="75%">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="found-one__btn-box">
                                        <a href="{{ route('donation-details') }}" class="found-one__btn thm-btn">Donate
                                            Now<span><i class="icon-arrow-right"></i></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Found One Single End-->
                    </div>
                </div>
            </section> --}}
            <!--Found One End -->


            @include('layouts.footer')


        </div>
    @endsection