@extends('layouts.main')
@section('title', $data['title'])
@section('content')
    <!-- Header Banner -->
    {{-- <div class="banner-header valign bg-img bg-fixed" data-overlay-dark="1" data-background="{{ asset('assets/images/banner/event.jpg') }}"> --}}
        <div class="banner-header valign bg-img bg-fixed" data-overlay-dark="1" data-background="{{ asset('assets/images/banner/header_image.jpg') }}?v={{ time() }}">

        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center animate-box" data-animate-effect="fadeInUp">
                    <h1>Event Categories</h1>
                </div>
            </div>
        </div>

    </div>
    <!-- Photo Gallery -->
    <div class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-12 mb-30"> <span class="heading-meta">Types Of</span>
                        <h2 class="pwe-heading mb-30 animate-box fadeInLeft animated" data-animate-effect="fadeInLeft">Events We Support</h2>
                    </div>
            </div>
            <div class="row">
                <div class="col-md-4 gallery-item wow fadeInUp" data-wow-delay="0.2s">
                    <a href="javascript:void(0)" title="" class="">
                        <div class="gallery-box">
                            <div class="gallery-img">
                                <img src="{{ asset('assets/images/banner/wedding-8.jpg') }}" class="img-fluid mx-auto d-block" alt="">
                            </div>
                            <div class="gallery-detail text-center">
                                 <i class="ti-heart"></i>
                                 <h4 class="hover-title">Festivals Events</h4>
                                </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 gallery-item wow fadeInUp" data-wow-delay="0.2s">
                    <a href="javascript:void(0)" title="" class="">
                        <div class="gallery-box">
                            <div class="gallery-img"> <img src="{{ asset('assets/images/portfolio/event-2.jpg') }}" class="img-fluid mx-auto d-block" alt=""> </div>
                            <div class="gallery-detail text-center">
                                 <i class="ti-heart"></i>
                                 <h4 class="hover-title">Exhibitions <b>&</b> Trade Shows</h4>
                                </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 gallery-item wow fadeInUp" data-wow-delay="0.2s">
                    <a href="javascript:void(0)" title="" class="">
                        <div class="gallery-box">
                            <div class="gallery-img"> <img src="{{ asset('assets/images/banner/wedding-9.jpg') }}" class="img-fluid mx-auto d-block" alt=""> </div>
                            <div class="gallery-detail text-center">
                                 <i class="ti-heart"></i>
                                 <h4 class="hover-title">Concerts <b>&</b> Live Performances</h4>
                                </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 gallery-item wow fadeInUp" data-wow-delay="0.2s">
                    <a href="javascript:void(0)" title="" class="">
                        <div class="gallery-box">
                            <div class="gallery-img"> <img src="{{ asset('assets/images/banner/corporate.jpg') }}" class="img-fluid mx-auto d-block" alt=""> </div>
                            <div class="gallery-detail text-center">
                                <i class="ti-heart"></i>
                                <h4 class="hover-title">Corporate Events</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 gallery-item wow fadeInUp" data-wow-delay="0.2s">
                    <a href="javascript:void(0)" title="" class="">
                        <div class="gallery-box">
                            <div class="gallery-img"> <img src="{{ asset('assets/images/banner/sports.jpg') }}" class="img-fluid mx-auto d-block" alt=""> </div>
                            <div class="gallery-detail text-center">
                                <i class="ti-heart"></i>
                                <h4 class="hover-title">Sports Events</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 gallery-item wow fadeInUp" data-wow-delay="0.2s">
                    <a href="javascript:void(0)" title="" class="">
                        <div class="gallery-box">
                            <div class="gallery-img"> <img src="{{ asset('assets/images/banner/Education.jpg') }}" class="img-fluid mx-auto d-block" alt=""> </div>
                            <div class="gallery-detail text-center">
                                 <i class="ti-heart"></i>
                                 <h4 class="hover-title">Educational Events</h4>
                                 </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 gallery-item wow fadeInUp" data-wow-delay="0.2s">
                    <a href="javascript:void(0)" title="" class="">
                        <div class="gallery-box">
                            <div class="gallery-img"> <img src="{{ asset('assets/images/banner/charity.jpg') }}" class="img-fluid mx-auto d-block" alt=""> </div>
                            <div class="gallery-detail text-center">
                                <i class="ti-heart"></i>
                                <h4 class="hover-title">Charity <b>&</b> Non-Profit Events</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 gallery-item wow fadeInUp" data-wow-delay="0.2s">
                    <a href="javascript:void(0)" title="" class="">
                        <div class="gallery-box">
                            <div class="gallery-img"> <img src="{{ asset('assets/images/banner/entertainment.jpg') }}" class="img-fluid mx-auto d-block" alt=""> </div>
                            <div class="gallery-detail text-center">
                                <i class="ti-heart"></i>
                                <h4 class="hover-title">Entertainment Events</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 gallery-item wow fadeInUp" data-wow-delay="0.2s">
                    <a href="javascript:void(0)" title="" class="">
                        <div class="gallery-box">
                            <div class="gallery-img"> <img src="{{ asset('assets/images/portfolio/event-9.jpg') }}" class="img-fluid mx-auto d-block" alt=""> </div>
                            <div class="gallery-detail text-center">
                                <i class="ti-heart"></i>
                                <h4 class="hover-title">Technology <b>&</b> Innovation Events</h4>
                             </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 gallery-item wow fadeInUp" data-wow-delay="0.2s">
                    <a href="javascript:void(0)" title="" class="">
                        <div class="gallery-box">
                            <div class="gallery-img"> <img src="{{ asset('assets/images/portfolio/event-10.png') }}" class="img-fluid mx-auto d-block" alt=""> </div>
                            <div class="gallery-detail text-center">
                                <i class="ti-heart"></i>
                                <h4 class="hover-title">Virtual <b>&</b> Hybrid Events</h4>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Video Gallery -->
    <div class="section-padding bg-1" style="display: none;">
        <div class="container">
            <div class="row">
                <div class="col-md-12 mb-30"> <span class="heading-meta">Our</span>
                    <h2 class="pwe-heading mb-30 animate-box fadeInLeft animated" data-animate-effect="fadeInLeft">Video Gallery</h2>
                </div>
            </div>
            <div class="row">
                <!-- 2 columns -->
                <div class="col-md-6">
                    <div class="vid-area mb-30">
                        <div class="vid-icon"> <img src="{{ asset('assets/images/gallery/10.jpg') }}" alt="">
                            <a class="video-gallery-button vid" href="https://www.youtube.com/watch?v=teLhLLlhfzc&amp;ab_channel=Marcus%26Kristin">
                                <span class="video-gallery-polygon">
                                    <i class="ti-control-play"></i>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="vid-area mb-30">
                        <div class="vid-icon"> <img src="{{ asset('assets/images/gallery/11.jpg') }}" alt="">
                            <a class="video-gallery-button vid" href="https://www.youtube.com/watch?v=teLhLLlhfzc&amp;ab_channel=Marcus%26Kristin">
                                <span class="video-gallery-polygon">
                                    <i class="ti-control-play"></i>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 3 columns -->
                <div class="col-md-4">
                    <div class="vid-area mb-30">
                        <div class="vid-icon"> <img src="{{ asset('assets/images/gallery/12.jpg') }}" alt="">
                            <a class="video-gallery-button vid" href="https://www.youtube.com/watch?v=teLhLLlhfzc&amp;ab_channel=Marcus%26Kristin">
                                <span class="video-gallery-polygon">
                                    <i class="ti-control-play"></i>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="vid-area mb-30">
                        <div class="vid-icon"> <img src="{{ asset('assets/images/gallery/13.jpg') }}" alt="">
                            <a class="video-gallery-button vid" href="https://www.youtube.com/watch?v=teLhLLlhfzc&amp;ab_channel=Marcus%26Kristin">
                                <span class="video-gallery-polygon">
                                    <i class="ti-control-play"></i>
                                </span>
                            </a>

                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="vid-area mb-30">
                        <div class="vid-icon"> <img src="{{ asset('assets/images/gallery/14.jpg') }}" alt="">
                            <a class="video-gallery-button vid" href="https://www.youtube.com/watch?v=teLhLLlhfzc&amp;ab_channel=Marcus%26Kristin">
                                <span class="video-gallery-polygon">
                                    <i class="ti-control-play"></i>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection('content')
    @section('custom-scripts')

@endsection