@extends('front.default.layout')

@section('meta-keywords', "$be->home_meta_keywords")
@section('meta-description', "$be->home_meta_description")


@section('content')
    <!--   hero area start   -->
    @if ($bs->home_version == 'static')
        @includeif('front.default.partials.static')
    @elseif ($bs->home_version == 'slider')
        @includeif('front.default.partials.slider')
    @elseif ($bs->home_version == 'video')
        @includeif('front.default.partials.video')
    @elseif ($bs->home_version == 'particles')
        @includeif('front.default.partials.particles')
    @elseif ($bs->home_version == 'water')
        @includeif('front.default.partials.water')
    @elseif ($bs->home_version == 'parallax')
        @includeif('front.default.partials.parallax')
    @endif
    <!--   hero area end    -->
    <style>
        .global-presence-section {
            padding: 150px 0;
            background: url('https://static.vecteezy.com/system/resources/previews/017/178/876/non_2x/doodle-freehand-drawing-of-middle-east-countries-map-free-png.png') no-repeat center center/cover;
            position: relative;
            font-family: 'Kalpurush', 'SolaimanLipi', 'Inter', sans-serif;
            color: #fff;
        }

        .global-presence-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #009fef ;
            opacity:.5;
            z-index: 1;
        }

        .global-presence-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 25px;
            position: relative;
            z-index: 2;
        }

        .section-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-title {
            font-size: 36px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 15px;
            letter-spacing: -0.5px;
        }

        .countries-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px 40px;
        }
        .clist{
            color:#000000 !important;
        }

        .country-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px 30px;
        }

        .country-item {
            font-size: 21px;
            color: #000000;
            font-weight: 700;
            transition: color 0.3s ease, transform 0.3s ease;
            padding: 5px 0;
            white-space: nowrap;
        }

        .country-item:hover {
            color: #f0f0f0;
            transform: translateY(-2px);
            cursor:pointer;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .global-presence-section {
                padding: 60px 0;
            }

            .section-title {
                font-size: 34px;
            }

            .country-item {
                font-size: 16px;
            }
        }

        @media (max-width: 480px) {
            .section-title {
                font-size: 28px;
            }

            .country-list {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
        }

        .single-category {
            position: relative;
            background: #fff;
            border: 1px solid #eee;
            padding: 20px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: box-shadow 0.3s ease;
        }

        .single-category:hover {
            box-shadow: 0 4px 12px rgba(89, 80, 214, 0.81);
        }

        .img-wrapper {
            text-align: center;
            margin-bottom: 15px;
        }

        .img-wrapper img {
            max-width: 80px;
            height: auto;
        }

        .text h4 {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .text p {
            flex-grow: 1;
            font-size: 14px;
            color: #333;
            margin-bottom: 20px;
        }

        .services-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        .services-item:hover {
            box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
        }

        .services-thumb {
            text-align: center;
            margin-bottom: 10px;
        }

        .services-thumb img {
            max-width: 120px;
            /* medium-sized icons */
            height: auto;
            margin-top: 5px;
        }

        .services-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .services-content .title h4 {
            font-size: 15px;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .services-content p {
            font-size: 13px;
            color: #333;
            margin-bottom: 15px;
            line-height: 1.4;
            max-height: 40px;
            /* Limit visible text height */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .readmore {
            display: inline-block;
            background-color: #0494d6ff;
            color: #ffffff !important;
            padding: 6px 16px;
            text-decoration: none;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            text-align: center;
            box-shadow: 0 0 8px #ffffff66;
        }

        .readmore:hover {
            background-color: #585959;
            color: #fff;
            transform: translateY(-3px);
            /*text-shadow: 0 0 6px #fff, 0 0 12px #fff;*/
        }


        /* Responsive spacing between cards */
        @media (max-width: 767px) {
            .services-item {
                margin-bottom: 20px;
            }
        }
    </style>

    <!-- Emergency Help Section Start -->
    <div class="intro-section py-3" style="background-color: #f8f9fa; padding-top: 150px; margin-top: 80px;">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <!-- Full unified rectangle with internal vertical dividers -->
                    <div class="d-flex flex-column flex-lg-row shadow-sm overflow-hidden">

                        <!-- Image Box -->
                        <div class="col-md-6 p-0 position-relative">
                            <img src="{{ asset('assets/front/img/ambu.jpg') }}" alt="Emergency Help"
                                class="img-fluid w-100 h-100" style="object-fit:  ; min-height: 100%;">
                        </div>

                        <!-- Text Box -->
                        <div class="col-md-6 p-4 position-relative d-flex align-items-center">
                            <div>
                                <h5 class="mb-3">
                                    Do You Need Emergency Medical Help in Bangladesh? <br> <br>
                                    <span class="">বাংলাদেশে কি আপনার জরুরি চিকিৎসা সহায়তার প্রয়োজন?</span>
                                </h5>
                                <p class="mb-3">
                                    If your family or someone around you needs a medical emergency, please take immediate
                                    action from us.
                                    We are available 24 hours a day in all cities, upazilas.
                                </p>
                                <p class="mb-4">
                                    আপনার পরিবার বা আপনার আশেপাশের কারো যদি জরুরি চিকিৎসার প্রয়োজন হয়, তাহলে আমাদের কাছ
                                    থেকে তাৎক্ষণিক ব্যবস্থা নিন।
                                    আমরা সকল জেলায়, উপজেলায় ২৪ ঘন্টা সাহায্য করার জন্য প্রস্তুত।
                                </p>
                                <a href="{{ route('user-dashboard') }}" class="btn btn-primary">
                                    জরুরি চিকিৎসা সহায়তা নিতে <br> এখানে ক্লিক করুন
                                </a>
                            </div>
                        </div>

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

    <!-- Emergency Help Section End -->




    <!--@if ($bs->service_section == 1)-->
    <!--    @if (!serviceCategory())-->
    <!--   service section start   -->
    <!--        <section class="services-area pb-130" style="padding-top:80px;">-->
    <!--            <div class="container">-->
    <!--                <div class="row text-center">-->
    <!--                    <div class="col-lg-6 offset-lg-3">-->
    <!--                        <span class="section-title">{{ convertUtf8($bs->service_section_title) }}</span>-->
    <!--                        <h2 class="section-summary">{{ convertUtf8($bs->service_section_subtitle) }}</h2>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div class="container">-->
    <!--                <div class="row justify-content-center">-->
    <!--                    @foreach ($services as $service)
    -->
    <!--                        <div class="col-lg-3 col-md-6 col-sm-6 mb-4 d-flex">-->
    <!--                            <div class="services-item mt-30 w-100">-->
    <!--                                <div class="services-thumb">-->
    <!--                                    <img class="lazy" data-src="{{ asset('assets/front/img/services/' . $service->main_image) }}" alt="service" />-->
    <!--                                    </div>-->
    <!--                                    <div class="services-content">-->
    <!--                                        <a class="title"-->
    <!--                                            @if ($service->details_page_status == 1)
    -->
    <!--                                                href="{{ route('front.servicedetails', [$service->slug, $service->id]) }}"-->
    <!--
    @endif>-->
    <!--                                            <h4>{{ \Illuminate\Support\Str::words($service->title, 5) }}</h4>-->
    <!--                                        </a>-->

    <!--                                        <p>-->
    <!--                                            @if ($service->details_page_status == 1)
    -->
    <!--                                                {{ \Illuminate\Support\Str::words($service->summary, 10) }}-->
<!--                                            @else-->
    <!--                                                {{ $service->summary }}-->
    <!--
    @endif-->
    <!--                                        </p>-->

    <!--                                        @if ($service->details_page_status == 1)
    -->
    <!--                                            <div class="text-center mt-auto">-->
    <!--                                                <a href="{{ route('front.servicedetails', [$service->slug, $service->id]) }}" class="readmore">-->
    <!--                                                    {{ __('Read More') }}-->
    <!--                                                </a>-->
    <!--                                            </div>-->
    <!--
    @endif-->
    <!--                                    </div>-->
    <!--                                </div>-->
    <!--                            </div>-->
    <!--
    @endforeach-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </section>-->
    <!--   service section end   -->

    <!--
@elseif (serviceCategory())
    -->
    <!--   service category section start   -->
    <!--        <div class="service-categories">-->
    <!--            <div class="container">-->
    <!--                <div class="row text-center">-->
    <!--                    <div class="col-lg-6 offset-lg-3">-->
    <!--                        <span class="section-title">{{ convertUtf8($bs->service_section_title) }}</span>-->
    <!--                        <h2 class="section-summary">{{ convertUtf8($bs->service_section_subtitle) }}</h2>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div class="container">-->
    <!--                <div class="row">-->
    <!--                    @foreach ($scategories as $key => $scategory)
    -->
    <!--                        <div class="col-xl-3 col-lg-4 col-sm-6 mb-4">-->
    <!--                            <div class="single-category">-->
    <!--                                @if (!empty($scategory->image))
    -->
    <!--                                    <div class="img-wrapper">-->
    <!--                                        <img class="lazy"-->
    <!--                                            data-src="{{ asset('assets/front/img/service_category_icons/' . $scategory->image) }}"-->
    <!--                                            alt="">-->
    <!--                                    </div>-->
    <!--
    @endif-->
    <!--                                <div class="text">-->
    <!--                                    <h4>{{ convertUtf8($scategory->name) }}</h4>-->
    <!--                                    <p>-->
    <!--                                        @if (strlen($scategory->short_text) > 112)
    -->
    <!--                                            {{ mb_substr($scategory->short_text, 0, 112, 'utf-8') }}<span-->
    <!--                                                style="display: none;">{{ mb_substr($scategory->short_text, 112, null, 'utf-8') }}</span>-->
    <!--                                            <a href="#" class="see-more">{{ __('see more') }}...</a>-->
<!--                                        @else-->
    <!--                                            {{ $scategory->short_text }}-->
    <!--
    @endif-->
    <!--                                    </p>-->
    <!--                                    <a href="{{ route('front.services', ['category' => $scategory->id]) }}"-->
    <!--                                        class="readmore mt-auto">{{ __('View Services') }}</a>-->
    <!--                                </div>-->
    <!--                            </div>-->
    <!--                        </div>-->
    <!--
    @endforeach-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--   service category section end   -->
    <!--   @endif-->
    <!--   @endif-->


    <!-- Load Google Fonts for Hind Siliguri and Playfair Display -->
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Hind+Siliguri:wght@400;600&display=swap" rel="stylesheet">

    @if ($bs->service_section == 1)
        @if (!serviceCategory())
            <!-- Service Section Start -->
            <section class="py-5">
                <div class="container">
                    <h2 class="text-center mb-5 display-5 fw-bold">
                        {{ convertUtf8($bs->service_section_title) }}
                    </h2>
                    <div class="services-grid">
                        @foreach ($services as $service)
                            <div class="service-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="service-icon">
                                        <img class="lazy"
                                            data-src="{{ asset('assets/front/img/services/' . $service->main_image) }}"
                                            alt="service"
                                            style="width:60px; height:60px; object-fit:cover;" />
                                    </div>
                                    <h3 class="h5 fw-semibold mb-0">
                                        {{ \Illuminate\Support\Str::words($service->title, 5) }}
                                    </h3>
                                </div>
                                <p class="text-muted">
                                    {{ \Illuminate\Support\Str::words($service->summary, 12) }}
                                </p>
                                @if ($service->details_page_status == 1)
                                    <a href="{{ route('front.servicedetails', [$service->slug, $service->id]) }}"
                                        class="text-decoration-none fw-medium">
                                        {{ __('বিস্তারিত দেখুন →') }}
                                    </a>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
            <!-- Service Section End -->
        @elseif (serviceCategory())
            <!-- Service Category Section Start -->
            <section class="py-5">
                <div class="container">
                    <h2 class="text-center mb-5 display-5 fw-bold">
                        {{ convertUtf8($bs->service_section_title) }}
                    </h2>
                    <div class="services-grid">
                        @foreach ($scategories as $scategory)
                            <div class="service-card">
                                <div class="d-flex align-items-center mb-3">
                                    @if (!empty($scategory->image))
                                        <div class="service-icon">
                                            <img src="{{ asset('assets/front/img/service_category_icons/' . $scategory->image) }}"
                                                class="img-fluid" alt="icon" style="width:60px; height:60px;" />
                                        </div>
                                    @endif
                                    <h3 class="h5 fw-semibold mb-0">
                                        {{ convertUtf8($scategory->name) }}
                                    </h3>
                                </div>
                                <p class="text-muted">
                                    {{ \Illuminate\Support\Str::limit($scategory->short_text, 120) }}
                                </p>
                                <a href="{{ route('front.services', ['category' => $scategory->id]) }}"
                                    class="text-decoration-none fw-medium">
                                    {{ __('বিস্তারিত দেখুন →') }}
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
            <!-- Service Category Section End -->
        @endif
    @endif

    <style>
        :root {
            --primary-color: #006a4e; /* Deep green inspired by Bangladesh flag */
            --secondary-color: #d4a017; /* Luxurious gold for accents */
            --accent-color: #b22222; /* Red from Bangladesh flag */
            --background-light: #f8f9fa; /* Soft off-white background */
            --text-dark: #1a1a1a; /* Near-black for text */
            --text-light: #ffffff; /* Pure white for contrast */
            --card-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
            --transition-speed: 0.5s; /* Smooth transitions */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2.5rem;
        }

        /* Service Section */
        .py-5 {
            padding: 6rem 0;
        }

        .display-5 {
            font-family: 'Playfair Display', serif;
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--primary-color);
            position: relative;
            margin-bottom: 2rem;
        }

        .display-5::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--secondary-color);
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
            margin: 4rem 0;
        }

        .service-card {
            background: var(--text-light);
            border-radius: 16px;
            padding: 3rem;
            box-shadow: var(--card-shadow);
            transition: transform var(--transition-speed) ease-in-out, box-shadow var(--transition-speed);
            border-left: 5px solid var(--secondary-color);
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .service-card .service-icon {
            margin-right: 1.5rem;
        }

        .service-card .service-icon img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid var(--secondary-color);
            transition: transform var(--transition-speed);
        }

        .service-card:hover .service-icon img {
            transform: scale(1.1);
        }

        .service-card h3 {
            font-family: 'Hind Siliguri', sans-serif;
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .service-card p {
            font-family: 'Hind Siliguri', sans-serif;
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-dark);
            margin-bottom: 1.5rem;
            flex-grow: 1;
        }

        .service-card a {
            font-family: 'Hind Siliguri', sans-serif;
            display: inline-block;
            color: var(--accent-color);
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            transition: color var(--transition-speed), transform var(--transition-speed);
        }

        .service-card a:hover {
            color: var(--secondary-color);
            transform: translateX(8px);
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .services-grid {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .services-grid {
                grid-template-columns: 1fr;
            }
            .container {
                padding: 0 1.5rem;
            }
            .display-5 {
                font-size: 2.2rem;
            }
        }
           
    </style>

    <section class="global-presence-section">
        <div class="global-presence-container">
            <div class="section-header">
                <h2 class="section-title">Global Presence / বিশ্বব্যাপী আমাদের উপস্থিতি</h2>
            </div>

            <div class="countries-container">
                <ul class="country-list ">
                    <li class="country-item "><a class="clist" href="{{ route('front.afghanistan') }}">আফগানিস্তান</a></li>
                    <li class="country-item"><a href="#">লিবিয়া</a></li>
                    <li class="country-item"><a href="#">মিসর</a></li>
                    <li class="country-item"><a href="#">সুদান</a></li>
                    <li class="country-item"><a href="#">ইয়েমেন</a></li>
                    <li class="country-item"><a href="#">সৌদি আরব</a></li>
                    <li class="country-item"><a href="#">কুয়েত </a></li>
                    <li class="country-item"><a href="#">বাহরাইন </a></li>
                    <li class="country-item"><a href="#"> কাতার</a></li>
                    <li class="country-item"><a href="#">সিরিয়া </a></li>
                </ul>
            </div>
        </div>
    </section>




    @if ($bs->approach_section == 1)
        <!--   how we do section start   -->
        <div class="approach-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="approach-summary">
                            <span class="section-title">{{ convertUtf8($bs->approach_title) }}</span>
                            <h2 class="section-summary">{{ convertUtf8($bs->approach_subtitle) }}</h2>
                            @if (!empty($bs->approach_button_url) && !empty($bs->approach_button_text))
                                <a href="{{ $bs->approach_button_url }}" class="boxed-btn"
                                    target="_blank"><span>{{ convertUtf8($bs->approach_button_text) }}</span></a>
                            @endif
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <ul class="approach-lists">
                            @foreach ($points as $key => $point)
                                <li class="single-approach">
                                    <div class="approach-icon-wrapper"><i class="{{ $point->icon }}"></i></div>
                                    <div class="approach-text">
                                        <h4>{{ convertUtf8($point->title) }}</h4>
                                        <p>
                                            @if (strlen($point->short_text) > 150)
                                                {{ mb_substr($point->short_text, 0, 150, 'utf-8') }}<span
                                                    style="display: none;">{{ mb_substr($point->short_text, 150, null, 'utf-8') }}</span>
                                                <a href="#" class="see-more">{{ __('see more') }}...</a>
                                            @else
                                                {{ $point->short_text }}
                                            @endif
                                        </p>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--   how we do section end   -->
    @endif

    <!--@if ($bs->statistics_section == 1)-->
    <!--    statistics section start    -->
    <!--    <div class="statistics-section"-->
    <!--        @if ($bs->home_version != 'parallax')
    style="background-image: url('{{ asset('assets/front/img/' . $be->statistics_bg) }}'); background-size:cover;"
    @endif-->
    <!--        id="statisticsSection"-->
    <!--        @if ($bs->home_version == 'parallax')
    data-parallax="scroll" data-speed="0.2" data-image-src="{{ asset('assets/front/img/' . $be->statistics_bg) }}"
    @endif>-->
    <!--        <div class="statistics-container">-->
    <!--            <div class="container">-->
    <!--                <div class="row no-gutters">-->
    <!--                    @foreach ($statistics as $key => $statistic)
    -->
    <!--                        <div class="col-lg-3 col-md-6">-->
    <!--                            <div class="round" data-value="1" data-number="{{ convertUtf8($statistic->quantity) }}"-->
    <!--                                data-size="200" data-thickness="6"-->
    <!--                                data-fill="{-->
    <!--                 &quot;color&quot;: &quot;#{{ $bs->base_color }}&quot;-->
    <!--                 }">-->
    <!--                                <strong></strong>-->
    <!--                                <h5><i class="{{ $statistic->icon }}"></i> {{ convertUtf8($statistic->title) }}</h5>-->
    <!--                            </div>-->
    <!--                        </div>-->
    <!--
    @endforeach-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--    statistics section end    -->
    <!--@endif-->


    @if ($bs->portfolio_section == 1)
        <!--    case section start   -->
        <div class="case-section">
            <div class="container">
                <div class="row text-center">
                    <div class="col-lg-6 offset-lg-3">
                        <span class="section-title">{{ convertUtf8($bs->portfolio_section_title) }}</span>
                        <h2 class="section-summary">{{ convertUtf8($bs->portfolio_section_text) }}</h2>
                    </div>
                </div>
            </div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="case-carousel owl-carousel owl-theme">
                            @foreach ($portfolios as $key => $portfolio)
                                <div class="single-case single-case-bg-1"
                                    style="background-image: url('{{ asset('assets/front/img/portfolios/featured/' . $portfolio->featured_image) }}');">
                                    <div class="outer-container">
                                        <div class="inner-container">
                                            <h4>{{ strlen($portfolio->title) > 36 ? mb_substr($portfolio->title, 0, 36, 'utf-8') . '...' : $portfolio->title }}
                                            </h4>
                                            @if (!empty($portfolio->service))
                                                <p>{{ $portfolio->service->title }}</p>
                                            @endif
                                            <a href="{{ route('front.portfoliodetails', [$portfolio->slug, $portfolio->id]) }}"
                                                class="readmore-btn"><span>{{ __('Read More') }}</span></a>

                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--    case section end   -->
    @endif

    <section class="py-5">
        <div class="container">
            <div class="row align-items-center">
                <!-- Image Column -->
                <div class="col-md-6 mb-4 mb-md-0">
                    <img src="https://img.freepik.com/free-photo/volunteers-holding-box-containing-donations-charity_23-2149230560.jpg?semt=ais_hybrid&w=740&q=80"
                        alt="Donate" class="img-fluid rounded shadow">
                </div>

                <!-- Content Column -->
                <div class="col-md-6">
                    <h2 class="mb-4">Donate Our Foundation / প্রবাস সার্ভিস ফাউন্ডেশনে দান করুন</h2>
                    <p class="mb-4"> Donate to contribute too our social activites and run our foundation <br> আমাদের
                        সামাজিক কর্মকাণ্ডে অবদান রাখতে এবং আমাদের ফাউন্ডেশন পরিচালনা করতে দান করুন।</p>
                    <a href="{{ route('dans.index') }}" class="btn btn-success btn-lg">
                        {{ __('Donate Here') }}
                    </a>
                </div>
            </div>
        </div>
    </section>
    
     <!--Testimonial section start  -->
    <!--@if ($bs->testimonial_section == 1)-->
    <!--    <div class="testimonial-section pb-115">-->
    <!--        <div class="container">-->
    <!--            <div class="row text-center">-->
    <!--                <div class="col-lg-6 offset-lg-3">-->
    <!--                    <span class="section-title">{{ convertUtf8($bs->testimonial_title) }}</span>-->
    <!--                    <h2 class="section-summary">{{ convertUtf8($bs->testimonial_subtitle) }}</h2>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div class="row">-->
    <!--                <div class="col-md-12">-->
    <!--                    <div class="testimonial-carousel owl-carousel owl-theme">-->
    <!--                        @foreach ($testimonials as $key => $testimonial)-->
    <!--                            <div class="single-testimonial">-->
    <!--                                <div class="img-wrapper"><img class="lazy"-->
    <!--                                        data-src="{{ asset('assets/front/img/testimonials/' . $testimonial->image) }}"-->
    <!--                                        alt=""></div>-->
    <!--                                <div class="client-desc">-->
    <!--                                    <p class="comment">{{ convertUtf8($testimonial->comment) }}</p>-->
    <!--                                    <h6 class="name">{{ convertUtf8($testimonial->name) }}</h6>-->
    <!--                                    <p class="rank">{{ convertUtf8($testimonial->rank) }}</p>-->
    <!--                                </div>-->
    <!--                            </div>-->
    <!--                        @endforeach-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--@endif-->
    <!--Testimonial section end    -->


<!--   @if ($bs->team_section == 1)-->
    <!--    Modern Elegant Team Section Start   -->
<!--    <div class="modern-team-section" -->
<!--         @if ($bs->home_version != 'parallax') -->
<!--            style="background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%), url('{{ asset('assets/front/img/' . $bs->team_bg) }}'); background-size: cover; background-attachment: fixed;" -->
<!--         @endif-->
<!--         @if ($bs->home_version == 'parallax') -->
<!--            data-parallax="scroll" data-speed="0.3" data-image-src="{{ asset('assets/front/img/' . $bs->team_bg) }}" -->
<!--         @endif>-->
        
        <!-- Floating Geometric Elements -->
<!--        <div class="geometric-bg">-->
<!--            <div class="floating-shape shape-1"></div>-->
<!--            <div class="floating-shape shape-2"></div>-->
<!--            <div class="floating-shape shape-3"></div>-->
<!--        </div>-->

<!--        <div class="container-fluid px-4 px-lg-5">-->
            <!-- Header Section -->
<!--            <div class="team-header text-center mb-5">-->
<!--                <div class="row justify-content-center">-->
<!--                    <div class="col-lg-8">-->
<!--                        <div class="section-badge">-->
<!--                            <span class="badge-text">{{ convertUtf8($bs->team_section_title) }}</span>-->
<!--                        </div>-->
<!--                        <h2 class="display-4 fw-bold text-white mb-4">-->
<!--                            {{ convertUtf8($bs->team_section_subtitle) }}-->
<!--                        </h2>-->
<!--                        <div class="section-divider">-->
<!--                            <div class="divider-line"></div>-->
<!--                            <div class="divider-dot"></div>-->
<!--                            <div class="divider-line"></div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

            <!-- Team Grid -->
<!--            <div class="team-grid">-->
<!--                <div class="row g-4">-->
<!--                    @foreach ($members as $key => $member)-->
<!--                        <div class="col-lg-3 col-md-6">-->
<!--                            <div class="team-card" data-aos="fade-up" data-aos-delay="{{ $key * 100 }}">-->
<!--                                <div class="card-inner">-->
                                    <!-- Front of card -->
<!--                                    <div class="card-front">-->
<!--                                        <div class="member-image-wrapper">-->
<!--                                            <div class="image-overlay"></div>-->
<!--                                            <img class="member-image lazy"-->
<!--                                                 data-src="{{ asset('assets/front/img/members/' . $member->image) }}"-->
<!--                                                 alt="{{ convertUtf8($member->name) }}">-->
<!--                                            <div class="hover-gradient"></div>-->
<!--                                        </div>-->
<!--                                        <div class="member-info">-->
<!--                                            <h4 class="member-name">{{ convertUtf8($member->name) }}</h4>-->
<!--                                            <p class="member-position">{{ convertUtf8($member->rank) }}</p>-->
<!--                                            <div class="info-divider"></div>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                    
                                    <!-- Back of card (Social Links) -->
<!--                                    <div class="card-back">-->
<!--                                        <div class="social-content">-->
<!--                                            <h4 class="connect-title">Let's Connect</h4>-->
<!--                                            <div class="social-links">-->
<!--                                                @if (!empty($member->facebook))-->
<!--                                                    <a href="{{ $member->facebook }}" class="social-link facebook">-->
<!--                                                        <i class="fab fa-facebook-f"></i>-->
<!--                                                        <span class="social-tooltip">Facebook</span>-->
<!--                                                    </a>-->
<!--                                                @endif-->
<!--                                                @if (!empty($member->twitter))-->
<!--                                                    <a href="{{ $member->twitter }}" class="social-link twitter">-->
<!--                                                        <i class="fab fa-twitter"></i>-->
<!--                                                        <span class="social-tooltip">Twitter</span>-->
<!--                                                    </a>-->
<!--                                                @endif-->
<!--                                                @if (!empty($member->linkedin))-->
<!--                                                    <a href="{{ $member->linkedin }}" class="social-link linkedin">-->
<!--                                                        <i class="fab fa-linkedin-in"></i>-->
<!--                                                        <span class="social-tooltip">LinkedIn</span>-->
<!--                                                    </a>-->
<!--                                                @endif-->
<!--                                                @if (!empty($member->instagram))-->
<!--                                                    <a href="{{ $member->instagram }}" class="social-link instagram">-->
<!--                                                        <i class="fab fa-instagram"></i>-->
<!--                                                        <span class="social-tooltip">Instagram</span>-->
<!--                                                    </a>-->
<!--                                                @endif-->
<!--                                            </div>-->
<!--                                            <div class="card-pattern"></div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    @endforeach-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--@endif-->


    @if ($be->pricing_section == 1)
        <!-- pricing begin -->
        <div class="pricing-tables">
            <div class="container">
                <div class="row text-center">
                    <div class="col-lg-6 offset-lg-3">
                        <span class="section-title">{{ convertUtf8($be->pricing_title) }}</span>
                        <h2 class="section-summary">{{ convertUtf8($be->pricing_subtitle) }}</h2>
                    </div>
                </div>
                <div class="pricing-carousel common-carousel owl-carousel owl-theme">
                    @foreach ($packages as $key => $package)
                        <div class="single-pricing-table">
                            <span class="title">{{ convertUtf8($package->title) }}</span>
                            <div class="price">
                                <h1>
                                    {{ $bex->base_currency_symbol_position == 'left' ? $bex->base_currency_symbol : '' }}{{ $package->price }}{{ $bex->base_currency_symbol_position == 'right' ? $bex->base_currency_symbol : '' }}
                                </h1>
                            </div>
                            <div class="features">
                                {!! replaceBaseUrl(convertUtf8($package->description)) !!}
                            </div>

                            @if ($package->order_status == 1)
                                <a href="{{ route('front.packageorder.index', $package->id) }}"
                                    class="pricing-btn">{{ __('Place Order') }}</a>
                            @endif

                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <!-- pricing end -->
    @endif



    @if ($bs->news_section == 1)
        <!--    blog section start   -->
        <div class="blog-section section-padding">
            <div class="container">
                <div class="row text-center">
                    <div class="col-lg-6 offset-lg-3">
                        <span class="section-title">{{ convertUtf8($bs->blog_section_title) }}</span>
                        <h2 class="section-summary">{{ convertUtf8($bs->blog_section_subtitle) }}</h2>
                    </div>
                </div>
                <div class="blog-carousel owl-carousel owl-theme common-carousel">
                    @foreach ($blogs as $key => $blog)
                        <div class="single-blog">
                            <div class="blog-img-wrapper">
                                <img class="lazy" data-src="{{ asset('assets/front/img/blogs/' . $blog->main_image) }}"
                                    alt="">
                            </div>
                            <div class="blog-txt">
                                @php
                                    $blogDate = \Carbon\Carbon::parse($blog->created_at)->locale("$currentLang->code");
                                    $blogDate = $blogDate->translatedFormat('jS F, Y');
                                @endphp

                                <p class="date"><small>{{ _('By') }} <span
                                            class="username">{{ _('Admin') }}</span></small> |
                                    <small>{{ $blogDate }}</small>
                                </p>

                                <h4 class="blog-title"><a
                                        href="{{ route('front.blogdetails', [$blog->slug, $blog->id]) }}">{{ strlen($blog->title) > 40 ? mb_substr($blog->title, 0, 40, 'utf-8') . '...' : $blog->title }}</a>
                                </h4>


                                <p class="blog-summary">{!! strlen(strip_tags($blog->content)) > 100
                                    ? mb_substr(strip_tags($blog->content), 0, 100, 'utf-8') . '...'
                                    : strip_tags($blog->content) !!}</p>


                                <a href="{{ route('front.blogdetails', [$blog->slug, $blog->id]) }}"
                                    class="readmore-btn"><span>{{ __('Read More') }}</span></a>

                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <!--    blog section end   -->
    @endif


    @if ($bs->call_to_action_section == 1)
        <!--    call to action section start    -->
        <div class="cta-section"
            style="background-image: url('{{ asset('assets/front/img/' . $bs->cta_bg) }}');background-size:cover;">
            <div class="container">
                <div class="cta-content">
                    <div class="row">
                        <div class="col-md-9 col-lg-7">
                            <h3>{{ convertUtf8($bs->cta_section_text) }}</h3>
                        </div>
                        <div class="col-md-3 col-lg-5 contact-btn-wrapper">
                            <a href="{{ $bs->cta_section_button_url }}"
                                class="boxed-btn contact-btn"><span>{{ convertUtf8($bs->cta_section_button_text) }}</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--    call to action section end    -->
    @endif


    @if ($bs->partner_section == 1)
        <!--   partner section start    -->
        <div class="partner-section">
            <div class="container {{ $be->theme_version != 'dark' ? 'top-border' : '' }}">
                <div class="row">
                    <div class="col-md-12">
                        <div class="partner-carousel owl-carousel owl-theme common-carousel">
                            @foreach ($partners as $key => $partner)
                                <a class="single-partner-item d-block" href="{{ $partner->url }}" target="_blank">
                                    <div class="outer-container">
                                        <div class="inner-container">
                                            <img class="lazy"
                                                data-src="{{ asset('assets/front/img/partners/' . $partner->image) }}"
                                                alt="">
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--   partner section end    -->
    @endif
     <style>
    .modern-team-section {
        padding: 120px 0;
        position: relative;
        overflow: hidden;
        min-height: 70vh;
    }

    /* Geometric Background Elements */
    .geometric-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }

    .floating-shape {
        position: absolute;
        opacity: 0.1;
        animation: float 6s ease-in-out infinite;
    }

    .shape-1 {
        top: 10%;
        right: 10%;
        width: 100px;
        height: 100px;
        background: linear-gradient(45deg, #3b82f6, #8b5cf6);
        border-radius: 50%;
        animation-delay: 0s;
    }

    .shape-2 {
        top: 60%;
        left: 5%;
        width: 80px;
        height: 80px;
        background: linear-gradient(45deg, #f59e0b, #ef4444);
        transform: rotate(45deg);
        animation-delay: 2s;
    }

    .shape-3 {
        bottom: 20%;
        right: 20%;
        width: 60px;
        height: 60px;
        background: linear-gradient(45deg, #10b981, #06b6d4);
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        animation-delay: 4s;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(10deg); }
    }

    /* Header Styles */
    .team-header {
        position: relative;
        z-index: 2;
        margin-bottom: 80px;
    }

    .section-badge {
        display: inline-block;
        margin-bottom: 20px;
    }

    .badge-text {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        color: white;
        padding: 8px 24px;
        border-radius: 50px;
        font-size: 24px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
        overflow: hidden;
    }

    .badge-text::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }

    .badge-text:hover::before {
        left: 100%;
    }

    .section-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
    }

    .divider-line {
        width: 60px;
        height: 5px;
        background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    }

    .divider-dot {
        width: 12px;
        height: 12px;
        background: #3b82f6;
        border-radius: 50%;
        margin: 0 15px;
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    }

    /* Team Grid */
    .team-grid {
        position: relative;
        z-index: 2;
    }

    .team-card {
        height: 450px;
        perspective: 1000px;
        cursor: pointer;
    }

    .card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
    }

    .team-card:hover .card-inner {
        transform: rotateY(180deg);
    }

    .card-front, .card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 20px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
    }

    .card-back {
        transform: rotateY(180deg);
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(139, 92, 246, 0.9));
    }

    /* Front Card Styles */
    .member-image-wrapper {
        position: relative;
        height: 300px;
        overflow: hidden;
    }

    .member-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
        z-index: 1;
    }

    .hover-gradient {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        z-index: 2;
    }

    .member-info {
        padding: 25px;
        position: relative;
        z-index: 3;
    }

    .member-name {
        color: white;
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 8px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .member-position {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 15px;
    }

    .info-divider {
        width: 40px;
        height: 2px;
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        margin: 0 auto;
        border-radius: 2px;
    }

    /* Back Card Styles */
    .social-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 40px;
        position: relative;
    }

    .connect-title {
        color: white;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 30px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .social-links {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        color: white;
        text-decoration: none;
        font-size: 18px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .social-link:hover {
        transform: translateY(-5px) scale(1.1);
        background: white;
        color: #1f2937;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }

    .social-tooltip {
        position: absolute;
        bottom: -35px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }

    .social-link:hover .social-tooltip {
        opacity: 1;
    }

    .card-pattern {
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 20px 20px;
        animation: pattern-move 20s linear infinite;
        pointer-events: none;
    }

    @keyframes pattern-move {
        0% { transform: translate(0, 0) rotate(0deg); }
        100% { transform: translate(-20px, -20px) rotate(360deg); }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .modern-team-section {
            padding: 80px 0;
        }
        
        .team-header {
            margin-bottom: 60px;
        }
        
        .team-card {
            height: 400px;
            margin-bottom: 30px;
        }
        
        .social-links {
            gap: 15px;
        }
        
        .social-link {
            width: 45px;
            height: 45px;
            font-size: 16px;
        }
    }

    @media (max-width: 480px) {
        .badge-text {
            font-size: 12px;
            padding: 6px 18px;
        }
        
        .display-4 {
            font-size: 2rem;
        }
    }
    </style>
@endsection