@extends('website.desktop.layouts.app')
@section('title') India’s most Trending and reliable study abroad blogs & News - Gradding @endsection
@section('description') Gradding provides you complete information related to your all queries about study abroad & assist you with the industry best experts. @endsection

@section('main')
<main>
	<!-- Blog Slider View -->
    <section class="blog-slider-section">
        <div class="container">
           <div class="blog-slider">
               <div class="blogs">
                @foreach($populars as $popular)
                    <div class="blog">
                        <img class="blog-image" width="100%" height="100%" data-src="{{@$popular->getImageUrlAttribute()}}" alt="Blog Image">
                        <div class="blog-detail">
                            <p class="blog-heading">
                                {{@$popular->header_title}}
                            </p>
                            <p class="blog-description">
                                {{@$popular->header_description}}
                            </p>
                            <a class="blog-visit" href="{{url('/blog/'.@$popular->category->url.'/'.@$popular->url)}}">Visit Blog
                                <span class="blog-visit-arrow">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
                                        <path d="M10.3125 3.3125L14.0625 8M14.0625 8L10.3125 12.6875M14.0625 8H0.9375" stroke="#4E4949" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                            </a>
                        </div>
                    </div>
                    @endforeach
                    {{-- <div class="blog">
                        <img class="blog-image" width="100%" height="100%" data-src="{{ asset('frontend') }}/assets-desktop/images/card-image.png" alt="">
                        <div class="blog-detail">
                            <p class="blog-heading">
                                7 Changes Rishi Sunak Government Making for Study in the UK
                            </p>
                            <p class="blog-description">
                                Monash is not just a university. It’s the testimony of history, heritage and legacy of the UK. Established around 11th Century, this university is on.
                            </p>
                            <a class="blog-visit">Visit Blog
                                <span class="blog-visit-arrow">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
                                        <path d="M10.3125 3.3125L14.0625 8M14.0625 8L10.3125 12.6875M14.0625 8H0.9375" stroke="#4E4949" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                      </svg>
                                </span>
                            </a>
                        </div>
                    </div> --}}
               </div>
               <div class="blog-offer-card">
                <div class="gradding-offer">
                    <p class="offer-title">What Gradding Offers for you!!</p>
                    <div class="gradding-offer-card">
                        <div class="study-plan">
                            <span class="svg-icons">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <circle cx="20" cy="20" r="20" fill="#FDF1E6"/>
                                    <path d="M27 23.5498V14.5098C27 13.6046 26.3197 12.9463 25.4859 13.0169H25.442C23.9718 13.1462 21.7445 13.9573 20.4937 14.7919L20.3731 14.8742C20.1756 15.0036 19.8354 15.0036 19.6269 14.8742L19.4514 14.7567C18.2116 13.922 15.9843 13.1344 14.5141 13.0051C13.6803 12.9346 13 13.6046 13 14.4981V23.5498C13 24.2668 13.5486 24.9487 14.2179 25.031L14.4153 25.0662C15.9294 25.2778 18.2775 26.1125 19.616 26.9001L19.6489 26.9118C19.8354 27.0294 20.1426 27.0294 20.3182 26.9118C21.6567 26.1125 24.0157 25.2896 25.5407 25.0662L25.7712 25.031C26.4514 24.9487 27 24.2786 27 23.5498Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M20 16V26" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                  </svg></span>
                            <div class="study-plan-details">
                                <p class="study-plan-title">Customized study plans</p>
                                <p class="study-plan-detail">Open Insta Save Account in 4
                                    minutes.</p>
                                <a href="javascript:;" class="study-plan-apply">Apply Now <svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
                                    <path d="M1.6665 0.988281L5.1665 4.48828L1.6665 7.98828" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                  </svg></a>
                            </div>
                        </div>
                        <div class="study-plan">
                            <span class="svg-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M8.24683 1.43453L14.2468 3.83451C14.4802 3.92785 14.6668 4.20784 14.6668 4.45451V6.66785C14.6668 7.03451 14.3668 7.33451 14.0002 7.33451H2.00016C1.6335 7.33451 1.3335 7.03451 1.3335 6.66785V4.45451C1.3335 4.20784 1.52017 3.92785 1.7535 3.83451L7.7535 1.43453C7.88683 1.3812 8.11349 1.3812 8.24683 1.43453Z" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M14.6668 14.6667H1.3335V12.6667C1.3335 12.3 1.6335 12 2.00016 12H14.0002C14.3668 12 14.6668 12.3 14.6668 12.6667V14.6667Z" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M2.6665 11.9987V7.33203" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M5.3335 11.9987V7.33203" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M8 11.9987V7.33203" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M10.6665 11.9987V7.33203" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M13.3335 11.9987V7.33203" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M0.666504 14.668H15.3332" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M8 5.66797C8.55228 5.66797 9 5.22025 9 4.66797C9 4.11568 8.55228 3.66797 8 3.66797C7.44772 3.66797 7 4.11568 7 4.66797C7 5.22025 7.44772 5.66797 8 5.66797Z" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                  </svg>
                            </span>
                            <div class="study-plan-details">
                                <p class="study-plan-title">University Admission</p>
                                <p class="study-plan-detail">Open Insta Save Account in 4
                                    minutes.</p>
                                    <a href="javascript:;" class="study-plan-apply">Apply Now <svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
                                        <path d="M1.6665 0.988281L5.1665 4.48828L1.6665 7.98828" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                      </svg></a>
                            </div>
                        </div>
                        <div class="study-plan">
                            <span class="svg-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M14.6668 6.66536V9.9987C14.6668 13.332 13.3335 14.6654 10.0002 14.6654H6.00016C2.66683 14.6654 1.3335 13.332 1.3335 9.9987V5.9987C1.3335 2.66536 2.66683 1.33203 6.00016 1.33203H9.3335" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M14.6668 6.66536H12.0002C10.0002 6.66536 9.3335 5.9987 9.3335 3.9987V1.33203L14.6668 6.66536Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M4.6665 8.66797H8.6665" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M4.6665 11.332H7.33317" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                  </svg>
                            </span>
                            <div class="study-plan-details">
                                <p class="study-plan-title">Test Preparation</p>
                                <p class="study-plan-detail">Open Insta Save Account in 4
                                    minutes.</p>
                                    <a href="javascript:;" class="study-plan-apply">Apply Now <svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
                                        <path d="M1.6665 0.988281L5.1665 4.48828L1.6665 7.98828" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                      </svg></a>
                            </div>
                        </div>
                        <div class="study-plan">
                            <span class="svg-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path opacity="0.4" d="M9.50765 10.6641H6.17432" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M8.43997 1.67746L8.41997 1.72412L6.48664 6.21079H4.58664C4.13331 6.21079 3.69997 6.30412 3.30664 6.47079L4.47331 3.68412L4.49997 3.61745L4.54664 3.51079C4.55997 3.47079 4.57331 3.43079 4.59331 3.39745C5.46664 1.37746 6.45331 0.917455 8.43997 1.67746Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12.0335 6.34635C11.7335 6.25302 11.4135 6.21302 11.0935 6.21302H6.48682L8.42015 1.72635L8.44015 1.67969C8.54015 1.71302 8.63348 1.75969 8.73348 1.79969L10.2068 2.41969C11.0268 2.75969 11.6001 3.11302 11.9468 3.53969C12.0135 3.61969 12.0668 3.69302 12.1135 3.77969C12.1735 3.87302 12.2202 3.96635 12.2468 4.06635C12.2735 4.12635 12.2935 4.18635 12.3068 4.23969C12.4868 4.79969 12.3802 5.48635 12.0335 6.34635Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M14.348 9.46427V10.7643C14.348 10.8976 14.3413 11.0309 14.3346 11.1643C14.208 13.4909 12.908 14.6643 10.4413 14.6643H5.24131C5.08131 14.6643 4.92131 14.6509 4.76798 14.6309C2.64798 14.4909 1.51464 13.3576 1.37464 11.2376C1.35464 11.0843 1.34131 10.9243 1.34131 10.7643V9.46427C1.34131 8.12427 2.15464 6.97094 3.31464 6.47094C3.71464 6.30427 4.14131 6.21094 4.59464 6.21094H11.1013C11.428 6.21094 11.748 6.2576 12.0413 6.34427C13.368 6.75094 14.348 7.99094 14.348 9.46427Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M4.4735 3.68359L3.30683 6.47026C2.14683 6.97026 1.3335 8.12359 1.3335 9.46359V7.51026C1.3335 5.61693 2.68016 4.03693 4.4735 3.68359Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M14.3457 7.51307V9.46641C14.3457 7.99974 13.3724 6.75307 12.0391 6.35307C12.3857 5.48641 12.4857 4.80641 12.3191 4.23974C12.3057 4.17974 12.2857 4.11974 12.2591 4.06641C13.4991 4.70641 14.3457 6.01974 14.3457 7.51307Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                  </svg>
                            </span>
                            <div class="study-plan-details">
                                <p class="study-plan-title">Smooth Visa process</p>
                                <p class="study-plan-detail">Open Insta Save Account in 4
                                    minutes.</p>
                                    <a href="javascript:;" class="study-plan-apply">Apply Now <svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
                                        <path d="M1.6665 0.988281L5.1665 4.48828L1.6665 7.98828" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                      </svg></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gradding-offer choose-country">
                    <p class="offer-title">Choose Country to Study Abroad</p>
                    <div class="country-card">
                       <div class="country-section">
                        <img width="100%" height="100%" data-src="{{ asset('frontend') }}/assets-desktop/images/usa.png" alt="">
                        <a class="country-name" href="{{url('/us')}}">USA</a>
                       </div>
                       <div class="country-section">
                        <img width="100%" height="100%" data-src="{{ asset('frontend') }}/assets-desktop/images/uk.png" alt="">
                        <a class="country-name" href="{{url('/uk')}}">UK</a>
                       </div>
                       <div class="country-section">
                        <img width="100%" height="100%" data-src="{{ asset('frontend') }}/assets-desktop/images/au.png" alt="">
                        <a class="country-name" href="{{url('/au')}}">Australia</a>
                       </div>
                       <div class="country-section">
                        <img width="100%" height="100%" data-src="{{ asset('frontend') }}/assets-desktop/images/hungary.png" alt="">
                        <a class="country-name" href="{{url('/mt')}}">Hungary</a>
                       </div>
                       <div class="country-section">
                        <img width="100%" height="100%" data-src="{{ asset('frontend') }}/assets-desktop/images/malta.png" alt="">
                        <a class="country-name" href="{{url('/hu')}}">Malta</a>
                       </div>
                       <div class="country-section">
                       <a href="/universities" class="view-all"  aria-label='view-all'>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <g clip-path="url(#clip0_1475_17201)">
                              <path d="M10.9927 3.3125L14.7427 8M14.7427 8L10.9927 12.6875M14.7427 8H1.61768" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                              <clipPath id="clip0_1475_17201">
                                <rect width="15" height="15" fill="white" transform="translate(0.680176 0.5)"/>
                              </clipPath>
                            </defs>
                          </svg>
                        </a>
                        <a class="country-name" href="/universities" aria-label='view-all'>View All</a>
                       </div>
                    </div>
                </div>

                <div class="gradding-offer call-us-now">
                   <p class="have-a-dream">Have a dream to Study Abroad? Call us Now</p>
                    <p class="call-phone-number" >
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M21.97 18.33C21.97 18.69 21.89 19.06 21.72 19.42C21.55 19.78 21.33 20.12 21.04 20.44C20.55 20.98 20.01 21.37 19.4 21.62C18.8 21.87 18.15 22 17.45 22C16.43 22 15.34 21.76 14.19 21.27C13.04 20.78 11.89 20.12 10.75 19.29C9.6 18.45 8.51 17.52 7.47 16.49C6.44 15.45 5.51 14.36 4.68 13.22C3.86 12.08 3.2 10.94 2.72 9.81C2.24 8.67 2 7.58 2 6.54C2 5.86 2.12 5.21 2.36 4.61C2.6 4 2.98 3.44 3.51 2.94C4.15 2.31 4.85 2 5.59 2C5.87 2 6.15 2.06 6.4 2.18C6.66 2.3 6.89 2.48 7.07 2.74L9.39 6.01C9.57 6.26 9.7 6.49 9.79 6.71C9.88 6.92 9.93 7.13 9.93 7.32C9.93 7.56 9.86 7.8 9.72 8.03C9.59 8.26 9.4 8.5 9.16 8.74L8.4 9.53C8.29 9.64 8.24 9.77 8.24 9.93C8.24 10.01 8.25 10.08 8.27 10.16C8.3 10.24 8.33 10.3 8.35 10.36C8.53 10.69 8.84 11.12 9.28 11.64C9.73 12.16 10.21 12.69 10.73 13.22C11.27 13.75 11.79 14.24 12.32 14.69C12.84 15.13 13.27 15.43 13.61 15.61C13.66 15.63 13.72 15.66 13.79 15.69C13.87 15.72 13.95 15.73 14.04 15.73C14.21 15.73 14.34 15.67 14.45 15.56L15.21 14.81C15.46 14.56 15.7 14.37 15.93 14.25C16.16 14.11 16.39 14.04 16.64 14.04C16.83 14.04 17.03 14.08 17.25 14.17C17.47 14.26 17.7 14.39 17.95 14.56L21.26 16.91C21.52 17.09 21.7 17.3 21.81 17.55C21.91 17.8 21.97 18.05 21.97 18.33Z" stroke="#F3601E" stroke-width="2" stroke-miterlimit="10"/>
                            <path opacity="0.4" d="M18.5 9C18.5 8.4 18.03 7.48 17.33 6.73C16.69 6.04 15.84 5.5 15 5.5" stroke="#F3601E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path opacity="0.4" d="M22 9C22 5.13 18.87 2 15 2" stroke="#F3601E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          </svg>
                          {{@$website_setting->phone}}
                        </p>
                    <a class="call-button" href="tel:{{@$website_setting->phone}}">
                        CALL US NOW
                    </a>
                </div>
               </div>
           </div>
        </div>
    </section>
    <!-- Search & Tabbed Section -->
    <section>
        <div class="container">
            <div class="blog-heading-section">
                News <span>&</span> Blogs
            </div>
            <form class="blog-search-bar">
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.965 14.2539H15.755L20.745 19.2539L19.255 20.7439L14.255 15.7539V14.9639L13.985 14.6839C12.845 15.6639 11.365 16.2539 9.755 16.2539C6.165 16.2539 3.255 13.3439 3.255 9.75391C3.255 6.16391 6.165 3.25391 9.755 3.25391C13.345 3.25391 16.255 6.16391 16.255 9.75391C16.255 11.3639 15.665 12.8439 14.685 13.9839L14.965 14.2539ZM5.255 9.75391C5.255 12.2439 7.26501 14.2539 9.755 14.2539C12.245 14.2539 14.255 12.2439 14.255 9.75391C14.255 7.26391 12.245 5.25391 9.755 5.25391C7.26501 5.25391 5.255 7.26391 5.255 9.75391Z" fill="#AFB0B8"/>
                    </svg>
                </span>
                <input type="search" placeholder="Search Blogs" name="q">
                <span class="search-line"></span>
                <span class="country-dropdown">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                        <path d="M10.9997 20.1666C16.0623 20.1666 20.1663 16.0626 20.1663 11C20.1663 5.93737 16.0623 1.83331 10.9997 1.83331C5.93706 1.83331 1.83301 5.93737 1.83301 11C1.83301 16.0626 5.93706 20.1666 10.9997 20.1666Z" stroke="#AFB0B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <g opacity="0.4">
                            <path d="M7.33314 2.75H8.2498C6.4623 8.10333 6.4623 13.8967 8.2498 19.25H7.33314" stroke="#AFB0B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M13.75 2.75C15.5375 8.10333 15.5375 13.8967 13.75 19.25" stroke="#AFB0B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2.75 14.6667V13.75C8.10333 15.5375 13.8967 15.5375 19.25 13.75V14.6667" stroke="#AFB0B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2.75 8.25011C8.10333 6.46261 13.8967 6.46261 19.25 8.25011" stroke="#AFB0B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </g>
                    </svg>
                    <select name="" id="">
                        <option value="">Country</option>
                        <option value="">UK</option>
                        <option value="">USA</option>
                        <option value="">Australia</option>
                        <option value="">Hungary</option>
                        <option value="">Malta</option>
                    </select>
                </span>
            </form>
            <div class="blog-tab">
                <a href="{{url('blog/')}}"  class="tabs all tablinks active" >All</a>
                <a href="{{url('blog/news')}}"  class="tabs  tablinks " >News</a>
                <a href="{{url('blog/exams')}}"  class="tabs  tablinks " >Exams</a>
                <a href="{{url('blog/scholarships')}}"  class="tabs  tablinks " >Scholarships</a>
                <a href="{{url('blog/university')}}"  class="tabs  tablinks " >University</a>
                <a href="{{url('blog/jobs')}}"  class="tabs  tablinks " >Jobs</a>
                <a href="{{url('blog/visa')}}"  class="tabs  tablinks " >Visa</a>
                <a href="{{url('blog/finance')}}"  class="tabs  tablinks " >Finance</a>
                <a href="{{url('blog/travel')}}"  class="tabs  tablinks " >Travel</a>
            </div>
            <!-- Trending Blogs -->
            
            <div class="blog-div tabcontent" id="All">
                <p class="blog-title">Trending Blog</p>
                <div class="trending-blogs">
                    @foreach($trendings as $trending)
                    <!-- <a href="{{url('/blog').'/'.@$trending->category->url.'/'.@$trending->url}}" class="blog-card">
                        <img class="blog-image" data-src="{{@$trending->getImageUrlAttribute()}}" width="100%" height="100%" alt="Blog Image">
                        <div class="blog-details">
                            <p class="blog-category">
                                {{@$trending->category->name}}
                            </p>
                            <p class="blog-headline">
                                {{@$trending->header_title}}
                            </p>
                            <p class="blog-category blog-date">
                                {{dateMonthFormat(@$blog->display_date)}}
                            </p>
                        </div>
                    </a> -->
                    <a href="{{url('/blog').'/'.@$trending->category->url.'/'.@$trending->url}}" class="blog-card">
                        <img data-src="{{@$trending->getImageUrlAttribute()}}" width="100%" height="100%" alt="blog-image">
                        <div class="blog-detail">
                            <p>{{@$trending->category->name}}</p>
                            <h4>{{@$trending->header_title}}</h4>
                            <p>{{dateMonthFormat(@$blog->display_date)}}</p>
                        </div>
                    </a>
                    

                    @endforeach
                    {{-- <a href="javascript:;" class="blog-card">
                        <img class="blog-image" data-src="{{ asset('frontend') }}/assets-desktop/images/blog2.png" width="100%" height="100%" alt="">
                        <div class="blog-detail">
                            <p>
                                FINANCE
                            </p>
                            <h4>
                                5-Years Work Visa for Indians Mastering in France: PM Modi Says
                            </h4>
                            <p>
                                    10 July 2023
                            </p>
                        </div>
                    </a> --}}
                </div>
                 <!-- Recent Blog -->
                <div >
                    <p class="blog-title">Recent Blog</p>
                    <div class="recent-blog">
                        @foreach($blogs->take(3) as $blog)
                        <!-- <a href="{{url('/blog').'/'.@$blog->category->url.'/'.@$blog->url}}" class="blog-card recent-blog-card">
                            <img class="blog-image" data-src="{{@$blog->getImageUrlAttribute()}}" width="100%" height="100%" alt="Blog Image">
                            <div class="blog-details">
                                <p class="blog-category">
                                    {{@$blog->category->name}}
                                </p>
                                <p class="blog-headline">
                                    {{@$blog->header_title}}
                                </p>
                                <p class="blog-category blog-date">
                                    {{dateMonthFormat(@$blog->display_date)}}
                                </p>
                            </div>
                        </a> -->
                        <a href="{{url('/blog').'/'.@$blog->category->url.'/'.@$blog->url}}" class="blog-card">
                            <img data-src="{{@$blog->getImageUrlAttribute()}}" width="100%" height="100%" alt="Blog Image">
                            <div class="blog-details">
                                <p>
                                    {{@$blog->category->name}}
                                </p>
                                <h4>
                                    {{@$blog->header_title}}
                                </h4>
                                <p>
                                    {{dateMonthFormat(@$blog->display_date)}}
                                </p>
                            </div>
                        </a>
                        @endforeach
                        {{-- <a href="#" class="blog-card">
                            <img data-src="{{ asset('frontend') }}/assets-desktop/images/card-image.png" width="100%" height="100%" alt="Blog Image">
                            <div class="blog-details">
                                <p>
                                    FINANCE
                                </p>
                                <h4>
                                    7 Changes Rishi Sunak Government Making for Study in the UK
                                </h4>
                                <p>
                                    10 July 2023
                                </p>
                            </div>
                        </a>
                        <a href="#" class="blog-card">
                            <img data-src="{{ asset('frontend') }}/assets-desktop/images/card-image.png" width="100%" height="100%" alt="">
                            <div class="blog-details">
                                <p>
                                    FINANCE
                                </p>
                                <h4>
                                    7 Changes Rishi Sunak Government Making for Study in the UK
                                </h4>
                                <p>
                                    10 July 2023
                                </p>
                            </div>
                        </a> --}}
                    </div>
                    <div class="recent-blog">
                        @if(!empty($blogs[3]))
                        <a href="{{url('/blog').'/'.@$blogs[3]->category->url.'/'.@$blogs[3]->url}}" class="blog-card">
                            <img data-src="{{@$blogs[3]->image}}" width="100%" height="100%" alt="Blog Image">
                            <div class="blog-details">
                                <p>
                                    {{@$blogs[3]->category->name}}
                                </p>
                                <h4>
                                    {{@$blogs[3]->header_title}}
                                </h4>
                                <p>
                                    {{dateMonthFormat(@$blogs[3]->display_date)}}
                                </p>
                            </div>
                        </a>
                        @endif
                        <div  class="Adv-card">
                            <div class="adv-details">
                                <h4>
                                    Find your dream University
                                </h4>
                                <p>
                                    GET offer from Top Ranked Universities in 7 to 15 days*
                                </p>
                                <a href="javascript:;">
                                    Start now
                                </a>
                            </div>
                            <img class="adv-student-image" width="100%" height="100%" data-src="{{ asset('frontend') }}/assets-desktop/images/pngwing 1.png" alt="">
                        </div>
                        @if(!empty($blogs[4]))
                        <a href="{{url('/blog').'/'.@$blogs[4]->category->url.'/'.@$blogs[4]->url}}" class="blog-card">
                            <img data-src="{{@$blogs[4]->image}}" width="100%" height="100%" alt="Blog Image">
                            <div class="blog-details">
                                <p>
                                    {{@$blogs[4]->category->name}}
                                </p>
                                <h4>
                                    {{@$blogs[4]->header_title}}
                                </h4>
                                <p class="blog-category blog-date">
                                    {{dateMonthFormat(@$blogs[4]->display_date)}}
                                </p>
                            </div>
                        </a>
                        @endif
                    </div>
                </div>
                <!-- Recent Blog With Advertisement -->
            {{-- {{$blogs->links()}} --}}
            </div>
            <!-- Pagination -->
            <div class="pagination">
                <ul class="page">
                    {{-- <li class="page_left"><a href=""><span class=""><i class="fas fa-angles-left"></i></span></a></li>
                    <li class="page_numbers"><a href="">1</a></li>
                    <li class="page_numbers active"><a href="">2</a></li>
                    <li class="page_dots"><a href="">...</a></li>
                    <li class="page_numbers"><a href="">6</a></li>
                    <li class="page_right"><a href=""><span class=""><i class="fas fa-angles-right"></i></span></a></li> --}}
                    {{@$blogs->links()}}
                </ul>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="subscribe-banner">
                <div class="subscribe-card">
                    <h2 class="subscribe-title">Subscribe to our Newsletter for Newest Course Updates</h2>
                    <form class="subscribe-email subscribeForm">
                        <input type="text" placeholder="Enter your email" name="email">
                        <button type="submit" class="subscribe-button">Subscribe!</button>
                    </form>
                </div>
                <span class="circle-right">
                    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" viewBox="0 0 151 85" fill="none">
                        <path opacity="0.5"  class="fill-white opacity-4" d="M210.030,105.011 C210.030,163.014 163.010,210.029 105.012,210.029 C47.013,210.029 -0.005,163.014 -0.005,105.011 C-0.005,47.015 47.013,-0.004 105.012,-0.004 C163.010,-0.004 210.030,47.015 210.030,105.011 Z" fill="white"></path>
                    </svg>
                </span>
                <span class="circle-left">
                    <svg xmlns="http://www.w3.org/2000/svg" width="151" height="85" viewBox="0 0 151 85" fill="none">
                        <path opacity="0.5" d="M210.030 70.5C150.332 109.436 111.438 141 63.4597 141C15.4816 141 -23.4124 109.436 -23.4124 70.5C-23.4124 31.5639 15.4816 0 63.4597 0C111.438 0 150.332 31.5639 150.332 70.5Z" fill="white"/>
                      </svg>
                </span>
                <span class="circle-top">
                    <svg xmlns="http://www.w3.org/2000/svg" width="55" height="40" viewBox="0 0 55 40" fill="none">
                        <ellipse opacity="0.5" cx="27.2665" cy="19.5058" rx="27.1623" ry="19.5058" fill="white"/>
                      </svg>
                </span>
            </div>
        </div>
    </section>
</main>
{{-- @if (!auth('user')->check())
@include('website.desktop.partials.modals.blogModal');
@endif --}}
@endsection

@section('css')
	<link rel="stylesheet" type="text/css" href="{{ asset('frontend') }}/assets-desktop/css/blog.css?v={{env('ASSETS_VERSION')}}">
@endsection

@section('script')
<script src="{{asset('frontend')}}/assets-desktop/js/blog.js?v={{env('ASSETS_VERSION')}}"></script>
<script>
	$('.blogs').slick({
	arrows:true,
	nextArrow:"<button type='button' aria-label='next-arrow' class='slick-next slider-arrow'><svg xmlns='http://www.w3.org/2000/svg' width='16' height='26' viewBox='0 0 16 26' fill='none'><path d='M2.6665 2.66797L13.3332 13.3346L2.6665 24.0013' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg></button>",
		prevArrow:"<button type='button' aria-label='prev-arrow' class='slick-prev slider-arrow'><svg xmlns='http://www.w3.org/2000/svg' width='16' height='26' viewBox='0 0 16 26' fill='none'><path d='M13.3332 2.66797L2.6665 13.3346L13.3332 24.0013' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg></button>",
	});
	// function openTab(evt, tabName) {
	// let i, tabcontent, tablinks;
	// tabcontent = document.getElementsByClassName("tabcontent");
	// for (i = 0; i < tabcontent.length; i++) {
	// 	tabcontent[i].style.display = "none";
	// }
	// tablinks = document.getElementsByClassName("tablinks");
	// for (i = 0; i < tablinks.length; i++) {
	// 	tablinks[i].className = tablinks[i].className.replace(" active", "");
	// }
	// document.getElementById(tabName).style.display = "block";
	// evt.currentTarget.className += " active";
	// }
</script>
@endsection