@include('frontend.layouts.header')
    <body>
        <!-- Loader -->
        <div id="preloader">
            <div id="status">
                <div class="logo">
                    <img src="{{ asset('gallery/images/logo.png') }}" height="20" class="d-block mx-auto" alt="">
                </div>
                <div class="spinner">
                    <div class="bounce1"></div>
                    <div class="bounce2"></div>
                    <div class="bounce3"></div>
                </div>
            </div>
        </div>
        <!-- Loader -->
        
        <!-- Navbar Start -->
         <nav id="navbar" class="navbar navbar-expand-lg fixed-top navbar-custom navbar-light sticky">
    		<div class="container">
                <a class="navbar-brand" href="#">
                    <img src="{{ asset('gallery/photos/logo.png') }}" class="logo-light-mode" alt="">
                    <img src="{{ asset('gallery/photos/logo.png') }}" class="logo-dark-mode" alt="">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span data-feather="menu" class="fea icon-md"></span>
                </button><!--end button-->

                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul id="navbar-navlist" class="navbar-nav navbar-nav-link mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('home') }}">Home</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('home') }}">About Me</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('home') }}">Skills</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('home') }}">Experience</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('home') }}   ">Projects</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('home') }}">Blog</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('home') }}">Contact</a>
                        </li><!--end nav item-->
                    </ul>

                    <ul class="list-unstyled mb-0 mt-2 mt-sm-0 social-icon">
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="mdi mdi-linkedin"></i></a></li>
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="mdi mdi-twitter"></i></a></li>
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="mdi mdi-instagram"></i></a></li>
                    </ul>
                </div> 
            </div><!--end container-->
		</nav><!--end navbar-->
        <!-- Navbar End -->

        <!-- Home Start -->
        <section class="bg-half d-table w-100" style="background: url('{{ asset('gallery/images/home/bg-pages.jpg') }}')center center;">
            <div class="bg-overlay bg-overlay-white"></div>
            <div class="container">
                <div class="row mt-5 justify-content-center">
                    <div class="col-lg-12 text-center">
                        <div class="page-next-level">
                            <h4 class="title"> Three Reasons Visibility Matters in Supply Chain </h4>
                            <ul class="list-unstyled mt-3">
                                <li class="list-inline-item me-3"><i class="mdi mdi-tag-outline me-1"></i><a href="javascript:void(0)" class="text-muted">Photography</a></li>
                                <li class="list-inline-item me-3"><i class="mdi mdi-account-heart me-1"></i><a href="javascript:void(0)" class="text-muted">Cristino Murphy</a></li>
                                <li class="list-inline-item"><i class="mdi mdi-calendar-edit me-1"></i><span class="text-muted">25th April, 2020</span> </li>
                            </ul>
                            <ul class="page-next bg-light d-inline-block py-2 px-4 mt-3 rounded mb-0">
                                <li><a href="index.html" class="text-dark">Cristino</a></li>
                                <li><a href="page-blog.html" class="text-dark">Blog</a></li> 
                                <li>
                                    <span class="text-primary"> Blog Detail</span> 
                                </li> 
                            </ul>
                        </div>
                    </div>  <!--end col-->
                </div><!--end row-->
            </div> <!--end container-->
        </section><!--end section-->
        <!-- Home End -->

        <!-- Blog STart -->
        <section class="section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 col-md-4">
                        <div class="sticky-sidebar">
                            <img src="{{ asset('gallery/images/blog/single-1.jpg') }}" class="img-fluid rounded d-block" alt="">
                            <img src="{{ asset('gallery/images/blog/06.jpg') }}" class="img-fluid rounded mt-4" alt="">
                        </div>
                    </div>
                    <!-- BLog Start -->
                    <div class="col-lg-7 col-md-8 mt-4 mt-sm-0 pt-2 pt-sm-0">
                        <div class="blog position-relative overflow-hidden shadow rounded">
                            <div class="content p-4">
                                <h6 class="font-weight-normal"><i class="mdi mdi-tag text-primary me-1"></i><a href="javscript:void(0)" class="text-primary">Photography</a></h6>
                                <p class="text-muted mt-3">The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century. Lorem Ipsum is composed in a pseudo-Latin language which more or less corresponds to 'proper' Latin. It contains a series of real Latin words. This ancient dummy text is also incomprehensible, but it imitates the rhythm of most European languages in Latin script. </p>
                                <blockquote class="blockquote mt-3 p-3">
                                    <p class="text-muted mb-0 font-italic">" There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. "</p>
                                </blockquote>
                                <p class="text-muted">The advantage of its Latin origin and the relative meaninglessness of Lorum Ipsum is that the text does not attract attention to itself or distract the viewer's attention from the layout.</p>
                                <div class="post-meta mt-3">
                                    <ul class="list-unstyled mb-0">
                                        <li class="list-inline-item float-right">
                                            <ul class="list-unstyled">
                                                <li class="list-inline-item">Share :</li>
                                                <li class="list-inline-item"><a href="javascript:void(0)" class="text-muted"><i class="mdi mdi-facebook"></i></a></li>
                                                <li class="list-inline-item"><a href="javascript:void(0)" class="text-muted"><i class="mdi mdi-instagram"></i></a></li>
                                                <li class="list-inline-item"><a href="javascript:void(0)" class="text-muted"><i class="mdi mdi-google-plus"></i></a></li>
                                                <li class="list-inline-item"><a href="javascript:void(0)" class="text-muted"><i class="mdi mdi-twitter"></i></a></li>
                                            </ul>
                                        </li>
                                        <li class="list-inline-item me-2"><a href="javascript:void(0)" class="text-muted like"><i class="mdi mdi-heart-outline me-1"></i>33</a></li>
                                        <li class="list-inline-item"><a href="javascript:void(0)" class="text-muted comments"><i class="mdi mdi-comment-outline me-1"></i>08</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 pt-2 comment-area ">
                            <div class="p-4 shadow rounded">
                                <h5 class="page-title pb-3">Comments :</h5>
                                <ul class="media-list list-unstyled mb-0">
                                    <li class="d-flex mt-4">
                                        <a class="float-left pe-3 mt-2" href="#">
                                            <img class="img-fluid d-block mx-auto img-thumbnail rounded-circle" src="{{ asset('gallery/images/client/01.jpg') }}" alt="img">
                                        </a>

                                        <div class="flex-1">
                                            <a href="#" class="float-right text-muted"><i class="mdi mdi-reply"></i>&nbsp; Reply</a>
                                            <h6 class="media-heading mb-0"><a href="javascript:void(0)" class="text-dark">Lorenzo Peterson</a></h6>
                                            <small class="text-muted">26th April, 2020 at 01:25 pm</small>
                                            <p class="mt-2 bg-light font-italic media-para text-muted rounded pt-3 pb-3 ps-4 pe-3 mb-0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal</p>
                                        </div>
                                    </li>

                                    <li class="d-flex mt-4">
                                        <a class="float-left pe-3 mt-2" href="#">
                                            <img class="img-fluid d-block mx-auto img-thumbnail rounded-circle" src="{{ asset('gallery/images/client/02.jpg') }}" alt="img">
                                        </a>

                                        <div class="flex-1">
                                            <a href="#" class="float-right text-muted"><i class="mdi mdi-reply"></i>&nbsp; Reply</a>
                                            <h6 class="media-heading mb-0"><a href="javascript:void(0)" class="text-dark">Tammy Camacho</a></h6>
                                            <small class="text-muted">26th April, 2020 at 03:55 pm</small>
                                            <p class="mt-2 bg-light font-italic media-para text-muted rounded pt-3 pb-3 ps-4 pe-3 mb-0">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour</p>
                                        </div>
                                    </li>

                                    <li class="d-flex mt-4">
                                        <a class="float-left pe-3 mt-2" href="#">
                                            <img class="img-fluid d-block mx-auto img-thumbnail rounded-circle" src="{{ asset('gallery/images/client/03.jpg') }}" alt="img">
                                        </a>

                                        <div class="flex-1">
                                            <a href="#" class="float-right text-muted"><i class="mdi mdi-reply"></i>&nbsp; Reply</a>
                                            <h6 class="media-heading mb-0"><a href="javascript:void(0)" class="text-dark">Eleanor Crisp</a></h6>
                                            <small class="text-muted">26th April, 2020 at 05:44 pm</small>
                                            <p class="mt-2 bg-light font-italic media-para text-muted rounded pt-3 pb-3 ps-4 pe-3 mb-0">All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
                                            
                                            <div class="d-flex sub_media mt-4">
                                                <a class="float-left pe-3" href="#">
                                                    <img class="img-fluid d-block mx-auto img-thumbnail rounded-circle" src="{{ asset('gallery/images/client/04.jpg') }}" alt="img">
                                                </a>
                                                <div class="flex-1">
                                                    <a href="#" class="float-right text-muted"><i class="mdi mdi-reply"></i>&nbsp; Reply</a>
                                                    <h6 class="media-heading mb-0"><a href="javascript:void(0)" class="text-dark">Richard Combs</a></h6>
                                                    <small class="text-muted">26th April, 2020 at 06:14 am</small>
                                                    <p class="mt-2 bg-light font-italic media-para text-muted rounded pt-3 pb-3 ps-4 pe-3 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="mt-4 pt-2">
                            <div class="p-4 shadow rounded">
                                <h5 class="page-title pb-3">Leave A Comment :</h5>
                                <form>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <textarea id="message" placeholder="Your Comment" rows="5" name="message" class="form-control border rounded" required=""></textarea>
                                            </div>
                                        </div><!--end col-->

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <input id="name" name="name" type="text" placeholder="Name" class="form-control border rounded" required="">
                                            </div>
                                        </div><!--end col-->

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <input id="email" type="email" placeholder="Email" name="email" class="form-control border rounded" required="">
                                            </div>
                                        </div><!--end col-->

                                        <div class="col-md-12">
                                            <div class="send">
                                            <button type="submit" class="btn btn-primary rounded">Send comment</button>
                                            </div>
                                        </div><!--end col-->
                                    </div><!--end row-->
                                </form><!--end form-->
                            </div>
                        </div>
                    </div>
                    <!-- BLog End -->
                </div><!--end row-->
            </div><!--end container-->

            <div class="container mt-100 mt-60">
                <div class="row justify-content-center">
                    <div class="col-12 text-center">
                        <div class="section-title">
                            <div class="position-relative">
                                <h4 class="title text-uppercase mb-4">Related Post</h4>
                                <div>
                                    <div class="title-box"></div>
                                    <div class="title-line"></div>
                                </div>
                            </div>
                            <p class="text-muted mx-auto para-desc mt-5 mb-0">Obviously I'm a Web Designer. Experienced with all stages of the development cycle for dynamic web projects.</p>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->

                <div class="row">
                    <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                        <div class="blog-post rounded shadow">
                            <img src="{{ asset('gallery/images/blog/01.jpg') }}" class="img-fluid rounded-top" alt="">
                            <div class="content pt-4 pb-4 p-3">
                                <ul class="list-unstyled d-flex justify-content-between post-meta">
                                            <li><i data-feather="user" class="fea icon-sm me-1"></i><a href="javascript:void(0)" class="text-dark">Cristino</a></li> 
                                            <li><i data-feather="tag" class="fea icon-sm me-1"></i><a href="javascript:void(0)" class="text-dark">Branding</a></li>                                    
                                        </ul>  
                                <h5 class="mb-3"><a href="page-blog-detail.html" class="title text-dark">Our Home Entertainment has Evolved Significantly</a></h5> 
                                <ul class="list-unstyled mb-0 pt-3 border-top d-flex justify-content-between">
                                    <li><a href="javascript:void(0)" class="text-dark">Read More <i data-feather="chevron-right" class="fea icon-sm"></i></a></li>
                                    <li><i class="mdi mdi-calendar-edit me-1"></i>10th April, 2020</li>
                                </ul>
                            </div><!--end content-->
                        </div><!--end blog post-->
                    </div><!--end col-->

                    <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                        <div class="blog-post rounded shadow">
                            <img src="{{ asset('gallery/images/blog/02.jpg') }}" class="img-fluid rounded-top" alt="">
                            <div class="content pt-4 pb-4 p-3">
                                <ul class="list-unstyled d-flex justify-content-between post-meta">
                                            <li><i data-feather="user" class="fea icon-sm me-1"></i><a href="javascript:void(0)" class="text-dark">Cristino</a></li> 
                                            <li><i data-feather="tag" class="fea icon-sm me-1"></i><a href="javascript:void(0)" class="text-dark">Branding</a></li>                                    
                                        </ul> 
                                <h5 class="mb-3"><a href="{{ route('blogs') }}" class="title text-dark">These Are The Voyages of The Starship Enterprise</a></h5>
                                <ul class="list-unstyled mb-0 pt-3 border-top d-flex justify-content-between">
                                    <li><a href="javascript:void(0)" class="text-dark">Read More <i data-feather="chevron-right" class="fea icon-sm"></i></a></li>
                                    <li><i class="mdi mdi-calendar-edit me-1"></i>10th April, 2020</li>
                                </ul>
                            </div><!--end content-->
                        </div><!--end blog post-->
                    </div><!--end col-->

                    <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                        <div class="blog-post rounded shadow">
                            <img src="{{ asset('gallery/images/blog/03.jpg') }}" class="img-fluid rounded-top" alt="">
                            <div class="content pt-4 pb-4 p-3">
                                <ul class="list-unstyled d-flex justify-content-between post-meta">
                                            <li><i data-feather="user" class="fea icon-sm me-1"></i><a href="javascript:void(0)" class="text-dark">Cristino</a></li> 
                                            <li><i data-feather="tag" class="fea icon-sm me-1"></i><a href="javascript:void(0)" class="text-dark">Branding</a></li>                                    
                                        </ul> 
                                <h5 class="mb-3"><a href="page-blog-detail.html" class="title text-dark">Three Reasons Visibility Matters in Supply Chain</a></h5>
                                <ul class="list-unstyled mb-0 pt-3 border-top d-flex justify-content-between">
                                    <li><a href="javascript:void(0)" class="text-dark">Read More <i data-feather="chevron-right" class="fea icon-sm"></i></a></li>
                                    <li><i class="mdi mdi-calendar-edit me-1"></i>10th April, 2020</li>
                                </ul>
                            </div><!--end content-->
                        </div><!--end blog post-->
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </section>
        <!-- Blog -->

        @include('frontend.layouts.footer')
        
        <!-- Back to top -->
        <a href="#" onclick="topFunction()" class="back-to-top rounded text-center" id="back-to-top"> 
            <i class="mdi mdi-chevron-up d-block"> </i> 
        </a>
        <!-- Back to top -->
        
        <!-- Style switcher -->
        <div id="style-switcher" class="bg-light border p-3 pt-2 pb-2" onclick="toggleSwitcher()">
            <div>
                <h6 class="title text-center">Select Your Color</h6>
                <ul class="pattern">
                    <li class="list-inline-item">
                        <a class="color1" href="javascript: void(0);" onclick="setColor('default')"></a>
                    </li>
                    <li class="list-inline-item">
                        <a class="color2" href="javascript: void(0);" onclick="setColor('blue')"></a>
                    </li>
                    <li class="list-inline-item">
                        <a class="color3" href="javascript: void(0);" onclick="setColor('light-green')"></a>
                    </li>
                    <li class="list-inline-item">
                        <a class="color4" href="javascript: void(0);" onclick="setColor('yellow')"></a>
                    </li>
                    <li class="list-inline-item">
                        <a class="color5" href="javascript: void(0);" onclick="setColor('light-yellow')"></a>
                    </li>
                    <li class="list-inline-item">
                        <a class="color6" href="javascript: void(0);" onclick="setColor('purple')"></a>
                    </li>
                </ul>

                <h6 class="title text-center pt-3 mb-0 border-top">Theme Option</h6>
                <ul class="text-center list-unstyled mb-0">
                    <li class="d-grid"><a href="javascript:void(0)" class="btn btn-sm btn-block btn-primary rtl-version t-rtl-light mt-2" onclick="setTheme('style-rtl')">RTL</a></li>
                    <li class="d-grid"><a href="javascript:void(0)" class="btn btn-sm btn-block btn-primary ltr-version t-ltr-light mt-2" onclick="setTheme('style')">LTR</a></li>
                    <li class="d-grid"><a href="javascript:void(0)" class="btn btn-sm btn-block btn-primary dark-rtl-version t-rtl-dark mt-2" onclick="setTheme('style-dark-rtl')">RTL</a></li>
                    <li class="d-grid"><a href="javascript:void(0)" class="btn btn-sm btn-block btn-primary dark-ltr-version t-ltr-dark mt-2" onclick="setTheme('style-dark')">LTR</a></li>
                    <li class="d-grid"><a href="javascript:void(0)" class="btn btn-sm btn-block btn-dark dark-version t-dark mt-2" onclick="setTheme('style-dark')">Dark</a></li>
                    <li class="d-grid"><a href="javascript:void(0)" class="btn btn-sm btn-block btn-dark light-version t-light mt-2" onclick="setTheme('style')">Light</a></li>
                </ul>

                <h6 class="title text-center pt-3 mb-0 border-top">Download</h6>
                <ul class="text-center list-unstyled mb-0">
                    <li><a href="https://1.envato.market/cristino" target="_blank" class="btn btn-sm btn-block btn-warning mt-2 w-100">Download</a></li>
                </ul>
            </div>
            <div class="bottom p-0">
                <a href="javascript: void(0);" class="settings bg-white shadow d-block"><i class="mdi mdi-cog ms-1 mdi-24px position-absolute mdi-spin text-primary"></i></a>
            </div>
        </div>
        <!-- end Style switcher -->

        <!-- javascript -->
        <script src="{{ asset('assests/js/bootstrap.bundle.min.js') }}"></script>
        <script src="{{ asset('assests/js/gumshoe.js') }}"></script>
        <!-- Feather icon -->
        <script src="{{ asset('assests/js/feather.min.js') }}"></script>
        <!-- Main Js -->
        <script src="{{ asset('assests/js/plugins.init.js') }}"></script>
        <script src="{{ asset('assests/js/app.js') }}"></script>
    </body>
</html>