@extends('layouts.front')

@section('content')
{{--    <header class="pageMainHead d-flex position-relative bgCover w-100 text-white" style="background-image: url(http://placehold.it/1920x300);">--}}
{{--        <div class="alignHolder d-flex w-100 align-items-center">--}}
{{--            <div class="align w-100 position-relative">--}}
{{--                <div class="container">--}}
{{--                    <h1 class="text-white mb-2">Conatct</h1>--}}
{{--                    <nav aria-label="breadcrumb">--}}
{{--                        <ol class="breadcrumb breadcrWhite rounded-0 border-0 p-0 fontAlter mb-0">--}}
{{--                            <li class="breadcrumb-item"><a href="home.html">Home</a></li>--}}
{{--                            <li class="breadcrumb-item active" aria-current="page">Conatct</li>--}}
{{--                        </ol>--}}
{{--                    </nav>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </header>--}}

    <div class="contactSectionWrap pt-7 pb-2 pt-md-10 pb-md-1 pt-lg-16 pb-lg-10 pt-xl-21 pb-xl-16">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 col-xl-5 mb-6">
                    <div class="pr-lg-10 pr-xl-20">
                        <header class="mb-8">
                            <h2 class="fwSemiBold h2Medium mb-4">Get In Touch</h2>
                            <p>We really appreciate you taking the time to get in touch. Please fill in the form below.</p>
                        </header>
                        <h4 class="fwSemiBold mb-3">City Hall</h4>
                        <ul class="list-unstyled contactInfoList mb-6">
                            <li>
                                <i class="fas fa-map-marker-alt icn position-absolute"><span class="sr-only">icon</span></i>
                                <strong class="text-lDark title">Address: </strong>345 Park Avenue, San Jose, CA 95110
                            </li>
                            <li>
                                <i class="fas fa-phone-alt icn position-absolute"><span class="sr-only">icon</span></i>
                                <strong class="text-lDark title">Call: </strong>1-800-7878-09
                            </li>
                            <li>
                                <i class="fas fa-envelope icn position-absolute"><span class="sr-only">icon</span></i>
                                <strong class="text-lDark title">Mail: </strong>egovt@example.com
                            </li>
                        </ul>
                        <h4 class="fwSemiBold mb-3">Opening Hours</h4>
                        <strong class="font-weight-normal d-block">Open Daily 10am–5pm Sunday Until 8pm.</strong>
                        <ul class="list-unstyled socialNetworks saSocialNetworks d-flex flex-wrap p-0 mb-0 mt-7">
                            <li>
                                <a href="javascript:void(0);" class="facebook">
                                    <i class="fab fa-facebook-square" aria-hidden="true"><span class="sr-only">facebook</span></i>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="twitter">
                                    <i class="fab fa-twitter" aria-hidden="true"><span class="sr-only">twitter</span></i>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="pinterest">
                                    <i class="fab fa-pinterest" aria-hidden="true"><span class="sr-only">pinterest</span></i>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="linkedin">
                                    <i class="fab fa-linkedin-in" aria-hidden="true"><span class="sr-only">linkedin-in</span></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-7">
                    <div class="widget bg-white shadow contactFormWidget ml-xl-n5 mb-7 mb-md-5">
                        <div class="pt-8 pb-10 px-4 px-md-6 px-xl-8">
                            <h2 class="fwSemiBold h3Medium mb-4">Leave your message</h2>
                            <form action="#" class="commentForm">
                                <div class="row mx-n2">
                                    <div class="col-12 col-sm-6 col-md-12 col-lg-6 px-2">
                                        <div class="form-group">
                                            <input type="text" class="form-control d-block w-100" placeholder="Name">
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-6 col-md-12 col-lg-6 px-2">
                                        <div class="form-group">
                                            <input type="email" class="form-control d-block w-100" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col-12 px-2">
                                        <div class="form-group">
                                            <input type="text" class="form-control d-block w-100" placeholder="Subject">
                                        </div>
                                    </div>
                                    <div class="col-12 px-2">
                                        <div class="form-group">
                                            <textarea class="form-control w-100 d-block" placeholder="Write your message&hellip;"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn btnTheme d-flex font-weight-bold text-capitalize position-relative border-0 p-0 mt-2 btnWidthSmall" data-hover="Send Message">
                                    <span class="d-block btnText">Send Message</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ctMapWrap position-relative w-100">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.540423056441!2d-0.12174238407507898!3d51.50330061882359!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604b900d26973%3A0x4291f3172409ea92!2slastminute.com%20London%20Eye!5e0!3m2!1sen!2s!4v1630905742902!5m2!1sen!2s" width="100%" height="594" allowfullscreen="" loading="lazy"></iframe>
    </div>
@endsection