<?php include('../components/pages.head.php'); ?>
<body>
    <?php include('../components/pages.header.php'); ?>
    
    <main>
        <!-- Breadcrumbs S t a r t -->
        <section class="breadcrumbs-area breadcrumb-bg">
            <div class="container">
                <h1 class="title wow fadeInUp" data-wow-delay="0.0s">
                    Mortgages as individual as you are
                </h1>
            </div>
        </section>
        <!--/ End-of Breadcrumbs-->


        <!-- Destination area S t a r t -->
        <section class="tour-details-section section-padding2">
            <div class="tour-details-area">

                <!-- Details Banner Slider -->
                <div class="tour-details-banner">
                    <div class="swiper tourSwiper-active">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="../assets/images/mortgages/mortgage4.jpg" alt="travello">
                            </div>
                            <div class="swiper-slide">
                                <img src="../assets/images/mortgages/mortgage3.jpg" alt="travello">
                            </div>
                            <div class="swiper-slide">
                                <img src="../assets/images/mortgages/mortgage2.jpg" alt="travello">
                            </div>
                            <div class="swiper-slide">
                                <img src="../assets/images/mortgages/mortgage1.jpg" alt="travello">
                            </div>
                        </div>
                        <div class="swiper-button-next"><i class="ri-arrow-right-s-line"></i></div>
                        <div class="swiper-button-prev"><i class="ri-arrow-left-s-line"></i></div>
                    </div>
                </div>
                <!-- / Slider-->

                <div class="tour-details-container">
                    <div class="container">

                        <!-- Details Heading -->
                        <div class="details-heading">
                            <div class="d-flex flex-column">
                                <h4 class="title">
                                    Explore Available Mortgages
                                </h4>
                                <div class="d-flex flex-wrap align-items-center gap-30 mt-16">
                                    <div class="location">
                                        <div class="name">
                                            Buying a home
                                        </div>
                                    </div>
                                    <div class="divider"></div>
                                     <div class="location">
                                        <div class="name">
                                            Refinancing your mortgage
                                        </div>
                                    </div>
                                    <div class="divider"></div>
                                     <div class="location">
                                        <div class="name">
                                            Buy-to-let mortgages
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="price-review">
                                <div class="d-flex gap-10 align-items-end">
                                    <p class="light-pera">Interested?</p>
                                    <p class="pera">Get Started</p>
                                </div>
                                <div class="rating">
                                    <i class="ri-star-s-fill"></i>
                                    <i class="ri-star-s-fill"></i>
                                    <i class="ri-star-s-fill"></i>
                                    <i class="ri-star-s-fill"></i>
                                    <i class="ri-star-s-fill"></i>
                                    <p class="pera">4.8 (304k+ Reviews)</p>
                                </div>
                            </div>
                        </div>
                        <!-- / Details Heading -->

                        <div class="mt-30">
                            <div class="row g-4">
                                <!-- Left content -->
                                <div class="col-xl-8 col-lg-7">

                                    <!-- About tour -->
                                    <div class="tour-details-content">
                                        <h4 class="title">
                                            Looking for a mortgage? Let our team of experts guide you. They’ll take the time to 
                                            ask about your individual circumstances and give advice that’s tailored to you.
                                        </h4>
                                        <p class="pera">
                                            Whether it’s your first time or you’re an old hand, look no further for personalised mortgage advice.
                                        </p>
                                        <h4 class="title"></h4>
                                        <p class="pera">
                                            Build up your property portfolio with the help of our dedicated mortgage advisors.
                                        </p>
                                        <hr style="1px solid dashed">
                                        <h4 class="title">Mortgage Payment</h4>
                                        <p class="pera">
                                            Having trouble paying your mortgage? Our mortgage payment support page tells you how we can help, and has information about The Mortgage Charter. 
                                            Please do let us know sooner rather than later if you are struggling.
                                        </p>
                                    </div>
                                    <!-- / About tour -->

                                    <!-- Tour Include Exclude -->
                                    <div class="tour-include-exclude radius-6">
                                        <div class="includ-exclude-point">
                                            <h4 class="title">Buildings and contents insurance</h4>
                                            <h4 class="title">
                                                Buildings insurance
                                            </h4>
                                        </div>
                                        <div class="divider"></div>
                                        <div class="includ-exclude-point">
                                            <h4 class="title">Refinancing</h4>
                                            <ul class="expect-list">
                                                <li class="list">
                                                    Refinancing can help you lower your monthly payment, pay off your loan sooner, or tap into the equity you've already built into your home. Weigh the pros and cons to see if refinancing is right for you. 
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- / Tour Include Exclude -->

                                    

                                    
                                </div>

                                <!-- Right content -->
                                <div class="col-xl-4 col-lg-5">
                                    <div class="date-travel-card position-sticky top-0">
                                        <div class="price-review">
                                            <div class="d-flex gap-10 align-items-end">
                                                
                                                <p class="pera">
                                                    Check Availability
                                                </p>
                                            </div>
                                            <div class="rating">
                                                <p class="pera">login to your account to start</p>
                                            </div>
                                        </div>
                                        <h4 class="heading-card">Please Input your account information to login</h4>
                                        
                                        <div class="mt-30">
                                            <a href="../login" type="submit" class="send-btn w-100">Check Availability</a>
                                        </div>
                                        <div class="footer bg-transparent">
                                            <h4 class="title">Free Cancellation</h4>
                                            <p class="pera">Up to 24 hours in advance</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--/ End-of Destination -->
    </main>

   <?php include ('../components/pages.footer.php'); ?>