{{-- @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">{!! $description->card_description[0] ?? '' !!}</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">{!! $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">{!! $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