@extends('layouts.app')

@section('style')
    <style>
        section.about-three {
            padding-top: 11rem !important;
            padding-bottom: 4rem !important;
        }

        section.mission-one {
            padding-top: 9rem !important;
            padding-bottom: 0rem !important;
        }

        section.donation-one.impact {
            padding-top: 3rem !important;
            padding-bottom: 0rem !important;
        }

        section.donate-one.how-can-join {
            padding-top: 5rem !important;
            padding-bottom: 4rem !important;
        }

        @media (max-width:768px) {
            section.mission-one {
                padding-top: 2rem !important;
                padding-bottom: 0rem !important;
            }
        }

        .single-mission-one {

            min-height: 341px;
        }
    </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 -->



            @include('layouts.components.hero-slider', [
                'sliders' => [
                    [
                        'image_path' => 'assets/imgs/slider/shelter/shelter-for-orphans-1.webp',
                        'heading' => 'A Roof of Hope',
                        'description' => 'Because every human deserves a safe place to call home.',
                    ],
                    [
                        'image_path' => 'assets/imgs/slider/shelter/shelter-for-orphans-2.webp',
                        'heading' => 'Restoring Dignity Through Shelter',
                        'description' => 'Providing a Safe Shelter and Dignity to Those in Need.',
                    ],
                    [
                        'image_path' => 'assets/imgs/slider/shelter/shelter-for-orphans-3.webp',
                        'heading' => 'Every Life Deserves Safety',
                        'description' => 'Giving Every Person the Comfort and Safety They Deserve.',
                    ],
                ],
            ])



            {{-- about us section start here --}}
            <section class="about-three">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-6 wow slideInLeft animated" data-wow-delay="100ms" data-wow-duration="2500ms"
                            style="visibility: visible; animation-duration: 2500ms; animation-delay: 100ms; animation-name: slideInLeft;">
                            <div class="about-three__left">
                                <div class="about-three__img-box">
                                    <div class="about-three__img">
                                        <img src="{{ asset('assets/imgs/resources/roof-about.webp') }}"
                                            alt="A Roof of Hope A Home of Care">
                                    </div>
                                    <div class="about-three__shape-3">
                                        <div class="about-three__shape-4">
                                            <img src="{{ asset('assets/imgs/shapes/about-three-shape-4.png') }}"
                                                alt="roof about">
                                        </div>
                                    </div>
                                    <div class="about-three__shape-1">
                                        <img src="{{ asset('assets/imgs/shapes/about-three-shape-1.png') }}"
                                            alt="roof about">
                                    </div>
                                    <div class="about-three__shape-2">
                                        <img
                                            src="{{ asset('assets/imgs/shapes/about-three-shape-2.png') }}"alt="roof about">
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6">
                            <div class="about-three__right">
                                <div class="section-title text-left sec-title-animation animation-style2">

                                    <h1 class="section-title__title title-animation" style="perspective: 400px;">
                                        <div class="split-line"
                                            style="display: block; text-align: start; position: relative;">
                                            A Roof of Hope, A Home of Care
                                        </div>
                                    </h1>
                                </div>
                                <p class="about-three__text">For the homeless and vulnerable, shelter is the first step
                                    towards rebuilding life. Your support helps us create safe spaces filled with dignity
                                    and love. Your support helps us provide safe, welcoming spaces where hope is restored,
                                    love is shared, and every person is given a chance to start again.
                                </p>
                                <ul class="about-three__points list-unstyled">
                                    <li>
                                        <div class="icon">
                                            <span class="icon-check"></span>
                                        </div>
                                        <p>Protecting Lives, One Home at a Time</p>
                                    </li>
                                    <li>
                                        <div class="icon">
                                            <span class="icon-check"></span>
                                        </div>
                                        <p>Together Against Homelessness</p>
                                    </li>
                                    <li>
                                        <div class="icon">
                                            <span class="icon-check"></span>
                                        </div>
                                        <p>Hope Begins with Shelter</p>
                                    </li>
                                </ul>
                                <div class="about-three__btn-and-need-help">
                                   <div class="donation-one__btn-box">
                                        <a href="https://campaigns.givebrite.com/nabir-foundation-orphanage" target="_blank"" class="donation-one__btn thm-btn unq-3">Donate
                                            Now<span><i class="icon-arrow-right"></i></span></a>
                                    </div>
                                    {{-- <div class="about-three__need-help">
                                        <div class="about-three__need-help-icon">
                                            <span class="icon-phone-call"></span>
                                        </div>
                                        <div class="content">
                                            <span>Need help?</span>
                                            <p><a href="tel:+44708971995">+44 7708 971995</a></p>
                                        </div>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            {{-- about us section end here --}}




            {{--  how you help us section start here --}}
            <section class="mission-one">
                <div class="container">
                    <div class="section-title text-center sec-title-animation animation-style2">

                        <h2 class="section-title__title title-animation" style="perspective: 400px;">
                            <div class="split-line" style="display: block; text-align: center; position: relative;">
                                How You Help Us
                            </div>
                        </h2>
                    </div>

                    <div class="row">

                        <!-- Single Mission One Start -->
                        <div class="col-xl-4">
                            <div class="single-mission-one">
                                <div class="icon-box">
                                    <div class="inner-box pe-3">
                                        <i class="fa-solid fa-hand-holding-heart"></i>
                                    </div>
                                </div>
                                <div class="content-box">
                                    <div class="text">
                                        <h3>Donate for Orphans</h3>
                                        <p>Your one donation can feed a child, shelter a family, and bring hope to the
                                            hopeless. Small giving, endless impact
                                        </p>
                                    </div>
                                    <div class="donation-one__btn-box">
                                        <a href="https://campaigns.givebrite.com/nabir-foundation-orphanage" target="_blank" class="donation-one__btn thm-btn unq-3">Donate
                                            Now<span><i class="icon-arrow-right"></i></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Single Mission One End -->


                        <!-- Single Mission One Start -->
                        <div class="col-xl-4">
                            <div class="single-mission-one">
                                <div class="icon-box">
                                    <div class="inner-box pe-3">
                                        <i class="fa-solid fa-people-roof"></i>
                                    </div>
                                </div>
                                <div class="content-box">
                                    <div class="text">
                                        <h3>
                                            Shelter for Unprivileged</h3>
                                        <p>A roof means safety, dignity, and life. Help us build shelter for those forgotten
                                            by society. One gift changes everything.
                                        </p>
                                    </div>
                                    <div class="donation-one__btn-box">
                                        <a href="https://campaigns.givebrite.com/nabir-foundation-orphanage" target="_blank" class="donation-one__btn thm-btn unq-3">Donate
                                            Now<span><i class="icon-arrow-right"></i></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Single Mission One End -->




                        <!-- Single Mission One Start -->
                        {{-- <div class="col-xl-4">
                            <div class="single-mission-one">
                                <div class="icon-box">
                                    <div class="inner-box pe-3">
                                        <i class="fa-solid fa-graduation-cap"></i>
                                    </div>
                                </div>
                                <div class="content-box">
                                    <div class="text">
                                        <h3>Educate Orphans</h3>
                                        <p>Education breaks poverty’s cycle. Your support buys books, teachers, and hope for
                                            children who dream beyond hunger and struggle.</p>
                                    </div>
                                    <div class="btn-box">
                                        <a href="{{ route('donation-details') }}" class="thm-btn">
                                            Donate Now
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                        <!-- Single Mission One End -->


                        <!-- Single Mission One Start -->
                        <div class="col-xl-4">
                            <div class="single-mission-one">
                                <div class="icon-box">
                                    <div class="inner-box pe-3">
                                        <i class="fa-solid fa-people-roof"></i>
                                    </div>
                                </div>
                                <div class="content-box">
                                    <div class="text">
                                        <h3>
                                            Home for Orphans</h3>
                                        <p>Every family deserves warmth and security. With your help, we provide homes to
                                            the helpless, turning despair into dignity.
                                        </p>
                                    </div>
                                    <div class="donation-one__btn-box">
                                        <a href="https://campaigns.givebrite.com/nabir-foundation-orphanage" target="_blank" class="donation-one__btn thm-btn unq-3">Donate
                                            Now<span><i class="icon-arrow-right"></i></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Single Mission One End -->



                        <div class="col-xl-2"></div>
                        <!-- Single Mission One Start -->
                        <div class="col-xl-4">
                            <div class="single-mission-one">
                                <div class="icon-box">
                                    <div class="inner-box pe-3">
                                        <i class="fa-solid fa-handshake"></i>
                                    </div>
                                </div>
                                <div class="content-box">
                                    <div class="text">
                                        <h3> Make World Happier
                                        </h3>
                                        <p>A kinder world begins with us. One act of giving can bring smiles, shelter, and
                                            hope to countless lives.

                                        </p>
                                    </div>
                                    <div class="donation-one__btn-box">
                                        <a href="https://campaigns.givebrite.com/nabir-foundation-orphanage" target="_blank" class="donation-one__btn thm-btn unq-3">Donate
                                            Now<span><i class="icon-arrow-right"></i></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Single Mission One End -->
                        <!-- Single Mission One Start -->
                        <div class="col-xl-4">
                            <div class="single-mission-one">
                                <div class="icon-box">
                                    <div class="inner-box pe-3">
                                        <i class="fa-solid fa-seedling"></i>
                                    </div>
                                </div>
                                <div class="content-box">
                                    <div class="text">
                                        <h3>Charity For Education</h3>
                                        <p>Knowledge is power, and education is hope. Your donation gives children the tools
                                            to rise above poverty and hardship.
                                        </p>
                                    </div>
                                    <div class="donation-one__btn-box">
                                        <a href="https://campaigns.givebrite.com/nabir-foundation-orphanage" target="_blank"" class="donation-one__btn thm-btn unq-3">Donate
                                            Now<span><i class="icon-arrow-right"></i></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Single Mission One End -->
                        <div class="col-xl-2"></div>

                    </div>

                </div>
            </section>
            {{--  how you help us section end here --}}




            {{-- impact section start here --}}
            @include('layouts.components.impact', [
                'heading' => 'Helping to Make Our World a Better Place to Live',
                'description' => 'At Nabir Foundation, we believe every person deserves dignity,
                                                                                                                        safety, and the opportunity to thrive. Through our orphan care, shelter projects, and
                                                                                                                        community support, we are working to create a brighter, kinder world. With your help, we
                                                                                                                        can extend hope, provide protection, and build a future where no one is left behind.',
            ])
            {{-- impact section end here --}}

            <!--Donate One Start -->
            @include('layouts.components.donation', [
                'heading' => 'Support Them Through a Donation',
                'description' =>
                    'Your generosity can transform lives. A small contribution can provide food, shelter, and education for those who need it most. Every donation, big or small, is a step towards giving a child warmth, security, and the chance to dream again. Together, we can turn compassion into action.',
            ])
            <!--Donate One End -->


            @include('layouts.components.cta')



            @include('layouts.footer')


        </div>
    @endsection