@extends('frontend.layouts.app')
@push('style')
    <style>
        /* Modern flat design for FAQ accordion */
        .faq-section {
            background-color: #f8f9fa;
            /* soft light gray */
        }

        .faq-section h4 {
            color: #7936f5;
            /* your primary purple */
            font-weight: 700;
            letter-spacing: 1.2px;
        }

        .faq-section h1 {
            font-weight: 800;
            color: #2c2c2c;
            margin-bottom: 2rem;
        }

        .modern-accordion .accordion-button {
            background-color: #fff;
            color: #3c3c3c;
            font-weight: 600;
            font-size: 1.1rem;
            border: none;
            border-bottom: 1px solid #e5e5e5;
            padding: 1rem 1.5rem;
            transition: background-color 0.3s ease;
            border-radius: 0;
            box-shadow: none !important;
        }

        .modern-accordion .accordion-button:not(.collapsed) {
            color: #7936f5;
            background-color: #f0eaff;
            font-weight: 700;
            border-bottom: 1px solid #7936f5;
        }

        .modern-accordion .accordion-button:hover {
            background-color: #f9f5ff;
            color: #6b26d9;
        }

        .modern-accordion .accordion-button:focus {
            box-shadow: none;
            border: none;
            outline: none;
        }

        .modern-accordion .accordion-body {
            background-color: #fafafa;
            color: #555;
            font-size: 1rem;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #e5e5e5;
            font-weight: 400;
        }

        .modern-accordion .accordion-item:last-child .accordion-button,
        .modern-accordion .accordion-item:last-child .accordion-body {
            border-bottom: none;
        }

        .faq-section img {
            border-radius: 12px;
            object-fit: cover;
        }
    </style>
@endpush
@section('content')
    <!-- Carousel Start -->
    <div class="header-carousel owl-carousel">
        @foreach (sliders() as $slider)
            <div class="header-carousel-item bg-primary py-5">
                <div class="carousel-caption position-static px-0">
                    <div class="container">
                        <div class="row align-items-center g-5 flex-lg-row flex-column-reverse">
                            <!-- Text Section -->
                            <div class="col-lg-7 text-center text-lg-start animated fadeInLeft">
                                <h4 class="text-white text-uppercase fw-bold mb-3">Welcome To Bangladesh Cultural & Social
                                    Society</h4>
                                <h1 class="display-4 text-white mb-3 fw-bold">{{ $slider->title }}</h1>
                                <p class="fs-5 text-light mb-4">{{ $slider->description }}</p>
                                <div
                                    class="d-flex flex-column flex-sm-row justify-content-center justify-content-lg-start gap-3">
                                    <a href="asa"
                                        class="btn btn-light btn-lg rounded-pill px-4 py-2 shadow-sm transition">
                                        <i class="fas fa-play-circle me-2"></i>Watch Video
                                    </a>
                                    <a href="#"
                                        class="btn btn-outline-light btn-lg rounded-pill px-4 py-2 shadow-sm transition">
                                        Learn More
                                    </a>
                                </div>
                            </div>
                            <!-- Image Section -->
                            <div class="col-lg-5 animated fadeInRight">
                                <div class="rounded overflow-hidden shadow-lg">
                                    <img src="{{ asset('assets/frontend/img/carousel-2.jpg') }}" alt="Slider Image"
                                        class="img-fluid w-100" style="height: 100%; max-height: 400px; object-fit: cover;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <!-- Carousel End -->

    <!-- Feature Start -->
    <div class="container-fluid feature bg-light py-5">
        <div class="container py-5">
            <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
                <h4 class="text-primary">Our Features</h4>
                <h1 class="display-4 mb-4">Together for Culture, Community & Compassion</h1>
                <p class="mb-0">Bangladesh Cultural & Social Society works to empower vulnerable communities through
                    education, aid, and unity-driven initiatives.</p>
            </div>
            <div class="row g-4">

                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="feature-item p-4 pt-0">
                        <div class="feature-icon p-4 mb-4">
                            <i class="fas fa-hands-helping fa-3x"></i>
                        </div>
                        <h4 class="mb-4">Community Assistance</h4>
                        <p class="mb-4">We support underprivileged families with food, clothing, and daily essentials
                            during critical times.</p>
                        <a class="btn btn-primary rounded-pill py-2 px-4" href="#">Learn More</a>
                    </div>
                </div>

                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="feature-item p-4 pt-0">
                        <div class="feature-icon p-4 mb-4">
                            <i class="fas fa-book-reader fa-3x"></i>
                        </div>
                        <h4 class="mb-4">Education Support</h4>
                        <p class="mb-4">Providing books, school supplies, and scholarships to ensure every child has
                            access to learning.</p>
                        <a class="btn btn-primary rounded-pill py-2 px-4" href="#">Learn More</a>
                    </div>
                </div>

                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="feature-item p-4 pt-0">
                        <div class="feature-icon p-4 mb-4">
                            <i class="fas fa-users fa-3x"></i>
                        </div>
                        <h4 class="mb-4">Cultural Empowerment</h4>
                        <p class="mb-4">Preserving Bengali traditions while fostering unity through cultural events, art,
                            and community gatherings.</p>
                        <a class="btn btn-primary rounded-pill py-2 px-4" href="#">Learn More</a>
                    </div>
                </div>

                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.8s">
                    <div class="feature-item p-4 pt-0">
                        <div class="feature-icon p-4 mb-4">
                            <i class="fas fa-first-aid fa-3x"></i>
                        </div>
                        <h4 class="mb-4">Emergency Relief</h4>
                        <p class="mb-4">Rapid response during natural disasters with medical aid, shelter, and emergency
                            support for affected families.</p>
                        <a class="btn btn-primary rounded-pill py-2 px-4" href="#">Learn More</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="container-fluid bg-light about pb-5">
        <div class="container pb-5">
            <div class="row g-5">
                <div class="col-xl-6 wow fadeInLeft" data-wow-delay="0.2s">
                    <div class="about-item-content bg-white rounded p-5 h-100">
                        <h4 class="text-primary">About Us</h4>
                        <h1 class="display-4 mb-4">Empowering Communities, Preserving Culture</h1>
                        <p>Bangladesh Cultural & Social Society is dedicated to improving lives through education, emergency
                            relief, and cultural preservation. We unite people to uplift those in need and celebrate the
                            rich heritage of Bangladesh.</p>
                        <p>From food drives to scholarship programs, we are committed to building a more compassionate,
                            inclusive society where every individual matters.</p>
                        <p class="text-dark"><i class="fa fa-check text-primary me-3"></i>Direct aid to families and
                            children in crisis</p>
                        <p class="text-dark"><i class="fa fa-check text-primary me-3"></i>Cultural events that promote unity
                            and identity</p>
                        <p class="text-dark mb-4"><i class="fa fa-check text-primary me-3"></i>Empowering the underserved
                            through education & opportunity</p>
                        <a class="btn btn-primary rounded-pill py-3 px-5" href="#">More Information</a>
                    </div>
                </div>
                <div class="col-xl-6 wow fadeInRight" data-wow-delay="0.2s">
                    <div class="bg-white rounded p-5 h-100">
                        <div class="row g-4 justify-content-center">
                            <div class="col-12">
                                <div class="rounded bg-light">
                                    <img src="{{ asset('assets/frontend/img/about-us.jpg') }}"
                                        class="img-fluid rounded w-100" alt="About Bangladesh Cultural & Social Society">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="counter-item bg-light rounded p-3 h-100">
                                    <div class="counter-counting">
                                        <span class="text-primary fs-2 fw-bold" data-toggle="counter-up">10</span>
                                        <span class="h1 fw-bold text-primary">+</span>
                                    </div>
                                    <h4 class="mb-0 text-dark">Years of Service</h4>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="counter-item bg-light rounded p-3 h-100">
                                    <div class="counter-counting">
                                        <span class="text-primary fs-2 fw-bold" data-toggle="counter-up">500</span>
                                        <span class="h1 fw-bold text-primary">+</span>
                                    </div>
                                    <h4 class="mb-0 text-dark">Active Donors</h4>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="counter-item bg-light rounded p-3 h-100">
                                    <div class="counter-counting">
                                        <span class="text-primary fs-2 fw-bold" data-toggle="counter-up">120</span>
                                        <span class="h1 fw-bold text-primary">+</span>
                                    </div>
                                    <h4 class="mb-0 text-dark">Ongoing Projects</h4>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="counter-item bg-light rounded p-3 h-100">
                                    <div class="counter-counting">
                                        <span class="text-primary fs-2 fw-bold" data-toggle="counter-up">1000</span>
                                        <span class="h1 fw-bold text-primary">+</span>
                                    </div>
                                    <h4 class="mb-0 text-dark">Community Members</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid service py-5">
        <div class="container py-5">
            <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
                <h4 class="text-primary">Our Project</h4>
                <h1 class="display-4 mb-4">We Serve Our Community with Dedication</h1>
                <p class="mb-0">Committed to uplifting lives and preserving culture through meaningful projects and
                    social services across Bangladesh.</p>
            </div>
            <div class="row g-4 justify-content-center">
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="service-item">
                        <div class="service-img">
                            <img src="{{ asset('assets/frontend/img/blog-1.png') }}" class="img-fluid rounded-top w-100"
                                alt="">
                            <div class="service-icon p-3">
                                <i class="fa fa-users fa-2x"></i>
                            </div>
                        </div>
                        <div class="service-content p-4">
                            <div class="service-content-inner">
                                <a href="#" class="d-inline-block h4 mb-4">Project One</a>
                                <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                    Perspiciatis, eum!</p>
                                <a class="btn btn-primary rounded-pill py-2 px-4" href="#">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="service-item">
                        <div class="service-img">
                            <img src="{{ asset('assets/frontend/img/blog-2.png') }}" class="img-fluid rounded-top w-100"
                                alt="">
                            <div class="service-icon p-3">
                                <i class="fa fa-hospital fa-2x"></i>
                            </div>
                        </div>
                        <div class="service-content p-4">
                            <div class="service-content-inner">
                                <a href="#" class="d-inline-block h4 mb-4">Project Two</a>
                                <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                    Perspiciatis, eum!</p>
                                <a class="btn btn-primary rounded-pill py-2 px-4" href="#">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="service-item">
                        <div class="service-img">
                            <img src="{{ asset('assets/frontend/img/blog-3.png') }}" class="img-fluid rounded-top w-100"
                                alt="">
                            <div class="service-icon p-3">
                                <i class="fa fa-car fa-2x"></i>
                            </div>
                        </div>
                        <div class="service-content p-4">
                            <div class="service-content-inner">
                                <a href="#" class="d-inline-block h4 mb-4">Project three</a>
                                <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                    Perspiciatis, eum!</p>
                                <a class="btn btn-primary rounded-pill py-2 px-4" href="#">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.8s">
                    <div class="service-item">
                        <div class="service-img">
                            <img src="{{ asset('assets/frontend/img/blog-4.png') }}" class="img-fluid rounded-top w-100"
                                alt="">
                            <div class="service-icon p-3">
                                <i class="fa fa-home fa-2x"></i>
                            </div>
                        </div>
                        <div class="service-content p-4">
                            <div class="service-content-inner">
                                <a href="#" class="d-inline-block h4 mb-4">Project Four</a>
                                <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                    Perspiciatis, eum!</p>
                                <a class="btn btn-primary rounded-pill py-2 px-4" href="#">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 text-center wow fadeInUp" data-wow-delay="0.2s">
                    <a class="btn btn-primary rounded-pill py-3 px-5" href="#">More Services</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Service End -->

    <!-- FAQs Start -->
    <div class="container-fluid faq-section bg-light py-5">
        <div class="container py-5">
            <div class="row g-5 align-items-center">
                <div class="col-xl-6" data-wow-delay="0.2s">
                    <div class="h-100">
                        <div class="mb-5">
                            <h4 class="text-primary fw-bold">Some Important FAQs</h4>
                            <h1 class="display-4 mb-0 fw-bold">Common Frequently Asked Questions</h1>
                        </div>
                        <div class="accordion modern-accordion" id="accordionExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingOne">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        Q: How can I become a member of the Bangladesh Cultural & Social Society?
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse show"
                                    aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        A: Membership is open to all who support our mission. You can apply online or visit
                                        our office to fill
                                        out a membership form.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        Q: What types of community projects do you run?
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        A: We run educational, cultural, health, and disaster relief projects to uplift
                                        communities across
                                        Bangladesh.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseThree" aria-expanded="false"
                                        aria-controls="collapseThree">
                                        Q: How can I volunteer for your events?
                                    </button>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse"
                                    aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        A: Volunteers are always welcome! Please contact us via our website or phone to
                                        learn about upcoming
                                        opportunities.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6" data-wow-delay="0.4s">
                    <img src="img/carousel-2.png" class="img-fluid rounded" alt="Community gathering" />
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid blog py-5">
        <div class="container py-5">
            <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
                <h4 class="text-primary">News & Events</h4>
                <h1 class="display-4 mb-4">News And Updates</h1>
                <p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur adipisci facilis
                    cupiditate recusandae aperiam temporibus corporis itaque quis facere, numquam, ad culpa deserunt
                    sint dolorem autem obcaecati, ipsam mollitia hic.
                </p>
            </div>
            <div class="row g-4 justify-content-center">
                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="blog-item">
                        <div class="blog-img">
                            <img src="{{ asset('assets/frontend/img/blog-1.png') }}" class="img-fluid rounded-top w-100"
                                alt="">
                            <div class="blog-categiry py-2 px-4">
                                <span>Business</span>
                            </div>
                        </div>
                        <div class="blog-content p-4">
                            <div class="blog-comment d-flex justify-content-between mb-3">
                                <div class="small"><span class="fa fa-user text-primary"></span> Martin.C</div>
                                <div class="small"><span class="fa fa-calendar text-primary"></span> 30 Dec 2025
                                </div>
                                <div class="small"><span class="fa fa-comment-alt text-primary"></span> 6 Comments
                                </div>
                            </div>
                            <a href="#" class="h4 d-inline-block mb-3">Which allows you to pay down insurance
                                bills</a>
                            <p class="mb-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero
                                soluta impedit eligendi? Quibusdam, laudantium.</p>
                            <a href="#" class="btn p-0">Read More <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="blog-item">
                        <div class="blog-img">
                            <img src="{{ asset('assets/frontend/img/blog-2.png') }}" class="img-fluid rounded-top w-100"
                                alt="">
                            <div class="blog-categiry py-2 px-4">
                                <span>Business</span>
                            </div>
                        </div>
                        <div class="blog-content p-4">
                            <div class="blog-comment d-flex justify-content-between mb-3">
                                <div class="small"><span class="fa fa-user text-primary"></span> Martin.C</div>
                                <div class="small"><span class="fa fa-calendar text-primary"></span> 30 Dec 2025
                                </div>
                                <div class="small"><span class="fa fa-comment-alt text-primary"></span> 6 Comments
                                </div>
                            </div>
                            <a href="#" class="h4 d-inline-block mb-3">Leverage agile frameworks to provide</a>
                            <p class="mb-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero
                                soluta impedit eligendi? Quibusdam, laudantium.</p>
                            <a href="#" class="btn p-0">Read More <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="blog-item">
                        <div class="blog-img">
                            <img src="{{ asset('assets/frontend/img/blog-3.png') }}" class="img-fluid rounded-top w-100"
                                alt="">
                            <div class="blog-categiry py-2 px-4">
                                <span>Business</span>
                            </div>
                        </div>
                        <div class="blog-content p-4">
                            <div class="blog-comment d-flex justify-content-between mb-3">
                                <div class="small"><span class="fa fa-user text-primary"></span> Martin.C</div>
                                <div class="small"><span class="fa fa-calendar text-primary"></span> 30 Dec 2025
                                </div>
                                <div class="small"><span class="fa fa-comment-alt text-primary"></span> 6 Comments
                                </div>
                            </div>
                            <a href="#" class="h4 d-inline-block mb-3">Leverage agile frameworks to provide</a>
                            <p class="mb-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero
                                soluta impedit eligendi? Quibusdam, laudantium.</p>
                            <a href="#" class="btn p-0">Read More <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Blog End -->

    <!-- Team Start -->
    <div class="container-fluid team pb-5">
        <div class="container pb-5">
            <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
                <h4 class="text-primary">Our Team</h4>
                <h1 class="display-4 mb-4">Meet Our Team Members</h1>
                <p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur adipisci facilis
                    cupiditate recusandae aperiam temporibus corporis itaque quis facere, numquam, ad culpa deserunt
                    sint dolorem autem obcaecati, ipsam mollitia hic.
                </p>
            </div>
            <div class="row g-4">
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="team-item">
                        <div class="team-img">
                            <img src="{{ asset('assets/frontend/img/team-1.jpg') }}" class="img-fluid rounded-top w-100"
                                alt="">
                            <div class="team-icon">
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-facebook-f"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-twitter"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-linkedin-in"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-0" href=""><i
                                        class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                        <div class="team-title p-4">
                            <h4 class="mb-0">David James</h4>
                            <p class="mb-0">Profession</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="team-item">
                        <div class="team-img">
                            <img src="{{ asset('assets/frontend/img/team-2.jpg') }}" class="img-fluid rounded-top w-100"
                                alt="">
                            <div class="team-icon">
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-facebook-f"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-twitter"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-linkedin-in"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-0" href=""><i
                                        class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                        <div class="team-title p-4">
                            <h4 class="mb-0">David James</h4>
                            <p class="mb-0">Profession</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="team-item">
                        <div class="team-img">
                            <img src="{{ asset('assets/frontend/img/team-3.jpg') }}" class="img-fluid rounded-top w-100"
                                alt="">
                            <div class="team-icon">
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-facebook-f"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-twitter"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-linkedin-in"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-0" href=""><i
                                        class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                        <div class="team-title p-4">
                            <h4 class="mb-0">David James</h4>
                            <p class="mb-0">Profession</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.8s">
                    <div class="team-item">
                        <div class="team-img">
                            <img src="{{ asset('assets/frontend/img/team-4.jpg') }}" class="img-fluid rounded-top w-100"
                                alt="">
                            <div class="team-icon">
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-facebook-f"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-twitter"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-2" href=""><i
                                        class="fab fa-linkedin-in"></i></a>
                                <a class="btn btn-primary btn-sm-square rounded-pill mb-0" href=""><i
                                        class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                        <div class="team-title p-4">
                            <h4 class="mb-0">David James</h4>
                            <p class="mb-0">Profession</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection