@extends('layouts.master')

@section('content')
    <section class="bg-half-170 d-table w-100" style="background: url('assets/images/travel/bg.jpg') center center;">
        <div class="bg-overlay"></div>
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7 col-md-6">
                    <div class="title-heading mt-4">
                        <h1 class="display-4 fw-bold text-white title-dark mb-3">
                        Explore <span class="text-green-300">First-World</span> Destinations
                        </h1>
                        <p class="para-desc text-white-50">Discover curated travel guides, insider tips, and real-time assistance from our human and AI agents. Your gateway to luxury travel begins here.</p>
                        <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                            <a href="/" class="px-6 py-2 bg-blue-600 text-white rounded font-medium hover:bg-blue-700 transition">
                                Start Planning
                            </a>
                            <a href="/" class="px-6 py-2 bg-white border border-gray-200 rounded font-medium shadow-sm hover:bg-gray-50 transition">
                                Talk to Agent
                            </a>
                        </div>
                        <div class="mt-4">
                            <a href="javascript:void(0)" class="btn btn-icon btn-pills btn-lg btn-light"><i data-feather="arrow-down" class="icons"></i></a>
                        </div>

                    </div>
                </div>
            </div>
        </div> 
    </section>
    <div class="position-relative">
        <div class="shape overflow-hidden text-color-white">
            <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
            </svg>
        </div>
    </div>

    <section class="section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center">
                    <div class="section-title mb-4 pb-2">
                        <h4 class="title mb-4">Benefit for Traveller</h4>
                        <p class="text-muted para-desc mb-0 mx-auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-3 col-md-4 mt-4 pt-2">
                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light text-center position-relative overflow-hidden border-0">
                        <span class="h1 icon-color">
                            <i class="uil uil-shield-check"></i>
                        </span>
                        <div class="card-body p-0 content">
                            <h5>Secure Payment</h5>
                            <p class="para text-muted mb-0">It is a long established fact that a reader.</p>
                        </div>
                        <span class="big-icon text-center">
                            <i class="uil uil-shield-check"></i>
                        </span>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-4 mt-4 pt-2">
                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light text-center position-relative overflow-hidden border-0">
                        <span class="h1 icon-color">
                            <i class="uil uil-thumbs-up"></i>
                        </span>
                        <div class="card-body p-0 content">
                            <h5>Easy Book</h5>
                            <p class="para text-muted mb-0">It is a long established fact that a reader.</p>
                        </div>
                        <span class="big-icon text-center">
                            <i class="uil uil-thumbs-up"></i>
                        </span>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-4 mt-4 pt-2">
                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light text-center position-relative overflow-hidden border-0">
                        <span class="h1 icon-color">
                            <i class="uil uil-keyboard-show"></i>
                        </span>
                        <div class="card-body p-0 content">
                            <h5>Free Amenities</h5>
                            <p class="para text-muted mb-0">It is a long established fact that a reader.</p>
                        </div>
                        <span class="big-icon text-center">
                            <i class="uil uil-keyboard-show"></i>
                        </span>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-4 mt-4 pt-2">
                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light text-center position-relative overflow-hidden border-0">
                        <span class="h1 icon-color">
                            <i class="uil uil-award"></i>
                        </span>
                        <div class="card-body p-0 content">
                            <h5>Best Offers</h5>
                            <p class="para text-muted mb-0">It is a long established fact that a reader.</p>
                        </div>
                        <span class="big-icon text-center">
                            <i class="uil uil-award"></i>
                        </span>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-4 mt-4 pt-2">
                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light text-center position-relative overflow-hidden border-0">
                        <span class="h1 icon-color">
                            <i class="uil uil-bookmark"></i>
                        </span>
                        <div class="card-body p-0 content">
                            <h5>Cheap than Other</h5>
                            <p class="para text-muted mb-0">It is a long established fact that a reader.</p>
                        </div>
                        <span class="big-icon text-center">
                            <i class="uil uil-bookmark"></i>
                        </span>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-4 mt-4 pt-2">
                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light text-center position-relative overflow-hidden border-0">
                        <span class="h1 icon-color">
                            <i class="uil uil-favorite"></i>
                        </span>
                        <div class="card-body p-0 content">
                            <h5>Top Rated</h5>
                            <p class="para text-muted mb-0">It is a long established fact that a reader.</p>
                        </div>
                        <span class="big-icon text-center">
                            <i class="uil uil-favorite"></i>
                        </span>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-4 mt-4 pt-2">
                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light text-center position-relative overflow-hidden border-0">
                        <span class="h1 icon-color">
                            <i class="uil uil-clock"></i>
                        </span>
                        <div class="card-body p-0 content">
                            <h5>24/7 Support</h5>
                            <p class="para text-muted mb-0">It is a long established fact that a reader.</p>
                        </div>
                        <span class="big-icon text-center">
                            <i class="uil uil-clock"></i>
                        </span>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-4 mt-4 pt-2">
                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light text-center position-relative overflow-hidden border-0">
                        <span class="h1 icon-color">
                            <i class="uil uil-process"></i>
                        </span>
                        <div class="card-body p-0 content">
                            <h5>Fast Refund</h5>
                            <p class="para text-muted mb-0">It is a long established fact that a reader.</p>
                        </div>
                        <span class="big-icon text-center">
                            <i class="uil uil-process"></i>
                        </span>
                    </div>
                </div>

                <div class="col-lg-12 text-center col-md-4 mt-4 pt-2">
                    <a href="javascript:void(0)" class="btn btn-primary">See more <i data-feather="arrow-right" class="fea icon-sm inline-block"></i></a>
                </div>
            </div>
        </div>

        <div class="container mt-28">
            <div class="row align-items-end mb-4 pb-2">
                <div class="col-md-8">
                    <div class="section-title text-center text-md-start">
                        <h6 class="text-primary">Find Out Most</h6>
                        <h4 class="title mb-4">Popular Destination</h4>
                        <p class="text-muted mb-0 para-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                </div>

                <div class="col-md-4 mt-4 mt-sm-0">
                    <div class="text-center text-md-end">
                        <a href="javascript:void(0)" class="text-primary h6">See More <i data-feather="arrow-right" class="fea icon-sm inline-block"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 mt-4 pt-2">
                    <div class="tiny-six-item">
                        <div class="tiny-slide">
                            <div class="popular-tour rounded-md position-relative overflow-hidden mx-2">
                                <img src="assets/images/travel/dubai.jpg" class="img-fluid" alt="">
                                <div class="content">
                                    <a href="javascript:void(0)" class="title text-white h4 title-dark">Dubai</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tiny-slide">
                            <div class="popular-tour rounded-md position-relative overflow-hidden mx-2">
                                <img src="assets/images/travel/thailand.jpg" class="img-fluid" alt="">
                                <div class="content">
                                    <a href="javascript:void(0)" class="title text-white h4 title-dark">Thailand</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tiny-slide">
                            <div class="popular-tour rounded-md position-relative overflow-hidden mx-2">
                                <img src="assets/images/travel/india.jpg" class="img-fluid" alt="">
                                <div class="content">
                                    <a href="javascript:void(0)" class="title text-white h4 title-dark">India</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tiny-slide">
                            <div class="popular-tour rounded-md position-relative overflow-hidden mx-2">
                                <img src="assets/images/travel/london.jpg" class="img-fluid" alt="">
                                <div class="content">
                                    <a href="javascript:void(0)" class="title text-white h4 title-dark">London</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tiny-slide">
                            <div class="popular-tour rounded-md position-relative overflow-hidden mx-2">
                                <img src="assets/images/travel/paris.jpg" class="img-fluid" alt="">
                                <div class="content">
                                    <a href="javascript:void(0)" class="title text-white h4 title-dark">Paris</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tiny-slide">
                            <div class="popular-tour rounded-md position-relative overflow-hidden mx-2">
                                <img src="assets/images/travel/singapore.jpg" class="img-fluid" alt="">
                                <div class="content">
                                    <a href="javascript:void(0)" class="title text-white h4 title-dark">Singapore</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tiny-slide">
                            <div class="popular-tour rounded-md position-relative overflow-hidden mx-2">
                                <img src="assets/images/travel/dubai.jpg" class="img-fluid" alt="">
                                <div class="content">
                                    <a href="javascript:void(0)" class="title text-white h4 title-dark">Dubai</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center">
                    <div class="section-title">
                        <h4 class="title fw-bold mb-4">Everyone Needs Travel. <br> Want to Break Free for a While</h4>
                        <p class="text-muted para-desc mb-0 mx-auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="container mt-28">
            <div class="row align-items-center">
                <div class="col-lg-5 col-md-6">
                    <div class="card blog blog-primary rounded border-0 shadow overflow-hidden">
                        <div class="position-relative">
                            <img src="/assets/images/travel/1.jpg" class="card-img-top" alt="...">
                            <div class="overlay rounded-top"></div>
                        </div>
                        <div class="card-body content">
                            <h5><a href="javascript:void(0)" class="card-title title text-dark">Conversations, Feedback, Recognition</a></h5>
                            <div class="post-meta d-flex justify-content-between mt-3">
                                <ul class="list-unstyled mb-0">
                                    <li class="list-inline-item me-2 mb-0"><a href="javascript:void(0)" class="text-muted like"><i class="uil uil-heart me-1"></i>33</a></li>
                                    <li class="list-inline-item"><a href="javascript:void(0)" class="text-muted comments"><i class="uil uil-comment me-1"></i>08</a></li>
                                </ul>
                                <a href="blog-detail.html" class="text-muted readmore">Read More <i class="uil uil-angle-right-b align-middle"></i></a>
                            </div>
                        </div>
                        <div class="author">
                            <small class="user d-block"><i class="uil uil-user"></i> Calvin Carlo</small>
                            <small class="date"><i class="uil uil-calendar-alt"></i> 25th June 2021</small>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7 col-md-6 mt-4 mt-sm-0 pt-2 pt-sm-0">
                    <div class="section-title ms-lg-4">
                        <h4 class="title mb-4">Experience Luxury & <br> Find Your Base</h4>
                        <p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        <ul class="list-unstyled text-muted mt-4 mb-4">
                            <li class="mb-1"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Digital Marketing Solutions for Tomorrow</li>
                            <li class="mb-1"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Our Talented & Experienced Marketing Agency</li>
                            <li class="mb-1"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Create your own skin to match your brand</li>
                        </ul>
                        <a href="javascript:void(0)" class="mt-3 h6 text-primary">Search Destination <i class="uil uil-angle-right-b"></i></a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="container mt-28">
            <div class="row align-items-center">
                <div class="col-lg-5 col-md-6 order-1 order-md-2">
                    <img src="assets/images/travel/3.jpg" class="img-fluid rounded shadow-md" alt="">
                </div>

                <div class="col-lg-7 col-md-6 order-2 order-md-1 mt-4 mt-sm-0 pt-2 pt-sm-0">
                    <div class="section-title me-lg-5">
                        <h4 class="title mb-4">100% Money back <br> Guarantee if You Cancel</h4>
                        <p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>

                    <div class="accordion mt-4 pt-2" id="accordionExample">
                        <div class="accordion-item rounded shadow">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button border-0 bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                    aria-expanded="true" aria-controls="collapseOne">
                                    How does it work ?
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse border-0 collapse show" aria-labelledby="headingOne"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body text-muted">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item rounded shadow mt-2">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button border-0 bg-light collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                                    aria-expanded="false" aria-controls="collapseTwo">
                                    How much does it cost?
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse border-0 collapse" aria-labelledby="headingTwo"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body text-muted">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item rounded shadow mt-2">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button border-0 bg-light collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    How I can travel Europe ?
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse border-0 collapse" aria-labelledby="headingThree"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body text-muted">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item rounded shadow mt-2">
                            <h2 class="accordion-header" id="headingFour">
                                <button class="accordion-button border-0 bg-light collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                    What documents are required?
                                </button>
                            </h2>
                            <div id="collapseFour" class="accordion-collapse border-0 collapse" aria-labelledby="headingFour"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body text-muted">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container mt-28">
            <div class="row align-items-center">
                <div class="col-lg-5 col-md-6">
                    <img src="/assets/images/travel/2.jpg" class="img-fluid rounded shadow-md" alt="">
                </div>

                <div class="col-lg-7 col-md-6 mt-4 mt-sm-0 pt-2 pt-sm-0">
                    <div class="section-title ms-lg-4">
                        <h4 class="title mb-4">We have More than 500 <br> Selected Destination</h4>
                        <p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <ul class="list-unstyled text-muted">
                            <li class="mb-1"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Digital Marketing Solutions for Tomorrow</li>
                            <li class="mb-1"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Our Talented & Experienced Marketing Agency</li>
                            <li class="mb-1"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Create your own skin to match your brand</li>
                        </ul>
                        <a href="javascript:void(0)" class="mt-3 h6 text-primary">Search Destination <i class="uil uil-angle-right-b"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection