@extends('layout.front.main')
@section('content')
    <section class="d2c_hero_wrapper text-center text-md-start">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 mb-4">
                    <h1 class="d2c_large_title position-relative">Paket Wisata <span>Jeep Lava Tour Merapi</span> Terlengkap
                        Untuk Liburan Sempurna
                    </h1>
                    <h3>
                        Sensasi berpetualang autentik dan tak terlupakan
                    </h3>
                    <ul class="feature-list">
                        <li>Model Spesial Jeep Willys</li>
                        <li>Gratis Rubah Jadwal</li>
                        <li>Bantauan Pelanggan 24/7</li>
                    </ul>
                    <div class="deal-info">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="text-center">Kupon Diskon s.d Rp 30.000</h4>
                                <hr>
                                <div class="row">
                                    <div class="col-9">
                                        <input type="text" class="form-control form-control-lg" value="JALANSERU"
                                            readonly>
                                    </div>
                                    <div class="col-3">
                                        <button class="btn btn-sm w-100">Copy</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-center mt-3">
                            <button class="btn btn-sm" style="background-color: #5A4BFF; color: white;">Claim deal</button>
                            <button class="btn btn-sm btn-secondary">02:20:25</button>
                        </div>
                    </div>
                    {{-- <p>Prospect humoured mistress to by proposal marianne attended. Simplicity the far admiration
                        preference everything. Up help home head spot an he room in.</p> --}}
                    {{-- <a href="{{ asset('') }}template/pages/about.html" class="btn position-relative">Get
                        Started</a> --}}
                </div>
                <div class="col-md-6">
                    <div class="d2c_hero_right_wrapper">
                        <div class="d2c_img_wrapper position-relative">
                            <img src="{{ asset('') }}template/assets/images/hero_img_right.jpg" class="w-100 h-100"
                                alt="Hero Right Image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="d2c_pricing_wrapper d2c_props_bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center">
                    {{-- <h4 class="d2c_sub_title">Pricing</h4> --}}
                    <h2 class="d2c_title" style="color: #133e87">Pilih Paket Wisata Terbaik</h2>
                    <p class="d2c_title_content">Coba paket wisata kami sekarang. Tidak puas? ada jaminan uang kembali</p>
                </div>
                <div class="row">
                    <div class="col-12 col-md-6 col-lg-3">
                        <div class="price-card">
                            <div class="text-center">
                                <h3>Short</h3>
                                <p class="text-muted">Pilihan terbaik untuk pemula</p>
                                {{-- <div class="price-original">Rp 89.900</div>
                                <div class="discount-badge">DISKON 86%</div> --}}
                                <div class="price-current">
                                    Rp 400.000
                                </div>
                            </div>
                            <button class="btn-select">Pilih Paket</button>
                            {{-- <div class="renewal-price">Rp 29.900/bln saat perpanjang layanan</div> --}}
                            <ul class="feature-list">
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-12 col-md-6 col-lg-3">
                        <div class="price-card highlight">
                            <div class="text-center">
                                <div class="popular-badge">PALING LARIS!</div>
                                <h3>Sunrise</h3>
                                <p class="text-muted">Cocok untuk personal branding atau blog Anda</p>
                                {{-- <div class="price-original">Rp 119.000</div>
                                <div class="discount-badge">DISKON 80%</div> --}}
                                <div class="price-current">
                                    Rp 550.000
                                </div>
                            </div>
                            <button class="btn-select">Pilih Paket</button>
                            {{-- <div class="bonus-text">+3 bulan gratis</div> --}}
                            {{-- <div class="renewal-price">Rp 49.900/bln saat perpanjang layanan</div> --}}
                            <ul class="feature-list">
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-12 col-md-6 col-lg-3">
                        <div class="price-card">
                            <div class="text-center">
                                <h3>Medium</h3>
                                <p class="text-muted">Paket lengkap untuk bisnis, portal berita, atau toko online</p>
                                {{-- <div class="price-original">Rp 139.900</div>
                                <div class="discount-badge">DISKON 69%</div> --}}
                                <div class="price-current">
                                    Rp 600.000
                                </div>
                            </div>
                            <button class="btn-select">Pilih Paket</button>
                            {{-- <div class="bonus-text">+3 bulan gratis</div> --}}
                            {{-- <div class="renewal-price">Rp 93.900/bln saat perpanjang layanan</div> --}}
                            <ul class="feature-list">
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-12 col-md-6 col-lg-3">
                        <div class="price-card">
                            <div class="text-center">
                                <h3>Long</h3>
                                <p class="text-muted">Performa website yang lebih optimal & powerful resource</p>
                                {{-- <div class="price-original">Rp 312.900</div>
                                <div class="discount-badge">DISKON 59%</div> --}}
                                <div class="price-current">
                                    Rp 800.000
                                </div>
                            </div>
                            <button class="btn-select">Pilih Paket</button>
                            {{-- <div class="bonus-text">+3 bulan gratis</div> --}}
                            {{-- <div class="renewal-price">Rp 235.900/bln saat perpanjang layanan</div> --}}
                            <ul class="feature-list">
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                                <li>List</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="d2c_blog_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center">
                    <h2 class="d2c_title">Tim Kami</h2>
                    <p class="d2c_title_content">Tim profesional dan layanan yang autentik memberi anda rasa aman dan nyaman
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-10 offset-lg-1">
                    <div class="row">
                        <div class="col-6">
                            <h1 style="font-weight: 700;">+50 Jeep Willys</h1>
                            <p>Nikmati sensasi berpetualang dengan kendaraan ikonik Perang Dunia II</p>
                        </div>
                        <div class="col-6">
                            <h1 style="font-weight: 700;">Tour Guide Bersertifikasi</h1>
                            <p>Sebanyak 70% dari tim kami memiliki sertifikasi bahasa Inggris yang diakui secara nasional
                            </p>
                        </div>
                        <div class="col-6">
                            <h1 style="font-weight: 700;">SOP Pelayanan</h1>
                            <p>Kami memiliki SOP pelayanan yang jelas dan terstruktur untuk memastikan kepuasan anda</p>
                        </div>
                        <div class="col-6">
                            <h1 style="font-weight: 700;">Kami sudah Tervaksin</h1>
                            <p>Kami memastikan bahwa 100% anggota tim kami telah divaksinasi untuk kesehatan bersama</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="d2c_c2a_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-8 offset-md-2 text-center">
                    <h4 class="d2c_sub_title">Gallery</h4>
                    <h2 class="d2c_title">Lihat Keseruan Kami</h2>
                    <p class="d2c_title_content">Kami ajak anda merasakan sedikit keseruan petualangan yang tak terlupakan
                        di Merapi, dimana akan menjelajahi keindangan alam yang menakjubkan dengan Jeep Willys yang autentik
                        serta merasakan getaran sejarah dan adrenalin yang berpadu dalam setiap detik perjalanan untuk
                        menikmati momen-momen berharga yang penuh tawa dan kegemberiaan bersama teman-teman dan keluarga.
                    </p>
                </div>
            </div>
            <div class="d2c_steps_wrapp">
                <style>
                    .outer {
                        margin: 0 auto;
                        /* max-width: 800px; */
                    }

                    #big .item {
                        background: #0077B6;
                        padding: 120px 0px;
                        margin: 2px;
                        color: #FFF;
                        border-radius: 3px;
                        text-align: center;
                    }

                    #thumbs .item {
                        background: #C9C9C9;
                        height: 80px;
                        line-height: 70px;
                        padding: 0px;
                        margin: 2px;
                        color: #FFF;
                        border-radius: 3px;
                        text-align: center;
                        cursor: pointer;
                    }

                    #thumbs .item h1 {
                        font-size: 18px;
                    }

                    #thumbs .current .item {
                        background: #0077B6;
                    }

                    .owl-theme .owl-nav [class*='owl-'] {
                        -webkit-transition: all .3s ease;
                        transition: all .3s ease;
                    }

                    .owl-theme .owl-nav [class*='owl-'].disabled:hover {
                        background-color: #D6D6D6;
                    }

                    #big.owl-theme {
                        position: relative;
                    }

                    #big.owl-theme .owl-next,
                    #big.owl-theme .owl-prev {
                        /* background: #333; */
                        width: 22px;
                        line-height: 40px;
                        height: 40px;
                        margin-top: -20px;
                        position: absolute;
                        text-align: center;
                        top: 50%;
                    }

                    #big.owl-theme .owl-prev {
                        left: 10px;
                    }

                    #big.owl-theme .owl-next {
                        right: 10px;
                    }

                    #thumbs.owl-theme .owl-next,
                    #thumbs.owl-theme .owl-prev {
                        /* background: #333; */
                    }
                </style>
                <div class="outer">
                    <div id="big" class="owl-carousel owl-theme">
                        <div class="item">
                            <h1>1</h1>
                        </div>
                        <div class="item">
                            <h1>2</h1>
                        </div>
                        <div class="item">
                            <h1>3</h1>
                        </div>
                        <div class="item">
                            <h1>4</h1>
                        </div>
                        <div class="item">
                            <h1>5</h1>
                        </div>
                        <div class="item">
                            <h1>6</h1>
                        </div>
                        <div class="item">
                            <h1>7</h1>
                        </div>
                        <div class="item">
                            <h1>8</h1>
                        </div>
                        <div class="item">
                            <h1>9</h1>
                        </div>
                        <div class="item">
                            <h1>10</h1>
                        </div>
                    </div>
                    <div id="thumbs" class="owl-carousel owl-theme">
                        <div class="item">
                            <h1>1</h1>
                        </div>
                        <div class="item">
                            <h1>2</h1>
                        </div>
                        <div class="item">
                            <h1>3</h1>
                        </div>
                        <div class="item">
                            <h1>4</h1>
                        </div>
                        <div class="item">
                            <h1>5</h1>
                        </div>
                        <div class="item">
                            <h1>6</h1>
                        </div>
                        <div class="item">
                            <h1>7</h1>
                        </div>
                        <div class="item">
                            <h1>8</h1>
                        </div>
                        <div class="item">
                            <h1>9</h1>
                        </div>
                        <div class="item">
                            <h1>10</h1>
                        </div>
                    </div>
                </div>
                <script>
                    $(document).ready(function() {
                        var bigimage = $("#big");
                        var thumbs = $("#thumbs");
                        //var totalslides = 10;
                        var syncedSecondary = true;

                        bigimage
                            .owlCarousel({
                                items: 1,
                                slideSpeed: 2000,
                                nav: true,
                                // autoplay: true,
                                dots: false,
                                loop: true,
                                responsiveRefreshRate: 200,
                                navText: [
                                    '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
                                    '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
                                ]
                            })
                            .on("changed.owl.carousel", syncPosition);

                        thumbs
                            .on("initialized.owl.carousel", function() {
                                thumbs
                                    .find(".owl-item")
                                    .eq(0)
                                    .addClass("current");
                            })
                            .owlCarousel({
                                items: 4,
                                dots: true,
                                nav: true,
                                navText: [
                                    '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
                                    '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
                                ],
                                smartSpeed: 200,
                                slideSpeed: 500,
                                slideBy: 4,
                                responsiveRefreshRate: 100
                            })
                            .on("changed.owl.carousel", syncPosition2);

                        function syncPosition(el) {
                            //if loop is set to false, then you have to uncomment the next line
                            //var current = el.item.index;

                            //to disable loop, comment this block
                            console.log(el);
                            var count = el.item.count - 1;
                            var current = Math.round(el.item.index - el.item.count / 2 - 0.5);

                            if (current < 0) {
                                current = count;
                            }
                            if (current > count) {
                                current = 0;
                            }
                            //to this
                            thumbs
                                .find(".owl-item")
                                .removeClass("current")
                                .eq(current)
                                .addClass("current");
                            var onscreen = thumbs.find(".owl-item.active").length - 1;
                            console.log(onscreen)
                            var start = thumbs
                                .find(".owl-item.active")
                                .first()
                                .index();
                            var end = thumbs
                                .find(".owl-item.active")
                                .last()
                                .index();
                            console.log(end);
                            if (current > end) {
                                thumbs.data("owl.carousel").to(current, 100, true);
                            }
                            if (current < start) {
                                thumbs.data("owl.carousel").to(current - onscreen, 100, true);
                            }
                        }

                        function syncPosition2(el) {
                            if (syncedSecondary) {
                                var number = el.item.index;
                                bigimage.data("owl.carousel").to(number, 100, true);
                            }
                        }

                        thumbs.on("click", ".owl-item", function(e) {
                            e.preventDefault();
                            var number = $(this).index();
                            bigimage.data("owl.carousel").to(number, 300, true);
                        });
                    });
                </script>
            </div>
        </div>
    </section>

    <!--====== CLIENT LOGO PART START ======-->
    <section class="client-logo-area client-logo-one">
        <!--======  Start Section Title Two ======-->
        <div class="section-title-two">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="content">
                            <span> Our Partners </span>
                            <h2 class="fw-bold">Our Awesome Clients</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
                                eiusmod tempor incididunt ut labore aliqua.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- container -->
        </div>
        <!--====== End Section Title Two ======-->
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-6">
                    <div class="single-client text-center">
                        <img src="https://cdn.ayroui.com/1.0/images/client-logo/graygrids.svg" alt="Logo" />
                    </div>
                    <!-- single client -->
                </div>
                <div class="col-md-3 col-6">
                    <div class="single-client text-center">
                        <img src="https://cdn.ayroui.com/1.0/images/client-logo/uideck.svg" alt="Logo" />
                    </div>
                    <!-- single client -->
                </div>
                <div class="col-md-3 col-6">
                    <div class="single-client text-center">
                        <img src="https://cdn.ayroui.com/1.0/images/client-logo/ayroui.svg" alt="Logo" />
                    </div>
                    <!-- single client -->
                </div>
                <div class="col-md-3 col-6">
                    <div class="single-client text-center">
                        <img src="https://cdn.ayroui.com/1.0/images/client-logo/lineicons.svg" alt="Logo" />
                    </div>
                    <!-- single client -->
                </div>
            </div>
            <!-- row -->
        </div>
        <!-- container -->
    </section>
    <!--====== CLIENT LOGO PART ENDS ======-->

    <section class="d2c_about_wrapper d2c_props_bg position-relative">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-lg-6">
                    <div class="row">
                        <div class="col-md-6 col-lg-12 text-center text-md-start">
                            <h4 class="d2c_sub_title">About Merjay</h4>
                            <h2 class="d2c_title pe-0 pe-md-5">I Believe In Nurturing The Entrepreneurial Spirit at
                                Merjay</h2>
                            <p class="d2c_title_content">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                Soluta, reiciendis eos illum maxime esse incidunt rerum animi. Doloribus aut ipsum
                                magnam, tempore expedita eveniet sit fugiat itaque excepturi repudiandae soluta.</p>
                        </div>
                        <div class="col-md-6 col-lg-12">
                            <ul class="nav mb-3" id="pills-tab-one" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-mission-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-mission" type="button" role="tab"
                                        aria-controls="pills-mission" aria-selected="true">Mission</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-vission-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-vission" type="button" role="tab"
                                        aria-controls="pills-vission" aria-selected="false">Vission</button>
                                </li>
                            </ul>
                            <div class="tab-content" id="pills-tab-oneContent">
                                <div class="tab-pane fade show active" id="pills-mission" role="tabpanel"
                                    aria-labelledby="pills-mission-tab">
                                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium provident
                                        fugiat tempore in velit optio tenetur quae quas mollitia ducimus incidunt quos
                                        qui natus obcaecati, quasi id? Aut, asperiores in?</p>
                                    <ul>
                                        <li>
                                            <i class="fas fa-check"></i>
                                            Become successful & superior
                                        </li>
                                        <li>
                                            <i class="fas fa-check"></i>
                                            Provide quick & good solution for business
                                        </li>
                                    </ul>
                                </div>
                                <div class="tab-pane fade" id="pills-vission" role="tabpanel"
                                    aria-labelledby="pills-vission-tab">
                                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium velit amet
                                        labore quod consectetur incidunt dolorem suscipit facere dolores distinctio,
                                        quam sapiente. Alias dolor maxime cum exercitationem cupiditate accusamus
                                        reprehenderit?</p>
                                    <ul>
                                        <li>
                                            <i class="fas fa-check"></i>
                                            Become successful & superior
                                        </li>
                                        <li>
                                            <i class="fas fa-check"></i>
                                            Provide quick & good solution for business
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <a href="{{ asset('') }}template/pages/about.html" class="btn mt-md-3 mt-xl-4">see
                                more</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6">
                    <a href="https://www.youtube.com/@designtocodes" target="_blank" class="d2c_video_wrapper">
                        <i class="far fa-play-circle"></i>
                        <h6 class="mb-0">Watch Video</h6>
                    </a>
                </div>
            </div>
        </div>
        <div class="d2c_out_img">
            <img src="{{ asset('') }}template/assets/images/about.png" class="img-fluid" style="width: 75%"
                alt="About Image">
        </div>
    </section>

    <section class="d2c_services_wrapper d2c_props_bg">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-md-12 col-xl-5 text-center text-xl-start">
                    <h4 class="d2c_sub_title">Services</h4>
                    <h2 class="d2c_title">I Provide the Best Solutions to Explore.</h2>
                    <p class="d2c_title_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi
                        error mollitia, debitis facere quia quibusdam. Aliquam, tenetur est totam dolores error
                        aspernatur, quibusdam eos soluta dolor autem eaque id culpa.</p>
                    <a href="{{ asset('') }}template/pages/service.html" class="btn mb-4 mb-md-5 mb-xl-0">view
                        all</a>
                </div>
                <div class="col-md-12 col-xl-7 col-xxl-6">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <div class="d2c_card_wrapper text-center">
                                <img src="{{ asset('') }}template/assets/images/service.png" class="img-fluid"
                                    style="width: 50%" alt="Services Image">
                                <div class="d2c_card_body">
                                    <h4 class="d2c_card_title">Service 1</h4>
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                    <a href="{{ asset('') }}template/pages/single_service.html">Read More</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-0 mt-md-4 mb-4 mb-md-0">
                            <div class="d2c_card_wrapper text-center">
                                <img src="{{ asset('') }}template/assets/images/service.png" class="img-fluid"
                                    style="width: 50%" alt="Services Image">
                                <div class="d2c_card_body">
                                    <h4 class="d2c_card_title">Service 2</h4>
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                    <a href="{{ asset('') }}template/pages/single_service.html">Read More</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="d2c_card_wrapper text-center">
                                <img src="{{ asset('') }}template/assets/images/service.png" class="img-fluid"
                                    style="width: 50%" alt="Services Image">
                                <div class="d2c_card_body">
                                    <h4 class="d2c_card_title">Service 3</h4>
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                    <a href="{{ asset('') }}template/pages/single_service.html">Read More</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-0 mt-md-4">
                            <div class="d2c_card_wrapper text-center">
                                <img src="{{ asset('') }}template/assets/images/service.png" class="img-fluid"
                                    style="width: 50%" alt="Services Image">
                                <div class="d2c_card_body">
                                    <h4 class="d2c_card_title">Service 4</h4>
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                    <a href="{{ asset('') }}template/pages/single_service.html">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="d2c_steps_wrappper">
        <div class="container">
            <div class="row">
                <div class="col-md-8 offset-md-2 text-center">
                    <h4 class="d2c_sub_title">Gallery</h4>
                    <h2 class="d2c_title">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
                    <p class="d2c_title_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum,
                        tempora vel. Quo deserunt molestiae repellat accusamus ad magnam enim commodi, exercitationem
                        sunt tempore! Illo laboriosam aperiam velit consectetur illum incidunt?</p>
                </div>
            </div>
            <div class="d2c_steps_wrapp">
                <style>
                    .outer {
                        margin: 0 auto;
                        /* max-width: 800px; */
                    }

                    #big .item {
                        background: #0077B6;
                        padding: 120px 0px;
                        margin: 2px;
                        color: #FFF;
                        border-radius: 3px;
                        text-align: center;
                    }

                    #thumbs .item {
                        background: #C9C9C9;
                        height: 80px;
                        line-height: 70px;
                        padding: 0px;
                        margin: 2px;
                        color: #FFF;
                        border-radius: 3px;
                        text-align: center;
                        cursor: pointer;
                    }

                    #thumbs .item h1 {
                        font-size: 18px;
                    }

                    #thumbs .current .item {
                        background: #0077B6;
                    }

                    .owl-theme .owl-nav [class*='owl-'] {
                        -webkit-transition: all .3s ease;
                        transition: all .3s ease;
                    }

                    .owl-theme .owl-nav [class*='owl-'].disabled:hover {
                        background-color: #D6D6D6;
                    }

                    #big.owl-theme {
                        position: relative;
                    }

                    #big.owl-theme .owl-next,
                    #big.owl-theme .owl-prev {
                        /* background: #333; */
                        width: 22px;
                        line-height: 40px;
                        height: 40px;
                        margin-top: -20px;
                        position: absolute;
                        text-align: center;
                        top: 50%;
                    }

                    #big.owl-theme .owl-prev {
                        left: 10px;
                    }

                    #big.owl-theme .owl-next {
                        right: 10px;
                    }

                    #thumbs.owl-theme .owl-next,
                    #thumbs.owl-theme .owl-prev {
                        /* background: #333; */
                    }
                </style>
                <div class="outer">
                    <div id="big" class="owl-carousel owl-theme">
                        <div class="item">
                            <h1>1</h1>
                        </div>
                        <div class="item">
                            <h1>2</h1>
                        </div>
                        <div class="item">
                            <h1>3</h1>
                        </div>
                        <div class="item">
                            <h1>4</h1>
                        </div>
                        <div class="item">
                            <h1>5</h1>
                        </div>
                        <div class="item">
                            <h1>6</h1>
                        </div>
                        <div class="item">
                            <h1>7</h1>
                        </div>
                        <div class="item">
                            <h1>8</h1>
                        </div>
                        <div class="item">
                            <h1>9</h1>
                        </div>
                        <div class="item">
                            <h1>10</h1>
                        </div>
                    </div>
                    <div id="thumbs" class="owl-carousel owl-theme">
                        <div class="item">
                            <h1>1</h1>
                        </div>
                        <div class="item">
                            <h1>2</h1>
                        </div>
                        <div class="item">
                            <h1>3</h1>
                        </div>
                        <div class="item">
                            <h1>4</h1>
                        </div>
                        <div class="item">
                            <h1>5</h1>
                        </div>
                        <div class="item">
                            <h1>6</h1>
                        </div>
                        <div class="item">
                            <h1>7</h1>
                        </div>
                        <div class="item">
                            <h1>8</h1>
                        </div>
                        <div class="item">
                            <h1>9</h1>
                        </div>
                        <div class="item">
                            <h1>10</h1>
                        </div>
                    </div>
                </div>
                <script>
                    $(document).ready(function() {
                        var bigimage = $("#big");
                        var thumbs = $("#thumbs");
                        //var totalslides = 10;
                        var syncedSecondary = true;

                        bigimage
                            .owlCarousel({
                                items: 1,
                                slideSpeed: 2000,
                                nav: true,
                                // autoplay: true,
                                dots: false,
                                loop: true,
                                responsiveRefreshRate: 200,
                                navText: [
                                    '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
                                    '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
                                ]
                            })
                            .on("changed.owl.carousel", syncPosition);

                        thumbs
                            .on("initialized.owl.carousel", function() {
                                thumbs
                                    .find(".owl-item")
                                    .eq(0)
                                    .addClass("current");
                            })
                            .owlCarousel({
                                items: 4,
                                dots: true,
                                nav: true,
                                navText: [
                                    '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
                                    '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
                                ],
                                smartSpeed: 200,
                                slideSpeed: 500,
                                slideBy: 4,
                                responsiveRefreshRate: 100
                            })
                            .on("changed.owl.carousel", syncPosition2);

                        function syncPosition(el) {
                            //if loop is set to false, then you have to uncomment the next line
                            //var current = el.item.index;

                            //to disable loop, comment this block
                            console.log(el);
                            var count = el.item.count - 1;
                            var current = Math.round(el.item.index - el.item.count / 2 - 0.5);

                            if (current < 0) {
                                current = count;
                            }
                            if (current > count) {
                                current = 0;
                            }
                            //to this
                            thumbs
                                .find(".owl-item")
                                .removeClass("current")
                                .eq(current)
                                .addClass("current");
                            var onscreen = thumbs.find(".owl-item.active").length - 1;
                            console.log(onscreen)
                            var start = thumbs
                                .find(".owl-item.active")
                                .first()
                                .index();
                            var end = thumbs
                                .find(".owl-item.active")
                                .last()
                                .index();
                            console.log(end);
                            if (current > end) {
                                thumbs.data("owl.carousel").to(current, 100, true);
                            }
                            if (current < start) {
                                thumbs.data("owl.carousel").to(current - onscreen, 100, true);
                            }
                        }

                        function syncPosition2(el) {
                            if (syncedSecondary) {
                                var number = el.item.index;
                                bigimage.data("owl.carousel").to(number, 100, true);
                            }
                        }

                        thumbs.on("click", ".owl-item", function(e) {
                            e.preventDefault();
                            var number = $(this).index();
                            bigimage.data("owl.carousel").to(number, 300, true);
                        });
                    });
                </script>
            </div>
    </section>

    <section class="d2c_counter_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-6 col-lg-4 text-center mb-4 mb-lg-0">
                    <div class="d2c_counter">
                        <h2><span class="count">15</span></h2>
                        <h4 class="mb-0">Years of experience</h4>
                    </div>
                </div>
                <div class="col-6 col-lg-4 text-center mb-4 mb-md-0">
                    <div class="d2c_counter d2c_border">
                        <h2><span class="count">1250</span>+</h2>
                        <h4 class="mb-0">Happy Clients</h4>
                    </div>
                </div>
                <div class="col-6 col-lg-4 text-center">
                    <div class="d2c_counter">
                        <h2><span class="count">100</span>+</h2>
                        <h4 class="mb-0">Destination</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="d2c_blog_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center">
                    <h4 class="d2c_sub_title">Blogs</h4>
                    <h2 class="d2c_title">Explore my blog</h2>
                    <p class="d2c_title_content">Learn from industry experts and stay updated on the latest trends and
                        developments in the startup ecosystem practical tips, actionable insights, and success stories.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-10 offset-lg-1">
                    <div class="row">
                        <div class="col-md-6 mb-4 mb-md-0">
                            <div class="d2c_card_wrapper">
                                <div class="d2c_date">
                                    <h6>18 Feb</h6>
                                </div>
                                <span>Corporate</span>
                                <h4 class="d2c_card_title">
                                    <a href="{{ asset('') }}template/pages/blog_details.html">How Can You Maximize
                                        Your Savings in the New
                                        Year</a>
                                </h4>
                                <p class="mb-0">Rooms oh fully taken by worse do. To points afraid but may end law
                                    lasted was out laughter raptures. Improved own provided blessing may peculiar
                                    domestic.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d2c_card_wrapper">
                                <div class="d2c_date">
                                    <h6>18 Feb</h6>
                                </div>
                                <span>Corporate</span>
                                <h4 class="d2c_card_title">
                                    <a href="{{ asset('') }}template/pages/blog_details.html">Funds in
                                        Institutional Portfolios Florida
                                        Retirement System</a>
                                </h4>
                                <p class="mb-0">Rooms oh fully taken by worse do. To points afraid but may end law
                                    lasted was out laughter raptures. Improved own provided blessing may peculiar
                                    domestic.</p>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <a href="{{ asset('') }}template/pages/blog_archive.html" class="btn">view More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection