@extends('partials.main')
@section('title')
    {{ 'Blog' }}
@endsection
@section('content')
    <style>
        .fa-star {
            color: #ff7550;
        }

        .tg-description span {
            color: #ff7550;
        }

        .tg-populartourvtwo .tg-populartourcontent .tg-description p {
            margin: 0 0 30px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            
        }

        .tg-populartourfoot {
            width: 100%;
            float: left;
            padding: 5px 0 0;
            border-top: 1px solid #e6e6e6;
        }

        .hotel-img {
            width: 410px !important;
            height: 273px !important;
            object-fit: cover;
        }

        /* card-dwon */
        .card {

            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        img.card-img-top {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .blog-cardbody {
            padding: 10px;
        }

        .card.card-dwon {
            margin-bottom: 20px;
        }

        .list-blog {
            margin-bottom: 20px;
        }


        .card-block {
            padding-bottom: 0px;
            padding-right: 15px;
            padding-left: 15px;
        }

        img.img-fluid.imt {
            height: 142px;
            object-fit: cover;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
            width: 100%;
        }

        p.card-text {
            margin: 0 0 0px !important;
        }

        .card-body.blog-cardbody {
            min-height: 200px;
            max-height: 200px;
        }

        a,
        a:hover,
        a:hover,
        a:focus,
        a:active {
            color: #5a5b5d;
        }

        li.des {
            padding: 30px;
        }

        .owl-carousel .owl-dot span {
            width: 10px;
            height: 10px;
            display: block;
            border-radius: 50%;
            background: rgba(239, 53, 2, 0.5);
        }

        .owl-carousel .owl-dot:hover span,
        .owl-carousel .owl-dot.active span {
            width: 12px;
            height: 12px;
            background: rgb(241, 100, 100);
        }

        .pick-btn {
            z-index: 1;
            color: #fff;
            height: 60px;
            padding: 0 50px;
            overflow: hidden;
            background: #ff7550;
            position: relative;
            text-align: center;
            display: inline-block;
            vertical-align: middle;
            text-transform: uppercase;
            font: 400 12px/60px 'Montserrat', Arial, Helvetica, sans-serif;
        }

        .pick-btn:hover {
            color: rgb(11, 11, 11);
            background: #fee133 !important;
        }

        li.des:hover {
            border: black;
            border: 2px solid #000;
            padding: 10px 20px;
            text-decoration: none;
            display: inline-block;
        }
        .owl-carousel .owl-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 22px;
}
.tg-guidecontenthead {
 
    padding: 0 0px 10px 0 !important;
}
    </style>



    <!--************************************
                                Inner Banner Start
                              *************************************-->
                              <section class="tg-parallax tg-innerbanner" data-appear-top-offset="600" data-parallax="scroll"
                              data-image-src="../images/Home/sunrise-4823732_1280.jpg">
                              <div class="tg-sectionspace tg-haslayout">
                                  <div class="container">
                                      <div class="row">
                                          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                              <h1>Blog</h1>
                                              <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus tempora exercitationem
                                                  deserunt.</h2>
                                              <ol class="tg-breadcrumb">
                                                  <li><a href="javascript:void(0);">Home</a></li>
                                                  <li class="tg-active">Hotel Reservations</li>
                                              </ol>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </section>
    <main id="tg-main" class="tg-main tg-haslayout">
        <!--************************************
                                    wellcome Start
                            *************************************-->
        <section class="tg-sectionspace tg-haslayout tg-bglight">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="tg-sectionhead">
                            <div class="tg-sectiontitle">
                                <h2> Trip Planning</h2>
                            </div>

                        </div>

                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">


                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint cupiditate iusto, recusandae
                                eaque laudantium ab qui non quaerat, blanditiis tempora nam impedit eligendi beatae.
                                Corrupti sapiente hic nobis suscipit necessitatibus?</p>

                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam eaque dolor est, ab animi
                                magnam hic fugit, obcaecati mollitia consectetur dolorem cum quae quam error atque doloribus
                                cupiditate natus? Neque!</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint maxime, est necessitatibus
                                quidem dolores tempora! Dignissimos porro facere maxime exercitationem eveniet eligendi,
                                numquam obcaecati provident repellendus ipsa, iste rem ipsam.</p>

                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <div id="tg-guidesslider" class="tg-guidesslider tg-guides owl-carousel">
                              
                                @foreach ($planning as $post)
                                <div class="item tg-guide">
                                    <figure><a href="javascript:void(0);"><img src="{{ asset('thumbnails/' . $post->thumbnail) }}"
                                                alt="image destination"></a></figure>
                                    <div class="tg-guidecontent">
                                        <div class="tg-guidecontenthead">
                                            <h3><a href="/blog-detail/{{$post->slug}}">{{$post->title}}</a></h3>
                                            

                                        </div>

                                    </div>
                                </div>   
                                @endforeach
                              
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--************************************
                                    Our Guides End
                            *************************************-->
        <!--************************************
                                    Call To Action Start
                            *************************************-->
        <section class="tg-parallax" data-appear-top-offset="600" data-parallax="scroll"
            data-image-src="../images/Home/beautiful-strawberry-garden-sunrise-doi-ang-khang-chiang-mai-thailand.jpg">
            <div class="tg-sectionspace tg-haslayout">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="tg-calltoaction">
                                <div class="tg-pattern"><img src="images/patternw.png" alt="image destination"></div>
                                <h2>Lorem ipsum dolor sit .</h2>
                                <div class="tg-description">
                                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam blanditiis aspernatur repudiandae, iste alias a.</p>
                                </div>
                                <a class="tg-btn" href="javascript:void(0);"><span>Explore Tour</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--************************************
                                    Call To Action End
                            *************************************-->
        <section class="tg-sectionspace tg-haslayout tg-bglight">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="tg-sectionhead">
                            <div class="tg-sectiontitle">
                                <h2> Travel Styles</h2>
                            </div>

                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <div id="tg-blogslider" class="tg-guidesslider tg-guides owl-carousel">
                                @foreach ($styles as $post)
                                <div class="item tg-guide">
                                    <figure><a href="/blog-detail/{{$post->slug}}"><img src="{{ asset('thumbnails/' . $post->thumbnail) }}"
                                                alt="image destination"></a></figure>
                                    <div class="tg-guidecontent">
                                        <div class="tg-guidecontenthead">
                                            <h3><a href="/blog-detail/{{$post->slug}}">{{$post->title}}</a></h3>
                                            

                                        </div>

                                    </div>
                                </div>   
                                @endforeach
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint cupiditate iusto, recusandae
                                eaque laudantium ab qui non quaerat, blanditiis tempora nam impedit eligendi beatae.
                                Corrupti sapiente hic nobis suscipit necessitatibus?</p>

                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam eaque dolor est, ab animi
                                magnam hic fugit, obcaecati mollitia consectetur dolorem cum quae quam error atque doloribus
                                cupiditate natus? Neque!</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint maxime, est necessitatibus
                                quidem dolores tempora! Dignissimos porro facere maxime exercitationem eveniet eligendi,
                                numquam obcaecati provident repellendus ipsa, iste rem ipsam.</p>




                        </div>

                    </div>
                </div>
            </div>
        </section>
        <!--************************************
                                    About Us Start
                            *************************************-->
        <section class="tg-aboutus">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <div class="row">
                    <figure data-vide-bg="poster: images/aboutus/img-01.jpg" data-vide-options="position: 0% 50%">
                        <div
                            style="position: absolute; z-index: -1; inset: 0px; overflow: hidden; background-size: cover; background-color: transparent; background-repeat: no-repeat; background-position: 0% 50%; background-image: url(&quot;http://wahabali.com/work/travelu/images/aboutus/img-01.jpg&quot;);">
                            <video autoplay="" loop="" muted=""
                                style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 0%; transform: translate(0%, -50%); visibility: hidden; opacity: 0; width: auto; height: 357px;"></video>
                        </div>
                    </figure>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <div class="row">
                    <div class="tg-textbox">
                        <div class="tg-sectiontitle">
                            <h2>Lorem ipsum dolor sit</h2>
                        </div>
                        <div class="tg-description">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus placeat alias cum
                                accusantium quas suscipit, neque id eaque ullam adipisci!</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero consequuntur doloremque earum
                                minus fuga assumenda ipsa cumque ad architecto molestiae commodi necessitatibus deleniti
                                reprehenderit, nostrum impedit rem saepe eum esse ipsa cumque ad architecto molestiae commodi necessitatibus deleniti
                                reprehenderit, nostrum impedit rem saepe eum esse</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 pull-right">
                <div class="row">
                    <figure data-vide-bg="poster: images/aboutus/img-02.jpg" data-vide-options="position: 0% 50%">
                        <div
                            style="position: absolute; z-index: -1; inset: 0px; overflow: hidden; background-size: cover; background-color: transparent; background-repeat: no-repeat; background-position: 0% 50%; background-image: url(&quot;http://wahabali.com/work/travelu/images/aboutus/img-02.jpg&quot;);">
                            <video autoplay="" loop="" muted=""
                                style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 0%; transform: translate(0%, -50%); visibility: hidden; opacity: 0; width: auto; height: 357px;"></video>
                        </div>
                    </figure>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 pull-left">
                <div class="row">
                    <div class="tg-textbox">
                        <div class="tg-sectiontitle">
                            <h2>Lorem ipsum dolor sit</h2>
                        </div>
                        <div class="tg-description">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus placeat alias cum
                                accusantium quas suscipit, neque id eaque ullam adipisci!</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero consequuntur doloremque earum
                                minus fuga assumenda ipsa cumque ad architecto molestiae commodi necessitatibus deleniti
                                reprehenderit, nostrum impedit rem saepe eum esse ipsa cumque ad architecto molestiae commodi necessitatibus deleniti
                                reprehenderit, nostrum impedit rem saepe eum esse</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--************************************
                                    About Us End
                            *************************************-->
        <!--************************************
                                    FAQs Start
                            *************************************-->

        <!--************************************
                                    FAQs End
                            *************************************-->
        <!--************************************
                                    Our Partners Start
                            *************************************-->

        <!--************************************
                                    Our Partners End
                            *************************************-->
    </main>
@endsection