@extends('frontend.layouts.app')
@section('title')
    Services
@endsection
@section('content')
    <div class="pageInerBnrSec__wr">
        <div class="container position-relative z-1">
            <div class="pageInerBnrBox">
                <picture class="inrBnrFigure">
                    <img src="images/services-banner-bg.jpg" loading="lazy" class="img-fluid" alt="inner-banner-bg" width="1680" height="1120">
                </picture>
                <div class="inrBnrBlock align-items-sm-end align-items-center">
                    <div class="inrBnrContentBlock text-center text-lg-start">
                        <h2 class="inrBnrBlockTitle">What We Offers</h2>
                        <div class="inrBnrContent">
                            <p>Porem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="servicesSec__wr bg-secondary text-white aspect-lg-unset mt-lg-n32px pt-lg-80px-plus-32px mt-sm-n4 pt-lg-48px-plus-24px pt-5 pb-lg-80px pb-5">
        <picture class="servicesOvrlayElmnt d-lg-block d-none">
            <img src="images/services-overlay-shape.png" loading="lazy" class="img-fluid" alt="services-overlay-shape" width="" height="">
        </picture>
        <div class="container position-relative">
            <div class="row row-gap-4 align-items-end mb-lg-64px mb-sm-40px mb-4">
                <div class="col-lg-auto col-12">
                    <div class="servicesSecHead w-100 mw-lg-450px text-center text-lg-start">
                        <h2 class="servicesSecHeadTitle mb-0">Mortgages Made Easy, Dreams Made Real</h2>
                    </div>
                </div>
                <div class="col-lg col-12">
                    <div class="servicesSecHeadContent w-100 mw-lg-612px ms-lg-auto text-center text-lg-start">
                        <p>Aut architecto ratione ex laboriosam voluptatum non dolorum modi et illum dolorem. Eos tempore officia est voluptatem laboriosam sed dolores facilis in perspiciatis praesentium aut Quis necessitatibus eos natus ratione.</p>
                    </div>
                </div>
            </div>
            <div class="servicesGridParent">
                <div class="row row-gap-4 justify-content-center">
                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="servicesBlock">
                            <picture class="servicesOvrlayFigure">
                                <img src="images/services-bg-1.jpg" loading="lazy" class="img-fluid" alt="services-bg" width="" height="">
                            </picture>
                            <div class="servicesContentBlock">
                                <div class="servicesContentHead">
                                    <div class="servicesIconBlock">
                                        <span class="servicesIcon">
                                            <img src="images/resource-scondary-icon-1.png" loading="lazy" class="img-fluid" alt="service-icon" width="32" height="32">
                                        </span>
                                    </div>
                                    <h2 class="servicesHeadTitle">Mortgages For First Time Property Buyers</h2>
                                </div>
                                <div class="servicesContent">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                                    <ul class="list-unstyled checked-list">
                                        <li>Fusce consectetur euismod</li>
                                        <li>Cras sit amet consequat lacus</li>
                                        <li>Class aptent taciti sociosqu</li>
                                    </ul>
                                    <div class="btnBlock">
                                        <a href="#" class="btn btn-primary rounded-pill" role="button">
                                            <span class="btnTitle">LEARN MORE</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="servicesBlock">
                            <picture class="servicesOvrlayFigure">
                                <img src="images/services-bg-1.jpg" loading="lazy" class="img-fluid" alt="services-bg" width="" height="">
                            </picture>
                            <div class="servicesContentBlock">
                                <div class="servicesContentHead">
                                    <div class="servicesIconBlock">
                                        <span class="servicesIcon">
                                            <img src="images/resource-scondary-icon-1.png" loading="lazy" class="img-fluid" alt="service-icon" width="32" height="32">
                                        </span>
                                    </div>
                                    <h2 class="servicesHeadTitle">Mortgages For First Time Property Buyers</h2>
                                </div>
                                <div class="servicesContent">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                                    <ul class="list-unstyled checked-list">
                                        <li>Fusce consectetur euismod</li>
                                        <li>Cras sit amet consequat lacus</li>
                                        <li>Class aptent taciti sociosqu</li>
                                    </ul>
                                    <div class="btnBlock">
                                        <a href="#" class="btn btn-primary rounded-pill" role="button">
                                            <span class="btnTitle">LEARN MORE</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="servicesBlock">
                            <picture class="servicesOvrlayFigure">
                                <img src="images/services-bg-1.jpg" loading="lazy" class="img-fluid" alt="services-bg" width="" height="">
                            </picture>
                            <div class="servicesContentBlock">
                                <div class="servicesContentHead">
                                    <div class="servicesIconBlock">
                                        <span class="servicesIcon">
                                            <img src="images/resource-scondary-icon-1.png" loading="lazy" class="img-fluid" alt="service-icon" width="32" height="32">
                                        </span>
                                    </div>
                                    <h2 class="servicesHeadTitle">Mortgages For First Time Property Buyers</h2>
                                </div>
                                <div class="servicesContent">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                                    <ul class="list-unstyled checked-list">
                                        <li>Fusce consectetur euismod</li>
                                        <li>Cras sit amet consequat lacus</li>
                                        <li>Class aptent taciti sociosqu</li>
                                    </ul>
                                    <div class="btnBlock">
                                        <a href="#" class="btn btn-primary rounded-pill" role="button">
                                            <span class="btnTitle">LEARN MORE</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="servicesBlock">
                            <picture class="servicesOvrlayFigure">
                                <img src="images/services-bg-1.jpg" loading="lazy" class="img-fluid" alt="services-bg" width="" height="">
                            </picture>
                            <div class="servicesContentBlock">
                                <div class="servicesContentHead">
                                    <div class="servicesIconBlock">
                                        <span class="servicesIcon">
                                            <img src="images/resource-scondary-icon-1.png" loading="lazy" class="img-fluid" alt="service-icon" width="32" height="32">
                                        </span>
                                    </div>
                                    <h2 class="servicesHeadTitle">Mortgages For First Time Property Buyers</h2>
                                </div>
                                <div class="servicesContent">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                                    <ul class="list-unstyled checked-list">
                                        <li>Fusce consectetur euismod</li>
                                        <li>Cras sit amet consequat lacus</li>
                                        <li>Class aptent taciti sociosqu</li>
                                    </ul>
                                    <div class="btnBlock">
                                        <a href="#" class="btn btn-primary rounded-pill" role="button">
                                            <span class="btnTitle">LEARN MORE</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="servicesBlock">
                            <picture class="servicesOvrlayFigure">
                                <img src="images/services-bg-1.jpg" loading="lazy" class="img-fluid" alt="services-bg" width="" height="">
                            </picture>
                            <div class="servicesContentBlock">
                                <div class="servicesContentHead">
                                    <div class="servicesIconBlock">
                                        <span class="servicesIcon">
                                            <img src="images/resource-scondary-icon-1.png" loading="lazy" class="img-fluid" alt="service-icon" width="32" height="32">
                                        </span>
                                    </div>
                                    <h2 class="servicesHeadTitle">Mortgages For First Time Property Buyers</h2>
                                </div>
                                <div class="servicesContent">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                                    <ul class="list-unstyled checked-list">
                                        <li>Fusce consectetur euismod</li>
                                        <li>Cras sit amet consequat lacus</li>
                                        <li>Class aptent taciti sociosqu</li>
                                    </ul>
                                    <div class="btnBlock">
                                        <a href="#" class="btn btn-primary rounded-pill" role="button">
                                            <span class="btnTitle">LEARN MORE</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="servicesBlock">
                            <picture class="servicesOvrlayFigure">
                                <img src="images/services-bg-1.jpg" loading="lazy" class="img-fluid" alt="services-bg" width="" height="">
                            </picture>
                            <div class="servicesContentBlock">
                                <div class="servicesContentHead">
                                    <div class="servicesIconBlock">
                                        <span class="servicesIcon">
                                            <img src="images/resource-scondary-icon-1.png" loading="lazy" class="img-fluid" alt="service-icon" width="32" height="32">
                                        </span>
                                    </div>
                                    <h2 class="servicesHeadTitle">Mortgages For First Time Property Buyers</h2>
                                </div>
                                <div class="servicesContent">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                                    <ul class="list-unstyled checked-list">
                                        <li>Fusce consectetur euismod</li>
                                        <li>Cras sit amet consequat lacus</li>
                                        <li>Class aptent taciti sociosqu</li>
                                    </ul>
                                    <div class="btnBlock">
                                        <a href="#" class="btn btn-primary rounded-pill" role="button">
                                            <span class="btnTitle">LEARN MORE</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="servicesBlock">
                            <picture class="servicesOvrlayFigure">
                                <img src="images/services-bg-1.jpg" loading="lazy" class="img-fluid" alt="services-bg" width="" height="">
                            </picture>
                            <div class="servicesContentBlock">
                                <div class="servicesContentHead">
                                    <div class="servicesIconBlock">
                                        <span class="servicesIcon">
                                            <img src="images/resource-scondary-icon-1.png" loading="lazy" class="img-fluid" alt="service-icon" width="32" height="32">
                                        </span>
                                    </div>
                                    <h2 class="servicesHeadTitle">Mortgages For First Time Property Buyers</h2>
                                </div>
                                <div class="servicesContent">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                                    <ul class="list-unstyled checked-list">
                                        <li>Fusce consectetur euismod</li>
                                        <li>Cras sit amet consequat lacus</li>
                                        <li>Class aptent taciti sociosqu</li>
                                    </ul>
                                    <div class="btnBlock">
                                        <a href="#" class="btn btn-primary rounded-pill" role="button">
                                            <span class="btnTitle">LEARN MORE</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="servicesBlock">
                            <picture class="servicesOvrlayFigure">
                                <img src="images/services-bg-1.jpg" loading="lazy" class="img-fluid" alt="services-bg" width="" height="">
                            </picture>
                            <div class="servicesContentBlock">
                                <div class="servicesContentHead">
                                    <div class="servicesIconBlock">
                                        <span class="servicesIcon">
                                            <img src="images/resource-scondary-icon-1.png" loading="lazy" class="img-fluid" alt="service-icon" width="32" height="32">
                                        </span>
                                    </div>
                                    <h2 class="servicesHeadTitle">Mortgages For First Time Property Buyers</h2>
                                </div>
                                <div class="servicesContent">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                                    <ul class="list-unstyled checked-list">
                                        <li>Fusce consectetur euismod</li>
                                        <li>Cras sit amet consequat lacus</li>
                                        <li>Class aptent taciti sociosqu</li>
                                    </ul>
                                    <div class="btnBlock">
                                        <a href="#" class="btn btn-primary rounded-pill" role="button">
                                            <span class="btnTitle">LEARN MORE</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="servicesBlock">
                            <picture class="servicesOvrlayFigure">
                                <img src="images/services-bg-1.jpg" loading="lazy" class="img-fluid" alt="services-bg" width="" height="">
                            </picture>
                            <div class="servicesContentBlock">
                                <div class="servicesContentHead">
                                    <div class="servicesIconBlock">
                                        <span class="servicesIcon">
                                            <img src="images/resource-scondary-icon-1.png" loading="lazy" class="img-fluid" alt="service-icon" width="32" height="32">
                                        </span>
                                    </div>
                                    <h2 class="servicesHeadTitle">Mortgages For First Time Property Buyers</h2>
                                </div>
                                <div class="servicesContent">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                                    <ul class="list-unstyled checked-list">
                                        <li>Fusce consectetur euismod</li>
                                        <li>Cras sit amet consequat lacus</li>
                                        <li>Class aptent taciti sociosqu</li>
                                    </ul>
                                    <div class="btnBlock">
                                        <a href="#" class="btn btn-primary rounded-pill" role="button">
                                            <span class="btnTitle">LEARN MORE</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hmContactSec__wr py-lg-80px py-5">
        <picture class="hmContactOvrlayFigure__wr">
            <img src="images/overlay-tri-angle-bg.jpg" loading="lazy" class="img-fluid" alt="overlay-tri-angle-bg" width="2560" height="1707">
        </picture>
        <div class="container position-relative">
            <div class="hmContSecHead text-center mb-lg-40px mb-4">
                <h2 class="hmContSecHeadTitle mb-0">Contact Us</h2>
            </div>
            <div class="hmContactBlockParent">
                <div class="row row-gap-4 gx-lg-0 align-items-lg-stretch">
                    <div class="col-lg-6 col-12">
                        <div class="hmContactFromBlock">
                            <div class="hmContactFromBlockHead text-center text-lg-start mb-lg-4 mb-3">
                                <h2 class="hmContactFromBlockHeadTitle mb-0">Get A Free Quote</h2>
                            </div>
                            <form class="hmContactFrom" action="">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group w-100 position-relative mb-10px">
                                            <input type="text" class="form-control" placeholder="Full Name">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group w-100 position-relative mb-10px">
                                            <input type="text" class="form-control contactNumber__wr" placeholder="Mobile No">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group w-100 position-relative mb-10px">
                                            <input type="email" class="form-control" placeholder="Email Address">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group w-100 position-relative mb-4">
                                            <textarea class="form-control" rows="4" placeholder="Message..."></textarea>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group w-100 position-relative btnBlock">
                                            <button class="btn btn-primary rounded-pill w-sm-auto w-100 px-sm-96px" type="submit">
                                                <span class="btnTitle">SEND</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12 d-lg-block d-none">
                        <picture class="hmContactFigure">
                            <img src="images/contact-bg.png" loading="lazy" class="img-fluid" alt="contact-bg" width="" height="">
                        </picture>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="serAsistSec__wr bg-white py-lg-80px py-5">
        <div class="container">
            <div class="row row-gap-4 gx-lg-5vw align-items-lg-center">
                <div class="col-xxl-7 col-lg-6 col-12">
                    <div class="serAsistFigureBlock">
                        <picture class="serAsistFigure asistFigureOne">
                            <img src="images/service-assist-bg-1.jpg" loading="lazy" class="img-fluid" alt="service-assist-bg" width="" height="">
                        </picture>
                        <picture class="serAsistFigure asistFigureTwo">
                            <img src="images/service-assist-bg-2.jpg" loading="lazy" class="img-fluid" alt="service-assist-bg" width="" height="">
                        </picture>
                        <picture class="serAsistFigure asistFigureThree">
                            <img src="images/service-assist-bg-3.jpg" loading="lazy" class="img-fluid" alt="service-assist-bg" width="" height="">
                        </picture>
                    </div>
                </div>
                <div class="col-xxl-5 col-lg-6 col-12">
                    <div class="serAsistContentBlock">
                        <div class="serAsistContentHead mb-lg-40px mb-4">
                            <h2 class="serAsistContentHeadTitle mb-0">Let Us Assist You In Obtaining Your Property</h2>
                        </div>
                        <div class="serAsistContent">
                            <ul class="list-unstyled asistTimeLineBlock mb-0">
                                <li>
                                    <div class="asistTimeLNumCount"><span>01</span></div>
                                    <div class="asistTimeLContentBlock">
                                        <h2 class="asistTimeLContentTitle">Initially Consulted</h2>
                                        <div class="asistTimeLContent">
                                            <p>33 asperiores laudantium sit sapiente doloremque et impedit delectus. At architecto voluptate At vitae harum qui amet eaque. Nam itaque assumenda sed excepturi dignissimos ut repellendus nemo quo omnis beatae.</p>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="asistTimeLNumCount"><span>02</span></div>
                                    <div class="asistTimeLContentBlock">
                                        <h2 class="asistTimeLContentTitle">Document Collection</h2>
                                        <div class="asistTimeLContent">
                                            <p>33 asperiores laudantium sit sapiente doloremque et impedit delectus. At architecto voluptate At vitae harum qui amet eaque. Nam itaque assumenda sed excepturi dignissimos ut repellendus nemo quo omnis beatae.</p>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="asistTimeLNumCount"><span>03</span></div>
                                    <div class="asistTimeLContentBlock">
                                        <h2 class="asistTimeLContentTitle">Evaluation & Approval</h2>
                                        <div class="asistTimeLContent">
                                            <p>33 asperiores laudantium sit sapiente doloremque et impedit delectus. At architecto voluptate At vitae harum qui amet eaque. Nam itaque assumenda sed excepturi dignissimos ut repellendus nemo quo omnis beatae.</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
<script>
    $(document).ready(function(){
			// PHONE NUMBER COUNTRY CODES
	        const mobileNumbr = document.querySelector(".contactNumber__wr");
	        // const practitionerSignUpModalTel = document.querySelector(".phoneNumber__wr");
	        window.intlTelInput(mobileNumbr, {
	            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
	            // option to hide the flags - must be used with separateDialCode, or allowDropdown=false
	            showFlags: false,
	            // display the country dial code next to the selected flag
	            separateDialCode: true,
	        });
		});
</script>
@endsection