{{-- @if ($contents->count() > 0)
<section class="pt-5 mt-5" style="background-color:#85fe9c;">
    <div class="container">
        <div class="row justify-content-between mb-3 mb-sm-5">
            <div class="col-auto">
                <h2>From Our Blogs</h2>
            </div>
             <div class="col-auto">
                <a href="{{route('fe.blog-lists')}}" class="btn btn-yellow" target="_blank">View All..
                </a>
            </div> 
        </div>
     
        <div class="row justify-content-center" id="blog-all">
            @foreach ($contents as $content)
			<div class="col-md-6 col-xl-4 item  article-items mb-4">
				<div class="card">
					<img class="img-fluid card-img" src="{{asset('themes/default/images/homepage-card-blog.jpg')}}" alt="Card image">
					<div class="card-img-overlay">
							<h4>{{str_limit($content->title , $limit = 24, $end = '...')}}</h4>
							<p class="text-gray">{{$content->author?  $content->author." / " : null}}{{site_date_format($content->created_at)}}</p>
							<p class="card-text text-weight">{!! str_limit($content->short_text, $limit = 125, $end = '...') !!}</p>
								<a href="{{$content->getLink()}}" class="btn btn-white" style="background-color: #81e3ff;" target="_blank">More About</a>
					</div>
				</div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif --}}
@push('style')
    <style>
        .features .cards {
            border-radius: 0.4rem;
            background: #ffff;
            transition: all ease 0.4s;
            box-shadow: 0 0 10px 0 rgb(62 28 131 / 7%);
            -webkit-box-shadow: 0 0 10px 0 rgb(62 28 131 / 7%);
            /* padding: 15px; */
            border-bottom: 5px solid var(--color-secondary);
            position: relative;
            overflow: hidden;
        }

        .features .cards a {
            color: #fff;
        }

        .features .cards:hover {
            transform: scale(1.1);
        }

        .features .icons {
            display: inline-flex;
            width: 62px;
            height: 62px;
            margin: 2rem auto;
            justify-content: center;
            align-items: center;
            background: var(--color-primary);
            border-radius: 50%;
            color: #ffffff;
            font-size: 25px;
            box-shadow: 0px 0px 0px 10px rgb(101 137 198 / 20%);
            -webkit-box-shadow: 0px 0px 0px 10px rgb(101 137 198 / 20%);
        }

        .features .contents p {
            margin: 0;
            font-size: 19px;
            line-height: 1.7;
        }

        .dark-mode .features .color_text p {
            color: #000;
        }

        .dark-mode .contents .txt {
            color: var(--color-primary) !important;
        }

        .more {
            max-height: 200px;
        }

        .dark-mode .contents span {
            color: #000 !important;
        }
    </style>
@endpush
<section class="features bg-background">
    <div class="container">
        <div class="col-lg-10 col-md-8 m-auto text-center " data-aos="fade-up">
            @php
                $title = json_decode($home_works['title'] ?? '');
                $description = json_decode($home_works['description'] ?? '');
            @endphp
            <!-- <h2 class="sec-head">{{ $title[0] ?? '' }}<span class="text-primary title_style"> {{ $title[1] ?? '' }}</span></h2> -->
            <!-- <p class="mt-4">{!! $description->description ?? '' !!}</p> -->
        </div>
        <div class="my-5 row gy-5 justify-content-center mt-5">
            <div class="col-lg-4 col-md-6 col-sm-6 " data-aos="fade-up" data-aos-delay="200">
                <div class="cards text-center">
                    <img src="{{ $home_works['image1'] ?? '' }}" width="416" height="200" alt="img" />
                    <div class="contents color_text p-3">
                        <h4>{{ $description->cards[0] ?? '' }}</h4>
                        <p class="dt-p-b " id="pread1">{!! Str::limit($description->card_description[0] ?? '', 100) !!}</p>
                        <p class="dt-p-b" id="pless1" style="display:none">
                            {!! Str::limit($description->card_description[0] ?? '', 100) !!}
                        </p>
                        <span id="read1" class="text-secondary" style="cursor: pointer;">Read >></span>
                        <span id="less1" class="text-secondary" style="display:none;cursor: pointer;">
                            << Less</span>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-6 " data-aos="fade-up" data-aos-delay="600">
                <div class="cards text-center bg-secondary text-white">
                    <a href="{{ route('fe.register') }}">
                        <img src="{{ $home_works['image2'] ?? '' }}" width="416" height="200" alt="img" />
                    </a>
                    <div class="contents  p-3">
                        <h4 class="text-primary">{{ $description->cards[1] ?? '' }}</h4>
                        <p class=" " id="pread2">{!! Str::limit($description->card_description[1], 100) ?? '' !!}</p>
                        <p class="  " id="pless2" style="display:none">{!! Str::limit($description->card_description[1]) ?? '' !!}</p>
                        <span id="read2" class="txt text-white" style="cursor: pointer;">Read >></span>
                        <span id="less2" class="txt text-white" style="display:none;cursor: pointer;">
                            << Less</span>
                    </div>

                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-6 " data-aos="fade-up" data-aos-delay="1000">
                <div class="cards text-center">
                    <img src="{{ $home_works['image3'] ?? '' }}" width="416" height="200" alt="img" />

                    <div class="contents color_text p-3">
                        <h4>{{ $description->cards[2] ?? '' }}</h4>
                        <p class="dt-p-b " id="pread3">{!! Str::limit($description->card_description[2], 100) ?? '' !!}</p>
                        <p class="dt-p-b " id="pless3" style="display:none">{!! Str::limit($description->card_description[2])  ?? '' !!}</p>
                        <span id="read3" class="text-secondary" style="cursor: pointer;">Read >></span>
                        <span id="less3" class="text-secondary" style="display:none;cursor: pointer;">
                            << Less</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@push('script')
    <script>
        $(document).ready(function() {
            var showChar = 100;
            var ellipsestext = "";
            var moretext = "Read More";
            var lesstext = "Read Less";


            $('.more').each(function() {
                var content = $(this).html();

                if (content.length > showChar) {

                    var c = content.substr(0, showChar);
                    var h = content.substr(showChar, content.length - showChar);

                    var html = c + '<span class="moreellipses">' + ellipsestext +
                        '&nbsp;</span><span class="morecontent"><span>' + h +
                        '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

                    $(this).html(html);
                }

            });

            $(".morelink").click(function() {
                if ($(this).hasClass("less")) {
                    $(this).removeClass("less");
                    $(this).html(moretext);
                } else {
                    $(this).addClass("less");
                    $(this).html(lesstext);
                }
                $(this).parent().prev().toggle();
                $(this).prev().toggle();
                return false;
            });
        });
    </script>

    <script>
        $("#read1").click(function() {
            $("#pread1").hide();
            $("#pless1").show();

            $("#less1").show();
            $("#read1").hide();

        });

        $("#less1").click(function() {
            $("#pread1").show();
            $("#pless1").hide();

            $("#less1").hide();
            $("#read1").show();
        });


        $("#read2").click(function() {
            $("#pread2").hide();
            $("#pless2").show();

            $("#less2").show();
            $("#read2").hide();

        });

        $("#less2").click(function() {
            $("#pread2").show();
            $("#pless2").hide();

            $("#less2").hide();
            $("#read2").show();
        });



        $("#read3").click(function() {
            $("#pread3").hide();
            $("#pless3").show();

            $("#less3").show();
            $("#read3").hide();

        });

        $("#less3").click(function() {
            $("#pread3").show();
            $("#pless3").hide();

            $("#less3").hide();
            $("#read3").show();
        });
    </script>
@endpush