@extends('frontend.layouts.app')
@section('title', 'Our Causes')
@section('content')
    <!-- ============================ header area ============================ -->
    @include('frontend.includes.headers.headerOne')
    <!-- ============================ header area end ============================ -->

    <!-- ==== banner section start ==== -->
    <section class="common-banner">
        <div class="container">
            <div class="row">
                <div class="common-banner__content text-center">
                    <span class="sub-title"><i class="icon-donation"></i>Start donating poor people</span>
                    <h2 class="title-animation">Our Causes</h2>
                </div>
            </div>
        </div>
        <div class="banner-bg">
            <img src="{{ asset('assets/images/banner/banner-bg.png') }}" alt="Image">
        </div>
        <div class="shape">
            <img src="{{ asset('assets/images/shape.png') }}" alt="Image">
        </div>
        <div class="sprade" data-aos="zoom-in" data-aos-duration="1000">
            <img src="{{ asset('assets/images/sprade-base.png') }}" alt="Image" class="base-img">
        </div>
    </section>
    <!-- ==== / banner section end ==== -->
    <!-- ==== cause slider section start ==== -->
    <section class="cause cause-three-alt">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-8 col-xl-7">
                    <div class="section__header mb-60 text-center" data-aos="fade-up" data-aos-duration="1000">
                        <span class="sub-title"><i class="icon-donation"></i>Start donating poor
                            people</span>
                        <h2 class="title-animation">Be the reason of someone
                            <span>smiles</span> Causes
                        </h2>
                    </div>
                </div>
            </div>
            <div class="row gutter-30">
                <div class="col-12 col-md-6 col-xl-4 col-xxl-3">
                    <div class="cause__slider-inner" data-aos="fade-up" data-aos-duration="1000">
                        <div class="cause__slider-single van-tilt">
                            <div class="thumb">
                                <a href="{{ route('cause.details') }}">
                                    <img src="{{ asset('assets/images/cause/one.png') }}" alt="Image">
                                </a>
                                <div class="tag">
                                    <a href="{{ route('our.causes') }}">Health</a>
                                </div>
                            </div>
                            <div class="content">
                                <h6><a href="{{ route('cause.details') }}">Children we work with</a></h6>
                                <p>Lorem ipsum dolor sit amet, consete
                                    sadipscing elitr, sed diam nonum
                                </p>
                            </div>
                            <div class="cause__slider-cta">
                                <div class="cause__progress progress-bar-single">
                                    <div class="cause-progress__intro">
                                        <p><span>Donation</span>
                                            <span class="percent-value">85%</span>
                                        </p>
                                    </div>
                                    <div class="cause-progress__bar">
                                        <div class="progress-bar-wrapper" data-percent="85%">
                                            <div class="progress-bar">
                                                <div class="progress-bar-percent">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cause-progress__goal">
                                        <p>Raised: <span class="raised">$8500</span></p>
                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                    </div>
                                </div>
                                <div class="cause__cta">
                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                        class="btn--secondary">Donate Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4 col-xxl-3">
                    <div class="cause__slider-inner" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
                        <div class="cause__slider-single van-tilt">
                            <div class="thumb">
                                <a href="{{ route('cause.details') }}">
                                    <img src="{{ asset('assets/images/cause/two.png') }}" alt="Image">
                                </a>
                                <div class="tag">
                                    <a href="{{ route('our.causes') }}">Food</a>
                                </div>
                            </div>
                            <div class="content">
                                <h6><a href="{{ route('cause.details') }}">Help For Education</a></h6>
                                <p>Lorem ipsum dolor sit amet, consete
                                    sadipscing elitr, sed diam nonum
                                </p>
                            </div>
                            <div class="cause__slider-cta">
                                <div class="cause__progress progress-bar-single">
                                    <div class="cause-progress__intro">
                                        <p><span>Donation</span>
                                            <span class="percent-value">90%</span>
                                        </p>
                                    </div>
                                    <div class="cause-progress__bar">
                                        <div class="progress-bar-wrapper" data-percent="90%">
                                            <div class="progress-bar">
                                                <div class="progress-bar-percent">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cause-progress__goal">
                                        <p>Raised: <span class="raised">$8500</span></p>
                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                    </div>
                                </div>
                                <div class="cause__cta">
                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                        class="btn--secondary">Donate Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4 col-xxl-3">
                    <div class="cause__slider-inner" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600">
                        <div class="cause__slider-single van-tilt">
                            <div class="thumb">
                                <a href="{{ route('cause.details') }}">
                                    <img src="{{ asset('assets/images/cause/three.png') }}" alt="Image">
                                </a>
                                <div class="tag">
                                    <a href="{{ route('our.causes') }}">Health</a>
                                </div>
                            </div>
                            <div class="content">
                                <h6><a href="{{ route('cause.details') }}">Help For Food</a></h6>
                                <p>Lorem ipsum dolor sit amet, consete
                                    sadipscing elitr, sed diam nonum
                                </p>
                            </div>
                            <div class="cause__slider-cta">
                                <div class="cause__progress progress-bar-single">
                                    <div class="cause-progress__intro">
                                        <p><span>Donation</span>
                                            <span class="percent-value">75%</span>
                                        </p>
                                    </div>
                                    <div class="cause-progress__bar">
                                        <div class="progress-bar-wrapper" data-percent="75%">
                                            <div class="progress-bar">
                                                <div class="progress-bar-percent">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cause-progress__goal">
                                        <p>Raised: <span class="raised">$8500</span></p>
                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                    </div>
                                </div>
                                <div class="cause__cta">
                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                        class="btn--secondary">Donate Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4 col-xxl-3">
                    <div class="cause__slider-inner" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="900">
                        <div class="cause__slider-single van-tilt">
                            <div class="thumb">
                                <a href="{{ route('cause.details') }}">
                                    <img src="{{ asset('assets/images/cause/four.png') }}" alt="Image">
                                </a>
                                <div class="tag">
                                    <a href="{{ route('our.causes') }}">Food</a>
                                </div>
                            </div>
                            <div class="content">
                                <h6><a href="{{ route('cause.details') }}">Give health support</a></h6>
                                <p>Lorem ipsum dolor sit amet, consete
                                    sadipscing elitr, sed diam nonum
                                </p>
                            </div>
                            <div class="cause__slider-cta">
                                <div class="cause__progress progress-bar-single">
                                    <div class="cause-progress__intro">
                                        <p><span>Donation</span>
                                            <span class="percent-value">65%</span>
                                        </p>
                                    </div>
                                    <div class="cause-progress__bar">
                                        <div class="progress-bar-wrapper" data-percent="65%">
                                            <div class="progress-bar">
                                                <div class="progress-bar-percent">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cause-progress__goal">
                                        <p>Raised: <span class="raised">$8500</span></p>
                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                    </div>
                                </div>
                                <div class="cause__cta">
                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                        class="btn--secondary">Donate Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4 col-xxl-3">
                    <div class="cause__slider-inner" data-aos="fade-up" data-aos-duration="1000">
                        <div class="cause__slider-single van-tilt">
                            <div class="thumb">
                                <a href="{{ route('cause.details') }}">
                                    <img src="{{ asset('assets/images/cause/one.png') }}" alt="Image">
                                </a>
                                <div class="tag">
                                    <a href="{{ route('our.causes') }}">Health</a>
                                </div>
                            </div>
                            <div class="content">
                                <h6><a href="{{ route('cause.details') }}">Children we work with</a></h6>
                                <p>Lorem ipsum dolor sit amet, consete
                                    sadipscing elitr, sed diam nonum
                                </p>
                            </div>
                            <div class="cause__slider-cta">
                                <div class="cause__progress progress-bar-single">
                                    <div class="cause-progress__intro">
                                        <p><span>Donation</span>
                                            <span class="percent-value">85%</span>
                                        </p>
                                    </div>
                                    <div class="cause-progress__bar">
                                        <div class="progress-bar-wrapper" data-percent="85%">
                                            <div class="progress-bar">
                                                <div class="progress-bar-percent">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cause-progress__goal">
                                        <p>Raised: <span class="raised">$8500</span></p>
                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                    </div>
                                </div>
                                <div class="cause__cta">
                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                        class="btn--secondary">Donate Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4 col-xxl-3">
                    <div class="cause__slider-inner" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
                        <div class="cause__slider-single van-tilt">
                            <div class="thumb">
                                <a href="{{ route('cause.details') }}">
                                    <img src="{{ asset('assets/images/cause/two.png') }}" alt="Image">
                                </a>
                                <div class="tag">
                                    <a href="{{ route('our.causes') }}">Food</a>
                                </div>
                            </div>
                            <div class="content">
                                <h6><a href="{{ route('cause.details') }}">Help For Education</a></h6>
                                <p>Lorem ipsum dolor sit amet, consete
                                    sadipscing elitr, sed diam nonum
                                </p>
                            </div>
                            <div class="cause__slider-cta">
                                <div class="cause__progress progress-bar-single">
                                    <div class="cause-progress__intro">
                                        <p><span>Donation</span>
                                            <span class="percent-value">90%</span>
                                        </p>
                                    </div>
                                    <div class="cause-progress__bar">
                                        <div class="progress-bar-wrapper" data-percent="90%">
                                            <div class="progress-bar">
                                                <div class="progress-bar-percent">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cause-progress__goal">
                                        <p>Raised: <span class="raised">$8500</span></p>
                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                    </div>
                                </div>
                                <div class="cause__cta">
                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                        class="btn--secondary">Donate Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4 col-xxl-3">
                    <div class="cause__slider-inner" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600">
                        <div class="cause__slider-single van-tilt">
                            <div class="thumb">
                                <a href="{{ route('cause.details') }}">
                                    <img src="{{ asset('assets/images/cause/three.png') }}" alt="Image">
                                </a>
                                <div class="tag">
                                    <a href="{{ route('our.causes') }}">Health</a>
                                </div>
                            </div>
                            <div class="content">
                                <h6><a href="{{ route('cause.details') }}">Help For Food</a></h6>
                                <p>Lorem ipsum dolor sit amet, consete
                                    sadipscing elitr, sed diam nonum
                                </p>
                            </div>
                            <div class="cause__slider-cta">
                                <div class="cause__progress progress-bar-single">
                                    <div class="cause-progress__intro">
                                        <p><span>Donation</span>
                                            <span class="percent-value">75%</span>
                                        </p>
                                    </div>
                                    <div class="cause-progress__bar">
                                        <div class="progress-bar-wrapper" data-percent="75%">
                                            <div class="progress-bar">
                                                <div class="progress-bar-percent">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cause-progress__goal">
                                        <p>Raised: <span class="raised">$8500</span></p>
                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                    </div>
                                </div>
                                <div class="cause__cta">
                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                        class="btn--secondary">Donate Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4 col-xxl-3">
                    <div class="cause__slider-inner" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="900">
                        <div class="cause__slider-single van-tilt">
                            <div class="thumb">
                                <a href="{{ route('cause.details') }}">
                                    <img src="{{ asset('assets/images/cause/four.png') }}" alt="Image">
                                </a>
                                <div class="tag">
                                    <a href="{{ route('our.causes') }}">Food</a>
                                </div>
                            </div>
                            <div class="content">
                                <h6><a href="{{ route('cause.details') }}">Give health support</a></h6>
                                <p>Lorem ipsum dolor sit amet, consete
                                    sadipscing elitr, sed diam nonum
                                </p>
                            </div>
                            <div class="cause__slider-cta">
                                <div class="cause__progress progress-bar-single">
                                    <div class="cause-progress__intro">
                                        <p><span>Donation</span>
                                            <span class="percent-value">65%</span>
                                        </p>
                                    </div>
                                    <div class="cause-progress__bar">
                                        <div class="progress-bar-wrapper" data-percent="65%">
                                            <div class="progress-bar">
                                                <div class="progress-bar-percent">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cause-progress__goal">
                                        <p>Raised: <span class="raised">$8500</span></p>
                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                    </div>
                                </div>
                                <div class="cause__cta">
                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                        class="btn--secondary">Donate Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="pagination-wrapper" data-aos="fade-up" data-aos-duration="1000">
                        <ul class="pagination main-pagination">
                            <li>
                                <button>
                                    <i class="fa-solid fa-angles-left"></i>
                                </button>
                            </li>
                            <li>
                                <a href="{{ route('blog') }}">1</a>
                            </li>
                            <li>
                                <a href="{{ route('blog') }}" class="active">2</a>
                            </li>
                            <li>
                                <a href="{{ route('blog') }}">3</a>
                            </li>
                            <li>
                                <button>
                                    <i class="fa-solid fa-angles-right"></i>
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="spade">
            <img src="{{ asset('assets/images/help/spade.png') }}" alt="Image">
        </div>
    </section>
    <!-- ==== / cause slider section end ==== -->
    <!-- ==== cta section start ==== -->
    <section class="cta-section-two">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-7">
                    <div class="cta__section__content">
                        <div class="section__content text-center" data-aos="fade-up" data-aos-duration="1000">
                            <span class="sub-title"><i class="icon-donation"></i>Start donating poor
                                people</span>
                            <h2 class="title-animation">children need your help
                                by donating today
                            </h2>
                            <div class="banner__content-cta cta">
                                <a href="{{ route('our.causes') }}" aria-label="about us" title="about us"
                                    class="btn--tertiary">Discover More <i class="fa-solid fa-arrow-right"></i></a>
                                <a href="{{ route('contact') }}" aria-label="contact us" title="contact us"
                                    class="btn--primary">Get
                                    A Quote <i class="fa-solid fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cta-bg">
            <img src="{{ asset('assets/images/cta/cta-bg.png') }}" alt="Image" class="parallax-image">
        </div>
        <div class="shape-left" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="300">
            <img src="{{ asset('assets/images/cta/shape-left.png') }}" alt="Image">
        </div>
        <div class="shape">
            <img src="{{ asset('assets/images/shape-two.png') }}" alt="Image">
        </div>
    </section>
    <!-- ==== / cta section end ==== -->
    <!-- ==== cause slider section start ==== -->
    <section class="cause cause-three">
        <div class="container">
            <div class="row gutter-30 align-items-center">
                <div class="col-12 col-md-8 col-xl-7">
                    <div class="section__header">
                        <span class="sub-title"><i class="icon-donation"></i>Start donating poor
                            people</span>
                        <h2 class="title-animation">Help & <span>donate</span> them when
                            they're in need
                        </h2>
                    </div>
                </div>
                <div class="col-12 col-md-4 col-xl-5">
                    <div class="slider-navigation">
                        <button type="button" aria-label="prev slide" title="prev slide" class="prev-cause slider-btn">
                            <i class="fa-solid fa-arrow-left"></i>
                        </button>
                        <button type="button" aria-label="next slide" title="next slide"
                            class="next-cause slider-btn slider-btn-next">
                            <i class="fa-solid fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="cause__slider-wrapper">
                        <div class="cause__slider swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="cause__slider-inner">
                                        <div class="cause__slider-single">
                                            <div class="thumb">
                                                <a href="{{ route('cause.details') }}">
                                                    <img src="{{ asset('assets/images/cause/one.png') }}" alt="Image">
                                                </a>
                                                <div class="tag">
                                                    <a href="{{ route('our.causes') }}">Health</a>
                                                </div>
                                            </div>
                                            <div class="content">
                                                <h6><a href="{{ route('cause.details') }}">Children we work with</a></h6>
                                                <p>Lorem ipsum dolor sit amet, consete
                                                    sadipscing elitr, sed diam nonum
                                                </p>
                                            </div>
                                            <div class="cause__slider-cta">
                                                <div class="cause__progress progress-bar-single">
                                                    <div class="cause-progress__intro">
                                                        <p><span>Donation</span>
                                                            <span class="percent-value">85%</span>
                                                        </p>
                                                    </div>
                                                    <div class="cause-progress__bar">
                                                        <div class="progress-bar-wrapper" data-percent="85%">
                                                            <div class="progress-bar">
                                                                <div class="progress-bar-percent">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="cause-progress__goal">
                                                        <p>Raised: <span class="raised">$8500</span></p>
                                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                                    </div>
                                                </div>
                                                <div class="cause__cta">
                                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                                        class="btn--secondary">Donate Now</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="cause__slider-inner">
                                        <div class="cause__slider-single">
                                            <div class="thumb">
                                                <a href="{{ route('cause.details') }}">
                                                    <img src="{{ asset('assets/images/cause/two.png') }}" alt="Image">
                                                </a>
                                                <div class="tag">
                                                    <a href="{{ route('our.causes') }}">Food</a>
                                                </div>
                                            </div>
                                            <div class="content">
                                                <h6><a href="{{ route('cause.details') }}">Help For Education</a></h6>
                                                <p>Lorem ipsum dolor sit amet, consete
                                                    sadipscing elitr, sed diam nonum
                                                </p>
                                            </div>
                                            <div class="cause__slider-cta">
                                                <div class="cause__progress progress-bar-single">
                                                    <div class="cause-progress__intro">
                                                        <p><span>Donation</span>
                                                            <span class="percent-value">90%</span>
                                                        </p>
                                                    </div>
                                                    <div class="cause-progress__bar">
                                                        <div class="progress-bar-wrapper" data-percent="90%">
                                                            <div class="progress-bar">
                                                                <div class="progress-bar-percent">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="cause-progress__goal">
                                                        <p>Raised: <span class="raised">$8500</span></p>
                                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                                    </div>
                                                </div>
                                                <div class="cause__cta">
                                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                                        class="btn--secondary">Donate Now</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="cause__slider-inner">
                                        <div class="cause__slider-single">
                                            <div class="thumb">
                                                <a href="{{ route('cause.details') }}">
                                                    <img src="{{ asset('assets/images/cause/three.png') }}" alt="Image">
                                                </a>
                                                <div class="tag">
                                                    <a href="{{ route('our.causes') }}">Health</a>
                                                </div>
                                            </div>
                                            <div class="content">
                                                <h6><a href="{{ route('cause.details') }}">Help For Food</a></h6>
                                                <p>Lorem ipsum dolor sit amet, consete
                                                    sadipscing elitr, sed diam nonum
                                                </p>
                                            </div>
                                            <div class="cause__slider-cta">
                                                <div class="cause__progress progress-bar-single">
                                                    <div class="cause-progress__intro">
                                                        <p><span>Donation</span>
                                                            <span class="percent-value">75%</span>
                                                        </p>
                                                    </div>
                                                    <div class="cause-progress__bar">
                                                        <div class="progress-bar-wrapper" data-percent="75%">
                                                            <div class="progress-bar">
                                                                <div class="progress-bar-percent">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="cause-progress__goal">
                                                        <p>Raised: <span class="raised">$8500</span></p>
                                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                                    </div>
                                                </div>
                                                <div class="cause__cta">
                                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                                        class="btn--secondary">Donate Now</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="cause__slider-inner">
                                        <div class="cause__slider-single">
                                            <div class="thumb">
                                                <a href="{{ route('cause.details') }}">
                                                    <img src="{{ asset('assets/images/cause/four.png') }}" alt="Image">
                                                </a>
                                                <div class="tag">
                                                    <a href="{{ route('our.causes') }}">Food</a>
                                                </div>
                                            </div>
                                            <div class="content">
                                                <h6><a href="{{ route('cause.details') }}">Give health support</a></h6>
                                                <p>Lorem ipsum dolor sit amet, consete
                                                    sadipscing elitr, sed diam nonum
                                                </p>
                                            </div>
                                            <div class="cause__slider-cta">
                                                <div class="cause__progress progress-bar-single">
                                                    <div class="cause-progress__intro">
                                                        <p><span>Donation</span>
                                                            <span class="percent-value">65%</span>
                                                        </p>
                                                    </div>
                                                    <div class="cause-progress__bar">
                                                        <div class="progress-bar-wrapper" data-percent="65%">
                                                            <div class="progress-bar">
                                                                <div class="progress-bar-percent">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="cause-progress__goal">
                                                        <p>Raised: <span class="raised">$8500</span></p>
                                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                                    </div>
                                                </div>
                                                <div class="cause__cta">
                                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                                        class="btn--secondary">Donate Now</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="cause__slider-inner">
                                        <div class="cause__slider-single">
                                            <div class="thumb">
                                                <a href="{{ route('cause.details') }}">
                                                    <img src="{{ asset('assets/images/cause/one.png') }}" alt="Image">
                                                </a>
                                                <div class="tag">
                                                    <a href="{{ route('our.causes') }}">Health</a>
                                                </div>
                                            </div>
                                            <div class="content">
                                                <h6><a href="{{ route('cause.details') }}">Children we work with</a></h6>
                                                <p>Lorem ipsum dolor sit amet, consete
                                                    sadipscing elitr, sed diam nonum
                                                </p>
                                            </div>
                                            <div class="cause__slider-cta">
                                                <div class="cause__progress progress-bar-single">
                                                    <div class="cause-progress__intro">
                                                        <p><span>Donation</span>
                                                            <span class="percent-value">85%</span>
                                                        </p>
                                                    </div>
                                                    <div class="cause-progress__bar">
                                                        <div class="progress-bar-wrapper" data-percent="85%">
                                                            <div class="progress-bar">
                                                                <div class="progress-bar-percent">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="cause-progress__goal">
                                                        <p>Raised: <span class="raised">$8500</span></p>
                                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                                    </div>
                                                </div>
                                                <div class="cause__cta">
                                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                                        class="btn--secondary">Donate Now</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="cause__slider-inner">
                                        <div class="cause__slider-single">
                                            <div class="thumb">
                                                <a href="{{ route('cause.details') }}">
                                                    <img src="{{ asset('assets/images/cause/two.png') }}" alt="Image">
                                                </a>
                                                <div class="tag">
                                                    <a href="{{ route('our.causes') }}">Food</a>
                                                </div>
                                            </div>
                                            <div class="content">
                                                <h6><a href="{{ route('cause.details') }}">Help For Education</a></h6>
                                                <p>Lorem ipsum dolor sit amet, consete
                                                    sadipscing elitr, sed diam nonum
                                                </p>
                                            </div>
                                            <div class="cause__slider-cta">
                                                <div class="cause__progress progress-bar-single">
                                                    <div class="cause-progress__intro">
                                                        <p><span>Donation</span>
                                                            <span class="percent-value">90%</span>
                                                        </p>
                                                    </div>
                                                    <div class="cause-progress__bar">
                                                        <div class="progress-bar-wrapper" data-percent="90%">
                                                            <div class="progress-bar">
                                                                <div class="progress-bar-percent">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="cause-progress__goal">
                                                        <p>Raised: <span class="raised">$8500</span></p>
                                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                                    </div>
                                                </div>
                                                <div class="cause__cta">
                                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                                        class="btn--secondary">Donate Now</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="cause__slider-inner">
                                        <div class="cause__slider-single">
                                            <div class="thumb">
                                                <a href="{{ route('cause.details') }}">
                                                    <img src="{{ asset('assets/images/cause/three.png') }}" alt="Image">
                                                </a>
                                                <div class="tag">
                                                    <a href="{{ route('our.causes') }}">Health</a>
                                                </div>
                                            </div>
                                            <div class="content">
                                                <h6><a href="{{ route('cause.details') }}">Help For Food</a></h6>
                                                <p>Lorem ipsum dolor sit amet, consete
                                                    sadipscing elitr, sed diam nonum
                                                </p>
                                            </div>
                                            <div class="cause__slider-cta">
                                                <div class="cause__progress progress-bar-single">
                                                    <div class="cause-progress__intro">
                                                        <p><span>Donation</span>
                                                            <span class="percent-value">75%</span>
                                                        </p>
                                                    </div>
                                                    <div class="cause-progress__bar">
                                                        <div class="progress-bar-wrapper" data-percent="75%">
                                                            <div class="progress-bar">
                                                                <div class="progress-bar-percent">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="cause-progress__goal">
                                                        <p>Raised: <span class="raised">$8500</span></p>
                                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                                    </div>
                                                </div>
                                                <div class="cause__cta">
                                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                                        class="btn--secondary">Donate Now</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="cause__slider-inner">
                                        <div class="cause__slider-single">
                                            <div class="thumb">
                                                <a href="{{ route('cause.details') }}">
                                                    <img src="{{ asset('assets/images/cause/four.png') }}" alt="Image">
                                                </a>
                                                <div class="tag">
                                                    <a href="{{ route('our.causes') }}">Food</a>
                                                </div>
                                            </div>
                                            <div class="content">
                                                <h6><a href="{{ route('cause.details') }}">Give health support</a></h6>
                                                <p>Lorem ipsum dolor sit amet, consete
                                                    sadipscing elitr, sed diam nonum
                                                </p>
                                            </div>
                                            <div class="cause__slider-cta">
                                                <div class="cause__progress progress-bar-single">
                                                    <div class="cause-progress__intro">
                                                        <p><span>Donation</span>
                                                            <span class="percent-value">65%</span>
                                                        </p>
                                                    </div>
                                                    <div class="cause-progress__bar">
                                                        <div class="progress-bar-wrapper" data-percent="65%">
                                                            <div class="progress-bar">
                                                                <div class="progress-bar-percent">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="cause-progress__goal">
                                                        <p>Raised: <span class="raised">$8500</span></p>
                                                        <p>Goal: <span class="goal">$1,0000</span></p>
                                                    </div>
                                                </div>
                                                <div class="cause__cta">
                                                    <a href="{{ route('donate.us') }}" aria-label="donate now" title="donate now"
                                                        class="btn--secondary">Donate Now</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="spade">
            <img src="{{ asset('assets/images/help/spade.png') }}" alt="Image">
        </div>
    </section>
    <!-- ==== / cause slider section end ==== -->
    <!-- ==== contact section start ==== -->
    <section class="contact">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-12 col-md-10 col-xl-7">
                    <div class="contact__content">
                        <div class="section__content" data-aos="fade-up" data-aos-duration="1000">
                            <span class="sub-title"><i class="icon-donation"></i>Start donating poor
                                people</span>
                            <h2 class="title-animation">Send Us <span>message</span>
                                For donation!
                            </h2>
                        </div>
                        <div class="contact__form cta" data-aos="fade-up" data-aos-duration="1000">
                            <form action="#" method="post">
                                @csrf
                                <div class="input-group">
                                    <div class="input-single">
                                        <input type="email" name="contact-email" id="contactEmail"
                                            placeholder="your email...">
                                        <i class="fa-solid fa-paper-plane"></i>
                                    </div>
                                    <div class="input-single">
                                        <input type="text" name="contact-number" id="contactNumber"
                                            placeholder="your phone...">
                                        <i class="fa-solid fa-phone"></i>
                                    </div>
                                </div>
                                <div class="input-single">
                                    <input type="text" name="contact-address" id="contactAddress"
                                        placeholder="your address...">
                                    <i class="fa-solid fa-location-dot"></i>
                                </div>
                                <div class="input-single alter-input">
                                    <textarea name="contact-message" id="contactMessage" placeholder="your message..."></textarea>
                                    <i class="fa-solid fa-envelope"></i>
                                </div>
                                <div class="form-cta">
                                    <button type="submit" aria-label="submit message" title="submit message"
                                        class="btn--primary">Get A Quote <i class="fa-solid fa-arrow-right"></i></button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="contact-bg">
            <img src="{{ asset('assets/images/contact/contact-bg.png') }}" alt="Image" class="parallax-image">
        </div>
        <div class="shape-left" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="300">
            <img src="{{ asset('assets/images/cta/shape-left.png') }}" alt="Image" class="base-img">
        </div>
    </section>
    <!-- ==== / contact section end ==== -->

    <!-- ========================== footer area ============================ -->
    @include('frontend.includes.footers.footerOne')
    <!-- ========================== footer area end ============================ -->
@endsection
