@section('meta')
<title>{{__('message.photo video graphy')}}</title>
    <meta property="og:title" content="{{__('message.photo video graphy')}}" />
    <meta property="og:description" content="{{__('message.photo-videography type desc')}}" />
    <meta name="twitter:title" content="{{__('message.photo video graphy')}}" />
    <meta name="twitter:description" content="{{__('message.photo-videography type desc')}}" />
@endsection

@push('styles')

@endpush

@push('header')
    <x-header />
@endpush

<div>
    <section class="photo-video py-50">
        <div class="container">
            <div class="row">
                <div class="col-md-6 align-self-center">
                    <h1 class="font-title text-warning text-uppercase fw-bolder" data-aos="zoom-in">{{__('message.photo video graphy')}}</h1>
                    <p data-aos="zoom-in">{{__('message.photo desc')}}</p>
                    <div class="d-flex justify-content-center py-4">
                        <a href="#packages" class="btn btn-warning text-warning bg-transparent rounded-pill mx-2 fw-bold d-flex align-items-center text-uppercase" data-aos="zoom-in">{{__('message.join package')}} <i class='bx bx-right-arrow-alt ms-2' ></i></a>
                        <a href="https://www.youtube.com/watch?v=FSlj7_Fi8Us" class="image-link mx-2 text-decoration-none d-flex justify-content-center align-items-center opacity-75" data-aos="zoom-in">
                            <i class='bx bx-play-circle p-2 me-2 text-bg'></i>{{__('message.intro video')}}
                        </a>
                    </div>
                </div>
                <div class="col-md-6 js-tilt">
                    <img src="{{ asset('img/photo-video/top-image.png') }}" alt="top-image" class="w-100" data-aos="zoom-in">
                </div>
            </div>
        </div>
    </section>

    <section class="pv-type py-50">
        <div class="container">
            <div class="d-flex justify-content-center">
                <h2 class="text-warning position-relative after-border lh-sm" data-aos="zoom-in">{{__('message.photo-videography type')}}</h2>
            </div>
            <p class="text-center" data-aos="zoom-in">{{__('message.photo-videography type desc')}}</p>
            <div class="row">
                <div class="card col-md-3 border-0 bg-switch" data-aos="zoom-in">
                    <a href="#" class="sale text-decoration-none">
                        <h6 class="text-center text-uppercase font-title fw-bolder">{{__('message.event')}}</h6>
                        <img class="img-thumbnail" src="{{ asset('img/photo-video/type/event.jpg') }}" width="auto" height="auto" alt="thumbnail">
                    </a> 
                </div>
                <div class="card col-md-3 border-0 bg-switch" data-aos="zoom-in">
                    <a href="#" class="sale text-decoration-none">
                        <h6 class="text-center text-uppercase font-title fw-bolder">{{__('message.pre-wedding')}}</h6>
                        <img class="img-thumbnail" src="{{ asset('img/photo-video/type/pre-wedding.jpg') }}" width="auto" height="auto" alt="thumbnail">
                    </a> 
                </div>
                <div class="card col-md-3 border-0 bg-switch" data-aos="zoom-in">
                    <a href="#" class="sale text-decoration-none">
                        <h6 class="text-uppercase text-center font-title">{{__('message.portrait')}}</h6>
                        <img class="img-thumbnail" src="{{ asset('img/photo-video/type/portrait.jpg') }}" width="auto" height="auto" alt="thumbnail">
                    </a> 
                </div>
                <div class="card col-md-3 border-0 bg-switch" data-aos="zoom-in">
                    <a href="#" class="sale text-decoration-none">
                        <h6 class="text-center text-uppercase font-title fw-bolder">{{__('message.real estate')}}</h6>
                        <img class="img-thumbnail" src="{{ asset('img/photo-video/type/real-estate.jpg') }}" width="auto" height="auto" alt="thumbnail">
                    </a> 
                </div>
            </div>
        </div>
    </section>

    <section class="p-lovers py-50">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <img src="{{ asset('img/photo-video/photolovers.jpg') }}" alt="photolovers" class="w-100 shadow rounded" data-aos="zoom-in">
                </div>
                <div class="col-md-6 align-self-center">
                    <h1 class="text-warning text-capitalize fw-bolder position-relative after-border lh-sm" data-aos="zoom-in">Photolovers-mini</h1>
                    <p data-aos="zoom-in">{{__('message.photolovers desc')}}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="p-sque py-50">
        <div class="container">
            <div class="row">
                <div class="col-md-6 align-self-center">
                    <h1 class="text-warning text-capitalize fw-bolder position-relative after-border lh-sm" data-aos="zoom-in">Picturesque</h1>
                    <p data-aos="zoom-in">{{__('message.phicturesque desc')}}</p>
                </div>
                <div class="col-md-6">
                    <img src="{{ asset('img/photo-video/picturesque.jpg') }}" alt="picturesque" class="w-100 shadow rounded" data-aos="zoom-in">
                </div>
            </div>
        </div>
    </section>

    <section class="pv-package py-50" id="packages">
        <div class="container">
            <h2 class="text-center text-uppercase font-title text-warning fw-bolder" data-aos="zoom-in">{{__('message.join package')}}</h2>
            <p class="text-center" data-aos="zoom-in">{{__('message.package desc')}}</p>
            <div class="row text-center align-items-end">
                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-4 my-md-1 my-lg-2 my-lg-0 px-2">
                    <div class="package-item pt-0 p-3 rounded shadow">
                        <h6 class="text-uppercase px-4 py-1 bg-warning text-white shadow mb-4 package-name fw-bolder font-title" data-aos="zoom-in">{{__('message.b-title')}}</h6>
                        <h4 class="price" data-aos="zoom-in">$200</h4>
                        <div class="custom-separator my-4 mx-auto bg-warning"></div>
                        <ul class="list-unstyled my-2 text-small text-left">
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.b-1')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.b-2')}} 
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.b-3')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.photo-editing')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.photo-upload')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.where-print')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.print-release')}}
                            </li>
                            <li class="mb-4 text-muted" data-aos="zoom-in">
                                <del>{{__('message.perfect')}}</del>
                            </li>
                        </ul> 
                        <a href="{{ route('contact',app()->getLocale()) }}" class="font-title btn btn-outline-warning btn-lg btn-custom" data-aos="zoom-in">{{__('message.join-now')}}</a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-4 my-md-1 my-lg-2 my-lg-0 px-2">
                    <div class="package-item pt-0 p-3 rounded shadow">
                        <h6 class="text-uppercase px-4 py-1 bg-warning text-white shadow mb-4 package-name fw-bolder font-title" data-aos="zoom-in">{{__('message.s-title')}}</h6>
                        <h4 class="price" data-aos="zoom-in">$400</h4>
                        <div class="custom-separator my-4 mx-auto bg-warning"></div>
                        <ul class="list-unstyled my-2 text-small text-left">
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.s-1')}} 
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.s-2')}}  
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.s-3')}}  
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.photo-editing')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.photo-upload')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.where-print')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.print-release')}}
                            </li>
                            <li class="mb-4 text-muted" data-aos="zoom-in">
                                 <del>{{__('message.perfect')}}</del>
                            </li>
                        </ul> 
                        <a href="{{ route('contact',app()->getLocale()) }}" class="font-title btn btn-outline-warning btn-lg btn-custom" data-aos="zoom-in">{{__('message.join-now')}}</a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-4 my-md-1 my-lg-2 my-lg-0 px-2 offset-sm-3 offset-xl-0">
                    <div class="package-item pt-0 p-3 rounded shadow">
                        <h6 class="text-uppercase px-4 py-1 bg-warning text-white shadow mb-4 package-name fw-bolder font-title" data-aos="zoom-in">{{__('message.g-title')}}</h6>
                        <h4 class="price" data-aos="zoom-in">$600</h4>
                        <div class="custom-separator my-4 mx-auto bg-warning"></div>
                        <ul class="list-unstyled my-2 text-small text-left">
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.g-1')}} 
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.g-2')}} 
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.g-3')}} 
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.photo-editing')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.photo-upload')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.where-print')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.print-release')}}
                            </li>
                            <li class="mb-4" data-aos="zoom-in">
                                {{__('message.perfect')}} 
                            </li>
                        </ul> 
                        <a href="{{ route('contact',app()->getLocale()) }}" class="font-title btn btn-outline-warning btn-lg btn-custom" data-aos="zoom-in">{{__('message.join-now')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@push('scripts')
    <script src="{{ mix('js/magnific-popup.js') }}"></script>
@endpush